From 4aa2434f5f1a6ee9e97b92d8296a3b8af172d70f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Sieroci=C5=84ski?= Date: Sun, 23 Apr 2017 11:22:52 +0200 Subject: [PATCH] Added UMD --- src/easy-button.js | 583 +++++++++++++++++++++++---------------------- 1 file changed, 296 insertions(+), 287 deletions(-) diff --git a/src/easy-button.js b/src/easy-button.js index 579dca6..cb6b29f 100644 --- a/src/easy-button.js +++ b/src/easy-button.js @@ -1,370 +1,379 @@ -(function(){ +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['leaflet'], factory); + } else if (typeof module === 'object' && module.exports) { + module.exports = factory(require('leaflet')); + } else { + root.returnExports = factory(root.L); + } +}(this, function (L) { -// This is for grouping buttons into a bar -// takes an array of `L.easyButton`s and -// then the usual `.addTo(map)` -L.Control.EasyBar = L.Control.extend({ + // This is for grouping buttons into a bar + // takes an array of `L.easyButton`s and + // then the usual `.addTo(map)` + L.Control.EasyBar = L.Control.extend({ - options: { - position: 'topleft', // part of leaflet's defaults - id: null, // an id to tag the Bar with - leafletClasses: true // use leaflet classes? - }, + options: { + position: 'topleft', // part of leaflet's defaults + id: null, // an id to tag the Bar with + leafletClasses: true // use leaflet classes? + }, - initialize: function(buttons, options){ + initialize: function(buttons, options){ - if(options){ - L.Util.setOptions( this, options ); - } + if(options){ + L.Util.setOptions( this, options ); + } - this._buildContainer(); - this._buttons = []; + this._buildContainer(); + this._buttons = []; - for(var i = 0; i < buttons.length; i++){ - buttons[i]._bar = this; - buttons[i]._container = buttons[i].button; - this._buttons.push(buttons[i]); - this.container.appendChild(buttons[i].button); - } + for(var i = 0; i < buttons.length; i++){ + buttons[i]._bar = this; + buttons[i]._container = buttons[i].button; + this._buttons.push(buttons[i]); + this.container.appendChild(buttons[i].button); + } - }, + }, - _buildContainer: function(){ - this._container = this.container = L.DomUtil.create('div', ''); - this.options.leafletClasses && L.DomUtil.addClass(this.container, 'leaflet-bar easy-button-container leaflet-control'); - this.options.id && (this.container.id = this.options.id); - }, + _buildContainer: function(){ + this._container = this.container = L.DomUtil.create('div', ''); + this.options.leafletClasses && L.DomUtil.addClass(this.container, 'leaflet-bar easy-button-container leaflet-control'); + this.options.id && (this.container.id = this.options.id); + }, - enable: function(){ - L.DomUtil.addClass(this.container, 'enabled'); - L.DomUtil.removeClass(this.container, 'disabled'); - this.container.setAttribute('aria-hidden', 'false'); - return this; - }, + enable: function(){ + L.DomUtil.addClass(this.container, 'enabled'); + L.DomUtil.removeClass(this.container, 'disabled'); + this.container.setAttribute('aria-hidden', 'false'); + return this; + }, - disable: function(){ - L.DomUtil.addClass(this.container, 'disabled'); - L.DomUtil.removeClass(this.container, 'enabled'); - this.container.setAttribute('aria-hidden', 'true'); - return this; - }, + disable: function(){ + L.DomUtil.addClass(this.container, 'disabled'); + L.DomUtil.removeClass(this.container, 'enabled'); + this.container.setAttribute('aria-hidden', 'true'); + return this; + }, - onAdd: function () { - return this.container; - }, + onAdd: function () { + return this.container; + }, - addTo: function (map) { - this._map = map; + addTo: function (map) { + this._map = map; - for(var i = 0; i < this._buttons.length; i++){ - this._buttons[i]._map = map; - } + for(var i = 0; i < this._buttons.length; i++){ + this._buttons[i]._map = map; + } - var container = this._container = this.onAdd(map), - pos = this.getPosition(), - corner = map._controlCorners[pos]; + var container = this._container = this.onAdd(map), + pos = this.getPosition(), + corner = map._controlCorners[pos]; - L.DomUtil.addClass(container, 'leaflet-control'); + L.DomUtil.addClass(container, 'leaflet-control'); - if (pos.indexOf('bottom') !== -1) { - corner.insertBefore(container, corner.firstChild); - } else { - corner.appendChild(container); - } + if (pos.indexOf('bottom') !== -1) { + corner.insertBefore(container, corner.firstChild); + } else { + corner.appendChild(container); + } - return this; - } + return this; + } -}); + }); -L.easyBar = function(){ - var args = [L.Control.EasyBar]; - for(var i = 0; i < arguments.length; i++){ - args.push( arguments[i] ); - } - return new (Function.prototype.bind.apply(L.Control.EasyBar, args)); -}; + L.easyBar = function(){ + var args = [L.Control.EasyBar]; + for(var i = 0; i < arguments.length; i++){ + args.push( arguments[i] ); + } + return new (Function.prototype.bind.apply(L.Control.EasyBar, args)); + }; -// L.EasyButton is the actual buttons -// can be called without being grouped into a bar -L.Control.EasyButton = L.Control.extend({ + // L.EasyButton is the actual buttons + // can be called without being grouped into a bar + L.Control.EasyButton = L.Control.extend({ - options: { - position: 'topleft', // part of leaflet's defaults + options: { + position: 'topleft', // part of leaflet's defaults - id: null, // an id to tag the button with + id: null, // an id to tag the button with - type: 'replace', // [(replace|animate)] - // replace swaps out elements - // animate changes classes with all elements inserted + type: 'replace', // [(replace|animate)] + // replace swaps out elements + // animate changes classes with all elements inserted - states: [], // state names look like this - // { - // stateName: 'untracked', - // onClick: function(){ handle_nav_manually(); }; - // title: 'click to make inactive', - // icon: 'fa-circle', // wrapped with - // } + states: [], // state names look like this + // { + // stateName: 'untracked', + // onClick: function(){ handle_nav_manually(); }; + // title: 'click to make inactive', + // icon: 'fa-circle', // wrapped with + // } - leafletClasses: true, // use leaflet styles for the button - tagName: 'button', - }, + leafletClasses: true, // use leaflet styles for the button + tagName: 'button', + }, - initialize: function(icon, onClick, title, id){ + initialize: function(icon, onClick, title, id){ - // clear the states manually - this.options.states = []; + // clear the states manually + this.options.states = []; - // add id to options - if(id != null){ - this.options.id = id; - } + // add id to options + if(id != null){ + this.options.id = id; + } - // storage between state functions - this.storage = {}; + // storage between state functions + this.storage = {}; - // is the last item an object? - if( typeof arguments[arguments.length-1] === 'object' ){ + // is the last item an object? + if( typeof arguments[arguments.length-1] === 'object' ){ - // if so, it should be the options - L.Util.setOptions( this, arguments[arguments.length-1] ); - } + // if so, it should be the options + L.Util.setOptions( this, arguments[arguments.length-1] ); + } - // if there aren't any states in options - // use the early params - if( this.options.states.length === 0 && - typeof icon === 'string' && - typeof onClick === 'function'){ - - // turn the options object into a state - this.options.states.push({ - icon: icon, - onClick: onClick, - title: typeof title === 'string' ? title : '' - }); - } + // if there aren't any states in options + // use the early params + if( this.options.states.length === 0 && + typeof icon === 'string' && + typeof onClick === 'function'){ + + // turn the options object into a state + this.options.states.push({ + icon: icon, + onClick: onClick, + title: typeof title === 'string' ? title : '' + }); + } - // curate and move user's states into - // the _states for internal use - this._states = []; + // curate and move user's states into + // the _states for internal use + this._states = []; - for(var i = 0; i < this.options.states.length; i++){ - this._states.push( new State(this.options.states[i], this) ); - } + for(var i = 0; i < this.options.states.length; i++){ + this._states.push( new State(this.options.states[i], this) ); + } - this._buildButton(); + this._buildButton(); - this._activateState(this._states[0]); + this._activateState(this._states[0]); - }, + }, - _buildButton: function(){ + _buildButton: function(){ - this.button = L.DomUtil.create(this.options.tagName, ''); + this.button = L.DomUtil.create(this.options.tagName, ''); - if (this.options.tagName === 'button') { - this.button.setAttribute('type', 'button'); - } + if (this.options.tagName === 'button') { + this.button.setAttribute('type', 'button'); + } - if (this.options.id ){ - this.button.id = this.options.id; - } + if (this.options.id ){ + this.button.id = this.options.id; + } - if (this.options.leafletClasses){ - L.DomUtil.addClass(this.button, 'easy-button-button leaflet-bar-part leaflet-interactive'); - } + if (this.options.leafletClasses){ + L.DomUtil.addClass(this.button, 'easy-button-button leaflet-bar-part leaflet-interactive'); + } - // don't let double clicks and mousedown get to the map - L.DomEvent.addListener(this.button, 'dblclick', L.DomEvent.stop); - L.DomEvent.addListener(this.button, 'mousedown', L.DomEvent.stop); + // don't let double clicks and mousedown get to the map + L.DomEvent.addListener(this.button, 'dblclick', L.DomEvent.stop); + L.DomEvent.addListener(this.button, 'mousedown', L.DomEvent.stop); - // take care of normal clicks - L.DomEvent.addListener(this.button,'click', function(e){ - L.DomEvent.stop(e); - this._currentState.onClick(this, this._map ? this._map : null ); - this._map && this._map.getContainer().focus(); - }, this); + // take care of normal clicks + L.DomEvent.addListener(this.button,'click', function(e){ + L.DomEvent.stop(e); + this._currentState.onClick(this, this._map ? this._map : null ); + this._map && this._map.getContainer().focus(); + }, this); - // prep the contents of the control - if(this.options.type == 'replace'){ - this.button.appendChild(this._currentState.icon); - } else { - for(var i=0;i"']/) ){ - - // if so, the user should have put in html - // so move forward as such - tmpIcon = ambiguousIconString; - - // then it wasn't html, so - // it's a class list, figure out what kind - } else { - ambiguousIconString = ambiguousIconString.replace(/(^\s*|\s*$)/g,''); - tmpIcon = L.DomUtil.create('span', ''); - - if( ambiguousIconString.indexOf('fa-') === 0 ){ - L.DomUtil.addClass(tmpIcon, 'fa ' + ambiguousIconString) - } else if ( ambiguousIconString.indexOf('glyphicon-') === 0 ) { - L.DomUtil.addClass(tmpIcon, 'glyphicon ' + ambiguousIconString) - } else { - L.DomUtil.addClass(tmpIcon, /*rollwithit*/ ambiguousIconString) } - - // make this a string so that it's easy to set innerHTML below - tmpIcon = tmpIcon.outerHTML; + }, + + enable: function(){ + L.DomUtil.addClass(this.button, 'enabled'); + L.DomUtil.removeClass(this.button, 'disabled'); + this.button.setAttribute('aria-hidden', 'false'); + return this; + }, + + disable: function(){ + L.DomUtil.addClass(this.button, 'disabled'); + L.DomUtil.removeClass(this.button, 'enabled'); + this.button.setAttribute('aria-hidden', 'true'); + return this; + }, + + onAdd: function(map){ + var bar = L.easyBar([this], { + position: this.options.position, + leafletClasses: this.options.leafletClasses + }); + this._anonymousBar = bar; + this._container = bar.container; + return this._anonymousBar.container; + }, + + removeFrom: function (map) { + if (this._map === map) + this.remove(); + return this; + }, + + }); + + L.easyButton = function(/* args will pass automatically */){ + var args = Array.prototype.concat.apply([L.Control.EasyButton],arguments); + return new (Function.prototype.bind.apply(L.Control.EasyButton, args)); + }; + + /************************* + * + * util functions + * + *************************/ + + // constructor for states so only curated + // states end up getting called + function State(template, easyButton){ + + this.title = template.title; + this.stateName = template.stateName ? template.stateName : 'unnamed-state'; + + // build the wrapper + this.icon = L.DomUtil.create('span', ''); + + L.DomUtil.addClass(this.icon, 'button-state state-' + this.stateName.replace(/(^\s*|\s*$)/g,'')); + this.icon.innerHTML = buildIcon(template.icon); + this.onClick = L.Util.bind(template.onClick?template.onClick:function(){}, easyButton); } - return tmpIcon; -} + function buildIcon(ambiguousIconString) { + + var tmpIcon; -})(); + // does this look like html? (i.e. not a class) + if( ambiguousIconString.match(/[&;=<>"']/) ){ + + // if so, the user should have put in html + // so move forward as such + tmpIcon = ambiguousIconString; + + // then it wasn't html, so + // it's a class list, figure out what kind + } else { + ambiguousIconString = ambiguousIconString.replace(/(^\s*|\s*$)/g,''); + tmpIcon = L.DomUtil.create('span', ''); + + if( ambiguousIconString.indexOf('fa-') === 0 ){ + L.DomUtil.addClass(tmpIcon, 'fa ' + ambiguousIconString) + } else if ( ambiguousIconString.indexOf('glyphicon-') === 0 ) { + L.DomUtil.addClass(tmpIcon, 'glyphicon ' + ambiguousIconString) + } else { + L.DomUtil.addClass(tmpIcon, /*rollwithit*/ ambiguousIconString) + } + + // make this a string so that it's easy to set innerHTML below + tmpIcon = tmpIcon.outerHTML; + } + + return tmpIcon; + } + + return L; +}));