├── .github ├── CODEOWNERS └── ISSUE_TEMPLATE.md ├── .gitignore ├── .npmignore ├── .travis.yml ├── CONTRIBUTING.md ├── README.md ├── app-box ├── README.md ├── app-box.js └── demo │ ├── document-scroll.html │ ├── index.html │ └── scrolling-region.html ├── app-drawer-layout ├── README.md ├── app-drawer-layout.js ├── demo │ └── index.html └── test │ ├── app-drawer-layout.html │ └── index.html ├── app-drawer ├── README.md ├── app-drawer.js ├── demo │ ├── index.html │ ├── left-drawer.html │ └── right-drawer.html └── test │ ├── app-drawer.html │ └── index.html ├── app-grid ├── README.md ├── app-grid-style.js ├── demo │ ├── aspect-ratio.html │ ├── flickr-grid-layout.html │ ├── index.html │ ├── md-grid-layout.html │ └── simple-responsive-grid.html └── test │ ├── app-grid-1.html │ ├── app-grid-2.html │ ├── app-grid-3.html │ └── index.html ├── app-header-layout ├── README.md ├── app-header-layout.js ├── demo │ ├── footer.html │ ├── index.html │ ├── music.html │ ├── scrolling-region.html │ └── simple.html └── test │ ├── app-header-layout.html │ └── index.html ├── app-header ├── README.md ├── app-header.js ├── demo │ ├── blend-background-1.html │ ├── blend-background-2.html │ ├── blend-background-3.html │ ├── contacts.html │ ├── custom-sticky-element-1.html │ ├── custom-sticky-element-2.html │ ├── give.html │ ├── index.html │ ├── music.html │ ├── no-effects.html │ └── notes.html └── test │ ├── app-header.html │ └── index.html ├── app-layout-behavior └── app-layout-behavior.js ├── app-layout.js ├── app-scroll-effects ├── README.md ├── app-scroll-effects-behavior.js ├── app-scroll-effects.js ├── effects │ ├── blend-background.js │ ├── fade-background.js │ ├── material.js │ ├── parallax-background.js │ ├── resize-snapped-title.js │ ├── resize-title.js │ └── waterfall.js └── test │ ├── app-scroll-effects-behavior.html │ ├── blend-background.html │ ├── fade-background.html │ ├── index.html │ ├── parallax-background.html │ ├── resize-snapped-title.html │ ├── resize-title.html │ ├── utils.js │ ├── waterfall.html │ └── x-container.js ├── app-toolbar ├── README.md ├── app-toolbar.js ├── demo │ └── index.html └── test │ ├── app-toolbar.html │ └── index.html ├── bower.json ├── demo ├── contacts.json ├── demo1.html ├── demo2.html ├── demo3.html ├── demo4.html ├── demo5.html ├── demo6.html ├── demo7.html ├── index.html └── sample-content.js ├── formatconfig.json ├── gen-tsd.json ├── helpers ├── helpers.js └── test │ ├── index.html │ ├── register-effect.html │ └── scroll.html ├── manifest.json ├── package-lock.json ├── package.json ├── patterns ├── expand-card │ └── index.html ├── md-responsive-toolbar │ └── index.html └── transform-navigation │ ├── index.html │ └── x-app.js ├── templates ├── getting-started │ ├── index.html │ ├── package.json │ └── x-app.js ├── landing-page │ ├── index.html │ ├── package.json │ └── x-app.js ├── pesto │ ├── data │ │ └── recipes.json │ ├── index.html │ ├── manifest.json │ ├── package.json │ └── src │ │ ├── app-icons.js │ │ ├── recipe-app.js │ │ ├── recipe-detail.js │ │ └── recipe-list.js ├── publishing │ ├── data │ │ └── articles.json │ ├── index.html │ ├── manifest.json │ ├── package.json │ └── src │ │ ├── app-icons.js │ │ ├── article-detail.js │ │ ├── article-headline.js │ │ ├── blog-app.js │ │ └── two-columns-grid.js ├── shrine │ ├── data │ │ ├── featured.json │ │ └── items.json │ ├── index.html │ ├── manifest.json │ ├── package.json │ └── src │ │ ├── shrine-app.js │ │ ├── shrine-detail.js │ │ ├── shrine-featured-item.js │ │ ├── shrine-item.js │ │ ├── shrine-list.js │ │ └── shrine-simple-item.js └── test-drive │ ├── index.html │ ├── package.json │ └── test-app.js ├── test └── index.html └── wct.conf.json /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @keanulee @frankiefu 2 | /.travis.yml @azakus 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | ### Description 3 | 4 | 5 | ### Expected outcome 6 | 7 | 8 | 9 | ### Actual outcome 10 | 11 | 12 | 13 | ### Live Demo 14 | 15 | 16 | ### Steps to reproduce 17 | 18 | 23 | 24 | ### Browsers Affected 25 | 26 | - [ ] Chrome 27 | - [ ] Firefox 28 | - [ ] Safari 9 29 | - [ ] Safari 8 30 | - [ ] Safari 7 31 | - [ ] Edge 32 | - [ ] IE 11 33 | - [ ] IE 10 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components* 2 | bower-*.json 3 | node_modules 4 | *.d.ts 5 | *.tgz 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | *.tgz 2 | .github 3 | .travis.yml 4 | formatconfig.json 5 | gen-tsd.json 6 | test/ 7 | wct.conf.json 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: 'false' 3 | dist: trusty 4 | node_js: node 5 | addons: 6 | firefox: latest 7 | chrome: stable 8 | before_script: 9 | - npm install -g polymer-cli 10 | - git checkout package-lock.json 11 | - >- 12 | npm run format && git diff --exit-code || (echo -e '\n\033[31mERROR:\033[0m 13 | Project is not formatted. Please run "npm run format".' && false) 14 | script: 15 | - xvfb-run polymer test --module-resolution=node --npm 16 | - >- 17 | if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test 18 | --module-resolution=node --npm -s 'default'; fi 19 | env: 20 | global: 21 | - secure: >- 22 | UFbrYeLJe/Z54rZ+WFw9R6BnkkSYwBM6RMUEcVRJmZpEErkXxna9mbIStFJgqPTBcRbEkU5CINj0NbHgQ/OOJZY8Dx1jozNPG6tHOxH9XGQKE6S78hOh4r6WlHiq4yUye0XJgYeZwfOaQDsPTbnL2IsNzTM5wuJr8OPHAylxkHbTzemyiXnrd9co6EGhe+ucwZ6eR+q84agdFxF2T+FbcA5V5a04KKbwrfVdTnUa1nb3wkfjMYNQMigp378HXUtMjaJkq4q16OGzORkmwheWGlPV1Paw/lh7ED6HtfkriTWOONKcrGSeW4XH4u3onyL8gKDjk1cAjcHsz3YD+b2+3Yh2r6tsSoHQk/Tk0z20qUpJ02VOB8PHYRXpHKBUVQjsvamPNx//UFoA95HOy3jix2GBfaf+cC9gElFd6IzBRZd80+WDQ2pdwYv+BJYG1Peyn+5UdqBkK7UzStWHVrqdLGMEC//c9aBLnvvguG7PGiu7ecQRrNgUib1zOgCE5IBHtqOIaxCIB9po29NYZmydpfPcuNsZyvBH+kjJQwJ0sp37mJ20B/nBwQ1m9I2b64BatkeHpnlhuAGtvGxTW1yg62OUAy5kYamWZo+rLEkcHBR98Jg6lh1kMRJWgd5pBxRs05JL28NXN+ITr0njCFxOhaJbcmhpcd/WQcS1Sar+lK4= 23 | - secure: >- 24 | g6vl6SKb0pwi5z5YUtwg5oI5Yg2oT7PQAfkS7Sl83oiL6uXWQGzpxIrzp92BLeZJbBJ/niwh1bPPZUe8ct08VD6o+6grESvxfia3wf11UQ21xGVt0y6koQPa9aZLgsfURpVUZCLDhf8zWyFAs4jN6nBdkv8VFxaIW7eRnouuQOQyiDRQYlnZv3nP6nK+D0ItOzNCIXoI27LuEGW5TgeJNm7rfE9GuGNS5ZwLgq/BeVxq17fo/3g43TwRwFXdGah1uDnhy4b7WaCzZcXyiNdN3A0TmWnWROI9s+BhAkG5fQsT0JuKpCgZwPdPn+MK3JCykcGxSot3TdnxwelvVAwxMy18BFkA+CdG7H6X0Qd8d/VeighU8AXq1qLLi5rwB+AWylQ6nWFIsAvuroZOHPeKCpq9l3MDwa4D+t5aXVrkfpi5ZtaooZF4mPKB/U4BKU2+pprCun/9qP//cwiMnJrJkP+ObgxTzl9Z6OfzbjLAE01kHzi4B8Ju/jcLkxk08Q/AyOQANpC4H1hCl+P77RJjkNN9+F4qjiz0kJftpj6hlbwmsRqTHXVBkrItTuIQ6aBLHgw415WCYrpRWVfCOL3fhe/doZnIr1KLcGm3Ht8TwOVUXxFCFapaax80rlzSrmV3eKw8ybIkOuLHjDn3vg6xc+O6O4unWmDhs0admkoRjIM= 25 | cache: 26 | directories: 27 | - node_modules 28 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 13 | 14 | # Polymer Elements 15 | ## Guide for Contributors 16 | 17 | Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines: 18 | 19 | ### Filing Issues 20 | 21 | **If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions: 22 | 23 | 1. **Who will use the feature?** _“As someone filling out a form…”_ 24 | 2. **When will they use the feature?** _“When I enter an invalid value…”_ 25 | 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_ 26 | 27 | **If you are filing an issue to report a bug**, please provide: 28 | 29 | 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug: 30 | 31 | ```markdown 32 | The `paper-foo` element causes the page to turn pink when clicked. 33 | 34 | ## Expected outcome 35 | 36 | The page stays the same color. 37 | 38 | ## Actual outcome 39 | 40 | The page turns pink. 41 | 42 | ## Steps to reproduce 43 | 44 | 1. Put a `paper-foo` element in the page. 45 | 2. Open the page in a web browser. 46 | 3. Click the `paper-foo` element. 47 | ``` 48 | 49 | 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output). 50 | 51 | 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers. 52 | 53 | ### Submitting Pull Requests 54 | 55 | **Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request. 56 | 57 | When submitting pull requests, please provide: 58 | 59 | 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax: 60 | 61 | ```markdown 62 | (For a single issue) 63 | Fixes #20 64 | 65 | (For multiple issues) 66 | Fixes #32, fixes #40 67 | ``` 68 | 69 | 2. **A succinct description of the design** used to fix any related issues. For example: 70 | 71 | ```markdown 72 | This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked. 73 | ``` 74 | 75 | 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered. 76 | 77 | If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that! 78 | -------------------------------------------------------------------------------- /app-box/README.md: -------------------------------------------------------------------------------- 1 | ## <app-box> 2 | 3 | app-box is a container element that can have scroll effects - visual effects based on 4 | scroll position. For example, the parallax effect can be used to move an image at a slower 5 | rate than the foreground. 6 | 7 | ```html 8 | 9 | 10 | 11 | ``` 12 | 13 | Notice the `background` attribute in the `img` element; this attribute specifies that that 14 | image is used as the background. By adding the background to the light dom, you can compose 15 | backgrounds that can change dynamically. Alternatively, the mixin `--app-box-background-front-layer` 16 | allows to style the background. For example: 17 | 18 | ```css 19 | .parallaxAppBox { 20 | --app-box-background-front-layer: { 21 | background-image: url(picture.png); 22 | }; 23 | } 24 | ``` 25 | 26 | Finally, app-box can have content inside. For example: 27 | 28 | ```html 29 | 30 |

Sub title

31 | 32 | ``` 33 | 34 | #### Importing the effects 35 | 36 | To use the scroll effects, you must explicitly import them in addition to `app-box`: 37 | 38 | ```js 39 | import '@polymer/app-layout/app-scroll-effects/app-scroll-effects.js'; 40 | ``` 41 | 42 | #### List of effects 43 | 44 | * **parallax-background** 45 | A simple parallax effect that vertically translates the backgrounds based on a fraction 46 | of the scroll position. For example: 47 | 48 | ```css 49 | app-header { 50 | --app-header-background-front-layer: { 51 | background-image: url(...); 52 | }; 53 | } 54 | ``` 55 | ```html 56 | 57 | App name 58 | 59 | ``` 60 | 61 | The fraction determines how far the background moves relative to the scroll position. 62 | This value can be assigned via the `scalar` config value and it is typically a value 63 | between 0 and 1 inclusive. If `scalar=0`, the background doesn't move away from the header. 64 | 65 | ## Styling 66 | 67 | Mixin | Description | Default 68 | ----------------|-------------|---------- 69 | `--app-box-background-front-layer` | Applies to the front layer of the background | {} 70 | -------------------------------------------------------------------------------- /app-box/demo/index.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | app-box demos 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | 31 | 32 |
33 |
34 |

app-box demos

35 |
36 | Document Scroll 37 | Scrolling Region 38 |
39 |
40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /app-drawer-layout/README.md: -------------------------------------------------------------------------------- 1 | ## <app-drawer-layout> 2 | 3 | app-drawer-layout is a wrapper element that positions an app-drawer and other content. When 4 | the viewport width is smaller than `responsiveWidth`, this element changes to narrow layout. 5 | In narrow layout, the drawer will be stacked on top of the main content. The drawer will slide 6 | in/out to hide/reveal the main content. 7 | 8 | 9 | By default the drawer is aligned to the start, which is left in LTR layouts: 10 | 11 | ```html 12 | 13 | 14 | drawer content 15 | 16 |
17 | main content 18 |
19 | 20 | ``` 21 | 22 | Align the drawer at the end: 23 | 24 | ```html 25 | 26 | 27 | drawer content 28 | 29 |
30 | main content 31 |
32 | 33 | ``` 34 | 35 | With an app-header-layout: 36 | 37 | ```html 38 | 39 | 40 | drawer-content 41 | 42 | 43 | 44 | 45 |
App name
46 | 47 | 48 | 49 | main content 50 | 51 | 52 | 53 | ``` 54 | 55 | Add the `drawer-toggle` attribute to elements inside `app-drawer-layout` that toggle the drawer on click events: 56 | 57 | ```html 58 | 59 | 60 | drawer-content 61 | 62 | 63 | 64 | 65 | 66 |
App name
67 | 68 | 69 | 70 | main content 71 | 72 | 73 | 74 | ``` 75 | 76 | **NOTE:** With app-layout 2.0, the `drawer-toggle` element needs to be manually hidden 77 | when app-drawer-layout is not in narrow layout. To add this, add the following CSS rule where 78 | app-drawer-layout is used: 79 | 80 | ```css 81 | app-drawer-layout:not([narrow]) [drawer-toggle] { 82 | display: none; 83 | } 84 | ``` 85 | 86 | Add the `fullbleed` attribute to app-drawer-layout to make it fit the size of its container: 87 | 88 | ```html 89 | 90 | 91 | drawer content 92 | 93 |
94 | main content 95 |
96 | 97 | ``` 98 | 99 | ### Styling 100 | 101 | Custom property | Description | Default 102 | -----------------------------------------|--------------------------------------|--------- 103 | `--app-drawer-width` | Width of the drawer | 256px 104 | `--app-drawer-layout-content-transition` | Transition for the content container | none 105 | 106 | **NOTE:** If you use with and specify a value for 107 | `--app-drawer-width`, that value must be accessible by both elements. This can be done by 108 | defining the value on the `:host` that contains (or `html` if outside 109 | a shadow root): 110 | 111 | ```css 112 | :host { 113 | --app-drawer-width: 300px; 114 | } 115 | ``` 116 | -------------------------------------------------------------------------------- /app-drawer-layout/demo/index.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | app-drawer-layout demo 18 | 19 | 20 | 21 | 30 | 31 | 32 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /app-drawer-layout/test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | app-drawer-layout tests 15 | 16 | 17 | 18 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /app-drawer/README.md: -------------------------------------------------------------------------------- 1 | ## <app-drawer> 2 | 3 | ![app-drawer](http://app-layout-assets.appspot.com/assets/docs/app-drawer/drawer.gif) 4 | 5 | app-drawer is a navigation drawer that can slide in from the left or right. 6 | 7 | Example: 8 | 9 | Align the drawer at the start, which is left in LTR layouts (default): 10 | 11 | ```html 12 | 13 | ``` 14 | 15 | Align the drawer at the end: 16 | 17 | ```html 18 | 19 | ``` 20 | 21 | To make the contents of the drawer scrollable, create a wrapper for the scroll 22 | content, and apply height and overflow styles to it. 23 | 24 | ```html 25 | 26 |
27 | 28 | ``` 29 | 30 | ### Styling 31 | 32 | Custom property | Description | Default 33 | ---------------------------------|----------------------------------------|-------------------- 34 | `--app-drawer-width` | Width of the drawer | 256px 35 | `--app-drawer-content-container` | Mixin for the drawer content container | {} 36 | `--app-drawer-content-padding` | Padding of the drawer content container| 120px 0 37 | `--app-drawer-scrim-background` | Background for the scrim | rgba(0, 0, 0, 0.5) 38 | 39 | **NOTE:** If you use `` with `` and specify a value for 40 | `--app-drawer-width`, that value must be accessible by both elements. This can be done by 41 | defining the value on the `:host` that contains `` (or `html` if outside 42 | a shadow root): 43 | 44 | ```css 45 | :host { 46 | --app-drawer-width: 300px; 47 | } 48 | ``` 49 | -------------------------------------------------------------------------------- /app-drawer/demo/index.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | app-drawer demos 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | 31 | 32 |
33 |
34 |

app-drawer demos

35 |
36 | Simple Left Drawer 37 | Right Drawer with Icons 38 |
39 |
40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /app-drawer/demo/left-drawer.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | app-drawer demo 18 | 19 | 20 | 21 | 29 | 30 | 31 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /app-drawer/demo/right-drawer.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | app-drawer demo 18 | 19 | 20 | 21 | 30 | 31 | 32 | 57 | 58 | 59 | 60 | 61 | 62 | 63 |
64 | 65 | 66 | 67 | 68 | 69 | 70 |
71 | 72 | 73 | inbox 74 | 75 | 76 | 77 | favorite 78 | 79 | 80 | 81 | polymer 82 | 83 | 84 | 85 | question-answer 86 | 87 | 88 | 89 | send 90 | 91 | 92 | 93 | archive 94 | 95 | 96 | 97 | backup 98 | 99 | 100 | 101 | dashboard 102 | 103 |
104 | 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /app-drawer/test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | app-drawer tests 15 | 16 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /app-grid/README.md: -------------------------------------------------------------------------------- 1 | ## <app-grid> 2 | 3 | app-grid is a helper class useful for creating responsive, fluid grid layouts using custom properties. 4 | Because custom properties can be defined inside a `@media` rule, you can customize the grid layout 5 | for different responsive breakpoints. 6 | 7 | Example: 8 | 9 | Import `app-grid-style.html` and include `app-grid-style` in the style of an element's definition. 10 | Then, add the class `app-grid` to a container such as `ul` or `div`: 11 | 12 | ```html 13 | 43 | ``` 44 | 45 | In this example, the grid will take 3 columns per row and only 1 column if the viewport width is 46 | smaller than 640px. 47 | 48 | ### Expandible items 49 | 50 | In many cases, it's useful to expand an item more than 1 column. To achieve this type of layout, 51 | you can specify the number of columns the item should expand to by setting the custom property 52 | `--app-grid-expandible-item-columns`. To indicate which item should expand, apply the mixin 53 | `--app-grid-expandible-item` to a rule with a selector to the item. For example: 54 | 55 | ```html 56 | 75 | ``` 76 | 77 | ### Preserving the aspect ratio 78 | 79 | When the size of a grid item should preserve the aspect ratio, you can add the `has-aspect-ratio` 80 | attribute to the element with the class `app-grid`. Now, every item element becomes a wrapper around 81 | the item content. For example: 82 | 83 | ```html 84 | 115 | ``` 116 | 117 | ### Styling 118 | 119 | Custom property | Description | Default 120 | ----------------------------------------------|------------------------------------------------------------|------------------ 121 | `--app-grid-columns` | The number of columns per row. | 1 122 | `--app-grid-gutter` | The space between two items. | 0px 123 | `--app-grid-item-height` | The height of the items. | auto 124 | `--app-grid-expandible-item-columns` | The number of columns an expandible item should expand to. | 1 125 | 126 | ### CSS grid layout 127 | 128 | [CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) is a new layout system for CSS that lets you create complex grids. It's richer than app-grid in many cases, but it's only supported in a [few browsers](http://caniuse.com/#search=css%20grid%20layout). 129 | -------------------------------------------------------------------------------- /app-grid/demo/aspect-ratio.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | Preserving aspect ratio using app-grid-style 18 | 19 | 20 | 21 | 27 | 28 | 29 | 30 | 80 | 81 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /app-grid/demo/index.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | app-grid demos 15 | 16 | 17 | 18 | 19 | 22 | 28 | 29 | 30 | 31 |
32 |
33 |

app-grid demos

34 |
35 | Flickr grid layout 36 | Material design grid layout 37 | Simple responsive grid layout 38 | Aspect ratios 39 |
40 |
41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /app-grid/demo/simple-responsive-grid.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | Responsive grid layout using app-grid-style 18 | 19 | 20 | 21 | 29 | 30 | 31 | 32 | 91 | 92 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /app-grid/test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | app-grid tests 15 | 16 | 17 | 18 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /app-header-layout/README.md: -------------------------------------------------------------------------------- 1 | ## <app-header-layout> 2 | 3 | app-header-layout is a wrapper element that positions an app-header and other content. This 4 | element uses the document scroll by default, but it can also define its own scrolling region. 5 | 6 | Using the document scroll: 7 | 8 | ```html 9 | 10 | 11 | 12 |
App name
13 | 14 | 15 |
16 | main content 17 |
18 | 19 | ``` 20 | 21 | Using an own scrolling region: 22 | 23 | ```html 24 | 25 | 26 | 27 |
App name
28 | 29 | 30 |
31 | main content 32 |
33 | 34 | ``` 35 | 36 | Add the `fullbleed` attribute to app-header-layout to make it fit the size of its container: 37 | 38 | ```html 39 | 40 | ... 41 | 42 | ``` 43 | -------------------------------------------------------------------------------- /app-header-layout/demo/footer.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | app-header-layout demo 18 | 19 | 20 | 21 | 32 | 33 | 34 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 |
76 | 77 | 78 | 79 | 80 |
My Drive
81 | 82 | 83 | 84 |
85 | 86 |
87 | 88 |
89 | © Polymer project 90 |
91 | 92 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /app-header-layout/demo/index.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | app-header-layout demos 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | 31 | 32 |
33 |
34 |

app-header-layout demos

35 |
36 | Simple Demo 37 | Scrolling Region 38 | Music Demo 39 | Adding a footer 40 |
41 |
42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /app-header-layout/demo/scrolling-region.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | app-header-layout demo 18 | 19 | 20 | 21 | 32 | 33 | 34 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |
79 | 80 | 81 | 82 | 83 |
My Drive
84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /app-header-layout/demo/simple.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | app-header-layout demo 18 | 19 | 20 | 21 | 22 | 40 | 41 | 42 | 43 | 44 | 45 | 67 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /app-header-layout/test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | app-header-layout tests 15 | 16 | 17 | 18 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /app-header/demo/blend-background-1.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | app-header demo 19 | 20 | 21 | 22 | 31 | 32 | 33 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 |

What is material? — Environment

104 | 105 | 106 | 107 |

What is material?

108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /app-header/demo/blend-background-2.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | app-header demo 19 | 20 | 21 | 22 | 31 | 32 | 33 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 |

What is material? — Environment

108 | 109 | 110 | 111 |

What is material?

112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /app-header/demo/blend-background-3.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | app-header demo 19 | 20 | 21 | 22 | 31 | 32 | 33 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 |

What is material? — Environment

104 | 105 | 106 | 107 |

What is material?

108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /app-header/demo/contacts.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Contacts Demo 17 | 18 | 19 | 20 | 21 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 |
Pharrell Williams
91 | 92 | 93 | 94 | 95 | 96 |
Pharrell Williams
97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /app-header/demo/custom-sticky-element-1.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | app-header demo 19 | 20 | 21 | 22 | 32 | 33 | 34 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 |

73 | 74 | 75 | 76 | 77 | TAB 1 78 | TAB 2 79 | TAB 3 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /app-header/demo/custom-sticky-element-2.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | app-header demo 19 | 20 | 21 | 22 | 32 | 33 | 34 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 |

80 | 81 | 82 | 83 | 84 | TAB 1 85 | TAB 2 86 | TAB 3 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /app-header/demo/give.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | app-header demo 19 | 20 | 21 | 22 | 31 | 32 | 33 | 101 | 102 | 103 | 104 | 105 | 108 | 109 | 110 |

GiveDirectly

111 | 112 | 113 |

GiveDirectly

114 | 115 | 116 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /app-header/demo/index.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | app-header demos 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | 31 | 32 |
33 | 48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /app-header/demo/no-effects.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | app-header demo that doesn't use any effects 19 | 20 | 21 | 22 | 29 | 30 | 31 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /app-header/test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | app-header tests 15 | 16 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /app-layout-behavior/app-layout-behavior.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js'; 14 | import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js'; 15 | import {animationFrame} from '@polymer/polymer/lib/utils/async.js'; 16 | import {Debouncer} from '@polymer/polymer/lib/utils/debounce.js'; 17 | import {enqueueDebouncer} from '@polymer/polymer/lib/utils/flush.js'; 18 | 19 | /** 20 | * @polymerBehavior 21 | */ 22 | export const AppLayoutBehavior = [ 23 | IronResizableBehavior, 24 | { 25 | 26 | listeners: { 27 | 'app-reset-layout': '_appResetLayoutHandler', 28 | 'iron-resize': 'resetLayout' 29 | }, 30 | 31 | attached: function() { 32 | this.fire('app-reset-layout'); 33 | }, 34 | 35 | _appResetLayoutHandler: function(e) { 36 | if (dom(e).path[0] === this) { 37 | return; 38 | } 39 | this.resetLayout(); 40 | e.stopPropagation(); 41 | }, 42 | 43 | _updateLayoutStates: function() { 44 | console.error('unimplemented'); 45 | }, 46 | 47 | /** 48 | * Resets the layout. If you changed the size of this element via CSS 49 | * you can notify the changes by either firing the `iron-resize` event 50 | * or calling `resetLayout` directly. 51 | * 52 | * @method resetLayout 53 | */ 54 | resetLayout: function() { 55 | var self = this; 56 | var cb = this._updateLayoutStates.bind(this); 57 | this._layoutDebouncer = 58 | Debouncer.debounce(this._layoutDebouncer, animationFrame, cb); 59 | enqueueDebouncer(this._layoutDebouncer); 60 | this._notifyDescendantResize(); 61 | }, 62 | 63 | _notifyLayoutChanged: function() { 64 | var self = this; 65 | // TODO: the event `app-reset-layout` can be fired synchronously 66 | // as long as `_updateLayoutStates` waits for all the microtasks after 67 | // rAF. E.g. requestAnimationFrame(setTimeOut()) 68 | requestAnimationFrame(function() { 69 | self.fire('app-reset-layout'); 70 | }); 71 | }, 72 | 73 | _notifyDescendantResize: function() { 74 | if (!this.isAttached) { 75 | return; 76 | } 77 | this._interestedResizables.forEach(function(resizable) { 78 | if (this.resizerShouldNotify(resizable)) { 79 | this._notifyDescendant(resizable); 80 | } 81 | }, this); 82 | } 83 | } 84 | ]; 85 | -------------------------------------------------------------------------------- /app-layout.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import './helpers/helpers.js'; 12 | import './app-drawer/app-drawer.js'; 13 | import './app-drawer-layout/app-drawer-layout.js'; 14 | import './app-grid/app-grid-style.js'; 15 | import './app-header/app-header.js'; 16 | import './app-header-layout/app-header-layout.js'; 17 | import './app-toolbar/app-toolbar.js'; 18 | import './app-box/app-box.js'; 19 | -------------------------------------------------------------------------------- /app-scroll-effects/README.md: -------------------------------------------------------------------------------- 1 | # Scroll effects 2 | 3 | `Polymer.AppScrollEffectsBehavior` provides an interface that allows an element to use scrolls effects. 4 | 5 | ### Importing the app-layout effects 6 | 7 | app-layout provides a set of scroll effects that can be used by explicitly importing `app-scroll-effects.js`: 8 | 9 | ```js 10 | import '@polymer/app-layout/app-scroll-effects/app-scroll-effects.js'; 11 | ``` 12 | 13 | The scroll effects can also be used by individually importing 14 | `@polymer/app-layout/app-scroll-effects/effects/[effectName].js`. For example: 15 | 16 | ```js 17 | import '@polymer/app-layout/app-scroll-effects/effects/waterfall.js'; 18 | ``` 19 | 20 | ### Consuming effects 21 | 22 | Effects can be consumed via the `effects` property. For example: 23 | 24 | ```html 25 | 26 | ``` 27 | 28 | ### Creating scroll effects 29 | 30 | You may want to create a custom scroll effect if you need to modify the CSS of an element 31 | based on the scroll position. 32 | 33 | A scroll effect definition is an object with `setUp()`, `tearDown()` and `run()` functions. 34 | 35 | To register the effect, you can use `Polymer.AppLayout.registerEffect(effectName, effectDef)` 36 | For example, let's define an effect that resizes the header's logo: 37 | 38 | ```js 39 | Polymer.AppLayout.registerEffect('resizable-logo', { 40 | setUp: function(config) { 41 | // the effect's config is passed to the setUp. 42 | this._fxResizeLogo = { logo: Polymer.dom(this).querySelector('[logo]') }; 43 | }, 44 | 45 | run: function(progress) { 46 | // the progress of the effect 47 | this.transform('scale3d(' + progress + ', '+ progress +', 1)', this._fxResizeLogo.logo); 48 | }, 49 | 50 | tearDown: function() { 51 | // clean up and reset of states 52 | delete this._fxResizeLogo; 53 | } 54 | }); 55 | ``` 56 | Now, you can consume the effect: 57 | 58 | ```html 59 | 60 | 61 | 62 | ``` 63 | 64 | ### Imperative API 65 | 66 | ```js 67 | var logoEffect = appHeader.createEffect('resizable-logo', effectConfig); 68 | // run the effect: logoEffect.run(progress); 69 | // tear down the effect: logoEffect.tearDown(); 70 | ``` 71 | 72 | ### Configuring effects 73 | 74 | For effects installed via the `effects` property, their configuration can be set 75 | via the `effectsConfig` property. For example: 76 | 77 | ```html 78 | 80 | 81 | ``` 82 | 83 | All effects have a `startsAt` and `endsAt` config property. They specify at what 84 | point the effect should start and end. This value goes from 0 to 1 inclusive. 85 | -------------------------------------------------------------------------------- /app-scroll-effects/app-scroll-effects.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import './effects/blend-background.js'; 12 | import './effects/fade-background.js'; 13 | import './effects/material.js'; 14 | import './effects/parallax-background.js'; 15 | import './effects/resize-snapped-title.js'; 16 | import './effects/resize-title.js'; 17 | import './effects/waterfall.js'; 18 | -------------------------------------------------------------------------------- /app-scroll-effects/effects/blend-background.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '../app-scroll-effects-behavior.js'; 12 | 13 | import {ElementWithBackground, registerEffect} from '../../helpers/helpers.js'; 14 | 15 | /** 16 | * While scrolling down, fade in the rear background layer and fade out the 17 | * front background layer (opacity interpolated based on scroll position). 18 | */ 19 | registerEffect('blend-background', { 20 | /** @this {BlendBackground} */ 21 | setUp: function setUp() { 22 | var fx = {}; 23 | fx.backgroundFrontLayer = this._getDOMRef('backgroundFrontLayer'); 24 | fx.backgroundRearLayer = this._getDOMRef('backgroundRearLayer'); 25 | fx.backgroundFrontLayer.style.willChange = 'opacity'; 26 | fx.backgroundFrontLayer.style.transform = 'translateZ(0)'; 27 | fx.backgroundRearLayer.style.willChange = 'opacity'; 28 | fx.backgroundRearLayer.style.transform = 'translateZ(0)'; 29 | fx.backgroundRearLayer.style.opacity = 0; 30 | this._fxBlendBackground = fx; 31 | }, 32 | /** @this {BlendBackground} */ 33 | run: function run(p, y) { 34 | var fx = this._fxBlendBackground; 35 | fx.backgroundFrontLayer.style.opacity = 1 - p; 36 | fx.backgroundRearLayer.style.opacity = p; 37 | }, 38 | /** @this {BlendBackground} */ 39 | tearDown: function tearDown() { 40 | delete this._fxBlendBackground; 41 | } 42 | }); 43 | 44 | /** 45 | * @interface 46 | * @extends {ElementWithBackground} 47 | */ 48 | class BlendBackground { 49 | constructor() { 50 | /** 51 | * @type {?} 52 | */ 53 | this._fxBlendBackground; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /app-scroll-effects/effects/fade-background.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '../app-scroll-effects-behavior.js'; 12 | 13 | import {ElementWithBackground, registerEffect} from '../../helpers/helpers.js'; 14 | 15 | /** 16 | * Upon scrolling past a threshold, fade in the rear background layer and fade 17 | * out the front background layer (opacity CSS transitioned over time). 18 | */ 19 | registerEffect('fade-background', { 20 | /** @this {FadeBackground} */ 21 | setUp: function setUp(config) { 22 | var fx = {}; 23 | var duration = config.duration || '0.5s'; 24 | fx.backgroundFrontLayer = this._getDOMRef('backgroundFrontLayer'); 25 | fx.backgroundRearLayer = this._getDOMRef('backgroundRearLayer'); 26 | fx.backgroundFrontLayer.style.willChange = 'opacity'; 27 | fx.backgroundFrontLayer.style.webkitTransform = 'translateZ(0)'; 28 | fx.backgroundFrontLayer.style.transitionProperty = 'opacity'; 29 | fx.backgroundFrontLayer.style.transitionDuration = duration; 30 | fx.backgroundRearLayer.style.willChange = 'opacity'; 31 | fx.backgroundRearLayer.style.webkitTransform = 'translateZ(0)'; 32 | fx.backgroundRearLayer.style.transitionProperty = 'opacity'; 33 | fx.backgroundRearLayer.style.transitionDuration = duration; 34 | this._fxFadeBackground = fx; 35 | }, 36 | /** @this {FadeBackground} */ 37 | run: function run(p, y) { 38 | var fx = this._fxFadeBackground; 39 | if (p >= 1) { 40 | fx.backgroundFrontLayer.style.opacity = 0; 41 | fx.backgroundRearLayer.style.opacity = 1; 42 | } else { 43 | fx.backgroundFrontLayer.style.opacity = 1; 44 | fx.backgroundRearLayer.style.opacity = 0; 45 | } 46 | }, 47 | /** @this {FadeBackground} */ 48 | tearDown: function tearDown() { 49 | delete this._fxFadeBackground; 50 | } 51 | }); 52 | 53 | /** 54 | * @interface 55 | * @extends {ElementWithBackground} 56 | */ 57 | class FadeBackground { 58 | constructor() { 59 | /** 60 | * @type {?} 61 | */ 62 | this._fxFadeBackground; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /app-scroll-effects/effects/material.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '../app-scroll-effects-behavior.js'; 12 | import './waterfall.js'; 13 | import './resize-title.js'; 14 | import './blend-background.js'; 15 | import './parallax-background.js'; 16 | 17 | import {ElementWithBackground, registerEffect} from '../../helpers/helpers.js'; 18 | 19 | /** 20 | * Shorthand for the waterfall, resize-title, blend-background, and 21 | * parallax-background effects. 22 | */ 23 | registerEffect('material', { 24 | /** @this {Material} */ 25 | setUp: function setUp() { 26 | this.effects = 27 | 'waterfall resize-title blend-background parallax-background'; 28 | return false; 29 | } 30 | }); 31 | 32 | /** 33 | * @interface 34 | * @extends {ElementWithBackground} 35 | */ 36 | class Material { 37 | constructor() { 38 | /** @type {string} */ 39 | this.effects; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /app-scroll-effects/effects/parallax-background.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '../app-scroll-effects-behavior.js'; 12 | 13 | import {ElementWithBackground, registerEffect} from '../../helpers/helpers.js'; 14 | 15 | /** 16 | * Vertically translate the background based on a factor of the scroll position. 17 | */ 18 | registerEffect('parallax-background', { 19 | /** 20 | * @param {{scalar: string}} config 21 | * @this {ParallaxBackground} 22 | */ 23 | setUp: function setUp(config) { 24 | var fx = {}; 25 | var scalar = parseFloat(config.scalar); 26 | fx.background = this._getDOMRef('background'); 27 | fx.backgroundFrontLayer = this._getDOMRef('backgroundFrontLayer'); 28 | fx.backgroundRearLayer = this._getDOMRef('backgroundRearLayer'); 29 | fx.deltaBg = 30 | fx.backgroundFrontLayer.offsetHeight - fx.background.offsetHeight; 31 | if (fx.deltaBg === 0) { 32 | if (isNaN(scalar)) { 33 | scalar = 0.8; 34 | } 35 | fx.deltaBg = (this._dHeight || 0) * scalar; 36 | } else { 37 | if (isNaN(scalar)) { 38 | scalar = 1; 39 | } 40 | fx.deltaBg = fx.deltaBg * scalar; 41 | } 42 | this._fxParallaxBackground = fx; 43 | }, 44 | /** @this {ParallaxBackground} */ 45 | run: function run(p, y) { 46 | var fx = this._fxParallaxBackground; 47 | this.transform( 48 | 'translate3d(0px, ' + (fx.deltaBg * Math.min(1, p)) + 'px, 0px)', 49 | fx.backgroundFrontLayer); 50 | if (fx.backgroundRearLayer) { 51 | this.transform( 52 | 'translate3d(0px, ' + (fx.deltaBg * Math.min(1, p)) + 'px, 0px)', 53 | fx.backgroundRearLayer); 54 | } 55 | }, 56 | /** @this {ParallaxBackground} */ 57 | tearDown: function tearDown() { 58 | delete this._fxParallaxBackground; 59 | } 60 | }); 61 | 62 | /** 63 | * @interface 64 | * @extends {ElementWithBackground} 65 | */ 66 | class ParallaxBackground { 67 | constructor() { 68 | /** @type {?number} */ 69 | this._dHeight; 70 | 71 | /** 72 | * @type {?} 73 | */ 74 | this._fxParallaxBackground; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /app-scroll-effects/effects/resize-snapped-title.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '../app-scroll-effects-behavior.js'; 12 | 13 | import {ElementWithBackground, registerEffect} from '../../helpers/helpers.js'; 14 | 15 | /** 16 | * Upon scrolling past a threshold, CSS transition the font size of a designated 17 | * title element between two values. 18 | */ 19 | registerEffect('resize-snapped-title', { 20 | /** @this {ResizeSnappedTitle} */ 21 | setUp: function setUp(config) { 22 | var title = this._getDOMRef('mainTitle'); 23 | var condensedTitle = this._getDOMRef('condensedTitle'); 24 | var duration = config.duration || '0.2s'; 25 | var fx = {}; 26 | 27 | if (!condensedTitle) { 28 | console.warn( 29 | 'Scroll effect `resize-snapped-title`: undefined `condensed-title`'); 30 | return false; 31 | } 32 | if (!title) { 33 | console.warn( 34 | 'Scroll effect `resize-snapped-title`: undefined `main-title`'); 35 | return false; 36 | } 37 | 38 | title.style.transitionProperty = 'opacity'; 39 | title.style.transitionDuration = duration; 40 | condensedTitle.style.transitionProperty = 'opacity'; 41 | condensedTitle.style.transitionDuration = duration; 42 | fx.condensedTitle = condensedTitle; 43 | fx.title = title; 44 | this._fxResizeSnappedTitle = fx; 45 | }, 46 | /** @this {ResizeSnappedTitle} */ 47 | run: function run(p, y) { 48 | var fx = this._fxResizeSnappedTitle; 49 | if (p > 0) { 50 | fx.title.style.opacity = 0; 51 | fx.condensedTitle.style.opacity = 1; 52 | } else { 53 | fx.title.style.opacity = 1; 54 | fx.condensedTitle.style.opacity = 0; 55 | } 56 | }, 57 | /** @this {ResizeSnappedTitle} */ 58 | tearDown: function tearDown() { 59 | var fx = this._fxResizeSnappedTitle; 60 | fx.title.style.transition = ''; 61 | fx.condensedTitle.style.transition = ''; 62 | delete this._fxResizeSnappedTitle; 63 | } 64 | }); 65 | 66 | /** 67 | * @interface 68 | * @extends {ElementWithBackground} 69 | */ 70 | class ResizeSnappedTitle { 71 | constructor() { 72 | /** 73 | * @type {?} 74 | */ 75 | this._fxResizeSnappedTitle; 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /app-scroll-effects/effects/resize-title.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '../app-scroll-effects-behavior.js'; 12 | 13 | import {ElementWithBackground, registerEffect} from '../../helpers/helpers.js'; 14 | 15 | function interpolate(progress, points, fn, ctx) { 16 | fn.apply(ctx, points.map(function(point) { 17 | return point[0] + (point[1] - point[0]) * progress; 18 | })); 19 | } 20 | 21 | /** 22 | * Transform the font size of a designated title element between two values 23 | * based on the scroll position. 24 | */ 25 | registerEffect('resize-title', { 26 | /** @this {ResizeTitle} */ 27 | setUp: function setUp() { 28 | var title = this._getDOMRef('mainTitle'); 29 | var condensedTitle = this._getDOMRef('condensedTitle'); 30 | 31 | if (!condensedTitle) { 32 | console.warn('Scroll effect `resize-title`: undefined `condensed-title`'); 33 | return false; 34 | } 35 | if (!title) { 36 | console.warn('Scroll effect `resize-title`: undefined `main-title`'); 37 | return false; 38 | } 39 | 40 | condensedTitle.style.willChange = 'opacity'; 41 | condensedTitle.style.webkitTransform = 'translateZ(0)'; 42 | condensedTitle.style.transform = 'translateZ(0)'; 43 | condensedTitle.style.webkitTransformOrigin = 'left top'; 44 | condensedTitle.style.transformOrigin = 'left top'; 45 | 46 | title.style.willChange = 'opacity'; 47 | title.style.webkitTransformOrigin = 'left top'; 48 | title.style.transformOrigin = 'left top'; 49 | title.style.webkitTransform = 'translateZ(0)'; 50 | title.style.transform = 'translateZ(0)'; 51 | 52 | var titleClientRect = title.getBoundingClientRect(); 53 | var condensedTitleClientRect = condensedTitle.getBoundingClientRect(); 54 | var fx = {}; 55 | 56 | fx.scale = 57 | parseInt(window.getComputedStyle(condensedTitle)['font-size'], 10) / 58 | parseInt(window.getComputedStyle(title)['font-size'], 10); 59 | fx.titleDX = titleClientRect.left - condensedTitleClientRect.left; 60 | fx.titleDY = titleClientRect.top - condensedTitleClientRect.top; 61 | fx.condensedTitle = condensedTitle; 62 | fx.title = title; 63 | 64 | this._fxResizeTitle = fx; 65 | }, 66 | /** @this {ResizeTitle} */ 67 | run: function run(p, y) { 68 | var fx = this._fxResizeTitle; 69 | if (!this.condenses) { 70 | y = 0; 71 | } 72 | if (p >= 1) { 73 | fx.title.style.opacity = 0; 74 | fx.condensedTitle.style.opacity = 1; 75 | } else { 76 | fx.title.style.opacity = 1; 77 | fx.condensedTitle.style.opacity = 0; 78 | } 79 | interpolate( 80 | Math.min(1, p), 81 | [[1, fx.scale], [0, -fx.titleDX], [y, y - fx.titleDY]], 82 | function(scale, translateX, translateY) { 83 | this.transform( 84 | 'translate(' + translateX + 'px, ' + translateY + 'px) ' + 85 | 'scale3d(' + scale + ', ' + scale + ', 1)', 86 | fx.title); 87 | }, 88 | this); 89 | }, 90 | /** @this {ResizeTitle} */ 91 | tearDown: function tearDown() { 92 | delete this._fxResizeTitle; 93 | } 94 | }); 95 | 96 | /** 97 | * @interface 98 | * @extends {ElementWithBackground} 99 | */ 100 | class ResizeTitle { 101 | constructor() { 102 | /** @type {boolean} */ 103 | this.condenses; 104 | 105 | /** 106 | * @@type {?} 107 | */ 108 | this._fxResizeTitle; 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /app-scroll-effects/effects/waterfall.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '../app-scroll-effects-behavior.js'; 12 | 13 | import {ElementWithBackground, registerEffect} from '../../helpers/helpers.js'; 14 | 15 | /** 16 | * Toggles the shadow property in app-header when content is scrolled to create 17 | * a sense of depth between the element and the content underneath. 18 | */ 19 | registerEffect('waterfall', { 20 | /** @this {Waterfall} */ 21 | run: function run() { 22 | this.shadow = this.isOnScreen() && this.isContentBelow(); 23 | } 24 | }); 25 | 26 | /** 27 | * @interface 28 | * @extends {ElementWithBackground} 29 | */ 30 | class Waterfall { 31 | constructor() { 32 | /** @type {boolean} */ 33 | this.shadow; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /app-scroll-effects/test/blend-background.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | test for the blend-background effect 15 | 16 | 17 | 18 | 19 | 20 | 35 | 36 | 37 | 38 | 39 | 40 | 43 | 44 | 45 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /app-scroll-effects/test/fade-background.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | test for the fade-background effect 15 | 16 | 17 | 18 | 19 | 20 | 35 | 36 | 37 | 38 | 39 | 40 | 43 | 44 | 45 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /app-scroll-effects/test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | app-scroll-effects tests 15 | 16 | 17 | 18 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /app-scroll-effects/test/parallax-background.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | test for the parallax-background effect 15 | 16 | 17 | 18 | 19 | 20 | 35 | 36 | 37 | 38 | 39 | 40 | 43 | 44 | 45 | 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /app-scroll-effects/test/resize-snapped-title.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | test for the resize-snappped-title effect 15 | 16 | 17 | 18 | 19 | 20 | 35 | 36 | 37 | 38 | 39 | 40 | 43 | 44 | 45 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /app-scroll-effects/test/resize-title.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | test for the resize-title effect 15 | 16 | 17 | 18 | 19 | 20 | 35 | 36 | 37 | 38 | 39 | 40 | 43 | 44 | 45 | 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /app-scroll-effects/test/utils.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS The complete set of contributors may be found 7 | at http://polymer.github.io/CONTRIBUTORS Code distributed by Google as part of 8 | the polymer project is also subject to an additional IP rights grant found at 9 | http://polymer.github.io/PATENTS 10 | */ 11 | /** 12 | * Checks if an element has a given CSS text 13 | * 14 | * @param {HTMLElement} el 15 | * @param {string} cssText 16 | */ 17 | window.sameCSS = function(el, cssText) { 18 | var propName; 19 | var dummy = document.createElement('div'); 20 | 21 | dummy.style.cssText = cssText; 22 | document.body.appendChild(dummy); 23 | 24 | var elStyle = window.getComputedStyle(el); 25 | var parts = cssText.split(/\s/); 26 | var dummyStyle = window.getComputedStyle(dummy); 27 | 28 | for (var i = 0; i < parts.length; i++) { 29 | if (parts[i].substr(-1, 1) != ':') { 30 | continue; 31 | } 32 | 33 | propName = parts[i].substr(0, parts[i].length - 1); 34 | 35 | if (elStyle[propName] && elStyle[propName] !== dummyStyle[propName]) { 36 | throw new Error( 37 | '`' + propName + '` is different: ' + 38 | '`' + elStyle[propName] + '` != `' + dummyStyle[propName] + '`'); 39 | } 40 | } 41 | return true; 42 | }; 43 | -------------------------------------------------------------------------------- /app-scroll-effects/test/waterfall.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | test for the waterfall effect 15 | 16 | 17 | 18 | 19 | 20 | 35 | 36 | 37 | 38 | 39 | 40 | 43 | 44 | 45 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /app-scroll-effects/test/x-container.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 15 | 16 | import {AppScrollEffectsBehavior} from '../app-scroll-effects-behavior.js'; 17 | 18 | Polymer({ 19 | _template: html` 20 | 61 | 62 |
63 |
64 |
65 |

Title

66 |

Condensed title

67 | `, 68 | 69 | is: 'x-container', 70 | behaviors: [AppScrollEffectsBehavior], 71 | properties: {shadow: {type: Boolean, reflectToAttribute: true}}, 72 | observers: ['_xScrollEffectChanged(effects)'], 73 | 74 | _getDOMRef: function(id) { 75 | return this.$[id] || null; 76 | }, 77 | 78 | _updateScrollState: function(scrollTop) { 79 | this._runEffects(scrollTop / this.offsetHeight, scrollTop); 80 | }, 81 | 82 | _xScrollEffectChanged: function() { 83 | this._updateScrollState(this._scrollTop); 84 | } 85 | }); 86 | -------------------------------------------------------------------------------- /app-toolbar/README.md: -------------------------------------------------------------------------------- 1 | ## <app-toolbar> 2 | 3 | app-toolbar is a horizontal toolbar containing items that can be used for 4 | label, navigation, search and actions. 5 | 6 | ### Example 7 | 8 | Add a title to the toolbar. 9 | 10 | ```html 11 | 12 |
App name
13 | 14 | ``` 15 | 16 | Add a button to the left and right side of the toolbar. 17 | 18 | ```html 19 | 20 | 21 |
App name
22 | 23 | 24 | ``` 25 | 26 | You can use the attributes `top-item` or `bottom-item` to completely fit an element 27 | to the top or bottom of the toolbar respectively. 28 | 29 | ### Content attributes 30 | 31 | Attribute | Description 32 | ---------------------|--------------------------------------------------------- 33 | `main-title` | The main title element. 34 | `condensed-title` | The title element if used inside a condensed app-header. 35 | `spacer` | Adds a left margin of `64px`. 36 | `bottom-item` | Sticks the element to the bottom of the toolbar. 37 | `top-item` | Sticks the element to the top of the toolbar. 38 | 39 | ### Styling 40 | 41 | Custom property | Description | Default 42 | -----------------------------|------------------------------|----------------------- 43 | `--app-toolbar-font-size` | Toolbar font size | 20px 44 | -------------------------------------------------------------------------------- /app-toolbar/app-toolbar.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import '@polymer/iron-flex-layout/iron-flex-layout.js'; 14 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 15 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 16 | 17 | /** 18 | app-toolbar is a horizontal toolbar containing items that can be used for 19 | label, navigation, search and actions. 20 | 21 | ### Example 22 | 23 | Add a title to the toolbar. 24 | 25 | ```html 26 | 27 |
App name
28 | 29 | ``` 30 | 31 | Add a button to the left and right side of the toolbar. 32 | 33 | ```html 34 | 35 | 36 |
App name
37 | 38 | 39 | ``` 40 | 41 | You can use the attributes `top-item` or `bottom-item` to completely fit an 42 | element to the top or bottom of the toolbar respectively. 43 | 44 | ### Content attributes 45 | 46 | Attribute | Description 47 | ---------------------|--------------------------------------------------------- 48 | `main-title` | The main title element. 49 | `condensed-title` | The title element if used inside a condensed app-header. 50 | `spacer` | Adds a left margin of `64px`. 51 | `bottom-item` | Sticks the element to the bottom of the toolbar. 52 | `top-item` | Sticks the element to the top of the toolbar. 53 | 54 | ### Styling 55 | 56 | Custom property | Description | Default 57 | -----------------------------|------------------------------|----------------------- 58 | `--app-toolbar-font-size` | Toolbar font size | 20px 59 | 60 | @element app-toolbar 61 | @demo app-toolbar/demo/index.html 62 | */ 63 | Polymer({ 64 | /** @override */ 65 | _template: html` 66 | 111 | 112 | 113 | `, 114 | 115 | is: 'app-toolbar' 116 | }); 117 | -------------------------------------------------------------------------------- /app-toolbar/demo/index.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | app-toolbar demo 18 | 19 | 20 | 21 | 28 | 29 | 30 | 58 | 59 | 60 | 61 | 62 | Random Text 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
App name
71 | 72 | 73 | 74 |
App name
75 | 76 | 77 | 78 | 79 |
App name
80 | 81 | 82 | 83 | 84 |
App name
85 | 86 | 87 | 88 | 89 | 90 |
App name
91 | 92 | 93 | 94 | 95 |
App name
96 | 97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /app-toolbar/test/app-toolbar.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | test for app-toolbar 15 | 16 | 17 | 18 | 19 | 20 | 45 | 46 | 47 | 48 | 49 | 56 | 57 | 58 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /app-toolbar/test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | app-toolbar tests 15 | 16 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app-layout", 3 | "license": "http://polymer.github.io/LICENSE.txt" 4 | } 5 | -------------------------------------------------------------------------------- /demo/demo1.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | demo1 18 | 19 | 20 | 21 | 32 | 33 | 34 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 |
81 | 82 | 83 | 84 | 85 |
My App
86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /demo/demo2.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | demo2 18 | 19 | 20 | 21 | 34 | 35 | 36 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | App name 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 |
My Drive
75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /demo/demo3.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | demo3 18 | 19 | 20 | 21 | 34 | 35 | 36 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | App name 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 |
My Drive
78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /demo/demo7.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | demo7 18 | 19 | 20 | 21 | 34 | 35 | 36 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 |
My Drive
70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | App name 80 | 81 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | app-layout demos 15 | 16 | 17 | 18 | 21 | 31 | 32 | 33 | 34 |
35 | 47 |
48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /demo/sample-content.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | Polymer({ 15 | is: 'sample-content', 16 | 17 | properties: { 18 | 19 | size: {type: Number, value: 0}, 20 | 21 | label: {value: ''}, 22 | 23 | padding: {value: '16px'}, 24 | 25 | margin: {value: '24px'}, 26 | 27 | boxShadow: { 28 | value: 29 | '0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)' 30 | } 31 | 32 | }, 33 | 34 | observers: ['_render(size, label, padding, margin, boxShadow)'], 35 | 36 | _lorem_ipsum_strings: [ 37 | 'Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.', 38 | 'Ut labores minimum atomorum pro. Laudem tibique ut has.', 39 | 'Fugit adolescens vis et, ei graeci forensibus sed.', 40 | 'Convenire definiebas scriptorem eu cum. Sit dolor dicunt consectetuer no.', 41 | 'Ea duis bonorum nec, falli paulo aliquid ei eum.', 42 | 'Usu eu novum principes, vel quodsi aliquip ea.', 43 | 'Has at minim mucius aliquam, est id tempor laoreet.', 44 | 'Pro saepe pertinax ei, ad pri animal labores suscipiantur.', 45 | 'Detracto suavitate repudiandae no eum. Id adhuc minim soluta nam.', 46 | 'Iisque perfecto dissentiet cum et, sit ut quot mandamus, ut vim tibique splendide instructior.', 47 | 'Id nam odio natum malorum, tibique copiosae expetenda mel ea.', 48 | 'Cu mei vide viris gloriatur, at populo eripuit sit.', 49 | 'Modus commodo minimum eum te, vero utinam assueverit per eu.', 50 | 'No nam ipsum lorem aliquip, accumsan quaerendum ei usu.' 51 | ], 52 | 53 | ready: function() { 54 | this.style.display = 'block'; 55 | }, 56 | 57 | _randomString: function(size) { 58 | var ls = this._lorem_ipsum_strings; 59 | var s = ''; 60 | do { 61 | s += ls[Math.floor(Math.random() * ls.length)]; 62 | size--; 63 | } while (size > 0); 64 | return s; 65 | }, 66 | 67 | _randomLetter: function() { 68 | return String.fromCharCode(65 + Math.floor(Math.random() * 26)); 69 | }, 70 | 71 | _render: function(size, label, padding, margin, boxShadow) { 72 | var html = ''; 73 | for (var i = 0; i < size; i++) { 74 | html += '
' + 77 | '
' + 78 | this._randomLetter() + '
' + 79 | '
' + 80 | this.label + ' ' + this._randomString() + '
' + 81 | '

' + this._randomString() + '

' + 82 | '

' + this._randomString(3) + '

' + 83 | '
'; 84 | this.innerHTML = html; 85 | } 86 | } 87 | 88 | }); 89 | -------------------------------------------------------------------------------- /formatconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "style": { 3 | "ReflowComments": false 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /gen-tsd.json: -------------------------------------------------------------------------------- 1 | { 2 | "excludeFiles": [ 3 | "index.html", 4 | "**/test/**", 5 | "**/demo/**", 6 | "templates/**", 7 | "patterns/**" 8 | ], 9 | "excludeIdentifiers": [ 10 | "BlendBackground", 11 | "ElementWithBackground", 12 | "FadeBackground", 13 | "Material", 14 | "ParallaxBackground", 15 | "ResizeSnappedTitle", 16 | "ResizeTitle", 17 | "Waterfall" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /helpers/test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | helpers tests 15 | 16 | 17 | 18 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /helpers/test/register-effect.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | registerEffect 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /helpers/test/scroll.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | scroll 15 | 16 | 17 | 18 | 19 | 20 | 31 | 32 | 33 | 34 |
35 |
36 | 37 |
38 |
39 |
40 | 41 | 118 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "A set of layout elements for your app", 3 | "repository": { 4 | "type": "git", 5 | "url": "git://github.com/PolymerElements/app-layout" 6 | }, 7 | "homepage": "https://github.com/PolymerElements/app-layout", 8 | "name": "@polymer/app-layout", 9 | "license": "BSD-3-Clause", 10 | "devDependencies": { 11 | "@polymer/font-roboto": "^3.0.1", 12 | "@polymer/gen-typescript-declarations": "^1.6.2", 13 | "@polymer/iron-ajax": "^3.0.0-pre.26", 14 | "@polymer/iron-icon": "^3.0.0-pre.26", 15 | "@polymer/iron-icons": "^3.0.0-pre.26", 16 | "@polymer/iron-list": "^3.0.0-pre.26", 17 | "@polymer/iron-pages": "^3.0.0-pre.26", 18 | "@polymer/iron-scroll-threshold": "^3.0.0-pre.26", 19 | "@polymer/paper-fab": "^3.0.0-pre.26", 20 | "@polymer/paper-icon-button": "^3.0.0-pre.26", 21 | "@polymer/paper-item": "^3.0.0-pre.26", 22 | "@polymer/paper-listbox": "^3.0.0-pre.26", 23 | "@polymer/paper-progress": "^3.0.0-pre.26", 24 | "@polymer/paper-spinner": "^3.0.0-pre.26", 25 | "@polymer/paper-styles": "^3.0.0-pre.26", 26 | "@polymer/paper-tabs": "^3.0.0-pre.26", 27 | "@polymer/test-fixture": "^4.0.1", 28 | "@webcomponents/webcomponentsjs": "^2.0.0", 29 | "wct-browser-legacy": "^1.0.2", 30 | "webmat": "^0.2.0" 31 | }, 32 | "scripts": { 33 | "format": "webmat", 34 | "generate-types": "gen-typescript-declarations --deleteExisting --outDir . --verify", 35 | "prepare": "npm run generate-types" 36 | }, 37 | "version": "3.1.0", 38 | "main": "app-layout.js", 39 | "author": "The Polymer Authors", 40 | "dependencies": { 41 | "@polymer/iron-flex-layout": "^3.0.0-pre.26", 42 | "@polymer/iron-media-query": "^3.0.0-pre.26", 43 | "@polymer/iron-resizable-behavior": "^3.0.0-pre.26", 44 | "@polymer/iron-scroll-target-behavior": "^3.0.0-pre.26", 45 | "@polymer/polymer": "^3.0.0" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /patterns/expand-card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | Expand Card 16 | 17 | 18 | 19 | 20 | 21 | 25 | 26 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
71 |
72 |
73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /patterns/md-responsive-toolbar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | Material Design Responsive Toolbar 16 | 17 | 18 | 19 | 20 | 21 | 27 | 28 | 29 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 |
Title
64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /patterns/transform-navigation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | Navigation transformation 16 | 17 | 18 | 19 | 20 | 21 | 25 | 26 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /patterns/transform-navigation/x-app.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '../../app-drawer-layout/app-drawer-layout.js'; 12 | 13 | import '../../app-drawer/app-drawer.js'; 14 | import '../../app-header/app-header.js'; 15 | import '../../app-header-layout/app-header-layout.js'; 16 | import '../../app-toolbar/app-toolbar.js'; 17 | import '@polymer/iron-flex-layout/iron-flex-layout.js'; 18 | import '@polymer/iron-icons/iron-icons.js'; 19 | import '@polymer/iron-media-query/iron-media-query.js'; 20 | import '@polymer/paper-icon-button/paper-icon-button.js'; 21 | import '@polymer/paper-item/paper-item.js'; 22 | import '@polymer/paper-listbox/paper-listbox.js'; 23 | import '@polymer/paper-tabs/paper-tabs.js'; 24 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 25 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 26 | Polymer({ 27 | _template: html` 28 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | `, 93 | 94 | is: 'x-app', 95 | 96 | properties: { 97 | 98 | selected: {type: String, value: 'Item One'}, 99 | 100 | wideLayout: { 101 | type: Boolean, 102 | value: false, 103 | observer: 'onLayoutChange', 104 | }, 105 | 106 | items: { 107 | type: Array, 108 | value: function() { 109 | return ['Item One', 'Item Two', 'Item Three', 'Item Four', 'Item Five']; 110 | } 111 | } 112 | }, 113 | 114 | onLayoutChange: function(wide) { 115 | var drawer = this.$.drawer; 116 | 117 | if (wide && drawer.opened) { 118 | drawer.opened = false; 119 | } 120 | } 121 | }); 122 | -------------------------------------------------------------------------------- /templates/getting-started/index.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | Getting Started 18 | 19 | 20 | 21 | 22 | 23 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /templates/getting-started/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "dependencies": { 4 | "@polymer/app-layout": "^3.0.0-pre.20", 5 | "@polymer/iron-icons": "^3.0.0-pre.20", 6 | "@polymer/paper-icon-button": "^3.0.0-pre.20", 7 | "@polymer/polymer": "^3.0.0" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /templates/getting-started/x-app.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/iron-icons/iron-icons.js'; 12 | import '@polymer/paper-icon-button/paper-icon-button.js'; 13 | import '@polymer/app-layout/app-drawer-layout/app-drawer-layout.js'; 14 | import '@polymer/app-layout/app-drawer/app-drawer.js'; 15 | import '@polymer/app-layout/app-scroll-effects/app-scroll-effects.js'; 16 | import '@polymer/app-layout/app-header/app-header.js'; 17 | import '@polymer/app-layout/app-header-layout/app-header-layout.js'; 18 | import '@polymer/app-layout/app-toolbar/app-toolbar.js'; 19 | import '@polymer/app-layout/demo/sample-content.js'; 20 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 21 | 22 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 23 | Polymer({ 24 | _template: html` 25 | 41 | 42 | 43 | 44 | 45 | Getting Started 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
Title
54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | `, 63 | 64 | is: 'x-app' 65 | }); 66 | -------------------------------------------------------------------------------- /templates/landing-page/index.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | Landing Page 18 | 19 | 20 | 21 | 22 | 23 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /templates/landing-page/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "dependencies": { 4 | "@polymer/app-layout": "^3.0.0-pre.20", 5 | "@polymer/iron-flex-layout": "^3.0.0-pre.20", 6 | "@polymer/iron-icons": "^3.0.0-pre.20", 7 | "@polymer/paper-icon-button": "^3.0.0-pre.20", 8 | "@polymer/polymer": "^3.0.0" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /templates/pesto/index.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | Pesto by Polymer 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 32 | 33 | 42 | 43 | 44 | 45 | 46 | 47 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /templates/pesto/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Pesto", 3 | "name": "Pesto by Polymer", 4 | "display": "standalone", 5 | "icons": [{ 6 | "src": "https://app-layout-assets.appspot.com/assets/pesto/icon-144.png", 7 | "sizes": "144x144", 8 | "type": "image/png" 9 | }, { 10 | "src": "https://app-layout-assets.appspot.com/assets/pesto/icon-256.png", 11 | "sizes": "256x256", 12 | "type": "image/png" 13 | }], 14 | "start_url": "index.html" 15 | } 16 | -------------------------------------------------------------------------------- /templates/pesto/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "dependencies": { 4 | "@polymer/app-layout": "^3.0.0-pre.20", 5 | "@polymer/app-route": "^3.0.0-pre.20", 6 | "@polymer/iron-ajax": "^3.0.0-pre.20", 7 | "@polymer/iron-flex-layout": "^3.0.0-pre.20", 8 | "@polymer/iron-pages": "^3.0.0-pre.20", 9 | "@polymer/iron-selector": "^3.0.0-pre.20", 10 | "@polymer/iron-icon": "^3.0.0-pre.20", 11 | "@polymer/iron-iconset-svg": "^3.0.0-pre.20", 12 | "@polymer/paper-card": "^3.0.0-pre.20", 13 | "@polymer/paper-fab": "^3.0.0-pre.20", 14 | "@polymer/paper-icon-button": "^3.0.0-pre.20", 15 | "@polymer/paper-item": "^3.0.0-pre.20", 16 | "@polymer/paper-listbox": "^3.0.0-pre.20", 17 | "@polymer/paper-menu-button": "^3.0.0-pre.20", 18 | "@polymer/polymer": "^3.0.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /templates/pesto/src/app-icons.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/iron-icon/iron-icon.js'; 12 | import '@polymer/iron-iconset-svg/iron-iconset-svg.js'; 13 | 14 | const $_documentContainer = document.createElement('template'); 15 | $_documentContainer.setAttribute('style', 'display: none;'); 16 | 17 | $_documentContainer.innerHTML = ` 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | `; 31 | 32 | document.head.appendChild($_documentContainer.content); 33 | -------------------------------------------------------------------------------- /templates/publishing/index.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ZUPERKÜLBLOG 19 | 20 | 21 | 22 | 23 | 24 | 29 | 30 | 39 | 40 | 41 | 42 | 43 | 44 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /templates/publishing/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Zuperkülblog", 3 | "short_name": "Zuperkülblog", 4 | "icons": [{ 5 | "src": "//app-layout-assets.appspot.com/assets/zuperkulblog/launcher-icon-128x128.png", 6 | "sizes": "128x128", 7 | "type": "image/png" 8 | }, { 9 | "src": "//app-layout-assets.appspot.com/assets/zuperkulblog/launcher-icon-192x192.png", 10 | "sizes": "192x192", 11 | "type": "image/png" 12 | },{ 13 | "src": "//app-layout-assets.appspot.com/assets/zuperkulblog/launcher-icon-384x384.png", 14 | "sizes": "384x384", 15 | "type": "image/png" 16 | }], 17 | "start_url": "index.html", 18 | "background_color": "#fafafa", 19 | "display": "standalone", 20 | "theme_color": "#fafafa" 21 | } 22 | -------------------------------------------------------------------------------- /templates/publishing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "dependencies": { 4 | "@polymer/app-layout": "^3.0.0-pre.20", 5 | "@polymer/app-route": "^3.0.0-pre.20", 6 | "@polymer/font-roboto": "^3.0.0-pre.20", 7 | "@polymer/iron-ajax": "^3.0.0-pre.20", 8 | "@polymer/iron-flex-layout": "^3.0.0-pre.20", 9 | "@polymer/iron-pages": "^3.0.0-pre.20", 10 | "@polymer/iron-selector": "^3.0.0-pre.20", 11 | "@polymer/iron-icon": "^3.0.0-pre.20", 12 | "@polymer/iron-iconset-svg": "^3.0.0-pre.20", 13 | "@polymer/iron-media-query": "^3.0.0-pre.20", 14 | "@polymer/paper-fab": "^3.0.0-pre.20", 15 | "@polymer/paper-icon-button": "^3.0.0-pre.20", 16 | "@polymer/paper-styles": "^3.0.0-pre.20", 17 | "@polymer/polymer": "^3.0.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /templates/publishing/src/app-icons.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/iron-icon/iron-icon.js'; 12 | import '@polymer/iron-iconset-svg/iron-iconset-svg.js'; 13 | 14 | const $_documentContainer = document.createElement('template'); 15 | $_documentContainer.setAttribute('style', 'display: none;'); 16 | 17 | $_documentContainer.innerHTML = ` 18 | 19 | 20 | 21 | 22 | 23 | `; 24 | 25 | document.head.appendChild($_documentContainer.content); 26 | -------------------------------------------------------------------------------- /templates/publishing/src/article-detail.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/paper-fab/paper-fab.js'; 12 | import './app-icons.js'; 13 | 14 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 15 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 16 | Polymer({ 17 | _template: html` 18 | 85 | 86 |
87 | 88 |
89 |
[[article.author]]
90 |
[[article.title]]
91 |
[[article.date]]
92 | 93 |
94 | 95 |
96 |

{{article.desc}}

97 |

{{article.content}}

98 |
99 | `, 100 | 101 | is: 'article-detail', 102 | 103 | properties: { 104 | 105 | article: Object 106 | 107 | } 108 | }); 109 | -------------------------------------------------------------------------------- /templates/publishing/src/article-headline.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/iron-flex-layout/iron-flex-layout.js'; 12 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 13 | 14 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 15 | Polymer({ 16 | _template: html` 17 | 48 | 49 | 50 |
51 |
[[article.title]]
52 | 53 | `, 54 | 55 | is: 'article-headline', 56 | 57 | properties: { 58 | 59 | article: Object, 60 | 61 | href: String 62 | 63 | } 64 | }); 65 | -------------------------------------------------------------------------------- /templates/shrine/data/featured.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 16, 4 | "title": "Green comfort chair", 5 | "quote": "Leave the tunnel and the rain is fallin amazing things happen when you wait", 6 | "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/chair.png", 7 | "storeName": "Ali’s shop", 8 | "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/ali-connors.png", 9 | "price": "$300", 10 | "category": "Feature" 11 | }, 12 | { 13 | "id": 12, 14 | "title": "Beautiful little teapot", 15 | "quote": "Leave the tunnel and the rain is fallin amazing things happen when you wait", 16 | "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/beachball.png", 17 | "storeName": "Trevor’s shop", 18 | "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/zach.jpg", 19 | "price": "$300", 20 | "category": "Latest" 21 | }, 22 | { 23 | "id": 6, 24 | "title": "Original Sunnies For U", 25 | "quote": "Leave the tunnel and the rain is fallin amazing things happen when you wait", 26 | "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/chucks.png", 27 | "storeName": "Sandra’s shop", 28 | "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/sandra-adams.jpg", 29 | "price": "$300", 30 | "category": "Fashion" 31 | }, 32 | { 33 | "id": 17, 34 | "title": "Folding Chair", 35 | "quote": "Leave the tunnel and the rain is fallin amazing things happen when you wait", 36 | "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/lawn_chair.png", 37 | "storeName": "Stella’s shop", 38 | "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/16c477b.jpg", 39 | "price": "$300", 40 | "category": "Furniture" 41 | }, 42 | { 43 | "id": 18, 44 | "title": "Better wearing heels", 45 | "quote": "Leave the tunnel and the rain is fallin amazing things happen when you wait", 46 | "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/heels.png", 47 | "storeName": "Peter’s shop", 48 | "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/peter-carlsson.png", 49 | "price": "$300", 50 | "category": "Beauty" 51 | }, 52 | { 53 | "id": 3, 54 | "title": "Red Popsicle", 55 | "quote": "Leave the tunnel and the rain is fallin amazing things happen when you wait", 56 | "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/popsicle.png", 57 | "storeName": "Trevor’s shop", 58 | "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/zach.jpg", 59 | "price": "$300", 60 | "category": "Food" 61 | }, 62 | { 63 | "id": 10, 64 | "title": "Best gift for the traveler", 65 | "quote": "Leave the tunnel and the rain is fallin amazing things happen when you wait", 66 | "imageUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/backpack.png", 67 | "storeName": "Sandra’s shop", 68 | "storeAvatarUrl": "https://www.gstatic.com/angular/material-adaptive/shrine/sandra-adams.jpg", 69 | "price": "$300", 70 | "category": "Travel" 71 | } 72 | ] -------------------------------------------------------------------------------- /templates/shrine/index.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | Shrine 19 | 20 | 21 | 22 | 23 | 24 | 25 | 29 | 30 | 38 | 39 | 40 | 41 | 42 | 43 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /templates/shrine/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Shrine", 3 | "short_name": "Shrine by Polymer", 4 | "icons": [{ 5 | "src": "//app-layout-assets.appspot.com/assets/shrine/launcher-icon-128x128.png", 6 | "sizes": "128x128", 7 | "type": "image/png" 8 | }, { 9 | "src": "//app-layout-assets.appspot.com/assets/shrine/launcher-icon-192x192.png", 10 | "sizes": "192x192", 11 | "type": "image/png" 12 | },{ 13 | "src": "//app-layout-assets.appspot.com/assets/shrine/launcher-icon-384x384.png", 14 | "sizes": "384x384", 15 | "type": "image/png" 16 | }], 17 | "start_url": "index.html", 18 | "background_color": "#fff", 19 | "display": "standalone", 20 | "theme_color": "#fff" 21 | } 22 | 23 | -------------------------------------------------------------------------------- /templates/shrine/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "dependencies": { 4 | "@polymer/app-layout": "^3.0.0-pre.20", 5 | "@polymer/app-route": "^3.0.0-pre.20", 6 | "@polymer/iron-ajax": "^3.0.0-pre.20", 7 | "@polymer/iron-flex-layout": "^3.0.0-pre.20", 8 | "@polymer/iron-pages": "^3.0.0-pre.20", 9 | "@polymer/iron-icon": "^3.0.0-pre.20", 10 | "@polymer/iron-icons": "^3.0.0-pre.20", 11 | "@polymer/iron-media-query": "^3.0.0-pre.20", 12 | "@polymer/paper-fab": "^3.0.0-pre.20", 13 | "@polymer/paper-icon-button": "^3.0.0-pre.20", 14 | "@polymer/paper-tabs": "^3.0.0-pre.20", 15 | "@polymer/polymer": "^3.0.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /templates/shrine/src/shrine-item.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/iron-icons/iron-icons.js'; 12 | import '@polymer/iron-icon/iron-icon.js'; 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | 15 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 16 | Polymer({ 17 | _template: html` 18 | 105 | 106 |
107 |

[[item.title]]

108 | [[item.price]] 109 | 110 |
111 | 112 | [[item.storeName]] 113 |
114 | `, 115 | 116 | is: 'shrine-item', 117 | 118 | properties: { 119 | 120 | item: {type: Object} 121 | 122 | } 123 | }); 124 | -------------------------------------------------------------------------------- /templates/shrine/src/shrine-list.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import './shrine-item.js'; 12 | 13 | import './shrine-featured-item.js'; 14 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 15 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 16 | Polymer({ 17 | _template: html` 18 | 84 | 85 | 86 | 87 |
88 | 93 |
94 | `, 95 | 96 | is: 'shrine-list', 97 | 98 | properties: { 99 | 100 | items: {type: Array}, 101 | 102 | featuredItem: {type: Object}, 103 | 104 | section: {type: String} 105 | }, 106 | 107 | _sortItems: function() { 108 | return Math.round(Math.random() * 3) - 1; 109 | } 110 | }); 111 | -------------------------------------------------------------------------------- /templates/shrine/src/shrine-simple-item.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 12 | 13 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 14 | Polymer({ 15 | _template: html` 16 | 58 | 59 |
60 | `, 61 | 62 | is: 'shrine-simple-item', 63 | 64 | properties: { 65 | 66 | item: {type: Object} 67 | 68 | } 69 | }); 70 | -------------------------------------------------------------------------------- /templates/test-drive/index.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | Test Drive 19 | 20 | 21 | 22 | 23 | 24 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /templates/test-drive/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "dependencies": { 4 | "@polymer/app-layout": "^3.0.0-pre.20", 5 | "@polymer/iron-iconset-svg": "^3.0.0-pre.20", 6 | "@polymer/paper-checkbox": "^3.0.0-pre.20", 7 | "@polymer/paper-icon-button": "^3.0.0-pre.20", 8 | "@polymer/polymer": "^3.0.0" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | Tests 16 | 17 | 18 | 19 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /wct.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "local": { 4 | "browserOptions": { 5 | "chrome": [ 6 | "no-sandbox", 7 | "headless", 8 | "disable-gpu" 9 | ], 10 | "firefox": [ 11 | "-headless" 12 | ] 13 | } 14 | } 15 | } 16 | } --------------------------------------------------------------------------------