From 37bee3f9522b1e9de5bc447d75b1849ab51de724 Mon Sep 17 00:00:00 2001 From: clavijojuan Date: Tue, 1 Feb 2022 18:22:13 -0500 Subject: [PATCH] example --- .gitignore | 1 - examples/L.cascadeButtons.css | 59 ++++++++++++++++++ examples/L.cascadeButtons.js | 94 ++++++++++++++++++++++++++++ examples/index.html | 21 +++++++ examples/index.js | 113 ++++++++++++++++++++++++++++++++++ examples/styles.css | 5 ++ 6 files changed, 292 insertions(+), 1 deletion(-) create mode 100644 examples/L.cascadeButtons.css create mode 100644 examples/L.cascadeButtons.js create mode 100644 examples/index.html create mode 100644 examples/index.js create mode 100644 examples/styles.css diff --git a/.gitignore b/.gitignore index 4cd66f8..e69de29 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +0,0 @@ -examples/* \ No newline at end of file diff --git a/examples/L.cascadeButtons.css b/examples/L.cascadeButtons.css new file mode 100644 index 0000000..9d3b662 --- /dev/null +++ b/examples/L.cascadeButtons.css @@ -0,0 +1,59 @@ +.hidden { + visibility: hidden !important; +} + +.leaflet-control-cascadeButtons{ + background-color: transparent; + justify-content: center; + width: auto; + height: auto; + border:none; +} + +.leaflet-control-cascadeButtons button{ + border-radius: 2px; + border: none; + background-color:#fff; + box-shadow: 0 1px 5px rgb(0 0 0 / 65%); + height: 30px; + width: 30px; + text-align: center; + text-decoration: none; + cursor: pointer; + margin: 3px; + padding:2px; +} + +.leaflet-control-cascadeButtons button:hover{ + background-color:#f4f4f4;; +} + +.vertical { + display: flex; + flex-direction: column; +} + +.horizontal { + display: flex; + align-items: row-reverse; +} + +.right { + align-items: flex-end; +} + +.row-reverse { + flex-direction: row-reverse; +} + +.col-reverse { + flex-direction: column-reverse; +} + +.bottom { + align-items: flex-end; +} + +.activeButton{ + box-shadow: 0 0 1px 3px #C2CB00 !important; +} \ No newline at end of file diff --git a/examples/L.cascadeButtons.js b/examples/L.cascadeButtons.js new file mode 100644 index 0000000..422171e --- /dev/null +++ b/examples/L.cascadeButtons.js @@ -0,0 +1,94 @@ +L.Control.cascadeButtons = L.Control.extend({ + options: { + position: 'bottomright', + direction: 'horizontal', + className: '' + }, + + initialize: function(buttons, options){ + L.Util.setOptions(this, options); + this._buttons = buttons; + }, + + onAdd: function (map){ + const className = (this.options.className) ? this.options.className : 'leaflet-control-cascadeButtons'; + const directionClass = this.buildDirection(this.options.direction); + const toolBar = L.DomUtil.create('div', `${className} ${directionClass}`); + + this._buttons.forEach((button)=>{ + + const directionClass = this.buildDirection(this.getOposite(this.options.direction)); + const container = L.DomUtil.create('div', `${directionClass}`); + toolBar.append(container); + + const mainButton = L.DomUtil.create('button', `${button.icon}`); + mainButton.setAttribute("type", "button"); + mainButton.setAttribute("aria-expanded", "false"); + container.append(mainButton); + + if(button.items && button.items.length>0){ + + button.items.forEach((item)=>{ + const childButton = L.DomUtil.create('button',`${item.icon} hidden`); + childButton.setAttribute("type", "button"); + childButton.setAttribute("aria-expanded", "false"); + container.append(childButton); + childButton.addEventListener('click', () => item.command()); + }) + + mainButton.addEventListener('click', function(){ + container.childNodes.forEach( (child, index) => { + if(index!==0) child.classList.toggle('hidden'); + }); + + const isAriaExpanded = JSON.parse(mainButton.getAttribute("aria-expanded")); + mainButton.setAttribute('aria-expanded', !isAriaExpanded); + + (!button.ignoreActiveState) ? mainButton.classList.toggle('activeButton') : ''; + }) + } + else { + mainButton.addEventListener('click', function(){ + (!button.ignoreActiveState) ? mainButton.classList.toggle('activeButton') : ''; + button.command(); + }) + } + }) + + L.DomEvent.disableClickPropagation(toolBar); + + return toolBar; + }, + + buildDirection: function(direction){ + + if(direction === "vertical"){ + if((this.options.position).includes('left')){ + if(this.options.position.includes('bottom')) direction = direction + ' col-reverse' + } + if((this.options.position).includes('right')){ + if(this.options.position.includes('bottom')) direction = direction + ' col-reverse' + direction = direction + ' right'; + } + } + else if(direction === "horizontal"){ + if((this.options.position).includes('top')){ + if(this.options.position.includes('right')) direction = direction + ' row-reverse'; + } + if((this.options.position).includes('bottom')){ + if(this.options.position.includes('right')) direction = direction + ' row-reverse'; + direction = direction + ' bottom' + } + } + + return direction + }, + + getOposite: function(direction){ + return (direction === "vertical") ? "horizontal" : "vertical" + } +}) + +L.cascadeButtons = function(buttons, options){ + return new L.Control.cascadeButtons(buttons, options); +} \ No newline at end of file diff --git a/examples/index.html b/examples/index.html new file mode 100644 index 0000000..68dd7dd --- /dev/null +++ b/examples/index.html @@ -0,0 +1,21 @@ + + + + + + + Example + + + + + + + +
+ + + + + + \ No newline at end of file diff --git a/examples/index.js b/examples/index.js new file mode 100644 index 0000000..0bdaca3 --- /dev/null +++ b/examples/index.js @@ -0,0 +1,113 @@ +var map = L.map('map').setView([51.505, -0.09], 13); +L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: '© OpenStreetMap' +}).addTo(map); + +/// VERTICAL + +new L.cascadeButtons([ + {icon: 'fas fa-home', ignoreActiveState:true , command: () =>{console.log('test') }}, + {icon: 'fas fa-home', items:[ + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-globe', command: () =>{console.log('hola')}}, + ]}, + {icon: 'fas fa-home', items: [ + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-globe', command: () =>{console.log('hola')}}, + ]}, +], {position:'topleft', direction:'vertical'}).addTo(map); + +new L.cascadeButtons([ + {icon: 'fas fa-home', ignoreActiveState:true , command: () =>{console.log('test') }}, + {icon: 'fas fa-home', items:[ + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-globe', command: () =>{console.log('hola')}}, + ]}, + {icon: 'fas fa-home', items: [ + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-globe', command: () =>{console.log('hola')}}, + ]}, +], {position:'bottomright', direction:'vertical'}).addTo(map); + +new L.cascadeButtons([ + {icon: 'fas fa-home', ignoreActiveState:true , command: () =>{console.log('test') }}, + {icon: 'fas fa-home', items:[ + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-globe', command: () =>{console.log('hola')}}, + ]}, + {icon: 'fas fa-home', items: [ + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-globe', command: () =>{console.log('hola')}}, + ]}, +], {position:'topright', direction:'vertical'}).addTo(map); + +new L.cascadeButtons([ + {icon: 'fas fa-home', ignoreActiveState:true , command: () =>{console.log('test') }}, + {icon: 'fas fa-home', items:[ + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-globe', command: () =>{console.log('hola')}}, + ]}, + {icon: 'fas fa-home', items: [ + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-globe', command: () =>{console.log('hola')}}, + ]}, +], {position:'bottomleft', direction:'vertical'}).addTo(map); + + +//// HORIZONTAL + +new L.cascadeButtons([ + {icon: 'fas fa-home', ignoreActiveState:true , command: () =>{console.log('test') }}, + {icon: 'fas fa-home', items:[ + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-globe', command: () =>{console.log('hola')}}, + ]}, + {icon: 'fas fa-home', items: [ + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-globe', command: () =>{console.log('hola')}}, + ]}, +], {position:'topleft', direction:'horizontal'}).addTo(map); + +new L.cascadeButtons([ + {icon: 'fas fa-home', ignoreActiveState:true , command: () =>{console.log('test') }}, + {icon: 'fas fa-home', items:[ + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-globe', command: () =>{console.log('hola')}}, + ]}, + {icon: 'fas fa-home', items: [ + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-globe', command: () =>{console.log('hola')}}, + ]}, +], {position:'bottomright', direction:'horizontal'}).addTo(map); + +new L.cascadeButtons([ + {icon: 'fas fa-home', ignoreActiveState:true , command: () =>{console.log('test') }}, + {icon: 'fas fa-home', items:[ + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-globe', command: () =>{console.log('hola')}}, + ]}, + {icon: 'fas fa-home', items: [ + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-globe', command: () =>{console.log('hola')}}, + ]}, +], {position:'topright', direction:'horizontal'}).addTo(map); + +new L.cascadeButtons([ + {icon: 'fas fa-home', ignoreActiveState:true , command: () =>{console.log('test') }}, + {icon: 'fas fa-home', items:[ + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-globe', command: () =>{console.log('hola')}}, + ]}, + {icon: 'fas fa-home', items: [ + {icon: 'fas fa-home', command: () =>{console.log('hola')}}, + {icon: 'fas fa-globe', command: () =>{console.log('hola')}}, + ]}, +], {position:'bottomleft', direction:'horizontal'}).addTo(map); \ No newline at end of file diff --git a/examples/styles.css b/examples/styles.css new file mode 100644 index 0000000..89c8128 --- /dev/null +++ b/examples/styles.css @@ -0,0 +1,5 @@ +html, body, #map { + height: 100%; + width: 100%; + margin:0; +} \ No newline at end of file