123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207 |
- L.Toolbar = L.Class.extend({
- includes: [L.Mixin.Events],
- initialize: function (options) {
- L.setOptions(this, options);
- this._modes = {};
- this._actionButtons = [];
- this._activeMode = null;
- },
- enabled: function () {
- return this._activeMode !== null;
- },
- doneed:function(){
- this._activeMode.handler.disable();
- },
- disable: function () {
- if (!this.enabled()) { return; }
- this._activeMode.handler.disable();
- },
- removeToolbar: function () {
- // Dispose each handler
- for (var handlerId in this._modes) {
- if (this._modes.hasOwnProperty(handlerId)) {
- // Unbind handler button
- this._disposeButton(this._modes[handlerId].button, this._modes[handlerId].handler.enable);
- // Make sure is disabled
- this._modes[handlerId].handler.disable();
- // Unbind handler
- this._modes[handlerId].handler
- .off('enabled', this._handlerActivated, this)
- .off('disabled', this._handlerDeactivated, this);
- }
- }
- this._modes = {};
- // Dispose the actions toolbar
- for (var i = 0, l = this._actionButtons.length; i < l; i++) {
- this._disposeButton(this._actionButtons[i].button, this._actionButtons[i].callback);
- }
- this._actionButtons = [];
- this._actionsContainer = null;
- },
- _initModeHandler: function (handler, container, buttonIndex, classNamePredix) {
- var type = handler.type;
- this._modes[type] = {};
- this._modes[type].handler = handler;
- this._modes[type].button = this._createButton({
- title: this.options[type].title,
- className: classNamePredix + '-' + type,
- container: container,
- callback: this._modes[type].handler.enable,
- context: this._modes[type].handler
- });
- this._modes[type].buttonIndex = buttonIndex;
- this._modes[type].handler
- .on('enabled', this._handlerActivated, this)
- .on('disabled', this._handlerDeactivated, this);
- },
- _initCustomHandler:function(handler,container){
- container.appendChild(handler.customPicker);
- },
- _createButton: function (options) {
- var link = L.DomUtil.create('a', options.className || '', options.container);
- link.href = '#';
- if (options.text) {
- link.innerHTML = options.text;
- }
- if (options.title) {
- link.title = options.title;
- }
- L.DomEvent
- .on(link, 'click', L.DomEvent.stopPropagation)
- .on(link, 'mousedown', L.DomEvent.stopPropagation)
- .on(link, 'mouseup', L.DomEvent.stopPropagation)
- .on(link, 'dblclick', L.DomEvent.stopPropagation)
- .on(link, 'click', L.DomEvent.preventDefault)
- .on(link, 'click', options.callback, options.context);
- return link;
- },
- _disposeButton: function (button, callback) {
- L.DomEvent
- .off(button, 'click', L.DomEvent.stopPropagation)
- .off(button, 'mousedown', L.DomEvent.stopPropagation)
- .off(button, 'mouseup', L.DomEvent.stopPropagation)
- .off(button, 'dblclick', L.DomEvent.stopPropagation)
- .off(button, 'click', L.DomEvent.preventDefault)
- .off(button, 'click', callback);
- },
- _handlerActivated: function (e) {
- // Disable active mode (if present)
- if (this._activeMode && this._activeMode.handler.enabled()) {
- this._activeMode.handler.disable();
- }
- // Cache new active feature
- this._activeMode = this._modes[e.handler];
- L.DomUtil.addClass(this._activeMode.button, 'leaflet-draw-toolbar-button-enabled');
- if(this._actionsContainer){
- this._showActionsToolbar();
- }
- this.fire('enable');
- },
- _handlerDeactivated: function () {
- if(this._actionsContainer){
- this._hideActionsToolbar();
- }
- L.DomUtil.removeClass(this._activeMode.button, 'leaflet-draw-toolbar-button-enabled');
- this._activeMode = null;
- this.fire('disable');
- },
- _createActions: function (buttons) {
- var container = L.DomUtil.create('ul', 'leaflet-draw-actions'),
- //buttonWidth = 50,
- l = buttons.length,
- //containerWidth = (l * buttonWidth) + (l - 1), //l - 1 = the borders
- li, button;
- for (var i = 0; i < l; i++) {
- li = L.DomUtil.create('li', '', container);
- button = this._createButton({
- title: buttons[i].title,
- text: buttons[i].text,
- container: li,
- callback: buttons[i].callback,
- context: buttons[i].context
- });
- this._actionButtons.push({
- button: button,
- callback: buttons[i].callback
- });
- }
- //container.style.width = containerWidth + 'px';
- return container;
- },
- _showActionsToolbar: function () {
- var buttonIndex = this._activeMode.buttonIndex,
- lastButtonIndex = this._lastButtonIndex,
- buttonWidth = 21, // TODO: this should be calculated
- //borderHeight = 2, // TODO: this should also be calculated
- //toolbarPosition = (buttonIndex * buttonHeight) + (buttonIndex * borderHeight) - 1;
- toolbarPosition = buttonIndex * buttonWidth;
- // Correctly position the cancel button
- this._actionsContainer.style.left = toolbarPosition + 'px';
- if (buttonIndex === 0) {
- L.DomUtil.addClass(this._toolbarContainer, 'leaflet-draw-toolbar-notop');
- L.DomUtil.addClass(this._actionsContainer, 'leaflet-draw-actions-top');
- }
- if (buttonIndex === lastButtonIndex) {
- L.DomUtil.addClass(this._toolbarContainer, 'leaflet-draw-toolbar-nobottom');
- L.DomUtil.addClass(this._actionsContainer, 'leaflet-draw-actions-bottom');
- }
- this._actionsContainer.style.display = 'block';
- },
- _hideActionsToolbar: function () {
- this._actionsContainer.style.display = 'none';
- L.DomUtil.removeClass(this._toolbarContainer, 'leaflet-draw-toolbar-notop');
- L.DomUtil.removeClass(this._toolbarContainer, 'leaflet-draw-toolbar-nobottom');
- L.DomUtil.removeClass(this._actionsContainer, 'leaflet-draw-actions-top');
- L.DomUtil.removeClass(this._actionsContainer, 'leaflet-draw-actions-bottom');
- }
- });
|