Removed old polymer components
This commit is contained in:
Stefan Zermatten
@@ -1,73 +0,0 @@
|
||||
<link rel="import" href="../components/polymer/polymer.html">
|
||||
<link rel="import" href="../components/iron-flex-layout/iron-flex-layout-classes.html">
|
||||
<link rel="import" href="../components/paper-styles/classes/typography.html">
|
||||
<link rel="import" href="../components/paper-styles/classes/global.html">
|
||||
|
||||
<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
|
||||
:root {
|
||||
--primary-color: #d13b2e;
|
||||
--light-primary-color: #ff5a4b;
|
||||
--dark-primary-color: #ad2a1f;
|
||||
|
||||
--accent-color: #d13b2e;
|
||||
--light-accent-color: #ff5a4b;
|
||||
--dark-accent-color: #ad2a1f;
|
||||
}
|
||||
paper-item.short {
|
||||
--paper-item-min-height: 32px;
|
||||
}
|
||||
paper-button[raised] {
|
||||
background-color: var(--accent-color);
|
||||
color: #dedede;
|
||||
color: rgba(255,255,255,0.87);
|
||||
}
|
||||
paper-tabs {
|
||||
--paper-tabs-selection-bar-color: var(--accent-color);
|
||||
}
|
||||
paper-tab {
|
||||
--paper-tab-ink: var(--light-accent-color);
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
text-transform: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
letter-spacing: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
#accountSummary{
|
||||
--app-header-background-front-layer: {
|
||||
background-image: url(/png/paper-dice-crown.png);
|
||||
};
|
||||
}
|
||||
.card .top paper-checkbox {
|
||||
--paper-checkbox-unchecked-color: #757575;
|
||||
--paper-checkbox-unchecked-color: rgba(255,255,255,0.54);
|
||||
--paper-checkbox-unchecked-ink-color: #fff;
|
||||
--paper-checkbox-checked-color: #606060;
|
||||
--paper-checkbox-checked-color: rgba(255,255,255,0.30);
|
||||
--paper-checkbox-checked-ink-color: #fff;
|
||||
}
|
||||
paper-input > iron-icon {
|
||||
--iron-icon-width: 23px;
|
||||
--iron-icon-height: 23px;
|
||||
}
|
||||
paper-swatch-picker {
|
||||
--paper-swatch-picker-color-size: 24px;
|
||||
--paper-swatch-picker-icon: {
|
||||
color: #dedede !important;
|
||||
color: rgba(255,255,255,0.87) !important;
|
||||
}
|
||||
}
|
||||
.healthCard #temporaryHitPointSlider {
|
||||
--paper-diff-slider-active-color: #009688; /* teal */
|
||||
--paper-diff-slider-knob-color: #009688;
|
||||
--paper-diff-slider-pin-color: #009688;
|
||||
}
|
||||
.healthCard .extraHitPointSlider {
|
||||
--paper-diff-slider-active-color: #00BCD4; /* cyan */
|
||||
--paper-diff-slider-knob-color: #00BCD4;
|
||||
--paper-diff-slider-pin-color: #00BCD4;
|
||||
}
|
||||
</style>
|
||||
@@ -1,18 +0,0 @@
|
||||
<link rel="import" href="../../components/iron-icon/iron-icon.html">
|
||||
<link rel="import" href="../../components/iron-iconset-svg/iron-iconset-svg.html">
|
||||
<iron-iconset-svg name="dicecloud" size="24">
|
||||
<svg><defs>
|
||||
<g id="code-braces">
|
||||
<path d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z" />
|
||||
</g>
|
||||
<g id="github">
|
||||
<path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
|
||||
</g>
|
||||
<g id="patreon">
|
||||
<path d="M 0,11.704583 C 0,6.129988 4.5275823,0.90539433 10.497051,0.15752807 c 4.277795,-0.49807892 7.513064,1.14423533 9.752176,3.28462863 2.088042,1.9893242 3.332492,4.529078 3.631638,7.5160563 0.248292,2.991465 -0.397865,5.579082 -2.138897,8.017126 C 20.000935,21.368511 16.566733,24.001 12.288938,24.001 H 6.4675474 V 12.512279 c 0.050855,-2.5382585 0.8974395,-4.7295066 3.9786486,-5.7735279 2.687831,-0.7972254 5.822887,0.6955156 6.768189,3.5329199 0.987184,3.036337 -0.448719,5.076516 -2.138897,6.320966 -1.705135,1.244449 -4.337624,1.244449 -6.072674,0.04936 v 3.933777 c 1.136757,0.553421 2.587617,0.702994 3.63463,0.643165 3.769246,-0.538464 6.715839,-2.677362 7.957297,-5.923101 1.28633,-3.425228 0.38889,-7.4188334 -2.288471,-9.9017494 C 15.075488,2.746641 11.530602,2.1034761 7.761356,3.9432271 5.1139094,5.2893863 3.2741585,8.0265768 2.8254387,11.018042 V 23.999504 H 0.04487198 L 0,11.704583 z" style="fill-rule:nonzero"/>
|
||||
</g>
|
||||
<g id="markdown">
|
||||
<path d="M2,16V8H4L7,11L10,8H12V16H10V10.83L7,13.83L4,10.83V16H2M16,8H19V12H21.5L17.5,16.5L13.5,12H16V8Z" />
|
||||
</g>
|
||||
</defs></svg>
|
||||
</iron-iconset-svg>
|
||||
@@ -1,355 +0,0 @@
|
||||
<link rel="import" href="../../components/polymer/polymer.html">
|
||||
<link rel="import" href="../../components/iron-selector/iron-selection.html">
|
||||
|
||||
<script>
|
||||
// jscs:disable
|
||||
/**
|
||||
* A stripped down version of iron-selectable
|
||||
* No multi-select
|
||||
* Assumes attrForSelected = "name"
|
||||
* Behaves a little better with Blaze
|
||||
*/
|
||||
/** @polymerBehavior */
|
||||
Polymer.DicecloudSelectableBehavior = {
|
||||
|
||||
/**
|
||||
* Fired when dicecloud-selector is activated (selected or deselected).
|
||||
* It is fired before the selected items are changed.
|
||||
* Cancel the event to abort selection.
|
||||
*
|
||||
* @event iron-activate
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when an item is selected
|
||||
*
|
||||
* @event iron-select
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when an item is deselected
|
||||
*
|
||||
* @event iron-deselect
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when the list of selectable items changes (e.g., items are
|
||||
* added or removed). The detail of the event is a mutation record that
|
||||
* describes what changed.
|
||||
*
|
||||
* @event iron-items-changed
|
||||
*/
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* Gets or sets the selected element. The default is to use the index of the item.
|
||||
* @type {string|number}
|
||||
*/
|
||||
selected: {
|
||||
type: String,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the currently selected item.
|
||||
*
|
||||
* @type {?Object}
|
||||
*/
|
||||
selectedItem: {
|
||||
type: Object,
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* The event that fires from items when they are selected. Selectable
|
||||
* will listen for this event from items and update the selection state.
|
||||
* Set to empty string to listen to no events.
|
||||
*/
|
||||
activateEvent: {
|
||||
type: String,
|
||||
value: 'tap',
|
||||
observer: '_activateEventChanged'
|
||||
},
|
||||
|
||||
/**
|
||||
* This is a CSS selector string. If this is set, only items that match the CSS selector
|
||||
* are selectable.
|
||||
*/
|
||||
selectable: String,
|
||||
|
||||
/**
|
||||
* The class to set on elements when selected.
|
||||
*/
|
||||
selectedClass: {
|
||||
type: String,
|
||||
value: 'iron-selected'
|
||||
},
|
||||
|
||||
/**
|
||||
* The attribute to set on elements when selected.
|
||||
*/
|
||||
selectedAttribute: {
|
||||
type: String,
|
||||
value: null
|
||||
},
|
||||
|
||||
/**
|
||||
* Default fallback if the selection based on selected with `name`
|
||||
* is not found.
|
||||
*/
|
||||
fallbackSelection: {
|
||||
type: String,
|
||||
value: null
|
||||
},
|
||||
|
||||
/**
|
||||
* The list of items from which a selection can be made.
|
||||
*/
|
||||
items: {
|
||||
type: Array,
|
||||
readOnly: true,
|
||||
notify: true,
|
||||
value: function() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* The set of excluded elements where the key is the `localName`
|
||||
* of the element that will be ignored from the item list.
|
||||
*
|
||||
* @default {template: 1}
|
||||
*/
|
||||
_excludedLocalNames: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return {
|
||||
'template': 1
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_updateSelected(selected)',
|
||||
'_checkFallback(fallbackSelection)'
|
||||
],
|
||||
|
||||
created: function() {
|
||||
this._bindFilterItem = this._filterItem.bind(this);
|
||||
this._selection = new Polymer.IronSelection(this._applySelection.bind(this));
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
this._observer = this._observeItems(this);
|
||||
this._updateItems();
|
||||
if (!this._shouldUpdateSelection) {
|
||||
this._updateSelected();
|
||||
}
|
||||
this._addListener(this.activateEvent);
|
||||
},
|
||||
|
||||
detached: function() {
|
||||
if (this._observer) {
|
||||
Polymer.dom(this).unobserveNodes(this._observer);
|
||||
}
|
||||
this._removeListener(this.activateEvent);
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the index of the given item.
|
||||
*
|
||||
* @method indexOf
|
||||
* @param {Object} item
|
||||
* @returns Returns the index of the item
|
||||
*/
|
||||
indexOf: function(item) {
|
||||
return this.items.indexOf(item);
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the given value.
|
||||
*
|
||||
* @method select
|
||||
* @param {string|number} value the value to select.
|
||||
*/
|
||||
select: function(value) {
|
||||
this.selected = value;
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the previous item.
|
||||
*
|
||||
* @method selectPrevious
|
||||
*/
|
||||
selectPrevious: function() {
|
||||
var length = this.items.length;
|
||||
var index = (Number(this._valueToIndex(this.selected)) - 1 + length) % length;
|
||||
this.selected = this._indexToValue(index);
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the next item.
|
||||
*
|
||||
* @method selectNext
|
||||
*/
|
||||
selectNext: function() {
|
||||
var index = (Number(this._valueToIndex(this.selected)) + 1) % this.items.length;
|
||||
this.selected = this._indexToValue(index);
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the item at the given index.
|
||||
*
|
||||
* @method selectIndex
|
||||
*/
|
||||
selectIndex: function(index) {
|
||||
this.select(this._indexToValue(index));
|
||||
},
|
||||
|
||||
/**
|
||||
* Force a synchronous update of the `items` property.
|
||||
*
|
||||
* NOTE: Consider listening for the `iron-items-changed` event to respond to
|
||||
* updates to the set of selectable items after updates to the DOM list and
|
||||
* selection state have been made.
|
||||
*
|
||||
* WARNING: If you are using this method, you should probably consider an
|
||||
* alternate approach. Synchronously querying for items is potentially
|
||||
* slow for many use cases. The `items` property will update asynchronously
|
||||
* on its own to reflect selectable items in the DOM.
|
||||
*/
|
||||
forceSynchronousItemUpdate: function() {
|
||||
this._updateItems();
|
||||
},
|
||||
|
||||
get _shouldUpdateSelection() {
|
||||
return this.selected != null;
|
||||
},
|
||||
|
||||
_checkFallback: function() {
|
||||
if (this._shouldUpdateSelection) {
|
||||
this._updateSelected();
|
||||
}
|
||||
},
|
||||
|
||||
_addListener: function(eventName) {
|
||||
this.listen(this, eventName, '_activateHandler');
|
||||
},
|
||||
|
||||
_removeListener: function(eventName) {
|
||||
this.unlisten(this, eventName, '_activateHandler');
|
||||
},
|
||||
|
||||
_activateEventChanged: function(eventName, old) {
|
||||
this._removeListener(old);
|
||||
this._addListener(eventName);
|
||||
},
|
||||
|
||||
_updateItems: function() {
|
||||
var nodes = this.selectable
|
||||
? Polymer.dom(this).querySelectorAll(this.selectable)
|
||||
: Polymer.dom(this).queryDistributedElements('*');
|
||||
nodes = Array.prototype.filter.call(nodes, this._bindFilterItem);
|
||||
this._setItems(nodes);
|
||||
},
|
||||
|
||||
_updateSelected: function() {
|
||||
this._selectSelected(this.selected);
|
||||
},
|
||||
|
||||
_selectSelected: function(selected) {
|
||||
this._selection.select(this._valueToItem(this.selected));
|
||||
// Check for items, since this array is populated only when attached
|
||||
// Since Number(0) is falsy, explicitly check for undefined
|
||||
if (this.fallbackSelection && this.items.length && (this._selection.get() === undefined)) {
|
||||
this.selected = this.fallbackSelection;
|
||||
}
|
||||
},
|
||||
|
||||
_filterItem: function(node) {
|
||||
return !this._excludedLocalNames[node.localName];
|
||||
},
|
||||
|
||||
_valueToItem: function(value) {
|
||||
return (value == null) ? null : this.items[this._valueToIndex(value)];
|
||||
},
|
||||
|
||||
_valueToIndex: function(value) {
|
||||
for (var i = 0, item; item = this.items[i]; i++) {
|
||||
if (this._valueForItem(item) == value) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_indexToValue: function(index) {
|
||||
var item = this.items[index];
|
||||
if (item) {
|
||||
return this._valueForItem(item);
|
||||
}
|
||||
},
|
||||
|
||||
_valueForItem: function(item) {
|
||||
return item.getAttribute("name") || item["name"];
|
||||
},
|
||||
|
||||
_applySelection: function(item, isSelected) {
|
||||
if (this.selectedClass) {
|
||||
this.toggleClass(this.selectedClass, isSelected, item);
|
||||
}
|
||||
if (this.selectedAttribute) {
|
||||
this.toggleAttribute(this.selectedAttribute, isSelected, item);
|
||||
}
|
||||
this._selectionChange();
|
||||
this.fire('iron-' + (isSelected ? 'select' : 'deselect'), {item: item});
|
||||
},
|
||||
|
||||
_selectionChange: function() {
|
||||
this._setSelectedItem(this._selection.get());
|
||||
},
|
||||
|
||||
// observe items change under the given node.
|
||||
_observeItems: function(node) {
|
||||
return Polymer.dom(node).observeNodes(function(mutation) {
|
||||
this._updateItems();
|
||||
|
||||
if (this._shouldUpdateSelection) {
|
||||
this._updateSelected();
|
||||
}
|
||||
|
||||
// Let other interested parties know about the change so that
|
||||
// we don't have to recreate mutation observers everywhere.
|
||||
this.fire('iron-items-changed', mutation, {
|
||||
bubbles: false,
|
||||
cancelable: false
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
_activateHandler: function(e) {
|
||||
var t = e.target;
|
||||
var items = this.items;
|
||||
while (t && t != this) {
|
||||
var i = items.indexOf(t);
|
||||
if (i >= 0) {
|
||||
var value = this._indexToValue(i);
|
||||
this._itemActivate(value, t);
|
||||
return;
|
||||
}
|
||||
t = t.parentNode;
|
||||
}
|
||||
},
|
||||
|
||||
_itemActivate: function(value, item) {
|
||||
if (!this.fire('iron-activate',
|
||||
{selected: value, item: item}, {cancelable: true}).defaultPrevented) {
|
||||
this.select(value);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
</script>
|
||||
@@ -1,24 +0,0 @@
|
||||
<link rel="import" href="../../components/polymer/polymer.html">
|
||||
<link rel="import" href="dicecloud-selectable.html">
|
||||
|
||||
<script>
|
||||
// jscs:disable
|
||||
/**
|
||||
`dicecloud-selector` implements DicecloudSelectableBehavior
|
||||
behaves like a simple iron-selector
|
||||
- No multi-select
|
||||
- Assumes attrForSelected = "name"
|
||||
- Behaves a little better with Blaze
|
||||
*/
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'dicecloud-selector',
|
||||
|
||||
behaviors: [
|
||||
Polymer.DicecloudSelectableBehavior
|
||||
]
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@@ -1,18 +0,0 @@
|
||||
<!--
|
||||
Wrap some content in a polymer element, but do nothing else
|
||||
This is a dirty hack to prevent unwarpped elements from having their events
|
||||
broken by Blaze.
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../components/polymer/polymer.html">
|
||||
|
||||
<dom-module id="dicecloud-wrapper">
|
||||
<template>
|
||||
<content></content>
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
is: "dicecloud-wrapper"
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
@@ -1,311 +0,0 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2016 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="../../components/polymer/polymer.html">
|
||||
<link rel="import" href="../../components/paper-styles/default-theme.html">
|
||||
<link rel="import" href="../../components/paper-behaviors/paper-checked-element-behavior.html">
|
||||
|
||||
<!--
|
||||
Material design: [Checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox)
|
||||
|
||||
`paper-checkbox` is a button that can be either checked or unchecked. User
|
||||
can tap the checkbox to check or uncheck it. Usually you use checkboxes
|
||||
to allow user to select multiple options from a set. If you have a single
|
||||
ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`
|
||||
instead.
|
||||
|
||||
Example:
|
||||
|
||||
<paper-checkbox>label</paper-checkbox>
|
||||
|
||||
<paper-checkbox checked> label</paper-checkbox>
|
||||
|
||||
### Styling
|
||||
|
||||
The following custom properties and mixins are available for styling:
|
||||
|
||||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--paper-checkbox-unchecked-background-color` | Checkbox background color when the input is not checked | `transparent`
|
||||
`--paper-checkbox-unchecked-color` | Checkbox border color when the input is not checked | `--primary-text-color`
|
||||
`--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--primary-text-color`
|
||||
`--paper-checkbox-checked-color` | Checkbox color when the input is checked | `--primary-color`
|
||||
`--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the input is checked | `--primary-color`
|
||||
`--paper-checkbox-checkmark-color` | Checkmark color | `white`
|
||||
`--paper-checkbox-label-color` | Label color | `--primary-text-color`
|
||||
`--paper-checkbox-label-checked-color` | Label color when the input is checked | `--paper-checkbox-label-color`
|
||||
`--paper-checkbox-label-spacing` | Spacing between the label and the checkbox | `8px`
|
||||
`--paper-checkbox-label` | Mixin applied to the label | `{}`
|
||||
`--paper-checkbox-label-checked` | Mixin applied to the label when the input is checked | `{}`
|
||||
`--paper-checkbox-error-color` | Checkbox color when invalid | `--error-color`
|
||||
`--paper-checkbox-size` | Size of the checkbox | `18px`
|
||||
`--paper-checkbox-ink-size` | Size of the ripple | `48px`
|
||||
`--paper-checkbox-margin` | Margin around the checkbox container | `initial`
|
||||
`--paper-checkbox-vertical-align` | Vertical alignment of the checkbox container | `middle`
|
||||
|
||||
This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
|
||||
In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
|
||||
|
||||
@demo demo/index.html
|
||||
-->
|
||||
|
||||
<dom-module id="paper-checkbox">
|
||||
<template strip-whitespace>
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
--calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px);
|
||||
/* -1px is a sentinel for the default and is replaced in `attached`. */
|
||||
--calculated-paper-checkbox-ink-size: var(--paper-checkbox-ink-size, -1px);
|
||||
@apply(--paper-font-common-base);
|
||||
line-height: 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
:host([hidden]) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:host(:focus) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#checkboxContainer {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: var(--calculated-paper-checkbox-size);
|
||||
height: var(--calculated-paper-checkbox-size);
|
||||
min-width: var(--calculated-paper-checkbox-size);
|
||||
margin: var(--paper-checkbox-margin, initial);
|
||||
vertical-align: var(--paper-checkbox-vertical-align, middle);
|
||||
background-color: var(--paper-checkbox-unchecked-background-color, transparent);
|
||||
}
|
||||
|
||||
#ink {
|
||||
position: absolute;
|
||||
|
||||
/* Center the ripple in the checkbox by negative offsetting it by
|
||||
* (inkWidth - rippleWidth) / 2 */
|
||||
top: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2);
|
||||
left: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2);
|
||||
width: var(--calculated-paper-checkbox-ink-size);
|
||||
height: var(--calculated-paper-checkbox-ink-size);
|
||||
color: var(--paper-checkbox-unchecked-ink-color, var(--primary-text-color));
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:host-context([dir="rtl"]) #ink {
|
||||
right: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2);
|
||||
left: auto;
|
||||
}
|
||||
|
||||
#ink[checked] {
|
||||
color: var(--paper-checkbox-checked-ink-color, var(--primary-color));
|
||||
}
|
||||
|
||||
#checkbox {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
border: solid 2px;
|
||||
border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color));
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
-webkit-transition: background-color 140ms, border-color 140ms;
|
||||
transition: background-color 140ms, border-color 140ms;
|
||||
}
|
||||
|
||||
/* checkbox checked animations */
|
||||
#checkbox.checked #checkmark {
|
||||
-webkit-animation: checkmark-expand 140ms ease-out forwards;
|
||||
animation: checkmark-expand 140ms ease-out forwards;
|
||||
}
|
||||
|
||||
@-webkit-keyframes checkmark-expand {
|
||||
0% {
|
||||
-webkit-transform: scale(0, 0) rotate(45deg) translateZ(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1, 1) rotate(45deg) translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkmark-expand {
|
||||
0% {
|
||||
transform: scale(0, 0) rotate(45deg) translateZ(0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1, 1) rotate(45deg) translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
#checkbox.checked {
|
||||
background-color: var(--paper-checkbox-checked-color, var(--primary-color));
|
||||
border-color: var(--paper-checkbox-checked-color, var(--primary-color));
|
||||
}
|
||||
|
||||
#checkmark {
|
||||
position: absolute;
|
||||
width: 36%;
|
||||
height: 70%;
|
||||
border-style: solid;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right-width: calc(2/15 * var(--calculated-paper-checkbox-size));
|
||||
border-bottom-width: calc(2/15 * var(--calculated-paper-checkbox-size));
|
||||
border-color: var(--paper-checkbox-checkmark-color, white);
|
||||
-webkit-transform-origin: 97% 86%;
|
||||
transform-origin: 97% 86%;
|
||||
box-sizing: content-box; /* protect against page-level box-sizing */
|
||||
}
|
||||
|
||||
:host-context([dir="rtl"]) #checkmark {
|
||||
-webkit-transform-origin: 50% 14%;
|
||||
transform-origin: 50% 14%;
|
||||
}
|
||||
|
||||
/* label */
|
||||
#checkboxLabel {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding-left: var(--paper-checkbox-label-spacing, 8px);
|
||||
white-space: normal;
|
||||
line-height: normal;
|
||||
color: var(--paper-checkbox-label-color, var(--primary-text-color));
|
||||
@apply(--paper-checkbox-label);
|
||||
}
|
||||
|
||||
:host([checked]) #checkboxLabel {
|
||||
color: var(--paper-checkbox-label-checked-color, var(--paper-checkbox-label-color, var(--primary-text-color)));
|
||||
@apply(--paper-checkbox-label-checked);
|
||||
}
|
||||
|
||||
:host-context([dir="rtl"]) #checkboxLabel {
|
||||
padding-right: var(--paper-checkbox-label-spacing, 8px);
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#checkboxLabel[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* disabled state */
|
||||
|
||||
:host([disabled]) #checkbox {
|
||||
opacity: 0.5;
|
||||
border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color));
|
||||
}
|
||||
|
||||
:host([disabled][checked]) #checkbox {
|
||||
background-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color));
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
:host([disabled]) #checkboxLabel {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
/* invalid state */
|
||||
#checkbox.invalid:not(.checked) {
|
||||
border-color: var(--paper-checkbox-error-color, var(--error-color));
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="checkboxContainer">
|
||||
<div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]">
|
||||
<div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="checkboxLabel"><content></content></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'paper-checkbox',
|
||||
|
||||
behaviors: [
|
||||
Polymer.PaperCheckedElementBehavior
|
||||
],
|
||||
|
||||
hostAttributes: {
|
||||
role: 'checkbox',
|
||||
'aria-checked': false,
|
||||
tabindex: 0
|
||||
},
|
||||
|
||||
properties: {
|
||||
/**
|
||||
* Fired when the checked state changes due to user interaction.
|
||||
*
|
||||
* @event change
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when the checked state changes.
|
||||
*
|
||||
* @event iron-change
|
||||
*/
|
||||
ariaActiveAttribute: {
|
||||
type: String,
|
||||
value: 'aria-checked'
|
||||
}
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
var inkSize = this.getComputedStyleValue('--calculated-paper-checkbox-ink-size').trim();
|
||||
// If unset, compute and set the default `--paper-checkbox-ink-size`.
|
||||
if (inkSize === '-1px') {
|
||||
var checkboxSize = parseFloat(this.getComputedStyleValue('--calculated-paper-checkbox-size').trim());
|
||||
var defaultInkSize = Math.floor((8 / 3) * checkboxSize);
|
||||
|
||||
// The checkbox and ripple need to have the same parity so that their
|
||||
// centers align.
|
||||
if (defaultInkSize % 2 !== checkboxSize % 2) {
|
||||
defaultInkSize++;
|
||||
}
|
||||
|
||||
this.customStyle['--paper-checkbox-ink-size'] = defaultInkSize + 'px';
|
||||
this.updateStyles();
|
||||
}
|
||||
},
|
||||
|
||||
_computeCheckboxClass: function(checked, invalid) {
|
||||
var className = '';
|
||||
if (checked) {
|
||||
className += 'checked ';
|
||||
}
|
||||
if (invalid) {
|
||||
className += 'invalid';
|
||||
}
|
||||
return className;
|
||||
},
|
||||
|
||||
_computeCheckmarkClass: function(checked) {
|
||||
return checked ? '' : 'hidden';
|
||||
},
|
||||
|
||||
// create ripple inside the checkboxContainer
|
||||
_createRipple: function() {
|
||||
this._rippleContainer = this.$.checkboxContainer;
|
||||
return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
@@ -1,788 +0,0 @@
|
||||
<link rel="import" href="../../components/polymer/polymer.html">
|
||||
<link rel="import" href="../../components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
|
||||
<link rel="import" href="../../components/iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../components/iron-form-element-behavior/iron-form-element-behavior.html">
|
||||
<link rel="import" href="../../components/iron-range-behavior/iron-range-behavior.html">
|
||||
<link rel="import" href="../../components/paper-behaviors/paper-inky-focus-behavior.html">
|
||||
<link rel="import" href="../../components/paper-input/paper-input.html">
|
||||
<link rel="import" href="../../components/paper-progress/paper-progress.html">
|
||||
<link rel="import" href="../../components/paper-styles/color.html">
|
||||
|
||||
<!--
|
||||
Material design: [Sliders](https://www.paper.com/design/spec/components/sliders.html)
|
||||
|
||||
`paper-diff-slider` allows user to select a value from a range of values by
|
||||
moving the slider thumb. The interactive nature of the slider makes it a
|
||||
great choice for settings that reflect intensity levels, such as volume,
|
||||
brightness, or color saturation.
|
||||
|
||||
Example:
|
||||
|
||||
<paper-diff-slider></paper-diff-slider>
|
||||
|
||||
Use `min` and `max` to specify the slider range. Default is 0 to 100.
|
||||
|
||||
Example:
|
||||
|
||||
<paper-diff-slider min="10" max="200" value="110"></paper-diff-slider>
|
||||
|
||||
### Styling
|
||||
|
||||
The following custom properties and mixins are available for styling:
|
||||
|
||||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--paper-diff-slider-container-color` | The background color of the bar | `--paper-grey-400`
|
||||
`--paper-diff-slider-bar-color` | The background color of the slider | `transparent`
|
||||
`--paper-diff-slider-active-color` | The progress bar color | `--paper-green-500`
|
||||
`--paper-diff-slider-secondary-color` | The secondary progress bar color | `--paper-green-300`
|
||||
`--paper-diff-slider-knob-color` | The knob color | `--paper-green-500`
|
||||
`--paper-diff-slider-disabled-knob-color` | The disabled knob color | `--paper-grey-400`
|
||||
`--paper-diff-slider-pin-color` | The pin color | `--paper-green-500`
|
||||
`--paper-diff-slider-font-color` | The pin's text color | `#fff`
|
||||
`--paper-diff-slider-markers-color` | The snaps markers color | `#000`
|
||||
`--paper-diff-slider-disabled-active-color` | The disabled progress bar color | `--paper-grey-400`
|
||||
`--paper-diff-slider-disabled-secondary-color` | The disabled secondary progress bar color | `--paper-grey-400`
|
||||
`--paper-diff-slider-knob-start-color` | The fill color of the knob at the far left | `transparent`
|
||||
`--paper-diff-slider-knob-start-border-color` | The border color of the knob at the far left | `--paper-grey-400`
|
||||
`--paper-diff-slider-pin-start-color` | The color of the pin at the far left | `--paper-grey-400`
|
||||
`--paper-diff-slider-height` | Height of the progress bar | `2px`
|
||||
`--paper-diff-slider-input` | Mixin applied to the input in editable mode | `{}`
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-diff-slider
|
||||
@demo demo/index.html
|
||||
@hero hero.svg
|
||||
-->
|
||||
|
||||
<dom-module id="paper-diff-slider">
|
||||
<template strip-whitespace>
|
||||
<style>
|
||||
:host {
|
||||
@apply(--layout);
|
||||
@apply(--layout-justified);
|
||||
@apply(--layout-center);
|
||||
width: 200px;
|
||||
cursor: default;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
--paper-progress-active-color: var(--paper-diff-slider-active-color, --paper-green-500);
|
||||
--paper-progress-secondary-color: var(--paper-diff-slider-secondary-color, --paper-red-400);
|
||||
--paper-progress-disabled-active-color: var(--paper-diff-slider-disabled-active-color, --paper-grey-400);
|
||||
--paper-progress-disabled-secondary-color: var(--paper-diff-slider-disabled-secondary-color, --paper-grey-400);
|
||||
--calculated-paper-diff-slider-height: var(--paper-diff-slider-height, 2px);
|
||||
}
|
||||
|
||||
/* focus shows the ripple */
|
||||
:host(:focus) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#sliderContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(30px + var(--calculated-paper-diff-slider-height));
|
||||
margin-left: calc(15px + var(--calculated-paper-diff-slider-height)/2);
|
||||
margin-right: calc(15px + var(--calculated-paper-diff-slider-height)/2);
|
||||
}
|
||||
|
||||
#sliderContainer:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
#sliderContainer.editable {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.bar-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ring > .bar-container {
|
||||
left: calc(5px + var(--calculated-paper-diff-slider-height)/2);
|
||||
transition: left 0.18s ease;
|
||||
}
|
||||
|
||||
.ring.expand.dragging > .bar-container {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.ring.expand:not(.pin) > .bar-container {
|
||||
left: calc(8px + var(--calculated-paper-diff-slider-height)/2);
|
||||
}
|
||||
|
||||
#sliderBar {
|
||||
padding: 15px 0;
|
||||
width: 100%;
|
||||
background-color: var(--paper-diff-slider-bar-color, transparent);
|
||||
--paper-progress-container-color: var(--paper-diff-slider-container-color, --paper-grey-400);
|
||||
--paper-progress-height: var(--calculated-paper-diff-slider-height);
|
||||
}
|
||||
|
||||
.slider-markers {
|
||||
position: absolute;
|
||||
top: calc(14px + var(--paper-diff-slider-height,2px)/2);
|
||||
height: var(--calculated-paper-diff-slider-height);
|
||||
left: 0;
|
||||
right: -1px;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
@apply(--layout-horizontal);
|
||||
}
|
||||
|
||||
.slider-marker {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
.slider-markers::after,
|
||||
.slider-marker::after {
|
||||
content: "";
|
||||
display: block;
|
||||
margin-left: -1px;
|
||||
width: 2px;
|
||||
height: var(--calculated-paper-diff-slider-height);
|
||||
border-radius: 50%;
|
||||
background-color: var(--paper-diff-slider-markers-color, #000);
|
||||
}
|
||||
|
||||
.slider-knob {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-left: calc(-15px - var(--calculated-paper-diff-slider-height)/2);
|
||||
width: calc(30px + var(--calculated-paper-diff-slider-height));
|
||||
height: calc(30px + var(--calculated-paper-diff-slider-height));
|
||||
}
|
||||
|
||||
.transiting > .slider-knob {
|
||||
transition: left 0.08s ease;
|
||||
}
|
||||
|
||||
.slider-knob:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.slider-knob.dragging {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.snaps > .slider-knob.dragging {
|
||||
transition: -webkit-transform 0.08s ease;
|
||||
transition: transform 0.08s ease;
|
||||
}
|
||||
|
||||
.slider-knob-inner {
|
||||
margin: 10px;
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 20px);
|
||||
background-color: var(--paper-diff-slider-knob-color, --paper-green-500);
|
||||
border: 2px solid var(--paper-diff-slider-knob-color, --paper-green-500);
|
||||
border-radius: 50%;
|
||||
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
transition-property: -webkit-transform, background-color, border;
|
||||
transition-property: transform, background-color, border;
|
||||
transition-duration: 0.18s;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
.expand:not(.pin) > .slider-knob > .slider-knob-inner {
|
||||
-webkit-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.ring > .slider-knob > .slider-knob-inner {
|
||||
background-color: var(--paper-diff-slider-knob-start-color, transparent);
|
||||
border: 2px solid var(--paper-diff-slider-knob-start-border-color, --paper-grey-400);
|
||||
}
|
||||
|
||||
.slider-knob-inner::before {
|
||||
background-color: var(--paper-diff-slider-pin-color, --paper-green-500);
|
||||
}
|
||||
|
||||
.pin > .slider-knob > .slider-knob-inner::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -13px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50% 50% 50% 0;
|
||||
|
||||
-webkit-transform: rotate(-45deg) scale(0) translate(0);
|
||||
transform: rotate(-45deg) scale(0) translate(0);
|
||||
}
|
||||
|
||||
.slider-knob-inner::before,
|
||||
.slider-knob-inner::after {
|
||||
transition: -webkit-transform .18s ease, background-color .18s ease;
|
||||
transition: transform .18s ease, background-color .18s ease;
|
||||
}
|
||||
|
||||
.pin.ring > .slider-knob > .slider-knob-inner::before {
|
||||
background-color: var(--paper-diff-slider-pin-start-color, --paper-red-400);
|
||||
}
|
||||
|
||||
.pin.expand > .slider-knob > .slider-knob-inner::before {
|
||||
-webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
|
||||
transform: rotate(-45deg) scale(1) translate(17px, -17px);
|
||||
}
|
||||
|
||||
.pin > .slider-knob > .slider-knob-inner::after {
|
||||
content: attr(value);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
width: 32px;
|
||||
height: 26px;
|
||||
text-align: center;
|
||||
color: var(--paper-diff-slider-font-color, #fff);
|
||||
font-size: 10px;
|
||||
|
||||
-webkit-transform: scale(0) translate(0);
|
||||
transform: scale(0) translate(0);
|
||||
}
|
||||
|
||||
.pin.expand > .slider-knob > .slider-knob-inner::after {
|
||||
-webkit-transform: scale(1) translate(0, -17px);
|
||||
transform: scale(1) translate(0, -17px);
|
||||
}
|
||||
|
||||
/* paper-input */
|
||||
.slider-input {
|
||||
width: 50px;
|
||||
overflow: hidden;
|
||||
--paper-input-container-input: {
|
||||
text-align: center;
|
||||
};
|
||||
@apply(--paper-diff-slider-input);
|
||||
}
|
||||
|
||||
/* disabled state */
|
||||
#sliderContainer.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.disabled > .slider-knob > .slider-knob-inner {
|
||||
background-color: var(--paper-diff-slider-disabled-knob-color, --paper-grey-400);
|
||||
border: 2px solid var(--paper-diff-slider-disabled-knob-color, --paper-grey-400);
|
||||
-webkit-transform: scale3d(0.75, 0.75, 1);
|
||||
transform: scale3d(0.75, 0.75, 1);
|
||||
}
|
||||
|
||||
.disabled.ring > .slider-knob > .slider-knob-inner {
|
||||
background-color: var(--paper-diff-slider-knob-start-color, transparent);
|
||||
border: 2px solid var(--paper-diff-slider-knob-start-border-color, --paper-grey-400);
|
||||
}
|
||||
|
||||
paper-ripple {
|
||||
color: var(--paper-diff-slider-knob-color, --paper-green-500);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="sliderContainer"
|
||||
class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
|
||||
<div class="bar-container">
|
||||
<paper-progress
|
||||
disabled$="[[disabled]]"
|
||||
id="sliderBar"
|
||||
aria-hidden="true"
|
||||
min="[[min]]"
|
||||
max="[[max]]"
|
||||
step="[[step]]"
|
||||
value="[[immediateValue]]"
|
||||
secondary-progress="[[secondaryProgress]]"
|
||||
on-down="_bardown"
|
||||
on-up="_resetKnob"
|
||||
on-track="_onTrack">
|
||||
</paper-progress>
|
||||
</div>
|
||||
|
||||
<template is="dom-if" if="[[snaps]]">
|
||||
<div class="slider-markers">
|
||||
<template is="dom-repeat" items="[[markers]]">
|
||||
<div class="slider-marker"></div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div id="sliderKnob"
|
||||
class="slider-knob"
|
||||
on-down="_knobdown"
|
||||
on-up="_resetKnob"
|
||||
on-track="_onTrack"
|
||||
on-transitionend="_knobTransitionEnd">
|
||||
<div class="slider-knob-inner" value$="[[immediateDiff]]"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template is="dom-if" if="[[editable]]">
|
||||
<paper-input
|
||||
id="input"
|
||||
type="number"
|
||||
step="[[step]]"
|
||||
min="[[min]]"
|
||||
max="[[max]]"
|
||||
class="slider-input"
|
||||
disabled$="[[disabled]]"
|
||||
value="[[immediateValue]]"
|
||||
on-change="_changeValue"
|
||||
on-keydown="_inputKeyDown"
|
||||
no-label-float>
|
||||
</paper-input>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// jscs:disable
|
||||
Polymer({
|
||||
is: 'paper-diff-slider',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronA11yKeysBehavior,
|
||||
Polymer.IronFormElementBehavior,
|
||||
Polymer.PaperInkyFocusBehavior,
|
||||
Polymer.IronRangeBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
/**
|
||||
* If true, the slider thumb snaps to tick marks evenly spaced based
|
||||
* on the `step` property value.
|
||||
*/
|
||||
snaps: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* If true, a pin with numeric value label is shown when the slider thumb
|
||||
* is pressed. Use for settings for which users need to know the exact
|
||||
* value of the setting.
|
||||
*/
|
||||
pin: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* The number that represents the current secondary progress.
|
||||
*/
|
||||
secondaryProgress: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* If true, an input is shown and user can use it to set the slider value.
|
||||
*/
|
||||
editable: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* The immediate value of the slider. This value is updated while the user
|
||||
* is dragging the slider.
|
||||
*/
|
||||
immediateValue: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* The immediate difference of the slider.
|
||||
* This value is updated while the user is dragging the slider.
|
||||
*/
|
||||
immediateDiff: {
|
||||
type: String,
|
||||
value: '+0',
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* The value the last time this slider moved
|
||||
*/
|
||||
oldValue: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
readOnly: true,
|
||||
},
|
||||
|
||||
/**
|
||||
* The maximum number of markers
|
||||
*/
|
||||
maxMarkers: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* If true, the knob is expanded
|
||||
*/
|
||||
expand: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
readOnly: true
|
||||
},
|
||||
|
||||
/**
|
||||
* True when the user is dragging the slider.
|
||||
*/
|
||||
dragging: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
readOnly: true
|
||||
},
|
||||
|
||||
transiting: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
readOnly: true
|
||||
},
|
||||
|
||||
markers: {
|
||||
type: Array,
|
||||
readOnly: true,
|
||||
value: function() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_updateKnob(value, min, max, snaps, step)',
|
||||
'_valueChanged(value)',
|
||||
'_secondaryProgressChanged(secondaryValue)',
|
||||
'_immediateValueChanged(immediateValue)',
|
||||
'_immediateDiffChanged(immediateDiff)',
|
||||
'_updateMarkers(maxMarkers, min, max, snaps)'
|
||||
],
|
||||
|
||||
hostAttributes: {
|
||||
role: 'slider',
|
||||
tabindex: 0
|
||||
},
|
||||
|
||||
keyBindings: {
|
||||
'left down pagedown home': '_decrementKey',
|
||||
'right up pageup end': '_incrementKey'
|
||||
},
|
||||
|
||||
/**
|
||||
* Increases value by `step` but not above `max`.
|
||||
* @method increment
|
||||
*/
|
||||
increment: function() {
|
||||
this.value = this._clampValue(this.value + this.step);
|
||||
},
|
||||
|
||||
/**
|
||||
* Decreases value by `step` but not below `min`.
|
||||
* @method decrement
|
||||
*/
|
||||
decrement: function() {
|
||||
this.value = this._clampValue(this.value - this.step);
|
||||
},
|
||||
|
||||
resetOldValue: function(){
|
||||
this.secondaryProgress = this.value;
|
||||
this._setOldValue(this.value);
|
||||
},
|
||||
|
||||
_updateKnob: function(value, min, max, snaps, step) {
|
||||
this.setAttribute('aria-valuemin', min);
|
||||
this.setAttribute('aria-valuemax', max);
|
||||
this.setAttribute('aria-valuenow', value);
|
||||
|
||||
this._positionKnob(this._calcRatio(value));
|
||||
},
|
||||
|
||||
_valueChanged: function() {
|
||||
if (this.oldValue !== this.value){
|
||||
this.secondaryProgress = this.oldValue;
|
||||
this._setOldValue(this.value);
|
||||
}
|
||||
this.fire('value-change');
|
||||
},
|
||||
|
||||
_immediateValueChanged: function() {
|
||||
if (this.dragging) {
|
||||
this.fire('immediate-value-change');
|
||||
} else {
|
||||
this.value = this.immediateValue;
|
||||
}
|
||||
},
|
||||
|
||||
_immediateDiffChanged: function(){
|
||||
this.fire('immediate-diff-change');
|
||||
},
|
||||
|
||||
_secondaryProgressChanged: function() {
|
||||
this.secondaryProgress = this._clampValue(this.secondaryProgress);
|
||||
},
|
||||
|
||||
_expandKnob: function() {
|
||||
this._setImmediateDiff('+0');
|
||||
this._setExpand(true);
|
||||
},
|
||||
|
||||
_resetKnob: function() {
|
||||
this.cancelDebouncer('expandKnob');
|
||||
this._setExpand(false);
|
||||
},
|
||||
|
||||
_positionKnob: function(ratio) {
|
||||
this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
|
||||
|
||||
this._setRatio(this._calcRatio(this.immediateValue));
|
||||
|
||||
this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
|
||||
if (this.dragging) {
|
||||
this._knobstartx = this.ratio * this._w;
|
||||
this.translate3d(0, 0, 0, this.$.sliderKnob);
|
||||
}
|
||||
},
|
||||
|
||||
_calcKnobPosition: function(ratio) {
|
||||
return (this.max - this.min) * ratio + this.min;
|
||||
},
|
||||
|
||||
_onTrack: function(event) {
|
||||
event.stopPropagation();
|
||||
switch (event.detail.state) {
|
||||
case 'start':
|
||||
this._trackStart(event);
|
||||
break;
|
||||
case 'track':
|
||||
this._trackX(event);
|
||||
break;
|
||||
case 'end':
|
||||
this._trackEnd();
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
_trackStart: function(event) {
|
||||
this._w = this.$.sliderBar.offsetWidth;
|
||||
this._x = this.ratio * this._w;
|
||||
this._startx = this._x;
|
||||
this._knobstartx = this._startx;
|
||||
this._minx = - this._startx;
|
||||
this._maxx = this._w - this._startx;
|
||||
this.$.sliderKnob.classList.add('dragging');
|
||||
this._setDragging(true);
|
||||
},
|
||||
|
||||
_trackX: function(event) {
|
||||
if (!this.dragging) {
|
||||
this._trackStart(event);
|
||||
}
|
||||
|
||||
var dx = Math.min(this._maxx, Math.max(this._minx, event.detail.dx));
|
||||
this._x = this._startx + dx;
|
||||
|
||||
var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w));
|
||||
this._setImmediateValue(immediateValue);
|
||||
|
||||
var diff = this.immediateValue - this.value;
|
||||
this._setImmediateDiff(diff >= 0 ? '+'+diff : ''+diff);
|
||||
|
||||
// update knob's position
|
||||
var translateX = ((this._calcRatio(this.immediateValue) * this._w) - this._knobstartx);
|
||||
this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
|
||||
},
|
||||
|
||||
_trackEnd: function() {
|
||||
var s = this.$.sliderKnob.style;
|
||||
|
||||
this.$.sliderKnob.classList.remove('dragging');
|
||||
this._setDragging(false);
|
||||
this._resetKnob();
|
||||
this.value = this.immediateValue;
|
||||
|
||||
s.transform = s.webkitTransform = '';
|
||||
|
||||
this.fire('change');
|
||||
},
|
||||
|
||||
_knobdown: function(event) {
|
||||
this._expandKnob();
|
||||
|
||||
// cancel selection
|
||||
event.preventDefault();
|
||||
|
||||
// set the focus manually because we will called prevent default
|
||||
this.focus();
|
||||
},
|
||||
|
||||
_bardown: function(event) {
|
||||
//this._w = this.$.sliderBar.offsetWidth;
|
||||
//var rect = this.$.sliderBar.getBoundingClientRect();
|
||||
//var ratio = (event.detail.x - rect.left) / this._w;
|
||||
//var prevRatio = this.ratio;
|
||||
|
||||
//this._setTransiting(true);
|
||||
|
||||
//this._positionKnob(ratio);
|
||||
|
||||
this.debounce('expandKnob', this._expandKnob, 60);
|
||||
|
||||
// if the ratio doesn't change, sliderKnob's animation won't start
|
||||
// and `_knobTransitionEnd` won't be called
|
||||
// Therefore, we need to manually update the `transiting` state
|
||||
|
||||
//if (prevRatio === this.ratio) {
|
||||
// this._setTransiting(false);
|
||||
//}
|
||||
|
||||
//this.async(function() {
|
||||
// this.fire('change');
|
||||
//});
|
||||
|
||||
// cancel selection
|
||||
event.preventDefault();
|
||||
|
||||
// set the focus manually because we called prevent default
|
||||
this.focus();
|
||||
},
|
||||
|
||||
_knobTransitionEnd: function(event) {
|
||||
if (event.target === this.$.sliderKnob) {
|
||||
this._setTransiting(false);
|
||||
}
|
||||
},
|
||||
|
||||
_updateMarkers: function(maxMarkers, min, max, snaps) {
|
||||
if (!snaps) {
|
||||
this._setMarkers([]);
|
||||
}
|
||||
var steps = Math.round((max - min) / this.step);
|
||||
if (steps > maxMarkers) {
|
||||
steps = maxMarkers;
|
||||
}
|
||||
this._setMarkers(new Array(steps));
|
||||
},
|
||||
|
||||
_mergeClasses: function(classes) {
|
||||
return Object.keys(classes).filter(
|
||||
function(className) {
|
||||
return classes[className];
|
||||
}).join(' ');
|
||||
},
|
||||
|
||||
_getClassNames: function() {
|
||||
return this._mergeClasses({
|
||||
disabled: this.disabled,
|
||||
pin: this.pin,
|
||||
snaps: this.snaps,
|
||||
ring: this.immediateValue <= this.min,
|
||||
expand: this.expand,
|
||||
dragging: this.dragging,
|
||||
transiting: this.transiting,
|
||||
editable: this.editable
|
||||
});
|
||||
},
|
||||
|
||||
_incrementKey: function(event) {
|
||||
if (!this.disabled) {
|
||||
if (event.detail.key === 'end') {
|
||||
this.value = this.max;
|
||||
} else {
|
||||
this.increment();
|
||||
}
|
||||
this.fire('change');
|
||||
}
|
||||
},
|
||||
|
||||
_decrementKey: function(event) {
|
||||
if (!this.disabled) {
|
||||
if (event.detail.key === 'home') {
|
||||
this.value = this.min;
|
||||
} else {
|
||||
this.decrement();
|
||||
}
|
||||
this.fire('change');
|
||||
}
|
||||
},
|
||||
|
||||
_changeValue: function(event) {
|
||||
this.value = event.target.value;
|
||||
this.fire('change');
|
||||
},
|
||||
|
||||
_inputKeyDown: function(event) {
|
||||
event.stopPropagation();
|
||||
},
|
||||
|
||||
// create the element ripple inside the `sliderKnob`
|
||||
_createRipple: function() {
|
||||
this._rippleContainer = this.$.sliderKnob;
|
||||
return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
|
||||
},
|
||||
|
||||
// Hide the ripple when user is not interacting with keyboard.
|
||||
// This behavior is different from other ripple-y controls, but is
|
||||
// according to spec: https://www.paper.com/design/spec/components/sliders.html
|
||||
_focusedChanged: function(receivedFocusFromKeyboard) {
|
||||
if (receivedFocusFromKeyboard) {
|
||||
this.ensureRipple();
|
||||
}
|
||||
if (this.hasRipple()) {
|
||||
// note, ripple must be un-hidden prior to setting `holdDown`
|
||||
if (receivedFocusFromKeyboard) {
|
||||
this._ripple.style.display = '';
|
||||
} else {
|
||||
this._ripple.style.display = 'none';
|
||||
}
|
||||
this._ripple.holdDown = receivedFocusFromKeyboard;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Fired when the slider's value changes.
|
||||
*
|
||||
* @event value-change
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when the slider's immediateValue changes. Only occurs while the
|
||||
* user is dragging.
|
||||
*
|
||||
* To detect changes to immediateValue that happen for any input (i.e.
|
||||
* dragging, tapping, clicking, etc.) listen for immediate-value-changed
|
||||
* instead.
|
||||
*
|
||||
* @event immediate-value-change
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when the slider's value changes due to user interaction.
|
||||
*
|
||||
* Changes to the slider's value due to changes in an underlying
|
||||
* bound variable will not trigger this event.
|
||||
*
|
||||
* @event change
|
||||
*/
|
||||
</script>
|
||||
</dom-module>
|
||||
@@ -1,45 +0,0 @@
|
||||
<!--
|
||||
@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="../../../components/polymer/polymer.html">
|
||||
<link rel="import" href="../../../components/neon-animation/neon-animation-behavior.html">
|
||||
<link rel="import" href="../../../components/neon-animation/web-animations.html">
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'fade-in-slide-from-left-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'transform': 'translateX(-100%)', 'opacity': '0'},
|
||||
{'transform': 'translateX(-50%)', 'opacity': '0'},
|
||||
{'transform': 'none', 'opacity': '1'}
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
if (config.transformOrigin) {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
||||
} else {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
|
||||
}
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@@ -1,45 +0,0 @@
|
||||
<!--
|
||||
@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="../../../components/polymer/polymer.html">
|
||||
<link rel="import" href="../../../components/neon-animation/neon-animation-behavior.html">
|
||||
<link rel="import" href="../../../components/neon-animation/web-animations.html">
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'fade-in-slide-from-right-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'transform': 'translateX(100%)', 'opacity': '0'},
|
||||
{'transform': 'translateX(50%)', 'opacity': '0'},
|
||||
{'transform': 'none', 'opacity': '1'}
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
if (config.transformOrigin) {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
||||
} else {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
|
||||
}
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@@ -1,45 +0,0 @@
|
||||
<!--
|
||||
@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="../../../components/polymer/polymer.html">
|
||||
<link rel="import" href="../../../components/neon-animation/neon-animation-behavior.html">
|
||||
<link rel="import" href="../../../components/neon-animation/web-animations.html">
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'fade-out-slide-left-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'transform': 'none', 'opacity': '1'},
|
||||
{'transform': 'translateX(-50%)', 'opacity': '0'},
|
||||
{'transform': 'translateX(-100%)', 'opacity': '0'},
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
if (config.transformOrigin) {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
||||
} else {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
|
||||
}
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@@ -1,45 +0,0 @@
|
||||
<!--
|
||||
@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="../../../components/polymer/polymer.html">
|
||||
<link rel="import" href="../../../components/neon-animation/neon-animation-behavior.html">
|
||||
<link rel="import" href="../../../components/neon-animation/web-animations.html">
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'fade-out-slide-right-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
this._effect = new KeyframeEffect(node, [
|
||||
{'transform': 'none', 'opacity': '1'},
|
||||
{'transform': 'translateX(50%)', 'opacity': '1'},
|
||||
{'transform': 'translateX(100%)', 'opacity': '0'}
|
||||
], this.timingFromConfig(config));
|
||||
|
||||
if (config.transformOrigin) {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
||||
} else {
|
||||
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
|
||||
}
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@@ -1,48 +0,0 @@
|
||||
{
|
||||
"name": "paper-stepper",
|
||||
"version": "2.0-beta.5",
|
||||
"authors": [
|
||||
"Zecat <jullienfelix@gmail.com>"
|
||||
],
|
||||
"description": "Material paper-stepper element.",
|
||||
"keywords": [
|
||||
"web-component",
|
||||
"polymer",
|
||||
"seed"
|
||||
],
|
||||
"main": "paper-stepper.html",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/zecat/paper-stepper/",
|
||||
"ignore": [
|
||||
"/.*",
|
||||
"/test/"
|
||||
],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.2.0",
|
||||
"paper-button": "PolymerElements/paper-button#^1.0.11",
|
||||
"iron-icons": "PolymerElements/iron-icons#^1.1.3",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.1.4",
|
||||
"paper-ripple": "PolymerElements/paper-ripple#^1.0.5",
|
||||
"iron-selector": "PolymerElements/iron-selector#^1.3.0",
|
||||
"iron-icon": "PolymerElements/iron-icon#^1.0.8",
|
||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.1",
|
||||
"neon-animation": "PolymerElements/neon-animation#^1.1.1",
|
||||
"iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.5",
|
||||
"iron-collapse": "PolymerElements/iron-collapse#^1.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"paper-input": "PolymerElements/paper-input#^1.1.10",
|
||||
"paper-material": "PolymerElements/paper-material#^1.0.6",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"web-component-tester": "*",
|
||||
"iron-form": "PolymerElements/iron-form#^1.0.16",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.2.2",
|
||||
"paper-toggle-button": "PolymerElements/paper-toggle-button#^1.2.0",
|
||||
"app-layout": "PolymerElements/app-layout#^0.10.2",
|
||||
"paper-menu": "PolymerElements/paper-menu#^1.2.2",
|
||||
"iron-scroll-spy": "Zecat/iron-scroll-spy#^2.1.0",
|
||||
"paper-item": "PolymerElements/paper-item#^1.2.1",
|
||||
"paper-toast": "PolymerElements/paper-toast#^1.3.0",
|
||||
"paper-checkbox": "PolymerElements/paper-checkbox#^1.4.0"
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
|
||||
<g id="background" display="none">
|
||||
<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
|
||||
</g>
|
||||
<g id="label">
|
||||
</g>
|
||||
<g id="art">
|
||||
<g id="ic_x5F_add_x0D_">
|
||||
</g>
|
||||
<circle cx="78" cy="98" r="4"/>
|
||||
<circle cx="171" cy="90" r="4"/>
|
||||
<circle cx="132" cy="61" r="4"/>
|
||||
<circle cx="53" cy="61" r="4"/>
|
||||
<circle cx="126" cy="28" r="4"/>
|
||||
<circle cx="91" cy="67" r="4"/>
|
||||
<circle cx="132" cy="90" r="4"/>
|
||||
<circle cx="65" cy="32" r="4"/>
|
||||
<path d="M77.7,99.4L51.9,61.1L64.3,31l64.1-4.2L92.6,66.7l16.1,9l23.3-16L174,91h-42.3l-23-12.9L77.7,99.4z M54.1,60.9l24.1,35.7
|
||||
L106.8,77l-17.4-9.8l34.2-38.1L65.7,33L54.1,60.9z M132.3,89H168l-36-26.8l-21.4,14.6L132.3,89z"/>
|
||||
</g>
|
||||
<g id="Guides">
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,424 +0,0 @@
|
||||
<link rel="import" href="../../components/iron-validatable-behavior/iron-validatable-behavior.html">
|
||||
<link rel="import" href="../../components/paper-item/paper-item-behavior.html">
|
||||
<link rel="import" href="../../components/paper-behaviors/paper-ripple-behavior.html">
|
||||
<link rel="import" href="../../components/neon-animation/neon-animatable-behavior.html">
|
||||
<link rel="import" href="../../components/paper-styles/default-theme.html">
|
||||
<link rel="import" href="step-horizontal-label.html">
|
||||
<link rel="import" href="step-vertical.html">
|
||||
<link rel="import" href="../../components/polymer/polymer.html">
|
||||
|
||||
<!--
|
||||
Missing Doc
|
||||
@element paper-step
|
||||
@demo demo/index.html
|
||||
@hero hero.svg
|
||||
-->
|
||||
<dom-module id="paper-step">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
}
|
||||
:host(:not([vertical])) {
|
||||
overflow: hidden;
|
||||
@apply(--layout);
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
:host(:not([vertical])[opened]){
|
||||
overflow: visible;
|
||||
}
|
||||
:host(:not([opened]):not(.neon-animating)) #slideshowViewport{
|
||||
display: none;
|
||||
}
|
||||
#slideshowViewport {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
#contentWrapper {
|
||||
padding: 16px 0 16px 16px;
|
||||
@apply(--layout-scroll);
|
||||
@apply(--layout-fit);
|
||||
pointer-events: auto;
|
||||
}
|
||||
:host(:focus:not([opened]):not([saved])) step-horizontal-label ::content #badge {
|
||||
background: var(--paper-step-selectable-hovered-badge-background, --paper-grey-500);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- horizontal step layout -->
|
||||
|
||||
<template is="dom-if" if="[[!vertical]]">
|
||||
<step-horizontal-label id="horizontalStepLabel" editable="[[editable]]" label="[[label]]"
|
||||
alternative-label="[[_alternativeLabel]]" optional="[[optional]]"
|
||||
opened="[[opened]]" selectable="[[selectable]]" index="[[index]]"
|
||||
saved="[[saved]]" stepper-data="[[_stepperData]]">
|
||||
</step-horizontal-label>
|
||||
<div id="slideshowViewport">
|
||||
<div id="contentWrapper">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- vertical step layout -->
|
||||
|
||||
<template is="dom-if" if="[[vertical]]">
|
||||
<step-vertical id="verticalStepLabel" editable="[[editable]]" label="[[label]]"
|
||||
optional="[[optional]]" opened="[[opened]]"
|
||||
selectable="[[selectable]]" stepper-data="[[_stepperData]]" index="[[index]]"
|
||||
saved="[[saved]]" _attr-for-primary-button-text="[[_attrForPrimaryButtonText]]"
|
||||
can-skip="[[_canSkip]]" has-back-step="[[_hasBackStep]]">
|
||||
</step-vertical>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
|
||||
is: 'paper-step',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronValidatableBehavior,
|
||||
Polymer.NeonAnimatableBehavior,
|
||||
Polymer.PaperItemBehavior,
|
||||
Polymer.PaperRippleBehavior
|
||||
],
|
||||
|
||||
/**
|
||||
* Fired when the step has been saved.
|
||||
*
|
||||
* @event paper-step-saved
|
||||
*/
|
||||
/**
|
||||
* Fired when the step has been updated
|
||||
*
|
||||
* @event paper-step-updated
|
||||
*/
|
||||
properties: {
|
||||
/**
|
||||
* MISSING Doc
|
||||
*/
|
||||
saved: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
notify: true,
|
||||
readOnly: true
|
||||
},
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
editable: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
index: {
|
||||
type: Number,
|
||||
notify: true,
|
||||
readOnly: true
|
||||
},
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
_previousSaved: {
|
||||
type: Boolean,
|
||||
readOnly: true
|
||||
},
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
optional: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
selectable: {
|
||||
type: Boolean,
|
||||
computed: '_computeSelectable(_stepperData.linear, saved, editable, _previousSaved)',
|
||||
reflectToAttribute: true,
|
||||
notify: true
|
||||
},
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
disabled: {
|
||||
computed: '_computeDisabled(selectable)'
|
||||
},
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
label: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
opened: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
animationConfig: {
|
||||
readOnly: true
|
||||
},
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
entryAnimation: {
|
||||
readOnly: true
|
||||
},
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
exitAnimation: {
|
||||
readOnly: true
|
||||
},
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
vertical: {
|
||||
type: Boolean,
|
||||
readOnly: true,
|
||||
reflectToAttribute: true
|
||||
},
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
horizontalHigherEntryAnimation: {
|
||||
type: String
|
||||
},
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
horizontalHigherExitAnimation: {
|
||||
type: String
|
||||
},
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
horizontalLowerEntryAnimation: {
|
||||
type: String
|
||||
},
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
horizontalLowerExitAnimation: {
|
||||
type: String
|
||||
},
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
_alternativeLabel: {
|
||||
type: Boolean,
|
||||
readOnly: true
|
||||
},
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
_optionalText: {
|
||||
type: Boolean,
|
||||
readOnly: true
|
||||
},
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
_attrForPrimaryButtonText: {
|
||||
type: String,
|
||||
readOnly: true
|
||||
},
|
||||
/**
|
||||
* A reference to the parent stepper
|
||||
*/
|
||||
_stepper: {
|
||||
type: Object,
|
||||
readOnly: true
|
||||
},
|
||||
_stepperData: {
|
||||
type: Object,
|
||||
readOnly: true
|
||||
},
|
||||
_canSkip: {
|
||||
type: Boolean,
|
||||
readOnly: true
|
||||
},
|
||||
_hasBackStep: {
|
||||
type: Boolean,
|
||||
readOnly: true
|
||||
}
|
||||
},
|
||||
|
||||
listeners: {
|
||||
'paper-step-vertical-skip-tapped': 'skip',
|
||||
'paper-step-vertical-back-tapped': 'back',
|
||||
'paper-step-vertical-continue-tapped': 'continue',
|
||||
'tap': '_tapHandler'
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_toggleClassPosition(index, _stepperData.stepNumber, vertical)',
|
||||
'_updateSlideshowViewportTop(optional, _alternativeLabel, vertical)',
|
||||
'_verticalChange(vertical)',
|
||||
'_focusedChanged(receivedFocusFromKeyboard)',
|
||||
'_labelElementChanged(_labelElement)'
|
||||
],
|
||||
|
||||
_focusedChanged: function(receivedFocusFromKeyboard) {
|
||||
if (receivedFocusFromKeyboard) {
|
||||
this.ensureRipple();
|
||||
// generate a ripple effect from the center of the badge
|
||||
var badge = Polymer.dom(this._rippleContainer).querySelector('#badge');
|
||||
var badgePos = badge.getBoundingClientRect();
|
||||
var rippleX = badgePos.left + 12;
|
||||
var rippleY = badgePos.top + 12;
|
||||
this._ripple.downAction({detail: {x: rippleX, y: rippleY}});
|
||||
}
|
||||
if (this.hasRipple()) {
|
||||
this._ripple.holdDown = receivedFocusFromKeyboard;
|
||||
}
|
||||
},
|
||||
|
||||
_tapHandler: function(e) {
|
||||
var rootTarget = Polymer.dom(e).rootTarget;
|
||||
if (rootTarget !== this && rootTarget !== this._rippleContainer) {
|
||||
e.stopImmediatePropagation();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
skip: function() {
|
||||
// would it be better to send an event?
|
||||
this._stepper.progress();
|
||||
},
|
||||
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
back: function() {
|
||||
// would it be better to send an event?
|
||||
this._stepper.back();
|
||||
},
|
||||
|
||||
/**
|
||||
* Mark the step as saved and fire `paper-step-saved` if it is valid.
|
||||
* @return {Boolean} True if the step has been saved.
|
||||
*/
|
||||
save: function() {
|
||||
if ((!this.saved || this.editable) && this.validate()) {
|
||||
if (this.saved) {
|
||||
this.fire('paper-step-updated');
|
||||
} else {
|
||||
this._setSaved(true);
|
||||
this.fire('paper-step-saved');
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Atempte to save the step and select and to progress into the stepper.
|
||||
* @return {Boolean} True if the step is valid for saving.
|
||||
*/
|
||||
continue: function() {
|
||||
if (this.save()) {
|
||||
// would it be better to send an event?
|
||||
this._stepper.progress();
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
_removeAnimatingClass: function() {
|
||||
if (this._animationCanceled) {
|
||||
this._set_animationCanceled(false);
|
||||
} else {
|
||||
this.toggleClass('neon-animating', false);
|
||||
}
|
||||
},
|
||||
|
||||
_cancelAnimation: function() {
|
||||
this._set_animationCanceled(true);
|
||||
this.toggleClass('neon-animating', false);
|
||||
},
|
||||
|
||||
_updateSlideshowViewportTop: function(optional, _alternativeLabel, vertical) {
|
||||
if (!vertical) {
|
||||
this.async(function() {
|
||||
this.$$('#slideshowViewport').style.top = this.clientHeight+'px';
|
||||
this.fire('step-horizontal-label-resize');
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
_toggleClassPosition: function(index, stepNumber, vertical) {
|
||||
this.async(function() {
|
||||
var stepLabel = this.$$(vertical ? '#verticalStepLabel' : '#horizontalStepLabel');
|
||||
this.toggleClass('first-step', (index == 1), stepLabel);
|
||||
this.toggleClass('last-step', (index == stepNumber), stepLabel);
|
||||
});
|
||||
},
|
||||
|
||||
_updateAnimationConfig: function() {
|
||||
/* TODO: call this method when horizontalHigher/LowerEntry/ExitAnimation change */
|
||||
var animatedNode = this.$$('#contentWrapper');
|
||||
this._setAnimationConfig({
|
||||
'higher-step-entry': {
|
||||
node: animatedNode,
|
||||
name: this.horizontalHigherEntryAnimation
|
||||
},
|
||||
'higher-step-exit': {
|
||||
node: animatedNode,
|
||||
name: this.horizontalHigherExitAnimation
|
||||
},
|
||||
'lower-step-entry': {
|
||||
node: animatedNode,
|
||||
name: this.horizontalLowerEntryAnimation
|
||||
},
|
||||
'lower-step-exit': {
|
||||
node: animatedNode,
|
||||
name: this.horizontalLowerExitAnimation
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
_verticalChange: function(vertical) {
|
||||
this.async(function() {
|
||||
// move or create the content tag
|
||||
Polymer.dom(this.$$(vertical ? '#verticalStepLabel' : '#contentWrapper')).appendChild(this.$$('content') || this.create('content'));
|
||||
// reset the ripple
|
||||
this._ripple = false;
|
||||
this._rippleContainer = vertical ? this.$$('#verticalStepLabel').$.label : this.$$('#horizontalStepLabel').$.label;
|
||||
if (!vertical) {
|
||||
this._updateAnimationConfig();
|
||||
}
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
_computeSelectable: function(linear, saved, editable, previousSaved) {
|
||||
// TODO: factorize the expression
|
||||
return (!linear || previousSaved) && (!saved || editable) || (editable && saved);
|
||||
},
|
||||
|
||||
_computeDisabled: function(selectable) {
|
||||
// disabled is used by IronMenuBehavior in paper-stepper
|
||||
// TODO: remove selectable attribute and use disabled instead
|
||||
return !selectable;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</dom-module>
|
||||
@@ -1,735 +0,0 @@
|
||||
<link rel="import" href="../../components/iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../components/iron-selector/iron-selectable.html">
|
||||
<link rel="import" href="../../components/iron-menu-behavior/iron-menu-behavior.html">
|
||||
<link rel="import" href="../../components/neon-animation/neon-animation-runner-behavior.html">
|
||||
<link rel="import" href="../../components/paper-button/paper-button.html">
|
||||
<link rel="import" href="../../components/paper-styles/default-theme.html">
|
||||
<link rel="import" href="../../components/paper-styles/shadow.html">
|
||||
<link rel="import" href="../../components/iron-collapse/iron-collapse.html">
|
||||
<link rel="import" href="../../components/iron-resizable-behavior/iron-resizable-behavior.html">
|
||||
<link rel="import" href="../../components/polymer/polymer.html">
|
||||
<link rel="import" href="animations/fade-in-slide-from-right-animation.html">
|
||||
<link rel="import" href="animations/fade-out-slide-right-animation.html">
|
||||
<link rel="import" href="animations/fade-in-slide-from-left-animation.html">
|
||||
<link rel="import" href="animations/fade-out-slide-left-animation.html">
|
||||
<link rel="import" href="paper-step.html">
|
||||
|
||||
<!--
|
||||
Missing Doc
|
||||
|
||||
|
||||
## Styling
|
||||
|
||||
The default color values respect the material specifications. For basic configuration, just defines the `--primary-color` for your app.
|
||||
|
||||
The stepper has a complexe interface so many custom properties are available, use them this way :
|
||||
|
||||
```html
|
||||
<style is="custom-style">
|
||||
|
||||
paper-stepper {
|
||||
--paper-stepper-custom-property: value;
|
||||
}
|
||||
|
||||
paper-step {
|
||||
--paper-step-custom-property: value;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<paper-stepper>
|
||||
<paper-step></paper-step>
|
||||
<paper-step></paper-step>
|
||||
</paper-stepper>
|
||||
```
|
||||
|
||||
Note, for sizing the stepper and steps depending on the layout, use the following instead of setting 'height' and 'max-height' :
|
||||
- `--paper-stepper-horizontal-opened-height`
|
||||
- `--paper-stepper-vertical-max-height`
|
||||
- `--paper-vertical-step-max-height`
|
||||
|
||||
### Stepper
|
||||
|
||||
Custom property | Description | Default
|
||||
------|-------------|----------
|
||||
`--paper-stepper-horizontal-opened-height` | The horizontal opened stepper height | 450px
|
||||
`--paper-stepper-horizontal-opening-transition-duration`| The horizontal stepper opening transition duration (ms) | 500
|
||||
`--paper-stepper-vertical-max-height`| The vertical stepper max height so it has a scrollable area | undefined
|
||||
|
||||
### Step
|
||||
|
||||
Custom property | Description | Default
|
||||
------|-------------|----------
|
||||
`--paper-step-connector-line-background` | The connector lines background color. | `--divider-color`
|
||||
`--paper-step-label-hover-background` | The steps label background when hovered. | rgba(0,0,0,0.04)
|
||||
`--paper-step-ink-color` | The steps ripple effect ink color. | `--divider-color`
|
||||
|
||||
### Step text label
|
||||
|
||||
Custom property | Description | Default
|
||||
------|-------------|----------
|
||||
`--paper-step-disabled-label-text-color` | The no-selectable steps label text color. | `--paper-grey-400`
|
||||
`--paper-step-selectable-label-text-color` | The selectable steps label text color. | `--paper-grey-600`
|
||||
`--paper-step-opened-label-text-color` | The opened steps label text color. | `--light-theme-text-color`
|
||||
`--paper-step-label-text-font-size` | The steps label text font size. | 14px
|
||||
`--paper-step-label-optional-text-font-size` | The steps label optional text font size. | 12px
|
||||
|
||||
### Step badge
|
||||
|
||||
Custom property | Description | Default
|
||||
------|-------------|----------
|
||||
`--paper-step-badge-background` | The badge background. | `--paper-grey-300`
|
||||
`--paper-step-badge-color` | The badge color. | `--dark-theme-text-color`
|
||||
`--paper-step-badge-icon-width` | The badge icon width. | 16px
|
||||
`--paper-step-badge-icon-height` | The badge icon height. | 16px
|
||||
`--paper-step-opened-badge-background` | The opened steps badge background. | `--primary-color`
|
||||
`--paper-step-saved-badge-background` | The saved steps badge background. | `--primary-color`
|
||||
`--paper-step-selectable-hovered-badge-background` | The no-opened no-saved selectable steps badge background. | `--paper-grey-500`
|
||||
|
||||
### Vertical step
|
||||
|
||||
Custom property | Description | Default
|
||||
------|-------------|----------
|
||||
`--paper-vertical-step-continue-button-background` | The continue button background. | `--primary-color`
|
||||
`--paper-vertical-step-continue-button-color` | The continue button background. | `--dark-theme-text-color`
|
||||
`--paper-vertical-step-max-height` | The unrolled step content max-height. | 400px
|
||||
`--paper-vertical-step-transition-duration` | The step opening transition duration | 500ms
|
||||
|
||||
|
||||
@element paper-stepper
|
||||
@demo demo/index.html
|
||||
@hero hero.svg
|
||||
-->
|
||||
<dom-module id="paper-stepper">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
@apply(--layout-vertical);
|
||||
@apply(--shadow-elevation-2dp);
|
||||
background: white;
|
||||
border-radius: 1px;
|
||||
}
|
||||
#verticalResponsiveWidth {
|
||||
width: var(--paper-stepper-vertical-responsive-width, 0px);
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Horizontal layout styles */
|
||||
|
||||
:host([vertical]) {
|
||||
padding: 4px 0;
|
||||
@apply(--layout-scroll);
|
||||
max-height: var(--paper-stepper-vertical-max-height);
|
||||
}
|
||||
:host(:not([vertical])) {
|
||||
position: relative;
|
||||
/* Note: this variable is updated by the stepper itself, don't use it on user side */
|
||||
height: var(--label-wrapper-height);
|
||||
max-height: var(--label-wrapper-height);
|
||||
transition: max-height var(--paper-stepper-horizontal-opening-transition-duration, 300ms), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
:host(:not([vertical]):not([opened]):not(.collapsing)) {
|
||||
@apply(--shadow-none);
|
||||
}
|
||||
:host(:not([vertical])[opened]) {
|
||||
max-height: var(--paper-stepper-horizontal-opened-height, 450px);
|
||||
}
|
||||
:host(:not([vertical])[opened]), :host(:not([vertical]).collapsing) {
|
||||
height: var(--paper-stepper-horizontal-opened-height, 450px);
|
||||
}
|
||||
:host(:not([vertical])) #content-wrapper {
|
||||
@apply(--shadow-elevation-2dp);
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-flex-none);
|
||||
@apply(--layout-justified);
|
||||
background: var(--paper-stepper-horizontal-label-wrapper-background, --primary-background-color);
|
||||
border-radius: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.flex {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
#buttonsWrapper {
|
||||
@apply(--layout-horizontal);
|
||||
overflow: hidden;
|
||||
}
|
||||
#continueButton:not([disabled]) {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
paper-button[disabled] {
|
||||
background-color: transparent;
|
||||
}
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
:host(:not[vertical]) #content-wrapper ::content paper-step[opened] {
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Hidden block with width equals to the responsive threshold -->
|
||||
<div id="verticalResponsiveWidth"></div>
|
||||
|
||||
<!-- This wrapper contains the horizontal stepper header or the full vertical stepper -->
|
||||
<div id="content-wrapper">
|
||||
<content select="[[selectable]]"></content>
|
||||
</div>
|
||||
|
||||
<!-- Slideshow and buttons area for horizontal layout -->
|
||||
<template is="dom-if" if="[[!vertical]]">
|
||||
<div class="flex"></div>
|
||||
<!--
|
||||
<div id="buttonsWrapper">
|
||||
<paper-button hidden$="[[!hasBackButton]]" disabled=[[!_hasBackStep]] on-tap="back">[[backText]]</paper-button>
|
||||
<span class="flex"></span>
|
||||
<paper-button hidden$="[[!hasSkipButton]]" disabled="[[!_canSkip]]" on-tap="progress">[[skipText]]</paper-button>
|
||||
<paper-button id="continueButton" on-tap="continue">{{_choosePrimaryButtonText(_attrForSelectedStepPrimaryButtonText, finishText, continueText, updateText)}}</paper-button>
|
||||
</div>
|
||||
-->
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
Polymer({
|
||||
|
||||
is: 'paper-stepper',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronMenuBehavior,
|
||||
Polymer.NeonAnimationRunnerBehavior,
|
||||
Polymer.IronResizableBehavior
|
||||
],
|
||||
|
||||
/**
|
||||
* Fired when the stepper progress.
|
||||
*
|
||||
* @event paper-stepper-progressed
|
||||
*/
|
||||
/**
|
||||
* Fired when all the steps are saved.
|
||||
*
|
||||
* @event paper-stepper-completed
|
||||
*/
|
||||
properties: {
|
||||
opened: {
|
||||
type: Boolean,
|
||||
computed: '_computeOpened(_selectedIndex)',
|
||||
observer: '_openedChanged',
|
||||
notify: true,
|
||||
reflectToAttribute: true
|
||||
},
|
||||
alternativeLabel: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
vertical: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
reflectToAttribute: true
|
||||
},
|
||||
backText: {
|
||||
type: String,
|
||||
value: 'BACK'
|
||||
},
|
||||
finishText: {
|
||||
type: String,
|
||||
value: 'FINISH'
|
||||
},
|
||||
continueText: {
|
||||
type: String,
|
||||
value: 'CONTINUE'
|
||||
},
|
||||
skipText: {
|
||||
type: String,
|
||||
value: 'SKIP'
|
||||
},
|
||||
optionalText: {
|
||||
type: String,
|
||||
value: 'Optional'
|
||||
},
|
||||
updateText: {
|
||||
type: String,
|
||||
value: 'UPDATE'
|
||||
},
|
||||
linear: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
completed: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
notify: true,
|
||||
computed: '_computeCompleted(stepNumber, savedStepNumber)'
|
||||
},
|
||||
hasSkipButton: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
hasBackButton: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
stepNumber: {
|
||||
type: Number,
|
||||
notify: true,
|
||||
computed: '_computeStepNumber(items.length)'
|
||||
},
|
||||
savedStepNumber: {
|
||||
type: Number,
|
||||
notify: true,
|
||||
readOnly: true
|
||||
},
|
||||
selectedAttribute: {
|
||||
value: 'opened',
|
||||
readOnly: true
|
||||
},
|
||||
/**
|
||||
* Note: if you decide to change this attribute, take care to only include `<paper-step>` elements in your `<paper-stepper>`
|
||||
*/
|
||||
selectable: {
|
||||
value: 'paper-step'
|
||||
},
|
||||
/**
|
||||
* Multi mode is not allowed for now in paper-stepper.
|
||||
*/
|
||||
mutli: {
|
||||
value: false,
|
||||
readOnly: true
|
||||
},
|
||||
responsiveCheckFrequence: {
|
||||
type: Number,
|
||||
value: 200
|
||||
},
|
||||
animateInitialSelection: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
horizontalHigherEntryAnimation: {
|
||||
type: String,
|
||||
value: 'fade-in-slide-from-right-animation'
|
||||
},
|
||||
horizontalHigherExitAnimation: {
|
||||
type: String,
|
||||
value: 'fade-out-slide-right-animation'
|
||||
},
|
||||
horizontalLowerEntryAnimation: {
|
||||
type: String,
|
||||
value: 'fade-in-slide-from-left-animation'
|
||||
},
|
||||
horizontalLowerExitAnimation: {
|
||||
type: String,
|
||||
value: 'fade-out-slide-left-animation'
|
||||
},
|
||||
_skipStepIndex: {
|
||||
type: Number,
|
||||
computed: '_compute_skipStepIndex(_selectedIndex)'
|
||||
},
|
||||
_canSkip: {
|
||||
type: Boolean,
|
||||
notify: true,
|
||||
computed: '_isntNull(_skipStepIndex)'
|
||||
},
|
||||
_backStepIndex: {
|
||||
type: Number,
|
||||
computed: '_compute_backStepIndex(_selectedIndex)'
|
||||
},
|
||||
_hasBackStep: {
|
||||
type: Boolean,
|
||||
computed: '_isntNull(_backStepIndex)'
|
||||
},
|
||||
_selectedIndex: {
|
||||
type: Number,
|
||||
observer: '_selectedIndexChanged',
|
||||
readOnly: true,
|
||||
value: -1
|
||||
},
|
||||
_attrForSelectedStepPrimaryButtonText: {
|
||||
type: String,
|
||||
computed: '_compute__attrForSelectedStepPrimaryButtonText(_selectedIndex, stepNumber)'
|
||||
},
|
||||
_previousAnimatedStep: {
|
||||
type: Object,
|
||||
value: null,
|
||||
readOnly: true
|
||||
},
|
||||
_previousSelected: {
|
||||
type: Object,
|
||||
readOnly: true
|
||||
}
|
||||
},
|
||||
|
||||
keyBindings: {
|
||||
'left': '_onLeftKey',
|
||||
'right': '_onRightKey'
|
||||
},
|
||||
|
||||
listeners: {
|
||||
'iron-items-changed': '_initializeSteps',
|
||||
'paper-step-saved': '_stepSaved',
|
||||
'transitionend': '_transitionEnd',
|
||||
'step-horizontal-label-resize': '_updateStepperClosedMaxHeight',
|
||||
'iron-resize': '_resizeHandler',
|
||||
'neon-animation-finish': '_onNeonAnimationFinish'
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_forwardCanSkip(_canSkip, selectedItem)',
|
||||
'_forwardHasBackStep(_hasBackStep, selectedItem)',
|
||||
'_forwardVertical(vertical)',
|
||||
'_forwardAlternativeLabel(alternativeLabel)',
|
||||
'_forwardStepperData(linear, backText, optionalText, finishText, continueText, skipText, updateText, hasSkipButton, hasBackButton)'
|
||||
],
|
||||
|
||||
attached: function() {
|
||||
this._responsiveCheck();
|
||||
},
|
||||
|
||||
/**
|
||||
* Missing Doc
|
||||
*/
|
||||
back: function() {
|
||||
this.selectIndex(this._backStepIndex);
|
||||
},
|
||||
|
||||
/**
|
||||
* @return {Boolean} Try to continue the current step (if no step opened, use the first one).
|
||||
*/
|
||||
continue: function() {
|
||||
if (this.selectedItem) {
|
||||
if (this.selectedItem.save()) {
|
||||
this.progress();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Loops around the steps from the current (if no step opened, from the first one)
|
||||
* in order to open the next selectable unsaved step. Returns true if a step has been opened.
|
||||
*/
|
||||
progress: function() {
|
||||
if (!this.stepNumber) {
|
||||
return false;
|
||||
}
|
||||
if (this.completed) {
|
||||
this.selected = null;
|
||||
return true;
|
||||
}
|
||||
for (var i = (this._selectedIndex+1)%this.stepNumber; i != this._selectedIndex; i = (i+1)%this.stepNumber) {
|
||||
if (this.items[i].selectable && !this.items[i].saved) {
|
||||
this.selectIndex(i);
|
||||
this.fire('paper-stepper-progressed');
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
/* Deselect and set the steps as unsaved*/
|
||||
reset: function() {
|
||||
this._setSavedStepNumber(0);
|
||||
this.selected = null;
|
||||
if (!this.items.length) {
|
||||
return;
|
||||
}
|
||||
this.items.map(function(step) {
|
||||
step._setSaved(false);
|
||||
step._set_previousSaved(false);
|
||||
});
|
||||
this.items[0]._set_previousSaved(true);
|
||||
},
|
||||
|
||||
get _isRTL() {
|
||||
return window.getComputedStyle(this)['direction'] === 'rtl';
|
||||
},
|
||||
|
||||
_onLeftKey: function(event) {
|
||||
if (this._isRTL) {
|
||||
this._focusNext();
|
||||
} else {
|
||||
this._focusPrevious();
|
||||
}
|
||||
event.detail.keyboardEvent.preventDefault();
|
||||
},
|
||||
|
||||
_onRightKey: function(event) {
|
||||
if (this._isRTL) {
|
||||
this._focusPrevious();
|
||||
} else {
|
||||
this._focusNext();
|
||||
}
|
||||
event.detail.keyboardEvent.preventDefault();
|
||||
},
|
||||
|
||||
/**
|
||||
* Work around: Override the method from IronSelectableBehavior to only allow the selection of selectable step. https://github.com/PolymerElements/iron-selector/issues/99
|
||||
*/
|
||||
_selectSelected: function(selected) {
|
||||
var item = this._valueToItem(this.selected);
|
||||
if (item) {
|
||||
var selectable = item.selectable;
|
||||
if (selectable == undefined) {
|
||||
// if selectable isn't define it means the step is not yet ready for selection
|
||||
// and this method will be recalled by the initialization method.
|
||||
return;
|
||||
} else if (!selectable) {
|
||||
//reset previous selected if non null and selectable or deselect
|
||||
if (this._previousSelected && this._previousSelected.selectable) {
|
||||
this.selected = this._valueForItem(this.previousSelected);
|
||||
} else {
|
||||
this.selected = null;
|
||||
}
|
||||
this._set_previousSelected(null);
|
||||
return;
|
||||
}
|
||||
}
|
||||
this._selection.select(item);
|
||||
this._set_previousSelected(item);
|
||||
this._set_selectedIndex(this.indexOf(item));
|
||||
// Check for items, since this array is populated only when attached
|
||||
// Since Number(0) is falsy, explicitly check for undefined
|
||||
if (this.fallbackSelection && this.items.length && (this._selection.get() === undefined)) {
|
||||
this.selected = this.fallbackSelection;
|
||||
}
|
||||
},
|
||||
|
||||
_updateStepperClosedMaxHeight: function() {
|
||||
this.debounce('updateStepperClosedMaxHeight', function() {
|
||||
this.customStyle['--label-wrapper-height'] = this.$$('#content-wrapper').clientHeight + 'px';
|
||||
this.updateStyles('--label-wrapper-height');
|
||||
});
|
||||
},
|
||||
|
||||
_openedChanged: function(newValue, oldValue) {
|
||||
if (!this.vertical && oldValue != undefined) {
|
||||
this.toggleClass('collapsing', true);
|
||||
}
|
||||
},
|
||||
|
||||
_transitionEnd: function(e) {
|
||||
// check to ignore event fired by paper-ripple
|
||||
if (e.propertyName == 'max-height') {
|
||||
this.toggleClass('collapsing', false);
|
||||
}
|
||||
},
|
||||
|
||||
_computeOpened: function(_selectedIndex) {
|
||||
return _selectedIndex >= 0;
|
||||
},
|
||||
|
||||
_stepSaved: function(e) {
|
||||
var previousStep = this.items[this.indexOf(e.target)+1];
|
||||
if (previousStep) {
|
||||
previousStep._set_previousSaved(true);
|
||||
}
|
||||
this._setSavedStepNumber(this.savedStepNumber+1);
|
||||
},
|
||||
|
||||
_forwardVertical: function(vertical) {
|
||||
if (this.stepNumber) {
|
||||
this.items.map(function(step) {
|
||||
step._setVertical(vertical);
|
||||
});
|
||||
}
|
||||
this.setAttribute('role', vertical ? 'menu': 'menubar');
|
||||
},
|
||||
|
||||
_forwardStepperData: function(linear, backText, optionalText, finishText, continueText, skipText, updateText, hasSkipButton, hasBackButton) {
|
||||
if (this.stepNumber) {
|
||||
this.items.map(function(step) {
|
||||
step._set_stepperData({
|
||||
linear: linear,
|
||||
backText: backText,
|
||||
optionalText: optionalText,
|
||||
finishText: finishText,
|
||||
continueText: continueText,
|
||||
skipText: skipText,
|
||||
updateText: updateText,
|
||||
hasSkipButton: hasSkipButton,
|
||||
hasBackButton: hasBackButton,
|
||||
stepNumber: this.stepNumber
|
||||
});
|
||||
}.bind(this));
|
||||
}
|
||||
},
|
||||
|
||||
_forwardAlternativeLabel: function(alternativeLabel) {
|
||||
if (this.stepNumber) {
|
||||
this.items.map(function(step) {
|
||||
step._set_alternativeLabel(alternativeLabel);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
_computeStepNumber: function(length) {
|
||||
return length;
|
||||
},
|
||||
|
||||
_selectedIndexChanged: function(newValue, oldValue) {
|
||||
if (!this.vertical && newValue >=0 && oldValue >= 0) {
|
||||
var oldStep = this.items[oldValue], newStep = this.items[newValue];
|
||||
if (newStep.classList.contains('neon-animating')) {
|
||||
this.cancelAnimation();
|
||||
}
|
||||
if (this._previousAnimatedStep && this._previousAnimatedStep.classList.contains('neon-animating')) {
|
||||
this.cancelAnimation();
|
||||
this.toggleClass('neon-animating', false, this._previousAnimatedStep);
|
||||
}
|
||||
var forward = newValue - oldValue > 0;
|
||||
|
||||
this.animationConfig = {
|
||||
'new-step-entry': {
|
||||
animatable: newStep,
|
||||
type: forward ?
|
||||
newStep.horizontalHigherEntryAnimation && 'higher-step-entry' :
|
||||
newStep.horizontalLowerEntryAnimation && 'lower-step-entry'
|
||||
},
|
||||
'old-step-exit': {
|
||||
animatable: oldStep,
|
||||
type: forward ?
|
||||
oldStep.horizontalLowerExitAnimation && 'lower-step-exit' :
|
||||
oldStep.horizontalHigherExitAnimation && 'higher-step-exit'
|
||||
}
|
||||
};
|
||||
if (this.animationConfig['new-step-entry'].type) {
|
||||
this.playAnimation('new-step-entry', {step: newStep});
|
||||
this.toggleClass('neon-animating', true, newStep);
|
||||
}
|
||||
if (this.animationConfig['old-step-exit'].type) {
|
||||
this.playAnimation('old-step-exit', {step: oldStep});
|
||||
this.toggleClass('neon-animating', true, oldStep);
|
||||
}
|
||||
|
||||
this._set_previousAnimatedStep(oldStep);
|
||||
}
|
||||
},
|
||||
|
||||
_onNeonAnimationFinish: function(event) {
|
||||
var step = event.detail.step;
|
||||
if (step) {
|
||||
this.toggleClass('neon-animating', false, step);
|
||||
}
|
||||
},
|
||||
|
||||
_forwardCanSkip: function(_canSkip, selectedItem) {
|
||||
selectedItem._set_canSkip(_canSkip);
|
||||
},
|
||||
|
||||
_forwardHasBackStep: function(_hasBackStep, selectedItem) {
|
||||
selectedItem._set_hasBackStep(_hasBackStep);
|
||||
},
|
||||
|
||||
_compute__attrForSelectedStepPrimaryButtonText: function(selectedIndex) {
|
||||
/* TODO: compute from selectedItem when https://github.com/PolymerElements/iron-selector/issues/118 is fixed*/
|
||||
if (selectedIndex < 0) {
|
||||
return null;
|
||||
}
|
||||
var _attrForPrimaryButtonText = this.selectedItem.saved ? 'updateText' :
|
||||
( (this.stepNumber - this.savedStepNumber) == 1 ? 'finishText' : 'continueText' );
|
||||
this.selectedItem._set_attrForPrimaryButtonText(_attrForPrimaryButtonText);
|
||||
return _attrForPrimaryButtonText;
|
||||
},
|
||||
|
||||
_initializeSteps: function() {
|
||||
var savedStepNumber = 0;
|
||||
var data = {
|
||||
linear: this.linear,
|
||||
backText: this.backText,
|
||||
optionalText: this.optionalText,
|
||||
finishText: this.finishText,
|
||||
continueText: this.continueText,
|
||||
skipText: this.skipText,
|
||||
updateText: this.updateText,
|
||||
hasSkipButton: this.hasSkipButton,
|
||||
hasBackButton: this.hasBackButton,
|
||||
stepNumber: this.stepNumber
|
||||
};
|
||||
this.items.map(function(step, i) {
|
||||
if (this.horizontalHigherEntryAnimation && !step.horizontalHigherEntryAnimation) {
|
||||
step.horizontalHigherEntryAnimation = this.horizontalHigherEntryAnimation;
|
||||
}
|
||||
if (this.horizontalHigherExitAnimation && !step.horizontalHigherExitAnimation) {
|
||||
step.horizontalHigherExitAnimation = this.horizontalHigherExitAnimation;
|
||||
}
|
||||
if (this.horizontalLowerEntryAnimation && !step.horizontalLowerEntryAnimation) {
|
||||
step.horizontalLowerEntryAnimation = this.horizontalLowerEntryAnimation;
|
||||
}
|
||||
if (this.horizontalLowerExitAnimation && !step.horizontalLowerExitAnimation) {
|
||||
step.horizontalLowerExitAnimation = this.horizontalLowerExitAnimation;
|
||||
}
|
||||
step._setIndex(i + 1);
|
||||
step._set_stepper(this);
|
||||
step._setVertical(this.vertical);
|
||||
step._set_alternativeLabel(this.alternativeLabel);
|
||||
step._set_stepperData(data);
|
||||
// true for index 0
|
||||
step._set_previousSaved(!i);
|
||||
if (step.saved) {
|
||||
savedStepNumber++;
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
this._setSavedStepNumber(savedStepNumber);
|
||||
// method from IronSelectableBehavior
|
||||
this._updateSelected();
|
||||
},
|
||||
|
||||
_compute_skipStepIndex: function(_selectedIndex) {
|
||||
if (_selectedIndex >= 0 && !this.completed) {
|
||||
for (var i=(_selectedIndex+1)%this.stepNumber; i!=_selectedIndex; i=(i+1)%this.stepNumber) {
|
||||
if (this.items[i].selectable && !this.items[i].saved) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
_compute_backStepIndex: function(_selectedIndex) {
|
||||
if (_selectedIndex >= 0) {
|
||||
for (var i=_selectedIndex - 1; i >= 0; i--) {
|
||||
if (this.items[i].selectable) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
},
|
||||
|
||||
_isntNull: function(n) {
|
||||
return n != null;
|
||||
},
|
||||
|
||||
_computeCompleted: function(savedStepNumber, stepNumber) {
|
||||
var completed = stepNumber == savedStepNumber;
|
||||
if (completed) {
|
||||
this.fire('paper-stepper-completed');
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
_choosePrimaryButtonText: function(_attrForSelectedStepPrimaryButtonText) {
|
||||
return this[_attrForSelectedStepPrimaryButtonText];
|
||||
},
|
||||
|
||||
_resizeHandler: function() {
|
||||
this.debounce('paper-stepper-responsive-check', function() {
|
||||
this._responsiveCheck();
|
||||
}, this.responsiveCheckFrequence);
|
||||
},
|
||||
|
||||
_responsiveCheck: function() {
|
||||
var verticalResponsiveWidth = this.$.verticalResponsiveWidth.clientWidth;
|
||||
if (verticalResponsiveWidth) {
|
||||
this.vertical = !(this.clientWidth > verticalResponsiveWidth);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</dom-module>
|
||||
@@ -1,124 +0,0 @@
|
||||
<link rel="import" href="../../components/iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../components/iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../../components/iron-icons/editor-icons.html">
|
||||
<link rel="import" href="../../components/paper-styles/color.html">
|
||||
<link rel="import" href="../../components/paper-styles/typography.html">
|
||||
<link rel="import" href="../../components/paper-styles/default-theme.html">
|
||||
<link rel="import" href="../../components/polymer/polymer.html">
|
||||
<link rel="import" href="step-label-behavior.html">
|
||||
<link rel="import" href="step-label-shared-styles.html">
|
||||
|
||||
<dom-module id="step-horizontal-label">
|
||||
<template>
|
||||
<style include="step-label-shared-styles">
|
||||
:host{
|
||||
overflow: hidden;
|
||||
}
|
||||
:host([alternative-label]) {
|
||||
@apply(--layout);
|
||||
}
|
||||
#textWrapper {
|
||||
@apply(--layout-vertical);
|
||||
padding-right: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#textLabel, #optional {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
#badge {
|
||||
margin: 0 8px;
|
||||
}
|
||||
#badgeWrapper, #textWrapper {
|
||||
pointer-events: none;
|
||||
/* to be above paper-ripple*/
|
||||
z-index: 1;
|
||||
}
|
||||
:host(:not([alternative-label])) #label {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
height: 72px;
|
||||
}
|
||||
:host(.firstStep:not([alternative-label])) #badge {
|
||||
margin-left: 24px;
|
||||
}
|
||||
:host(.lastStep:not([alternative-label])) #textWrapper {
|
||||
padding-right: 24px;
|
||||
}
|
||||
:host(:not([alternative-label]):not(.first-step)) #label::before,
|
||||
:host(:not([alternative-label]):not(.last-step)) #label::after,
|
||||
:host([alternative-label]) #badgeWrapper::before,
|
||||
:host([alternative-label]) #badgeWrapper::after {
|
||||
height: 1px;
|
||||
min-width: 16px;
|
||||
background: var(--paper-step-connector-line-color, --divider-color);
|
||||
@apply(--layout-flex);
|
||||
content: '';
|
||||
}
|
||||
:host([alternative-label].first-step) #badgeWrapper::before,
|
||||
:host([alternative-label].last-step) #badgeWrapper::after {
|
||||
visibility: hidden;
|
||||
}
|
||||
:host([alternative-label]) #textWrapper{
|
||||
padding: 0 16px;
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-center);
|
||||
}
|
||||
:host([alternative-label]) #textLabel, :host([alternative-label]) #optional{
|
||||
text-align: center;
|
||||
@apply(--layout-self-stretch);
|
||||
}
|
||||
:host([alternative-label]) #label{
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-self-stretch);
|
||||
padding: 24px 0;
|
||||
width: 100%;
|
||||
}
|
||||
:host([alternative-label]) #badgeWrapper {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
:host(.first-step:not([alternative-label])) #label {
|
||||
padding-left: 16px;
|
||||
}
|
||||
:host(.last-step:not([alternative-label])) #label {
|
||||
padding-right: 16px;
|
||||
}
|
||||
</style>
|
||||
<!-- use a "label" wrapper to use the same shared css rules with step-vertical -->
|
||||
<div id="label">
|
||||
<div id="badgeWrapper">
|
||||
<div id="badge">
|
||||
<iron-icon hidden$="{{!_computeIsIconBadge(icon)}}" icon="{{icon}}"></iron-icon>
|
||||
<span hidden$="{{_computeIsIconBadge(icon)}}">{{index}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="textWrapper">
|
||||
<span id="textLabel">[[label]]</span>
|
||||
<template is="dom-if" if="[[optional]]">
|
||||
<span id="optional">[[stepperData.optionalText]]</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'step-horizontal-label',
|
||||
|
||||
behaviors: [
|
||||
Stepper.StepLabelBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
alternativeLabel: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
reflectToAttribute: true
|
||||
}
|
||||
},
|
||||
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
@@ -1,58 +0,0 @@
|
||||
<link rel="import" href="../../components/polymer/polymer.html">
|
||||
|
||||
<script>
|
||||
|
||||
window.Stepper = window.Stepper || {};
|
||||
|
||||
/*
|
||||
* @polymerBehavior Stepper.StepLabelBehavior
|
||||
*/
|
||||
Stepper.StepLabelBehavior = {
|
||||
|
||||
properties: {
|
||||
icon: {
|
||||
type: String,
|
||||
computed: '_computeIcon(saved, editable)'
|
||||
},
|
||||
opened: {
|
||||
type: Boolean,
|
||||
reflectToAttribute: true
|
||||
},
|
||||
selectable: {
|
||||
type: Boolean,
|
||||
reflectToAttribute: true
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
reflectToAttribute: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
notify: true
|
||||
},
|
||||
optional: {
|
||||
type: Boolean,
|
||||
notify: true
|
||||
},
|
||||
saved: {
|
||||
type: Boolean,
|
||||
reflectToAttribute: true
|
||||
},
|
||||
index: {
|
||||
type: Number
|
||||
},
|
||||
stepperData: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
_computeIcon: function(saved, editable) {
|
||||
return saved ? ( editable ? 'editor:mode-edit' : 'done' ) : '';
|
||||
},
|
||||
|
||||
_computeIsIconBadge: function(icon) {
|
||||
return icon.length > 0;
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
@@ -1,74 +0,0 @@
|
||||
<link rel="import" href="../../components/iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../components/paper-styles/default-theme.html">
|
||||
<link rel="import" href="../../components/paper-styles/color.html">
|
||||
<link rel="import" href="../../components/paper-styles/typography.html">
|
||||
<link rel="import" href="../../components/polymer/polymer.html">
|
||||
|
||||
<dom-module id="step-label-shared-styles">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
@apply(--paper-font-common-base);
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
#textWrapper {
|
||||
color: var(--paper-step-disabled-label-text-color, --paper-grey-400);
|
||||
}
|
||||
#textLabel {
|
||||
font-size: var(--paper-step-label-text-font-size, 14px);
|
||||
}
|
||||
#optional{
|
||||
font-size: var(--paper-step-label-optional-text-font-size, 12px);
|
||||
}
|
||||
:host([selectable]) #textWrapper {
|
||||
color: var(--paper-step-selectable-label-text-color, --paper-grey-600);
|
||||
}
|
||||
:host([opened]) #textLabel {
|
||||
color: var(--paper-step-opened-label-text-color, --light-theme-text-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
#label {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
/* For paper-ripple */
|
||||
position: relative;
|
||||
}
|
||||
:host([selectable]) #label {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
#label:hover {
|
||||
/* using alpha chanel for .connectorLine to grow dark */
|
||||
background: var(--paper-step-label-hover-background, rgba(0,0,0,0.04));
|
||||
}
|
||||
#badge {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: var(--paper-step-badge-background, --paper-grey-300);
|
||||
border-radius: 50%;
|
||||
color: var(--paper-step-badge-color, --dark-theme-text-color);
|
||||
font-size: 12px;
|
||||
@apply(--layout);
|
||||
@apply(--layout-center-center);
|
||||
}
|
||||
#badge iron-icon {
|
||||
--iron-icon-height: var(--paper-step-badge-icon-width, 16px);
|
||||
--iron-icon-width: var(--paper-step-badge-icon-height, 16px);
|
||||
}
|
||||
:host([opened]) #badge {
|
||||
background: var(--paper-step-opened-badge-background, --primary-color);
|
||||
}
|
||||
:host([saved]) #badge {
|
||||
background: var(--paper-step-saved-badge-background, --primary-color);
|
||||
}
|
||||
:host([selectable]:not([opened]):not([saved])) #label:hover #badge {
|
||||
background: var(--paper-step-selectable-hovered-badge-background, --paper-grey-500);
|
||||
}
|
||||
paper-ripple {
|
||||
color: var(--paper-step-ink-color, --paper-grey-400);
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</dom-module>
|
||||
@@ -1,177 +0,0 @@
|
||||
<link rel="import" href="../../components/iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../components/paper-button/paper-button.html">
|
||||
<link rel="import" href="../../components/paper-styles/color.html">
|
||||
<link rel="import" href="../../components/paper-styles/default-theme.html">
|
||||
<link rel="import" href="../../components/paper-styles/typography.html">
|
||||
<link rel="import" href="../../components/polymer/polymer.html">
|
||||
<link rel="import" href="../../components/iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../../components/iron-icon/iron-icon.html">
|
||||
<link rel="import" href="../../components/iron-icons/editor-icons.html">
|
||||
<link rel="import" href="../../components/iron-collapse/iron-collapse.html">
|
||||
<link rel="import" href="step-label-behavior.html">
|
||||
<link rel="import" href="step-label-shared-styles.html">
|
||||
|
||||
<dom-module id="step-vertical">
|
||||
<template>
|
||||
<style include="step-label-shared-styles">
|
||||
:host {
|
||||
@apply(--layout-vertical);
|
||||
}
|
||||
#connectedBadge, #textWrapper {
|
||||
pointer-events: none;
|
||||
/* to be above paper-ripple*/
|
||||
z-index: 1;
|
||||
}
|
||||
#collapse {
|
||||
--iron-collapse-transition-duration: var(--paper-vertical-step-transition-duration, 500ms);
|
||||
@apply(--layout-horizontal);
|
||||
}
|
||||
/**
|
||||
* Content
|
||||
*/
|
||||
#connectedStep {
|
||||
@apply(--layout-horizontal);
|
||||
}
|
||||
#contentConnectorLine {
|
||||
width: 1px;
|
||||
background: var(--divider-color, --paper-grey-300);
|
||||
margin-left: 36px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
#stepWrapper {
|
||||
@apply(--layout-flex);
|
||||
/*should be 48px on large screen?*/
|
||||
padding-right: 24px;
|
||||
}
|
||||
#paperStepWrapper {
|
||||
max-height: calc(var(--paper-vertical-step-max-height, 400px) - 92px);
|
||||
@apply(--layout-scroll);
|
||||
}
|
||||
|
||||
/**
|
||||
* Buttons
|
||||
*/
|
||||
#buttonsWrapper {
|
||||
height: 48px;
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
@apply(--layout-flex-none);
|
||||
}
|
||||
#buttonsWrapper > paper-button {
|
||||
margin-right: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
#continueButton {
|
||||
--paper-button: {
|
||||
background: var(--paper-vertical-step-continue-button-background, --primary-color);
|
||||
color: var(--paper-vertical-step-continue-button-color, --dark-theme-text-color);
|
||||
};
|
||||
}
|
||||
/**
|
||||
* Label
|
||||
*/
|
||||
#textWrapper {
|
||||
@apply(--layout-vertical);
|
||||
padding: 8px 0 8px 8px;
|
||||
}
|
||||
#label {
|
||||
@apply(--layout-horizontal);
|
||||
}
|
||||
#connectedBadge {
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-center);
|
||||
margin-left: 24px;
|
||||
}
|
||||
#beforeConnectorLine, #afterConnectorLine {
|
||||
width: 1px;
|
||||
background: var(--paper-step-connector-line-color, --divider-color);
|
||||
}
|
||||
#beforeConnectorLine {
|
||||
height: 10px;
|
||||
}
|
||||
#afterConnectorLine {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
#badge {
|
||||
margin: 8px 0;
|
||||
}
|
||||
:host(.first-step) #beforeConnectorLine, :host(.lastStep) #contentConnectorLine{
|
||||
visibility: hidden;
|
||||
}
|
||||
:host(.last-step:not([opened])) #afterConnectorLine {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="label">
|
||||
<div id="connectedBadge">
|
||||
<div id="beforeConnectorLine"></div>
|
||||
<div id="badge">
|
||||
<iron-icon hidden$="{{!_computeIsIconBadge(icon)}}" icon="{{icon}}"></iron-icon>
|
||||
<span hidden$="{{_computeIsIconBadge(icon)}}">{{index}}</span>
|
||||
</div>
|
||||
<div id="afterConnectorLine" class="connectorLine"></div>
|
||||
</div>
|
||||
<div id="textWrapper">
|
||||
<span id="textLabel">[[label]]</span>
|
||||
<template is="dom-if" if="[[optional]]">
|
||||
<span id="optional">[[stepperData.optionalText]]</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<iron-collapse id="collapse" opened="[[opened]]">
|
||||
<div id="contentConnectorLine"></div>
|
||||
<div id="stepWrapper">
|
||||
<div id="paperStepWrapper">
|
||||
<content></content>
|
||||
</div>
|
||||
<div id="buttonsWrapper">
|
||||
<paper-button id="continueButton" on-tap="continue">{{choosePrimaryButtonText(_attrForPrimaryButtonText, stepperData.continueText, stepperData.finishText, stepperData.updateText)}}</paper-button>
|
||||
<paper-button id="backButton" disabled="[[!hasBackStep]]" on-tap="back" hidden$="[[!stepperData.hasBackButton]]">
|
||||
[[stepperData.backText]]
|
||||
</paper-button>
|
||||
<paper-button id="skipButton" disabled="[[!canSkip]]" on-tap="skip" hidden$="[[!stepperData.hasSkipButton]]">
|
||||
[[stepperData.skipText]]
|
||||
</paper-button>
|
||||
</div>
|
||||
</div>
|
||||
</iron-collapse>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
is: 'step-vertical',
|
||||
|
||||
properties: {
|
||||
canSkip: {
|
||||
type: Boolean
|
||||
},
|
||||
_attrForPrimaryButtonText: {
|
||||
type: String,
|
||||
value: false
|
||||
},
|
||||
hasBackStep: Boolean
|
||||
},
|
||||
|
||||
behaviors: [
|
||||
Stepper.StepLabelBehavior
|
||||
],
|
||||
|
||||
skip: function() {
|
||||
this.fire('paper-step-vertical-skip-tapped');
|
||||
},
|
||||
|
||||
back: function() {
|
||||
this.fire('paper-step-vertical-back-tapped');
|
||||
},
|
||||
|
||||
continue: function() {
|
||||
this.fire('paper-step-vertical-continue-tapped');
|
||||
},
|
||||
|
||||
choosePrimaryButtonText: function(_attrForPrimaryButtonText) {
|
||||
return this.stepperData[_attrForPrimaryButtonText];
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
Reference in New Issue
Block a user