Add points of interest
Do a bunch of refactoring in the process. Current display on homepage is a little shonky but that can be improved when there is something using it.
This commit is contained in:
243
assets/js/form_casestudy_drafts.js
Normal file
243
assets/js/form_casestudy_drafts.js
Normal file
@ -0,0 +1,243 @@
|
||||
"use strict";
|
||||
|
||||
//
|
||||
// UI ELEMENTS
|
||||
//
|
||||
|
||||
class SaveButton {
|
||||
constructor(div) {
|
||||
this.root = div
|
||||
this.root.className = "savebutton"
|
||||
this.root.style.display = "block"
|
||||
|
||||
this.element = {
|
||||
root: this.root,
|
||||
button: this.root.querySelector('.savebutton--button'),
|
||||
icon: this.root.querySelector('.savebutton--icon'),
|
||||
details: this.root.querySelector('.savebutton--details')
|
||||
}
|
||||
|
||||
this.switchStateInitial()
|
||||
}
|
||||
|
||||
changeState(data) {
|
||||
var data = data || {}
|
||||
this.element.button.innerText = data.buttonText || "Save"
|
||||
this.element.button.disabled = data.buttonClickable === false ? true : false
|
||||
this.element.icon.className = 'savebutton--icon ' + (data.iconClasses || "")
|
||||
this.element.details.innerText = data.detailsText || ""
|
||||
}
|
||||
|
||||
switchStateInitial() {
|
||||
this.changeState({
|
||||
buttonClickable: false
|
||||
})
|
||||
}
|
||||
|
||||
switchStateUnsaved() {
|
||||
this.changeState({
|
||||
detailsText: django.gettext("You have unsaved changes. Click here to save a draft, which you can access next time you are here.")
|
||||
})
|
||||
}
|
||||
|
||||
switchStateSaving() {
|
||||
this.changeState({
|
||||
buttonText: django.gettext("Saving..."),
|
||||
iconClasses: "fa fa-spinner fa-spin"
|
||||
})
|
||||
}
|
||||
|
||||
switchStateSaveSuccess() {
|
||||
this.changeState({
|
||||
buttonText: django.gettext("Saved"),
|
||||
detailsText: django.gettext("Saved successfully."),
|
||||
iconClasses: "fa fa-check",
|
||||
buttonClickable: false
|
||||
})
|
||||
}
|
||||
|
||||
switchStateSaveFailed(reason = "") {
|
||||
this.changeState({
|
||||
detailsText: django.gettext("Save failed! ") + reason,
|
||||
iconClasses: "fa fa-exclamation-triangle savebutton--icon-failed"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class DraftPrompt {
|
||||
constructor(opts) {
|
||||
this.restoreDraft = opts.restoreFn
|
||||
this.deleteDraft = opts.deleteFn
|
||||
|
||||
this.root = opts.root
|
||||
this.element = {
|
||||
root: this.root,
|
||||
restore: this.root.querySelector('.draftprompt--restore'),
|
||||
delete: this.root.querySelector('.draftprompt--delete'),
|
||||
details: this.root.querySelector('.draftprompt--details')
|
||||
}
|
||||
|
||||
// Restore should restore, then hide the prompt
|
||||
this.element.restore.addEventListener('click', () => {
|
||||
this.restoreDraft()
|
||||
this.switchStateHidden()
|
||||
})
|
||||
|
||||
// Delete button will delete the draft
|
||||
this.element.delete.addEventListener('click', () => {
|
||||
if (window.confirm(django.gettext('Are you sure you want to delete your draft?'))) {
|
||||
this.switchStateDeleting()
|
||||
this.deleteDraft().then(ok => ok ?
|
||||
this.switchStateHidden() :
|
||||
this.switchStateDeleteFailed()
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
this.switchStateShown()
|
||||
}
|
||||
|
||||
changeState(data) {
|
||||
var data = data || {}
|
||||
this.element.root.style.display = data.visible ? "block" : "none"
|
||||
this.element.details.innerHTML = data.detailsText || ""
|
||||
}
|
||||
|
||||
switchStateHidden() {
|
||||
this.changeState({
|
||||
visible: false
|
||||
})
|
||||
}
|
||||
|
||||
switchStateShown() {
|
||||
this.changeState({
|
||||
visible: true
|
||||
})
|
||||
}
|
||||
|
||||
switchStateDeleting() {
|
||||
this.changeState({
|
||||
visible: true,
|
||||
details: '<i classs="fa fa-spinner fa-spin"></i>'
|
||||
})
|
||||
}
|
||||
|
||||
switchStateDeleteFailed() {
|
||||
this.changeState({
|
||||
details: django.gettext("Delete failed!")
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// API UTILITIES
|
||||
//
|
||||
|
||||
function apiGetDraft() {
|
||||
return fetch('/en-gb/case-study/draft', {
|
||||
method: 'GET',
|
||||
credentials: "same-origin",
|
||||
headers: {
|
||||
"X-CSRFToken": jQuery("[name=csrfmiddlewaretoken]").val(),
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function apiPutDraft(formSaver) {
|
||||
if (!formSaver) {
|
||||
throw new Error("apiPutDraft: parameter not provided")
|
||||
}
|
||||
|
||||
return fetch('/en-gb/case-study/draft', {
|
||||
method: 'PUT',
|
||||
credentials: "same-origin",
|
||||
headers: {
|
||||
"X-CSRFToken": jQuery("[name=csrfmiddlewaretoken]").val(),
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({ version: 1, data: formSaver.serialise() })
|
||||
})
|
||||
}
|
||||
|
||||
function apiDeleteDraft() {
|
||||
return fetch('/en-gb/case-study/draft', {
|
||||
method: 'DELETE',
|
||||
credentials: "same-origin",
|
||||
headers: {
|
||||
"X-CSRFToken": jQuery("[name=csrfmiddlewaretoken]").val(),
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// GNARLY BITS TYING API & UI STUFF TOGETHER
|
||||
//
|
||||
|
||||
function showDraftPrompt(formSaver, serialisedForm) {
|
||||
let prompt = new DraftPrompt({
|
||||
root: document.querySelector('.draftprompt'),
|
||||
restoreFn: () => formSaver.deserialise(serialisedForm),
|
||||
deleteFn: () => apiDeleteDraft().then(response => response.ok)
|
||||
})
|
||||
}
|
||||
|
||||
function initDrafts() {
|
||||
const formSaver = new FormSaver({
|
||||
formId: 'case-study-form',
|
||||
except: [ 'csrfmiddlewaretoken' ]
|
||||
})
|
||||
|
||||
// Use whether the form has errors as a proxy for whether the server has
|
||||
// returned us data in the form. In this case, don't show a draft.
|
||||
const formHasErrors = document.getElementById('form_errors').value === 'true' ? true : false
|
||||
if (!formHasErrors) {
|
||||
// Get the previous draft, if any
|
||||
apiGetDraft()
|
||||
.then(response => response.json())
|
||||
.then(json => {
|
||||
// Handle the case where we didn't get a response
|
||||
if (!json) return
|
||||
|
||||
if (json.version !== 1) {
|
||||
throw new Error("Bad JSON response version")
|
||||
}
|
||||
|
||||
showDraftPrompt(formSaver, json.data.form)
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
})
|
||||
}
|
||||
|
||||
// Init the button controller
|
||||
var button = new SaveButton(document.querySelector('.savebutton'))
|
||||
|
||||
// Dirty forms set up
|
||||
$('#case-study-form').dirtyForms();
|
||||
$('#case-study-form').on('dirty.dirtyforms', ev => {
|
||||
button.switchStateUnsaved()
|
||||
});
|
||||
|
||||
// Save button
|
||||
button.element.button.addEventListener('click', evt => {
|
||||
button.switchStateSaving()
|
||||
|
||||
apiPutDraft(formSaver).then(response => {
|
||||
if (response.ok) {
|
||||
button.switchStateSaveSuccess();
|
||||
$('#case-study-form').dirtyForms('setClean');
|
||||
document.querySelector('.draftprompt').style.display = "none"
|
||||
} else {
|
||||
button.switchStateSaveFailed();
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
button.switchStateSaveFailed();
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// https://github.com/snikch/jquery.dirtyforms
|
||||
72
assets/js/map_minzoom.js
Normal file
72
assets/js/map_minzoom.js
Normal file
@ -0,0 +1,72 @@
|
||||
ZoomHelpText = L.Control.extend({
|
||||
options: {
|
||||
position: 'bottomleft'
|
||||
},
|
||||
onAdd: function (map) {
|
||||
return L.DomUtil.create('div', 'minzoomhelptext')
|
||||
},
|
||||
setContent: function (content) {
|
||||
this.getContainer().innerHTML = content
|
||||
}
|
||||
})
|
||||
|
||||
// See GeometryField source (static/leaflet/leaflet.forms.js) to override more stuff...
|
||||
MinimumZoomField = L.GeometryField.extend({
|
||||
zoomLevelTooLow: function() {
|
||||
if (this._controlsShown !== false) {
|
||||
this._map.removeControl(this._drawControl)
|
||||
this._controlsShown = false
|
||||
}
|
||||
|
||||
this._zoomHelpText.setContent(
|
||||
django.gettext("Please zoom in further to place a marker on the map.")
|
||||
)
|
||||
},
|
||||
|
||||
zoomLevelOk: function() {
|
||||
if (this._controlsShown !== true) {
|
||||
this._map.addControl(this._drawControl)
|
||||
this._controlsShown = true
|
||||
}
|
||||
|
||||
this._zoomHelpText.setContent(
|
||||
django.gettext("Please use the marker tool on the left to select a location.")
|
||||
)
|
||||
},
|
||||
|
||||
addTo: function (map) {
|
||||
// super()
|
||||
L.GeometryField.prototype.addTo.call(this, map)
|
||||
this._controlsShown = true
|
||||
this._map = map
|
||||
|
||||
// Add a help text control
|
||||
this._zoomHelpText = new ZoomHelpText().addTo(map)
|
||||
|
||||
// Only allow editing past a certain zoom level (see #56)
|
||||
// Remove the edit controls
|
||||
this.zoomLevelTooLow()
|
||||
|
||||
// Enable or disable depending on zoom level
|
||||
map.addEventListener('zoomend', evt => {
|
||||
if (map.getZoom() >= 13) {
|
||||
this.zoomLevelOk()
|
||||
} else {
|
||||
this.zoomLevelTooLow()
|
||||
}
|
||||
})
|
||||
|
||||
// Respond to underlying text field changing
|
||||
const textarea = document.getElementById(this.options.fieldid)
|
||||
textarea.addEventListener('change', evt => {
|
||||
this.load()
|
||||
})
|
||||
|
||||
const triggerChange = evt => {
|
||||
document.getElementById('case-study-form').dispatchEvent(new Event('dirty'))
|
||||
}
|
||||
map.on(L.Draw.Event.CREATED, triggerChange)
|
||||
map.on(L.Draw.Event.EDITED, triggerChange)
|
||||
map.on(L.Draw.Event.DELETED, triggerChange)
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user