From e1cc0fb51da535909dfabe1fbafdc4a4f36675f7 Mon Sep 17 00:00:00 2001 From: FuriosoJack Date: Fri, 23 Mar 2018 08:59:52 -0500 Subject: [PATCH] Se alade app-layout --- bower.json | 2 +- lib/app-layout/.bower.json | 10 +- lib/app-layout/.github/CODEOWNERS | 2 + lib/app-layout/.gitignore | 1 + lib/app-layout/.travis.yml | 4 + lib/app-layout/README.md | 2 +- lib/app-layout/app-box/app-box.d.ts | 117 ++ .../app-drawer-layout/app-drawer-layout.d.ts | 168 +++ lib/app-layout/app-drawer/README.md | 4 +- lib/app-layout/app-drawer/app-drawer.d.ts | 163 +++ lib/app-layout/app-drawer/app-drawer.html | 4 +- lib/app-layout/app-grid/app-grid-style.d.ts | 120 ++ .../app-header-layout/app-header-layout.d.ts | 74 + .../test/app-header-layout.html | 3 + lib/app-layout/app-header/app-header.d.ts | 354 +++++ .../app-layout-behavior.d.ts | 32 + lib/app-layout/app-layout.d.ts | 19 + .../app-scroll-effects-behavior.d.ts | 256 ++++ .../app-scroll-effects-behavior.html | 3 +- .../app-scroll-effects.d.ts | 18 + .../effects/blend-background.d.ts | 12 + .../effects/fade-background.d.ts | 12 + .../app-scroll-effects/effects/material.d.ts | 16 + .../effects/parallax-background.d.ts | 12 + .../effects/resize-snapped-title.d.ts | 12 + .../effects/resize-title.d.ts | 12 + .../app-scroll-effects/effects/waterfall.d.ts | 12 + .../test/blend-background.html | 1 - .../app-scroll-effects/test/resize-title.html | 2 +- .../app-scroll-effects/test/utils.html | 2 +- lib/app-layout/app-toolbar/app-toolbar.d.ts | 62 + lib/app-layout/bower.json | 2 +- lib/app-layout/docs.d.ts | 14 + lib/app-layout/gen-tsd.json | 8 + lib/app-layout/helpers/helpers.d.ts | 17 + lib/app-layout/package-lock.json | 1196 +++++++++++++++++ lib/app-layout/package.json | 17 + .../patterns/expand-card/index.d.ts | 14 + .../patterns/md-responsive-toolbar/index.d.ts | 16 + .../patterns/transform-navigation/index.d.ts | 14 + .../patterns/transform-navigation/x-app.d.ts | 33 + .../templates/landing-page/x-app.html | 2 +- 42 files changed, 2827 insertions(+), 17 deletions(-) create mode 100644 lib/app-layout/.github/CODEOWNERS create mode 100644 lib/app-layout/app-box/app-box.d.ts create mode 100644 lib/app-layout/app-drawer-layout/app-drawer-layout.d.ts create mode 100644 lib/app-layout/app-drawer/app-drawer.d.ts create mode 100644 lib/app-layout/app-grid/app-grid-style.d.ts create mode 100644 lib/app-layout/app-header-layout/app-header-layout.d.ts create mode 100644 lib/app-layout/app-header/app-header.d.ts create mode 100644 lib/app-layout/app-layout-behavior/app-layout-behavior.d.ts create mode 100644 lib/app-layout/app-layout.d.ts create mode 100644 lib/app-layout/app-scroll-effects/app-scroll-effects-behavior.d.ts create mode 100644 lib/app-layout/app-scroll-effects/app-scroll-effects.d.ts create mode 100644 lib/app-layout/app-scroll-effects/effects/blend-background.d.ts create mode 100644 lib/app-layout/app-scroll-effects/effects/fade-background.d.ts create mode 100644 lib/app-layout/app-scroll-effects/effects/material.d.ts create mode 100644 lib/app-layout/app-scroll-effects/effects/parallax-background.d.ts create mode 100644 lib/app-layout/app-scroll-effects/effects/resize-snapped-title.d.ts create mode 100644 lib/app-layout/app-scroll-effects/effects/resize-title.d.ts create mode 100644 lib/app-layout/app-scroll-effects/effects/waterfall.d.ts create mode 100644 lib/app-layout/app-toolbar/app-toolbar.d.ts create mode 100644 lib/app-layout/docs.d.ts create mode 100644 lib/app-layout/gen-tsd.json create mode 100644 lib/app-layout/helpers/helpers.d.ts create mode 100644 lib/app-layout/package-lock.json create mode 100644 lib/app-layout/package.json create mode 100644 lib/app-layout/patterns/expand-card/index.d.ts create mode 100644 lib/app-layout/patterns/md-responsive-toolbar/index.d.ts create mode 100644 lib/app-layout/patterns/transform-navigation/index.d.ts create mode 100644 lib/app-layout/patterns/transform-navigation/x-app.d.ts diff --git a/bower.json b/bower.json index 2ba46387..eb01c2d6 100644 --- a/bower.json +++ b/bower.json @@ -21,7 +21,7 @@ "tests" ], "dependencies": { - "app-layout": "PolymerElements/app-layout#^2.0.4", + "app-layout": "PolymerElements/app-layout#^2.1.0", "app-localize-behavior": "PolymerElements/app-localize-behavior#^2.0.0", "app-pouchdb": "PolymerElements/app-pouchdb#^2.1.1", "app-route": "PolymerElements/app-route#^2.0.3", diff --git a/lib/app-layout/.bower.json b/lib/app-layout/.bower.json index b2d0887c..1abb0ccc 100644 --- a/lib/app-layout/.bower.json +++ b/lib/app-layout/.bower.json @@ -1,6 +1,6 @@ { "name": "app-layout", - "version": "2.0.4", + "version": "2.1.0", "description": "A set of layout elements for your app", "authors": [ "The Polymer Authors" @@ -65,13 +65,13 @@ "resolutions": { "webcomponentsjs": "^1.0.0" }, - "_release": "2.0.4", + "_release": "2.1.0", "_resolution": { "type": "version", - "tag": "v2.0.4", - "commit": "623997a76bea695a51de0d4e96e11a8198e367da" + "tag": "v2.1.0", + "commit": "934f0d1cd3a635f5d5e2ed07739f217fe9dfc8ec" }, "_source": "https://github.com/PolymerElements/app-layout.git", - "_target": "^2.0.4", + "_target": "1 - 2", "_originalSource": "PolymerElements/app-layout" } \ No newline at end of file diff --git a/lib/app-layout/.github/CODEOWNERS b/lib/app-layout/.github/CODEOWNERS new file mode 100644 index 00000000..b7cc03e4 --- /dev/null +++ b/lib/app-layout/.github/CODEOWNERS @@ -0,0 +1,2 @@ +* @keanulee @frankiefu +/.travis.yml @azakus diff --git a/lib/app-layout/.gitignore b/lib/app-layout/.gitignore index 2be39e49..678c29bf 100644 --- a/lib/app-layout/.gitignore +++ b/lib/app-layout/.gitignore @@ -1,2 +1,3 @@ bower_components* bower-*.json +node_modules diff --git a/lib/app-layout/.travis.yml b/lib/app-layout/.travis.yml index a8e88d57..21c523bc 100644 --- a/lib/app-layout/.travis.yml +++ b/lib/app-layout/.travis.yml @@ -13,6 +13,10 @@ addons: before_script: - npm install -g polymer-cli - polymer install --variants + - >- + npm run update-types && git diff --exit-code || (echo -e + '\n\033[31mERROR:\033[0m Typings are stale. Please run "npm run + update-types".' && false) script: - xvfb-run polymer test - >- diff --git a/lib/app-layout/README.md b/lib/app-layout/README.md index cd07604e..84d36d14 100644 --- a/lib/app-layout/README.md +++ b/lib/app-layout/README.md @@ -1,4 +1,4 @@ -# App Layout [![Build Status](https://travis-ci.org/PolymerElements/app-layout.svg?branch=master)](https://travis-ci.org/PolymerElements/app-layout) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/PolymerElements/app-layout) +# App Layout [![Build Status](https://travis-ci.org/PolymerElements/app-layout.svg?branch=master)](https://travis-ci.org/PolymerElements/app-layout) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/PolymerElements/app-layout) A collection of elements, along with guidelines and templates that can be used to structure your app’s layout. diff --git a/lib/app-layout/app-box/app-box.d.ts b/lib/app-layout/app-box/app-box.d.ts new file mode 100644 index 00000000..e9b42fb8 --- /dev/null +++ b/lib/app-layout/app-box/app-box.d.ts @@ -0,0 +1,117 @@ +/** + * DO NOT EDIT + * + * This file was automatically generated by + * https://github.com/Polymer/gen-typescript-declarations + * + * To modify these typings, edit the source file(s): + * app-box/app-box.html + */ + +/// +/// +/// +/// + +/** + * app-box is a container element that can have scroll effects - visual effects based on + * scroll position. For example, the parallax effect can be used to move an image at a slower + * rate than the foreground. + * + * ```html + * + * + * + * ``` + * + * Notice the `background` attribute in the `img` element; this attribute specifies that that + * image is used as the background. By adding the background to the light dom, you can compose + * backgrounds that can change dynamically. Alternatively, the mixin `--app-box-background-front-layer` + * allows to style the background. For example: + * + * ```css + * .parallaxAppBox { + * --app-box-background-front-layer: { + * background-image: url(picture.png); + * }; + * } + * ``` + * + * Finally, app-box can have content inside. For example: + * + * ```html + * + *

Sub title

+ * + * ``` + * + * #### Importing the effects + * + * To use the scroll effects, you must explicitly import them in addition to `app-box`: + * + * ```html + * + * ``` + * + * #### List of effects + * + * **parallax-background** + * A simple parallax effect that vertically translates the backgrounds based on a fraction + * of the scroll position. For example: + * + * ```css + * app-header { + * --app-header-background-front-layer: { + * background-image: url(...); + * }; + * } + * ``` + * ```html + * + * App name + * + * ``` + * + * The fraction determines how far the background moves relative to the scroll position. + * This value can be assigned via the `scalar` config value and it is typically a value + * between 0 and 1 inclusive. If `scalar=0`, the background doesn't move away from the header. + * + * ## Styling + * + * Mixin | Description | Default + * ----------------|-------------|---------- + * `--app-box-background-front-layer` | Applies to the front layer of the background | {} + */ +interface AppBoxElement extends Polymer.Element, Polymer.AppScrollEffectsBehavior, Polymer.IronResizableBehavior { + + /** + * The current scroll progress. + */ + _progress: number; + _updateScrollState(scrollTop: any): void; + + /** + * Returns true if this app-box is on the screen. + * That is, visible in the current viewport. + */ + isOnScreen(): boolean; + _getDOMRef(id: any): any; + attached(): void; + _debounceRaf(fn: any): void; + + /** + * Resets the layout. This method is automatically called when the element is attached to the DOM. + */ + resetLayout(): void; + _getElementTop(): any; + _resizeHandler(): void; + + /** + * Returns an object containing the progress value of the scroll effects. + */ + getScrollState(): object|null; +} + +interface HTMLElementTagNameMap { + "app-box": AppBoxElement; +} diff --git a/lib/app-layout/app-drawer-layout/app-drawer-layout.d.ts b/lib/app-layout/app-drawer-layout/app-drawer-layout.d.ts new file mode 100644 index 00000000..0dfc9b94 --- /dev/null +++ b/lib/app-layout/app-drawer-layout/app-drawer-layout.d.ts @@ -0,0 +1,168 @@ +/** + * DO NOT EDIT + * + * This file was automatically generated by + * https://github.com/Polymer/gen-typescript-declarations + * + * To modify these typings, edit the source file(s): + * app-drawer-layout/app-drawer-layout.html + */ + +/// +/// +/// + +/** + * 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. + * In narrow layout, the drawer will be stacked on top of the main content. The drawer will slide + * in/out to hide/reveal the main content. + * + * By default the drawer is aligned to the start, which is left in LTR layouts: + * + * ```html + * + * + * drawer content + * + *
+ * main content + *
+ * + * ``` + * + * Align the drawer at the end: + * + * ```html + * + * + * drawer content + * + *
+ * main content + *
+ * + * ``` + * + * With an app-header-layout: + * + * ```html + * + * + * drawer-content + * + * + * + * + *
App name
+ * + * + * + * main content + * + * + * + * ``` + * + * Add the `drawer-toggle` attribute to elements inside `app-drawer-layout` that toggle the drawer on click events: + * + * ```html + * + * + * drawer-content + * + * + * + * + * + *
App name
+ * + * + * + * main content + * + * + * + * ``` + * + * *NOTE:** With app-layout 2.0, the `drawer-toggle` element needs to be manually 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 + * + *
+ * main content + *
+ * + * ``` + * + * ### Styling + * + * 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; + * } + * ``` + */ +interface AppDrawerLayoutElement extends Polymer.Element, Polymer.AppLayoutBehavior { + + /** + * If true, ignore `responsiveWidth` setting and force the narrow layout. + */ + forceNarrow: boolean|null|undefined; + + /** + * If the viewport's width is smaller than this value, the panel will change to narrow + * layout. In the mode the drawer will be closed. + */ + responsiveWidth: string|null|undefined; + + /** + * Returns true if it is in narrow layout. This is useful if you need to show/hide + * elements based on the layout. + */ + readonly narrow: boolean|null|undefined; + + /** + * If true, the drawer will initially be opened when in narrow layout mode. + */ + openedWhenNarrow: boolean|null|undefined; + _drawerPosition: string|null|undefined; + + /** + * A reference to the app-drawer element. + */ + readonly drawer: any; + attached(): void; + _updateLayoutStates(): void; + _clickHandler(e: any): void; + _narrowChanged(): void; + _onQueryMatchesChanged(event: any): void; + _computeMediaQuery(forceNarrow: any, responsiveWidth: any): any; +} + +interface HTMLElementTagNameMap { + "app-drawer-layout": AppDrawerLayoutElement; +} diff --git a/lib/app-layout/app-drawer/README.md b/lib/app-layout/app-drawer/README.md index 73a00a4e..72218133 100644 --- a/lib/app-layout/app-drawer/README.md +++ b/lib/app-layout/app-drawer/README.md @@ -35,9 +35,9 @@ Custom property | Description | Defa `--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 +**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 +defining the value on the `:host` that contains `` (or `html` if outside a shadow root): ```css diff --git a/lib/app-layout/app-drawer/app-drawer.d.ts b/lib/app-layout/app-drawer/app-drawer.d.ts new file mode 100644 index 00000000..8debab80 --- /dev/null +++ b/lib/app-layout/app-drawer/app-drawer.d.ts @@ -0,0 +1,163 @@ +/** + * DO NOT EDIT + * + * This file was automatically generated by + * https://github.com/Polymer/gen-typescript-declarations + * + * To modify these typings, edit the source file(s): + * app-drawer/app-drawer.html + */ + +/// +/// + +/** + * app-drawer is a navigation drawer that can slide in from the left or right. + * + * Example: + * + * Align the drawer at the start, which is left in LTR layouts (default): + * + * ```html + * + * ``` + * + * Align the drawer at the end: + * + * ```html + * + * ``` + * + * To make the contents of the drawer scrollable, create a wrapper for the scroll + * content, and apply height and overflow styles to it. + * + * ```html + * + *
+ * + * ``` + * + * ### Styling + * + * Custom property | Description | Default + * ---------------------------------|----------------------------------------|-------------------- + * `--app-drawer-width` | Width of the drawer | 256px + * `--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; + * } + * ``` + */ +interface AppDrawerElement extends Polymer.Element { + + /** + * The opened state of the drawer. + */ + opened: boolean|null|undefined; + + /** + * The drawer does not have a scrim and cannot be swiped close. + */ + persistent: boolean|null|undefined; + + /** + * The transition duration of the drawer in milliseconds. + */ + transitionDuration: number|null|undefined; + + /** + * The alignment of the drawer on the screen ('left', 'right', 'start' or 'end'). + * 'start' computes to left and 'end' to right in LTR layout and vice versa in RTL + * layout. + */ + align: string|null|undefined; + + /** + * The computed, read-only position of the drawer on the screen ('left' or 'right'). + */ + readonly position: string|null|undefined; + + /** + * Create an area at the edge of the screen to swipe open the drawer. + */ + swipeOpen: boolean|null|undefined; + + /** + * Trap keyboard focus when the drawer is opened and not persistent. + */ + noFocusTrap: boolean|null|undefined; + + /** + * Disables swiping on the drawer. + */ + disableSwipe: boolean|null|undefined; + _translateOffset: number; + _trackDetails: null; + _drawerState: number; + _boundEscKeydownHandler: null; + _firstTabStop: null; + _lastTabStop: null; + _MIN_FLING_THRESHOLD: number; + _MIN_TRANSITION_VELOCITY: number; + _FLING_TIMING_FUNCTION: string; + _FLING_INITIAL_SLOPE: number; + _DRAWER_STATE: object|null; + attached(): void; + detached(): void; + + /** + * Opens the drawer. + */ + open(): void; + + /** + * Closes the drawer. + */ + close(): void; + + /** + * Toggles the drawer open and close. + */ + toggle(): void; + + /** + * Gets the width of the drawer. + * + * @returns The width of the drawer in pixels. + */ + getWidth(): number; + _isRTL(): any; + _resetPosition(): void; + _escKeydownHandler(event: any): void; + _track(event: any): void; + _trackStart(event: any): void; + _trackMove(event: any): void; + _trackEnd(event: any): void; + _calculateVelocity(event: any, trackDetails: any): any; + _flingDrawer(event: any, trackDetails: any): void; + _styleTransitionDuration(duration: any): void; + _styleTransitionTimingFunction(timingFunction: any): void; + _translateDrawer(x: any): void; + _resetDrawerTranslate(): void; + _resetDrawerState(): void; + + /** + * Resets the layout. + */ + resetLayout(): void; + _setKeyboardFocusTrap(): void; + _tabKeydownHandler(event: any): void; + _openedPersistentChanged(opened: any, persistent: any): void; +} + +interface HTMLElementTagNameMap { + "app-drawer": AppDrawerElement; +} diff --git a/lib/app-layout/app-drawer/app-drawer.html b/lib/app-layout/app-drawer/app-drawer.html index b12f9354..c759f9db 100644 --- a/lib/app-layout/app-drawer/app-drawer.html +++ b/lib/app-layout/app-drawer/app-drawer.html @@ -45,9 +45,9 @@ `--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 +**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 +defining the value on the `:host` that contains `` (or `html` if outside a shadow root): ```css diff --git a/lib/app-layout/app-grid/app-grid-style.d.ts b/lib/app-layout/app-grid/app-grid-style.d.ts new file mode 100644 index 00000000..79ea6b80 --- /dev/null +++ b/lib/app-layout/app-grid/app-grid-style.d.ts @@ -0,0 +1,120 @@ +/** + * DO NOT EDIT + * + * This file was automatically generated by + * https://github.com/Polymer/gen-typescript-declarations + * + * To modify these typings, edit the source file(s): + * app-grid/app-grid-style.html + */ + +/// + +/** + * app-grid is a helper class useful for creating responsive, fluid grid layouts using custom properties. + * Because custom properties can be defined inside a `@media` rule, you can customize the grid layout + * for different responsive breakpoints. + * + * Example: + * + * Import `app-grid-style.html` and include `app-grid-style` in the style of an element's definition. + * Then, add the class `app-grid` to a container such as `ul` or `div`: + * + * ```html + * + * ``` + * In the example above, the grid will take 3 columns per row. + * + * ### Expandible items + * + * In many cases, it's useful to expand an item more than 1 column. To achieve this type of layout, + * you can specify the number of columns the item should expand to by setting the custom property + * `--app-grid-expandible-item-columns`. To indicate which item should expand, apply the mixin + * `--app-grid-expandible-item` to a rule with a selector to the item. For example: + * + * 

+ * <template>
+ *   <style include="app-grid-style">
+ *     :host {
+ *       --app-grid-columns: 3;
+ *       --app-grid-item-height: 100px;
+ *       --app-grid-expandible-item-columns: 3;
+ *     }
+ *
+ *     /* Only the first item should expand *\/
+ *     .item:first-child {
+ *       @apply --app-grid-expandible-item;
+ *     }
+ *   </style>
+ * </template>
+ *
+ * + * ### Preserving the aspect ratio + * + * When the size of a grid item should preserve the aspect ratio, you can add the `has-aspect-ratio` + * attribute to the element with the class `.app-grid`. Now, every item element becomes a wrapper around + * the item content. For example: + * + * ```html + * + * ``` + * + * ### Styling + * + * Custom property | Description | Default + * ----------------------------------------------|------------------------------------------------------------|------------------ + * `--app-grid-columns` | The number of columns per row. | 1 + * `--app-grid-gutter` | The space between two items. | 0px + * `--app-grid-item-height` | The height of the items. | auto + * `--app-grid-expandible-item-columns` | The number of columns an expandible item should expand to. | 1 + */ +interface AppGridElement extends Polymer.Element { +} + +interface HTMLElementTagNameMap { + "app-grid": AppGridElement; +} diff --git a/lib/app-layout/app-header-layout/app-header-layout.d.ts b/lib/app-layout/app-header-layout/app-header-layout.d.ts new file mode 100644 index 00000000..0f598c30 --- /dev/null +++ b/lib/app-layout/app-header-layout/app-header-layout.d.ts @@ -0,0 +1,74 @@ +/** + * DO NOT EDIT + * + * This file was automatically generated by + * https://github.com/Polymer/gen-typescript-declarations + * + * To modify these typings, edit the source file(s): + * app-header-layout/app-header-layout.html + */ + +/// +/// +/// + +/** + * app-header-layout is a wrapper element that positions an app-header and other content. This + * element uses the document scroll by default, but it can also define its own scrolling region. + * + * Using the document scroll: + * + * ```html + * + * + * + *
App name
+ * + * + *
+ * main content + *
+ * + * ``` + * + * Using an own scrolling region: + * + * ```html + * + * + * + *
App name
+ * + * + *
+ * main content + *
+ * + * ``` + * + * Add the `fullbleed` attribute to app-header-layout to make it fit the size of its container: + * + * ```html + * + * ... + * + * ``` + */ +interface AppHeaderLayoutElement extends Polymer.Element, Polymer.AppLayoutBehavior { + + /** + * If true, the current element will have its own scrolling region. + * Otherwise, it will use the document scroll to control the header. + */ + hasScrollingRegion: boolean|null|undefined; + + /** + * A reference to the app-header element. + */ + readonly header: any; + _updateLayoutStates(): void; +} + +interface HTMLElementTagNameMap { + "app-header-layout": AppHeaderLayoutElement; +} diff --git a/lib/app-layout/app-header-layout/test/app-header-layout.html b/lib/app-layout/app-header-layout/test/app-header-layout.html index 8d46d382..70bc38ab 100644 --- a/lib/app-layout/app-header-layout/test/app-header-layout.html +++ b/lib/app-layout/app-header-layout/test/app-header-layout.html @@ -82,6 +82,7 @@ test('scrolling region', function(done) { headerLayout.hasScrollingRegion = true; + Polymer.dom.flush(); flush(function() { assert.isTrue(header.scrollTarget !== document.documentElement, 'scroller should not point to the document element'); @@ -100,6 +101,7 @@ headerLayout.style.width = '200px'; headerLayout.resetLayout(); + Polymer.dom.flush(); flush(function() { requestAnimationFrame(function() { @@ -121,6 +123,7 @@ test('initial static position header and content', function(done) { assert.isTrue(headerLayout.$.wrapper.classList.contains('initializing')); + Polymer.dom.flush(); flush(function() { assert.isFalse(headerLayout.$.wrapper.classList.contains('initializing')); done(); diff --git a/lib/app-layout/app-header/app-header.d.ts b/lib/app-layout/app-header/app-header.d.ts new file mode 100644 index 00000000..fa738785 --- /dev/null +++ b/lib/app-layout/app-header/app-header.d.ts @@ -0,0 +1,354 @@ +/** + * DO NOT EDIT + * + * This file was automatically generated by + * https://github.com/Polymer/gen-typescript-declarations + * + * To modify these typings, edit the source file(s): + * app-header/app-header.html + */ + +/// +/// +/// +/// + +/** + * app-header is container element for app-toolbars at the top of the screen that can have scroll + * effects. By default, an app-header moves away from the viewport when scrolling down and + * if using `reveals`, the header slides back when scrolling back up. For example: + * + * ```html + * + * + *
App name
+ * + * + * ``` + * + * app-header can also condense when scrolling down. To achieve this behavior, the header + * must have a larger height than the `sticky` element in the light DOM. For example: + * + * ```html + * + * + *
App name
+ * + * + * ``` + * + * In this case the header is initially `96px` tall, and it shrinks to `64px` when scrolling down. + * That is what is meant by "condensing". + * + * ### Sticky element + * + * The element that is positioned fixed to top of the header's `scrollTarget` when a threshold + * is reached, similar to `position: sticky` in CSS. This element **must** be an immediate + * child of app-header. By default, the `sticky` element is the first `app-toolbar that + * is an immediate child of app-header. + * + * ```html + * + * Sticky element + * + * ``` + * + * #### Customizing the sticky element + * + * ```html + * + * + * Sticky element + * + * ``` + * + * ### Scroll target + * + * The app-header's `scrollTarget` property allows to customize the scrollable element to which + * the header responds when the user scrolls. By default, app-header uses the document as + * the scroll target, but you can customize this property by setting the id of the element, e.g. + * + * ```html + *
+ * + * + *
+ * ``` + * + * In this case, the `scrollTarget` property points to the outer div element. Alternatively, + * you can set this property programmatically: + * + * ```js + * appHeader.scrollTarget = document.querySelector("#scrollingRegion"); + * ``` + * + * ## Backgrounds + * app-header has two background layers that can be used for styling when the header is condensed + * or when the scrollable element is scrolled to the top. + * + * ## Scroll effects + * + * Scroll effects are _optional_ visual effects applied in app-header based on scroll position. For example, + * The [Material Design scrolling techniques](https://www.google.com/design/spec/patterns/scrolling-techniques.html) + * recommends effects that can be installed via the `effects` property. e.g. + * + * ```html + * + * App name + * + * ``` + * + * #### Importing the effects + * + * To use the scroll effects, you must explicitly import them in addition to `app-header`: + * + * ```html + * + * ``` + * + * #### List of effects + * + * **blend-background** + * Fades in/out two background elements by applying CSS opacity based on scroll position. + * You can use this effect to smoothly change the background color or image of the header. + * For example, using the mixin `--app-header-background-rear-layer` lets you assign a different + * background when the header is condensed: + * + * ```css + * app-header { + * background-color: red; + * --app-header-background-rear-layer: { + * /* The header is blue when condensed *\/ + * background-color: blue; + * }; + * } + * ``` + * + * **fade-background** + * Upon scrolling past a threshold, this effect will trigger an opacity transition to + * fade in/out the backgrounds. Compared to the `blend-background` effect, + * this effect doesn't interpolate the opacity based on scroll position. + * + * + * **parallax-background** + * A simple parallax effect that vertically translates the backgrounds based on a fraction + * of the scroll position. For example: + * + * ```css + * app-header { + * --app-header-background-front-layer: { + * background-image: url(...); + * }; + * } + * ``` + * ```html + * + * App name + * + * ``` + * + * The fraction determines how far the background moves relative to the scroll position. + * This value can be assigned via the `scalar` config value and it is typically a value + * between 0 and 1 inclusive. If `scalar=0`, the background doesn't move away from the header. + * + * **resize-title** + * Progressively interpolates the size of the title from the element with the `main-title` attribute + * to the element with the `condensed-title` attribute as the header condenses. For example: + * + * ```html + * + * + *

App name

+ * + * + *

App name

+ * + * + * ``` + * + * **resize-snapped-title** + * Upon scrolling past a threshold, this effect fades in/out the titles using opacity transitions. + * Similarly to `resize-title`, the `main-title` and `condensed-title` elements must be placed in the + * light DOM. + * + * **waterfall** + * Toggles the shadow property in app-header to create a sense of depth (as recommended in the + * MD spec) between the header and the underneath content. You can change the shadow by + * customizing the `--app-header-shadow` mixin. For example: + * + * ```css + * app-header { + * --app-header-shadow: { + * box-shadow: inset 0px 5px 2px -3px rgba(0, 0, 0, 0.2); + * }; + * } + * ``` + * + * ```html + * + * + *

App name

+ * + * + * ``` + * + * **material** + * Installs the waterfall, resize-title, blend-background and parallax-background effects. + * + * ### Content attributes + * + * Attribute | Description | Default + * ----------|---------------------|---------------------------------------- + * `sticky` | Element that remains at the top when the header condenses. | The first app-toolbar in the light DOM. + * + * + * ## Styling + * + * Mixin | Description | Default + * ------|-------------|---------- + * `--app-header-background-front-layer` | Applies to the front layer of the background. | {} + * `--app-header-background-rear-layer` | Applies to the rear layer of the background. | {} + * `--app-header-shadow` | Applies to the shadow. | {} + */ +interface AppHeaderElement extends Polymer.Element, Polymer.AppScrollEffectsBehavior, Polymer.AppLayoutBehavior { + + /** + * If true, the header will automatically collapse when scrolling down. + * That is, the `sticky` element remains visible when the header is fully condensed + * whereas the rest of the elements will collapse below `sticky` element. + * + * By default, the `sticky` element is the first toolbar in the light DOM: + * + * ```html + * + * This toolbar remains on top + * + * + * + * ``` + * + * Additionally, you can specify which toolbar or element remains visible in condensed mode + * by adding the `sticky` attribute to that element. For example: if we want the last + * toolbar to remain visible, we can add the `sticky` attribute to it. + * + * ```html + * + * + * + * This toolbar remains on top + * + * ``` + * + * Note the `sticky` element must be a direct child of `app-header`. + */ + condenses: boolean|null|undefined; + + /** + * Mantains the header fixed at the top so it never moves away. + */ + fixed: boolean|null|undefined; + + /** + * Slides back the header when scrolling back up. + */ + reveals: boolean|null|undefined; + + /** + * Displays a shadow below the header. + */ + shadow: boolean|null|undefined; + + /** + * A cached offsetHeight of the current element. + */ + _height: number; + + /** + * The distance in pixels the header will be translated to when scrolling. + */ + _dHeight: number; + + /** + * The offsetTop of `_stickyEl` + */ + _stickyElTop: number; + + /** + * A reference to the element that remains visible when the header condenses. + */ + _stickyElRef: HTMLElement|null; + + /** + * The header's top value used for the `transformY` + */ + _top: number; + + /** + * The current scroll progress. + */ + _progress: number; + _wasScrollingDown: boolean; + _initScrollTop: number; + _initTimestamp: number; + _lastTimestamp: number; + _lastScrollTop: number; + + /** + * The distance the header is allowed to move away. + */ + readonly _maxHeaderTop: any; + + /** + * Returns a reference to the sticky element. + */ + readonly _stickyEl: HTMLElement|null; + + /** + * Updates the scroll state. + * + * @param forceUpdate (default: false) + */ + _updateScrollState(scrollTop: number, forceUpdate?: boolean): void; + + /** + * Returns true if the current element is on the screen. + * That is, visible in the current viewport. + */ + isOnScreen(): boolean; + + /** + * Returns true if there's content below the current element. + */ + isContentBelow(): boolean; + _getDOMRef(id: any): any; + _updateLayoutStates(): void; + _configChanged(): void; + + /** + * Returns true if the current header is allowed to move as the user scrolls. + */ + _mayMove(): boolean; + + /** + * Returns true if the current header will condense based on the size of the header + * and the `consenses` property. + */ + willCondense(): boolean; + + /** + * Transforms the header. + */ + _transformHeader(y: number): void; + _clamp(v: any, min: any, max: any): any; + _ensureBgContainers(): void; + + /** + * Returns an object containing the progress value of the scroll effects + * and the top position of the header. + */ + getScrollState(): object|null; +} + +interface HTMLElementTagNameMap { + "app-header": AppHeaderElement; +} diff --git a/lib/app-layout/app-layout-behavior/app-layout-behavior.d.ts b/lib/app-layout/app-layout-behavior/app-layout-behavior.d.ts new file mode 100644 index 00000000..b20340ae --- /dev/null +++ b/lib/app-layout/app-layout-behavior/app-layout-behavior.d.ts @@ -0,0 +1,32 @@ +/** + * DO NOT EDIT + * + * This file was automatically generated by + * https://github.com/Polymer/gen-typescript-declarations + * + * To modify these typings, edit the source file(s): + * app-layout-behavior/app-layout-behavior.html + */ + +/// +/// + +declare namespace Polymer { + + interface AppLayoutBehavior extends Polymer.IronResizableBehavior { + attached(): void; + _appResetLayoutHandler(e: any): void; + _updateLayoutStates(): void; + + /** + * Resets the layout. If you changed the size of this element via CSS + * you can notify the changes by either firing the `iron-resize` event + * or calling `resetLayout` directly. + */ + resetLayout(): void; + _notifyLayoutChanged(): void; + _notifyDescendantResize(): void; + } + + const AppLayoutBehavior: object; +} diff --git a/lib/app-layout/app-layout.d.ts b/lib/app-layout/app-layout.d.ts new file mode 100644 index 00000000..b1e0a642 --- /dev/null +++ b/lib/app-layout/app-layout.d.ts @@ -0,0 +1,19 @@ +/** + * DO NOT EDIT + * + * This file was automatically generated by + * https://github.com/Polymer/gen-typescript-declarations + * + * To modify these typings, edit the source file(s): + * app-layout.html + */ + +/// +/// +/// +/// +/// +/// +/// +/// + diff --git a/lib/app-layout/app-scroll-effects/app-scroll-effects-behavior.d.ts b/lib/app-layout/app-scroll-effects/app-scroll-effects-behavior.d.ts new file mode 100644 index 00000000..aa1f13eb --- /dev/null +++ b/lib/app-layout/app-scroll-effects/app-scroll-effects-behavior.d.ts @@ -0,0 +1,256 @@ +/** + * DO NOT EDIT + * + * This file was automatically generated by + * https://github.com/Polymer/gen-typescript-declarations + * + * To modify these typings, edit the source file(s): + * app-scroll-effects/app-scroll-effects-behavior.html + */ + +/// +/// +/// + +declare namespace Polymer { + + /** + * `Polymer.AppScrollEffectsBehavior` provides an interface that allows an element to use scrolls effects. + * + * ### Importing the app-layout effects + * + * app-layout provides a set of scroll effects that can be used by explicitly importing + * `app-scroll-effects.html`: + * + * ```html + * + * ``` + * + * The scroll effects can also be used by individually importing + * `app-layout/app-scroll-effects/effects/[effectName].html`. For example: + * + * ```html + * + * ``` + * + * ### Consuming effects + * + * Effects can be consumed via the `effects` property. For example: + * + * ```html + * + * ``` + * + * ### Creating scroll effects + * + * You may want to create a custom scroll effect if you need to modify the CSS of an element + * based on the scroll position. + * + * A scroll effect definition is an object with `setUp()`, `tearDown()` and `run()` functions. + * + * To register the effect, you can use `Polymer.AppLayout.registerEffect(effectName, effectDef)` + * For example, let's define an effect that resizes the header's logo: + * + * ```js + * Polymer.AppLayout.registerEffect('resizable-logo', { + * setUp: function(config) { + * // the effect's config is passed to the setUp. + * this._fxResizeLogo = { logo: Polymer.dom(this).querySelector('[logo]') }; + * }, + * + * run: function(progress) { + * // the progress of the effect + * this.transform('scale3d(' + progress + ', '+ progress +', 1)', this._fxResizeLogo.logo); + * }, + * + * tearDown: function() { + * // clean up and reset of states + * delete this._fxResizeLogo; + * } + * }); + * ``` + * Now, you can consume the effect: + * + * ```html + * + * + * + * ``` + * + * ### Imperative API + * + * ```js + * var logoEffect = appHeader.createEffect('resizable-logo', effectConfig); + * // run the effect: logoEffect.run(progress); + * // tear down the effect: logoEffect.tearDown(); + * ``` + * + * ### Configuring effects + * + * For effects installed via the `effects` property, their configuration can be set + * via the `effectsConfig` property. For example: + * + * ```html + * + * + * ``` + * + * All effects have a `startsAt` and `endsAt` config property. They specify at what + * point the effect should start and end. This value goes from 0 to 1 inclusive. + */ + interface AppScrollEffectsBehavior extends Polymer.IronScrollTargetBehavior { + + /** + * A space-separated list of the effects names that will be triggered when the user scrolls. + * e.g. `waterfall parallax-background` installs the `waterfall` and `parallax-background`. + */ + effects: string|null|undefined; + + /** + * An object that configurates the effects installed via the `effects` property. e.g. + * ```js + * element.effectsConfig = { + * "blend-background": { + * "startsAt": 0.5 + * } + * }; + * ``` + * Every effect has at least two config properties: `startsAt` and `endsAt`. + * These properties indicate when the event should start and end respectively + * and relative to the overall element progress. So for example, if `blend-background` + * starts at `0.5`, the effect will only start once the current element reaches 0.5 + * of its progress. In this context, the progress is a value in the range of `[0, 1]` + * that indicates where this element is on the screen relative to the viewport. + */ + effectsConfig: object|null|undefined; + + /** + * Disables CSS transitions and scroll effects on the element. + */ + disabled: boolean|null|undefined; + + /** + * Allows to set a `scrollTop` threshold. When greater than 0, `thresholdTriggered` + * is true only when the scroll target's `scrollTop` has reached this value. + * + * For example, if `threshold = 100`, `thresholdTriggered` is true when the `scrollTop` + * is at least `100`. + */ + threshold: number|null|undefined; + + /** + * True if the `scrollTop` threshold (set in `scrollTopThreshold`) has + * been reached. + */ + readonly thresholdTriggered: boolean|null|undefined; + + /** + * List of effects handlers that will take place during scroll. + */ + _effectsRunFn: Array|null; + + /** + * List of the effects definitions installed via the `effects` property. + */ + _effects: Array|null; + + /** + * The clamped value of `_scrollTop`. + */ + readonly _clampedScrollTop: any; + + /** + * Overrides the `_scrollHandler`. + */ + _scrollHandler(): void; + + /** + * Updates the scroll state. This method should be overridden + * by the consumer of this behavior. + */ + _updateScrollState(scrollTop: number): void; + + /** + * Returns true if the current element is on the screen. + * That is, visible in the current viewport. This method should be + * overridden by the consumer of this behavior. + */ + isOnScreen(): boolean; + + /** + * Returns true if there's content below the current element. This method + * should be overridden by the consumer of this behavior. + */ + isContentBelow(): boolean; + detached(): void; + + /** + * Creates an effect object from an effect's name that can be used to run + * effects programmatically. + * + * @param effectName The effect's name registered via `Polymer.AppLayout.registerEffect`. + * @param effectConfig The effect config object. (Optional) + * @returns An effect object with the following functions: + * + * * `effect.setUp()`, Sets up the requirements for the effect. + * This function is called automatically before the `effect` function returns. + * * `effect.run(progress, y)`, Runs the effect given a `progress`. + * * `effect.tearDown()`, Cleans up any DOM nodes or element references used by the effect. + * + * Example: + * ```js + * var parallax = element.createEffect('parallax-background'); + * // runs the effect + * parallax.run(0.5, 0); + * ``` + */ + createEffect(effectName: string, effectConfig?: object|null): object|null; + + /** + * Called when `effects` or `effectsConfig` changes. + */ + _effectsChanged(effects: any, effectsConfig: any, isAttached: any): void; + + /** + * Forces layout + */ + _layoutIfDirty(): any; + + /** + * Returns an effect object bound to the current context. + * + * @param effectsConfig The effect config object if the effect accepts config values. (Optional) + */ + _boundEffect(effectDef: object|null, effectsConfig?: object|null): any; + + /** + * Sets up the effects. + */ + _setUpEffect(): void; + + /** + * Tears down the effects. + */ + _tearDownEffects(): void; + + /** + * Runs the effects. + * + * @param p The progress + * @param y The top position of the current element relative to the viewport. + */ + _runEffects(p: number, y: number): void; + + /** + * Override this method to return a reference to a node in the local DOM. + * The node is consumed by a scroll effect. + * + * @param id The id for the node. + */ + _getDOMRef(id: string): void; + _getUndefinedMsg(effectName: any): any; + } + + const AppScrollEffectsBehavior: object; +} diff --git a/lib/app-layout/app-scroll-effects/app-scroll-effects-behavior.html b/lib/app-layout/app-scroll-effects/app-scroll-effects-behavior.html index 96228908..3f46bfb7 100644 --- a/lib/app-layout/app-scroll-effects/app-scroll-effects-behavior.html +++ b/lib/app-layout/app-scroll-effects/app-scroll-effects-behavior.html @@ -179,8 +179,9 @@ * by the consumer of this behavior. * * @method _updateScrollState + * @param {number} scrollTop */ - _updateScrollState: function() {}, + _updateScrollState: function(scrollTop) {}, /** * Returns true if the current element is on the screen. diff --git a/lib/app-layout/app-scroll-effects/app-scroll-effects.d.ts b/lib/app-layout/app-scroll-effects/app-scroll-effects.d.ts new file mode 100644 index 00000000..2d293163 --- /dev/null +++ b/lib/app-layout/app-scroll-effects/app-scroll-effects.d.ts @@ -0,0 +1,18 @@ +/** + * DO NOT EDIT + * + * This file was automatically generated by + * https://github.com/Polymer/gen-typescript-declarations + * + * To modify these typings, edit the source file(s): + * app-scroll-effects/app-scroll-effects.html + */ + +/// +/// +/// +/// +/// +/// +/// + diff --git a/lib/app-layout/app-scroll-effects/effects/blend-background.d.ts b/lib/app-layout/app-scroll-effects/effects/blend-background.d.ts new file mode 100644 index 00000000..9443adb6 --- /dev/null +++ b/lib/app-layout/app-scroll-effects/effects/blend-background.d.ts @@ -0,0 +1,12 @@ +/** + * DO NOT EDIT + * + * This file was automatically generated by + * https://github.com/Polymer/gen-typescript-declarations + * + * To modify these typings, edit the source file(s): + * app-scroll-effects/effects/blend-background.html + */ + +/// + diff --git a/lib/app-layout/app-scroll-effects/effects/fade-background.d.ts b/lib/app-layout/app-scroll-effects/effects/fade-background.d.ts new file mode 100644 index 00000000..7b59f041 --- /dev/null +++ b/lib/app-layout/app-scroll-effects/effects/fade-background.d.ts @@ -0,0 +1,12 @@ +/** + * DO NOT EDIT + * + * This file was automatically generated by + * https://github.com/Polymer/gen-typescript-declarations + * + * To modify these typings, edit the source file(s): + * app-scroll-effects/effects/fade-background.html + */ + +/// + diff --git a/lib/app-layout/app-scroll-effects/effects/material.d.ts b/lib/app-layout/app-scroll-effects/effects/material.d.ts new file mode 100644 index 00000000..33208370 --- /dev/null +++ b/lib/app-layout/app-scroll-effects/effects/material.d.ts @@ -0,0 +1,16 @@ +/** + * DO NOT EDIT + * + * This file was automatically generated by + * https://github.com/Polymer/gen-typescript-declarations + * + * To modify these typings, edit the source file(s): + * app-scroll-effects/effects/material.html + */ + +/// +/// +/// +/// +/// + diff --git a/lib/app-layout/app-scroll-effects/effects/parallax-background.d.ts b/lib/app-layout/app-scroll-effects/effects/parallax-background.d.ts new file mode 100644 index 00000000..a6060106 --- /dev/null +++ b/lib/app-layout/app-scroll-effects/effects/parallax-background.d.ts @@ -0,0 +1,12 @@ +/** + * DO NOT EDIT + * + * This file was automatically generated by + * https://github.com/Polymer/gen-typescript-declarations + * + * To modify these typings, edit the source file(s): + * app-scroll-effects/effects/parallax-background.html + */ + +/// + diff --git a/lib/app-layout/app-scroll-effects/effects/resize-snapped-title.d.ts b/lib/app-layout/app-scroll-effects/effects/resize-snapped-title.d.ts new file mode 100644 index 00000000..07f8febc --- /dev/null +++ b/lib/app-layout/app-scroll-effects/effects/resize-snapped-title.d.ts @@ -0,0 +1,12 @@ +/** + * DO NOT EDIT + * + * This file was automatically generated by + * https://github.com/Polymer/gen-typescript-declarations + * + * To modify these typings, edit the source file(s): + * app-scroll-effects/effects/resize-snapped-title.html + */ + +/// + diff --git a/lib/app-layout/app-scroll-effects/effects/resize-title.d.ts b/lib/app-layout/app-scroll-effects/effects/resize-title.d.ts new file mode 100644 index 00000000..bb9871bc --- /dev/null +++ b/lib/app-layout/app-scroll-effects/effects/resize-title.d.ts @@ -0,0 +1,12 @@ +/** + * DO NOT EDIT + * + * This file was automatically generated by + * https://github.com/Polymer/gen-typescript-declarations + * + * To modify these typings, edit the source file(s): + * app-scroll-effects/effects/resize-title.html + */ + +/// + diff --git a/lib/app-layout/app-scroll-effects/effects/waterfall.d.ts b/lib/app-layout/app-scroll-effects/effects/waterfall.d.ts new file mode 100644 index 00000000..b424ab99 --- /dev/null +++ b/lib/app-layout/app-scroll-effects/effects/waterfall.d.ts @@ -0,0 +1,12 @@ +/** + * DO NOT EDIT + * + * This file was automatically generated by + * https://github.com/Polymer/gen-typescript-declarations + * + * To modify these typings, edit the source file(s): + * app-scroll-effects/effects/waterfall.html + */ + +/// + diff --git a/lib/app-layout/app-scroll-effects/test/blend-background.html b/lib/app-layout/app-scroll-effects/test/blend-background.html index 3ce462a5..74a96c40 100644 --- a/lib/app-layout/app-scroll-effects/test/blend-background.html +++ b/lib/app-layout/app-scroll-effects/test/blend-background.html @@ -48,7 +48,6 @@