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

Squashed commit of the following:

Browse source 
commit 92c55c5705
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Jun 16 23:26:41 2016 +0100

    Update resource links

commit a72719dc24
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Jun 16 23:18:44 2016 +0100

    Move hand-made js to resources
This commit is contained in:
Jonny Barnes 2016-06-16 23:28:07 +01:00
parent 292427d485
commit 5ec516ab19
85 changed files with 1303 additions and 571 deletions
Download patch file Download diff file Expand all files Collapse all files

69
resources/assets/js/form-save.js Normal file
View file

@ -0,0 +1,69 @@
/* global alertify, store */
var feature = {
addEventListener : !!window.addEventListener,
querySelectorAll : !!document.querySelectorAll
};
if (feature.addEventListener && feature.querySelectorAll) {
var keys = getKeys();
for (var i = 0; i < keys.length; i++) {
if (store.get(keys[i])) {
var formId = keys[i].split('~')[1];
document.getElementById(formId).value = store.get(keys[i]);
}
}
}
var timerId = window.setInterval(function() {
var saved = false;
var inputs = document.querySelectorAll('input[type=text], textarea');
for (var i = 0; i < inputs.length; i++) {
var key = getFormElement(inputs[i]).id + '~' + inputs[i].id;
if (store.get(key) !== inputs[i].value && inputs[i].value !== '') {
store.set(key, inputs[i].value);
saved = true;
}
}
if (saved === true) {
alertify.logPosition('top right');
alertify.success('Auto saved text');
}
}, 5000);
var forms = document.querySelectorAll('form');
for (var f = 0; f < forms.length; f++) {
var form = forms[f];
form.addEventListener('submit', function() {
window.clearInterval(timerId);
var formId = form.id;
var storedKeys = store.keys();
for (var i = 0; i < storedKeys.length; i++) {
if (storedKeys[i].indexOf(formId) > -1) {
store.remove(storedKeys[i]);
}
}
});
}
function getKeys() {
var keys = [];
var formFields = document.querySelectorAll('input[type=text], textarea');
for (var f = 0; f < formFields.length; f++) {
var parent = getFormElement(formFields[f]);
if (parent !== false) {
var key = parent.id + '~' + formFields[f].id;
keys.push(key);
}
}
return keys;
}
function getFormElement(elem) {
if (elem.nodeName.toLowerCase() !== 'body') {
var parent = elem.parentNode;
if (parent.nodeName.toLowerCase() === 'form') {
return parent;
} else {
return getFormElement(parent);
}
} else {
return false;
}
}

26
resources/assets/js/links.js Normal file
View file

@ -0,0 +1,26 @@
/* global Autolinker */
//the autlinker object
var autolinker = new Autolinker();
//the youtube regex
var ytidregex = /watch\?v=([A-Za-z0-9\-_]+)/;
//grab the notes and loop through them
var notes = document.querySelectorAll('.e-content');
for (var i = 0; i < notes.length; i++) {
//get Youtube ID
var ytid = notes[i].textContent.match(ytidregex);
if (ytid !== null) {
var id = ytid[1];
var iframe = document.createElement('iframe');
iframe.classList.add('youtube');
iframe.setAttribute('src', '//www.youtube.com/embed/' + id);
iframe.setAttribute('frameborder', 0);
iframe.setAttribute('allowfullscreen', 'true');
notes[i].appendChild(iframe);
}
//now linkify everything
var orig = notes[i].innerHTML;
var linked = autolinker.link(orig);
notes[i].innerHTML = linked;
}

16
resources/assets/js/maps.js Normal file
View file

@ -0,0 +1,16 @@
/* global L */
//This code runs on page load and looks for <div class="map">, then adds map
var mapDivs = document.querySelectorAll('.map');
for (var i = 0; i < mapDivs.length; i++) {
var mapDiv = mapDivs[i];
var latitude = mapDiv.dataset.latitude;
var longitude = mapDiv.dataset.longitude;
L.mapbox.accessToken = 'pk.eyJ1Ijoiam9ubnliYXJuZXMiLCJhIjoiVlpndW1EYyJ9.aP9fxAqLKh7lj0LpFh5k1w';
var map = L.mapbox.map(mapDiv, 'jonnybarnes.gnoihnim')
.setView([latitude, longitude], 15)
.addLayer(L.mapbox.tileLayer('jonnybarnes.gnoihnim', {
detectRetina: true
}));
L.marker([latitude, longitude]).addTo(map);
map.scrollWheelZoom.disable();
}

281
resources/assets/js/newnote.js Normal file
View file

@ -0,0 +1,281 @@
/* global L */
if ('geolocation' in navigator) {
var button = document.querySelector('#locate');
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);
}
}
function getLocation() {
navigator.geolocation.getCurrentPosition(function (position) {
//the locate button has been clicked so add the places/map
addPlaces(position.coords.latitude, position.coords.longitude);
});
}
function addPlaces(latitude, longitude) {
//get the nearby places
fetch('/places/near/' + latitude + '/' + longitude, {
credentials: 'same-origin',
method: 'get'
}).then(function (response) {
return response.json();
}).then(function (j) {
if (j.length > 0) {
var i;
var places = [];
for (i = 0; i < j.length; ++i) {
var latlng = parseLocation(j[i].location);
var name = j[i].name;
var slug = j[i].slug;
places.push([name, slug, latlng[0], latlng[1]]);
}
//add a map with the nearby places
addMap(latitude, longitude, places);
} else {
//add a map with just current location
addMap(latitude, longitude);
}
}).catch(function (err) {
console.error(err);
});
}
function addMap(latitude, longitude, places) {
//make places null if not supplied
if (arguments.length == 2) {
places = null;
}
var form = button.parentNode;
var div = document.createElement('div');
div.setAttribute('id', 'map');
//add the map div
form.appendChild(div);
L.mapbox.accessToken = 'pk.eyJ1Ijoiam9ubnliYXJuZXMiLCJhIjoiVlpndW1EYyJ9.aP9fxAqLKh7lj0LpFh5k1w';
var map = L.mapbox.map('map', 'jonnybarnes.gnoihnim')
.setView([latitude, longitude], 15)
.addLayer(L.mapbox.tileLayer('jonnybarnes.gnoihnim', {
detectRetina: true
}));
//add a marker for the current location
var marker = L.marker([latitude, longitude], {
draggable: true
}).addTo(map);
//when the location marker is dragged, if the new place form elements exist
//update the lat/lng values
marker.on('dragend', function () {
var placeFormLatitude = document.querySelector('#place-latitude');
if (placeFormLatitude !== null) {
placeFormLatitude.value = getLatitudeFromMapboxMarker(marker.getLatLng());
}
var placeFormLongitude = document.querySelector('#place-longitude');
if (placeFormLongitude !== null) {
placeFormLongitude.value = getLongitudeFromMapboxMarker(marker.getLatLng());
}
});
//create the <select> element and give it a no location default
var selectEl = document.createElement('select');
selectEl.setAttribute('name', 'location');
var noLocation = document.createElement('option');
noLocation.setAttribute('selected', 'selected');
noLocation.setAttribute('value', 'no-location');
var noLocText = document.createTextNode('Select no location');
noLocation.appendChild(noLocText);
selectEl.appendChild(noLocation);
form.insertBefore(selectEl, div);
if (places !== null) {
//add the places both to the map and <select>
places.forEach(function (item) {
var option = document.createElement('option');
option.setAttribute('value', item[1]);
var text = document.createTextNode(item[0]);
option.appendChild(text);
option.dataset.latitude = item[2];
option.dataset.longitude = item[3];
selectEl.appendChild(option);
var placeMarker = L.marker([item[2], item[3]], {
icon: L.mapbox.marker.icon({
'marker-size': 'large',
'marker-symbol': 'building',
'marker-color': '#fa0'
})
}).addTo(map);
var name = 'Name: ' + item[0];
placeMarker.bindPopup(name, {
closeButton: true
});
placeMarker.on('click', function () {
map.panTo([item[2], item[3]]);
selectPlace(item[1]);
});
});
//add an event listener
selectEl.addEventListener('change', function () {
if (selectEl.value !== 'no-location') {
var placeLat = selectEl[selectEl.selectedIndex].dataset.latitude;
var placeLon = selectEl[selectEl.selectedIndex].dataset.longitude;
map.panTo([placeLat, placeLon]);
}
});
}
//add a button to add a new place
var newLocButton = document.createElement('button');
newLocButton.setAttribute('type', 'button');
newLocButton.setAttribute('id', 'create-new-place');
newLocButton.appendChild(document.createTextNode('Create New Place?'));
//the event listener
newLocButton.addEventListener('click', function() {
//add the form elements
var nameLabel = document.createElement('label');
nameLabel.setAttribute('for', 'place-name');
nameLabel.classList.add('place-label');
nameLabel.appendChild(document.createTextNode('Place Name:'));
var nameEl = document.createElement('input');
nameEl.setAttribute('placeholder', 'Name');
nameEl.setAttribute('name', 'place-name');
nameEl.setAttribute('id', 'place-name');
nameEl.setAttribute('type', 'text');
var descLabel = document.createElement('label');
descLabel.setAttribute('for', 'place-description');
descLabel.classList.add('place-label');
descLabel.appendChild(document.createTextNode('Place Description:'));
var descEl = document.createElement('input');
descEl.setAttribute('placeholder', 'Description');
descEl.setAttribute('name', 'place-description');
descEl.setAttribute('id', 'place-description');
descEl.setAttribute('type', 'text');
var latLabel = document.createElement('label');
latLabel.setAttribute('for', 'place-latitude');
latLabel.classList.add('place-label');
latLabel.appendChild(document.createTextNode('Place Latitude:'));
var latEl = document.createElement('input');
latEl.setAttribute('name', 'place-latitude');
latEl.setAttribute('id', 'place-latitude');
latEl.setAttribute('type', 'text');
latEl.value = getLatitudeFromMapboxMarker(marker.getLatLng());
var lonLabel = document.createElement('label');
lonLabel.setAttribute('for', 'place-longitude');
lonLabel.classList.add('place-label');
lonLabel.appendChild(document.createTextNode('Place Longitude:'));
var lonEl = document.createElement('input');
lonEl.setAttribute('name', 'place-longitude');
lonEl.setAttribute('id', 'place-longitude');
lonEl.setAttribute('type', 'text');
lonEl.value = getLongitudeFromMapboxMarker(marker.getLatLng());
var placeSubmit = document.createElement('button');
placeSubmit.setAttribute('id', 'place-submit');
placeSubmit.setAttribute('value', 'Submit New Place');
placeSubmit.setAttribute('name', 'place-submit');
placeSubmit.setAttribute('type', 'button');
placeSubmit.appendChild(document.createTextNode('Submit New Place'));
form.appendChild(nameLabel);
form.appendChild(nameEl);
form.appendChild(descLabel);
form.appendChild(descEl);
form.appendChild(latLabel);
form.appendChild(latEl);
form.appendChild(lonLabel);
form.appendChild(lonEl);
form.appendChild(placeSubmit);
//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) {
if (response.status >= 200 && response.status < 300) {
return Promise.resolve(response);
} else {
return Promise.reject(new Error(response.statusText));
}
})
.then(function (response) {
return response.json();
})
.then(function (placeJson) {
//create the slug from the url
var urlParts = placeJson.split('/');
var slug = urlParts.pop();
//remove un-needed form elements
form.removeChild(document.querySelector('#place-name'));
form.removeChild(document.querySelector('#place-description'));
form.removeChild(document.querySelector('#place-latitude'));
form.removeChild(document.querySelector('#place-longitude'));
var labels = document.querySelectorAll('.place-label');
for (var i = 0; i < labels.length; ++i) {
form.removeChild(labels[i]);
}
form.removeChild(document.querySelector('#place-submit'));
form.removeChild(document.querySelector('#create-new-place'));
//remove location marker
map.removeLayer(marker);
//add place marker
var newOption = document.createElement('option');
newOption.setAttribute('value', slug);
newOption.appendChild(document.createTextNode(placeJson['name']));
newOption.dataset.latitude = placeJson['latitude'];
newOption.dataset.longitude = placeJson['longitude'];
selectEl.appendChild(newOption);
var newPlaceMarker = L.marker([placeJson['latitude'], placeJson['longitude']], {
icon: L.mapbox.marker.icon({
'marker-size': 'large',
'marker-symbol': 'building',
'marker-color': '#fa0'
})
}).addTo(map);
var newName = 'Name: ' + placeJson['name'];
newPlaceMarker.bindPopup(newName, {
closeButton: true
});
newPlaceMarker.on('click', function () {
map.panTo([placeJson['latitude'], placeJson['longitude']]);
selectPlace(slug);
});
//make selected
selectPlace(slug);
}).catch(function (placeError) {
console.error(placeError);
});
});
});
form.insertBefore(newLocButton, div);
}
function parseLocation(point) {
var re = /\((.*)\)/;
var resultArray = re.exec(point);
var location = resultArray[1].split(' ');
return [location[1], location[0]];
}
function selectPlace(slug) {
document.querySelector('select [value=' + slug + ']').selected = true;
}
function getLatitudeFromMapboxMarker(latlng) {
var resultArray = /\((.*)\)/.exec(latlng);
var location = resultArray[1].split(' ');
return location[0].replace(',', '');
}
function getLongitudeFromMapboxMarker(latlng) {
var resultArray = /\((.*)\)/.exec(latlng);
var location = resultArray[1].split(' ');
return location[1];
}

44
resources/assets/js/newplace.js Normal file
View file

@ -0,0 +1,44 @@
/* global L */
var button = document.querySelector('#locate');
if (button.addEventListener) {
button.addEventListener('click', getLocation);
} else {
button.attachEvent('onclick', getLocation);
}
function getLocation() {
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(function(position) {
updateForm(position.coords.latitude, position.coords.longitude);
addMap(position.coords.latitude, position.coords.longitude);
});
}
}
function updateForm(latitude, longitude) {
var inputLatitude = document.querySelector('#latitude');
var inputLongitude = document.querySelector('#longitude');
inputLatitude.value = latitude;
inputLongitude.value = longitude;
}
function addMap(latitude, longitude) {
var form = document.querySelector('form');
var div = document.createElement('div');
div.setAttribute('id', 'map');
form.appendChild(div);
L.mapbox.accessToken = 'pk.eyJ1Ijoiam9ubnliYXJuZXMiLCJhIjoiVlpndW1EYyJ9.aP9fxAqLKh7lj0LpFh5k1w';
var map = L.mapbox.map('map', 'jonnybarnes.gnoihnim')
.setView([latitude, longitude], 15)
.addLayer(L.mapbox.tileLayer('jonnybarnes.gnoihnim', {
detectRetina: true
}));
var marker = L.marker([latitude, longitude], {
draggable: true
}).addTo(map);
marker.on('dragend', function () {
var markerLocation = marker.getLatLng();
updateForm(markerLocation.lat, markerLocation.lng);
});
}

2
resources/views/admin/editarticle.blade.php
View file

@ -26,7 +26,7 @@ Edit Article « Admin CP
@section('scripts')
@parent
<script src="{{ elixir('assets/js/libs/marked.min.js') }}"></script>
<script src="{{ elixir('assets/bower/marked.min.js') }}"></script>
<script>
var preview = document.createElement('div');
preview.classList.add('preview');

8
resources/views/admin/newarticle.blade.php
View file

@ -29,7 +29,7 @@ New Article « Admin CP
@section('scripts')
@parent
<script src="{{ elixir('assets/js/libs/marked.min.js') }}"></script>
<script src="{{ elixir('assets/bower/marked.min.js') }}"></script>
<script>
var preview = document.createElement('div');
preview.classList.add('preview');
@ -41,9 +41,9 @@ New Article « Admin CP
preview.innerHTML = marked(markdown);
}, 5000);
</script>
<script src="{{ elixir('assets/js/libs/store2.min.js') }}"></script>
<script src="{{ elixir('assets/js/libs/alertify.js') }}"></script>
<script src="{{ elixir('assets/bower/store2.min.js') }}"></script>
<script src="{{ elixir('assets/bower/alertify.js') }}"></script>
<script src="{{ elixir('assets/js/form-save.js') }}"></script>
<link rel="stylesheet" href="{{ elixir('assets/css/alertify.css') }}">
<link rel="stylesheet" href="{{ elixir('assets/bower/alertify.css') }}">
@stop

6
resources/views/admin/newnote.blade.php
View file

@ -26,9 +26,9 @@ New Note « Admin CP
<script src="https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js"></script>
<script src="{{ elixir('assets/js/newnote.js') }}"></script>
<script src="{{ elixir('assets/js/libs/store2.min.js') }}"></script>
<script src="{{ elixir('assets/js/libs/alertify.js') }}"></script>
<script src="{{ elixir('assets/bower/store2.min.js') }}"></script>
<script src="{{ elixir('assets/bower/alertify.js') }}"></script>
<script src="{{ elixir('assets/js/form-save.js') }}"></script>
<link rel="stylesheet" href="{{ elixir('assets/css/alertify.css') }}">
<link rel="stylesheet" href="{{ elixir('assets/bower/alertify.css') }}">
@stop

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

@ -22,10 +22,10 @@ Notes « Jonny Barnes
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css">
<script src="https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js"></script>
<script src="{{ elixir('assets/js/libs/Autolinker.min.js') }}"></script>
<script src="{{ elixir('assets/bower/Autolinker.min.js') }}"></script>
<script src="{{ elixir('assets/js/links.js') }}"></script>
<script src="{{ elixir('assets/js/maps.js') }}"></script>
<script src="{{ elixir('assets/js/libs/prism.js') }}"></script>
<link rel="stylesheet" href="{{ elixir('assets/css/prism.css') }}">
<script src="{{ elixir('assets/prism/prism.js') }}"></script>
<link rel="stylesheet" href="{{ elixir('assets/prism/prism.css') }}">
@stop

2
resources/views/master.blade.php
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<title>@if (App::environment() == 'local'){!! "[testing] -"!!}@endif @yield('title')</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="{{ elixir('assets/css/sanitize.min.css') }}">
<link rel="stylesheet" href="{{ elixir('assets/bower/sanitize.css') }}">
<link rel="stylesheet" href="{{ elixir('assets/css/global.css') }}">
<link rel="openid.server" href="https://indieauth.com/openid">
<link rel="openid.delegate" href="https://jonnybarnes.uk">

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

@ -35,11 +35,11 @@ New Note « Jonny Barnes
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css">
<script src="https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js"></script>
<script src="{{ elixir('assets/js/libs/fetch.js') }}"></script>
<script src="{{ elixir('assets/js/libs/store2.min.js') }}"></script>
<script src="{{ elixir('assets/js/libs/alertify.js') }}"></script>
<script src="{{ elixir('assets/bower/fetch.js') }}"></script>
<script src="{{ elixir('assets/bower/store2.min.js') }}"></script>
<script src="{{ elixir('assets/bower/alertify.js') }}"></script>
<script src="{{ elixir('assets/js/form-save.js') }}"></script>
<script src="{{ elixir('assets/js/newnote.js') }}"></script>
<link rel="stylesheet" href="{{ elixir('assets/css/alertify.css') }}">
<link rel="stylesheet" href="{{ elixir('assets/bower/alertify.css') }}">
@stop

4
resources/views/multipost.blade.php
View file

@ -25,6 +25,6 @@ Articles « Jonny Barnes
@stop
@section('scripts')
<script src="{{ elixir('assets/js/libs/prism.js') }}"></script>
<link rel="stylesheet" href="{{ elixir('assets/css/prism.css') }}">
<script src="{{ elixir('assets/prism/prism.js') }}"></script>
<link rel="stylesheet" href="{{ elixir('assets/prism/prism.css') }}">
@stop

6
resources/views/singlenote.blade.php
View file

@ -34,10 +34,10 @@
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css">
<script src="https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js"></script>
<script src="{{ elixir('assets/js/libs/Autolinker.min.js') }}"></script>
<script src="{{ elixir('assets/bower/Autolinker.min.js') }}"></script>
<script src="{{ elixir('assets/js/links.js') }}"></script>
<script src="{{ elixir('assets/js/maps.js') }}"></script>
<script src="{{ elixir('assets/js/libs/prism.js') }}"></script>
<link rel="stylesheet" href="{{ elixir('assets/css/prism.css') }}">
<script src="{{ elixir('assets/prism/prism.js') }}"></script>
<link rel="stylesheet" href="{{ elixir('assets/prism/prism.css') }}">
@stop

4
resources/views/singlepost.blade.php
View file

@ -19,6 +19,6 @@
@stop
@section('scripts')
<script src="{{ elixir('assets/js/libs/prism.js') }}"></script>
<link rel="stylesheet" href="{{ elixir('assets/css/prism.css') }}">
<script src="{{ elixir('assets/prism/prism.js') }}"></script>
<link rel="stylesheet" href="{{ elixir('assets/prism/prism.css') }}">
@stop