You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

214 lines
6.6 KiB

5 years ago
  1. /**
  2. * @name Sidebar
  3. * @class L.Control.Sidebar
  4. * @extends L.Control
  5. * @param {string} id - The id of the sidebar element (without the # character)
  6. * @param {Object} [options] - Optional options object
  7. * @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
  8. * @see L.control.sidebar
  9. */
  10. L.Control.Sidebar = L.Control.extend(/** @lends L.Control.Sidebar.prototype */ {
  11. includes: (L.Evented.prototype || L.Mixin.Events),
  12. options: {
  13. position: 'left'
  14. },
  15. initialize: function (id, options) {
  16. var i, child;
  17. L.setOptions(this, options);
  18. // Find sidebar HTMLElement
  19. this._sidebar = L.DomUtil.get(id);
  20. // Attach .sidebar-left/right class
  21. L.DomUtil.addClass(this._sidebar, 'sidebar-' + this.options.position);
  22. // Attach touch styling if necessary
  23. if (L.Browser.touch)
  24. L.DomUtil.addClass(this._sidebar, 'leaflet-touch');
  25. // Find sidebar > div.sidebar-content
  26. for (i = this._sidebar.children.length - 1; i >= 0; i--) {
  27. child = this._sidebar.children[i];
  28. if (child.tagName == 'DIV' &&
  29. L.DomUtil.hasClass(child, 'sidebar-content'))
  30. this._container = child;
  31. }
  32. // Find sidebar ul.sidebar-tabs > li, sidebar .sidebar-tabs > ul > li
  33. this._tabitems = this._sidebar.querySelectorAll('ul.sidebar-tabs > li, .sidebar-tabs > ul > li');
  34. for (i = this._tabitems.length - 1; i >= 0; i--) {
  35. this._tabitems[i]._sidebar = this;
  36. }
  37. // Find sidebar > div.sidebar-content > div.sidebar-pane
  38. this._panes = [];
  39. this._closeButtons = [];
  40. for (i = this._container.children.length - 1; i >= 0; i--) {
  41. child = this._container.children[i];
  42. if (child.tagName == 'DIV' &&
  43. L.DomUtil.hasClass(child, 'sidebar-pane')) {
  44. this._panes.push(child);
  45. var closeButtons = child.querySelectorAll('.sidebar-close');
  46. for (var j = 0, len = closeButtons.length; j < len; j++)
  47. this._closeButtons.push(closeButtons[j]);
  48. }
  49. }
  50. },
  51. /**
  52. * Add this sidebar to the specified map.
  53. *
  54. * @param {L.Map} map
  55. * @returns {Sidebar}
  56. */
  57. addTo: function (map) {
  58. var i, child;
  59. this._map = map;
  60. for (i = this._tabitems.length - 1; i >= 0; i--) {
  61. child = this._tabitems[i];
  62. var sub = child.querySelector('a');
  63. if (sub.hasAttribute('href') && sub.getAttribute('href').slice(0,1) == '#') {
  64. L.DomEvent
  65. .on(sub, 'click', L.DomEvent.preventDefault )
  66. .on(sub, 'click', this._onClick, child);
  67. }
  68. }
  69. for (i = this._closeButtons.length - 1; i >= 0; i--) {
  70. child = this._closeButtons[i];
  71. L.DomEvent.on(child, 'click', this._onCloseClick, this);
  72. }
  73. return this;
  74. },
  75. /**
  76. * @deprecated - Please use remove() instead of removeFrom(), as of Leaflet 0.8-dev, the removeFrom() has been replaced with remove()
  77. * Removes this sidebar from the map.
  78. * @param {L.Map} map
  79. * @returns {Sidebar}
  80. */
  81. removeFrom: function(map) {
  82. console.log('removeFrom() has been deprecated, please use remove() instead as support for this function will be ending soon.');
  83. this.remove(map);
  84. },
  85. /**
  86. * Remove this sidebar from the map.
  87. *
  88. * @param {L.Map} map
  89. * @returns {Sidebar}
  90. */
  91. remove: function (map) {
  92. var i, child;
  93. this._map = null;
  94. for (i = this._tabitems.length - 1; i >= 0; i--) {
  95. child = this._tabitems[i];
  96. L.DomEvent.off(child.querySelector('a'), 'click', this._onClick);
  97. }
  98. for (i = this._closeButtons.length - 1; i >= 0; i--) {
  99. child = this._closeButtons[i];
  100. L.DomEvent.off(child, 'click', this._onCloseClick, this);
  101. }
  102. return this;
  103. },
  104. /**
  105. * Open sidebar (if necessary) and show the specified tab.
  106. *
  107. * @param {string} id - The id of the tab to show (without the # character)
  108. */
  109. open: function(id) {
  110. var i, child;
  111. // hide old active contents and show new content
  112. for (i = this._panes.length - 1; i >= 0; i--) {
  113. child = this._panes[i];
  114. if (child.id == id)
  115. L.DomUtil.addClass(child, 'active');
  116. else if (L.DomUtil.hasClass(child, 'active'))
  117. L.DomUtil.removeClass(child, 'active');
  118. }
  119. // remove old active highlights and set new highlight
  120. for (i = this._tabitems.length - 1; i >= 0; i--) {
  121. child = this._tabitems[i];
  122. if (child.querySelector('a').hash == '#' + id)
  123. L.DomUtil.addClass(child, 'active');
  124. else if (L.DomUtil.hasClass(child, 'active'))
  125. L.DomUtil.removeClass(child, 'active');
  126. }
  127. this.fire('content', { id: id });
  128. // open sidebar (if necessary)
  129. if (L.DomUtil.hasClass(this._sidebar, 'collapsed')) {
  130. this.fire('opening');
  131. L.DomUtil.removeClass(this._sidebar, 'collapsed');
  132. }
  133. return this;
  134. },
  135. /**
  136. * Close the sidebar (if necessary).
  137. */
  138. close: function() {
  139. // remove old active highlights
  140. for (var i = this._tabitems.length - 1; i >= 0; i--) {
  141. var child = this._tabitems[i];
  142. if (L.DomUtil.hasClass(child, 'active'))
  143. L.DomUtil.removeClass(child, 'active');
  144. }
  145. // close sidebar
  146. if (!L.DomUtil.hasClass(this._sidebar, 'collapsed')) {
  147. this.fire('closing');
  148. L.DomUtil.addClass(this._sidebar, 'collapsed');
  149. }
  150. return this;
  151. },
  152. /**
  153. * @private
  154. */
  155. _onClick: function() {
  156. if (L.DomUtil.hasClass(this, 'active'))
  157. this._sidebar.close();
  158. else if (!L.DomUtil.hasClass(this, 'disabled'))
  159. this._sidebar.open(this.querySelector('a').hash.slice(1));
  160. },
  161. /**
  162. * @private
  163. */
  164. _onCloseClick: function () {
  165. this.close();
  166. }
  167. });
  168. /**
  169. * Creates a new sidebar.
  170. *
  171. * @example
  172. * var sidebar = L.control.sidebar('sidebar').addTo(map);
  173. *
  174. * @param {string} id - The id of the sidebar element (without the # character)
  175. * @param {Object} [options] - Optional options object
  176. * @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
  177. * @returns {Sidebar} A new sidebar instance
  178. */
  179. L.control.sidebar = function (id, options) {
  180. return new L.Control.Sidebar(id, options);
  181. };