https://reggeomet.ru/bitrix/templates/magazine_2021_en/leaflet/L.Control.Sidebar.js

1L.Control.Sidebar = L.Control.extend({
2
3    includes: L.Evented ? L.Evented.prototype : L.Mixin.Events,
4
5    options: {
6        closeButton: true,
7        position: 'left',
8        autoPan: true,
9    },
10
11    initialize: function (placeholder, options) {
12        L.setOptions(this, options);
13
14        // Find content container
15        var content = this._contentContainer = L.DomUtil.get(placeholder);
16
17        // Remove the content container from its original parent
18        content.parentNode.removeChild(content);
19
20        var l = 'leaflet-';
21
22        // Create sidebar container
23        var container = this._container =
24            L.DomUtil.create('div', l + 'sidebar ' + this.options.position);
25
26        // Style and attach content container
27        L.DomUtil.addClass(content, l + 'control');
28        container.appendChild(content);
29
30        // Create close button and attach it if configured
31        if (this.options.closeButton) {
32            var close = this._closeButton =
33                L.DomUtil.create('a', 'close', container);
34            close.innerHTML = '×';
35        }
36    },
37
38    addTo: function (map) {
39        var container = this._container;
40        var content = this._contentContainer;
41
42        // Attach event to close button
43        if (this.options.closeButton) {
44            var close = this._closeButton;
45
46            L.DomEvent.on(close, 'click', this.hide, this);
47        }
48
49        L.DomEvent
50            .on(container, 'transitionend',
51                this._handleTransitionEvent, this)
52            .on(container, 'webkitTransitionEnd',
53                this._handleTransitionEvent, this);
54
55        // Attach sidebar container to controls container
56        var controlContainer = map._controlContainer;
57        controlContainer.insertBefore(container, controlContainer.firstChild);
58
59        this._map = map;
60
61        // Make sure we don't drag the map when we interact with the content
62        var stop = L.DomEvent.stopPropagation;
63        var fakeStop = L.DomEvent._fakeStop || stop;
64        L.DomEvent
65            .on(content, 'contextmenu', stop)
66            .on(content, 'click', fakeStop)
67            .on(content, 'mousedown', stop)
68            .on(content, 'touchstart', stop)
69            .on(content, 'dblclick', fakeStop)
70            .on(content, 'mousewheel', stop)
71            .on(content, 'wheel', stop)
72            .on(content, 'scroll', stop)
73            .on(content, 'MozMousePixelScroll', stop);
74
75        return this;
76    },
77
78    removeFrom: function (map) {
79        //if the control is visible, hide it before removing it.
80        this.hide();
81
82        var container = this._container;
83        var content = this._contentContainer;
84
85        // Remove sidebar container from controls container
86        var controlContainer = map._controlContainer;
87        controlContainer.removeChild(container);
88
89        //disassociate the map object
90        this._map = null;
91
92        // Unregister events to prevent memory leak
93        var stop = L.DomEvent.stopPropagation;
94        var fakeStop = L.DomEvent._fakeStop || stop;
95        L.DomEvent
96            .off(content, 'contextmenu', stop)
97            .off(content, 'click', fakeStop)
98            .off(content, 'mousedown', stop)
99            .off(content, 'touchstart', stop)
100            .off(content, 'dblclick', fakeStop)
101            .off(content, 'mousewheel', stop)
102            .off(content, 'wheel', stop)
103            .off(content, 'scroll', stop)
104            .off(content, 'MozMousePixelScroll', stop);
105
106        L.DomEvent
107            .off(container, 'transitionend',
108                this._handleTransitionEvent, this)
109            .off(container, 'webkitTransitionEnd',
110                this._handleTransitionEvent, this);
111
112        if (this._closeButton && this._close) {
113            var close = this._closeButton;
114
115            L.DomEvent.off(close, 'click', this.hide, this);
116        }
117
118        return this;
119    },
120
121    isVisible: function () {
122        return L.DomUtil.hasClass(this._container, 'visible');
123    },
124
125    show: function () {
126        if (!this.isVisible()) {
127            L.DomUtil.addClass(this._container, 'visible');
128            if (this.options.autoPan) {
129                this._map.panBy([-this.getOffset() / 2, 0], {
130                    duration: 0.5
131                });
132            }
133            this.fire('show');
134        }
135    },
136
137    hide: function (e) {
138        if (this.isVisible()) {
139            L.DomUtil.removeClass(this._container, 'visible');
140            if (this.options.autoPan) {
141                this._map.panBy([this.getOffset() / 2, 0], {
142                    duration: 0.5
143                });
144            }
145            this.fire('hide');
146        }
147        if(e) {
148            L.DomEvent.stopPropagation(e);
149        }
150    },
151
152    toggle: function () {
153        if (this.isVisible()) {
154            this.hide();
155        } else {
156            this.show();
157        }
158    },
159
160    getContainer: function () {
161        return this._contentContainer;
162    },
163
164    getCloseButton: function () {
165        return this._closeButton;
166    },
167
168    setContent: function (content) {
169        var container = this.getContainer();
170
171        if (typeof content === 'string') {
172            container.innerHTML = content;
173        } else {
174            // clean current content
175            while (container.firstChild) {
176                container.removeChild(container.firstChild);
177            }
178
179            container.appendChild(content);
180        }
181
182        return this;
183    },
184
185    getOffset: function () {
186        if (this.options.position === 'right') {
187            return -this._container.offsetWidth;
188        } else {
189            return this._container.offsetWidth;
190        }
191    },
192
193    _handleTransitionEvent: function (e) {
194        if (e.propertyName == 'left' || e.propertyName == 'right')
195            this.fire(this.isVisible() ? 'shown' : 'hidden');
196    }
197});
198
199L.control.sidebar = function (placeholder, options) {
200    return new L.Control.Sidebar(placeholder, options);
201};