content
+ content
+ content
+ content
+ 
+
+
Sub title
} #background { - @apply(--layout-fit); + @apply --layout-fit; overflow: hidden; height: 100%; } @@ -106,7 +106,7 @@Sub title
min-height: 100%; pointer-events: none; background-size: cover; - @apply(--app-box-background-front-layer); + @apply --app-box-background-front-layer; } #contentContainer { @@ -123,11 +123,11 @@Sub title
-
-
@@ -155,13 +155,24 @@ Sub title
this.resetLayout(); }, + _debounceRaf: function(fn) { + var self = this; + if (this._raf) { + window.cancelAnimationFrame(this._raf); + } + this._raf = window.requestAnimationFrame(function() { + self._raf = null; + fn.call(self); + }); + }, + /** * Resets the layout. This method is automatically called when the element is attached to the DOM. * * @method resetLayout */ resetLayout: function() { - this.debounce('_resetLayout', function() { + this._debounceRaf(function() { // noop if the box isn't in the rendered tree if (this.offsetWidth === 0 && this.offsetHeight === 0) { return; @@ -177,7 +188,7 @@Sub title
this._setUpEffect(); this._updateScrollState(scrollTop); this.disabled = savedDisabled; - }, 1); + }); }, _getElementTop: function() { diff --git a/lib/app-layout/app-box/demo/document-scroll.html b/lib/app-layout/app-box/demo/document-scroll.html index ddcc4897..4a67bf86 100644 --- a/lib/app-layout/app-box/demo/document-scroll.html +++ b/lib/app-layout/app-box/demo/document-scroll.html @@ -24,129 +24,131 @@ - +Built for Speed
In this case, we create a custom background by adding the attribute `background` to the `img` in the light DOM. --> -
+
diff --git a/lib/app-layout/app-box/demo/index.html b/lib/app-layout/app-box/demo/index.html
deleted file mode 100644
index 991839bc..00000000
--- a/lib/app-layout/app-box/demo/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/lib/app-layout/app-box/demo/scrolling-region.html b/lib/app-layout/app-box/demo/scrolling-region.html
index 1269d7e5..604e0808 100644
--- a/lib/app-layout/app-box/demo/scrolling-region.html
+++ b/lib/app-layout/app-box/demo/scrolling-region.html
@@ -24,140 +24,142 @@
-
+
-
- app-box demos
- -Built for Speed
In this case, we create a custom background by adding the attribute `background` to the `img` in the light DOM. --> -
+
diff --git a/lib/app-layout/app-drawer-layout/README.md b/lib/app-layout/app-drawer-layout/README.md
index d5ddb861..e5211b6d 100644
--- a/lib/app-layout/app-drawer-layout/README.md
+++ b/lib/app-layout/app-drawer-layout/README.md
@@ -1,4 +1,4 @@
-##<app-drawer-layout>
+## <app-drawer-layout>
app-drawer-layout is a wrapper element that positions an app-drawer and other content. When
the viewport width is smaller than `responsiveWidth`, this element changes to narrow layout.
@@ -10,7 +10,7 @@ By default the drawer is aligned to the start, which is left in LTR layouts:
```html
@@ -23,7 +23,7 @@ Align the drawer at the end:
```html
-
+
drawer content
@@ -36,11 +36,11 @@ With an app-header-layout:
```html
-
+
drawer-content
-
+
@@ -52,15 +52,15 @@ With an app-header-layout:
```
-Add the `drawer-toggle` attribute to elements inside `app-drawer-layout` that toggle the drawer on tap events:
+Add the `drawer-toggle` attribute to elements inside `app-drawer-layout` that toggle the drawer on click events:
```html
-
+
drawer-content
-
+
```
+**NOTE:** With app-layout 2.0, the `drawer-toggle` element will not be automatically hidden
+when app-drawer-layout is not in narrow layout. To add this, add the following CSS rule where
+app-drawer-layout is used:
+
+```css
+app-drawer-layout:not([narrow]) [drawer-toggle] {
+ display: none;
+}
+```
+
Add the `fullbleed` attribute to app-drawer-layout to make it fit the size of its container:
```html
-
+
drawer content
App name
App name
@@ -73,11 +73,21 @@ Add the `drawer-toggle` attribute to elements inside `app-drawer-layout` that to
@@ -90,4 +100,16 @@ Add the `fullbleed` attribute to app-drawer-layout to make it fit the size of it
Custom property | Description | Default
-----------------------------------------|--------------------------------------|---------
+`--app-drawer-width` | Width of the drawer | 256px
`--app-drawer-layout-content-transition` | Transition for the content container | none
+
+**NOTE:** If you use with and specify a value for
+`--app-drawer-width`, that value must be accessible by both elements. This can be done by
+defining the value on the `:host` that contains (or `html` if outside
+a shadow root):
+
+```css
+:host {
+ --app-drawer-width: 300px;
+}
+```
diff --git a/lib/app-layout/app-drawer-layout/app-drawer-layout.html b/lib/app-layout/app-drawer-layout/app-drawer-layout.html
index 6754b060..1f1a02f8 100644
--- a/lib/app-layout/app-drawer-layout/app-drawer-layout.html
+++ b/lib/app-layout/app-drawer-layout/app-drawer-layout.html
@@ -10,8 +10,7 @@
-
-
+
@@ -116,30 +136,44 @@
-
- app-drawer-layout demos
-
-
+
+
+ app-drawer-layout demo
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
diff --git a/lib/app-layout/app-drawer-layout/demo/simple-drawer.html b/lib/app-layout/app-drawer-layout/demo/simple-drawer.html
deleted file mode 100644
index eaf4b788..00000000
--- a/lib/app-layout/app-drawer-layout/demo/simple-drawer.html
+++ /dev/null
@@ -1,67 +0,0 @@
-
-
-
-
-
-
-
-
- app-drawer-layout demo
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/lib/app-layout/app-drawer-layout/demo/two-drawers.html b/lib/app-layout/app-drawer-layout/demo/two-drawers.html
deleted file mode 100644
index 52dd87df..00000000
--- a/lib/app-layout/app-drawer-layout/demo/two-drawers.html
+++ /dev/null
@@ -1,70 +0,0 @@
-
-
-
-
-
-
-
-
- app-drawer-layout demo
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/lib/app-layout/app-drawer-layout/test/app-drawer-layout.html b/lib/app-layout/app-drawer-layout/test/app-drawer-layout.html
index 381750ed..51064483 100644
--- a/lib/app-layout/app-drawer-layout/test/app-drawer-layout.html
+++ b/lib/app-layout/app-drawer-layout/test/app-drawer-layout.html
@@ -19,37 +19,25 @@
+
-
+
+
+
+
@@ -57,7 +45,7 @@
- Drawer
+ Drawer
with and specify a value for
+`--app-drawer-width`, that value must be accessible by both elements. This can be done by
+defining the value on the `:host` that contains (or `html` if outside
+a shadow root):
+
+```css
+:host {
+ --app-drawer-width: 300px;
+}
+```
diff --git a/lib/app-layout/app-drawer/app-drawer.html b/lib/app-layout/app-drawer/app-drawer.html
index 34e6cfee..b12f9354 100644
--- a/lib/app-layout/app-drawer/app-drawer.html
+++ b/lib/app-layout/app-drawer/app-drawer.html
@@ -45,6 +45,17 @@
`--app-drawer-content-container` | Mixin for the drawer content container | {}
`--app-drawer-scrim-background` | Background for the scrim | rgba(0, 0, 0, 0.5)
+**NOTE:** If you use with and specify a value for
+`--app-drawer-width`, that value must be accessible by both elements. This can be done by
+defining the value on the `:host` that contains (or `html` if outside
+a shadow root):
+
+```css
+:host {
+ --app-drawer-width: 300px;
+}
+```
+
@group App Elements
@element app-drawer
@demo app-drawer/demo/left-drawer.html Simple Left Drawer
@@ -98,14 +109,14 @@
background-color: #FFF;
- @apply(--app-drawer-content-container);
+ @apply --app-drawer-content-container;
}
- :host([persistent]) > #contentContainer {
+ #contentContainer[persistent] {
width: 100%;
}
- :host([position=right]) > #contentContainer {
+ #contentContainer[position=right] {
right: 0;
left: auto;
@@ -113,7 +124,7 @@
transform: translate3d(100%, 0, 0);
}
- :host([swipe-open]) > #contentContainer::after {
+ #contentContainer[swipe-open]::after {
position: fixed;
top: 0;
bottom: 0;
@@ -126,12 +137,12 @@
content: '';
}
- :host([swipe-open][position=right]) > #contentContainer::after {
+ #contentContainer[swipe-open][position=right]::after {
right: 100%;
left: auto;
}
- :host([opened]) > #contentContainer {
+ #contentContainer[opened] {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
@@ -151,25 +162,22 @@
background: var(--app-drawer-scrim-background, rgba(0, 0, 0, 0.5));
}
- :host([opened]) > #scrim {
+ #scrim.visible {
opacity: 1;
}
- :host([opened][persistent]) > #scrim {
- visibility: hidden;
- /**
- * NOTE(keanulee): Keep both opacity: 0 and visibility: hidden to prevent the
- * scrim from showing when toggling between closed and opened/persistent.
- */
-
- opacity: 0;
+ :host([no-transition]) #contentContainer {
+ transition-property: none;
}
-
+
-
-
+
+
-
+
+
+
-
- app-drawer-layout demos
-
- Simple Demo
- Two drawers
-
- Toggle
Content
- app-drawer demos
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/lib/app-layout/app-drawer/test/app-drawer.html b/lib/app-layout/app-drawer/test/app-drawer.html
index 48cdab4b..29c7b4ab 100644
--- a/lib/app-layout/app-drawer/test/app-drawer.html
+++ b/lib/app-layout/app-drawer/test/app-drawer.html
@@ -30,7 +30,11 @@
-
+
+
@@ -40,27 +44,6 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
+
@@ -271,11 +279,7 @@
_lastTabStop: null,
attached: function() {
- // Only transition the drawer after its first render (e.g. app-drawer-layout
- // may need to set the initial opened state which should not be transitioned).
- this._styleTransitionDuration(0);
Polymer.RenderStatus.afterNextRender(this, function() {
- this._styleTransitionDuration(this.transitionDuration);
this._boundEscKeydownHandler = this._escKeydownHandler.bind(this);
this.addEventListener('keydown', this._tabKeydownHandler.bind(this))
@@ -284,7 +288,7 @@
this.setScrollDirection('y');
});
- this.fire('app-drawer-attached');
+ this.fire('app-reset-layout');
},
detached: function() {
@@ -318,17 +322,7 @@
* @return {number} The width of the drawer in pixels.
*/
getWidth: function() {
- return this.$.contentContainer.offsetWidth;
- },
-
- /**
- * Resets the layout. The event fired is used by app-drawer-layout to position the
- * content.
- *
- * @method resetLayout
- */
- resetLayout: function() {
- this.fire('app-drawer-reset-layout');
+ return this._savedWidth || this.$.contentContainer.offsetWidth;
},
_isRTL: function() {
@@ -380,11 +374,8 @@
_trackStart: function(event) {
this._drawerState = this._DRAWER_STATE.TRACKING;
- // Disable transitions since style attributes will reflect user track events.
- this._styleTransitionDuration(0);
- this.style.visibility = 'visible';
-
var rect = this.$.contentContainer.getBoundingClientRect();
+ this._savedWidth = rect.width;
if (this.position === 'left') {
this._translateOffset = rect.left;
} else {
@@ -392,6 +383,10 @@
}
this._trackDetails = [];
+
+ // Disable transitions since style attributes will reflect user track events.
+ this._styleTransitionDuration(0);
+ this.style.visibility = 'visible';
},
_trackMove: function(event) {
@@ -555,6 +550,8 @@
this.style.visibility = '';
}
+ this._savedWidth = null;
+
if (this.opened) {
this._drawerState = this.persistent ?
this._DRAWER_STATE.OPENED_PERSISTENT : this._DRAWER_STATE.OPENED;
@@ -579,6 +576,15 @@
}
},
+ /**
+ * Resets the layout.
+ *
+ * @method resetLayout
+ */
+ resetLayout: function() {
+ this.fire('app-reset-layout');
+ },
+
_setKeyboardFocusTrap: function() {
if (this.noFocusTrap) {
return;
@@ -640,7 +646,9 @@
}
},
- _openedPersistentChanged: function() {
+ _openedPersistentChanged: function(opened, persistent) {
+ this.toggleClass('visible', opened && !persistent, this.$.scrim);
+
// Use a debounce timer instead of transitionend since transitionend won't fire when
// app-drawer is display: none.
this.debounce('_resetDrawerState', this._resetDrawerState, this.transitionDuration);
@@ -663,16 +671,10 @@
FLINGING: 5
}
- /**
- * Fired when the layout of app-drawer is attached.
- *
- * @event app-drawer-attached
- */
-
/**
* Fired when the layout of app-drawer has changed.
*
- * @event app-drawer-reset-layout
+ * @event app-reset-layout
*/
/**
diff --git a/lib/app-layout/app-drawer/demo/index.html b/lib/app-layout/app-drawer/demo/index.html
deleted file mode 100644
index dc3bd0ac..00000000
--- a/lib/app-layout/app-drawer/demo/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/lib/app-layout/app-drawer/demo/left-drawer.html b/lib/app-layout/app-drawer/demo/left-drawer.html
index 30d80c9e..3c80524d 100644
--- a/lib/app-layout/app-drawer/demo/left-drawer.html
+++ b/lib/app-layout/app-drawer/demo/left-drawer.html
@@ -25,28 +25,30 @@
-
+
+
@@ -61,7 +63,7 @@
diff --git a/lib/app-layout/app-drawer/demo/right-drawer.html b/lib/app-layout/app-drawer/demo/right-drawer.html
index 1872e210..0eca3c71 100644
--- a/lib/app-layout/app-drawer/demo/right-drawer.html
+++ b/lib/app-layout/app-drawer/demo/right-drawer.html
@@ -26,69 +26,80 @@
-
+
+
-
-
-
-
- app-drawer demos
- -
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Div
+ Not focusable
+ Div
- Not focusable
-