extlib/leaflet/src/map/ext/Map.ZoomAnimation.js

   1 L.Map.include(!L.DomUtil.TRANSITION ? {} : {
   2         _zoomToIfCenterInView: function(center, zoom, centerOffset) {
   3
   4                 if (this._animatingZoom) { return true; }
   5                 if (!this.options.zoomAnimation) { return false; }
   6
   7                 var zoomDelta = zoom - this._zoom,
   8                         scale = Math.pow(2, zoomDelta),
   9                         offset = centerOffset.divideBy(1 - 1/scale);
  10
  11                 //if offset does not exceed half of the view
  12                 if (!this._offsetIsWithinView(offset, 1)) { return false; }
  13
  14                 this._mapPane.className += ' leaflet-zoom-anim';
  15
  16                 var centerPoint = this.containerPointToLayerPoint(this.getSize().divideBy(2)),
  17                         origin = centerPoint.add(offset);
  18
  19                 this._prepareTileBg();
  20
  21                 this._runAnimation(center, zoom, scale, origin);
  22
  23                 return true;
  24         },
  25
  26
  27         _runAnimation: function(center, zoom, scale, origin) {
  28                 this._animatingZoom = true;
  29
  30                 this._animateToCenter = center;
  31                 this._animateToZoom = zoom;
  32
  33                 var transform = L.DomUtil.TRANSFORM;
  34
  35                 //dumb FireFox hack, I have no idea why this magic zero translate fixes the scale transition problem
  36                 if (L.Browser.gecko || window.opera) {
  37                         this._tileBg.style[transform] += ' translate(0,0)';
  38                 }
  39
  40                 var scaleStr;
  41
  42                 // Android doesn't like translate/scale chains, transformOrigin + scale works better but
  43                 // it breaks touch zoom which Anroid doesn't support anyway, so that's a really ugly hack
  44                 // TODO work around this prettier
  45                 if (L.Browser.android) {
  46                         this._tileBg.style[transform + 'Origin'] = origin.x + 'px ' + origin.y + 'px';
  47                         scaleStr = 'scale(' + scale + ')';
  48                 } else {
  49                         scaleStr = L.DomUtil.getScaleString(scale, origin);
  50                 }
  51
  52                 L.Util.falseFn(this._tileBg.offsetWidth); //hack to make sure transform is updated before running animation
  53
  54                 var options = {};
  55                 options[transform] = this._tileBg.style[transform] + ' ' + scaleStr;
  56                 this._tileBg.transition.run(options);
  57         },
  58
  59         _prepareTileBg: function() {
  60                 if (!this._tileBg) {
  61                         this._tileBg = this._createPane('leaflet-tile-pane', this._mapPane);
  62                         this._tileBg.style.zIndex = 1;
  63                 }
  64
  65                 var tilePane = this._tilePane,
  66                         tileBg = this._tileBg;
  67
  68                 // prepare the background pane to become the main tile pane
  69                 //tileBg.innerHTML = '';
  70                 tileBg.style[L.DomUtil.TRANSFORM] = '';
  71                 tileBg.style.visibility = 'hidden';
  72
  73                 // tells tile layers to reinitialize their containers
  74                 tileBg.empty = true;
  75                 tilePane.empty = false;
  76
  77                 this._tilePane = this._panes.tilePane = tileBg;
  78                 this._tileBg = tilePane;
  79
  80                 if (!this._tileBg.transition) {
  81                         this._tileBg.transition = new L.Transition(this._tileBg, {duration: 0.3, easing: 'cubic-bezier(0.25,0.1,0.25,0.75)'});
  82                         this._tileBg.transition.on('end', this._onZoomTransitionEnd, this);
  83                 }
  84
  85                 this._stopLoadingBgTiles();
  86         },
  87
  88         // stops loading all tiles in the background layer
  89         _stopLoadingBgTiles: function() {
  90                 var tiles = [].slice.call(this._tileBg.getElementsByTagName('img'));
  91
  92                 for (var i = 0, len = tiles.length; i < len; i++) {
  93                         if (!tiles[i].complete) {
  94                                 tiles[i].src = '';
  95                                 tiles[i].parentNode.removeChild(tiles[i]);
  96                         }
  97                 }
  98         },
  99
 100         _onZoomTransitionEnd: function() {
 101                 this._restoreTileFront();
 102
 103                 L.Util.falseFn(this._tileBg.offsetWidth);
 104                 this._resetView(this._animateToCenter, this._animateToZoom, true);
 105
 106                 //TODO clear tileBg on map layersload
 107
 108                 this._mapPane.className = this._mapPane.className.replace(' leaflet-zoom-anim', ''); //TODO toggleClass util
 109                 this._animatingZoom = false;
 110         },
 111
 112         _restoreTileFront: function() {
 113                 this._tilePane.innerHTML = '';
 114                 this._tilePane.style.visibility = '';
 115                 this._tilePane.style.zIndex = 2;
 116                 this._tileBg.style.zIndex = 1;
 117         },
 118
 119         _clearTileBg: function() {
 120                 if (!this._animatingZoom && !this.touchZoom._zooming) {
 121                         this._tileBg.innerHTML = '';
 122                 }
 123         }
 124 });