Added basic onboarding steps
This commit is contained in:
Stefan Zermatten
@@ -0,0 +1,735 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user