diff --git a/build.json b/build.json index 086cb11..4e20bc5 100644 --- a/build.json +++ b/build.json @@ -1,6 +1,7 @@ [ "../MutationObservers/build.json", "src/scope.js", + "src/unresolved.js", "src/MutationObserver.js", "src/Observer.js", "src/CustomElements.js", diff --git a/custom-elements.js b/custom-elements.js index 60d3d65..a6aa2a9 100644 --- a/custom-elements.js +++ b/custom-elements.js @@ -10,6 +10,7 @@ var thisFile = 'custom-elements.js'; var scopeName = 'CustomElements'; var modules = [ '../MutationObservers/mutation-observers.js', + 'src/unresolved.js', 'src/Observer.js', 'src/CustomElements.js', 'src/Parser.js', diff --git a/src/unresolved.js b/src/unresolved.js new file mode 100644 index 0000000..c0fb56f --- /dev/null +++ b/src/unresolved.js @@ -0,0 +1,59 @@ +/* + * 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. + */ +(function(scope) { + /* + Shim :unresolved via an attribute unresolved. + TODO(sorvell): This is currently done once when the first + round of elements are upgraded. This is incorrect, and it will + need to be done dynamically. + The 'resolved' attribute is experimental and may be removed. + */ + var TRANSITION_TIME = 0.3; + var UNRESOLVED = 'unresolved'; + var RESOLVED = 'resolved'; + var UNRESOLVED_SELECTOR = '[' + UNRESOLVED + ']'; + var RESOLVED_SELECTOR = '[' + RESOLVED + ']'; + var style = document.createElement('style'); + + style.textContent = UNRESOLVED_SELECTOR + ' { ' + + 'opacity: 0; display: block; overflow: hidden; } \n' + + RESOLVED_SELECTOR + '{ display: block; overflow: hidden;\n' + + '-webkit-transition: opacity ' + TRANSITION_TIME + 's; ' + + 'transition: opacity ' + TRANSITION_TIME +'s; }\n'; + var head = document.querySelector('head'); + head.insertBefore(style, head.firstChild); + + // remove unresolved and apply resolved class + function resolveElements() { + requestAnimationFrame(function() { + var nodes = document.querySelectorAll(UNRESOLVED_SELECTOR); + for (var i=0, l=nodes.length, n; (i