third_party/polymer/components-chromium/core-animated-pages/core-animated-pages-extracted.js

   1
   2
   3   Polymer('core-animated-pages',Polymer.mixin({
   4
   5     eventDelegates: {
   6       'core-transitionend': 'transitionEnd'
   7     },
   8
   9     /**
  10      * A space-delimited string of transitions to use when switching between pages in this element.
  11      * The strings are `id`s of `core-transition-pages` elements included elsewhere. See the
  12      * individual transition's document for specific details.
  13      *
  14      * @attribute transitions
  15      * @type string
  16      * @default ''
  17      */
  18     transitions: '',
  19
  20     selected: 0,
  21
  22     /**
  23      * The last page selected. This property is useful to dynamically set transitions based
  24      * on incoming and outgoing pages.
  25      *
  26      * @attribute lastSelected
  27      * @type Object
  28      * @default null
  29      */
  30     lastSelected: null,
  31
  32     registerCallback: function() {
  33       this.tmeta = document.createElement('core-transition');
  34     },
  35
  36     created: function() {
  37       this._transitions = [];
  38       this.transitioning = [];
  39     },
  40
  41     attached: function() {
  42       this.resizerAttachedHandler();
  43     },
  44
  45     detached: function() {
  46       this.resizerDetachedHandler();
  47     },
  48
  49     transitionsChanged: function() {
  50       this._transitions = this.transitions.split(' ');
  51     },
  52
  53     _transitionsChanged: function(old) {
  54       if (this._transitionElements) {
  55         this._transitionElements.forEach(function(t) {
  56           t.teardown(this);
  57         }, this);
  58       }
  59       this._transitionElements = [];
  60       this._transitions.forEach(function(transitionId) {
  61         var t = this.getTransition(transitionId);
  62         if (t) {
  63           this._transitionElements.push(t);
  64           t.setup(this);
  65         }
  66       }, this);
  67     },
  68
  69     getTransition: function(transitionId) {
  70       return this.tmeta.byId(transitionId);
  71     },
  72
  73     selectionSelect: function(e, detail) {
  74       this.updateSelectedItem();
  75       // Wait to call applySelection when we run the transition
  76     },
  77
  78     applyTransition: function(src, dst) {
  79       if (this.animating) {
  80         this.cancelAsync(this.animating);
  81         this.animating = null;
  82       }
  83
  84       Polymer.flush();
  85
  86       if (this.transitioning.indexOf(src) === -1) {
  87         this.transitioning.push(src);
  88       }
  89       if (this.transitioning.indexOf(dst) === -1) {
  90         this.transitioning.push(dst);
  91       }
  92       // force src, dst to display
  93       src.setAttribute('animate', '');
  94       dst.setAttribute('animate', '');
  95       //
  96       var options = {
  97         src: src,
  98         dst: dst,
  99         easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
 100       };
 101
 102       // fire an event so clients have a chance to do something when the
 103       // new page becomes visible but before it draws.
 104       this.fire('core-animated-pages-transition-prepare');
 105
 106       //
 107       // prepare transition
 108       this._transitionElements.forEach(function(transition) {
 109         transition.prepare(this, options);
 110       }, this);
 111       //
 112       // force layout!
 113       src.offsetTop;
 114
 115       //
 116       // apply selection
 117       this.applySelection(dst, true);
 118       this.applySelection(src, false);
 119       //
 120       // start transition
 121       this._transitionElements.forEach(function(transition) {
 122         transition.go(this, options);
 123       }, this);
 124
 125       if (!this._transitionElements.length) {
 126         this.complete();
 127       } else {
 128         this.animating = this.async(this.complete.bind(this), null, 5000);
 129       }
 130     },
 131
 132     complete: function() {
 133       if (this.animating) {
 134         this.cancelAsync(this.animating);
 135         this.animating = null;
 136       }
 137
 138       this.transitioning.forEach(function(t) {
 139         t.removeAttribute('animate');
 140       });
 141       this.transitioning = [];
 142
 143       this._transitionElements.forEach(function(transition) {
 144         transition.ensureComplete(this);
 145       }, this);
 146
 147       this.fire('core-animated-pages-transition-end');
 148     },
 149
 150     transitionEnd: function(e) {
 151       if (this.transitioning.length) {
 152         var completed = true;
 153         this._transitionElements.forEach(function(transition) {
 154           if (!transition.completed) {
 155             completed = false;
 156           }
 157         });
 158         if (completed) {
 159           this.job('transitionWatch', function() {
 160             this.complete();
 161           }, 100);
 162         }
 163       }
 164     },
 165
 166     selectedChanged: function(old) {
 167       this.lastSelected = old;
 168       this.super(arguments);
 169     },
 170
 171     selectedItemChanged: function(oldItem) {
 172       this.super(arguments);
 173
 174       if (!oldItem) {
 175         this.applySelection(this.selectedItem, true);
 176         return;
 177       }
 178
 179       if (this.hasAttribute('no-transition') || !this._transitionElements || !this._transitionElements.length) {
 180         this.applySelection(oldItem, false);
 181         this.applySelection(this.selectedItem, true);
 182         this.notifyResize();
 183         return;
 184       }
 185
 186       if (oldItem && this.selectedItem) {
 187         // TODO(sorvell): allow bindings to update first?
 188         var self = this;
 189         Polymer.flush();
 190         Polymer.endOfMicrotask(function() {
 191           self.applyTransition(oldItem, self.selectedItem);
 192           self.notifyResize();
 193         });
 194       }
 195     },
 196
 197     resizerShouldNotify: function(el) {
 198       // Only notify descendents of selected item
 199       while (el && (el != this)) {
 200         if (el == this.selectedItem) {
 201           return true;
 202         }
 203         el = el.parentElement || (el.parentNode && el.parentNode.host);
 204       }
 205     }
 206
 207   }, Polymer.CoreResizer));
 208