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;
+}));