third_party/polymer/v1_0/components/paper-header-panel/paper-header-panel.html - Issue 1269803005: Remove third_party/polymer from .gitignore

Unified Diff: third_party/polymer/v1_0/components/paper-header-panel/paper-header-panel.html

Issue 1269803005: Remove third_party/polymer from .gitignore (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 5 years, 5 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « third_party/polymer/v1_0/components/paper-header-panel/index.html ('k') | third_party/polymer/v1_0/components/paper-icon-button/.bower.json » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/polymer/v1_0/components/paper-header-panel/paper-header-panel.html

diff --git a/third_party/polymer/v1_0/components/paper-header-panel/paper-header-panel.html b/third_party/polymer/v1_0/components/paper-header-panel/paper-header-panel.html

deleted file mode 100644

index d337995eb190322488e824cbeb42578f6410bd35..0000000000000000000000000000000000000000

--- a/third_party/polymer/v1_0/components/paper-header-panel/paper-header-panel.html

+++ /dev/null

@@ -1,494 +0,0 @@

-<!--

-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt

-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt

-Code distributed by Google as part of the polymer project is also

-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt

--->

-<link rel="import" href="../polymer/polymer.html">

-<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

-<!--

-`paper-header-panel` contains a header section and a content panel section.

-__Important:__ The `paper-header-panel` will not display if its parent does not have a height.

-Using layout classes, you can make the `paper-header-panel` fill the screen

- <body class="fullbleed layout vertical">

- <paper-header-panel class="flex">

- <paper-toolbar>

- <div>Hello World!</div>

- </paper-toolbar>

- </paper-header-panel>

- </body>

-Special support is provided for scrolling modes when one uses a paper-toolbar or equivalent for the

-header section.

-Example:

- <paper-header-panel>

- <paper-toolbar>Header</paper-toolbar>

- <div>Content goes here...</div>

- </paper-header-panel>

-If you want to use other than `paper-toolbar` for the header, add `paper-header` class to that

-element.

-Example:

- <paper-header-panel>

- <div class="paper-header">Header</div>

- <div>Content goes here...</div>

- </paper-header-panel>

-To have the content fit to the main area, use the `fit` class.

- <paper-header-panel>

- <div class="paper-header">standard</div>

- <div class="fit">content fits 100% below the header</div>

- </paper-header-panel>

-Modes

-Controls header and scrolling behavior. Options are `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and

-`cover`. Default is `standard`.

-Mode | Description

-----------------|-------------

-`standard` | The header is a step above the panel. The header will consume the panel at the point of entry, preventing it from passing through to the opposite side.

-`seamed` | The header is presented as seamed with the panel.

-`waterfall` | Similar to standard mode, but header is initially presented as seamed with panel, but then separates to form the step.

-`waterfall-tall` | The header is initially taller (`tall` class is added to the header). As the user scrolls, the header separates (forming an edge) while condensing (`tall` class is removed from the header).

-`scroll` | The header keeps its seam with the panel, and is pushed off screen.

-`cover` | The panel covers the whole `paper-header-panel` including the header. This allows user to style the panel in such a way that the panel is partially covering the header.

-Example:

- <paper-header-panel mode="waterfall">

- <div class="paper-header">standard</div>

- <div class="content fit">content fits 100% below the header</div>

- </paper-header-panel>

-Styling header panel:

-To change the shadow that shows up underneath the header:

- paper-header-panel {

- --paper-header-panel-shadow: {

- height: 6px;

- bottom: -6px;

- box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);

- };

- }

-To change the panel container in different modes:

- paper-slider {

- --paper-header-panel-standard-container: {

- border: 1px solid gray;

- };

- --paper-header-panel-cover-container: {

- border: 1px solid gray;

- };

- --paper-header-panel-waterfall-container: {

- border: 1px solid gray;

- };

- --paper-header-panel-waterfall-tall-container: {

- border: 1px solid gray;

- };

- }

-@group Paper Elements

-@element paper-header-panel

-@demo demo/index.html

-@hero hero.svg

--->

-<dom-module id="paper-header-panel">

- <style>

- :host {

- @apply(--layout);

- @apply(--layout-vertical);

- display: block;

- position: relative;

- height: 100%;

- /* Create a stack context, we will need it for the shadow*/

- z-index: 0;

- }

- :root {

- /**

- * Default paper header panel shadow

- */

- --paper-header-panel-shadow: {

- height: 6px;

- bottom: -6px;

- box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);

- };

- }

- #mainContainer {

- @apply(--layout-flex);

- position: relative;

- overflow-y: auto;

- overflow-x: hidden;

- -webkit-overflow-scrolling: touch;

- flex-basis: 0.0001px;

- }

- /*

- * mode: scroll

- */

- :host([mode=scroll]) #mainContainer {

- @apply(--paper-header-panel-scroll-container);

- overflow: visible;

- }

- :host([mode=scroll]) {

- overflow-y: auto;

- overflow-x: hidden;

- -webkit-overflow-scrolling: touch;

- }

- /*

- * mode: cover

- */

- :host([mode=cover]) #mainContainer {

- @apply(--paper-header-panel-cover-container);

- position: absolute;

- top: 0;

- right: 0;

- bottom: 0;

- left: 0;

- }

- /*

- * mode: standard

- */

- :host([mode=standard]) #mainContainer {

- @apply(--paper-header-panel-standard-container);

- }

- /*

- * mode: waterfall

- */

- :host([mode=waterfall]) #mainContainer {

- @apply(--paper-header-panel-waterfall-container);

- }

- /*

- * mode: waterfall-tall

- */

- :host([mode=waterfall-tall]) #mainContainer {

- @apply(--paper-header-panel-waterfall-tall-container);

- }

- :host ::content paper-toolbar,

- :host ::content .paper-header {

- position: relative;

- overflow: visible !important;

- }

- :host ::content paper-toolbar:after,

- :host ::content .paper-header:after {

- @apply(--paper-header-panel-shadow);

- -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;

- transition: opacity 0.5s, transform 0.5s;

- opacity: 0;

- content: "";

- width: 100%;

- position: absolute;

- left: 0px;

- right: 0px;

- z-index: 1;

- -webkit-transform: scale3d(1, 0, 1);

- -webkit-transform-origin: 0% 0%;

- transform: scale3d(1, 0, 1);

- transform-origin: 0% 0%;

- }

- :host ::content paper-toolbar.has-shadow:after,

- :host ::content .paper-header.has-shadow:after {

- opacity: 1;

- -webkit-transform: scale3d(1, 1, 1);

- transform: scale3d(1, 1, 1);

- }

- </style>

- <template>

- <content id="headerContent" select="paper-toolbar, .paper-header"></content>

- <div id="mainContainer" class$="[[_computeMainContainerClass(mode)]]">

- <content id="mainContent" select="*"></content>

- </div>

- </template>

-</dom-module>

-<script>

- (function() {

- 'use strict';

- var SHADOW_WHEN_SCROLLING = 1;

- var SHADOW_ALWAYS = 2;

- var MODE_CONFIGS = {

- outerScroll: {

- scroll: true

- },

- shadowMode: {

- standard: SHADOW_ALWAYS,

- waterfall: SHADOW_WHEN_SCROLLING,

- 'waterfall-tall': SHADOW_WHEN_SCROLLING

- },

- tallMode: {

- 'waterfall-tall': true

- }

- };

- Polymer({

- is: 'paper-header-panel',

- /**

- * Fired when the content has been scrolled. `event.detail.target` returns

- * the scrollable element which you can use to access scroll info such as

- * `scrollTop`.

- *

- * <paper-header-panel on-content-scroll="{{scrollHandler}}">

- * ...

- * </paper-header-panel>

- *

- * scrollHandler: function(event) {

- * var scroller = event.detail.target;

- * console.log(scroller.scrollTop);

- * }

- *

- * @event content-scroll

- */

- properties: {

- /**

- * Controls header and scrolling behavior. Options are

- * `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and

- * `cover`. Default is `standard`.

- *

- * `standard`: The header is a step above the panel. The header will consume the

- * panel at the point of entry, preventing it from passing through to the

- * opposite side.

- *

- * `seamed`: The header is presented as seamed with the panel.

- *

- * `waterfall`: Similar to standard mode, but header is initially presented as

- * seamed with panel, but then separates to form the step.

- *

- * `waterfall-tall`: The header is initially taller (`tall` class is added to

- * the header). As the user scrolls, the header separates (forming an edge)

- * while condensing (`tall` class is removed from the header).

- *

- * `scroll`: The header keeps its seam with the panel, and is pushed off screen.

- *

- * `cover`: The panel covers the whole `paper-header-panel` including the

- * header. This allows user to style the panel in such a way that the panel is

- * partially covering the header.

- *

- * <paper-header-panel mode="cover">

- * <paper-toolbar class="tall">

- * <core-icon-button icon="menu"></core-icon-button>

- * </paper-toolbar>

- * <div class="content"></div>

- * </paper-header-panel>

- */

- mode: {

- type: String,

- value: 'standard',

- observer: '_modeChanged',

- reflectToAttribute: true

- },

- /**

- * If true, the drop-shadow is always shown no matter what mode is set to.

- */

- shadow: {

- type: Boolean,

- value: false

- },

- /**

- * The class used in waterfall-tall mode. Change this if the header

- * accepts a different class for toggling height, e.g. "medium-tall"

- */

- tallClass: {

- type: String,

- value: 'tall'

- },

- /**

- * If true, the scroller is at the top

- */

- atTop: {

- type: Boolean,

- value: true,

- readOnly: true

- }

- },

- observers: [

- '_computeDropShadowHidden(atTop, mode, shadow)'

- ],

- ready: function() {

- this.scrollHandler = this._scroll.bind(this);

- this._addListener();

- // Run `scroll` logic once to initialze class names, etc.

- this._keepScrollingState();

- },

- detached: function() {

- this._removeListener();

- },

- /**

- * Returns the header element

- *

- * @property header

- * @type Object

- */

- get header() {

- return Polymer.dom(this.$.headerContent).getDistributedNodes()[0];

- },

- /**

- * Returns the scrollable element.

- *

- * @property scroller

- * @type Object

- */

- get scroller() {

- return this._getScrollerForMode(this.mode);

- },

- /**

- * Returns true if the scroller has a visible shadow.

- *

- * @property visibleShadow

- * @type Boolean

- */

- get visibleShadow() {

- return this.header.classList.contains('has-shadow');

- },

- _computeDropShadowHidden: function(atTop, mode, shadow) {

- var shadowMode = MODE_CONFIGS.shadowMode[mode];

- if (this.shadow) {

- this.toggleClass('has-shadow', true, this.header);

- } else if (shadowMode === SHADOW_ALWAYS) {

- this.toggleClass('has-shadow', true, this.header);

- } else if (shadowMode === SHADOW_WHEN_SCROLLING && !atTop) {

- this.toggleClass('has-shadow', true, this.header);

- } else {

- this.toggleClass('has-shadow', false, this.header);

- }

- },

- _computeMainContainerClass: function(mode) {

- // TODO: It will be useful to have a utility for classes

- // e.g. Polymer.Utils.classes({ foo: true });

- var classes = {};

- classes['flex'] = mode !== 'cover';

- return Object.keys(classes).filter(

- function(className) {

- return classes[className];

- }).join(' ');

- },

- _addListener: function() {

- this.scroller.addEventListener('scroll', this.scrollHandler, false);

- },

- _removeListener: function() {

- this.scroller.removeEventListener('scroll', this.scrollHandler);

- },

- _modeChanged: function(newMode, oldMode) {

- var configs = MODE_CONFIGS;

- var header = this.header;

- var animateDuration = 200;

- if (header) {

- // in tallMode it may add tallClass to the header; so do the cleanup

- // when mode is changed from tallMode to not tallMode

- if (configs.tallMode[oldMode] && !configs.tallMode[newMode]) {

- header.classList.remove(this.tallClass);

- this.async(function() {

- header.classList.remove('animate');

- }, animateDuration);

- } else {

- header.classList.toggle('animate', configs.tallMode[newMode]);

- }

- this._keepScrollingState();

- },

- _keepScrollingState: function () {

- var main = this.scroller;

- var header = this.header;

- this._setAtTop(main.scrollTop === 0);

- if (header && MODE_CONFIGS.tallMode[this.mode]) {

- this.toggleClass(this.tallClass, this.atTop ||

- header.classList.contains(this.tallClass) &&

- main.scrollHeight < this.offsetHeight, header);

- }

- },

- _scroll: function(e) {

- this._keepScrollingState();

- this.fire('content-scroll', {target: this.scroller}, {bubbles: false});

- },

- _getScrollerForMode: function(mode) {

- return MODE_CONFIGS.outerScroll[mode] ?

- this : this.$.mainContainer;

- }

- });

- })();

-</script>