Merge pull request #49 from sorvell/master

minor fixes to support app development

src/css/g-page.css

@@ -0,0 +1,17 @@
+@host {
+  height: 100%;
+  display: -webkit-flex;
+  -webkit-flex-flow: column;
+}
+
+@host > .flex {
+  -webkit-flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+
+.flex {
+  -webkit-flex: 1;
+  min-height: 0;
+  min-width: 0;
+}

src/css/g-panels.css

@@ -18,6 +18,10 @@
   height: 100%;
 }
 
+g-panels > g-panels {
+  position: absolute;
+}
+
 /* TODO(sorvell): note: this is a workaround for reference combinators 
 approach defined in shadowDom spec */
 /* TODO(sorvell): expose animation timing via css variable */

src/g-overlay.html

@@ -5,7 +5,7 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-overlay" attributes="opened" 
+<element name="g-overlay" attributes="opened, autoCloseDisabled" 
          handlers="click: clickHandler, keydown: keydownHandler,
          webkitAnimationStart: openedAnimationStart, 
          webkitAnimationEnd: openedAnimationEnd, 
@@ -73,7 +73,13 @@
         this.node.opened = !this.opened;
       }
     },
+    //* Maximum allowed animation time. 
+    // NOTE: This timeout acts as a catchall for completing animations
+    // which may not have received an animationEnd event due to, for example,
+    // a parent being hidden during animation.
+    timeout: 1000,
     opened: false,
+    autoCloseDisabled: false,
     ready: function() {
       // make focusable
       if (!this.node.hasAttribute('tabindex')) {
@@ -83,8 +89,17 @@
     openedChanged: function() {
       this.renderOpened();
       trackOverlays(this);
+      if (!this.autoCloseDisabled) {
+        this.captureClick();
+      }
       this.fireEvent('opened', this.opened);
     },
+    captureClick: function() {
+      this.boundClickCaptureHandler = this.boundClickCaptureHandler ||
+        this.clickCaptureHandler.bind(this);
+      document[this.opened ? 'addEventListener' : 'removeEventListener'](
+        'click', this.boundClickCaptureHandler, true);
+    },
     getFocusNode: function() {
       return this.node.querySelector('[autofocus]') || this.node;
     },
@@ -109,23 +124,59 @@
     continueRenderOpened: function() {
       this.node.classList.toggle('opened', this.opened);
       this.node.classList.toggle('closing', !this.opened);
+      this.animating = this.asyncMethod('completeOpening', null, this.timeout);
     },
-    openedAnimationEnd: function(e) {
+    completeOpening: function() {
+      clearTimeout(this.animating);
+      this.animating = null;
       this.node.classList.remove('closing');
       this.node.classList.toggle('revealed', this.opened);
       this.applyFocus();
+    },
+    openedAnimationEnd: function(e) {
+      this.completeOpening();
       e.stopPropagation();
     },
     openedAnimationStart: function(e) {
       this.node.classList.add('animation');
     },
     clickHandler: function(e) {
+      this.selfClick = true;
       if (e.target && e.target.hasAttribute('overlay-toggle')) {
         this.toggle();
       }
     },
+    // TODO(sorvell): We install a capturing click handler on document while 
+    // the overlay is open so clicks outside the overlay can close it.
+    // However, when the overlay is inside shadowDOM and the click is inside
+    // the overlay, the event target seen by the document listener is always at
+    // least the overlay's host and possibly some ancestor's shadow host. 
+    // Therefore, clicks inside the overlay appear to come from outside it and
+    // it incorrectly closes. 
+    // We could address this if shadowDOM provided a way to get the original
+    // event target (perhaps only via privilege).
+    // Currently, we work around the problem by closing the overlay on a slight
+    // delay only if a click handler on the overlay itself does not fire. 
+    // Alternatively, we could turn off capturing for the document event, but
+    // then click handlers that stopPropagation would prevent the overlay 
+    // from closing.
+    // We would also avoid this problem if a overlays were re-parented to a top
+    // layer.
+    clickCaptureHandler: function(e) {
+      this.selfClick = null;
+      setTimeout(function() {
+        if (this.selfClick) {
+          return;
+        }
+        if (!this.autoCloseDisabled && (currentOverlay() == this) && (this.node 
+            != e.target) && !e.overlay && !(this.node.compareDocumentPosition(e.target) &
+            Node.DOCUMENT_POSITION_CONTAINED_BY)) {
+          this.node.opened = false;
+        }
+      }.bind(this));
+    },
     keydownHandler: function(e) {
-      if (e.keyCode == ESCAPE_KEY) {
+      if (!this.autoCloseDisabled && (e.keyCode == ESCAPE_KEY)) {
         this.node.opened = false;
         e.stopPropagation();
       }

src/g-page.html

@@ -5,23 +5,18 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-page" attributes="nofit">
+<element name="g-page">
 <link rel="components" href="g-component.html">
+<link rel="stylesheet" href="css/g-page.css">
 <template>
-  <style>
-    @host {
-      height: 100%;
-      display: block;
-    }
-  </style>
   <style id="pageSheet">
     html, body {
       height: 100%;
       margin: 0;
     }
 
     body {
-      font-family: 'Helvetica Nue', 'Helvetica', Arial, 'open sans' sans-serif;
+      font-family: 'Helvetica Neue', Helvetica, Arial, 'open sans', sans-serif;
     }
   </style>
   <content></content>
@@ -41,7 +36,6 @@
         var head = document.head;
         head.insertBefore(sheet, head.firstChild);
       }
-      sheet.textContent += '\n' + this.node.tagName.toLowerCase() + ' {height: 100%;}\n';
     }
   });
 </script>

src/panel-transitions/g-flow-panel-transition.html

@@ -12,10 +12,11 @@
         left: auto;
         right: 0;
       }
-
-      g-panels[transition='flow'].narrow-layout > * {
-        width: 100% !important;
-        -webkit-box-shadow: none !important;
+
+      /* note: won't win over node specific styling */
+      g-panels[transition='flow'] > .narrow-layout {
+        width: 100%;
+        -webkit-box-shadow: none;
       }
     </style>
   </template>
@@ -37,8 +38,11 @@
           // TODO(sorvell): hack, must fix better
           // async refresh in case we need to wait for stylesheet to load
           this.asyncMethod('refresh');
+          this.boundResizeHandler = this.resizeHandler.bind(this);
+          window.addEventListener('resize', this.boundResizeHandler);
         },
         teardown: function() {
+          window.removeEventListener('resize', this.boundResizeHandler);
           this.panels.node.removeChild(this.$.flowsheet);
           this.$super();
         },
@@ -49,7 +53,9 @@
         },
         layoutChange: function(inQuery) {
           this.narrowLayout = inQuery.matches;
-          this.panels.node.classList.toggle('narrow-layout', this.narrowLayout);
+          this.panels.getPanels().forEach(function(p) {
+            p.classList.toggle('narrow-layout', this.narrowLayout);
+          }, this);
           this.refresh();
         },
         enableTransitions: function(inEnable) {
@@ -60,7 +66,19 @@
         canTransition: function() {
           return !isNodeHidden(this.panels.node);
         },
+        resizeHandler: function(e) {
+          if (this.narrowLayout) {
+            this.refresh();
+          }
+        },
         refresh: function() {
+          if (!this.refreshing) {
+            this.refreshing = this.asyncMethod('_refresh', null, 50);
+          }
+        },
+        _refresh: function() {
+          clearTimeout(this.refreshing);
+          this.refreshing = null;
           this.enableTransitions(false);
           this.to = this.panels.getSelectedPanel();
           if (this.canTransition()) {
@@ -83,8 +101,7 @@
         applyLeftLayout: function(inTo, inIndex) {
           var l, count = this.count;
           this.panels.getPanels().forEach(function(p, i) {
-            var x = !l ? 0 : (this.narrowLayout ? (i - inIndex) * 100 + 
-              '%' : l.offsetWidth + 'px');
+            var x = !l ? 0 : l.offsetWidth + 'px';
             var right = this.panelIsRightAligned(p);
             p.style.zIndex = right ? -i : null;
             p.style.webkitTransform = 'translate3d(' + (right ? 0 : x) + ',0,0)';

workbench/menu-button.html

@@ -13,7 +13,7 @@
   <link rel="components" href="../src/g-toolbar.html">
   <style>
     html, body {
-      font-family: 'Helvetica Nue', 'Helvetica', Arial, 'open sans' sans-serif;
+      font-family: 'Helvetica Neue', Helvetica, Arial, 'open sans', sans-serif;
       height: 100%;
       margin: 0;
       overflow: hidden;

workbench/panels.html

@@ -15,7 +15,6 @@
 		body {
 			display: -webkit-flex;
 			-webkit-flex-flow: column;
-      opacity: 0;
 		}
 
 		.controls {
@@ -34,12 +33,34 @@
 
 		g-panels > * {
 			padding: 10px;
-		}
+      box-sizing: border-box;
+    }
 
     g-panels[transition="flow"] > * {
       width: 80%;
       -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.5);
     }
+
+    g-panels[transition="flow"] > *:nth-of-type(1) {
+      width: 200px;
+    }
+
+    g-panels[transition="flow"] > *:nth-of-type(2) {
+      width: 240px;
+    }
+
+    g-panels[transition="flow"] > *:nth-of-type(3) {
+      width: 280px;
+    }
+
+    g-panels[transition="flow"] > *:nth-of-type(4) {
+      width: 100%;
+    }
+
+    g-panels[transition="flow"] > *:nth-of-type(5) {
+      width: 280px;
+    }
+
 	</style>
 </head>
 <body>
@@ -63,12 +84,10 @@
 		<section name="zonk" style="background: red;">Panel 2</section>
 		<section name="bar" style="background: yellow;">Panel 3</section>
 		<section name="zing" style="background: black; color: white">Panel 4</section>
-		<section name="baz" style="background: white;">Panel 5</section>
+		<section name="baz" style="background: white;" class="right">Panel 5</section>
 	</g-panels>
 <script>
 	document.addEventListener("WebComponentsReady", function() {
-		document.body.style.opacity = 1;
-
     panels = document.querySelector("g-panels");
 		next = function() {
 			panels.next();

workbench/toolbar.html

@@ -12,7 +12,7 @@
   <link rel="components" href="../src/g-icon-button.html">
   <style>
     html, body {
-      font-family: 'Helvetica Nue', 'Helvetica', Arial, 'open sans' sans-serif;
+      font-family: 'Helvetica Neue', Helvetica, Arial, 'open sans', sans-serif;
       height: 100%;
       margin: 0;
     }