Inital commit

static/Sidebar/L.Control.Sidebar.css

@@ -0,0 +1,102 @@
+.leaflet-sidebar {
+  position: absolute;
+  height: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 10px;
+  z-index: 2000; }
+  .leaflet-sidebar.left {
+    left: -500px;
+    transition: left 0.5s, width 0.5s;
+    padding-right: 0; }
+    .leaflet-sidebar.left.visible {
+      left: 0; }
+  .leaflet-sidebar.right {
+    right: -500px;
+    transition: right 0.5s, width 0.5s;
+    padding-left: 0; }
+    .leaflet-sidebar.right.visible {
+      right: 0; }
+  .leaflet-sidebar > .leaflet-control {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 8px 24px;
+    font-size: 1.1em;
+    /*background: white;*/
+    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
+    -webkit-border-radius: 4px;
+    border-radius: 4px; }
+    .leaflet-touch .leaflet-sidebar > .leaflet-control {
+      box-shadow: none;
+      border: 2px solid rgba(0, 0, 0, 0.2);
+      background-clip: padding-box; }
+  @media (max-width: 767px) {
+    .leaflet-sidebar {
+      width: 100%;
+      padding: 0; }
+      .leaflet-sidebar.left.visible ~ .leaflet-left {
+        left: 100%; }
+      .leaflet-sidebar.right.visible ~ .leaflet-right {
+        right: 100%; }
+      .leaflet-sidebar.left {
+        left: -100%; }
+        .leaflet-sidebar.left.visible {
+          left: 0; }
+      .leaflet-sidebar.right {
+        right: -100%; }
+        .leaflet-sidebar.right.visible {
+          right: 0; }
+      .leaflet-sidebar > .leaflet-control {
+        box-shadow: none;
+        -webkit-border-radius: 0;
+        border-radius: 0; }
+        .leaflet-touch .leaflet-sidebar > .leaflet-control {
+          border: 0; } }
+  @media (min-width: 768px) and (max-width: 991px) {
+    .leaflet-sidebar {
+      width: 305px; }
+      .leaflet-sidebar.left.visible ~ .leaflet-left {
+        left: 305px; }
+      .leaflet-sidebar.right.visible ~ .leaflet-right {
+        right: 305px; } }
+  @media (min-width: 992px) and (max-width: 1199px) {
+    .leaflet-sidebar {
+      width: 390px; }
+      .leaflet-sidebar.left.visible ~ .leaflet-left {
+        left: 390px; }
+      .leaflet-sidebar.right.visible ~ .leaflet-right {
+        right: 390px; } }
+  @media (min-width: 1200px) {
+    .leaflet-sidebar {
+      width: 460px; }
+      .leaflet-sidebar.left.visible ~ .leaflet-left {
+        left: 460px; }
+      .leaflet-sidebar.right.visible ~ .leaflet-right {
+        right: 460px; } }
+  .leaflet-sidebar .close {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    width: 31px;
+    height: 31px;
+    color: #333;
+    font-size: 25px;
+    line-height: 1em;
+    text-align: center;
+    background: white;
+    -webkit-border-radius: 16px;
+    border-radius: 16px;
+    cursor: pointer;
+    z-index: 1000; }
+
+.leaflet-left {
+  transition: left 0.5s; }
+
+.leaflet-right {
+  transition: right 0.5s; }

static/Sidebar/L.Control.Sidebar.js

@@ -0,0 +1,202 @@
+L.Control.Sidebar = L.Control.extend({
+
+    includes: L.Evented.prototype || L.Mixin.Events,
+
+    options: {
+        closeButton: true,
+        position: 'left',
+        autoPan: true,
+    },
+
+    initialize: function (placeholder, options) {
+        L.setOptions(this, options);
+
+        // Find content container
+        var content = this._contentContainer = L.DomUtil.get(placeholder);
+
+        // Remove the content container from its original parent        
+        if(content.parentNode != undefined){
+          content.parentNode.removeChild(content);
+        }
+        var l = 'leaflet-';
+
+        // Create sidebar container
+        var container = this._container =
+            L.DomUtil.create('div', l + 'sidebar ' + this.options.position);
+
+        // Style and attach content container
+        L.DomUtil.addClass(content, l + 'control');
+        container.appendChild(content);
+
+        // Create close button and attach it if configured
+        if (this.options.closeButton) {
+            var close = this._closeButton =
+                L.DomUtil.create('a', 'close', container);
+            close.innerHTML = '×';
+        }
+    },
+
+    addTo: function (map) {
+        var container = this._container;
+        var content = this._contentContainer;
+
+        // Attach event to close button
+        if (this.options.closeButton) {
+            var close = this._closeButton;
+
+            L.DomEvent.on(close, 'click', this.hide, this);
+        }
+
+        L.DomEvent
+            .on(container, 'transitionend',
+                this._handleTransitionEvent, this)
+            .on(container, 'webkitTransitionEnd',
+                this._handleTransitionEvent, this);
+
+        // Attach sidebar container to controls container
+        var controlContainer = map._controlContainer;
+        controlContainer.insertBefore(container, controlContainer.firstChild);
+
+        this._map = map;
+
+        // Make sure we don't drag the map when we interact with the content
+        var stop = L.DomEvent.stopPropagation;
+        var fakeStop = L.DomEvent._fakeStop || stop;
+        L.DomEvent
+            .on(content, 'contextmenu', stop)
+            .on(content, 'click', fakeStop)
+            .on(content, 'mousedown', stop)
+            .on(content, 'touchstart', stop)
+            .on(content, 'dblclick', fakeStop)
+            .on(content, 'mousewheel', stop)
+            .on(content, 'wheel', stop)
+            .on(content, 'scroll', stop)
+            .on(content, 'MozMousePixelScroll', stop);
+
+        return this;
+    },
+
+    removeFrom: function (map) {
+        //if the control is visible, hide it before removing it.
+        this.hide();
+
+        var container = this._container;
+        var content = this._contentContainer;
+
+        // Remove sidebar container from controls container
+        var controlContainer = map._controlContainer;
+        controlContainer.removeChild(container);
+
+        //disassociate the map object
+        this._map = null;
+
+        // Unregister events to prevent memory leak
+        var stop = L.DomEvent.stopPropagation;
+        var fakeStop = L.DomEvent._fakeStop || stop;
+        L.DomEvent
+            .off(content, 'contextmenu', stop)
+            .off(content, 'click', fakeStop)
+            .off(content, 'mousedown', stop)
+            .off(content, 'touchstart', stop)
+            .off(content, 'dblclick', fakeStop)
+            .off(content, 'mousewheel', stop)
+            .off(content, 'wheel', stop)
+            .off(content, 'scroll', stop)
+            .off(content, 'MozMousePixelScroll', stop);
+
+        L.DomEvent
+            .off(container, 'transitionend',
+                this._handleTransitionEvent, this)
+            .off(container, 'webkitTransitionEnd',
+                this._handleTransitionEvent, this);
+
+        if (this._closeButton && this._close) {
+            var close = this._closeButton;
+
+            L.DomEvent.off(close, 'click', this.hide, this);
+        }
+
+        return this;
+    },
+
+    isVisible: function () {
+        return L.DomUtil.hasClass(this._container, 'visible');
+    },
+
+    show: function () {
+        if (!this.isVisible()) {
+            L.DomUtil.addClass(this._container, 'visible');
+            if (this.options.autoPan) {
+                this._map.panBy([-this.getOffset() / 2, 0], {
+                    duration: 0.5
+                });
+            }
+            this.fire('show');
+        }
+    },
+
+    hide: function (e) {
+        if (this.isVisible()) {
+            L.DomUtil.removeClass(this._container, 'visible');
+            if (this.options.autoPan) {
+                this._map.panBy([this.getOffset() / 2, 0], {
+                    duration: 0.5
+                });
+            }
+            this.fire('hide');
+        }
+        if(e) {
+            L.DomEvent.stopPropagation(e);
+        }
+    },
+
+    toggle: function () {
+        if (this.isVisible()) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    },
+
+    getContainer: function () {
+        return this._contentContainer;
+    },
+
+    getCloseButton: function () {
+        return this._closeButton;
+    },
+
+    setContent: function (content) {
+        var container = this.getContainer();
+
+        if (typeof content === 'string') {
+            container.innerHTML = content;
+        } else {
+            // clean current content
+            while (container.firstChild) {
+                container.removeChild(container.firstChild);
+            }
+
+            container.appendChild(content);
+        }
+
+        return this;
+    },
+
+    getOffset: function () {
+        if (this.options.position === 'right') {
+            return -this._container.offsetWidth;
+        } else {
+            return this._container.offsetWidth;
+        }
+    },
+
+    _handleTransitionEvent: function (e) {
+        if (e.propertyName == 'left' || e.propertyName == 'right')
+            this.fire(this.isVisible() ? 'shown' : 'hidden');
+    }
+});
+
+L.control.sidebar = function (placeholder, options) {
+    return new L.Control.Sidebar(placeholder, options);
+};

static/Sidebar/L.Control.Sidebar.scss

@@ -0,0 +1,158 @@
+$threshold-lg: 1200px;
+$threshold-md: 992px;
+$threshold-sm: 768px;
+
+$width-lg: 460px;
+$width-md: 390px;
+$width-sm: 305px;
+$width-xs: 100%;
+
+$transition-duration: 0.5s;
+
+@mixin border-radius($border-radius) {
+    -webkit-border-radius: $border-radius;
+    border-radius: $border-radius;
+}
+
+@mixin box-sizing($box-sizing) {
+    -webkit-box-sizing: $box-sizing;
+    -moz-box-sizing: $box-sizing;
+    box-sizing: $box-sizing;
+}
+
+@mixin widths($width) {
+    width: $width;
+
+    &.left.visible ~ .leaflet-left {
+        left: $width;
+    }
+
+    &.right.visible ~ .leaflet-right {
+        right: $width;
+    }
+}
+
+.leaflet-sidebar {
+    position: absolute;
+    height: 100%;
+
+    @include box-sizing(border-box);
+    padding: 10px;
+
+    z-index: 2000;
+
+    &.left {
+        left: -500px;
+        transition: left $transition-duration, width $transition-duration;
+
+        padding-right: 0;
+
+        &.visible {
+            left: 0;
+        }
+    }
+
+    &.right {
+        right: -500px;
+        transition: right $transition-duration, width $transition-duration;
+
+        padding-left: 0;
+
+        &.visible {
+            right: 0;
+        }
+    }
+
+    & > .leaflet-control {
+        height: 100%;
+        width: 100%;
+
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+
+        @include box-sizing(border-box);
+        padding: 8px 24px;
+
+        font-size: 1.1em;
+
+        background: white;
+        box-shadow: 0 1px 7px rgba(0,0,0,0.65);
+        @include border-radius(4px);
+
+        .leaflet-touch & {
+            box-shadow: none;
+            border: 2px solid rgba(0,0,0,0.2);
+            background-clip: padding-box;
+        }
+    }
+
+    @media(max-width:$threshold-sm - 1px) {
+        @include widths($width-xs);
+
+        padding: 0;
+
+        &.left {
+            left: -$width-xs;
+
+            &.visible {
+                left: 0;
+            }
+        }
+
+        &.right {
+            right: -$width-xs;
+
+            &.visible {
+                right: 0;
+            }
+        }
+
+        & > .leaflet-control {
+            box-shadow: none;
+            @include border-radius(0);
+
+            .leaflet-touch & {
+                border: 0;
+            }
+        }
+    }
+
+    @media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
+        @include widths($width-sm);
+    }
+
+    @media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
+        @include widths($width-md);
+    }
+
+    @media(min-width:$threshold-lg) {
+        @include widths($width-lg);
+    }
+
+    .close {
+        position: absolute;
+        right: 20px;
+        top: 20px;
+        width: 31px;
+        height: 31px;
+
+        color: #333;
+        font-size: 25pt;
+        line-height: 1em;
+        text-align: center;
+        background: white;
+        @include border-radius(16px);
+        cursor: pointer;
+
+        // https://github.com/Turbo87/leaflet-sidebar/issues/36
+        z-index: 1000;
+    }
+}
+
+.leaflet-left {
+    transition: left $transition-duration;
+}
+
+.leaflet-right {
+    transition: right $transition-duration;
+}