From cc7911097a1b83c189401c44ef58896d002d3f6e Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Mon, 14 Apr 2014 19:04:42 -0700
Subject: [PATCH] outdent script; functions without a transition; transition
 controls all opening behavior.

---
 core-overlay.html | 760 +++++++++++++++++++++++-----------------------
 demo.html         |  26 +-
 2 files changed, 378 insertions(+), 408 deletions(-)

diff --git a/core-overlay.html b/core-overlay.html
index 720fee3..c6d8126 100644
--- a/core-overlay.html
+++ b/core-overlay.html
@@ -76,399 +76,391 @@
 -->
 
 <polymer-element name="core-overlay" attributes="target opened autoCloseDisabled margin sizingTarget transition">
-  
-  <script>
-    (function() {
-    
-      Polymer('core-overlay', {
-        
-        /**
-         * The target element.
-         *
-         * @attribute target
-         * @type Object
-         */
-        target: null,
-        
-        /**
-         * Set opened to true to show an overlay and to false to hide it.
-         * A core-overlay may be made intially opened by setting its
-         * opened attribute.
-         * @attribute opened
-         * @type boolean
-         * @default false
-         */
-        opened: false,
-        
-        /**
-         * By default an overlay will close automatically if the user
-         * taps outside it or presses the escape key. Disable this
-         * behavior by setting the autoCloseDisabled property to true.
-         * @attribute autoCloseDisabled
-         * @type boolean
-         * @default false
-         */
-        autoCloseDisabled: false,
-        margin: 0,
-        captureEventName: 'tap',
-        transition: '',
-        defaultTransition: 'overlay-transition',
-
-        targetListeners: {
-          'tap': 'tapHandler',
-          'keydown': 'keydownHandler',
-          'core-transitionend': 'transitionend'
-        },
-        
-        registerCallback: function(element) {
-          this.keyHelper = document.createElement('core-key-helper');
-          this.meta = document.createElement('core-transition');
-        },
-
-        ready: function() {
-          this.target = this.target || this;
-          // flush to ensure styles are installed before paint
-          Platform.flush();
-        },
-
-        /** 
-         * Toggle the opened state of the overlay.
-         * @method toggle
-         */
-        toggle: function() {
-          this.opened = !this.opened;
-        },
-
-        /** 
-         * Open the overlay. This is equivalent to setting the `opened`
-         * property to true.
-         * @method open
-         */
-        open: function() {
-          this.opened = true;
-        },
-
-        /** 
-         * Close the overlay. This is equivalent to setting the `opened` 
-         * property to false.
-         * @method open
-         */
-        close: function() {
-          this.opened = false;
-        },
-
-        targetChanged: function(old) {
-          if (this.target) {
-            var transition = this.getTransition();
-            // really make sure tabIndex is set
-            if (this.target.tabIndex < 0) {
-              this.target.tabIndex = -1;
-            }
-            var computed = getComputedStyle(this.target);
-            this.targetStyle = {
-              position: computed.position === 'static' ? 'fixed' :
-                  computed.position,
-              display: computed.display
-            }
-            //this.target.style.position = this.targetStyle.position;
-            //this.target.style.outline = this.target.style.display = 'none';
-            this.target.classList.add('core-overlay');
-            if (transition) {
-              transition.setup(this.target);
-            }
-            this.addElementListenerList(this.target, this.targetListeners);
-          }
-          if (old) {
-            this.removeElementListenerList(old, this.targetListeners);
-            if (transition) {
-              transition.teardown(old);
-            }
-            //old.style.position = null;
-            //old.style.outline = old.style.display = null;
-            this.target.classList.remove('core-overlay');
-          }
-          if (transition) {
-            transition.setup(this.target);
-          }
-        },
-
-        openedChanged: function() {
-          this.prepareRenderOpened();
-          // continue styling after delay so display state can change
-          // without aborting transitions
-          this.async('renderOpened');
-          this.fire('core-overlay-open', this.opened);
-        },
-
-        // tasks which must occur before opening; e.g. making the element visible
-        prepareRenderOpened: function() {
-          trackOverlays(this);
-          // async so we don't auto-close immediately via a click.
-          this.async(function() {
-            if (!this.autoCloseDisabled) {
-              // TODO(sorvell): how does this work with retargeting?
-              this.enableElementListener(this.opened, document,
-                  this.captureEventName, 'captureHandler', true);
-            }
-          });
-          this.enableElementListener(this.opened, window, 'resize',
-              'resizeHandler');
-          if (this.opened) {
-            // TODO(sorvell): force SD Polyfill to render
-            if (window.ShadowDOMPolyfill) {
-              this.target.offsetHeight;
-            }
-            if (!this._shouldPosition) {
-              this.target.style.position = 'static';
-              var computed = getComputedStyle(this.target);
-              var t = (computed.top === 'auto' && computed.bottom === 'auto');
-              var l = (computed.left === 'auto' && computed.right === 'auto');
-              this.target.style.position = this.targetStyle.position;
-              this._shouldPosition = {top: t, left: l};
-            }
-            // if we are showing, then take care when measuring
-            this.prepareMeasure(this.target);
-            this.updateTargetDimensions();
-            this.finishMeasure(this.target);
-          }
-        },
-
-        // tasks which cause the overlay to actually open; typically play an
-        // animation
-        // TODO(sorvell): normalize event names: transitionend, animationend
-        renderOpened: function() {
-          var t = this.getTransition();
-          if (t) {
-            t.go(this.target, {opened: this.opened});
-          } else {
-            this.target.style.display = this.targetStyle.display;
-            this.transitionend();
-          }
-        },
-
-        // finishing tasks; typically called via an animation end event
-        transitionend: function() {
-          if (!this.opened) {
-            this.resetTargetDimensions();
-            if (!this.getTransition()) {
-              this.target.style.display = 'none';
-            }
-          }
-          this.applyFocus();
-        },
-
-        prepareMeasure: function(target) {
-          target.style.display = 'block';
-          target.transition = target.webkitTransition = 'none';
-          target.transform = target.webkitTransform = 'none';
-        },
-
-        finishMeasure: function(target) {
-          target.style.display = null;
-          target.transform = target.webkitTransform = null;
-          target.transition = target.webkitTransition = null;
-        },
-
-        getTransition: function() {
-          return this.meta.byId(this.transition || this.defaultTransition);
-        },
-
-        getFocusNode: function() {
-          return this.target.querySelector('[autofocus]') || this.target;
-        },
-
-        // TODO(sorvell): nodes stay focused when they become un-focusable
-        // due to an ancestory becoming display: none; file bug.
-        applyFocus: function() {
-          var focusNode = this.getFocusNode();
-          if (this.opened) {
-            focusNode.focus();
-          } else {
-            focusNode.blur();
-            focusOverlay();
-          }
-        },
-
-        updateTargetDimensions: function() {
-          this.positionTarget();
-          this.sizeTarget();
-        },
-
-        sizeTarget: function() {
-          var sizer = this.sizingTarget || this.target;
-          var rect = sizer.getBoundingClientRect();
-          var mt = rect.top === this.margin ? this.margin : this.margin * 2;
-          var ml = rect.left === this.margin ? this.margin : this.margin * 2;
-          var h = window.innerHeight - rect.top - mt;
-          var w = window.innerWidth - rect.left - ml;
-          sizer.style.maxHeight = h + 'px';
-          sizer.style.maxWidth = w + 'px';
-        },
-
-        positionTarget: function() {
-          // vertically and horizontally center if not positioned
-          if (this._shouldPosition.top) {
-            var t = Math.max((window.innerHeight - 
-                this.target.offsetHeight - this.margin*2) / 2, this.margin);
-            this.target.style.top = t + 'px';
-          }
-          if (this._shouldPosition.left) {
-            var l = Math.max((window.innerWidth - 
-                this.target.offsetWidth - this.margin*2) / 2, this.margin);
-            this.target.style.left = l + 'px';
-          }
-        },
-
-        resetTargetDimensions: function() {
-          this.target.style.top = this.target.style.left = null;
-          this.target.style.width = this.target.style.height = null;
-          this._shouldPosition = null;
-        },
-
-        tapHandler: function(e) {
-          if (e.target && e.target.hasAttribute('overlay-toggle')) {
-            this.toggle();
-          } else {
-            if (this.autoCloseJob) {
-              this.autoCloseJob.stop();
-              this.autoCloseJob = null;
-            }
-          }
-        },
-
-        // TODO(sorvell): This approach will not work with modal. For
-        // this we need a scrim.
-        captureHandler: function(e) {
-          if (!this.autoCloseDisabled && (currentOverlay() == this) && (this 
-              != e.target) && !(this.contains(e.target))) {
-            this.autoCloseJob = this.job(this.autoCloseJob, function() {
-              this.opened = false;
-            });
-          }
-        },
-
-        keydownHandler: function(e) {
-          if (!this.autoCloseDisabled && (e.keyCode == this.keyHelper.ESCAPE_KEY)) {
-            this.opened = false;
-            e.stopPropagation();
-          }
-        },
-
-        /**
-         * Extensions of core-overlay should implement the resizeHandler
-         * method to adjust the size and position of the overlay when the 
-         * browser window resizes.
-         * @method resizeHandler
-         */
-        resizeHandler: function() {
-          this.updateTargetDimensions();
-        },
-
-        // TODO(sorvell): these utility methods should not be here.
-        addElementListenerList: function(node, events) {
-          for (var i in events) {
-            this.addElementListener(node, i, events[i]);
-          }
-        },
-
-        removeElementListenerList: function(node, events) {
-          for (var i in events) {
-            this.removeElementListener(node, i, events[i]);
-          }
-        },
-
-        enableElementListener: function(enable, node, event, methodName, capture) {
-          if (enable) {
-            this.addElementListener(node, event, methodName, capture);
-          } else {
-            this.removeElementListener(node, event, methodName, capture);
-          }
-        },
-
-        addElementListener: function(node, event, methodName, capture) {
-          var fn = this._makeBoundListener(methodName);
-          if (node && fn) {
-            node.addEventListener(event, fn, capture);
-          }
-        },
-
-        removeElementListener: function(node, event, methodName, capture) {
-          var fn = this._makeBoundListener(methodName);
-          if (node && fn) {
-            node.removeEventListener(event, fn, capture);
-          }
-        },
-
-        _makeBoundListener: function(methodName) {
-          var self = this, method = this[methodName];
-          if (!method) {
-            return;
-          }
-          var bound = '_bound' + methodName;
-          if (!this[bound]) {
-            this[bound] = function(e) {
-              method.call(self, e);
-            }
-          }
-          return this[bound];
-        },
-      });
+<script>
+(function() {
 
-      // TODO(sorvell): This should be an element with private state so it can
-      // be independent of overlay.
-      // track overlays for z-index and focus managemant
-      var overlays = [];
-      var trackOverlays = function(inOverlay) {
-        if (inOverlay.opened) {
-          //var overlayZ = window.getComputedStyle(inOverlay.target).zIndex;
-          //var z0 = Math.max(currentOverlayZ(), overlayZ);
-          var z0 = currentOverlayZ();
-          overlays.push(inOverlay);
-          var z1 = currentOverlayZ();
-          if (z1 <= z0) {
-            applyOverlayZ(inOverlay, z0);
-          } 
+  Polymer('core-overlay', {
+    
+    /**
+     * The target element.
+     *
+     * @attribute target
+     * @type Object
+     */
+    target: null,
+    
+    /**
+     * Set opened to true to show an overlay and to false to hide it.
+     * A core-overlay may be made intially opened by setting its
+     * opened attribute.
+     * @attribute opened
+     * @type boolean
+     * @default false
+     */
+    opened: false,
+    
+    /**
+     * By default an overlay will close automatically if the user
+     * taps outside it or presses the escape key. Disable this
+     * behavior by setting the autoCloseDisabled property to true.
+     * @attribute autoCloseDisabled
+     * @type boolean
+     * @default false
+     */
+    autoCloseDisabled: false,
+    margin: 0,
+    captureEventName: 'tap',
+    transition: '',
+    defaultTransition: 'core-transition-fade',
+
+    targetListeners: {
+      'tap': 'tapHandler',
+      'keydown': 'keydownHandler',
+      'core-transitionend': 'transitionend'
+    },
+    
+    registerCallback: function(element) {
+      this.keyHelper = document.createElement('core-key-helper');
+      this.meta = document.createElement('core-transition');
+    },
+
+    ready: function() {
+      this.target = this.target || this;
+      // flush to ensure styles are installed before paint
+      Platform.flush();
+    },
+
+    /** 
+     * Toggle the opened state of the overlay.
+     * @method toggle
+     */
+    toggle: function() {
+      this.opened = !this.opened;
+    },
+
+    /** 
+     * Open the overlay. This is equivalent to setting the `opened`
+     * property to true.
+     * @method open
+     */
+    open: function() {
+      this.opened = true;
+    },
+
+    /** 
+     * Close the overlay. This is equivalent to setting the `opened` 
+     * property to false.
+     * @method open
+     */
+    close: function() {
+      this.opened = false;
+    },
+
+    targetChanged: function(old) {
+      if (this.target) {
+        var transition = this.getTransition();
+        // really make sure tabIndex is set
+        if (this.target.tabIndex < 0) {
+          this.target.tabIndex = -1;
+        }
+        var computed = getComputedStyle(this.target);
+        this.targetStyle = {
+          position: computed.position === 'static' ? 'fixed' :
+              computed.position,
+          display: computed.display
+        }
+        if (transition) {
+          transition.setup(this.target);
         } else {
-          var i = overlays.indexOf(inOverlay);
-          if (i >= 0) {
-            overlays.splice(i, 1);
-            setZ(inOverlay, null);
-          }
+          this.target.style.position = this.targetStyle.position;
+          this.target.style.outline = this.target.style.display = 'none';
         }
+        this.addElementListenerList(this.target, this.targetListeners);
       }
-      
-      var applyOverlayZ = function(inOverlay, inAboveZ) {
-        setZ(inOverlay.target, inAboveZ + 2);
+      if (old) {
+        this.removeElementListenerList(old, this.targetListeners);
+        if (transition) {
+          transition.teardown(old);
+        } else {
+          old.style.position = null;
+          old.style.outline = old.style.display = null;
+        }
       }
-      
-      var setZ = function(inNode, inZ) {
-        inNode.style.zIndex = inZ;
+    },
+
+    openedChanged: function() {
+      this.prepareRenderOpened();
+      // continue styling after delay so display state can change
+      // without aborting transitions
+      this.async('renderOpened');
+      this.fire('core-overlay-open', this.opened);
+    },
+
+    // tasks which must occur before opening; e.g. making the element visible
+    prepareRenderOpened: function() {
+      trackOverlays(this);
+      // async so we don't auto-close immediately via a click.
+      this.async(function() {
+        if (!this.autoCloseDisabled) {
+          // TODO(sorvell): how does this work with retargeting?
+          this.enableElementListener(this.opened, document,
+              this.captureEventName, 'captureHandler', true);
+        }
+      });
+      this.enableElementListener(this.opened, window, 'resize',
+          'resizeHandler');
+      if (this.opened) {
+        // TODO(sorvell): force SD Polyfill to render
+        if (window.ShadowDOMPolyfill) {
+          this.target.offsetHeight;
+        }
+        if (!this._shouldPosition) {
+          this.target.style.position = 'static';
+          var computed = getComputedStyle(this.target);
+          var t = (computed.top === 'auto' && computed.bottom === 'auto');
+          var l = (computed.left === 'auto' && computed.right === 'auto');
+          this.target.style.position = this.targetStyle.position;
+          this._shouldPosition = {top: t, left: l};
+        }
+        // if we are showing, then take care when measuring
+        this.prepareMeasure(this.target);
+        this.updateTargetDimensions();
+        this.finishMeasure(this.target);
       }
-    
-      var currentOverlay = function() {
-        return overlays[overlays.length-1];
+    },
+
+    // tasks which cause the overlay to actually open; typically play an
+    // animation
+    // TODO(sorvell): normalize event names: transitionend, animationend
+    renderOpened: function() {
+      var t = this.getTransition();
+      if (t) {
+        t.go(this.target, {opened: this.opened});
+      } else {
+        this.target.style.display = this.targetStyle.display;
+        this.transitionend();
       }
-      
-      var DEFAULT_Z = 10;
-      
-      var currentOverlayZ = function() {
-        var z;
-        var current = currentOverlay();
-        if (current) {
-          var z1 = window.getComputedStyle(current.target).zIndex;
-          if (!isNaN(z1)) {
-            z = Number(z1);
-          }
+    },
+
+    // finishing tasks; typically called via an animation end event
+    transitionend: function() {
+      if (!this.opened) {
+        this.resetTargetDimensions();
+        this.target.style.display = 'none';
+      }
+      this.applyFocus();
+    },
+
+    prepareMeasure: function(target) {
+      target.style.display = 'block';
+      target.style.transition = target.style.webkitTransition = 'none';
+      target.style.transform = target.style.webkitTransform = 'none';
+    },
+
+    finishMeasure: function(target) {
+      target.style.transform = target.style.webkitTransform = null;
+      target.style.transition = target.style.webkitTransition = null;
+      target.style.display = null;
+    },
+
+    getTransition: function() {
+      return this.meta.byId(this.transition || this.defaultTransition);
+    },
+
+    getFocusNode: function() {
+      return this.target.querySelector('[autofocus]') || this.target;
+    },
+
+    // TODO(sorvell): nodes stay focused when they become un-focusable
+    // due to an ancestory becoming display: none; file bug.
+    applyFocus: function() {
+      var focusNode = this.getFocusNode();
+      if (this.opened) {
+        focusNode.focus();
+      } else {
+        focusNode.blur();
+        focusOverlay();
+      }
+    },
+
+    updateTargetDimensions: function() {
+      this.positionTarget();
+      this.sizeTarget();
+    },
+
+    sizeTarget: function() {
+      var sizer = this.sizingTarget || this.target;
+      var rect = sizer.getBoundingClientRect();
+      var mt = rect.top === this.margin ? this.margin : this.margin * 2;
+      var ml = rect.left === this.margin ? this.margin : this.margin * 2;
+      var h = window.innerHeight - rect.top - mt;
+      var w = window.innerWidth - rect.left - ml;
+      sizer.style.maxHeight = h + 'px';
+      sizer.style.maxWidth = w + 'px';
+    },
+
+    positionTarget: function() {
+      // vertically and horizontally center if not positioned
+      if (this._shouldPosition.top) {
+        var t = Math.max((window.innerHeight - 
+            this.target.offsetHeight - this.margin*2) / 2, this.margin);
+        this.target.style.top = t + 'px';
+      }
+      if (this._shouldPosition.left) {
+        var l = Math.max((window.innerWidth - 
+            this.target.offsetWidth - this.margin*2) / 2, this.margin);
+        this.target.style.left = l + 'px';
+      }
+    },
+
+    resetTargetDimensions: function() {
+      this.target.style.top = this.target.style.left = null;
+      this.target.style.width = this.target.style.height = null;
+      this._shouldPosition = null;
+    },
+
+    tapHandler: function(e) {
+      if (e.target && e.target.hasAttribute('overlay-toggle')) {
+        this.toggle();
+      } else {
+        if (this.autoCloseJob) {
+          this.autoCloseJob.stop();
+          this.autoCloseJob = null;
         }
-        return z || DEFAULT_Z;
       }
-      
-      var focusOverlay = function() {
-        var current = currentOverlay();
-        if (current) {
-          current.applyFocus();
+    },
+
+    // TODO(sorvell): This approach will not work with modal. For
+    // this we need a scrim.
+    captureHandler: function(e) {
+      if (!this.autoCloseDisabled && (currentOverlay() == this) && (this 
+          != e.target) && !(this.contains(e.target))) {
+        this.autoCloseJob = this.job(this.autoCloseJob, function() {
+          this.opened = false;
+        });
+      }
+    },
+
+    keydownHandler: function(e) {
+      if (!this.autoCloseDisabled && (e.keyCode == this.keyHelper.ESCAPE_KEY)) {
+        this.opened = false;
+        e.stopPropagation();
+      }
+    },
+
+    /**
+     * Extensions of core-overlay should implement the resizeHandler
+     * method to adjust the size and position of the overlay when the 
+     * browser window resizes.
+     * @method resizeHandler
+     */
+    resizeHandler: function() {
+      this.updateTargetDimensions();
+    },
+
+    // TODO(sorvell): these utility methods should not be here.
+    addElementListenerList: function(node, events) {
+      for (var i in events) {
+        this.addElementListener(node, i, events[i]);
+      }
+    },
+
+    removeElementListenerList: function(node, events) {
+      for (var i in events) {
+        this.removeElementListener(node, i, events[i]);
+      }
+    },
+
+    enableElementListener: function(enable, node, event, methodName, capture) {
+      if (enable) {
+        this.addElementListener(node, event, methodName, capture);
+      } else {
+        this.removeElementListener(node, event, methodName, capture);
+      }
+    },
+
+    addElementListener: function(node, event, methodName, capture) {
+      var fn = this._makeBoundListener(methodName);
+      if (node && fn) {
+        node.addEventListener(event, fn, capture);
+      }
+    },
+
+    removeElementListener: function(node, event, methodName, capture) {
+      var fn = this._makeBoundListener(methodName);
+      if (node && fn) {
+        node.removeEventListener(event, fn, capture);
+      }
+    },
+
+    _makeBoundListener: function(methodName) {
+      var self = this, method = this[methodName];
+      if (!method) {
+        return;
+      }
+      var bound = '_bound' + methodName;
+      if (!this[bound]) {
+        this[bound] = function(e) {
+          method.call(self, e);
         }
       }
-    })();
-  </script>
+      return this[bound];
+    },
+  });
+
+  // TODO(sorvell): This should be an element with private state so it can
+  // be independent of overlay.
+  // track overlays for z-index and focus managemant
+  var overlays = [];
+  var trackOverlays = function(inOverlay) {
+    if (inOverlay.opened) {
+      var z0 = currentOverlayZ();
+      overlays.push(inOverlay);
+      var z1 = currentOverlayZ();
+      if (z1 <= z0) {
+        applyOverlayZ(inOverlay, z0);
+      } 
+    } else {
+      var i = overlays.indexOf(inOverlay);
+      if (i >= 0) {
+        overlays.splice(i, 1);
+        setZ(inOverlay, null);
+      }
+    }
+  }
+  
+  var applyOverlayZ = function(inOverlay, inAboveZ) {
+    setZ(inOverlay.target, inAboveZ + 2);
+  }
+  
+  var setZ = function(inNode, inZ) {
+    inNode.style.zIndex = inZ;
+  }
+
+  var currentOverlay = function() {
+    return overlays[overlays.length-1];
+  }
+  
+  var DEFAULT_Z = 10;
+  
+  var currentOverlayZ = function() {
+    var z;
+    var current = currentOverlay();
+    if (current) {
+      var z1 = window.getComputedStyle(current.target).zIndex;
+      if (!isNaN(z1)) {
+        z = Number(z1);
+      }
+    }
+    return z || DEFAULT_Z;
+  }
+  
+  var focusOverlay = function() {
+    var current = currentOverlay();
+    if (current) {
+      current.applyFocus();
+    }
+  }
+})();
+</script>
 </polymer-element>
diff --git a/demo.html b/demo.html
index 58c7a37..8eff209 100644
--- a/demo.html
+++ b/demo.html
@@ -21,33 +21,11 @@
 			}
 
 			#dialog {
-				/*top: 72px;
-				left: 10px;*/
 				width: 500px;
 			}
 
-			#dialog.core-revealed {
-				transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in;
-				-webkit-transform: scale(0.1) translateY(-500px);
-			}
-
-			#dialog.core-overlay.core-opened {
-				-webkit-transform: none;	
-			}
-
-			#confirmation.core-opened {
-				top: 100px;
-			}
-
-			#confirmation.core-closed {
-				left: 100%;
-				top: 100px;
-			}
-
 			#confirmation {
-				position: absolute;
 				left: 50%;
-				top: 0;
 				text-align: center;
 				width: 150px;
 				margin-left: -75px;
@@ -64,7 +42,7 @@ <h2>Dialog</h2>
 			<div>
 				<input placeholder="say something..." autofocus oninput="somethingCheck(this)"></input><br>
 				I agree with this wholeheartedly.
-				<core-overlay id="confirmation" class="dialog">
+				<core-overlay id="confirmation" class="dialog" transition="core-transition-top">
 					Thank you.
 				</core-overlay>
 			</div><br><br>
@@ -98,7 +76,7 @@ <h2>Dialog</h2>
 						box-shadow: 0 4px 16px rgba(0,0,0,0.2);
 					}
 				</style>
-				<core-overlay id="overlay" opened="{{opened}}" autoCloseDisabled="{{autoCloseDisabled}}"></core-overlay>
+				<core-overlay id="overlay" opened="{{opened}}" autoCloseDisabled="{{autoCloseDisabled}}"  transition="core-transition-center"></core-overlay>
 				<content></content>
 			</template>
 			<script>