From 24b3b3b3a1844bcca6831e91e3e190c8df8e6c74 Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Mon, 30 Sep 2013 11:05:32 -0700
Subject: [PATCH] generalize polymer's fuoc prevention strategy; fixes: #276  -
 styling is now expressed via 'polymer-veiled' and 'polymer-unveil' classes
 which are now user customizable.  - to veil (initially hide) an element
 either include the class 'polymer-veiled' or add to the array:
 Polymer.veiledElements. This list includes 'body' by default but that can be
 removed to prevent body from getting de-fuoc'd.  - note: Polymer
 automatically unveils elements at WebComponentsReady time, but elements can
 be dynamically unveiled by (1) adding the polymer-veiled class to them to
 hide them and then (2) when they are ready, calling Polymer.unveilElements().

---
 src/boot.js                   | 76 ++++++++++++++++++++++++++-----
 test/html/styling/unveil.html | 84 +++++++++++++++++++++++++++++++++++
 test/js/styling.js            |  1 +
 3 files changed, 151 insertions(+), 10 deletions(-)
 create mode 100644 test/html/styling/unveil.html

diff --git a/src/boot.js b/src/boot.js
index 535cb5ac7e..ae033c0bf2 100644
--- a/src/boot.js
+++ b/src/boot.js
@@ -6,15 +6,71 @@
 
 (function(scope) {
 
-// FOUC prevention tactic
-var style = document.createElement('style');
-style.textContent = 'body {opacity: 0;}';
-var head = document.querySelector('head');
-head.insertBefore(style, head.firstChild);
-
-window.addEventListener('WebComponentsReady', function() {
-  document.body.style.webkitTransition = 'opacity 0.3s';
-  document.body.style.opacity = 1;
-});
+  // FOUC prevention tactic
+  // default list of veiled elements
+  scope.veiledElements = ['body'];
+  // add polymer styles
+  var VEILED_CLASS = 'polymer-veiled';
+  var UNVEIL_CLASS = 'polymer-unveil';
+  var TRANSITION_TIME = 0.3;
+  var style = document.createElement('style');
+  style.textContent = '.' + VEILED_CLASS + ' { ' +
+      'visibility: hidden; opacity: 0; } \n' +
+      '.' + UNVEIL_CLASS +  '{ ' +
+      '-webkit-transition: opacity ' + TRANSITION_TIME + 's; ' +
+      'transition: opacity ' + TRANSITION_TIME +'s; }\n';
+  var head = document.querySelector('head');
+  head.insertBefore(style, head.firstChild);
+
+  // apply veiled class
+  function veilElements() {
+    var veiled = Polymer.veiledElements;
+    if (veiled) {
+      for (var i=0, l=veiled.length, u; (i<l) && (u=veiled[i]); i++) {
+        veilElementsBySelector(u);
+      }
+    }
+  }
+
+  function veilElementsBySelector(selector) {
+    var nodes = document.querySelectorAll(selector);
+    for (var i=0, l=nodes.length, n; (i<l) && (n=nodes[i]); i++) {
+      n.classList.add(VEILED_CLASS);
+    }
+  }
+
+  // apply unveil class
+  function unveilElements() {
+    requestAnimationFrame(function() {
+      var nodes = document.querySelectorAll('.' + VEILED_CLASS);
+      for (var i=0, l=nodes.length, n; (i<l) && (n=nodes[i]); i++) {
+        n.classList.add(UNVEIL_CLASS);
+        n.classList.remove(VEILED_CLASS);
+      }
+      // NOTE: depends on transition end event to remove 'unveil' class.
+      if (nodes.length) {
+        var removeUnveiled = function() {
+          for (var i=0, l=nodes.length, n; (i<l) && (n=nodes[i]); i++) {
+            n.classList.remove(UNVEIL_CLASS);
+          }
+          document.body.removeEventListener(endEvent, removeUnveiled, false);
+        }
+        document.body.addEventListener(endEvent, removeUnveiled, false);
+      };
+    });
+  }
+
+  // determine transition end event
+  var endEvent = (document.documentElement.style.webkitTransition !== undefined) ?
+      'webkitTransitionEnd' : 'transitionend';
+
+  // hookup auto-unveiling
+  document.addEventListener('DOMContentLoaded', veilElements);
+  window.addEventListener('WebComponentsReady', unveilElements);
+
+  // exports
+  // can dynamically unveil elements by adding the veiled class and then 
+  // calling Polymer.unveilElements
+  scope.unveilElements = unveilElements;
 
 })(Polymer);
diff --git a/test/html/styling/unveil.html b/test/html/styling/unveil.html
new file mode 100644
index 0000000000..25474474d7
--- /dev/null
+++ b/test/html/styling/unveil.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<html>
+<head>
+  <title>unveil</title>
+  <script src="../../../polymer.js"></script>
+  <script src="../../../../tools/test/htmltest.js"></script>
+  <script src="../../../../tools/test/chai/chai.js"></script>
+  <style>
+    .polymer-unveil {
+      background: red;
+    }
+  </style>
+  <script>
+    Polymer.veiledElements = ['body', '#veiled'];
+  </script>
+</head>
+<body>
+  <x-test id="veiled"></x-test>
+  <x-test class="polymer-veiled"></x-test>
+
+  <polymer-element name="x-test">
+    <template>
+      <style>
+        :host { dispay: block};
+      </style>
+      x-test
+    </template>
+    <script>
+      Polymer('x-test', {
+        enteredView: function() {
+          chai.assert.isTrue(getComputedStyle(this).visibility == 'hidden',
+            'veiled elements are visible');
+        }
+      });
+    </script>
+  </polymer-element>
+
+  <script>
+    document.addEventListener('WebComponentsReady', function() {
+      chai.assert.isTrue(getComputedStyle(document.body).visibility == 'hidden',
+            'veiled elements are visible');
+      // test during transition
+      requestAnimationFrame(function() {
+        requestAnimationFrame(function() {
+          chai.assert.equal(document.querySelectorAll('.polymer-veiled').length, 0,
+              'element veiled class is removed when unveiling');
+          chai.assert.equal(document.querySelectorAll('.polymer-unveil').length, 3,
+              'element unveil class is applied when unveiling');
+          var nodes = document.querySelectorAll('.polymer-unveil')
+          for (var i=0; i<nodes.length; i++) {
+            chai.assert.equal(getComputedStyle(nodes[i]).backgroundColor, 
+                'rgb(255, 0, 0)', 'user unveil style is applied');
+          }
+
+        });
+      });
+      var endEvent = (document.documentElement.style.webkitTransition !== undefined) ?
+          'webkitTransitionEnd' : 'transitionend';
+      document.body.addEventListener(endEvent, function(e) {
+        if (e.target != this) {
+          return;
+        }
+        requestAnimationFrame(function() {
+          for (var i=0, l=Polymer.veiledElements.length, elt; i<l; i++) {
+            elt = document.querySelector(Polymer.veiledElements[i]);
+            chai.assert.isTrue(getComputedStyle(elt).visibility == 'visible',
+                'unveiled elements are visible');
+          }
+          chai.assert.equal(document.querySelectorAll('.polymer-veiled').length, 0,
+              'element classes are cleared after unveiling');
+          chai.assert.equal(document.querySelectorAll('.polymer-unveil').length, 0,
+              'element classes are cleared after unveiling');
+          done();
+        });
+      }, false);
+    });
+  </script>
+</body>
+</html>
diff --git a/test/js/styling.js b/test/js/styling.js
index 45de82b1a1..80d5b2578e 100644
--- a/test/js/styling.js
+++ b/test/js/styling.js
@@ -8,5 +8,6 @@ htmlSuite('styling', function() {
   htmlTest('html/styling/sheet-scope.html');
   htmlTest('html/styling/sheet-main-doc.html');
   htmlTest('html/styling/apply-reset-styles.html');
+  htmlTest('html/styling/unveil.html');
 });