From fb00c8b6d9c41f65c891961a48a3f635d9b06fcb Mon Sep 17 00:00:00 2001 From: humano Date: Mon, 29 Jul 2019 10:18:21 -0500 Subject: [PATCH] prueba de concepto crear circuitos --- circuitos.php | 220 ++++++++ librerias/leaflet/css/leaflet-sidebar.css | 195 +++++++ librerias/leaflet/css/leaflet-sidebar.min.css | 1 + librerias/leaflet/js/leaflet-sidebar.js | 529 ++++++++++++++++++ librerias/leaflet/js/leaflet-sidebar.min.js | 1 + mapero.php | 24 +- milfs | 2 +- 7 files changed, 949 insertions(+), 23 deletions(-) create mode 100644 circuitos.php create mode 100644 librerias/leaflet/css/leaflet-sidebar.css create mode 100644 librerias/leaflet/css/leaflet-sidebar.min.css create mode 100755 librerias/leaflet/js/leaflet-sidebar.js create mode 100755 librerias/leaflet/js/leaflet-sidebar.min.js diff --git a/circuitos.php b/circuitos.php new file mode 100644 index 0000000..bd0f6a1 --- /dev/null +++ b/circuitos.php @@ -0,0 +1,220 @@ +processRequests(); +//if($_REQUEST[id2] =='') {$agregar= $_REQUEST[id];}else {$agregar = $_REQUEST[id2];} +if(isset($_REQUEST['categoria']) AND isset($_REQUEST['buscar'])) { + $cadena_busqueda = "$_REQUEST[buscar]"; +$_REQUEST['buscar'] = "$_REQUEST[categoria]:$_REQUEST[buscar]"; +} +$formulario_nombre = remplacetas('form_id','id',$_REQUEST[id],'nombre',"","") ; +$formulario_descripcion = remplacetas('form_id','id',$_REQUEST[id],'descripcion',"","") ; +$descripcion_meta = preg_replace("[\n|\r|\n\r|\t]",'', strip_tags($formulario_descripcion[0])); +$agregar_nombre = remplacetas('form_id','id',$agregar,'nombre',"","") ; +$id_empresa = remplacetas('form_id','id',$_REQUEST[id],'id_empresa',"","") ; +$twitter = remplacetas('empresa','id',"$id_empresa[0]",'twitter','',"","") ; +if($twitter[0] =="") {$twitter[0] ="@tupaleCo";} +$logo = remplacetas('empresa','id',"$id_empresa[0]",'imagen','',"","") ; +$razon_social = remplacetas('empresa','id',"$id_empresa[0]",'razon_social','',"","") ; +$campos_formulario = input_campos("$_REQUEST[id]","categoria"); +$uri = "$_SERVER[SERVER_NAME]/$_SERVER[REQUEST_URI]"; +$background_imagen = buscar_imagen("$_REQUEST[id]","","","$id_empresa"); +$plantilla ="mapa"; +$categorias = lista_categorias($_REQUEST['id'],'','mapa') ; +?> + + + + <?php echo "$formulario_nombre[0] / $cadena_busqueda" ?> tupale.co + + + + + + + + + + + + + + tupale.co"> + +"> + + tupale.co" /> + +" /> +" /> + + + "> + printJavascript("milfs/xajax/"); ?> + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + diff --git a/librerias/leaflet/css/leaflet-sidebar.css b/librerias/leaflet/css/leaflet-sidebar.css new file mode 100644 index 0000000..d2ce94a --- /dev/null +++ b/librerias/leaflet/css/leaflet-sidebar.css @@ -0,0 +1,195 @@ +.leaflet-sidebar { + position: absolute; + top: 0; + bottom: 0; + width: 100%; + overflow: hidden; + z-index: 2000; } + .leaflet-sidebar.collapsed { + width: 40px; } + @media (min-width: 768px) { + .leaflet-sidebar { + top: 10px; + bottom: 10px; + transition: width 500ms; } } + @media (min-width: 768px) and (max-width: 991px) { + .leaflet-sidebar { + width: 305px; + max-width: 305px; } } + @media (min-width: 992px) and (max-width: 1199px) { + .leaflet-sidebar { + width: 390px; + max-width: 390px; } } + @media (min-width: 1200px) { + .leaflet-sidebar { + width: 460px; + max-width: 460px; } } + +.leaflet-sidebar-left { + left: 0; } + @media (min-width: 768px) { + .leaflet-sidebar-left { + left: 10px; } } + +.leaflet-sidebar-right { + right: 0; } + @media (min-width: 768px) { + .leaflet-sidebar-right { + right: 10px; } } + +.leaflet-sidebar-tabs { + top: 0; + bottom: 0; + height: 100%; + background-color: #fff; } + .leaflet-sidebar-left .leaflet-sidebar-tabs { + left: 0; } + .leaflet-sidebar-right .leaflet-sidebar-tabs { + right: 0; } + .leaflet-sidebar-tabs, .leaflet-sidebar-tabs > ul { + position: absolute; + width: 40px; + margin: 0; + padding: 0; + list-style-type: none; } + .leaflet-sidebar-tabs > li, .leaflet-sidebar-tabs > ul > li { + width: 100%; + height: 40px; + color: #333; + font-size: 12pt; + overflow: hidden; + transition: all 80ms; } + .leaflet-sidebar-tabs > li:hover, .leaflet-sidebar-tabs > ul > li:hover { + color: #000; + background-color: #eee; } + .leaflet-sidebar-tabs > li.active, .leaflet-sidebar-tabs > ul > li.active { + color: #fff; + background-color: #0074d9; } + .leaflet-sidebar-tabs > li.disabled, .leaflet-sidebar-tabs > ul > li.disabled { + color: rgba(51, 51, 51, 0.4); } + .leaflet-sidebar-tabs > li.disabled:hover, .leaflet-sidebar-tabs > ul > li.disabled:hover { + background: transparent; } + .leaflet-sidebar-tabs > li.disabled > a, .leaflet-sidebar-tabs > ul > li.disabled > a { + cursor: default; } + .leaflet-sidebar-tabs > li > a, .leaflet-sidebar-tabs > ul > li > a { + display: block; + width: 100%; + height: 100%; + line-height: 40px; + color: inherit; + text-decoration: none; + text-align: center; + cursor: pointer; } + .leaflet-sidebar-tabs > ul + ul { + bottom: 0; } + +.leaflet-sidebar-content { + position: absolute; + top: 0; + bottom: 0; + background-color: rgba(255, 255, 255, 0.95); + overflow-x: hidden; + overflow-y: auto; } + .leaflet-sidebar-left .leaflet-sidebar-content { + left: 40px; + right: 0; } + .leaflet-sidebar-right .leaflet-sidebar-content { + left: 0; + right: 40px; } + .leaflet-sidebar.collapsed > .leaflet-sidebar-content { + overflow-y: hidden; } + +.collapsed > .leaflet-sidebar-content { + overflow-y: hidden; } + +.leaflet-sidebar-pane { + display: none; + left: 0; + right: 0; + box-sizing: border-box; + padding: 10px 20px; } + .leaflet-sidebar-pane.active { + display: block; } + @media (min-width: 768px) and (max-width: 991px) { + .leaflet-sidebar-pane { + min-width: 265px; } } + @media (min-width: 992px) and (max-width: 1199px) { + .leaflet-sidebar-pane { + min-width: 350px; } } + @media (min-width: 1200px) { + .leaflet-sidebar-pane { + min-width: 420px; } } + +.leaflet-sidebar-header { + margin: -10px -20px 0; + height: 40px; + padding: 0 20px; + line-height: 40px; + font-size: 14.4pt; + color: #fff; + background-color: #0074d9; } + .leaflet-sidebar-right .leaflet-sidebar-header { + padding-left: 40px; } + +.leaflet-sidebar-close { + position: absolute; + top: 0; + width: 40px; + height: 40px; + text-align: center; + cursor: pointer; } + .leaflet-sidebar-left .leaflet-sidebar-close { + right: 0; } + .leaflet-sidebar-right .leaflet-sidebar-close { + left: 0; } + +.leaflet-sidebar { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); } + .leaflet-sidebar.leaflet-touch { + box-shadow: none; + border-right: 2px solid rgba(0, 0, 0, 0.2); } + @media (min-width: 768px) { + .leaflet-sidebar { + border-radius: 4px; } + .leaflet-sidebar.leaflet-touch { + border: 2px solid rgba(0, 0, 0, 0.2); } } + +@media (min-width: 768px) { + .leaflet-sidebar-left ~ .leaflet-control-container .leaflet-left { + transition: left 500ms; } } + +@media (min-width: 768px) and (max-width: 991px) { + .leaflet-sidebar-left ~ .leaflet-control-container .leaflet-left { + left: 315px; } } + +@media (min-width: 992px) and (max-width: 1199px) { + .leaflet-sidebar-left ~ .leaflet-control-container .leaflet-left { + left: 400px; } } + +@media (min-width: 1200px) { + .leaflet-sidebar-left ~ .leaflet-control-container .leaflet-left { + left: 470px; } } + +@media (min-width: 768px) { + .leaflet-sidebar-left.collapsed ~ .leaflet-control-container .leaflet-left { + left: 50px; } } + +@media (min-width: 768px) { + .leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right { + transition: right 500ms; } } + +@media (min-width: 768px) and (max-width: 991px) { + .leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right { + right: 315px; } } + +@media (min-width: 992px) and (max-width: 1199px) { + .leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right { + right: 400px; } } + +@media (min-width: 1200px) { + .leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right { + right: 470px; } } + +@media (min-width: 768px) { + .leaflet-sidebar-right.collapsed ~ .leaflet-control-container .leaflet-right { + right: 50px; } } diff --git a/librerias/leaflet/css/leaflet-sidebar.min.css b/librerias/leaflet/css/leaflet-sidebar.min.css new file mode 100644 index 0000000..b50fad0 --- /dev/null +++ b/librerias/leaflet/css/leaflet-sidebar.min.css @@ -0,0 +1 @@ +.leaflet-sidebar{position:absolute;top:0;bottom:0;width:100%;overflow:hidden;z-index:2000}.leaflet-sidebar.collapsed{width:40px}@media (min-width:768px){.leaflet-sidebar{top:10px;bottom:10px;transition:width .5s}}@media (min-width:768px) and (max-width:991px){.leaflet-sidebar{width:305px;max-width:305px}}@media (min-width:992px) and (max-width:1199px){.leaflet-sidebar{width:390px;max-width:390px}}@media (min-width:1200px){.leaflet-sidebar{width:460px;max-width:460px}}.leaflet-sidebar-left{left:0}@media (min-width:768px){.leaflet-sidebar-left{left:10px}}.leaflet-sidebar-right{right:0}@media (min-width:768px){.leaflet-sidebar-right{right:10px}}.leaflet-sidebar-tabs{top:0;bottom:0;height:100%;background-color:#fff}.leaflet-sidebar-left .leaflet-sidebar-tabs{left:0}.leaflet-sidebar-right .leaflet-sidebar-tabs{right:0}.leaflet-sidebar-tabs,.leaflet-sidebar-tabs>ul{position:absolute;width:40px;margin:0;padding:0;list-style-type:none}.leaflet-sidebar-tabs>li,.leaflet-sidebar-tabs>ul>li{width:100%;height:40px;color:#333;font-size:12pt;overflow:hidden;transition:all 80ms}.leaflet-sidebar-tabs>li:hover,.leaflet-sidebar-tabs>ul>li:hover{color:#000;background-color:#eee}.leaflet-sidebar-tabs>li.active,.leaflet-sidebar-tabs>ul>li.active{color:#fff;background-color:#0074d9}.leaflet-sidebar-tabs>li.disabled,.leaflet-sidebar-tabs>ul>li.disabled{color:rgba(51,51,51,.4)}.leaflet-sidebar-tabs>li.disabled:hover,.leaflet-sidebar-tabs>ul>li.disabled:hover{background:0 0}.leaflet-sidebar-tabs>li.disabled>a,.leaflet-sidebar-tabs>ul>li.disabled>a{cursor:default}.leaflet-sidebar-tabs>li>a,.leaflet-sidebar-tabs>ul>li>a{display:block;width:100%;height:100%;line-height:40px;color:inherit;text-decoration:none;text-align:center;cursor:pointer}.leaflet-sidebar-tabs>ul+ul{bottom:0}.leaflet-sidebar-content{position:absolute;top:0;bottom:0;background-color:rgba(255,255,255,.95);overflow-x:hidden;overflow-y:auto}.leaflet-sidebar-left .leaflet-sidebar-content{left:40px;right:0}.leaflet-sidebar-right .leaflet-sidebar-content{left:0;right:40px}.leaflet-sidebar.collapsed>.leaflet-sidebar-content{overflow-y:hidden}.collapsed>.leaflet-sidebar-content{overflow-y:hidden}.leaflet-sidebar-pane{display:none;left:0;right:0;box-sizing:border-box;padding:10px 20px}.leaflet-sidebar-pane.active{display:block}@media (min-width:768px) and (max-width:991px){.leaflet-sidebar-pane{min-width:265px}}@media (min-width:992px) and (max-width:1199px){.leaflet-sidebar-pane{min-width:350px}}@media (min-width:1200px){.leaflet-sidebar-pane{min-width:420px}}.leaflet-sidebar-header{margin:-10px -20px 0;height:40px;padding:0 20px;line-height:40px;font-size:14.4pt;color:#fff;background-color:#0074d9}.leaflet-sidebar-right .leaflet-sidebar-header{padding-left:40px}.leaflet-sidebar-close{position:absolute;top:0;width:40px;height:40px;text-align:center;cursor:pointer}.leaflet-sidebar-left .leaflet-sidebar-close{right:0}.leaflet-sidebar-right .leaflet-sidebar-close{left:0}.leaflet-sidebar{box-shadow:0 1px 5px rgba(0,0,0,.65)}.leaflet-sidebar.leaflet-touch{box-shadow:none;border-right:2px solid rgba(0,0,0,.2)}@media (min-width:768px){.leaflet-sidebar{border-radius:4px}.leaflet-sidebar.leaflet-touch{border:2px solid rgba(0,0,0,.2)}}@media (min-width:768px){.leaflet-sidebar-left~.leaflet-control-container .leaflet-left{transition:left .5s}}@media (min-width:768px) and (max-width:991px){.leaflet-sidebar-left~.leaflet-control-container .leaflet-left{left:315px}}@media (min-width:992px) and (max-width:1199px){.leaflet-sidebar-left~.leaflet-control-container .leaflet-left{left:400px}}@media (min-width:1200px){.leaflet-sidebar-left~.leaflet-control-container .leaflet-left{left:470px}}@media (min-width:768px){.leaflet-sidebar-left.collapsed~.leaflet-control-container .leaflet-left{left:50px}}@media (min-width:768px){.leaflet-sidebar-right~.leaflet-control-container .leaflet-right{transition:right .5s}}@media (min-width:768px) and (max-width:991px){.leaflet-sidebar-right~.leaflet-control-container .leaflet-right{right:315px}}@media (min-width:992px) and (max-width:1199px){.leaflet-sidebar-right~.leaflet-control-container .leaflet-right{right:400px}}@media (min-width:1200px){.leaflet-sidebar-right~.leaflet-control-container .leaflet-right{right:470px}}@media (min-width:768px){.leaflet-sidebar-right.collapsed~.leaflet-control-container .leaflet-right{right:50px}} \ No newline at end of file diff --git a/librerias/leaflet/js/leaflet-sidebar.js b/librerias/leaflet/js/leaflet-sidebar.js new file mode 100755 index 0000000..1dbc06e --- /dev/null +++ b/librerias/leaflet/js/leaflet-sidebar.js @@ -0,0 +1,529 @@ +// @ts-nocheck +/** + * @name Sidebar + * @class L.Control.Sidebar + * @extends L.Control + * @param {string} id - The id of the sidebar element (without the # character) + * @param {Object} [options] - Optional options object + * @param {string} [options.autopan=false] - whether to move the map when opening the sidebar to make maintain the visible center point + * @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right' + * @param {string} [options.id] - ID of a predefined sidebar container that should be used + * @param {boolean} [data.close=true] Whether to add a close button to the pane header + * @see L.control.sidebar + */ +L.Control.Sidebar = L.Control.extend(/** @lends L.Control.Sidebar.prototype */ { + includes: L.Evented ? L.Evented.prototype : L.Mixin.Events, + + options: { + autopan: false, + closeButton: true, + container: null, + position: 'left' + }, + + /** + * Create a new sidebar on this object. + * + * @constructor + * @param {Object} [options] - Optional options object + * @param {string} [options.autopan=false] - whether to move the map when opening the sidebar to make maintain the visible center point + * @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right' + * @param {string} [options.container] - ID of a predefined sidebar container that should be used + * @param {bool} [data.close=true] Whether to add a close button to the pane header + */ + initialize: function(options, deprecatedOptions) { + if (typeof options === 'string') { + console.warn('this syntax is deprecated. please use L.control.sidebar({ container }) now'); + options = { container: options }; + } + + if (typeof options === 'object' && options.id) { + console.warn('this syntax is deprecated. please use L.control.sidebar({ container }) now'); + options.container = options.id; + } + + this._tabitems = []; + this._panes = []; + this._closeButtons = []; + + L.setOptions(this, Object.assign({}, options, deprecatedOptions)); + return this; + }, + + /** + * Add this sidebar to the specified map. + * + * @param {L.Map} map + * @returns {Sidebar} + */ + onAdd: function(map) { + var i, child, tabContainers, newContainer, container; + + // use container from previous onAdd() + container = this._container + + // use the container given via options. + if (!container) { + container = this._container || typeof this.options.container === 'string' + ? L.DomUtil.get(this.options.container) + : this.options.container; + } + + // if no container was specified or not found, create it and apply an ID + if (!container) { + container = L.DomUtil.create('div', 'leaflet-sidebar collapsed'); + if (typeof this.options.container === 'string') + container.id = this.options.container; + } + + // Find paneContainer in DOM & store reference + this._paneContainer = container.querySelector('div.leaflet-sidebar-content'); + + // If none is found, create it + if (this._paneContainer === null) + this._paneContainer = L.DomUtil.create('div', 'leaflet-sidebar-content', container); + + // Find tabContainerTop & tabContainerBottom in DOM & store reference + tabContainers = container.querySelectorAll('ul.leaflet-sidebar-tabs, div.leaflet-sidebar-tabs > ul'); + this._tabContainerTop = tabContainers[0] || null; + this._tabContainerBottom = tabContainers[1] || null; + + // If no container was found, create it + if (this._tabContainerTop === null) { + newContainer = L.DomUtil.create('div', 'leaflet-sidebar-tabs', container); + newContainer.setAttribute('role', 'tablist'); + this._tabContainerTop = L.DomUtil.create('ul', '', newContainer); + } + if (this._tabContainerBottom === null) { + newContainer = this._tabContainerTop.parentNode; + this._tabContainerBottom = L.DomUtil.create('ul', '', newContainer); + } + + // Store Tabs in Collection for easier iteration + for (i = 0; i < this._tabContainerTop.children.length; i++) { + child = this._tabContainerTop.children[i]; + child._sidebar = this; + child._id = child.querySelector('a').hash.slice(1); // FIXME: this could break for links! + this._tabitems.push(child); + } + for (i = 0; i < this._tabContainerBottom.children.length; i++) { + child = this._tabContainerBottom.children[i]; + child._sidebar = this; + child._id = child.querySelector('a').hash.slice(1); // FIXME: this could break for links! + this._tabitems.push(child); + } + + // Store Panes in Collection for easier iteration + for (i = 0; i < this._paneContainer.children.length; i++) { + child = this._paneContainer.children[i]; + if (child.tagName === 'DIV' && + L.DomUtil.hasClass(child, 'leaflet-sidebar-pane')) { + this._panes.push(child); + + // Save references to close buttons + var closeButtons = child.querySelectorAll('.leaflet-sidebar-close'); + if (closeButtons.length) { + this._closeButtons.push(closeButtons[closeButtons.length - 1]); + this._closeClick(closeButtons[closeButtons.length - 1], 'on'); + } + } + } + + // set click listeners for tab & close buttons + for (i = 0; i < this._tabitems.length; i++) { + this._tabClick(this._tabitems[i], 'on'); + } + + // leaflet moves the returned container to the right place in the DOM + return container; + }, + + /** + * Remove this sidebar from the map. + * + * @param {L.Map} map + * @returns {Sidebar} + */ + onRemove: function (map) { + var i; + + this._map = null; + this._tabitems = []; + this._panes = []; + this._closeButtons = []; + + // Remove click listeners for tab & close buttons + for (i = 0; i < this._tabitems.length; i++) + this._tabClick(this._tabitems[i], 'off'); + + for (i = 0; i < this._closeButtons.length; i++) + this._closeClick(this._closeButtons[i], 'off'); + + return this; + }, + + /** + * @method addTo(map: Map): this + * Adds the control to the given map. Overrides the implementation of L.Control, + * changing the DOM mount target from map._controlContainer.topleft to map._container + */ + addTo: function (map) { + this.onRemove(); + this._map = map; + + this._container = this.onAdd(map); + + L.DomUtil.addClass(this._container, 'leaflet-control'); + L.DomUtil.addClass(this._container, 'leaflet-sidebar-' + this.getPosition()); + if (L.Browser.touch) + L.DomUtil.addClass(this._container, 'leaflet-touch'); + + // when adding to the map container, we should stop event propagation + L.DomEvent.disableScrollPropagation(this._container); + L.DomEvent.disableClickPropagation(this._container); + L.DomEvent.on(this._container, 'contextmenu', L.DomEvent.stopPropagation); + + // insert as first child of map container (important for css) + map._container.insertBefore(this._container, map._container.firstChild); + + return this; + }, + + /** + * @deprecated - Please use remove() instead of removeFrom(), as of Leaflet 0.8-dev, the removeFrom() has been replaced with remove() + * Removes this sidebar from the map. + * @param {L.Map} map + * @returns {Sidebar} + */ + removeFrom: function(map) { + console.warn('removeFrom() has been deprecated, please use remove() instead as support for this function will be ending soon.'); + this._map._container.removeChild(this._container); + this.onRemove(map); + + return this; + }, + + /** + * Open sidebar (if it's closed) and show the specified tab. + * + * @param {string} id - The ID of the tab to show (without the # character) + * @returns {L.Control.Sidebar} + */ + open: function(id) { + var i, child, tab; + + // If panel is disabled, stop right here + tab = this._getTab(id); + if (L.DomUtil.hasClass(tab, 'disabled')) + return this; + + // Hide old active contents and show new content + for (i = 0; i < this._panes.length; i++) { + child = this._panes[i]; + if (child.id === id) + L.DomUtil.addClass(child, 'active'); + else if (L.DomUtil.hasClass(child, 'active')) + L.DomUtil.removeClass(child, 'active'); + } + + // Remove old active highlights and set new highlight + for (i = 0; i < this._tabitems.length; i++) { + child = this._tabitems[i]; + if (child.querySelector('a').hash === '#' + id) + L.DomUtil.addClass(child, 'active'); + else if (L.DomUtil.hasClass(child, 'active')) + L.DomUtil.removeClass(child, 'active'); + } + + this.fire('content', { id: id }); + + // Open sidebar if it's closed + if (L.DomUtil.hasClass(this._container, 'collapsed')) { + this.fire('opening'); + L.DomUtil.removeClass(this._container, 'collapsed'); + if (this.options.autopan) this._panMap('open'); + } + + return this; + }, + + /** + * Close the sidebar (if it's open). + * + * @returns {L.Control.Sidebar} + */ + close: function() { + var i; + + // Remove old active highlights + for (i = 0; i < this._tabitems.length; i++) { + var child = this._tabitems[i]; + if (L.DomUtil.hasClass(child, 'active')) + L.DomUtil.removeClass(child, 'active'); + } + + // close sidebar, if it's opened + if (!L.DomUtil.hasClass(this._container, 'collapsed')) { + this.fire('closing'); + L.DomUtil.addClass(this._container, 'collapsed'); + if (this.options.autopan) this._panMap('close'); + } + + return this; + }, + + /** + * Add a panel to the sidebar + * + * @example + * sidebar.addPanel({ + * id: 'userinfo', + * tab: '', + * pane: someDomNode.innerHTML, + * position: 'bottom' + * }); + * + * @param {Object} [data] contains the data for the new Panel: + * @param {String} [data.id] the ID for the new Panel, must be unique for the whole page + * @param {String} [data.position='top'] where the tab will appear: + * on the top or the bottom of the sidebar. 'top' or 'bottom' + * @param {HTMLString} {DOMnode} [data.tab] content of the tab item, as HTMLstring or DOM node + * @param {HTMLString} {DOMnode} [data.pane] content of the panel, as HTMLstring or DOM node + * @param {String} [data.link] URL to an (external) link that will be opened instead of a panel + * @param {String} [data.title] Title for the pane header + * @param {String} {Function} [data.button] URL to an (external) link or a click listener function that will be opened instead of a panel + * @param {bool} [data.disabled] If the tab should be disabled by default + * + * @returns {L.Control.Sidebar} + */ + addPanel: function(data) { + var pane, tab, tabHref, closeButtons, content; + + // Create tab node + tab = L.DomUtil.create('li', data.disabled ? 'disabled' : ''); + tabHref = L.DomUtil.create('a', '', tab); + tabHref.href = '#' + data.id; + tabHref.setAttribute('role', 'tab'); + tabHref.innerHTML = data.tab; + tab._sidebar = this; + tab._id = data.id; + tab._button = data.button; // to allow links to be disabled, the href cannot be used + if (data.title && data.title[0] !== '<') tab.title = data.title; + + // append it to the DOM and store JS references + if (data.position === 'bottom') + this._tabContainerBottom.appendChild(tab); + else + this._tabContainerTop.appendChild(tab); + + this._tabitems.push(tab); + + // Create pane node + if (data.pane) { + if (typeof data.pane === 'string') { + // pane is given as HTML string + pane = L.DomUtil.create('DIV', 'leaflet-sidebar-pane', this._paneContainer); + content = ''; + if (data.title) + content += '

' + data.title; + if (this.options.closeButton) + content += ''; + if (data.title) + content += '

'; + pane.innerHTML = content + data.pane; + } else { + // pane is given as DOM object + pane = data.pane; + this._paneContainer.appendChild(pane); + } + pane.id = data.id; + + this._panes.push(pane); + + // Save references to close button & register click listener + closeButtons = pane.querySelectorAll('.leaflet-sidebar-close'); + if (closeButtons.length) { + // select last button, because thats rendered on top + this._closeButtons.push(closeButtons[closeButtons.length - 1]); + this._closeClick(closeButtons[closeButtons.length - 1], 'on'); + } + } + + // Register click listeners, if the sidebar is on the map + this._tabClick(tab, 'on'); + + return this; + }, + + /** + * Removes a panel from the sidebar + * + * @example + * sidebar.remove('userinfo'); + * + * @param {String} [id] the ID of the panel that is to be removed + * @returns {L.Control.Sidebar} + */ + removePanel: function(id) { + var i, j, tab, pane, closeButtons; + + // find the tab & panel by ID, remove them, and clean up + for (i = 0; i < this._tabitems.length; i++) { + if (this._tabitems[i]._id === id) { + tab = this._tabitems[i]; + + // Remove click listeners + this._tabClick(tab, 'off'); + + tab.remove(); + this._tabitems.splice(i, 1); + break; + } + } + + for (i = 0; i < this._panes.length; i++) { + if (this._panes[i].id === id) { + pane = this._panes[i]; + closeButtons = pane.querySelectorAll('.leaflet-sidebar-close'); + for (j = 0; j < closeButtons.length; j++) { + this._closeClick(closeButtons[j], 'off'); + } + + pane.remove(); + this._panes.splice(i, 1); + + break; + } + } + + return this; + }, + + /** + * enables a disabled tab/panel + * + * @param {String} [id] ID of the panel to enable + * @returns {L.Control.Sidebar} + */ + enablePanel: function(id) { + var tab = this._getTab(id); + L.DomUtil.removeClass(tab, 'disabled'); + + return this; + }, + + /** + * disables an enabled tab/panel + * + * @param {String} [id] ID of the panel to disable + * @returns {L.Control.Sidebar} + */ + disablePanel: function(id) { + var tab = this._getTab(id); + L.DomUtil.addClass(tab, 'disabled'); + + return this; + }, + + /** + * (un)registers the onclick event for the given tab, + * depending on the second argument. + * @private + * + * @param {DOMelement} [tab] + * @param {String} [on] 'on' or 'off' + */ + _tabClick: function(tab, on) { + var link = tab.querySelector('a'); + if (!link.hasAttribute('href') || link.getAttribute('href')[0] !== '#') + return; + + var onTabClick = function(e) { + // `this` points to the tab DOM element! + if (L.DomUtil.hasClass(this, 'active')) { + this._sidebar.close(); + } else if (!L.DomUtil.hasClass(this, 'disabled')) { + if (typeof this._button === 'string') // an url + window.location.href = this._button; + else if (typeof this._button === 'function') // a clickhandler + this._button(e); + else // a normal pane + this._sidebar.open(this.querySelector('a').hash.slice(1)); + } + }; + + if (on === 'on') { + L.DomEvent + .on(tab.querySelector('a'), 'click', L.DomEvent.preventDefault) + .on(tab.querySelector('a'), 'click', onTabClick, tab); + } else { + L.DomEvent.off(tab.querySelector('a'), 'click', onTabClick); + } + }, + + onCloseClick: function() { + this.close(); + }, + + /** + * (un)registers the onclick event for the given close button + * depending on the second argument + * @private + * + * @param {DOMelement} [closeButton] + * @param {String} [on] 'on' or 'off' + */ + _closeClick: function(closeButton, on) { + if (on === 'on') { + L.DomEvent.on(closeButton, 'click', this.onCloseClick, this); + } else { + L.DomEvent.off(closeButton, 'click', this.onCloseClick); + } + }, + + /** + * Finds & returns the DOMelement of a tab + * + * @param {String} [id] the id of the tab + * @returns {DOMelement} the tab specified by id, null if not found + */ + _getTab: function(id) { + for (var i = 0; i < this._tabitems.length; i++) { + if (this._tabitems[i]._id === id) + return this._tabitems[i]; + } + + return null; + }, + + /** + * Helper for autopan: Pans the map for open/close events + * + * @param {String} [openClose] The behaviour to enact ('open' | 'close') + */ + _panMap: function(openClose) { + var panWidth = Number.parseInt(L.DomUtil.getStyle(this._container, 'max-width')) / 2; + if ( + openClose === 'open' && this.options.position === 'left' || + openClose === 'close' && this.options.position === 'right' + ) panWidth *= -1; + this._map.panBy([panWidth, 0], { duration: 0.5 }); + } +}); + +/** + * Create a new sidebar. + * + * @example + * var sidebar = L.control.sidebar({ container: 'sidebar' }).addTo(map); + * + * @param {Object} [options] - Optional options object + * @param {string} [options.autopan=false] - whether to move the map when opening the sidebar to make maintain the visible center point + * @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right' + * @param {string} [options.container] - ID of a predefined sidebar container that should be used + * @param {boolean} [data.close=true] Whether to add a close button to the pane header + * @returns {Sidebar} A new sidebar instance + */ +L.control.sidebar = function(options, deprecated) { + return new L.Control.Sidebar(options, deprecated); +}; diff --git a/librerias/leaflet/js/leaflet-sidebar.min.js b/librerias/leaflet/js/leaflet-sidebar.min.js new file mode 100755 index 0000000..560cd7d --- /dev/null +++ b/librerias/leaflet/js/leaflet-sidebar.min.js @@ -0,0 +1 @@ +L.Control.Sidebar=L.Control.extend({includes:L.Evented?L.Evented.prototype:L.Mixin.Events,options:{autopan:!1,closeButton:!0,container:null,position:"left"},initialize:function(t,e){return"string"==typeof t&&(console.warn("this syntax is deprecated. please use L.control.sidebar({ container }) now"),t={container:t}),"object"==typeof t&&t.id&&(console.warn("this syntax is deprecated. please use L.control.sidebar({ container }) now"),t.container=t.id),this._tabitems=[],this._panes=[],this._closeButtons=[],L.setOptions(this,Object.assign({},t,e)),this},onAdd:function(t){var e,i,s,n,o;for((o=this._container)||(o=this._container||"string"==typeof this.options.container?L.DomUtil.get(this.options.container):this.options.container),o||(o=L.DomUtil.create("div","leaflet-sidebar collapsed"),"string"==typeof this.options.container&&(o.id=this.options.container)),this._paneContainer=o.querySelector("div.leaflet-sidebar-content"),null===this._paneContainer&&(this._paneContainer=L.DomUtil.create("div","leaflet-sidebar-content",o)),s=o.querySelectorAll("ul.leaflet-sidebar-tabs, div.leaflet-sidebar-tabs > ul"),this._tabContainerTop=s[0]||null,this._tabContainerBottom=s[1]||null,null===this._tabContainerTop&&((n=L.DomUtil.create("div","leaflet-sidebar-tabs",o)).setAttribute("role","tablist"),this._tabContainerTop=L.DomUtil.create("ul","",n)),null===this._tabContainerBottom&&(n=this._tabContainerTop.parentNode,this._tabContainerBottom=L.DomUtil.create("ul","",n)),e=0;e'+t.title),this.options.closeButton&&(o+=''),t.title&&(o+=""),e.innerHTML=o+t.pane):(e=t.pane,this._paneContainer.appendChild(e)),e.id=t.id,this._panes.push(e),(n=e.querySelectorAll(".leaflet-sidebar-close")).length&&(this._closeButtons.push(n[n.length-1]),this._closeClick(n[n.length-1],"on"))),this._tabClick(i,"on"),this},removePanel:function(t){var e,i,s,n,o;for(e=0;ehttps://tupale.co © OpenStreetMap contributors' }), latlng = L.latLng(4, -74.9005222); @@ -358,6 +358,7 @@ $leyenda ="