commit 6179adf3720e979c18c54b849184d5f12c49e9f3
parent 24a07e60ce642727eec3021d42b4270e9ddca2b5
Author: Sergej Orlov <wladimirych@gmail.com>
Date: Thu, 5 Jul 2018 00:22:32 +0300
[custom layers] refactor: use knockout for custom layer dialog
Diffstat:
1 file changed, 34 insertions(+), 52 deletions(-)
diff --git a/src/lib/leaflet.control.layers.configure/index.js b/src/lib/leaflet.control.layers.configure/index.js
@@ -254,64 +254,47 @@ function enableConfig(control, layers) {
let customLayerWindow = L.DomUtil.create('div', 'custom-layers-window', this._customLayerWindow);
let form = L.DomUtil.create('form', '', customLayerWindow);
-
- let buttonsHtml = '';
- for (let [i, button] of buttons.entries()) {
- buttonsHtml += `<a class="button" name="btn-${i}">${button.caption}</a>`;
- }
L.DomEvent.on(form, 'submit', L.DomEvent.preventDefault);
- form.innerHTML = `
+
+ const dialogModel = {
+ name: ko.observable(fieldValues.name),
+ url: ko.observable(fieldValues.url),
+ tms: ko.observable(fieldValues.tms),
+ scaleDependent: ko.observable(fieldValues.scaleDependent),
+ maxZoom: ko.observable(fieldValues.maxZoom),
+ isOverlay: ko.observable(fieldValues.isOverlay),
+ buttonClicked: function buttonClicked(callbackN) {
+ const fieldValues = {
+ name: dialogModel.name().trim(),
+ url: dialogModel.url().trim(),
+ tms: dialogModel.tms(),
+ scaleDependent: dialogModel.scaleDependent(),
+ maxZoom: dialogModel.maxZoom(),
+ isOverlay: dialogModel.isOverlay()
+ };
+ console.log(fieldValues);
+ buttons[callbackN].callback(fieldValues);
+ }
+ };
+
+ const formHtml = [`
<p><a href="http://leafletjs.com/reference-1.0.2.html#tilelayer" target="_blank">See Leaflet TileLayer documentation for url format</a></p>
-<label>Layer name<br/>
-<input name="name"/></label><br/>
-<label>Tile url template<br/>
-<textarea name="url" style="width: 100%"></textarea></label><br/>
-<label><input type="radio" name="overlay" value="no">Base layer</label><br/>
-<label><input type="radio" name="overlay" value="yes">Overlay</label><br/>
-<label><input type="checkbox" name="scaleDependent"/>Content depends on scale(like OSM or Google maps)</label><br/>
-<label><input type="checkbox" name="tms" />TMS rows order</label><br />
+<label>Layer name<br/><input data-bind="value: name"/></label><br/>
+<label>Tile url template<br/><textarea data-bind="value: url" style="width: 100%"></textarea></label><br/>
+<label><input type="radio" name="overlay" data-bind="checked: isOverlay, checkedValue: false">Base layer</label><br/>
+<label><input type="radio" name="overlay" data-bind="checked: isOverlay, checkedValue: true">Overlay</label><br/>
+<label><input type="checkbox" data-bind="checked: scaleDependent"/>Content depends on scale(like OSM or Google maps)</label><br/>
+<label><input type="checkbox" data-bind="checked: tms" />TMS rows order</label><br />
<label>Max zoom<br>
-<select name="maxZoom">
-<option value="9">9</option>
-<option value="10">10</option>
-<option value="11">11</option>
-<option value="12">12</option>
-<option value="13">13</option>
-<option value="14">14</option>
-<option value="15">15</option>
-<option value="16">16</option>
-<option value="17">17</option>
-<option value="18" selected>18</option>
-</select></label>
-<br />
-${buttonsHtml}`;
-
- form.name.value = fieldValues.name;
- form.url.value = fieldValues.url;
- form.tms.checked = fieldValues.tms;
- form.scaleDependent.checked = fieldValues.scaleDependent;
- form.maxZoom.value = fieldValues.maxZoom;
- form.overlay[fieldValues.isOverlay ? 1 : 0].checked = true;
-
- function buttonClicked(callback) {
- var fieldValues = {
- name: form.name.value.trim(),
- url: form.url.value.trim(),
- tms: form.tms.checked,
- scaleDependent: form.scaleDependent.checked,
- maxZoom: form.maxZoom.value,
- isOverlay: form.querySelector('input[name="overlay"]:checked').value === 'yes'
- };
- callback(fieldValues);
- }
-
+<select data-bind="options: [9,10,11,12,13,14,15,16,17,18], value: maxZoom"></select></label>
+<br />`];
for (let [i, button] of buttons.entries()) {
-
- let buttonEl = form.querySelector(`[name="btn-${i}"]`);
- L.DomEvent.on(buttonEl, 'click', buttonClicked.bind(this, button.callback));
+ formHtml.push(`<a class="button" data-bind="click: buttonClicked.bind(null, ${i})">${button.caption}</a>`);
}
+ form.innerHTML = formHtml.join('');
+ ko.applyBindings(dialogModel, form);
},
_addItem: function(obj) {
@@ -392,7 +375,6 @@ ${buttonsHtml}`;
this.updateEnabledLayers();
},
-
createCustomLayer: function(fieldValues) {
const serialized = this.serializeCustomLayer(fieldValues);
const tileLayer = L.tileLayer(fieldValues.url, {
