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><a href="https://indieweb.org"><img src="/assets/img/iwc.png" alt="Indie Web Camp logo" class="iwc-logo"></a></p>
|
||||
</footer>
|
||||
<script src="/assets/js/colours.js" async defer></script>
|
||||
@if (config('app.piwik') === true)
|
||||
<!-- Piwik -->
|
||||
<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',
|
||||
entry: {
|
||||
//app: './app.js',
|
||||
colours: './colours.js',
|
||||
links: './links.js',
|
||||
maps: './maps.js',
|
||||
newnote: './newnote.js',
|
||||
piwik: './piwik.js',
|
||||
places: './places.js',
|
||||
colours: './colours.js'
|
||||
places: './places.js'
|
||||
},
|
||||
output: {
|
||||
path: __dirname + '/public/assets/js',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue