jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Polymer

Browse Source
This commit is contained in:
Thaum
2014-11-26 10:18:35 +00:00
parent 5eea4714b2
commit 3408ba9e8d
1210 changed files with 394645 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
rpg-docs/public/bower_components/paper-tabs/.bower.json vendored Normal file
View File

@@ -0,0 +1,24 @@
{
"name": "paper-tabs",
"private": true,
"dependencies": {
"core-icons": "Polymer/core-icons#^0.5.0",
"core-selector": "Polymer/core-selector#^0.5.0",
"core-toolbar": "Polymer/core-toolbar#^0.5.0",
"core-media-query": "Polymer/core-media-query#^0.5.0",
"font-roboto": "Polymer/font-roboto#^0.5.0",
"paper-icon-button": "Polymer/paper-icon-button#^0.5.0",
"paper-ripple": "Polymer/paper-ripple#^0.5.0"
},
"version": "0.5.1",
"homepage": "https://github.com/Polymer/paper-tabs",
"_release": "0.5.1",
"_resolution": {
"type": "version",
"tag": "0.5.1",
"commit": "c962b7538d67f9ff952d8852ad1d55e28b9904d8"
},
"_source": "git://github.com/Polymer/paper-tabs.git",
"_target": "^0.5.0",
"_originalSource": "Polymer/paper-tabs"
}

4
rpg-docs/public/bower_components/paper-tabs/README.md vendored Normal file
View File

@@ -0,0 +1,4 @@
paper-tabs
============
See the [component page](http://www.polymer-project.org/docs/elements/paper-elements.html#paper-tabs) for more information.

14
rpg-docs/public/bower_components/paper-tabs/bower.json vendored Normal file
View File

@@ -0,0 +1,14 @@
{
"name": "paper-tabs",
"private": true,
"dependencies": {
"core-icons": "Polymer/core-icons#^0.5.0",
"core-selector": "Polymer/core-selector#^0.5.0",
"core-toolbar": "Polymer/core-toolbar#^0.5.0",
"core-media-query": "Polymer/core-media-query#^0.5.0",
"font-roboto": "Polymer/font-roboto#^0.5.0",
"paper-icon-button": "Polymer/paper-icon-button#^0.5.0",
"paper-ripple": "Polymer/paper-ripple#^0.5.0"
},
"version": "0.5.1"
}

229
rpg-docs/public/bower_components/paper-tabs/demo.html vendored Normal file
View File

@@ -0,0 +1,229 @@
<!--
@license
Copyright (c) 2014 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
-->
<!doctype html>
<html>
<head>
<title>paper-tabs</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../font-roboto/roboto.html">
<link rel="import" href="paper-tabs.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-media-query/core-media-query.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<style shim-shadowdom>
body {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
margin: 0;
padding: 24px;
color: #333;
}
body.core-narrow {
padding: 8px;
}
paper-tabs, core-toolbar {
background-color: #00bcd4;
color: #fff;
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
}
core-toolbar paper-tabs {
box-shadow: none;
}
paper-tabs[noink][nobar] paper-tab.core-selected {
color: #ffff8d;
}
paper-tabs.transparent-teal {
background-color: transparent;
color: #00bcd4;
box-shadow: none;
}
paper-tabs.transparent-teal::shadow #selectionBar {
background-color: #00bcd4;
}
paper-tabs.transparent-teal paper-tab::shadow #ink {
color: #00bcd4;
}
h3 {
font-size: 16px;
font-weight: 400;
}
</style>
</head>
<body unresolved>
<h3>A. No ink effect and no sliding bar</h3>
<paper-tabs selected="0" noink nobar>
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
<br>
<br>
<h3>B. The bottom bar appears to indicate the selected tab, but without sliding effect.</h3>
<paper-tabs selected="0" noink noslide>
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
<br>
<br>
<h3>C. The bar slides to the selected tab</h3>
<paper-tabs selected="0" noink>
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
<br>
<br>
<h3>D. Inky Tabs</h3>
<paper-tabs selected="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
<br>
<br>
<paper-tabs selected="0" class="transparent-teal">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
<br>
<br>
<h3>E. Scrollable Tabs</h3>
<paper-tabs id="scrollableTabs" selected="0" scrollable>
<paper-tab>NUMBER ONE ITEM</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>THE THIRD ITEM</paper-tab>
<paper-tab>THE ITEM FOUR</paper-tab>
<paper-tab>FIFTH</paper-tab>
<paper-tab>THE SIXTH TAB</paper-tab>
<paper-tab>NUMBER SEVEN</paper-tab>
<paper-tab>EIGHT</paper-tab>
<paper-tab>NUMBER NINE</paper-tab>
<paper-tab>THE TENTH</paper-tab>
<paper-tab>THE ITEM ELEVEN</paper-tab>
<paper-tab>TWELFTH ITEM</paper-tab>
</paper-tabs>
<br>
<br>
<h3>F. Link Tabs</h3>
<paper-tabs selected="0" link>
<paper-tab><a href="#item1" horizontal center-center layout>ITEM ONE</a></paper-tab>
<paper-tab><a href="#item2" horizontal center-center layout>ITEM TWO</a></paper-tab>
<paper-tab><a href="#item3" horizontal center-center layout>ITEM THREE</a></paper-tab>
</paper-tabs>
<br>
<br>
<h3>G. Tabs in Toolbar</h3>
<core-toolbar class="medium-tall">
<paper-icon-button icon="menu"></paper-icon-button>
<div flex>Title</div>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
<div class="bottom fit" horizontal layout>
<paper-tabs selected="0" flex style="max-width: 600px;">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
</div>
</core-toolbar>
<br>
<br>
<core-toolbar class="tall">
<paper-tabs selected="0" class="bottom" self-end style="width: 300px;">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
</paper-tabs>
<div class="bottom" flex></div>
<paper-icon-button class="bottom" icon="search"></paper-icon-button>
</core-toolbar>
<!-- detect when window is narrow -->
<core-media-query id="mediaQuery" query="max-width: 640px"></core-media-query>
<script>
document.querySelector('#mediaQuery').addEventListener('core-media-change',
function(e) {
document.body.classList.toggle('core-narrow', e.detail.matches);
document.querySelector('#scrollableTabs').updateBar();
});
</script>
</body>
</html>

22
rpg-docs/public/bower_components/paper-tabs/index.html vendored Normal file
View File

@@ -0,0 +1,22 @@
<!doctype html>
<!--
Copyright (c) 2014 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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<html>
<head>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../core-component-page/core-component-page.html">
</head>
<body unresolved>
<core-component-page sources='["paper-tabs.html", "paper-tab.html"]'></core-component-page>
</body>
</html>

58
rpg-docs/public/bower_components/paper-tabs/metadata.html vendored Normal file
View File

@@ -0,0 +1,58 @@
<!--
@license
Copyright (c) 2014 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
-->
<x-meta id="paper-tabs" label="Tabs" group="Paper" isContainer>
<template>
<paper-tabs selected="0" style="width: 480px; background-color: #00bcd4; color: #fff; box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
<paper-tab>ITEM FOUR</paper-tab>
<paper-tab>ITEM FIVE</paper-tab>
</paper-tabs>
</template>
<template id="imports">
<link rel="import" href="paper-tabs.html">
</template>
</x-meta>
<x-meta id="paper-tab" label="Tab" group="Paper">
<template>
<paper-tab style="width: 120px; height: 40px;">TAB</paper-tab>
</template>
<template id="imports">
<link rel="import" href="paper-tab.html">
</template>
</x-meta>
<x-meta id="paper-tab-panel" label="Panel with Tabs" group="Paper" isContainer>
<template>
<section layout vertical style="width:420px;height:630px;border:5px solid #ccc;">
<paper-tabs selected="0" noink nobar style="background-color:#00bcd4; color:#fff;box-shadow:0px 3px 2px rgba(0, 0, 0, 0.2);">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
</paper-tabs>
<section flex relative>
</section>
</section>
</template>
<template id="imports">
<link rel="import" href="paper-tabs.html">
</template>
</x-meta>

59
rpg-docs/public/bower_components/paper-tabs/paper-tab.css vendored Normal file
View File

@@ -0,0 +1,59 @@
/*
Copyright (c) 2014 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
*/
:host {
position: relative;
overflow: hidden;
cursor: default;
}
.tab-content {
transition: opacity .1s cubic-bezier(0.4, 0.0, 1, 1), color .1s cubic-bezier(0.4, 0.0, 1, 1);
height: 100%;
margin: 0 12px;
}
:host-context(#tabsContainer.scrollable) .tab-content {
margin: 0 24px;
}
:host-context(paper-tabs[link]) .tab-content {
margin: 0 !important;
}
polyfill-next-selector { content: '.core-narrow #tabsContainer.scrollable :host .tab-content'; }
:host-context(.core-narrow):host-context(#tabsContainer.scrollable) .tab-content {
margin: 0 12px;
}
:host(:not(.core-selected)) .tab-content {
opacity: 0.6;
}
#ink {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #ffff8d;
pointer-events: none;
}
polyfill-next-selector { content: '.tab-content > a'; }
::content > a {
height: 100%;
padding: 0 12px;
/* flex */
-ms-flex: 1 1 0.000000001px;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001px;
flex-basis: 0.000000001px;
}

82
rpg-docs/public/bower_components/paper-tabs/paper-tab.html vendored Normal file
View File

@@ -0,0 +1,82 @@
<!--
Copyright (c) 2014 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
-->
<!--
`paper-tab` is styled to look like a tab. It should be used in conjunction with
`paper-tabs`.
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>
Styling tab:
To change the ink color:
.pink paper-tab::shadow #ink {
color: #ff4081;
}
@group Paper Elements
@element paper-tab
@homepage github.io
-->
<link rel="import" href="../paper-ripple/paper-ripple.html">
<polymer-element name="paper-tab" attributes="noink" role="tab" inline flex center-center horizontal layout>
<template>
<link rel="stylesheet" href="paper-tab.css">
<div class="tab-content" flex auto center-center horizontal layout><content></content></div>
<paper-ripple id="ink" initialOpacity="0.95" opacityDecayVelocity="0.98"></paper-ripple>
</template>
<script>
Polymer('paper-tab', {
/**
* If true, ink ripple effect is disabled.
*
* @attribute noink
* @type boolean
* @default false
*/
noink: false,
eventDelegates: {
down: 'downAction',
up: 'upAction'
},
downAction: function(e) {
if (this.noink || (this.parentElement && this.parentElement.noink)) {
return;
}
this.$.ink.downAction(e);
},
upAction: function() {
this.$.ink.upAction();
},
cancelRipple: function() {
this.$.ink.upAction();
}
});
</script>
</polymer-element>

75
rpg-docs/public/bower_components/paper-tabs/paper-tabs.css vendored Normal file
View File

@@ -0,0 +1,75 @@
/*
Copyright (c) 2014 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
*/
:host {
display: block;
font-size: 14px;
font-weight: 500;
height: 48px;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#tabsContainer {
position: relative;
height: 100%;
white-space: nowrap;
overflow: hidden;
}
#tabsContent {
height: 100%;
}
#tabsContainer.scrollable > #tabsContent {
position: absolute;
white-space: nowrap;
}
.scroll-button {
width: 40px;
padding: 0 12px;
}
.scroll-button > paper-icon-button {
transition: opacity 0.18s;
}
.scroll-button > .hidden {
opacity: 0;
}
#selectionBar {
position: absolute;
height: 2px;
bottom: 0;
left: 0;
width: 0;
background-color: #ffff8d;
transition: width, left;
}
#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);
}
polyfill-next-selector { content: '#tabsContent > *:not(#selectionBar)'; }
::content > * {
height: 100%;
}

328
rpg-docs/public/bower_components/paper-tabs/paper-tabs.html vendored Normal file
View File

@@ -0,0 +1,328 @@
<!--
Copyright (c) 2014 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
-->
<!--
`paper-tabs` is a `core-selector` styled to look like tabs. Tabs make 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="#paper-tab">paper-tab</a> for more information about
`paper-tab`.
A common usage for `paper-tabs` is to use it along with `core-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>
<core-pages selected="{{selected}}>
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
</core-pages>
`paper-tabs` adapt to mobile/narrow layout when there is a `core-narrow` class set
on itself or any of its ancestors.
To use links in tabs, add `link` attribute to `paper-tabs` and put an `<a>`
element in `paper-tab`.
Example:
<paper-tabs selected="0" link>
<paper-tab>
<a href="#link1" horizontal center-center layout>TAB ONE</a>
</paper-tab>
<paper-tab>
<a href="#link2" horizontal center-center layout>TAB TWO</a>
</paper-tab>
<paper-tab>
<a href="#link3" horizontal center-center layout>TAB THREE</a>
</paper-tab>
</paper-tabs>
Styling tabs:
To change the sliding bar color:
paper-tabs.pink::shadow #selectionBar {
background-color: #ff4081;
}
To change the ink ripple color:
paper-tabs.pink paper-tab::shadow #ink {
color: #ff4081;
}
@group Paper Elements
@element paper-tabs
@extends core-selector
@homepage github.io
-->
<link rel="import" href="../core-selector/core-selector.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="paper-tab.html">
<polymer-element name="paper-tabs" extends="core-selector" attributes="noink nobar noslide scrollable hideScrollButton" role="tablist" horizontal center layout>
<template>
<link rel="stylesheet" href="paper-tabs.css">
<div class="scroll-button" hidden?="{{!scrollable || hideScrollButton}}">
<paper-icon-button icon="chevron-left" class="{{ {hidden: leftHidden} | tokenList }}" on-down="{{holdLeft}}" on-up="{{releaseHold}}"></paper-icon-button>
</div>
<div id="tabsContainer" class="{{ {scrollable: scrollable} | tokenList }}" flex on-scroll="{{scroll}}" on-trackstart="{{trackStart}}">
<div id="tabsContent" horizontal layout?="{{!scrollable}}">
<shadow></shadow>
<div id="selectionBar" hidden?="{{nobar}}" on-transitionend="{{barTransitionEnd}}"></div>
</div>
</div>
<div class="scroll-button" hidden?="{{!scrollable || hideScrollButton}}">
<paper-icon-button icon="chevron-right" class="{{ {hidden: rightHidden} | tokenList }}" on-down="{{holdRight}}" on-up="{{releaseHold}}"></paper-icon-button>
</div>
</template>
<script>
Polymer('paper-tabs', {
/**
* If true, ink ripple effect is disabled.
*
* @attribute noink
* @type boolean
* @default false
*/
noink: false,
/**
* If true, the bottom bar to indicate the selected tab will not be shown.
*
* @attribute nobar
* @type boolean
* @default false
*/
nobar: false,
/**
* If true, the slide effect for the bottom bar is disabled.
*
* @attribute noslide
* @type boolean
* @default false
*/
noslide: false,
/**
* If true, tabs are scrollable and the tab width is based on the label width.
*
* @attribute scrollable
* @type boolean
* @default false
*/
scrollable: false,
/**
* If true, dragging on the tabs to scroll is disabled.
*
* @attribute disableDrag
* @type boolean
* @default false
*/
disableDrag: false,
/**
* If true, scroll buttons (left/right arrow) will be hidden for scrollable tabs.
*
* @attribute hideScrollButton
* @type boolean
* @default false
*/
hideScrollButton: false,
activateEvent: 'tap',
step: 10,
holdDelay: 10,
ready: function() {
this.super();
this._trackxHandler = this.trackx.bind(this);
Polymer.addEventListener(this.$.tabsContainer, 'trackx', this._trackxHandler);
this._tabsObserver = new MutationObserver(this.updateBar.bind(this));
},
domReady: function() {
this.async('scroll');
this._tabsObserver.observe(this, {childList: true, subtree: true, characterData: true});
},
detached: function() {
Polymer.removeEventListener(this.$.tabsContainer, 'trackx', this._trackxHandler);
this._tabsObserver.disconnect();
},
trackStart: function(e) {
if (!this.scrollable || this.disableDrag) {
return;
}
var t = e.target;
if (t && t.cancelRipple) {
t.cancelRipple();
}
this._startx = this.$.tabsContainer.scrollLeft;
e.preventTap();
},
trackx: function(e) {
if (!this.scrollable || this.disableDrag) {
return;
}
this.$.tabsContainer.scrollLeft = this._startx - e.dx;
},
scroll: function() {
if (!this.scrollable) {
return;
}
var tc = this.$.tabsContainer;
var l = tc.scrollLeft;
this.leftHidden = l === 0;
this.rightHidden = l === (tc.scrollWidth - tc.clientWidth);
},
holdLeft: function() {
this.holdJob = setInterval(this.scrollToLeft.bind(this), this.holdDelay);
},
holdRight: function() {
this.holdJob = setInterval(this.scrollToRight.bind(this), this.holdDelay);
},
releaseHold: function() {
clearInterval(this.holdJob);
this.holdJob = null;
},
scrollToLeft: function() {
this.$.tabsContainer.scrollLeft -= this.step;
},
scrollToRight: function() {
this.$.tabsContainer.scrollLeft += this.step;
},
/**
* Invoke this to update the size and position of the bottom bar. Usually
* you only need to call this if the `paper-tabs` is initially hidden and
* later becomes visible.
*
* @method updateBar
*/
updateBar: function() {
this.async('selectedItemChanged');
},
selectedItemChanged: function(old) {
var oldIndex = this.selectedIndex;
this.super(arguments);
var s = this.$.selectionBar.style;
if (!this.selectedItem) {
s.width = 0;
s.left = 0;
return;
}
var r = this.$.tabsContent.getBoundingClientRect();
this._w = r.width;
this._l = r.left;
r = this.selectedItem.getBoundingClientRect();
this._sw = r.width;
this._sl = r.left;
this._sOffsetLeft = this._sl - this._l;
if (this.noslide || old == null) {
this.positionBarForSelected();
return;
}
var oldRect = old.getBoundingClientRect();
var m = 5;
this.$.selectionBar.classList.add('expand');
if (oldIndex < this.selectedIndex) {
s.width = this.calcPercent(this._sl + this._sw - oldRect.left) - m + '%';
this._transitionCounter = 1;
} else {
s.width = this.calcPercent(oldRect.left + oldRect.width - this._sl) - m + '%';
s.left = this.calcPercent(this._sOffsetLeft) + m + '%';
this._transitionCounter = 2;
}
if (this.scrollable) {
this.scrollToSelectedIfNeeded();
}
},
scrollToSelectedIfNeeded: function() {
var scrollLeft = this.$.tabsContainer.scrollLeft;
// scroll to selected if needed
if (this._sOffsetLeft + this._sw < scrollLeft ||
this._sOffsetLeft - scrollLeft > this.$.tabsContainer.offsetWidth) {
this.$.tabsContainer.scrollLeft = this._sOffsetLeft;
}
},
positionBarForSelected: function() {
var s = this.$.selectionBar.style;
s.width = this.calcPercent(this._sw) + '%';
s.left = this.calcPercent(this._sOffsetLeft) + '%';
},
calcPercent: function(w) {
return 100 * w / this._w;
},
barTransitionEnd: function(e) {
this._transitionCounter--;
var cl = this.$.selectionBar.classList;
if (cl.contains('expand') && !this._transitionCounter) {
cl.remove('expand');
cl.add('contract');
this.positionBarForSelected();
} else if (cl.contains('contract')) {
cl.remove('contract');
}
}
});
</script>
</polymer-element>