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