Update leaflet loading.

assets/leaflet-loading/Control.Loading.js

@@ -13,17 +13,18 @@
     function defineLeafletLoading(L) {
         L.Control.Loading = L.Control.extend({
             options: {
+                delayIndicator: null,
                 position: 'topleft',
                 separate: false,
                 zoomControl: null,
                 spinjs: false,
                 spin: { 
-                  lines: 7, 
+                    lines: 7, 
-                  length: 3, 
+                    length: 3, 
-                  width: 3, 
+                    width: 3, 
-                  radius: 5, 
+                    radius: 5, 
-                  rotate: 13, 
+                    rotate: 13, 
-                  top: "83%"
+                    top: "83%"
                 }
             },
 
@@ -74,8 +75,8 @@
                 }
                 this._indicator = L.DomUtil.create('a', classes, container);
                 if (this.options.spinjs) {
-                  this._spinner = new Spinner(this.options.spin).spin();
+                    this._spinner = new Spinner(this.options.spin).spin();
-                  this._indicator.appendChild(this._spinner.el);
+                    this._indicator.appendChild(this._spinner.el);
                 }
                 return container;
             },
@@ -103,12 +104,32 @@
 
             addLoader: function(id) {
                 this._dataLoaders[id] = true;
-                this.updateIndicator();
+                if (this.options.delayIndicator && !this.delayIndicatorTimeout) {
+                    // If we are delaying showing the indicator and we're not
+                    // already waiting for that delay, set up a timeout.
+                    var that = this;
+                    this.delayIndicatorTimeout = setTimeout(function () {
+                        that.updateIndicator();
+                        that.delayIndicatorTimeout = null;
+                    }, this.options.delayIndicator);
+                }
+                else {
+                    // Otherwise show the indicator immediately
+                    this.updateIndicator();
+                }
             },
 
             removeLoader: function(id) {
                 delete this._dataLoaders[id];
                 this.updateIndicator();
+
+                // If removing this loader means we're in no danger of loading,
+                // clear the timeout. This prevents old delays from instantly 
+                // triggering the indicator.
+                if (this.options.delayIndicator && this.delayIndicatorTimeout && !this.isLoading()) {
+                    clearTimeout(this.delayIndicatorTimeout);
+                    this.delayIndicatorTimeout = null;
+                }
             },
 
             updateIndicator: function() {
@@ -183,6 +204,26 @@
                 this.addLoader(this.getEventId(e));
             },
 
+            _handleBaseLayerChange: function (e) {
+                var that = this;
+
+                // Check for a target 'layer' that contains multiple layers, such as
+                // L.LayerGroup. This will happen if you have an L.LayerGroup in an
+                // L.Control.Layers.
+                if (e.layer && e.layer.eachLayer && typeof e.layer.eachLayer === 'function') {
+                    e.layer.eachLayer(function (layer) {
+                        that._handleBaseLayerChange({ layer: layer });
+                    });
+                }
+                else {
+                    // If we're changing to a canvas layer, don't handle loading
+                    // as canvas layers will not fire load events.
+                    if (!(L.TileLayer.Canvas && e.layer instanceof L.TileLayer.Canvas)) {
+                        that._handleLoading(e);
+                    }
+                }
+            },
+
             _handleLoad: function(e) {
                 this.removeLoader(this.getEventId(e));
             },
@@ -212,6 +253,21 @@
                 }
             },
 
+            _layerRemove: function(e) {
+                if (!e.layer || !e.layer.off) return;
+                try {
+                    e.layer.off({
+                        loading: this._handleLoading,
+                        load: this._handleLoad
+                    }, this);
+                }
+                catch (exception) {
+                    console.warn('L.Control.Loading: Tried and failed to remove ' +
+                                 'event handlers from layer', e.layer);
+                    console.warn('L.Control.Loading: Full details', exception);
+                }
+            },
+
             _addLayerListeners: function(map) {
                 // Add listeners for begin and end of load to any layers already on the 
                 // map
@@ -226,6 +282,7 @@
                 // When a layer is added to the map, add listeners for begin and end
                 // of load
                 map.on('layeradd', this._layerAdd, this);
+                map.on('layerremove', this._layerRemove, this);
             },
 
             _removeLayerListeners: function(map) {
@@ -238,8 +295,9 @@
                     }, this);
                 }, this);
 
-                // Remove layeradd listener from map
+                // Remove layeradd/layerremove listener from map
                 map.off('layeradd', this._layerAdd, this);
+                map.off('layerremove', this._layerRemove, this);
             },
 
             _addMapListeners: function(map) {
@@ -247,6 +305,7 @@
                 // events, eg, for AJAX calls that affect the map but will not be
                 // reflected in the above layer events.
                 map.on({
+                    baselayerchange: this._handleBaseLayerChange,
                     dataloading: this._handleLoading,
                     dataload: this._handleLoad,
                     layerremove: this._handleLoad
@@ -255,6 +314,7 @@
 
             _removeMapListeners: function(map) {
                 map.off({
+                    baselayerchange: this._handleBaseLayerChange,
                     dataloading: this._handleLoading,
                     dataload: this._handleLoad,
                     layerremove: this._handleLoad

assets/leaflet-loading/Control.Loading.min.js

@@ -1 +1 @@
-!function(){function o(o){o.Control.Loading=o.Control.extend({options:{position:"topleft",separate:!1,zoomControl:null,spinjs:!1,spin:{lines:7,length:3,width:3,radius:5,rotate:13,top:"83%"}},initialize:function(t){o.setOptions(this,t),this._dataLoaders={},null!==this.options.zoomControl&&(this.zoomControl=this.options.zoomControl)},onAdd:function(n){if(this.options.spinjs&&"function"!=typeof Spinner)return t.error("Leaflet.loading cannot load because you didn't load spin.js (http://fgnass.github.io/spin.js/), even though you set it in options.");this._addLayerListeners(n),this._addMapListeners(n),this.options.separate||this.zoomControl||(n.zoomControl?this.zoomControl=n.zoomControl:n.zoomsliderControl&&(this.zoomControl=n.zoomsliderControl));var i,a="leaflet-control-loading";return this.zoomControl&&!this.options.separate?(i=this.zoomControl._container,a+=" leaflet-bar-part-bottom leaflet-bar-part last",o.DomUtil.addClass(this._getLastControlButton(),"leaflet-bar-part-bottom")):i=o.DomUtil.create("div","leaflet-control-zoom leaflet-bar"),this._indicator=o.DomUtil.create("a",a,i),this.options.spinjs&&(this._spinner=new Spinner(this.options.spin).spin(),this._indicator.appendChild(this._spinner.el)),i},onRemove:function(o){this._removeLayerListeners(o),this._removeMapListeners(o)},removeFrom:function(t){return this.zoomControl&&!this.options.separate?(this._container.removeChild(this._indicator),this._map=null,this.onRemove(t),this):o.Control.prototype.removeFrom.call(this,t)},addLoader:function(o){this._dataLoaders[o]=!0,this.updateIndicator()},removeLoader:function(o){delete this._dataLoaders[o],this.updateIndicator()},updateIndicator:function(){this.isLoading()?this._showIndicator():this._hideIndicator()},isLoading:function(){return this._countLoaders()>0},_countLoaders:function(){var o,t=0;for(o in this._dataLoaders)this._dataLoaders.hasOwnProperty(o)&&t++;return t},_showIndicator:function(){o.DomUtil.addClass(this._indicator,"is-loading"),this.options.separate||(this.zoomControl instanceof o.Control.Zoom?o.DomUtil.removeClass(this._getLastControlButton(),"leaflet-bar-part-bottom"):"function"==typeof o.Control.Zoomslider&&this.zoomControl instanceof o.Control.Zoomslider&&o.DomUtil.removeClass(this.zoomControl._ui.zoomOut,"leaflet-bar-part-bottom"))},_hideIndicator:function(){o.DomUtil.removeClass(this._indicator,"is-loading"),this.options.separate||(this.zoomControl instanceof o.Control.Zoom?o.DomUtil.addClass(this._getLastControlButton(),"leaflet-bar-part-bottom"):"function"==typeof o.Control.Zoomslider&&this.zoomControl instanceof o.Control.Zoomslider&&o.DomUtil.addClass(this.zoomControl._ui.zoomOut,"leaflet-bar-part-bottom"))},_getLastControlButton:function(){for(var o=this.zoomControl._container,t=o.children.length-1;t>0;){var n=o.children[t];if(this._indicator!==n&&0!==n.offsetWidth&&0!==n.offsetHeight)break;t--}return o.children[t]},_handleLoading:function(o){this.addLoader(this.getEventId(o))},_handleLoad:function(o){this.removeLoader(this.getEventId(o))},getEventId:function(o){return o.id?o.id:o.layer?o.layer._leaflet_id:o.target._leaflet_id},_layerAdd:function(o){if(o.layer&&o.layer.on)try{o.layer.on({loading:this._handleLoading,load:this._handleLoad},this)}catch(n){t.warn("L.Control.Loading: Tried and failed to add  event handlers to layer",o.layer),t.warn("L.Control.Loading: Full details",n)}},_addLayerListeners:function(o){o.eachLayer(function(o){o.on&&o.on({loading:this._handleLoading,load:this._handleLoad},this)},this),o.on("layeradd",this._layerAdd,this)},_removeLayerListeners:function(o){o.eachLayer(function(o){o.off&&o.off({loading:this._handleLoading,load:this._handleLoad},this)},this),o.off("layeradd",this._layerAdd,this)},_addMapListeners:function(o){o.on({dataloading:this._handleLoading,dataload:this._handleLoad,layerremove:this._handleLoad},this)},_removeMapListeners:function(o){o.off({dataloading:this._handleLoading,dataload:this._handleLoad,layerremove:this._handleLoad},this)}}),o.Map.addInitHook(function(){this.options.loadingControl&&(this.loadingControl=new o.Control.Loading,this.addControl(this.loadingControl))}),o.Control.loading=function(t){return new o.Control.Loading(t)}}var t=window.console||{error:function(){},warn:function(){}};"function"==typeof define&&define.amd?define(["leaflet"],function(t){o(t)}):o(L)}();
+!function(){function o(o){o.Control.Loading=o.Control.extend({options:{delayIndicator:null,position:"topleft",separate:!1,zoomControl:null,spinjs:!1,spin:{lines:7,length:3,width:3,radius:5,rotate:13,top:"83%"}},initialize:function(t){o.setOptions(this,t),this._dataLoaders={},null!==this.options.zoomControl&&(this.zoomControl=this.options.zoomControl)},onAdd:function(n){if(this.options.spinjs&&"function"!=typeof Spinner)return t.error("Leaflet.loading cannot load because you didn't load spin.js (http://fgnass.github.io/spin.js/), even though you set it in options.");this._addLayerListeners(n),this._addMapListeners(n),this.options.separate||this.zoomControl||(n.zoomControl?this.zoomControl=n.zoomControl:n.zoomsliderControl&&(this.zoomControl=n.zoomsliderControl));var i,a="leaflet-control-loading";return this.zoomControl&&!this.options.separate?(i=this.zoomControl._container,a+=" leaflet-bar-part-bottom leaflet-bar-part last",o.DomUtil.addClass(this._getLastControlButton(),"leaflet-bar-part-bottom")):i=o.DomUtil.create("div","leaflet-control-zoom leaflet-bar"),this._indicator=o.DomUtil.create("a",a,i),this.options.spinjs&&(this._spinner=new Spinner(this.options.spin).spin(),this._indicator.appendChild(this._spinner.el)),i},onRemove:function(o){this._removeLayerListeners(o),this._removeMapListeners(o)},removeFrom:function(t){return this.zoomControl&&!this.options.separate?(this._container.removeChild(this._indicator),this._map=null,this.onRemove(t),this):o.Control.prototype.removeFrom.call(this,t)},addLoader:function(o){if(this._dataLoaders[o]=!0,this.options.delayIndicator&&!this.delayIndicatorTimeout){var t=this;this.delayIndicatorTimeout=setTimeout(function(){t.updateIndicator(),t.delayIndicatorTimeout=null},this.options.delayIndicator)}else this.updateIndicator()},removeLoader:function(o){delete this._dataLoaders[o],this.updateIndicator(),this.options.delayIndicator&&this.delayIndicatorTimeout&&!this.isLoading()&&(clearTimeout(this.delayIndicatorTimeout),this.delayIndicatorTimeout=null)},updateIndicator:function(){this.isLoading()?this._showIndicator():this._hideIndicator()},isLoading:function(){return this._countLoaders()>0},_countLoaders:function(){var o,t=0;for(o in this._dataLoaders)this._dataLoaders.hasOwnProperty(o)&&t++;return t},_showIndicator:function(){o.DomUtil.addClass(this._indicator,"is-loading"),this.options.separate||(this.zoomControl instanceof o.Control.Zoom?o.DomUtil.removeClass(this._getLastControlButton(),"leaflet-bar-part-bottom"):"function"==typeof o.Control.Zoomslider&&this.zoomControl instanceof o.Control.Zoomslider&&o.DomUtil.removeClass(this.zoomControl._ui.zoomOut,"leaflet-bar-part-bottom"))},_hideIndicator:function(){o.DomUtil.removeClass(this._indicator,"is-loading"),this.options.separate||(this.zoomControl instanceof o.Control.Zoom?o.DomUtil.addClass(this._getLastControlButton(),"leaflet-bar-part-bottom"):"function"==typeof o.Control.Zoomslider&&this.zoomControl instanceof o.Control.Zoomslider&&o.DomUtil.addClass(this.zoomControl._ui.zoomOut,"leaflet-bar-part-bottom"))},_getLastControlButton:function(){for(var o=this.zoomControl._container,t=o.children.length-1;t>0;){var n=o.children[t];if(this._indicator!==n&&0!==n.offsetWidth&&0!==n.offsetHeight)break;t--}return o.children[t]},_handleLoading:function(o){this.addLoader(this.getEventId(o))},_handleBaseLayerChange:function(t){var n=this;t.layer&&t.layer.eachLayer&&"function"==typeof t.layer.eachLayer?t.layer.eachLayer(function(o){n._handleBaseLayerChange({layer:o})}):o.TileLayer.Canvas&&t.layer instanceof o.TileLayer.Canvas||n._handleLoading(t)},_handleLoad:function(o){this.removeLoader(this.getEventId(o))},getEventId:function(o){return o.id?o.id:o.layer?o.layer._leaflet_id:o.target._leaflet_id},_layerAdd:function(o){if(o.layer&&o.layer.on)try{o.layer.on({loading:this._handleLoading,load:this._handleLoad},this)}catch(n){t.warn("L.Control.Loading: Tried and failed to add  event handlers to layer",o.layer),t.warn("L.Control.Loading: Full details",n)}},_layerRemove:function(o){if(o.layer&&o.layer.off)try{o.layer.off({loading:this._handleLoading,load:this._handleLoad},this)}catch(n){t.warn("L.Control.Loading: Tried and failed to remove event handlers from layer",o.layer),t.warn("L.Control.Loading: Full details",n)}},_addLayerListeners:function(o){o.eachLayer(function(o){o.on&&o.on({loading:this._handleLoading,load:this._handleLoad},this)},this),o.on("layeradd",this._layerAdd,this),o.on("layerremove",this._layerRemove,this)},_removeLayerListeners:function(o){o.eachLayer(function(o){o.off&&o.off({loading:this._handleLoading,load:this._handleLoad},this)},this),o.off("layeradd",this._layerAdd,this),o.off("layerremove",this._layerRemove,this)},_addMapListeners:function(o){o.on({baselayerchange:this._handleBaseLayerChange,dataloading:this._handleLoading,dataload:this._handleLoad,layerremove:this._handleLoad},this)},_removeMapListeners:function(o){o.off({baselayerchange:this._handleBaseLayerChange,dataloading:this._handleLoading,dataloadLine truncated

module/config/config.php

@@ -55,7 +55,7 @@ $GLOBALS['LEAFLET_LIBRARIES']['leaflet-markercluster'] = array
 $GLOBALS['LEAFLET_LIBRARIES']['leaflet-loading'] = array
 (
     'name'       => 'Leaflet.loading',
-    'version'    => '0.1.16',
+    'version'    => '0.1.23',
     'license'    => '<a href="https://github.com/ebrelsford/Leaflet.loading/blob/master/LICENSE" target="_blank">MIT</a>',
     'homepage'   => 'https://github.com/ebrelsford/Leaflet.loading',
     'css'        => 'assets/leaflet/libs/leaflet-loading/Control.Loading.min.css',