From 0b138b1364ca36336f8e73b82033769f75b0e1fc Mon Sep 17 00:00:00 2001 From: Mihkel Oviir Date: Sat, 29 Oct 2016 01:36:47 +0300 Subject: [PATCH 1/6] Added ol3 sidebar as ol3 control --- examples/ol3-no-jquery.html | 107 +++++++++++++++++++++++++++++++++ js/ol3-sidebar.js | 117 ++++++++++++++++++++++++++++++++++++ 2 files changed, 224 insertions(+) create mode 100644 examples/ol3-no-jquery.html create mode 100644 js/ol3-sidebar.js diff --git a/examples/ol3-no-jquery.html b/examples/ol3-no-jquery.html new file mode 100644 index 0000000..b43e350 --- /dev/null +++ b/examples/ol3-no-jquery.html @@ -0,0 +1,107 @@ + + + + sidebar-v2 example + + + + + + + + + + + + + + + + Fork me on GitHub + + + + + + + diff --git a/js/ol3-sidebar.js b/js/ol3-sidebar.js new file mode 100644 index 0000000..a12151e --- /dev/null +++ b/js/ol3-sidebar.js @@ -0,0 +1,117 @@ +ol.control.Sidebar = function (settings) { + + var defaults = { + element: null, + position: 'left' + }, i, child; + + this._options = Object.assign({}, defaults, settings); + + ol.control.Control.call(this, { + element: document.getElementById(this._options.element), + target: this._options.target + }); +} + +ol.inherits(ol.control.Sidebar, ol.control.Control); + +ol.control.Sidebar.prototype.setMap = function(map) { + var _this = this; + + // Wire up listeners etc. and store reference to new map + //ol.control.Control.prototype.setMap.call(this, map); + + // Attach .sidebar-left/right class + this.element.classList.add('sidebar-' + this._options.position); + + // Find sidebar > div.sidebar-content + for (i = this.element.children.length - 1; i >= 0; i--) { + child = this.element.children[i]; + if (child.tagName === 'DIV' && + child.classList.contains('sidebar-content')) { + this._container = child; + } + } + + // Find sidebar ul.sidebar-tabs > li, sidebar .sidebar-tabs > ul > li + this._tabitems = this.element.querySelectorAll('ul.sidebar-tabs > li, .sidebar-tabs > ul > li'); + for (i = this._tabitems.length - 1; i >= 0; i--) { + this._tabitems[i]._sidebar = this; + child = this._tabitems[i]; + var sub = child.querySelector('a'); + if (sub.hasAttribute('href') && sub.getAttribute('href').slice(0,1) == '#') { + sub.onclick = function(e) { + e = e || window.event; + e.preventDefault(); + if (this.parentNode.classList.contains('active')) { + _this.close(); + } else if (!this.parentNode.classList.contains('disabled')) { + _this.open(this.hash.slice(1)); + } + }; + } + } + + // Find sidebar > div.sidebar-content > div.sidebar-pane + this._panes = []; + this._closeButtons = []; + for (i = this._container.children.length - 1; i >= 0; i--) { + child = this._container.children[i]; + if (child.tagName == 'DIV' && + child.classList.contains('sidebar-pane')) { + this._panes.push(child); + var closeButtons = child.querySelectorAll('.sidebar-close'); + for (var j = 0, len = closeButtons.length; j < len; j++) { + this._closeButtons.push(closeButtons[j]); + closeButtons[j].onclick = function(e) { + e = e || window.event; + e.preventDefault(); + _this.close(); + }; + } + } + } +}; + +ol.control.Sidebar.prototype.open = function(id) { + var i, child; + + // hide old active contents and show new content + for (i = this._panes.length - 1; i >= 0; i--) { + child = this._panes[i]; + if (child.id == id) { + child.classList.add('active'); + } else if (child.classList.contains('active')) { + child.classList.remove('active'); + } + } + // remove old active highlights and set new highlight + for (i = this._tabitems.length - 1; i >= 0; i--) { + child = this._tabitems[i]; + if (child.querySelector('a').hash == '#' + id) { + child.classList.add('active'); + } else if (child.classList.contains('active')) { + child.classList.remove('active'); + } + } + // open sidebar (if necessary) + if (this.element.classList.contains('collapsed')) { + this.element.classList.remove('collapsed'); + } + return this; +}; + +ol.control.Sidebar.prototype.close = function() { + // remove old active highlights + for (var i = this._tabitems.length - 1; i >= 0; i--) { + var child = this._tabitems[i]; + if (child.classList.contains('active')) { + child.classList.remove('active'); + } + } + // close sidebar + if (!this.element.classList.contains('collapsed')) { + this.element.classList.add('collapsed'); + } + return this; +}; \ No newline at end of file From 112dd3bf54b46a7fd919530d7e905085765e6413 Mon Sep 17 00:00:00 2001 From: Mihkel Oviir Date: Sat, 29 Oct 2016 01:52:50 +0300 Subject: [PATCH 2/6] Fix lint issues --- js/ol3-sidebar.js | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/js/ol3-sidebar.js b/js/ol3-sidebar.js index a12151e..2d4a416 100644 --- a/js/ol3-sidebar.js +++ b/js/ol3-sidebar.js @@ -11,7 +11,7 @@ ol.control.Sidebar = function (settings) { element: document.getElementById(this._options.element), target: this._options.target }); -} +}; ol.inherits(ol.control.Sidebar, ol.control.Control); @@ -32,6 +32,22 @@ ol.control.Sidebar.prototype.setMap = function(map) { this._container = child; } } + + function tabClick(e) { + e = e || window.event; + e.preventDefault(); + if (this.parentNode.classList.contains('active')) { + _this.close(); + } else if (!this.parentNode.classList.contains('disabled')) { + _this.open(this.hash.slice(1)); + } + } + + function closeClick(e) { + e = e || window.event; + e.preventDefault(); + _this.close(); + } // Find sidebar ul.sidebar-tabs > li, sidebar .sidebar-tabs > ul > li this._tabitems = this.element.querySelectorAll('ul.sidebar-tabs > li, .sidebar-tabs > ul > li'); @@ -40,15 +56,7 @@ ol.control.Sidebar.prototype.setMap = function(map) { child = this._tabitems[i]; var sub = child.querySelector('a'); if (sub.hasAttribute('href') && sub.getAttribute('href').slice(0,1) == '#') { - sub.onclick = function(e) { - e = e || window.event; - e.preventDefault(); - if (this.parentNode.classList.contains('active')) { - _this.close(); - } else if (!this.parentNode.classList.contains('disabled')) { - _this.open(this.hash.slice(1)); - } - }; + sub.onclick = tabClick; } } @@ -63,11 +71,7 @@ ol.control.Sidebar.prototype.setMap = function(map) { var closeButtons = child.querySelectorAll('.sidebar-close'); for (var j = 0, len = closeButtons.length; j < len; j++) { this._closeButtons.push(closeButtons[j]); - closeButtons[j].onclick = function(e) { - e = e || window.event; - e.preventDefault(); - _this.close(); - }; + closeButtons[j].onclick = closeClick; } } } From 134727adaa0a7bf6e0c2f65d50506688ca938077 Mon Sep 17 00:00:00 2001 From: Mihkel Oviir Date: Sat, 29 Oct 2016 01:56:56 +0300 Subject: [PATCH 3/6] bower definition update --- bower.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 773f179..706da52 100644 --- a/bower.json +++ b/bower.json @@ -12,7 +12,8 @@ "css/ol2-sidebar.css", "css/ol3-sidebar.css", "js/jquery-sidebar.js", - "js/leaflet-sidebar.js" + "js/leaflet-sidebar.js", + "js/ol3-sidebar.js" ], "keywords": [ "gis", From 92175e60d3c5dae5eb2c44a07a9b6bc8d0cf510e Mon Sep 17 00:00:00 2001 From: Mihkel Oviir Date: Sat, 29 Oct 2016 02:03:25 +0300 Subject: [PATCH 4/6] gulp build --- css/ol3-sidebar.css | 31 ++++++------------------------- css/ol3-sidebar.min.css | 2 +- js/leaflet-sidebar.min.js | 2 +- js/ol3-sidebar.min.js | 1 + 4 files changed, 9 insertions(+), 27 deletions(-) create mode 100644 js/ol3-sidebar.min.js diff --git a/css/ol3-sidebar.css b/css/ol3-sidebar.css index aead336..bb47ada 100644 --- a/css/ol3-sidebar.css +++ b/css/ol3-sidebar.css @@ -160,42 +160,23 @@ .sidebar-content { border-radius: 0 2px 2px 0; } } -.sidebar-left ~ .sidebar-map .ol-zoom { +.sidebar-left ~ .sidebar-map .ol-zoom, .sidebar-left ~ .sidebar-map .ol-scale-line { margin-left: 46px; } @media (min-width: 768px) { - .sidebar-left ~ .sidebar-map .ol-zoom { + .sidebar-left ~ .sidebar-map .ol-zoom, .sidebar-left ~ .sidebar-map .ol-scale-line { transition: margin-left 500ms; } } @media (min-width: 768px) and (max-width: 991px) { - .sidebar-left ~ .sidebar-map .ol-zoom { + .sidebar-left ~ .sidebar-map .ol-zoom, .sidebar-left ~ .sidebar-map .ol-scale-line { margin-left: 317px; } } @media (min-width: 992px) and (max-width: 1199px) { - .sidebar-left ~ .sidebar-map .ol-zoom { + .sidebar-left ~ .sidebar-map .ol-zoom, .sidebar-left ~ .sidebar-map .ol-scale-line { margin-left: 402px; } } @media (min-width: 1200px) { - .sidebar-left ~ .sidebar-map .ol-zoom { + .sidebar-left ~ .sidebar-map .ol-zoom, .sidebar-left ~ .sidebar-map .ol-scale-line { margin-left: 472px; } } @media (min-width: 768px) { - .sidebar-left.collapsed ~ .sidebar-map .ol-zoom { - margin-left: 52px; } } - -.sidebar-left ~ .sidebar-map .ol-scale-line { - margin-left: 46px; } - @media (min-width: 768px) { - .sidebar-left ~ .sidebar-map .ol-scale-line { - transition: margin-left 500ms; } } - @media (min-width: 768px) and (max-width: 991px) { - .sidebar-left ~ .sidebar-map .ol-scale-line { - margin-left: 317px; } } - @media (min-width: 992px) and (max-width: 1199px) { - .sidebar-left ~ .sidebar-map .ol-scale-line { - margin-left: 402px; } } - @media (min-width: 1200px) { - .sidebar-left ~ .sidebar-map .ol-scale-line { - margin-left: 472px; } } - -@media (min-width: 768px) { - .sidebar-left.collapsed ~ .sidebar-map .ol-scale-line { + .sidebar-left.collapsed ~ .sidebar-map .ol-zoom, .sidebar-left.collapsed ~ .sidebar-map .ol-scale-line { margin-left: 52px; } } .sidebar-right ~ .sidebar-map .ol-rotate, diff --git a/css/ol3-sidebar.min.css b/css/ol3-sidebar.min.css index 4520d62..f5b15c4 100644 --- a/css/ol3-sidebar.min.css +++ b/css/ol3-sidebar.min.css @@ -1 +1 @@ -.sidebar{position:absolute;top:0;bottom:0;width:100%;overflow:hidden;z-index:2000}.sidebar.collapsed{width:40px}@media (min-width:768px) and (max-width:991px){.sidebar{width:305px}.sidebar-pane{min-width:265px}}@media (min-width:992px) and (max-width:1199px){.sidebar{width:390px}}@media (min-width:1200px){.sidebar{width:460px}}.sidebar-left{left:0;border-right:3px solid transparent}.sidebar-right{right:0;border-left:3px solid transparent}@media (min-width:768px){.sidebar{top:6px;bottom:6px;transition:width .5s;border:3px solid transparent;border-radius:4px}.sidebar-left{left:6px}.sidebar-right{right:6px}}.sidebar-tabs{top:0;bottom:0;height:100%;background-color:rgba(0,60,136,.5)}.sidebar-left .sidebar-tabs{left:0}.sidebar-right .sidebar-tabs{right:0}.sidebar-tabs,.sidebar-tabs>ul{position:absolute;width:40px;margin:0;padding:0}.sidebar-tabs>li,.sidebar-tabs>ul>li{width:100%;height:40px;color:#fff;font-size:12pt;overflow:hidden;transition:all 80ms}.sidebar-tabs>li:hover,.sidebar-tabs>ul>li:hover{color:#fff;background-color:rgba(0,60,136,.6)}.sidebar-tabs>li.active,.sidebar-tabs>ul>li.active{color:#fff;background-color:#0074d9}.sidebar-tabs>li.disabled,.sidebar-tabs>ul>li.disabled{color:rgba(255,255,255,.4)}.sidebar-tabs>li.disabled:hover,.sidebar-tabs>ul>li.disabled:hover{background:0 0}.sidebar-tabs>li.disabled>a,.sidebar-tabs>ul>li.disabled>a{cursor:default}.sidebar-tabs>li>a,.sidebar-tabs>ul>li>a{display:block;width:100%;height:100%;line-height:40px;color:inherit;text-decoration:none;text-align:center}.sidebar-tabs>ul+ul{bottom:0}.sidebar-content{position:absolute;top:0;bottom:0;background-color:rgba(255,255,255,.95);overflow-x:hidden;overflow-y:auto}.sidebar-left .sidebar-content{left:40px;right:0}.sidebar-right .sidebar-content{left:0;right:40px}.sidebar.collapsed>.sidebar-content{overflow-y:hidden}.sidebar-pane{display:none;left:0;right:0;box-sizing:border-box;padding:10px 20px}.sidebar-pane.active{display:block}.sidebar-header{margin:-10px -20px 0;height:40px;padding:0 20px;line-height:40px;font-size:14.4pt;color:#fff;background-color:#0074d9}.sidebar-right .sidebar-header{padding-left:40px}.sidebar-close{position:absolute;top:0;width:40px;height:40px;text-align:center;cursor:pointer}.sidebar-left .sidebar-close{right:0}.sidebar-right .sidebar-close{left:0}.sidebar{background-color:rgba(255,255,255,.4)}.sidebar-tabs{overflow:hidden}.sidebar-left~.sidebar-map .ol-zoom{margin-left:46px}@media (min-width:768px) and (max-width:991px){.sidebar-left~.sidebar-map .ol-zoom{margin-left:317px}}@media (min-width:992px) and (max-width:1199px){.sidebar-pane{min-width:350px}.sidebar-left~.sidebar-map .ol-zoom{margin-left:402px}}@media (min-width:1200px){.sidebar-pane{min-width:420px}.sidebar-left~.sidebar-map .ol-zoom{margin-left:472px}}@media (min-width:768px){.sidebar-tabs{border-radius:2px 0 0 2px}.collapsed .sidebar-tabs{border-radius:2px}.sidebar-content{border-radius:0 2px 2px 0}.sidebar-left~.sidebar-map .ol-zoom{transition:margin-left .5s}.sidebar-left.collapsed~.sidebar-map .ol-zoom{margin-left:52px}.sidebar-left~.sidebar-map .ol-scale-line{transition:margin-left .5s}}.sidebar-left~.sidebar-map .ol-scale-line{margin-left:46px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:46px}@media (min-width:768px) and (max-width:991px){.sidebar-left~.sidebar-map .ol-scale-line{margin-left:317px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:317px}}@media (min-width:992px) and (max-width:1199px){.sidebar-left~.sidebar-map .ol-scale-line{margin-left:402px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:402px}}@media (min-width:1200px){.sidebar-left~.sidebar-map .ol-scale-line{margin-left:472px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:472px}}@media (min-width:768px){.sidebar-left.collapsed~.sidebar-map .ol-scale-line{margin-left:52px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{transition:margin-right .5s}.sidebar-right.collapsed~.sidebar-map .ol-attribution,.sidebar-right.collapsed~.sidebar-map .ol-full-screen,.sidebar-right.collapsed~.sidebar-map .ol-rotate{margin-right:52px}} \ No newline at end of file +.sidebar{position:absolute;top:0;bottom:0;width:100%;overflow:hidden;z-index:2000}.sidebar.collapsed{width:40px}@media (min-width:768px){.sidebar{top:6px;bottom:6px;transition:width 500ms}}@media (min-width:768px) and (max-width:991px){.sidebar{width:305px}}@media (min-width:992px) and (max-width:1199px){.sidebar{width:390px}}@media (min-width:1200px){.sidebar{width:460px}}.sidebar-left{left:0}@media (min-width:768px){.sidebar-left{left:6px}}.sidebar-right{right:0}@media (min-width:768px){.sidebar-right{right:6px}}.sidebar-tabs{top:0;bottom:0;height:100%;background-color:rgba(0,60,136,.5)}.sidebar-left .sidebar-tabs{left:0}.sidebar-right .sidebar-tabs{right:0}.sidebar-tabs,.sidebar-tabs>ul{position:absolute;width:40px;margin:0;padding:0}.sidebar-tabs>li,.sidebar-tabs>ul>li{width:100%;height:40px;color:#fff;font-size:12pt;overflow:hidden;transition:all 80ms}.sidebar-tabs>li:hover,.sidebar-tabs>ul>li:hover{color:#fff;background-color:rgba(0,60,136,.6)}.sidebar-tabs>li.active,.sidebar-tabs>ul>li.active{color:#fff;background-color:#0074d9}.sidebar-tabs>li.disabled,.sidebar-tabs>ul>li.disabled{color:rgba(255,255,255,.4)}.sidebar-tabs>li.disabled:hover,.sidebar-tabs>ul>li.disabled:hover{background:0 0}.sidebar-tabs>li.disabled>a,.sidebar-tabs>ul>li.disabled>a{cursor:default}.sidebar-tabs>li>a,.sidebar-tabs>ul>li>a{display:block;width:100%;height:100%;line-height:40px;color:inherit;text-decoration:none;text-align:center}.sidebar-tabs>ul+ul{bottom:0}.sidebar-content{position:absolute;top:0;bottom:0;background-color:rgba(255,255,255,.95);overflow-x:hidden;overflow-y:auto}.sidebar-left .sidebar-content{left:40px;right:0}.sidebar-right .sidebar-content{left:0;right:40px}.sidebar.collapsed>.sidebar-content{overflow-y:hidden}.sidebar-pane{display:none;left:0;right:0;box-sizing:border-box;padding:10px 20px}.sidebar-pane.active{display:block}@media (min-width:768px) and (max-width:991px){.sidebar-pane{min-width:265px}}@media (min-width:992px) and (max-width:1199px){.sidebar-pane{min-width:350px}}@media (min-width:1200px){.sidebar-pane{min-width:420px}}.sidebar-header{margin:-10px -20px 0;height:40px;padding:0 20px;line-height:40px;font-size:14.4pt;color:#fff;background-color:#0074d9}.sidebar-right .sidebar-header{padding-left:40px}.sidebar-close{position:absolute;top:0;width:40px;height:40px;text-align:center;cursor:pointer}.sidebar-left .sidebar-close{right:0}.sidebar-right .sidebar-close{left:0}.sidebar{background-color:rgba(255,255,255,.4)}@media (min-width:768px){.sidebar{border:3px solid transparent;border-radius:4px}}.sidebar-left{border-right:3px solid transparent}.sidebar-right{border-left:3px solid transparent}.sidebar-tabs{overflow:hidden}@media (min-width:768px){.sidebar-tabs{border-radius:2px 0 0 2px}.collapsed .sidebar-tabs{border-radius:2px}}@media (min-width:768px){.sidebar-content{border-radius:0 2px 2px 0}}.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{margin-left:46px}@media (min-width:768px){.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{transition:margin-left 500ms}}@media (min-width:768px) and (max-width:991px){.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{margin-left:317px}}@media (min-width:992px) and (max-width:1199px){.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{margin-left:402px}}@media (min-width:1200px){.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{margin-left:472px}}@media (min-width:768px){.sidebar-left.collapsed~.sidebar-map .ol-scale-line,.sidebar-left.collapsed~.sidebar-map .ol-zoom{margin-left:52px}}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:46px}@media (min-width:768px){.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{transition:margin-right 500ms}}@media (min-width:768px) and (max-width:991px){.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:317px}}@media (min-width:992px) and (max-width:1199px){.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:402px}}@media (min-width:1200px){.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:472px}}@media (min-width:768px){.sidebar-right.collapsed~.sidebar-map .ol-attribution,.sidebar-right.collapsed~.sidebar-map .ol-full-screen,.sidebar-right.collapsed~.sidebar-map .ol-rotate{margin-right:52px}} \ No newline at end of file diff --git a/js/leaflet-sidebar.min.js b/js/leaflet-sidebar.min.js index 4028d27..09b4c54 100644 --- a/js/leaflet-sidebar.min.js +++ b/js/leaflet-sidebar.min.js @@ -1 +1 @@ -L.Control.Sidebar=L.Control.extend({includes:L.Mixin.Events,options:{position:"left"},initialize:function(t,s){var i,e;for(L.setOptions(this,s),this._sidebar=L.DomUtil.get(t),L.DomUtil.addClass(this._sidebar,"sidebar-"+this.options.position),L.Browser.touch&&L.DomUtil.addClass(this._sidebar,"leaflet-touch"),i=this._sidebar.children.length-1;i>=0;i--)e=this._sidebar.children[i],"DIV"==e.tagName&&L.DomUtil.hasClass(e,"sidebar-content")&&(this._container=e);for(this._tabitems=this._sidebar.querySelectorAll("ul.sidebar-tabs > li, .sidebar-tabs > ul > li"),i=this._tabitems.length-1;i>=0;i--)this._tabitems[i]._sidebar=this;for(this._panes=[],this._closeButtons=[],i=this._container.children.length-1;i>=0;i--)if(e=this._container.children[i],"DIV"==e.tagName&&L.DomUtil.hasClass(e,"sidebar-pane")){this._panes.push(e);for(var o=e.querySelectorAll(".sidebar-close"),l=0,a=o.length;a>l;l++)this._closeButtons.push(o[l])}},addTo:function(t){var s,i;for(this._map=t,s=this._tabitems.length-1;s>=0;s--)i=this._tabitems[s],L.DomEvent.on(i.querySelector("a"),"click",L.DomEvent.preventDefault).on(i.querySelector("a"),"click",this._onClick,i);for(s=this._closeButtons.length-1;s>=0;s--)i=this._closeButtons[s],L.DomEvent.on(i,"click",this._onCloseClick,this);return this},removeFrom:function(){var t,s;for(this._map=null,t=this._tabitems.length-1;t>=0;t--)s=this._tabitems[t],L.DomEvent.off(s.querySelector("a"),"click",this._onClick);for(t=this._closeButtons.length-1;t>=0;t--)s=this._closeButtons[t],L.DomEvent.off(s,"click",this._onCloseClick,this);return this},open:function(t){var s,i;for(s=this._panes.length-1;s>=0;s--)i=this._panes[s],i.id==t?L.DomUtil.addClass(i,"active"):L.DomUtil.hasClass(i,"active")&&L.DomUtil.removeClass(i,"active");for(s=this._tabitems.length-1;s>=0;s--)i=this._tabitems[s],i.querySelector("a").hash=="#"+t?L.DomUtil.addClass(i,"active"):L.DomUtil.hasClass(i,"active")&&L.DomUtil.removeClass(i,"active");return this.fire("content",{id:t}),L.DomUtil.hasClass(this._sidebar,"collapsed")&&(this.fire("opening"),L.DomUtil.removeClass(this._sidebar,"collapsed")),this},close:function(){for(var t=this._tabitems.length-1;t>=0;t--){var s=this._tabitems[t];L.DomUtil.hasClass(s,"active")&&L.DomUtil.removeClass(s,"active")}return L.DomUtil.hasClass(this._sidebar,"collapsed")||(this.fire("closing"),L.DomUtil.addClass(this._sidebar,"collapsed")),this},_onClick:function(){L.DomUtil.hasClass(this,"active")?this._sidebar.close():L.DomUtil.hasClass(this,"disabled")||this._sidebar.open(this.querySelector("a").hash.slice(1))},_onCloseClick:function(){this.close()}}),L.control.sidebar=function(t,s){return new L.Control.Sidebar(t,s)}; \ No newline at end of file +L.Control.Sidebar=L.Control.extend({includes:L.Mixin.Events,options:{position:"left"},initialize:function(t,s){var i,e;for(L.setOptions(this,s),this._sidebar=L.DomUtil.get(t),L.DomUtil.addClass(this._sidebar,"sidebar-"+this.options.position),L.Browser.touch&&L.DomUtil.addClass(this._sidebar,"leaflet-touch"),i=this._sidebar.children.length-1;i>=0;i--)e=this._sidebar.children[i],"DIV"==e.tagName&&L.DomUtil.hasClass(e,"sidebar-content")&&(this._container=e);for(this._tabitems=this._sidebar.querySelectorAll("ul.sidebar-tabs > li, .sidebar-tabs > ul > li"),i=this._tabitems.length-1;i>=0;i--)this._tabitems[i]._sidebar=this;for(this._panes=[],this._closeButtons=[],i=this._container.children.length-1;i>=0;i--)if(e=this._container.children[i],"DIV"==e.tagName&&L.DomUtil.hasClass(e,"sidebar-pane")){this._panes.push(e);for(var o=e.querySelectorAll(".sidebar-close"),a=0,l=o.length;l>a;a++)this._closeButtons.push(o[a])}},addTo:function(t){var s,i;for(this._map=t,s=this._tabitems.length-1;s>=0;s--){i=this._tabitems[s];var e=i.querySelector("a");e.hasAttribute("href")&&"#"==e.getAttribute("href").slice(0,1)&&L.DomEvent.on(e,"click",L.DomEvent.preventDefault).on(e,"click",this._onClick,i)}for(s=this._closeButtons.length-1;s>=0;s--)i=this._closeButtons[s],L.DomEvent.on(i,"click",this._onCloseClick,this);return this},removeFrom:function(t){console.log("removeFrom() has been deprecated, please use remove() instead as support for this function will be ending soon."),this.remove(t)},remove:function(){var t,s;for(this._map=null,t=this._tabitems.length-1;t>=0;t--)s=this._tabitems[t],L.DomEvent.off(s.querySelector("a"),"click",this._onClick);for(t=this._closeButtons.length-1;t>=0;t--)s=this._closeButtons[t],L.DomEvent.off(s,"click",this._onCloseClick,this);return this},open:function(t){var s,i;for(s=this._panes.length-1;s>=0;s--)i=this._panes[s],i.id==t?L.DomUtil.addClass(i,"active"):L.DomUtil.hasClass(i,"active")&&L.DomUtil.removeClass(i,"active");for(s=this._tabitems.length-1;s>=0;s--)i=this._tabitems[s],i.querySelector("a").hash=="#"+t?L.DomUtil.addClass(i,"active"):L.DomUtil.hasClass(i,"active")&&L.DomUtil.removeClass(i,"active");return this.fire("content",{id:t}),L.DomUtil.hasClass(this._sidebar,"collapsed")&&(this.fire("opening"),L.DomUtil.removeClass(this._sidebar,"collapsed")),this},close:function(){for(var t=this._tabitems.length-1;t>=0;t--){var s=this._tabitems[t];L.DomUtil.hasClass(s,"active")&&L.DomUtil.removeClass(s,"active")}return L.DomUtil.hasClass(this._sidebar,"collapsed")||(this.fire("closing"),L.DomUtil.addClass(this._sidebar,"collapsed")),this},_onClick:function(){L.DomUtil.hasClass(this,"active")?this._sidebar.close():L.DomUtil.hasClass(this,"disabled")||this._sidebar.open(this.querySelector("a").hash.slice(1))},_onCloseClick:function(){this.close()}}),L.control.sidebar=function(t,s){return new L.Control.Sidebar(t,s)}; \ No newline at end of file diff --git a/js/ol3-sidebar.min.js b/js/ol3-sidebar.min.js new file mode 100644 index 0000000..a657485 --- /dev/null +++ b/js/ol3-sidebar.min.js @@ -0,0 +1 @@ +ol.control.Sidebar=function(t){var e={element:null,position:"left"};this._options=Object.assign({},e,t),ol.control.Control.call(this,{element:document.getElementById(this._options.element),target:this._options.target})},ol.inherits(ol.control.Sidebar,ol.control.Control),ol.control.Sidebar.prototype.setMap=function(){function t(t){t=t||window.event,t.preventDefault(),this.parentNode.classList.contains("active")?s.close():this.parentNode.classList.contains("disabled")||s.open(this.hash.slice(1))}function e(t){t=t||window.event,t.preventDefault(),s.close()}var s=this;for(this.element.classList.add("sidebar-"+this._options.position),i=this.element.children.length-1;i>=0;i--)child=this.element.children[i],"DIV"===child.tagName&&child.classList.contains("sidebar-content")&&(this._container=child);for(this._tabitems=this.element.querySelectorAll("ul.sidebar-tabs > li, .sidebar-tabs > ul > li"),i=this._tabitems.length-1;i>=0;i--){this._tabitems[i]._sidebar=this,child=this._tabitems[i];var l=child.querySelector("a");l.hasAttribute("href")&&"#"==l.getAttribute("href").slice(0,1)&&(l.onclick=t)}for(this._panes=[],this._closeButtons=[],i=this._container.children.length-1;i>=0;i--)if(child=this._container.children[i],"DIV"==child.tagName&&child.classList.contains("sidebar-pane")){this._panes.push(child);for(var n=child.querySelectorAll(".sidebar-close"),a=0,o=n.length;o>a;a++)this._closeButtons.push(n[a]),n[a].onclick=e}},ol.control.Sidebar.prototype.open=function(t){var e,i;for(e=this._panes.length-1;e>=0;e--)i=this._panes[e],i.id==t?i.classList.add("active"):i.classList.contains("active")&&i.classList.remove("active");for(e=this._tabitems.length-1;e>=0;e--)i=this._tabitems[e],i.querySelector("a").hash=="#"+t?i.classList.add("active"):i.classList.contains("active")&&i.classList.remove("active");return this.element.classList.contains("collapsed")&&this.element.classList.remove("collapsed"),this},ol.control.Sidebar.prototype.close=function(){for(var t=this._tabitems.length-1;t>=0;t--){var e=this._tabitems[t];e.classList.contains("active")&&e.classList.remove("active")}return this.element.classList.contains("collapsed")||this.element.classList.add("collapsed"),this}; \ No newline at end of file From 5b771d18b74ea838186352b232febf719450015a Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Tue, 1 Nov 2016 15:14:56 +0100 Subject: [PATCH 5/6] Remove trailing whitespace --- examples/ol3-no-jquery.html | 4 +--- js/ol3-sidebar.js | 12 ++++++------ 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/examples/ol3-no-jquery.html b/examples/ol3-no-jquery.html index b43e350..545ff54 100644 --- a/examples/ol3-no-jquery.html +++ b/examples/ol3-no-jquery.html @@ -26,7 +26,6 @@ font-style: italic; color: #AAA; } - @@ -78,7 +77,7 @@

Settings - + Fork me on GitHub @@ -101,7 +100,6 @@

Settings=0;i--)child=this.element.children[i],"DIV"===child.tagName&&child.classList.contains("sidebar-content")&&(this._container=child);for(this._tabitems=this.element.querySelectorAll("ul.sidebar-tabs > li, .sidebar-tabs > ul > li"),i=this._tabitems.length-1;i>=0;i--){this._tabitems[i]._sidebar=this,child=this._tabitems[i];var l=child.querySelector("a");l.hasAttribute("href")&&"#"==l.getAttribute("href").slice(0,1)&&(l.onclick=t)}for(this._panes=[],this._closeButtons=[],i=this._container.children.length-1;i>=0;i--)if(child=this._container.children[i],"DIV"==child.tagName&&child.classList.contains("sidebar-pane")){this._panes.push(child);for(var n=child.querySelectorAll(".sidebar-close"),a=0,o=n.length;o>a;a++)this._closeButtons.push(n[a]),n[a].onclick=e}},ol.control.Sidebar.prototype.open=function(t){var e,i;for(e=this._panes.length-1;e>=0;e--)i=this._panes[e],i.id==t?i.classList.add("active"):i.classList.contains("active")&&i.classList.remove("active");for(e=this._tabitems.length-1;e>=0;e--)i=this._tabitems[e],i.querySelector("a").hash=="#"+t?i.classList.add("active"):i.classList.contains("active")&&i.classList.remove("active");return this.element.classList.contains("collapsed")&&this.element.classList.remove("collapsed"),this},ol.control.Sidebar.prototype.close=function(){for(var t=this._tabitems.length-1;t>=0;t--){var e=this._tabitems[t];e.classList.contains("active")&&e.classList.remove("active")}return this.element.classList.contains("collapsed")||this.element.classList.add("collapsed"),this}; \ No newline at end of file +ol.control.Sidebar=function(t){var s,e,i={element:null,position:"left"};for(this._options=Object.assign({},i,t),ol.control.Control.call(this,{element:document.getElementById(this._options.element),target:this._options.target}),this.element.classList.add("sidebar-"+this._options.position),s=this.element.children.length-1;s>=0;s--)e=this.element.children[s],"DIV"===e.tagName&&e.classList.contains("sidebar-content")&&(this._container=e);for(this._tabitems=this.element.querySelectorAll("ul.sidebar-tabs > li, .sidebar-tabs > ul > li"),s=this._tabitems.length-1;s>=0;s--)this._tabitems[s]._sidebar=this;for(this._panes=[],this._closeButtons=[],s=this._container.children.length-1;s>=0;s--)if(e=this._container.children[s],"DIV"==e.tagName&&e.classList.contains("sidebar-pane")){this._panes.push(e);for(var o=e.querySelectorAll(".sidebar-close"),l=0,n=o.length;n>l;l++)this._closeButtons.push(o[l])}},ol.inherits(ol.control.Sidebar,ol.control.Control),ol.control.Sidebar.prototype.setMap=function(){var t,s;for(t=this._tabitems.length-1;t>=0;t--){s=this._tabitems[t];var e=s.querySelector("a");e.hasAttribute("href")&&"#"==e.getAttribute("href").slice(0,1)&&(e.onclick=this._onClick.bind(s))}for(t=this._closeButtons.length-1;t>=0;t--)s=this._closeButtons[t],s.onclick=this._onCloseClick.bind(this)},ol.control.Sidebar.prototype.open=function(t){var s,e;for(s=this._panes.length-1;s>=0;s--)e=this._panes[s],e.id==t?e.classList.add("active"):e.classList.contains("active")&&e.classList.remove("active");for(s=this._tabitems.length-1;s>=0;s--)e=this._tabitems[s],e.querySelector("a").hash=="#"+t?e.classList.add("active"):e.classList.contains("active")&&e.classList.remove("active");return this.element.classList.contains("collapsed")&&this.element.classList.remove("collapsed"),this},ol.control.Sidebar.prototype.close=function(){for(var t=this._tabitems.length-1;t>=0;t--){var s=this._tabitems[t];s.classList.contains("active")&&s.classList.remove("active")}return this.element.classList.contains("collapsed")||this.element.classList.add("collapsed"),this},ol.control.Sidebar.prototype._onClick=function(){this.classList.contains("active")?this._sidebar.close():this.classList.contains("disabled")||this._sidebar.open(this.querySelector("a").hash.slice(1))},ol.control.Sidebar.prototype._onCloseClick=function(){this.close()}; \ No newline at end of file