polymer-core-rails 0.1.0 → 0.2.0

data/app/assets/components/core-overlay/{core-overlay.html.erb → core-overlay.html}

@@ -6,10 +6,11 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI
 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
 -->
-<%= html_import_tag "core-transition/core-transition" %>
-<%= html_import_tag "core-overlay/core-key-helper" %>
-<%= html_import_tag "core-overlay/core-overlay-layer" %>
 
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../core-transition/core-transition.html">
+<link rel="import" href="core-key-helper.html">
+<link rel="import" href="core-overlay-layer.html">
 
 <!--
 The `core-overlay` element displays overlayed on top of other content. It starts
@@ -17,14 +18,14 @@ out hidden and is displayed by setting its `opened` property to true.
 A `core-overlay's` opened state can be toggled by calling the `toggle`
 method.
 
-The `core-overlay` will, by default, show/hide itself when it's opened. The
-`target` property may be set to another element to cause that element to
+The `core-overlay` will, by default, show/hide itself when it's opened. The 
+`target` property may be set to another element to cause that element to 
 be shown when the overlay is opened.
 
 It's common to want a `core-overlay` to animate to its opened
 position. The `core-overlay` element uses a `core-transition` to handle
-animation. The default transition is `core-transition-fade` which
-causes the overlay to fade in when displayed. See
+animation. The default transition is `core-transition-fade` which 
+causes the overlay to fade in when displayed. See 
 <a href="../core-transition/">`core-transition`</a> for more
 information about customizing a `core-overlay's` opening animation. The
 `backdrop` property can be set to true to show a backdrop behind the overlay
@@ -46,8 +47,8 @@ presses the escape key. This behavior can be turned off via the
       <button core-overlay-toggle>OK</button>
     </core-overlay>
 
-`core-overlay` will automatically size and position itself according to the
-following rules. If the target's style.top and style.left are unset, the
+`core-overlay` will automatically size and position itself according to the 
+following rules. If the target's style.top and style.left are unset, the 
 target will be centered. The size of the target is constrained to be no larger
 than the window dimensions. The `margin` property specifies the extra amount
 of space that should be reserved around the overlay. This can be used to ensure
@@ -64,7 +65,16 @@ Fired when the `core-overlay`'s `opened` property changes.
 @param {Object} detail
 @param {Object} detail.opened the opened state
 -->
+<!--
+Fired when the `core-overlay` has completely opened.
+
+@event core-overlay-open-completed
+-->
+<!--
+Fired when the `core-overlay` has completely closed.
 
+@event core-overlay-close-completed
+-->
 <style>
   .core-overlay-backdrop {
     position: fixed;
@@ -90,7 +100,7 @@ Fired when the `core-overlay`'s `opened` property changes.
 
     publish: {
       /**
-       * The target element that will be shown when the overlay is
+       * The target element that will be shown when the overlay is 
        * opened. If unspecified, the core-overlay itself is the target.
        *
        * @attribute target
@@ -101,11 +111,11 @@ Fired when the `core-overlay`'s `opened` property changes.
 
 
       /**
-       * A `core-overlay`'s size is guaranteed to be
+       * A `core-overlay`'s size is guaranteed to be 
        * constrained to the window size. To achieve this, the sizingElement
-       * is sized with a max-height/width. By default this element is the
+       * is sized with a max-height/width. By default this element is the 
        * target element, but it can be specifically set to a specific element
-       * inside the target if that is more appropriate. This is useful, for
+       * inside the target if that is more appropriate. This is useful, for 
        * example, when a region inside the overlay should scroll if needed.
        *
        * @attribute sizingTarget
@@ -113,7 +123,7 @@ Fired when the `core-overlay`'s `opened` property changes.
        * @default the target element
        */
       sizingTarget: null,
-
+    
       /**
        * Set opened to true to show an overlay and to false to hide it.
        * A `core-overlay` may be made initially opened by setting its
@@ -133,7 +143,7 @@ Fired when the `core-overlay`'s `opened` property changes.
        * @attribute backdrop
        * @type boolean
        * @default false
-       */
+       */    
       backdrop: false,
 
       /**
@@ -144,7 +154,7 @@ Fired when the `core-overlay`'s `opened` property changes.
        * @default false
       */
       layered: false,
-
+    
       /**
        * By default an overlay will close automatically if the user
        * taps outside it or presses the escape key. Disable this
@@ -179,8 +189,8 @@ Fired when the `core-overlay`'s `opened` property changes.
 
       /**
        * A `core-overlay` target's size is constrained to the window size.
-       * The `margin` property specifies a pixel amount around the overlay
-       * that will be reserved. It's useful for ensuring that, for example,
+       * The `margin` property specifies a pixel amount around the overlay 
+       * that will be reserved. It's useful for ensuring that, for example, 
        * a shadow displayed outside the target will always be visible.
        *
        * @attribute margin
@@ -190,8 +200,8 @@ Fired when the `core-overlay`'s `opened` property changes.
       margin: 0,
 
       /**
-       * The transition property specifies a string which identifies a
-       * <a href="../core-transition/">`core-transition`</a> element that
+       * The transition property specifies a string which identifies a 
+       * <a href="../core-transition/">`core-transition`</a> element that 
        * will be used to help the overlay open and close. The default
        * `core-transition-fade` will cause the overlay to fade in and out.
        *
@@ -209,7 +219,7 @@ Fired when the `core-overlay`'s `opened` property changes.
       'keydown': 'keydownHandler',
       'core-transitionend': 'transitionend'
     },
-
+    
     registerCallback: function(element) {
       this.layer = document.createElement('core-overlay-layer');
       this.keyHelper = document.createElement('core-key-helper');
@@ -224,7 +234,7 @@ Fired when the `core-overlay`'s `opened` property changes.
       Platform.flush();
     },
 
-    /**
+    /** 
      * Toggle the opened state of the overlay.
      * @method toggle
      */
@@ -232,7 +242,7 @@ Fired when the `core-overlay`'s `opened` property changes.
       this.opened = !this.opened;
     },
 
-    /**
+    /** 
      * Open the overlay. This is equivalent to setting the `opened`
      * property to true.
      * @method open
@@ -241,8 +251,8 @@ Fired when the `core-overlay`'s `opened` property changes.
       this.opened = true;
     },
 
-    /**
-     * Close the overlay. This is equivalent to setting the `opened`
+    /** 
+     * Close the overlay. This is equivalent to setting the `opened` 
      * property to false.
      * @method close
      */
@@ -269,10 +279,10 @@ Fired when the `core-overlay`'s `opened` property changes.
         if (transition) {
           transition.teardown(old);
         } else {
-          old.style.position = null;
-          old.style.outline = null;
+          old.style.position = '';
+          old.style.outline = '';
         }
-        old.style.display = null;
+        old.style.display = '';
       }
     },
 
@@ -283,7 +293,7 @@ Fired when the `core-overlay`'s `opened` property changes.
         return;
       }
       this.target.__overlaySetup = true;
-      this.target.style.display = null;
+      this.target.style.display = '';
       var transition = this.getTransition();
       if (transition) {
         transition.setup(this.target);
@@ -301,6 +311,7 @@ Fired when the `core-overlay`'s `opened` property changes.
     },
 
     openedChanged: function() {
+      this.transitioning = true;
       this.ensureTargetSetup();
       this.prepareRenderOpened();
       // continue styling after delay so display state can change
@@ -308,7 +319,7 @@ Fired when the `core-overlay`'s `opened` property changes.
       // note: we wait a full frame so that transition changes executed
       // during measuring do not cause transition
       this.async(function() {
-        this.target.style.display = null;
+        this.target.style.display = '';
         this.async('renderOpened');
       });
       this.fire('core-overlay-open', this.opened);
@@ -370,6 +381,7 @@ Fired when the `core-overlay`'s `opened` property changes.
       if (e && e.target !== this.target) {
         return;
       }
+      this.transitioning = false;
       if (!this.opened) {
         this.resetTargetDimensions();
         this.target.style.display = 'none';
@@ -382,6 +394,8 @@ Fired when the `core-overlay`'s `opened` property changes.
           this.layer.removeElement(this.target);
         }
       }
+      this.fire('core-overlay-' + (this.opened ? 'open' : 'close') + 
+          '-completed');
       this.applyFocus();
     },
 
@@ -413,13 +427,13 @@ Fired when the `core-overlay`'s `opened` property changes.
     prepareMeasure: function(target) {
       target.style.transition = target.style.webkitTransition = 'none';
       target.style.transform = target.style.webkitTransform = 'none';
-      target.style.display = null;
+      target.style.display = '';
     },
 
     finishMeasure: function(target) {
       target.style.display = 'none';
-      target.style.transform = target.style.webkitTransform = null;
-      target.style.transition = target.style.webkitTransition = null;
+      target.style.transform = target.style.webkitTransform = '';
+      target.style.transition = target.style.webkitTransition = '';
     },
 
     getTransition: function() {
@@ -436,7 +450,11 @@ Fired when the `core-overlay`'s `opened` property changes.
         focusNode.focus();
       } else {
         focusNode.blur();
-        focusOverlay();
+        if (currentOverlay() == this) {
+          console.warn('Current core-overlay is attempting to focus itself as next! (bug)');
+        } else {
+          focusOverlay();
+        }
       }
     },
 
@@ -467,21 +485,21 @@ Fired when the `core-overlay`'s `opened` property changes.
     positionTarget: function() {
       // vertically and horizontally center if not positioned
       if (this._shouldPosition.top) {
-        var t = Math.max((window.innerHeight -
+        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 -
+        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.right = this.target.style.bottom = null;
-      this.target.style.width = this.target.style.height = null;
+      this.target.style.top = this.target.style.left = '';
+      this.target.style.right = this.target.style.bottom = '';
+      this.target.style.width = this.target.style.height = '';
       this._shouldPosition = null;
     },
 
@@ -498,9 +516,9 @@ Fired when the `core-overlay`'s `opened` property changes.
         }
       }
     },
-
+    
     // We use the traditional approach of capturing events on document
-    // to to determine if the overlay needs to close. However, due to
+    // to to determine if the overlay needs to close. However, due to 
     // ShadowDOM event retargeting, the event target is not useful. Instead
     // of using it, we attempt to close asynchronously and prevent the close
     // if a tap event is immediately heard on the target.
@@ -523,7 +541,7 @@ Fired when the `core-overlay`'s `opened` property changes.
 
     /**
      * Extensions of core-overlay should implement the `resizeHandler`
-     * method to adjust the size and position of the overlay when the
+     * method to adjust the size and position of the overlay when the 
      * browser window resizes.
      * @method resizeHandler
      */
@@ -555,14 +573,14 @@ Fired when the `core-overlay`'s `opened` property changes.
     addElementListener: function(node, event, methodName, capture) {
       var fn = this._makeBoundListener(methodName);
       if (node && fn) {
-        node.addEventListener(event, fn, capture);
+        Polymer.addEventListener(node, event, fn, capture);
       }
     },
 
     removeElementListener: function(node, event, methodName, capture) {
       var fn = this._makeBoundListener(methodName);
       if (node && fn) {
-        node.removeEventListener(event, fn, capture);
+        Polymer.removeEventListener(node, event, fn, capture);
       }
     },
 
@@ -604,14 +622,14 @@ Fired when the `core-overlay`'s `opened` property changes.
     var i = overlays.indexOf(overlay);
     if (i >= 0) {
       overlays.splice(i, 1);
-      setZ(overlay, null);
+      setZ(overlay, '');
     }
   }
-
+  
   function applyOverlayZ(overlay, aboveZ) {
     setZ(overlay.target, aboveZ + 2);
   }
-
+  
   function setZ(element, z) {
     element.style.zIndex = z;
   }
@@ -619,9 +637,9 @@ Fired when the `core-overlay`'s `opened` property changes.
   function currentOverlay() {
     return overlays[overlays.length-1];
   }
-
+  
   var DEFAULT_Z = 10;
-
+  
   function currentOverlayZ() {
     var z;
     var current = currentOverlay();
@@ -633,10 +651,18 @@ Fired when the `core-overlay`'s `opened` property changes.
     }
     return z || DEFAULT_Z;
   }
-
+  
   function focusOverlay() {
     var current = currentOverlay();
-    if (current) {
+    // We have to be careful to focus the next overlay _after_ any current
+    // transitions are complete (due to the state being toggled prior to the
+    // transition). Otherwise, we risk infinite recursion when a transitioning
+    // (closed) overlay becomes the current overlay.
+    //
+    // NOTE: We make the assumption that any overlay that completes a transition
+    // will call into focusOverlay to kick the process back off. Currently:
+    // transitionend -> applyFocus -> focusOverlay.
+    if (current && !current.transitioning) {
       current.applyFocus();
     }
   }

data/app/assets/components/core-overlay/demo.html

@@ -0,0 +1,155 @@
+<!--
+    @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
+-->
+<!DOCTYPE html>
+<html>
+<head>
+	<title>core-overlay</title>
+	<meta name="viewport" content="width=device-width, user-scalable=no">
+	<script src="../platform/platform.js"></script>
+	<link rel="import" href="../core-transition/core-transition-css.html">
+	<link rel="import" href="core-overlay.html">
+	<style>
+		body {
+			margin: 0;
+		}
+
+		section {
+			padding: 24px;
+		}
+	</style>
+</head>
+<body unresolved>
+	<section>
+		<x-container></x-container>
+	</section>
+
+	<!-- a simple dialog element made with core-overlay -->
+	<polymer-element name="x-dialog" attributes="opened autoCloseDisabled">
+	<template>
+		<style>
+
+			:host {
+				box-sizing: border-box;
+				-moz-box-sizing: border-box;
+				font-family: Arial, Helvetica, sans-serif;
+				font-size: 13px;
+				-webkit-user-select: none;
+				-moz-user-select: none;
+				overflow: hidden;
+				background: white;
+				padding:30px 42px;
+				outline: 1px solid rgba(0,0,0,0.2);
+				box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+			}
+		</style>
+		<core-overlay id="overlay" layered backdrop opened="{{opened}}" autoCloseDisabled="{{autoCloseDisabled}}"  transition="core-transition-center"></core-overlay>
+		<content></content>
+	</template>
+	<script>
+
+	Polymer('x-dialog', {
+	
+		ready: function() {
+			this.$.overlay.target = this;
+		},
+
+		toggle: function() {
+			this.$.overlay.toggle();
+		}
+
+	});
+
+	</script>
+	</polymer-element>
+
+
+	<!-- an element that uses the x-dialog element and core-overlay -->
+	<polymer-element name="x-container">
+	<template>
+		<x-dialog id="dialog" class="dialog">
+			<!-- place all overlay styles inside the overlay target -->
+			<style no-shim>
+				.dialog {
+					box-sizing: border-box;
+					-moz-box-sizing: border-box;
+					font-family: Arial, Helvetica, sans-serif;
+					font-size: 13px;
+					-webkit-user-select: none;
+					-moz-user-select: none;
+					overflow: hidden;
+					background: white;
+					padding:30px 42px;
+					outline: 1px solid rgba(0,0,0,0.2);
+					box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+				}
+
+				#dialog {
+					width: 500px;
+				}
+			</style>
+			<h2>Dialog</h2>
+			<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla sapien sed enim sollicitudin laoreet. Suspendisse suscipit, metus ac volutpat sodales, libero magna semper lacus, molestie fringilla massa orci ut arcu. Nullam sodales urna sit amet odio vehicula mattis.</div><br><br>
+			<div>Ut aliquam vulputate congue. Vestibulum pretium pretium nulla quis sollicitudin. Praesent lacinia congue erat nec mattis. Fusce commodo lacus est. Duis turpis eros, ultrices sed aliquet non, blandit egestas velit. Integer a augue nec lorem tristique hendrerit. Curabitur imperdiet risus id enim bibendum vestibulum. Integer id magna at arcu faucibus fermentum vel a augue. Sed fringilla venenatis dolor, in blandit magna molestie luctus. Vestibulum dignissim posuere ultrices. Aenean urna nisl, tincidunt vitae iaculis ut, pharetra nec eros.</div><br><br>
+
+			<div>
+				<input placeholder="say something..." autofocus on-input="{{inputHandler}}" /><br>
+				I agree with this wholeheartedly.
+				<core-overlay layered id="confirmation" class="dialog" backdrop transition="core-transition-top">
+					<!-- place all overlay styles inside the overlay target -->
+					<style no-shim>
+						.dialog {
+							box-sizing: border-box;
+							-moz-box-sizing: border-box;
+							font-family: Arial, Helvetica, sans-serif;
+							font-size: 13px;
+							-webkit-user-select: none;
+							-moz-user-select: none;
+							overflow: hidden;
+							background: white;
+							padding:30px 42px;
+							outline: 1px solid rgba(0,0,0,0.2);
+							box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+						}
+
+						#confirmation {
+							box-sizing: border-box;
+							text-align: center;
+							width: 150px;
+						}
+					</style>
+					Thank you.
+				</core-overlay>
+			</div><br><br>
+			<button core-overlay-toggle>OK</button>
+		</x-dialog>
+
+		<button on-tap="{{tapHandler}}">Toggle Dialog</button>
+	</template>
+	<script>
+	
+	Polymer('x-container', {
+	
+		inputHandler: function(e) {
+			if (e.target.value === 'something') {
+				this.$.confirmation.toggle();
+			}
+		},
+	
+		tapHandler: function() {
+			this.$.dialog.toggle();
+		}
+	
+	});
+	
+	</script>
+	</polymer-element>
+
+</body>
+</html>

data/app/assets/components/core-overlay/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<!--
+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
+-->
+<html>
+<head>
+
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="../core-component-page/core-component-page.html">
+
+</head>
+<body unresolved>
+
+  <core-component-page></core-component-page>
+
+</body>
+</html>

data/app/assets/components/core-pages/README.md

@@ -0,0 +1,4 @@
+core-pages
+==========
+
+See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-pages) for more information.

data/app/assets/components/core-pages/bower.json

@@ -0,0 +1,7 @@
+{
+  "name": "core-pages",
+  "private": true,
+  "dependencies": {
+    "core-selector": "Polymer/core-selector#>=0.4.0 <1.0.0"
+  }
+}

data/app/assets/components/core-pages/{core-pages.html.erb → core-pages.html}

@@ -10,7 +10,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 <!--
 `core-pages` is used to select one of its children to show. One use is to cycle through a list of children "pages".
 
-Example:
+Example: 
 
     <core-pages selected="0">
       <div>One</div>
@@ -22,7 +22,7 @@ Example:
       document.addEventListener('click', function(e) {
         var pages = document.querySelector('core-pages');
         pages.selected = (pages.selected + 1) % pages.children.length;
-      };
+      });
     </script>
 
 @group Polymer Core Elements
@@ -30,12 +30,13 @@ Example:
 @extends core-selector
 -->
 
-<%= html_import_tag "core-selector/core-selector" %>
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../core-selector/core-selector.html">
 
 <polymer-element name="core-pages" extends="core-selector" selected="0" notap noscript>
 <template>
 
-  <%= stylesheet_link_tag "core-pages/core-pages"%>
+  <link rel="stylesheet" href="core-pages.css">
 
   <shadow></shadow>