FunctionButton.js (4446B)
1 import L from 'leaflet'; 2 /* 3 * A leaflet button with icon or text and click listener. 4 */ 5 L.FunctionButtons = L.Control.extend({ 6 includes: L.Mixin.Events, 7 8 initialize: function( buttons, options ) { 9 if( !('push' in buttons && 'splice' in buttons) ) 10 buttons = [buttons]; 11 this._buttons = buttons; 12 if( !options && buttons.length > 0 && 'position' in buttons[0] ) 13 options = { position: buttons[0].position }; 14 L.Control.prototype.initialize.call(this, options); 15 }, 16 17 onAdd: function( map ) { 18 this._map = map; 19 this._links = []; 20 21 var container = L.DomUtil.create('div', 'leaflet-bar'); 22 for( var i = 0; i < this._buttons.length; i++ ) { 23 var button = this._buttons[i], 24 link = L.DomUtil.create('a', '', container); 25 link._buttonIndex = i; // todo: remove? 26 link.href = button.href || '#'; 27 if( button.href ) 28 link.target = 'funcbtn'; 29 link.style.padding = '0 4px'; 30 link.style.width = 'auto'; 31 link.style.minWidth = '20px'; 32 if( button.bgColor ) 33 link.style.backgroundColor = button.bgColor; 34 if( button.title ) 35 link.title = button.title; 36 button.link = link; 37 this._updateContent(i); 38 39 var stop = L.DomEvent.stopPropagation; 40 L.DomEvent 41 .on(link, 'click', stop) 42 .on(link, 'mousedown', stop) 43 .on(link, 'dblclick', stop); 44 if( !button.href ) 45 L.DomEvent 46 .on(link, 'click', L.DomEvent.preventDefault) 47 .on(link, 'click', this.clicked, this); 48 } 49 50 return container; 51 }, 52 53 _updateContent: function( n ) { 54 if( n >= this._buttons.length ) 55 return; 56 var button = this._buttons[n], 57 link = button.link, 58 content = button.content; 59 if( !link ) 60 return; 61 if( content === undefined || content === false || content === null || content === '' ) 62 link.innerHTML = button.alt || ' '; 63 else if( typeof content === 'string' ) { 64 var ext = content.length < 4 ? '' : content.substring(content.length - 4), 65 isData = content.substring(0, 11) === 'data:image/'; 66 if( ext === '.png' || ext === '.gif' || ext === '.jpg' || isData ) { 67 link.style.width = '' + (button.imageSize || 26) + 'px'; 68 link.style.height = '' + (button.imageSize || 26) + 'px'; 69 link.style.padding = '0'; 70 link.style.backgroundImage = 'url(' + content + ')'; 71 link.style.backgroundRepeat = 'no-repeat'; 72 link.style.backgroundPosition = button.bgPos ? (-button.bgPos[0]) + 'px ' + (-button.bgPos[1]) + 'px' : '0px 0px'; 73 } else 74 link.innerHTML = content; 75 } else { 76 while( link.firstChild ) 77 link.removeChild(link.firstChild); 78 link.appendChild(content); 79 } 80 }, 81 82 setContent: function( n, content ) { 83 if( content === undefined ) { 84 content = n; 85 n = 0; 86 } 87 if( n < this._buttons.length ) { 88 this._buttons[n].content = content; 89 this._updateContent(n); 90 } 91 }, 92 93 setTitle: function( n, title ) { 94 if( title === undefined ) { 95 title = n; 96 n = 0; 97 } 98 if( n < this._buttons.length ) { 99 var button = this._buttons[n]; 100 button.title = title; 101 if( button.link ) 102 button.link.title = title; 103 } 104 }, 105 106 setBgPos: function( n, bgPos ) { 107 if( bgPos === undefined ) { 108 bgPos = n; 109 n = 0; 110 } 111 if( n < this._buttons.length ) { 112 var button = this._buttons[n]; 113 button.bgPos = bgPos; 114 if( button.link ) 115 button.link.style.backgroundPosition = bgPos ? (-bgPos[0]) + 'px ' + (-bgPos[1]) + 'px' : '0px 0px'; 116 } 117 }, 118 119 setHref: function( n, href ) { 120 if( href === undefined ) { 121 href = n; 122 n = 0; 123 } 124 if( n < this._buttons.length ) { 125 var button = this._buttons[n]; 126 button.href = href; 127 if( button.link ) 128 button.link.href = href; 129 } 130 }, 131 132 clicked: function(e) { 133 var link = (window.event && window.event.srcElement) || e.target || e.srcElement; 134 while( link && 'tagName' in link && link.tagName !== 'A' && !('_buttonIndex' in link ) ) 135 link = link.parentNode; 136 if( '_buttonIndex' in link ) { 137 var button = this._buttons[link._buttonIndex]; 138 if( button ) { 139 if( 'callback' in button ) 140 button.callback.call(button.context); 141 this.fire('clicked', { idx: link._buttonIndex }); 142 } 143 } 144 } 145 }); 146 147 L.functionButtons = function( buttons, options ) { 148 return new L.FunctionButtons(buttons, options); 149 }; 150 151 /* 152 * Helper method from the old class. It is not recommended to use it, please use L.functionButtons(). 153 */ 154 L.functionButton = function( content, button, options ) { 155 if( button ) 156 button.content = content; 157 else 158 button = { content: content }; 159 return L.functionButtons([button], options); 160 };