Toolbar.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. L.Toolbar = L.Class.extend({
  2. includes: [L.Mixin.Events],
  3. initialize: function (options) {
  4. L.setOptions(this, options);
  5. this._modes = {};
  6. this._actionButtons = [];
  7. this._activeMode = null;
  8. },
  9. enabled: function () {
  10. return this._activeMode !== null;
  11. },
  12. doneed:function(){
  13. this._activeMode.handler.disable();
  14. },
  15. disable: function () {
  16. if (!this.enabled()) { return; }
  17. this._activeMode.handler.disable();
  18. },
  19. removeToolbar: function () {
  20. // Dispose each handler
  21. for (var handlerId in this._modes) {
  22. if (this._modes.hasOwnProperty(handlerId)) {
  23. // Unbind handler button
  24. this._disposeButton(this._modes[handlerId].button, this._modes[handlerId].handler.enable);
  25. // Make sure is disabled
  26. this._modes[handlerId].handler.disable();
  27. // Unbind handler
  28. this._modes[handlerId].handler
  29. .off('enabled', this._handlerActivated, this)
  30. .off('disabled', this._handlerDeactivated, this);
  31. }
  32. }
  33. this._modes = {};
  34. // Dispose the actions toolbar
  35. for (var i = 0, l = this._actionButtons.length; i < l; i++) {
  36. this._disposeButton(this._actionButtons[i].button, this._actionButtons[i].callback);
  37. }
  38. this._actionButtons = [];
  39. this._actionsContainer = null;
  40. },
  41. _initModeHandler: function (handler, container, buttonIndex, classNamePredix) {
  42. var type = handler.type;
  43. this._modes[type] = {};
  44. this._modes[type].handler = handler;
  45. this._modes[type].button = this._createButton({
  46. title: this.options[type].title,
  47. className: classNamePredix + '-' + type,
  48. container: container,
  49. callback: this._modes[type].handler.enable,
  50. context: this._modes[type].handler
  51. });
  52. this._modes[type].buttonIndex = buttonIndex;
  53. this._modes[type].handler
  54. .on('enabled', this._handlerActivated, this)
  55. .on('disabled', this._handlerDeactivated, this);
  56. },
  57. _initCustomHandler:function(handler,container){
  58. container.appendChild(handler.customPicker);
  59. },
  60. _createButton: function (options) {
  61. var link = L.DomUtil.create('a', options.className || '', options.container);
  62. link.href = '#';
  63. if (options.text) {
  64. link.innerHTML = options.text;
  65. }
  66. if (options.title) {
  67. link.title = options.title;
  68. }
  69. L.DomEvent
  70. .on(link, 'click', L.DomEvent.stopPropagation)
  71. .on(link, 'mousedown', L.DomEvent.stopPropagation)
  72. .on(link, 'mouseup', L.DomEvent.stopPropagation)
  73. .on(link, 'dblclick', L.DomEvent.stopPropagation)
  74. .on(link, 'click', L.DomEvent.preventDefault)
  75. .on(link, 'click', options.callback, options.context);
  76. return link;
  77. },
  78. _disposeButton: function (button, callback) {
  79. L.DomEvent
  80. .off(button, 'click', L.DomEvent.stopPropagation)
  81. .off(button, 'mousedown', L.DomEvent.stopPropagation)
  82. .off(button, 'mouseup', L.DomEvent.stopPropagation)
  83. .off(button, 'dblclick', L.DomEvent.stopPropagation)
  84. .off(button, 'click', L.DomEvent.preventDefault)
  85. .off(button, 'click', callback);
  86. },
  87. _handlerActivated: function (e) {
  88. // Disable active mode (if present)
  89. if (this._activeMode && this._activeMode.handler.enabled()) {
  90. this._activeMode.handler.disable();
  91. }
  92. // Cache new active feature
  93. this._activeMode = this._modes[e.handler];
  94. L.DomUtil.addClass(this._activeMode.button, 'leaflet-draw-toolbar-button-enabled');
  95. if(this._actionsContainer){
  96. this._showActionsToolbar();
  97. }
  98. this.fire('enable');
  99. },
  100. _handlerDeactivated: function () {
  101. if(this._actionsContainer){
  102. this._hideActionsToolbar();
  103. }
  104. L.DomUtil.removeClass(this._activeMode.button, 'leaflet-draw-toolbar-button-enabled');
  105. this._activeMode = null;
  106. this.fire('disable');
  107. },
  108. _createActions: function (buttons) {
  109. var container = L.DomUtil.create('ul', 'leaflet-draw-actions'),
  110. //buttonWidth = 50,
  111. l = buttons.length,
  112. //containerWidth = (l * buttonWidth) + (l - 1), //l - 1 = the borders
  113. li, button;
  114. for (var i = 0; i < l; i++) {
  115. li = L.DomUtil.create('li', '', container);
  116. button = this._createButton({
  117. title: buttons[i].title,
  118. text: buttons[i].text,
  119. container: li,
  120. callback: buttons[i].callback,
  121. context: buttons[i].context
  122. });
  123. this._actionButtons.push({
  124. button: button,
  125. callback: buttons[i].callback
  126. });
  127. }
  128. //container.style.width = containerWidth + 'px';
  129. return container;
  130. },
  131. _showActionsToolbar: function () {
  132. var buttonIndex = this._activeMode.buttonIndex,
  133. lastButtonIndex = this._lastButtonIndex,
  134. buttonWidth = 21, // TODO: this should be calculated
  135. //borderHeight = 2, // TODO: this should also be calculated
  136. //toolbarPosition = (buttonIndex * buttonHeight) + (buttonIndex * borderHeight) - 1;
  137. toolbarPosition = buttonIndex * buttonWidth;
  138. // Correctly position the cancel button
  139. this._actionsContainer.style.left = toolbarPosition + 'px';
  140. if (buttonIndex === 0) {
  141. L.DomUtil.addClass(this._toolbarContainer, 'leaflet-draw-toolbar-notop');
  142. L.DomUtil.addClass(this._actionsContainer, 'leaflet-draw-actions-top');
  143. }
  144. if (buttonIndex === lastButtonIndex) {
  145. L.DomUtil.addClass(this._toolbarContainer, 'leaflet-draw-toolbar-nobottom');
  146. L.DomUtil.addClass(this._actionsContainer, 'leaflet-draw-actions-bottom');
  147. }
  148. this._actionsContainer.style.display = 'block';
  149. },
  150. _hideActionsToolbar: function () {
  151. this._actionsContainer.style.display = 'none';
  152. L.DomUtil.removeClass(this._toolbarContainer, 'leaflet-draw-toolbar-notop');
  153. L.DomUtil.removeClass(this._toolbarContainer, 'leaflet-draw-toolbar-nobottom');
  154. L.DomUtil.removeClass(this._actionsContainer, 'leaflet-draw-actions-top');
  155. L.DomUtil.removeClass(this._actionsContainer, 'leaflet-draw-actions-bottom');
  156. }
  157. });