diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-tabs/paper-tabs.html')
| -rw-r--r-- | catapult/third_party/polymer/components/paper-tabs/paper-tabs.html | 661 |
1 files changed, 661 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-tabs/paper-tabs.html b/catapult/third_party/polymer/components/paper-tabs/paper-tabs.html new file mode 100644 index 00000000..bc504e1a --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tabs/paper-tabs.html @@ -0,0 +1,661 @@ +<!-- +@license +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. +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"> +<link rel="import" href="../iron-icon/iron-icon.html"> +<link rel="import" href="../iron-menu-behavior/iron-menubar-behavior.html"> +<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html"> +<link rel="import" href="../paper-icon-button/paper-icon-button.html"> +<link rel="import" href="../paper-styles/color.html"> +<link rel="import" href="paper-tabs-icons.html"> +<link rel="import" href="paper-tab.html"> + +<!-- +Material design: [Tabs](https://www.google.com/design/spec/components/tabs.html) + +`paper-tabs` makes it easy to explore and switch between different views or functional aspects of +an app, or to browse categorized data sets. + +Use `selected` property to get or set the selected tab. + +Example: + + <paper-tabs selected="0"> + <paper-tab>TAB 1</paper-tab> + <paper-tab>TAB 2</paper-tab> + <paper-tab>TAB 3</paper-tab> + </paper-tabs> + +See <a href="?active=paper-tab">paper-tab</a> for more information about +`paper-tab`. + +A common usage for `paper-tabs` is to use it along with `iron-pages` to switch +between different views. + + <paper-tabs selected="{{selected}}"> + <paper-tab>Tab 1</paper-tab> + <paper-tab>Tab 2</paper-tab> + <paper-tab>Tab 3</paper-tab> + </paper-tabs> + + <iron-pages selected="{{selected}}"> + <div>Page 1</div> + <div>Page 2</div> + <div>Page 3</div> + </iron-pages> + + +To use links in tabs, add `link` attribute to `paper-tab` and put an `<a>` +element in `paper-tab` with a `tabindex` of -1. + +Example: + +<pre><code> +<style is="custom-style"> + .link { + @apply(--layout-horizontal); + @apply(--layout-center-center); + } +</style> + +<paper-tabs selected="0"> + <paper-tab link> + <a href="#link1" class="link" tabindex="-1">TAB ONE</a> + </paper-tab> + <paper-tab link> + <a href="#link2" class="link" tabindex="-1">TAB TWO</a> + </paper-tab> + <paper-tab link> + <a href="#link3" class="link" tabindex="-1">TAB THREE</a> + </paper-tab> +</paper-tabs> +</code></pre> + +### Styling + +The following custom properties and mixins are available for styling: + +Custom property | Description | Default +----------------|-------------|---------- +`--paper-tabs-selection-bar-color` | Color for the selection bar | `--paper-yellow-a100` +`--paper-tabs-selection-bar` | Mixin applied to the selection bar | `{}` +`--paper-tabs` | Mixin applied to the tabs | `{}` +`--paper-tabs-content` | Mixin applied to the content container of tabs | `{}` +`--paper-tabs-container` | Mixin applied to the layout container of tabs | `{}` + +@hero hero.svg +@demo demo/index.html +--> + +<dom-module id="paper-tabs"> + <template> + <style> + :host { + @apply(--layout); + @apply(--layout-center); + + height: 48px; + font-size: 14px; + font-weight: 500; + overflow: hidden; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; + + /* NOTE: Both values are needed, since some phones require the value to be `transparent`. */ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; + + @apply(--paper-tabs); + } + + :host-context([dir=rtl]) { + @apply(--layout-horizontal-reverse); + } + + #tabsContainer { + position: relative; + height: 100%; + white-space: nowrap; + overflow: hidden; + @apply(--layout-flex-auto); + @apply(--paper-tabs-container); + } + + #tabsContent { + height: 100%; + -moz-flex-basis: auto; + -ms-flex-basis: auto; + flex-basis: auto; + @apply(--paper-tabs-content); + } + + #tabsContent.scrollable { + position: absolute; + white-space: nowrap; + } + + #tabsContent:not(.scrollable), + #tabsContent.scrollable.fit-container { + @apply(--layout-horizontal); + } + + #tabsContent.scrollable.fit-container { + min-width: 100%; + } + + #tabsContent.scrollable.fit-container > ::content > * { + /* IE - prevent tabs from compressing when they should scroll. */ + -ms-flex: 1 0 auto; + -webkit-flex: 1 0 auto; + flex: 1 0 auto; + } + + .hidden { + display: none; + } + + .not-visible { + opacity: 0; + cursor: default; + } + + paper-icon-button { + width: 48px; + height: 48px; + padding: 12px; + margin: 0 4px; + } + + #selectionBar { + position: absolute; + height: 0; + bottom: 0; + left: 0; + right: 0; + border-bottom: 2px solid var(--paper-tabs-selection-bar-color, --paper-yellow-a100); + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transform-origin: left center; + transform-origin: left center; + transition: -webkit-transform; + transition: transform; + + @apply(--paper-tabs-selection-bar); + } + + #selectionBar.align-bottom { + top: 0; + bottom: auto; + } + + #selectionBar.expand { + transition-duration: 0.15s; + transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1); + } + + #selectionBar.contract { + transition-duration: 0.18s; + transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); + } + + #tabsContent > ::content > *:not(#selectionBar) { + height: 100%; + } + </style> + + <paper-icon-button icon="paper-tabs:chevron-left" class$="[[_computeScrollButtonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onLeftScrollButtonDown" tabindex="-1"></paper-icon-button> + + <div id="tabsContainer" on-track="_scroll" on-down="_down"> + <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable, fitContainer)]]"> + <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignBottom)]]" + on-transitionend="_onBarTransitionEnd"></div> + <content select="*"></content> + </div> + </div> + + <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollButtonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button> + + </template> + + <script> + Polymer({ + is: 'paper-tabs', + + behaviors: [ + Polymer.IronResizableBehavior, + Polymer.IronMenubarBehavior + ], + + properties: { + /** + * If true, ink ripple effect is disabled. When this property is changed, + * all descendant `<paper-tab>` elements have their `noink` property + * changed to the new value as well. + */ + noink: { + type: Boolean, + value: false, + observer: '_noinkChanged' + }, + + /** + * If true, the bottom bar to indicate the selected tab will not be shown. + */ + noBar: { + type: Boolean, + value: false + }, + + /** + * If true, the slide effect for the bottom bar is disabled. + */ + noSlide: { + type: Boolean, + value: false + }, + + /** + * If true, tabs are scrollable and the tab width is based on the label width. + */ + scrollable: { + type: Boolean, + value: false + }, + + /** + * If true, tabs expand to fit their container. This currently only applies when + * scrollable is true. + */ + fitContainer: { + type: Boolean, + value: false + }, + + /** + * If true, dragging on the tabs to scroll is disabled. + */ + disableDrag: { + type: Boolean, + value: false + }, + + /** + * If true, scroll buttons (left/right arrow) will be hidden for scrollable tabs. + */ + hideScrollButtons: { + type: Boolean, + value: false + }, + + /** + * If true, the tabs are aligned to bottom (the selection bar appears at the top). + */ + alignBottom: { + type: Boolean, + value: false + }, + + selectable: { + type: String, + value: 'paper-tab' + }, + + /** + * If true, tabs are automatically selected when focused using the + * keyboard. + */ + autoselect: { + type: Boolean, + value: false + }, + + /** + * The delay (in milliseconds) between when the user stops interacting + * with the tabs through the keyboard and when the focused item is + * automatically selected (if `autoselect` is true). + */ + autoselectDelay: { + type: Number, + value: 0 + }, + + _step: { + type: Number, + value: 10 + }, + + _holdDelay: { + type: Number, + value: 1 + }, + + _leftHidden: { + type: Boolean, + value: false + }, + + _rightHidden: { + type: Boolean, + value: false + }, + + _previousTab: { + type: Object + } + }, + + hostAttributes: { + role: 'tablist' + }, + + listeners: { + 'iron-resize': '_onTabSizingChanged', + 'iron-items-changed': '_onTabSizingChanged', + 'iron-select': '_onIronSelect', + 'iron-deselect': '_onIronDeselect' + }, + + keyBindings: { + 'left:keyup right:keyup': '_onArrowKeyup' + }, + + created: function() { + this._holdJob = null; + this._pendingActivationItem = undefined; + this._pendingActivationTimeout = undefined; + this._bindDelayedActivationHandler = this._delayedActivationHandler.bind(this); + this.addEventListener('blur', this._onBlurCapture.bind(this), true); + }, + + ready: function() { + this.setScrollDirection('y', this.$.tabsContainer); + }, + + detached: function() { + this._cancelPendingActivation(); + }, + + _noinkChanged: function(noink) { + var childTabs = Polymer.dom(this).querySelectorAll('paper-tab'); + childTabs.forEach(noink ? this._setNoinkAttribute : this._removeNoinkAttribute); + }, + + _setNoinkAttribute: function(element) { + element.setAttribute('noink', ''); + }, + + _removeNoinkAttribute: function(element) { + element.removeAttribute('noink'); + }, + + _computeScrollButtonClass: function(hideThisButton, scrollable, hideScrollButtons) { + if (!scrollable || hideScrollButtons) { + return 'hidden'; + } + + if (hideThisButton) { + return 'not-visible'; + } + + return ''; + }, + + _computeTabsContentClass: function(scrollable, fitContainer) { + return scrollable ? 'scrollable' + (fitContainer ? ' fit-container' : '') : ' fit-container'; + }, + + _computeSelectionBarClass: function(noBar, alignBottom) { + if (noBar) { + return 'hidden'; + } else if (alignBottom) { + return 'align-bottom'; + } + + return ''; + }, + + // TODO(cdata): Add `track` response back in when gesture lands. + + _onTabSizingChanged: function() { + this.debounce('_onTabSizingChanged', function() { + this._scroll(); + this._tabChanged(this.selectedItem); + }, 10); + }, + + _onIronSelect: function(event) { + this._tabChanged(event.detail.item, this._previousTab); + this._previousTab = event.detail.item; + this.cancelDebouncer('tab-changed'); + }, + + _onIronDeselect: function(event) { + this.debounce('tab-changed', function() { + this._tabChanged(null, this._previousTab); + this._previousTab = null; + // See polymer/polymer#1305 + }, 1); + }, + + _activateHandler: function() { + // Cancel item activations scheduled by keyboard events when any other + // action causes an item to be activated (e.g. clicks). + this._cancelPendingActivation(); + + Polymer.IronMenuBehaviorImpl._activateHandler.apply(this, arguments); + }, + + /** + * Activates an item after a delay (in milliseconds). + */ + _scheduleActivation: function(item, delay) { + this._pendingActivationItem = item; + this._pendingActivationTimeout = this.async( + this._bindDelayedActivationHandler, delay); + }, + + /** + * Activates the last item given to `_scheduleActivation`. + */ + _delayedActivationHandler: function() { + var item = this._pendingActivationItem; + this._pendingActivationItem = undefined; + this._pendingActivationTimeout = undefined; + item.fire(this.activateEvent, null, { + bubbles: true, + cancelable: true + }); + }, + + /** + * Cancels a previously scheduled item activation made with + * `_scheduleActivation`. + */ + _cancelPendingActivation: function() { + if (this._pendingActivationTimeout !== undefined) { + this.cancelAsync(this._pendingActivationTimeout); + this._pendingActivationItem = undefined; + this._pendingActivationTimeout = undefined; + } + }, + + _onArrowKeyup: function(event) { + if (this.autoselect) { + this._scheduleActivation(this.focusedItem, this.autoselectDelay); + } + }, + + _onBlurCapture: function(event) { + // Cancel a scheduled item activation (if any) when that item is + // blurred. + if (event.target === this._pendingActivationItem) { + this._cancelPendingActivation(); + } + }, + + get _tabContainerScrollSize () { + return Math.max( + 0, + this.$.tabsContainer.scrollWidth - + this.$.tabsContainer.offsetWidth + ); + }, + + _scroll: function(e, detail) { + if (!this.scrollable) { + return; + } + + var ddx = (detail && -detail.ddx) || 0; + this._affectScroll(ddx); + }, + + _down: function(e) { + // go one beat async to defeat IronMenuBehavior + // autorefocus-on-no-selection timeout + this.async(function() { + if (this._defaultFocusAsync) { + this.cancelAsync(this._defaultFocusAsync); + this._defaultFocusAsync = null; + } + }, 1); + }, + + _affectScroll: function(dx) { + this.$.tabsContainer.scrollLeft += dx; + + var scrollLeft = this.$.tabsContainer.scrollLeft; + + this._leftHidden = scrollLeft === 0; + this._rightHidden = scrollLeft === this._tabContainerScrollSize; + }, + + _onLeftScrollButtonDown: function() { + this._scrollToLeft(); + this._holdJob = setInterval(this._scrollToLeft.bind(this), this._holdDelay); + }, + + _onRightScrollButtonDown: function() { + this._scrollToRight(); + this._holdJob = setInterval(this._scrollToRight.bind(this), this._holdDelay); + }, + + _onScrollButtonUp: function() { + clearInterval(this._holdJob); + this._holdJob = null; + }, + + _scrollToLeft: function() { + this._affectScroll(-this._step); + }, + + _scrollToRight: function() { + this._affectScroll(this._step); + }, + + _tabChanged: function(tab, old) { + if (!tab) { + // Remove the bar without animation. + this.$.selectionBar.classList.remove('expand'); + this.$.selectionBar.classList.remove('contract'); + this._positionBar(0, 0); + return; + } + + var r = this.$.tabsContent.getBoundingClientRect(); + var w = r.width; + var tabRect = tab.getBoundingClientRect(); + var tabOffsetLeft = tabRect.left - r.left; + + this._pos = { + width: this._calcPercent(tabRect.width, w), + left: this._calcPercent(tabOffsetLeft, w) + }; + + if (this.noSlide || old == null) { + // Position the bar without animation. + this.$.selectionBar.classList.remove('expand'); + this.$.selectionBar.classList.remove('contract'); + this._positionBar(this._pos.width, this._pos.left); + return; + } + + var oldRect = old.getBoundingClientRect(); + var oldIndex = this.items.indexOf(old); + var index = this.items.indexOf(tab); + var m = 5; + + // bar animation: expand + this.$.selectionBar.classList.add('expand'); + + var moveRight = oldIndex < index; + var isRTL = this._isRTL; + if (isRTL) { + moveRight = !moveRight; + } + + if (moveRight) { + this._positionBar(this._calcPercent(tabRect.left + tabRect.width - oldRect.left, w) - m, + this._left); + } else { + this._positionBar(this._calcPercent(oldRect.left + oldRect.width - tabRect.left, w) - m, + this._calcPercent(tabOffsetLeft, w) + m); + } + + if (this.scrollable) { + this._scrollToSelectedIfNeeded(tabRect.width, tabOffsetLeft); + } + }, + + _scrollToSelectedIfNeeded: function(tabWidth, tabOffsetLeft) { + var l = tabOffsetLeft - this.$.tabsContainer.scrollLeft; + if (l < 0) { + this.$.tabsContainer.scrollLeft += l; + } else { + l += (tabWidth - this.$.tabsContainer.offsetWidth); + if (l > 0) { + this.$.tabsContainer.scrollLeft += l; + } + } + }, + + _calcPercent: function(w, w0) { + return 100 * w / w0; + }, + + _positionBar: function(width, left) { + width = width || 0; + left = left || 0; + + this._width = width; + this._left = left; + this.transform( + 'translateX(' + left + '%) scaleX(' + (width / 100) + ')', + this.$.selectionBar); + }, + + _onBarTransitionEnd: function(e) { + var cl = this.$.selectionBar.classList; + // bar animation: expand -> contract + if (cl.contains('expand')) { + cl.remove('expand'); + cl.add('contract'); + this._positionBar(this._pos.width, this._pos.left); + // bar animation done + } else if (cl.contains('contract')) { + cl.remove('contract'); + } + } + }); + </script> +</dom-module> |