render-status.html

<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<script>
  /*
   * Helper for determining when first render occurs.
   * Call `Polymer.RenderStatus.whenReady(callback)` to be notified when
   * first render occurs or immediately if it has already occured.
   * Note that since HTML Imports are designed to load before rendering, 
   * this call can also be used to guarantee that imports have loaded.
   * This behavior is normalized to function correctly with the HTMLImports
   * polyfill which does not otherwise maintain this rendering guarantee.
   * Querying style and layout data before first render is currently 
   * problematic on some browsers (Blink/Webkit) so this helper can be used
   * to prevent doing so until a safe time.
   */
  Polymer.RenderStatus = {

    _ready: false,

    _callbacks: [],

    whenReady: function(cb) {
      if (this._ready) {
        cb();
      } else {
        this._callbacks.push(cb);
      }
    },

    _makeReady: function() {
      this._ready = true;
      for (var i=0; i < this._callbacks.length; i++) {
        this._callbacks[i]();
      }
      this._callbacks = [];
    },

    _catchFirstRender: function() {
      requestAnimationFrame(function() {
        Polymer.RenderStatus._makeReady();
      });
    },

    _afterFirstRenderQueue: [],

    _waitingAfterFirstRender: false,

    afterFirstRender: function(element, fn, args) {
      if (!this._waitingAfterFirstRender) {
        this._waitingAfterFirstRender = true;
        this.whenReady(this._flushAfterFirstRender);
      }
      this._afterFirstRenderQueue.push([element, fn, args]);
    },

    _flushAfterFirstRender: function() {
      // we want to defer flush until just after the next paint.
      requestAnimationFrame(function() {
        setTimeout(Polymer.RenderStatus.__flushAfterFirstRender);
      });
    },

    __flushAfterFirstRender: function() {
      var self = Polymer.RenderStatus;
      self._waitingAfterFirstRender = false;
      for (var i=0, h; i < self._afterFirstRenderQueue.length; i++) {
        h = self._afterFirstRenderQueue[i];
        h[1].apply(h[0], h[2] || Polymer.nar);
      };
      self._afterFirstRenderQueue = [];
    }
  };

  if (window.HTMLImports) {
    HTMLImports.whenReady(function() {
      Polymer.RenderStatus._catchFirstRender();
    });
  } else {
    Polymer.RenderStatus._catchFirstRender();
  }

  // NOTE: for bc.
  Polymer.ImportStatus = Polymer.RenderStatus;
  Polymer.ImportStatus.whenLoaded = Polymer.ImportStatus.whenReady;

</script>