Require high zoom level to select project location, closes #56
This commit is contained in:
parent
e5235fb871
commit
087eb1b1c5
@ -10,6 +10,10 @@ from leaflet.forms.widgets import LeafletWidget
|
||||
from .models import CaseStudy
|
||||
|
||||
|
||||
class MinimumZoomWidget(LeafletWidget):
|
||||
geometry_field_class = 'MinimumZoomField'
|
||||
|
||||
|
||||
class BaseCaseStudyForm(forms.models.ModelForm):
|
||||
"""Base form class for the CaseStudy model."""
|
||||
def __init__(self, *args, **kwargs):
|
||||
@ -26,7 +30,11 @@ class BaseCaseStudyForm(forms.models.ModelForm):
|
||||
model = CaseStudy
|
||||
fields = '__all__'
|
||||
widgets = {
|
||||
'location': LeafletWidget(attrs={}),
|
||||
'location': MinimumZoomWidget(attrs={
|
||||
'settings_overrides': {
|
||||
'SCALE': False
|
||||
}
|
||||
}),
|
||||
'official_project_documents': forms.ClearableFileInput(attrs={'multiple': True}),
|
||||
'other_documents': forms.ClearableFileInput(attrs={'multiple': True}),
|
||||
'shapefiles': forms.ClearableFileInput(attrs={'multiple': True}),
|
||||
|
@ -252,9 +252,7 @@ class CaseStudy(models.Model):
|
||||
|
||||
# N/A - Not explicitly listed in spec
|
||||
location = models.PointField(
|
||||
verbose_name=_("Project location"),
|
||||
help_text=_("Place a marker using the tools on the left of the map. Zoom in as far as you can so the placement \
|
||||
is accurate (important)")
|
||||
verbose_name=_("Project location")
|
||||
)
|
||||
|
||||
# 1.2
|
||||
|
@ -10,8 +10,8 @@
|
||||
{% leaflet_css %}
|
||||
<style> html, body, #main { width: 100; height:100%; } </style>
|
||||
|
||||
<style>
|
||||
.savebutton {
|
||||
<style>
|
||||
.savebutton {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
padding: 8px 15px;
|
||||
@ -20,16 +20,24 @@
|
||||
background-color: hsla(111, 25%, 84%, 1);
|
||||
border-top-right-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.savebutton--icon { margin-left: 15px; margin-right: 2px; }
|
||||
.savebutton--icon-failed { color: #d9534f; }
|
||||
.savebutton--details { font-style: italic; }
|
||||
.savebutton--icon { margin-left: 15px; margin-right: 2px; }
|
||||
.savebutton--icon-failed { color: #d9534f; }
|
||||
.savebutton--details { font-style: italic; }
|
||||
|
||||
.draftprompt { display: none; }
|
||||
.draftprompt--delete { margin-left: 10px; }
|
||||
.draftprompt--details { margin-left: 10px; font-weight: bold; }
|
||||
</style>
|
||||
.draftprompt { display: none; }
|
||||
.draftprompt--delete { margin-left: 10px; }
|
||||
.draftprompt--details { margin-left: 10px; font-weight: bold; }
|
||||
|
||||
.zoomhelptext {
|
||||
font-size: 14px;
|
||||
background-color: rgba(255, 255, 255, 80%);
|
||||
padding: 2px 10px;
|
||||
border: 1px solid #ccc;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_title %}{% trans "Submit a Case Study" %} - {{ block.super }}{% endblock %}
|
||||
@ -53,16 +61,67 @@
|
||||
|
||||
{% block scripts %}
|
||||
{% leaflet_js %}
|
||||
|
||||
<script>
|
||||
YourGeometryField = L.GeometryField.extend({
|
||||
addTo: function (map) {
|
||||
L.GeometryField.prototype.addTo.call(this, map);
|
||||
// Customize map for field
|
||||
console.log(this);
|
||||
ZoomHelpText = L.Control.extend({
|
||||
options: {
|
||||
position: 'bottomleft'
|
||||
},
|
||||
onAdd: function (map) {
|
||||
return L.DomUtil.create('div', 'zoomhelptext')
|
||||
},
|
||||
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(
|
||||
"{% trans "Please zoom in further to place a marker on the map." %}"
|
||||
)
|
||||
},
|
||||
// See GeometryField source (static/leaflet/leaflet.forms.js) to override more stuff...
|
||||
});
|
||||
|
||||
zoomLevelOk: function() {
|
||||
if (this._controlsShown !== true) {
|
||||
this._map.addControl(this._drawControl)
|
||||
this._controlsShown = true
|
||||
}
|
||||
|
||||
this._zoomHelpText.setContent(
|
||||
"{% trans "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)
|
||||
console.log(this._zoomHelpText)
|
||||
|
||||
// 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()
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- Conditional logic for hiding and un-hiding fields. -->
|
||||
@ -456,6 +515,8 @@ function initDrafts() {
|
||||
})
|
||||
}
|
||||
|
||||
// https://github.com/snikch/jquery.dirtyforms
|
||||
|
||||
initDrafts()
|
||||
</script>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user