jonny/jonnybarnes.uk
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases 5 Packages Wiki Activity Actions

Updating codebase to use es6/7

Browse source 
Squashed commit of the following:

commit 07b27d00f135a521143154a2e77abdc1680b7d5b
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Jan 26 14:59:35 2017 +0000

    Fix styleci.io issue

commit 9e67f0a96484f8047f22d13abb4cd41c2e44b95d
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Jan 26 08:28:22 2017 +0000

    Remove some unused dependencies

commit 3c65070f3ff2aec10d821ae9f12821bc08e37d0a
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 25 18:00:10 2017 +0000

    Compressed webpack/babel output

commit 694c43d1a9a6c8cb84d4cc789a6643b8d2863cec
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 25 17:59:27 2017 +0000

    Let’s compress the es5 output

commit debffc0e41760fcc87e6d3768163e6ed8ea5d98c
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 25 17:45:05 2017 +0000

    webpack/babel generated es5 assets

commit 1e978d6c5795f230ab320f94ad2fb98871bb6fa5
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 25 17:36:52 2017 +0000

    Allow content of micropub form page to be persisted

commit 44fb8026962ef574700f07ef93d18bdb38cdedb2
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 25 17:35:58 2017 +0000

    Name the micropub form

commit 732abaf561bf9d6392fe506d30d320e9c17b8226
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 25 17:34:39 2017 +0000

    Add webStorage dependency

commit a4520085dfc673c5c3d940150358b8ecc3cdf022
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Jan 16 12:32:33 2017 +0000

    No need for a form id on the micropub form untill form autosave is added

commit a182be46a616d8e4085be5e24cbd3623f13cc28d
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sat Jan 14 20:37:31 2017 +0000

    Polyfill fetch and promise only in older browsers using unpkg.com

commit fdc044150dc8e2b755f93119b196ba0455bbbb83
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Fri Jan 13 15:46:05 2017 +0000

    Generated js from webpack/babel

commit d24e6aa9fff38823a0c667e6f9e43dcb2ca179c4
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Fri Jan 13 15:45:32 2017 +0000

    Lots of es6 to generate and add map, particularly the new note form

commit e7004a9fe475e07d43de905fb00d51c659878474
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Fri Jan 13 15:44:54 2017 +0000

    Don’t link to commons.js, it aint being made at the moment

commit d4a2e4e143b644287f9da109eb2850c2361b2f20
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Fri Jan 13 15:43:27 2017 +0000

    Temporarily don’t optimize JS

commit 05623de122da7d88642af60f85e5320a3ff651fc
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 11 14:24:15 2017 +0000

    Add places to geojson data

commit 3eb1a4f29bb4263b9998a6f3f53abb7d1eeff520
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 11 14:22:53 2017 +0000

    Use alertify.js to give relevant feedback to user

commit 6f123fa178d6cd19528130ebd78157c37eaab1a1
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 11 14:21:24 2017 +0000

    Add alertify.css back

commit 89fca3b3aeb23ef97fb767514e0502298d1b83fd
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 11 14:19:56 2017 +0000

    Webpack’d javascript

commit 94ab60f34079238ed6228bf6e789f14d7a09823b
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Jan 9 09:10:17 2017 +0000

    Webpack’d javascript

commit 1ca3a55a27c20ea08633b589023fe5ad1acb2b68
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Jan 9 09:09:06 2017 +0000

    Define const functions in order of usage

commit dc5535b32a357611860e0e98fcdc7d9c12c5d383
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sun Jan 8 18:50:55 2017 +0000

    Link to correct js files with defer option

commit 42f0e5b85825943ed148736e8e0fe22f5654ae90
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sun Jan 8 18:50:18 2017 +0000

    New webpacked es6 code

commit 300443bb0ce7b65bda1cf550fe5c7173a89edaf3
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sun Jan 8 18:49:44 2017 +0000

    Moving towards consolidated es6 map code

commit b1001760e03dd358f896feb90dd3acc0bc6728fc
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sun Jan 8 18:44:40 2017 +0000

    Don’t mangle the fetch function

commit 289e59025634b6d2569b73ae87e3ea4942034e33
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sun Jan 8 18:43:47 2017 +0000

    Updated yarn/npm dependencies

commit 3439b008e6bd96d8c45591c2a945c4ac246440ec
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Dec 29 11:58:50 2016 +0000

    Link to the correct assets on the new note page

commit 81dc83e362266028f8336ae5a27e92c8c8a2b6dc
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Dec 29 11:57:46 2016 +0000

    Add a map to the new note page

commit 5101ecd3dd60cd78e9a4bce81a5e60a2f575bc57
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Dec 29 11:56:54 2016 +0000

    Bundle common JS between entry points

commit 1f916adcfd1b07df388417b6bd800e109cec543c
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Dec 29 11:55:31 2016 +0000

    Add geojson to individual notes

commit 7a6ae8ca49b4ca49413ddb977f7b534f62b41c20
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Dec 28 19:53:30 2016 +0000

    Link to self-hosted mapbox-gl.css

commit 8be006ec2b738cbcebd06283e18c292b3efd7d16
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Dec 28 19:52:41 2016 +0000

    Use self-hosted mapbox-gl css, and a better default geojson title value

commit 5ec480842a2194a071b6a23ae181a8de5b8d47cd
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Dec 28 17:09:46 2016 +0000

    Access geojson data to markup map correctly

commit f2f1d7563f7b0cb7cc62658cc2817e56d2b47c31
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Dec 28 17:09:07 2016 +0000

    Generate geojson data for places

commit 9f8c9ba02f7ac37b4ab81aad2fb0cd2c077c45cd
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Fri Dec 23 11:55:10 2016 +0000

    Use geojson to add a default you location point

commit 3da499d3ea6a214f8008d1b98f9b0c2f31ecba0c
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Dec 22 22:29:18 2016 +0000

    Some code cleaning

commit 39376097eda82491df272cc214d70ff3095d4873
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Dec 22 22:21:29 2016 +0000

    Use satellite streets view

commit f3db8f43fc403bc180e24d63e21c8311441cb2b0
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Dec 22 16:46:03 2016 +0000

    Semi working map state, still need to add own css, and add marker

commit 5f398a642b9db67f4b0733988c20138b37d2141d
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Dec 22 13:17:04 2016 +0000

    Reference new maps.js with bundled mapbox

commit bad97649a623c5552e6b607a1975aa2de8131191
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Dec 22 13:16:25 2016 +0000

    Add mapbox-gl again

commit 47484962e7620aa7a9a5153cfc03e2ba4030dd5c
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Dec 21 00:03:23 2016 +0000

    Early working version of maps.js

commit e53e0f39952a65996c09b06fd35918ffabed0de2
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Tue Dec 20 17:14:17 2016 +0000

    Setup webpack

commit f930a1e2bd7d18809bd40d0cc22f9c3af75f1984
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Tue Dec 20 15:00:42 2016 +0000

    Add webpack v2

commit b16e8d62db071155a8b5fb216d3d60ebf6fa9468
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Tue Dec 20 14:53:47 2016 +0000

    Define default settings for babel

commit 97c13cb753e08d25aa48ecff579efa05173a2c81
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Tue Dec 20 14:53:31 2016 +0000

    Add babeljs

commit dd9efc3b056cf96323d7f11acff0fb1ab137caef
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Tue Dec 20 14:49:23 2016 +0000

    Remove old javascript

commit ab99c251ad
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Fri Dec 16 13:26:10 2016 +0000

    update readme to reflect changes to how syndication targets need to be set
This commit is contained in:
Jonny Barnes 2017-01-26 15:21:21 +00:00
parent 9a572e5eb4
commit 0b7bf7a378
46 changed files with 6278 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

141
resources/assets/es6/mapbox-utils.js Normal file
View file

@ -0,0 +1,141 @@
//mapbox-utils.js
import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';
import parseLocation from './parse-location';
import selectPlaceInForm from './select-place';
mapboxgl.accessToken = 'pk.eyJ1Ijoiam9ubnliYXJuZXMiLCJhIjoiY2l2cDhjYW04MDAwcjJ0cG1uZnhqcm82ayJ9.qA2zeVA-nsoMh9IFrd5KQw';
//define some functions to be used in the default function.
const titlecase = (string) => {
return string.split('-').map(([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase()).join(' ')
};
const addMapTypeOption = (map, menu, option, checked = false) => {
let input = document.createElement('input');
input.setAttribute('id', option);
input.setAttribute('type', 'radio');
input.setAttribute('name', 'toggle');
input.setAttribute('value', option);
if (checked == true) {
input.setAttribute('checked', 'checked');
}
input.addEventListener('click', function () {
map.setStyle('mapbox://styles/mapbox/' + option + '-v9');
});
let label = document.createElement('label');
label.setAttribute('for', option);
label.appendChild(document.createTextNode(titlecase(option)));
menu.appendChild(input);
menu.appendChild(label);
}
const makeMapMenu = (map) => {
let mapMenu = document.createElement('div');
mapMenu.classList.add('map-menu');
addMapTypeOption(map, mapMenu, 'streets', true);
addMapTypeOption(map, mapMenu, 'satellite-streets');
return mapMenu;
}
//the main function
export default function addMap(position = null, places = null) {
//console.log(position);
//console.log(places);
let mapDivs = document.querySelectorAll('.map');
for (let div of mapDivs) {
let dataLatitude = div.dataset.latitude;
let dataLongitude = div.dataset.longitude;
let dataId = div.dataset.id;
let data = window['geojson'+dataId];
if (data == null) {
data = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [dataLongitude, dataLatitude]
},
"properties": {
"title": "Current Location",
"icon": "circle-stroked",
"uri": "current-location"
}
}]
};
}
if (places != null) {
for (let place of places) {
let placeLongitude = parseLocation(place.location).longitude;
let placeLatitude = parseLocation(place.location).latitude;
data.features.push({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [placeLongitude, placeLatitude]
},
"properties": {
"title": place.name,
"icon": "circle",
"uri": place.slug
}
});
}
}
if (! dataLongitude) {
let dataLongitude = position.coords.longitude;
}
if (! dataLatitude) {
let dataLatitude = position.coords.latitude;
}
let map = new mapboxgl.Map({
container: div,
style: 'mapbox://styles/mapbox/streets-v9',
center: [dataLongitude, dataLatitude],
zoom: 15
});
if (position == null) {
map.scrollZoom.disable();
}
map.addControl(new mapboxgl.NavigationControl());
div.appendChild(makeMapMenu(map));
map.on('load', function () {
map.addSource('points', {
"type": "geojson",
"data": data
});
map.addLayer({
"id": "points",
"interactive": true,
"type": "symbol",
"source": "points",
"layout": {
"icon-image": "{icon}-15",
"text-field": "{title}",
"text-offset": [0, 1]
}
});
});
map.on('click', function (e) {
let features = map.queryRenderedFeatures(e.point, {
layer: ['points']
});
// if there are features within the given radius of the click event,
// fly to the location of the click event
if (features.length) {
// Get coordinates from the symbol and center the map on those coordinates
map.flyTo({center: features[0].geometry.coordinates});
selectPlaceInForm(features[0].properties.uri);
}
});
if (data.features && data.features.length > 1) {
let bounds = new mapboxgl.LngLatBounds();
for (let feature of data.features) {
bounds.extend(feature.geometry.coordinates);
}
map.fitBounds(bounds, { padding: 65});
}
return map;
}
}

8
resources/assets/es6/maps.js Normal file
View file

@ -0,0 +1,8 @@
//maps.js
import addMapTo from './mapbox-utils';
let mapDivs = document.querySelectorAll('.map');
for (var div of mapDivs) {
addMapTo(div);
}

80
resources/assets/es6/nearby-places.js Normal file
View file

@ -0,0 +1,80 @@
//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.slug);
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(position) {
fetch('/places/near/' + position.coords.latitude + '/' + 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(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 Normal file
View file

@ -0,0 +1,14 @@
//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 Normal file
View file

@ -0,0 +1,16 @@
//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(position);
});
}

8
resources/assets/es6/newnote.js Normal file
View file

@ -0,0 +1,8 @@
//newnote.js
import enableLocateButton from './newnote-button';
import persistFormData from './persist-form';
let button = document.querySelector('#locate');
enableLocateButton(button);
persistFormData();

134
resources/assets/es6/newplace-micropub.js Normal file
View file

@ -0,0 +1,134 @@
//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 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');
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);
//the event listener for the new place form
/*placeSubmit.addEventListener('click', function () {
//create the form data to send
var formData = new FormData();
formData.append('place-name', document.querySelector('#place-name').value);
formData.append('place-description', document.querySelector('#place-description').value);
formData.append('place-latitude', document.querySelector('#place-latitude').value);
formData.append('place-longitude', document.querySelector('#place-longitude').value);
//post the new place
fetch('/places/new', {
//send cookies with the request
credentials: 'same-origin',
method: 'post',
body: formData
})
.then(function (response) {
return response.json();
})
.then(function (placeJson) {
if (placeJson.error === true) {
throw new Error(placeJson.error_description);
}
//remove un-needed form elements
//iterate through labels and remove parent div elements
var labels = document.querySelectorAll('.place-label');
for (var i = 0; i < labels.length; ++i) {
form.removeChild(labels[i].parentNode);
}
form.removeChild(document.querySelector('#place-submit'));
var newPlaceButton = document.querySelector('#create-new-place');
//in order to remove a DOM Node, you need to run removeChild on the parent Node
newPlaceButton.parentNode.removeChild(newPlaceButton);
//add place marker
var newOption = document.createElement('option');
newOption.setAttribute('value', placeJson.uri);
newOption.appendChild(document.createTextNode(placeJson.name));
newOption.dataset.latitude = placeJson.latitude;
newOption.dataset.longitude = placeJson.longitude;
selectEl.appendChild(newOption);
var newPlaceMarkerIcon = document.createElement('div');
newPlaceMarkerIcon.classList.add('marker');
new mapboxgl.Marker(newPlaceMarkerIcon, {offset: [-10, -20]}).setLngLat([placeJson.longitude, placeJson.latitude]).addTo(map);
map.flyTo({center: [placeJson.longitude, placeJson.latitude]});
newPlaceMarkerIcon.addEventListener('click', function () {
map.flyTo({center: [placeJson.longitude, placeJson.latitude]});
selectPlace(placeJson.uri);
});
//make selected
selectPlace(placeJson.uri);
}).catch(function (placeError) {
alertify.reset();
alertify.error(placeError);
});
});*/
});
return newLocationButton;
}

10
resources/assets/es6/parse-location.js Normal file
View file

@ -0,0 +1,10 @@
//parse-location.js
//text = `POINT(lon lat)`
export default function parseLocation(text) {
let coords = /POINT\((.*)\)/.exec(text);
let parsedLongitude = coords[1].split(' ')[0];
let parsedLatitude = coords[1].split(' ')[1];
return {'latitude': parsedLatitude, 'longitude': parsedLongitude};
}

32
resources/assets/es6/persist-form.js Normal file
View file

@ -0,0 +1,32 @@
//persist-form.js
import webStorage from 'webStorage';
import alertify from 'alertify.js';
const loadData = () => {
let replyTo = document.querySelector('#in-reply-to');
replyTo.value = webStorage.getItem('replyTo');
let content = document.querySelector('#content');
content.value = webStorage.getItem('content');
}
const saveData = () => {
let replyTo = document.querySelector('#in-reply-to');
let content = document.querySelector('#content');
webStorage.setItem('replyTo', replyTo.value);
webStorage.setItem('content', content.value);
alertify.success('Auto-saved data');
}
const clearData = () => {
webStorage.removeItem('replyTo');
webStorage.removeItem('content');
}
export default function persistFormData()
{
let form = document.querySelector('form[name="micropub"]');
form.addEventListener('change', saveData);
form.addEventListener('submit', clearData);
loadData();
}

11
resources/assets/es6/select-place.js Normal file
View file

@ -0,0 +1,11 @@
//select-place.js
export default function selectPlaceInForm(uri) {
if (document.querySelector('select')) {
if (uri == 'current-location') {
document.querySelector('select [id="option-coords"]').selected = true
} else {
document.querySelector('select [value="' + uri + '"]').selected = true
}
}
}

71
resources/assets/es6/submit-place.js Normal file
View file

@ -0,0 +1,71 @@
//submit-place.js
import alertify from 'alertify.js';
export default function submitNewPlace(map) {
//create the form data to send
let formData = new FormData();
formData.append('place-name', document.querySelector('#place-name').value);
formData.append('place-description', document.querySelector('#place-description').value);
formData.append('place-latitude', document.querySelector('#place-latitude').value);
formData.append('place-longitude', document.querySelector('#place-longitude').value);
//post the new place
fetch('/places/new', {
//send cookies with the request
credentials: 'same-origin',
method: 'post',
body: formData
}).then(function (response) {
return response.json();
}).then(function (placeJson) {
if (placeJson.error === true) {
throw new Error(placeJson.error_description);
}
//remove un-needed form elements
let form = document.querySelector('fieldset');
//iterate through labels and remove parent div elements
let labels = document.querySelectorAll('.place-label');
for (let label of labels) {
form.removeChild(label.parentNode);
}
form.removeChild(document.querySelector('#place-submit'));
let newPlaceButton = document.querySelector('#create-new-place');
//in order to remove a DOM Node, you need to run removeChild on the parent Node
newPlaceButton.parentNode.removeChild(newPlaceButton);
//remove current location from map
let source = map.getSource('points');
let newFeatures = source._data.features.filter(function (item) {
return item.properties.title != 'Current Location';
});
//add new place to map
newFeatures.push({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [placeJson.longitude, placeJson.latitude]
},
"properties": {
"title": placeJson.name,
"icon": "circle",
"uri": placeJson.uri
}
});
let newSource = {
"type": "FeatureCollection",
"features": newFeatures
}
map.getSource('points').setData(newSource);
//add new place to select menu
let selectElement = document.querySelector('select');
let newlyCreatedPlaceOption = document.createElement('option');
newlyCreatedPlaceOption.setAttribute('value', placeJson.uri);
newlyCreatedPlaceOption.appendChild(document.createTextNode(placeJson.name));
newlyCreatedPlaceOption.dataset.latitude = placeJson.latitude;
newlyCreatedPlaceOption.dataset.longitude = placeJson.longitude;
selectElement.appendChild(newlyCreatedPlaceOption);
document.querySelector('select [value="' + placeJson.uri + '"]').selected = true;
}).catch(function (placeError) {
alertify.reset();
alertify.error(placeError);
});
}

10
resources/views/allnotes.blade.php
View file

@ -1,7 +1,7 @@
@extends('master')
@section('title')
Notes «
Notes «
@stop
@section('content')
@ -19,11 +19,11 @@ Notes «
@stop
@section('scripts')
@include('templates.mapbox-links')
<script src="/assets/frontend/Autolinker.min.js"></script>
<script src="/assets/js/links.js"></script>
<script src="/assets/js/maps.js"></script>
<!--<script src="/assets/frontend/Autolinker.min.js"></script>
<script src="/assets/js/links.js"></script>-->
<link rel="stylesheet" href="/assets/frontend/mapbox-gl.css">
<script defer src="/assets/js/maps.js"></script>
<script src="/assets/prism/prism.js"></script>
<link rel="stylesheet" href="/assets/prism/prism.css">

20
resources/views/micropubnewnotepage.blade.php
View file

@ -1,7 +1,7 @@
@extends('master')
@section('title')
New Note «
New Note «
@stop
@section('content')
@ -26,19 +26,19 @@ New Note «
@endif
@include('templates.new-note-form', [
'micropub' => true,
'action' => '/notes/new',
'id' => 'newnote'
'action' => '/notes/new'
])
@stop
@section('scripts')
@include('templates.mapbox-links')
<script src="/assets/frontend/fetch.js"></script>
<script src="/assets/frontend/store2.min.js"></script>
<script src="/assets/frontend/alertify.js"></script>
<script src="/assets/js/form-save.js"></script>
<script src="/assets/js/newnote.js"></script>
<script>
window.Promise || document.write('<script src="https://unpkg.com/promise-polyfill/promise.min.js"><\/script>');
window.fetch || document.write('<script src="https://unpkg.com/whatwg-fetch/fetch.js"><\/script>');
</script>
<!--<script src="/assets/frontend/store2.min.js"></script>
<script src="/assets/js/form-save.js"></script>-->
<script defer src="/assets/js/newnote.js"></script>
<link rel="stylesheet" href="/assets/frontend/alertify.css">
<link rel="stylesheet" href="/assets/frontend/mapbox-gl.css">
@stop

4
resources/views/templates/mapbox-links.blade.php
View file

@ -1,2 +1,2 @@
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css" integrity="sha384-dCW/5IRoXPf5hkwrejBih/Unwf0nefL7NDk8hFitylhgPyk1YB4K9nwT5thMO2lV" crossorigin="anonymous">
<script src="https://api.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js" integrity="sha384-Q8pgRmod5Yo3TQg5NSTfk4lNXS6Seqm160e2XA+RXpgGqdGOzX5c+UU6IoohcdWZ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css">
<script src="https://api.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js" ></script>

2
resources/views/templates/new-note-form.blade.php
View file

@ -1,4 +1,4 @@
<form action="{{ $action }}" method="post" enctype="multipart/form-data" accept-charset="utf-8" id="{{ $id }}">
<form action="{{ $action }}" method="post" enctype="multipart/form-data" accept-charset="utf-8"@if($micropub) name="micropub"@endif>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<fieldset class="note-ui">
<legend>New Note</legend>

3
resources/views/templates/note.blade.php
View file

@ -26,6 +26,7 @@
</div>
</div>
@if ($note->placeLink)
<div class="map" data-latitude="{{ $note->latitude }}" data-longitude="{{ $note->longitude }}"></div>
<div class="map" data-latitude="{{ $note->latitude }}" data-longitude="{{ $note->longitude }}" data-id="{{ $note->nb60id }}"></div>
<script>var geojson{{ $note->nb60id }} = {!! $note->geoJson !!};</script>
@endif
</div>