Remove newnote es6, add script tag linking to colour scheme management
This commit is contained in:
parent
bd6c1d1373
commit
d7c031a888
7 changed files with 3 additions and 237 deletions
80
resources/assets/es6/nearby-places.js
vendored
80
resources/assets/es6/nearby-places.js
vendored
|
|
@ -1,80 +0,0 @@
|
||||||
//nearby-places.js
|
|
||||||
|
|
||||||
import alertify from 'alertify.js';
|
|
||||||
import addMap from './mapbox-utils';
|
|
||||||
import parseLocation from './parse-location';
|
|
||||||
import makeNewPlaceForm from './newplace-micropub';
|
|
||||||
|
|
||||||
const makeOptionsForForm = (map, position, places = null) => {
|
|
||||||
//create the <select> element and give it a no location default
|
|
||||||
let selectElement = document.createElement('select');
|
|
||||||
selectElement.setAttribute('name', 'location');
|
|
||||||
let noLocationOption = document.createElement('option');
|
|
||||||
noLocationOption.setAttribute('selected', 'selected');
|
|
||||||
noLocationOption.setAttribute('value', 'no-location');
|
|
||||||
noLocationOption.appendChild(document.createTextNode('Don’t send location'));
|
|
||||||
selectElement.appendChild(noLocationOption);
|
|
||||||
let geoLocationOption = document.createElement('option');
|
|
||||||
geoLocationOption.setAttribute('id', 'option-coords');
|
|
||||||
geoLocationOption.setAttribute('value', 'geo:' + position.coords.latitude + ',' + position.coords.longitude);
|
|
||||||
geoLocationOption.dataset.latitude = position.coords.latitude;
|
|
||||||
geoLocationOption.dataset.longitude = position.coords.longitude;
|
|
||||||
geoLocationOption.appendChild(document.createTextNode('Send co-ordinates'));
|
|
||||||
selectElement.appendChild(geoLocationOption);
|
|
||||||
if (places != null) {
|
|
||||||
for (let place of places) {
|
|
||||||
let parsedCoords = parseLocation(place.location);
|
|
||||||
let option = document.createElement('option');
|
|
||||||
option.setAttribute('value', place.uri);
|
|
||||||
option.dataset.latitude = parsedCoords.latitude;
|
|
||||||
option.dataset.longitude = parsedCoords.longitude;
|
|
||||||
option.appendChild(document.createTextNode(place.name));
|
|
||||||
selectElement.appendChild(option);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//add an event listener
|
|
||||||
selectElement.addEventListener('change', function () {
|
|
||||||
if (selectElement.value !== 'no-location') {
|
|
||||||
let optionLatitude = selectElement[selectElement.selectedIndex].dataset.latitude;
|
|
||||||
let optionLongitude = selectElement[selectElement.selectedIndex].dataset.longitude;
|
|
||||||
map.flyTo({center: [optionLongitude, optionLatitude]});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return selectElement;
|
|
||||||
};
|
|
||||||
|
|
||||||
//position is output of navigator.geolocation call
|
|
||||||
export default function addMapWithPlaces(div, position) {
|
|
||||||
fetch('/micropub/places?latitude=' + position.coords.latitude + '&longitude=' + position.coords.longitude + '&u=' + position.coords.accuracy, {
|
|
||||||
credentials: 'same-origin',
|
|
||||||
method: 'get'
|
|
||||||
}).then(function (response) {
|
|
||||||
if (response.ok) {
|
|
||||||
return response.json();
|
|
||||||
} else {
|
|
||||||
alertify.reset();
|
|
||||||
alertify.error('Non OK response');
|
|
||||||
}
|
|
||||||
}).then(function (json) {
|
|
||||||
if (json.error == true) {
|
|
||||||
alertify.reset();
|
|
||||||
alertify.error(json.error_description);
|
|
||||||
}
|
|
||||||
let places = null;
|
|
||||||
if (json.places.length > 0) {
|
|
||||||
places = json.places;
|
|
||||||
}
|
|
||||||
let map = addMap(div, position, places);
|
|
||||||
//create a containting div for flexbox styling purposes
|
|
||||||
let flexboxDiv = document.createElement('div');
|
|
||||||
let options = makeOptionsForForm(map, position, places);
|
|
||||||
flexboxDiv.appendChild(options);
|
|
||||||
let newPlaceForm = makeNewPlaceForm(map);
|
|
||||||
flexboxDiv.appendChild(newPlaceForm);
|
|
||||||
let form = document.querySelector('fieldset');
|
|
||||||
form.insertBefore(flexboxDiv, document.querySelector('.map'));
|
|
||||||
}).catch(function (error) {
|
|
||||||
console.error(error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
14
resources/assets/es6/newnote-button.js
vendored
14
resources/assets/es6/newnote-button.js
vendored
|
|
@ -1,14 +0,0 @@
|
||||||
//newnote-button.js
|
|
||||||
|
|
||||||
import getLocation from './newnote-getlocation';
|
|
||||||
|
|
||||||
export default function enableLocateButton(button) {
|
|
||||||
if ('geolocation' in navigator) {
|
|
||||||
if (button.addEventListener) {
|
|
||||||
//if we have javascript, event listeners and geolocation
|
|
||||||
//make the locate button clickable and add event
|
|
||||||
button.disabled = false;
|
|
||||||
button.addEventListener('click', getLocation);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
16
resources/assets/es6/newnote-getlocation.js
vendored
16
resources/assets/es6/newnote-getlocation.js
vendored
|
|
@ -1,16 +0,0 @@
|
||||||
//newnote-getlocation.js
|
|
||||||
|
|
||||||
import addMapWithPlaces from './nearby-places';
|
|
||||||
|
|
||||||
export default function getLocation() {
|
|
||||||
let container = document.querySelector('fieldset');
|
|
||||||
let mapDiv = document.createElement('div');
|
|
||||||
mapDiv.classList.add('map');
|
|
||||||
container.appendChild(mapDiv);
|
|
||||||
navigator.geolocation.getCurrentPosition(function (position) {
|
|
||||||
mapDiv.dataset.latitude = position.coords.latitude;
|
|
||||||
mapDiv.dataset.longitude = position.coords.longitude;
|
|
||||||
mapDiv.dataset.accuracy = position.coords.accuracy;
|
|
||||||
addMapWithPlaces(mapDiv, position);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
8
resources/assets/es6/newnote.js
vendored
8
resources/assets/es6/newnote.js
vendored
|
|
@ -1,8 +0,0 @@
|
||||||
//newnote.js
|
|
||||||
|
|
||||||
import enableLocateButton from './newnote-button';
|
|
||||||
import persistFormData from './persist-form';
|
|
||||||
|
|
||||||
let button = document.querySelector('#locate');
|
|
||||||
enableLocateButton(button);
|
|
||||||
persistFormData();
|
|
||||||
116
resources/assets/es6/newplace-micropub.js
vendored
116
resources/assets/es6/newplace-micropub.js
vendored
|
|
@ -1,116 +0,0 @@
|
||||||
//newplace-micropub.js
|
|
||||||
|
|
||||||
import submitNewPlace from './submit-place';
|
|
||||||
|
|
||||||
export default function makeNewPlaceForm(map) {
|
|
||||||
//add a button to add a new place
|
|
||||||
let newLocationButton = document.createElement('button');
|
|
||||||
newLocationButton.setAttribute('type', 'button');
|
|
||||||
newLocationButton.setAttribute('id', 'create-new-place');
|
|
||||||
newLocationButton.appendChild(document.createTextNode('Create New Place?'));
|
|
||||||
//the event listener
|
|
||||||
newLocationButton.addEventListener('click', function() {
|
|
||||||
//add an icon
|
|
||||||
let latitude = map.getCenter().lat;
|
|
||||||
let longitude = map.getCenter().lng;
|
|
||||||
map.addSource('new-place', {
|
|
||||||
'type': 'geojson',
|
|
||||||
'data': {
|
|
||||||
'type': 'FeatureCollection',
|
|
||||||
'features': [
|
|
||||||
{
|
|
||||||
'type': 'Feature',
|
|
||||||
'geometry': {
|
|
||||||
'type': 'Point',
|
|
||||||
'coordinates': [longitude, latitude]
|
|
||||||
},
|
|
||||||
'properties': {
|
|
||||||
'title': '',
|
|
||||||
'icon': 'circle'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
map.addLayer({
|
|
||||||
'id': 'new-place',
|
|
||||||
'type': 'symbol',
|
|
||||||
'source': 'new-place',
|
|
||||||
'layout': {
|
|
||||||
'icon-image': '{icon}-15',
|
|
||||||
'text-field': '{title}',
|
|
||||||
'text-offset': [0, 1]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
//add the form elements
|
|
||||||
let newPlaceNameDiv = document.createElement('div');
|
|
||||||
let newPlaceNameLabel = document.createElement('label');
|
|
||||||
newPlaceNameLabel.setAttribute('for', 'place-name');
|
|
||||||
newPlaceNameLabel.classList.add('place-label');
|
|
||||||
newPlaceNameLabel.appendChild(document.createTextNode('Name:'));
|
|
||||||
let newPlaceNameInput = document.createElement('input');
|
|
||||||
newPlaceNameInput.setAttribute('placeholder', 'Name');
|
|
||||||
newPlaceNameInput.setAttribute('name', 'place-name');
|
|
||||||
newPlaceNameInput.setAttribute('id', 'place-name');
|
|
||||||
newPlaceNameInput.setAttribute('type', 'text');
|
|
||||||
newPlaceNameInput.addEventListener('keyup', function () {
|
|
||||||
let source = map.getSource('new-place');
|
|
||||||
source._data.features[0].properties.title = newPlaceNameInput.value;
|
|
||||||
map.getSource('new-place').setData(source._data);
|
|
||||||
});
|
|
||||||
newPlaceNameDiv.appendChild(newPlaceNameLabel);
|
|
||||||
newPlaceNameDiv.appendChild(newPlaceNameInput);
|
|
||||||
let newPlaceDescDiv = document.createElement('div');
|
|
||||||
let newPlaceDescLabel = document.createElement('label');
|
|
||||||
newPlaceDescLabel.setAttribute('for', 'place-description');
|
|
||||||
newPlaceDescLabel.classList.add('place-label');
|
|
||||||
newPlaceDescLabel.appendChild(document.createTextNode('Description:'));
|
|
||||||
let newPlaceDescInput = document.createElement('input');
|
|
||||||
newPlaceDescInput.setAttribute('placeholder', 'Description');
|
|
||||||
newPlaceDescInput.setAttribute('name', 'place-description');
|
|
||||||
newPlaceDescInput.setAttribute('id', 'place-description');
|
|
||||||
newPlaceDescInput.setAttribute('type', 'text');
|
|
||||||
newPlaceDescDiv.appendChild(newPlaceDescLabel);
|
|
||||||
newPlaceDescDiv.appendChild(newPlaceDescInput);
|
|
||||||
let newPlaceLatitudeDiv = document.createElement('div');
|
|
||||||
var newPlaceLatitudeLabel = document.createElement('label');
|
|
||||||
newPlaceLatitudeLabel.setAttribute('for', 'place-latitude');
|
|
||||||
newPlaceLatitudeLabel.classList.add('place-label');
|
|
||||||
newPlaceLatitudeLabel.appendChild(document.createTextNode('Latitude:'));
|
|
||||||
let newPlaceLatitudeInput = document.createElement('input');
|
|
||||||
newPlaceLatitudeInput.setAttribute('name', 'place-latitude');
|
|
||||||
newPlaceLatitudeInput.setAttribute('id', 'place-latitude');
|
|
||||||
newPlaceLatitudeInput.setAttribute('type', 'text');
|
|
||||||
newPlaceLatitudeInput.value = map.getCenter().lat;
|
|
||||||
newPlaceLatitudeDiv.appendChild(newPlaceLatitudeLabel);
|
|
||||||
newPlaceLatitudeDiv.appendChild(newPlaceLatitudeInput);
|
|
||||||
let newPlaceLongitudeDiv = document.createElement('div');
|
|
||||||
let newPlaceLongitudeLabel = document.createElement('label');
|
|
||||||
newPlaceLongitudeLabel.setAttribute('for', 'place-longitude');
|
|
||||||
newPlaceLongitudeLabel.classList.add('place-label');
|
|
||||||
newPlaceLongitudeLabel.appendChild(document.createTextNode('Longitude:'));
|
|
||||||
let newPlaceLongitudeInput = document.createElement('input');
|
|
||||||
newPlaceLongitudeInput.setAttribute('name', 'place-longitude');
|
|
||||||
newPlaceLongitudeInput.setAttribute('id', 'place-longitude');
|
|
||||||
newPlaceLongitudeInput.setAttribute('type', 'text');
|
|
||||||
newPlaceLongitudeInput.value = map.getCenter().lng;
|
|
||||||
newPlaceLongitudeDiv.appendChild(newPlaceLongitudeLabel);
|
|
||||||
newPlaceLongitudeDiv.appendChild(newPlaceLongitudeInput);
|
|
||||||
let newPlaceSubmit = document.createElement('button');
|
|
||||||
newPlaceSubmit.setAttribute('id', 'place-submit');
|
|
||||||
newPlaceSubmit.setAttribute('name', 'place-submit');
|
|
||||||
newPlaceSubmit.setAttribute('type', 'button');
|
|
||||||
newPlaceSubmit.appendChild(document.createTextNode('Submit New Place'));
|
|
||||||
newPlaceSubmit.addEventListener('click', function () {
|
|
||||||
submitNewPlace(map);
|
|
||||||
});
|
|
||||||
let form = document.querySelector('fieldset');
|
|
||||||
form.appendChild(newPlaceNameDiv);
|
|
||||||
form.appendChild(newPlaceDescDiv);
|
|
||||||
form.appendChild(newPlaceLatitudeDiv);
|
|
||||||
form.appendChild(newPlaceLongitudeDiv);
|
|
||||||
form.appendChild(newPlaceSubmit);
|
|
||||||
});
|
|
||||||
|
|
||||||
return newLocationButton;
|
|
||||||
}
|
|
||||||
|
|
@ -59,6 +59,7 @@
|
||||||
<p>Built with love: <a href="/colophon">Colophon</a></p>
|
<p>Built with love: <a href="/colophon">Colophon</a></p>
|
||||||
<p><a href="https://indieweb.org"><img src="/assets/img/iwc.png" alt="Indie Web Camp logo" class="iwc-logo"></a></p>
|
<p><a href="https://indieweb.org"><img src="/assets/img/iwc.png" alt="Indie Web Camp logo" class="iwc-logo"></a></p>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script src="/assets/js/colours.js" async defer></script>
|
||||||
@if (config('app.piwik') === true)
|
@if (config('app.piwik') === true)
|
||||||
<!-- Piwik -->
|
<!-- Piwik -->
|
||||||
<script src="https://analytics.jmb.lv/piwik.js" async defer></script>
|
<script src="https://analytics.jmb.lv/piwik.js" async defer></script>
|
||||||
|
|
|
||||||
5
webpack.config.js
vendored
5
webpack.config.js
vendored
|
|
@ -5,12 +5,11 @@ const config = {
|
||||||
context: __dirname + '/resources/assets/es6',
|
context: __dirname + '/resources/assets/es6',
|
||||||
entry: {
|
entry: {
|
||||||
//app: './app.js',
|
//app: './app.js',
|
||||||
|
colours: './colours.js',
|
||||||
links: './links.js',
|
links: './links.js',
|
||||||
maps: './maps.js',
|
maps: './maps.js',
|
||||||
newnote: './newnote.js',
|
|
||||||
piwik: './piwik.js',
|
piwik: './piwik.js',
|
||||||
places: './places.js',
|
places: './places.js'
|
||||||
colours: './colours.js'
|
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
path: __dirname + '/public/assets/js',
|
path: __dirname + '/public/assets/js',
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue