https://dubaienergy.netlify.app/src/Toolbar.js

1/**
2 * @class L.Draw.Toolbar
3 * @aka Toolbar
4 *
5 * The toolbar class of the API — it is used to create the ui
6 * This will be depreciated
7 *
8 * @example
9 *
10 * ```js
11 *    var toolbar = L.Toolbar();
12 *    toolbar.addToolbar(map);
13 * ```
14 *
15 * ### Disabling a toolbar
16 *
17 * If you do not want a particular toolbar in your app you can turn it off by setting the toolbar to false.
18 *
19 * ```js
20 *      var drawControl = new L.Control.Draw({
21 *          draw: false,
22 *          edit: {
23 *              featureGroup: editableLayers
24 *          }
25 *      });
26 * ```
27 *
28 * ### Disabling a toolbar item
29 *
30 * If you want to turn off a particular toolbar item, set it to false. The following disables drawing polygons and
31 * markers. It also turns off the ability to edit layers.
32 *
33 * ```js
34 *      var drawControl = new L.Control.Draw({
35 *          draw: {
36 *              polygon: false,
37 *              marker: false
38 *          },
39 *          edit: {
40 *              featureGroup: editableLayers,
41 *              edit: false
42 *          }
43 *      });
44 * ```
45 */
46L.Toolbar = L.Class.extend({
47	// @section Methods for modifying the toolbar
48
49	// @method initialize(options): void
50	// Toolbar constructor
51	initialize: function (options) {
52		L.setOptions(this, options);
53
54		this._modes = {};
55		this._actionButtons = [];
56		this._activeMode = null;
57
58		var version = L.version.split('.');
59		//If Version is >= 1.2.0
60		if (parseInt(version[0], 10) === 1 && parseInt(version[1], 10) >= 2) {
61			L.Toolbar.include(L.Evented.prototype);
62		} else {
63			L.Toolbar.include(L.Mixin.Events);
64		}
65	},
66
67	// @method enabled(): boolean
68	// Gets a true/false of whether the toolbar is enabled
69	enabled: function () {
70		return this._activeMode !== null;
71	},
72
73	// @method disable(): void
74	// Disables the toolbar
75	disable: function () {
76		if (!this.enabled()) {
77			return;
78		}
79
80		this._activeMode.handler.disable();
81	},
82
83	// @method addToolbar(map): L.DomUtil
84	// Adds the toolbar to the map and returns the toolbar dom element
85	addToolbar: function (map) {
86		var container = L.DomUtil.create('div', 'leaflet-draw-section'),
87			buttonIndex = 0,
88			buttonClassPrefix = this._toolbarClass || '',
89			modeHandlers = this.getModeHandlers(map),
90			i;
91
92		this._toolbarContainer = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar');
93		this._map = map;
94
95		for (i = 0; i < modeHandlers.length; i++) {
96			if (modeHandlers[i].enabled) {
97				this._initModeHandler(
98					modeHandlers[i].handler,
99					this._toolbarContainer,
100					buttonIndex++,
101					buttonClassPrefix,
102					modeHandlers[i].title
103				);
104			}
105		}
106
107		// if no buttons were added, do not add the toolbar
108		if (!buttonIndex) {
109			return;
110		}
111
112		// Save button index of the last button, -1 as we would have ++ after the last button
113		this._lastButtonIndex = --buttonIndex;
114
115		// Create empty actions part of the toolbar
116		this._actionsContainer = L.DomUtil.create('ul', 'leaflet-draw-actions');
117
118		// Add draw and cancel containers to the control container
119		container.appendChild(this._toolbarContainer);
120		container.appendChild(this._actionsContainer);
121
122		return container;
123	},
124
125	// @method removeToolbar(): void
126	// Removes the toolbar and drops the handler event listeners
127	removeToolbar: function () {
128		// Dispose each handler
129		for (var handlerId in this._modes) {
130			if (this._modes.hasOwnProperty(handlerId)) {
131				// Unbind handler button
132				this._disposeButton(
133					this._modes[handlerId].button,
134					this._modes[handlerId].handler.enable,
135					this._modes[handlerId].handler
136				);
137
138				// Make sure is disabled
139				this._modes[handlerId].handler.disable();
140
141				// Unbind handler
142				this._modes[handlerId].handler
143					.off('enabled', this._handlerActivated, this)
144					.off('disabled', this._handlerDeactivated, this);
145			}
146		}
147		this._modes = {};
148
149		// Dispose the actions toolbar
150		for (var i = 0, l = this._actionButtons.length; i < l; i++) {
151			this._disposeButton(
152				this._actionButtons[i].button,
153				this._actionButtons[i].callback,
154				this
155			);
156		}
157		this._actionButtons = [];
158		this._actionsContainer = null;
159	},
160
161	_initModeHandler: function (handler, container, buttonIndex, classNamePredix, buttonTitle) {
162		var type = handler.type;
163
164		this._modes[type] = {};
165
166		this._modes[type].handler = handler;
167
168		this._modes[type].button = this._createButton({
169			type: type,
170			title: buttonTitle,
171			className: classNamePredix + '-' + type,
172			container: container,
173			callback: this._modes[type].handler.enable,
174			context: this._modes[type].handler
175		});
176
177		this._modes[type].buttonIndex = buttonIndex;
178
179		this._modes[type].handler
180			.on('enabled', this._handlerActivated, this)
181			.on('disabled', this._handlerDeactivated, this);
182	},
183
184	/* Detect iOS based on browser User Agent, based on:
185	 * http://stackoverflow.com/a/9039885 */
186	_detectIOS: function () {
187		var iOS = (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream);
188		return iOS;
189	},
190
191	_createButton: function (options) {
192
193		var link = L.DomUtil.create('a', options.className || '', options.container);
194		// Screen reader tag
195		var sr = L.DomUtil.create('span', 'sr-only', options.container);
196
197		link.href = '#';
198		link.appendChild(sr);
199
200		if (options.title) {
201			link.title = options.title;
202			sr.innerHTML = options.title;
203		}
204
205		if (options.text) {
206			link.innerHTML = options.text;
207			sr.innerHTML = options.text;
208		}
209
210		/* iOS does not use click events */
211		var buttonEvent = this._detectIOS() ? 'touchstart' : 'click';
212
213		L.DomEvent
214			.on(link, 'click', L.DomEvent.stopPropagation)
215			.on(link, 'mousedown', L.DomEvent.stopPropagation)
216			.on(link, 'dblclick', L.DomEvent.stopPropagation)
217			.on(link, 'touchstart', L.DomEvent.stopPropagation)
218			.on(link, 'click', L.DomEvent.preventDefault)
219			.on(link, buttonEvent, options.callback, options.context);
220
221		return link;
222	},
223
224	_disposeButton: function (button, callback) {
225		/* iOS does not use click events */
226		var buttonEvent = this._detectIOS() ? 'touchstart' : 'click';
227
228		L.DomEvent
229			.off(button, 'click', L.DomEvent.stopPropagation)
230			.off(button, 'mousedown', L.DomEvent.stopPropagation)
231			.off(button, 'dblclick', L.DomEvent.stopPropagation)
232			.off(button, 'touchstart', L.DomEvent.stopPropagation)
233			.off(button, 'click', L.DomEvent.preventDefault)
234			.off(button, buttonEvent, callback);
235	},
236
237	_handlerActivated: function (e) {
238		// Disable active mode (if present)
239		this.disable();
240
241		// Cache new active feature
242		this._activeMode = this._modes[e.handler];
243
244		L.DomUtil.addClass(this._activeMode.button, 'leaflet-draw-toolbar-button-enabled');
245
246		this._showActionsToolbar();
247
248		this.fire('enable');
249	},
250
251	_handlerDeactivated: function () {
252		this._hideActionsToolbar();
253
254		L.DomUtil.removeClass(this._activeMode.button, 'leaflet-draw-toolbar-button-enabled');
255
256		this._activeMode = null;
257
258		this.fire('disable');
259	},
260
261	_createActions: function (handler) {
262		var container = this._actionsContainer,
263			buttons = this.getActions(handler),
264			l = buttons.length,
265			li, di, dl, button;
266
267		// Dispose the actions toolbar (todo: dispose only not used buttons)
268		for (di = 0, dl = this._actionButtons.length; di < dl; di++) {
269			this._disposeButton(this._actionButtons[di].button, this._actionButtons[di].callback);
270		}
271		this._actionButtons = [];
272
273		// Remove all old buttons
274		while (container.firstChild) {
275			container.removeChild(container.firstChild);
276		}
277
278		for (var i = 0; i < l; i++) {
279			if ('enabled' in buttons[i] && !buttons[i].enabled) {
280				continue;
281			}
282
283			li = L.DomUtil.create('li', '', container);
284
285			button = this._createButton({
286				title: buttons[i].title,
287				text: buttons[i].text,
288				container: li,
289				callback: buttons[i].callback,
290				context: buttons[i].context
291			});
292
293			this._actionButtons.push({
294				button: button,
295				callback: buttons[i].callback
296			});
297		}
298	},
299
300	_showActionsToolbar: function () {
301		var buttonIndex = this._activeMode.buttonIndex,
302			lastButtonIndex = this._lastButtonIndex,
303			toolbarPosition = this._activeMode.button.offsetTop - 1;
304
305		// Recreate action buttons on every click
306		this._createActions(this._activeMode.handler);
307
308		// Correctly position the cancel button
309		this._actionsContainer.style.top = toolbarPosition + 'px';
310
311		if (buttonIndex === 0) {
312			L.DomUtil.addClass(this._toolbarContainer, 'leaflet-draw-toolbar-notop');
313			L.DomUtil.addClass(this._actionsContainer, 'leaflet-draw-actions-top');
314		}
315
316		if (buttonIndex === lastButtonIndex) {
317			L.DomUtil.addClass(this._toolbarContainer, 'leaflet-draw-toolbar-nobottom');
318			L.DomUtil.addClass(this._actionsContainer, 'leaflet-draw-actions-bottom');
319		}
320
321		this._actionsContainer.style.display = 'block';
322		this._map.fire(L.Draw.Event.TOOLBAROPENED);
323	},
324
325	_hideActionsToolbar: function () {
326		this._actionsContainer.style.display = 'none';
327
328		L.DomUtil.removeClass(this._toolbarContainer, 'leaflet-draw-toolbar-notop');
329		L.DomUtil.removeClass(this._toolbarContainer, 'leaflet-draw-toolbar-nobottom');
330		L.DomUtil.removeClass(this._actionsContainer, 'leaflet-draw-actions-top');
331		L.DomUtil.removeClass(this._actionsContainer, 'leaflet-draw-actions-bottom');
332		this._map.fire(L.Draw.Event.TOOLBARCLOSED);
333	}
334});