Skip to content

Commit

Permalink
Linear, non-linear, editable
Browse files Browse the repository at this point in the history
  • Loading branch information
@urdeveloper
urdeveloper committed Nov 3, 2017
1 parent 9c2a6f0 commit 4b65eaf
Show file tree
Hide file tree
Showing 5 changed files with 164 additions and 34 deletions.
4 changes: 3 additions & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@
"paper-styles": "^2.0.0",
"iron-selector": "^2.0.0",
"iron-pages": "^2.0.0",
"paper-button": "^2.0.0"
"paper-button": "^2.0.0",
"iron-iconset-svg": "^2.1.0",
"iron-icon": "^2.0.1"
},
"devDependencies": {
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
Expand Down
44 changes: 40 additions & 4 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,18 +22,54 @@

<body>
<div class="vertical-section-container centered">
<h3>Basic ud-stepper demo</h3>
<h3>Linear Stepper</h3>
<demo-snippet>
<template>
<ud-stepper linear>
<ud-step title="Step 1">
<div slot="content">Step 1 Content</div>
</ud-step>
<ud-step title="Step 2">
<div slot="content">Step 2 Content</div>
</ud-step>
<ud-step title="Step 3">
<div slot="content">Step 3 Content</div>
</ud-step>
</ud-stepper>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>Non-Linear Stepper</h3>
<demo-snippet>
<template>
<ud-stepper>
<ud-step title="Step 1">
<div slot="content">Step 1 Content</div>
</ud-step>
<ud-step title="Optional Step 2">
<div slot="content">Step 2 Content</div>
<ud-step title="Step 2">
<div slot="content">Step 2 Content</div>
</ud-step>
<ud-step title="Step 3">
<div slot="content">Step 3 Content</div>
</ud-step>
</ud-stepper>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>Linear Stepper with an editable step</h3>
<demo-snippet>
<template>
<ud-stepper linear>
<ud-step title="Step 1" editable>
<div slot="content">Step 1 Content</div>
</ud-step>
<ud-step title="Step 2">
<div slot="content">Step 2 Content</div>
</ud-step>
<ud-step title="Step 3">
<div slot="content">Step 3 Content</div>
<div slot="content">Step 3 Content</div>
</ud-step>
</ud-stepper>
</template>
Expand Down
11 changes: 11 additions & 0 deletions ud-iconset.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@

<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html">

<iron-iconset-svg size="24" name="ud">
<svg><defs>
<g id="check-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></g>
<g id="warning"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path></g>
<g id="edit-circle"><path d="M5.923 15.545v2.532h2.532l7.467-7.467-2.532-2.532zM17.88 8.652c.263-.263.263-.69 0-.952L16.3 6.12c-.263-.263-.69-.263-.952 0l-1.236 1.236 2.532 2.532zM1 12C1 5.923 5.923 1 12 1s11 4.923 11 11-4.923 11-11 11S1 18.077 1 12z"/></g>
</defs></svg>
</iron-iconset-svg>
51 changes: 46 additions & 5 deletions ud-step.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
display: flex;
flex-direction: row;
justify-content: flex-end;
flex: 1;
}

paper-button {
Expand Down Expand Up @@ -82,23 +83,51 @@
reflectToAttribute: true
},

editable: {
type: Boolean
},

selected: {
type: Boolean,
reflectToAttribute: true
},

allowedActions: {
actions: {
type: Array
},

completed: {
type: Boolean
},

icon: {
type: String
},

completedIcon: {
type: String,
value: 'ud:check-circle'
},

editableIcon: {
type: String,
value: 'ud:edit-circle'
},

currentIcon: {
type: String,
computed: '_computeCurrentIcon(completed, editable)',
notify: true
},

_actionButtons: {
type: Array
}
}
}

static get observers() {
return ['_updateActionsButtons(_actionButtons.*,allowedActions)']
return ['_updateActionsButtons(_actionButtons.*,actions)']
}

ready() {
Expand All @@ -113,10 +142,15 @@

_updateActionsButtons(actionButtons, allowedActions) {
if (!actionButtons || !allowedActions) return;

this._actionButtons.forEach(ab => {
const dataAction = ab.getAttribute('data-action');
ab.disabled = this.allowedActions.indexOf(dataAction) < 0;
const actionName = ab.getAttribute('data-action');
const action = this.actions.find(a => a.name === actionName);
if (!action) {
ab.style.display = 'none';
} else {
ab.disabled = action.disabled;
}
});
}

Expand All @@ -126,6 +160,13 @@
bubbles: true
}));
}

_computeCurrentIcon(completed, editable) {
if (completed) {
return editable?this.editableIcon:this.completedIcon;
}
return this.icon;
}
}

window.customElements.define(UdStepElement.is, UdStepElement);
Expand Down
88 changes: 64 additions & 24 deletions ud-stepper.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,11 @@
<link rel="import" href="../paper-styles/typography.html">
<link rel="import" href="../iron-selector/iron-selector.html">
<link rel="import" href="../iron-pages/iron-pages.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../polymer/lib/mixins/mutable-data.html">

<link rel="import" href="ud-step.html">
<link rel="import" href="ud-iconset.html">

<dom-module id="ud-stepper">
<template>
Expand Down Expand Up @@ -49,9 +52,7 @@
display: flex;
flex-direction: row;
cursor: pointer;
}

.header .label {
align-items: center;
padding: 24px 24px 24px 24px;
}

Expand All @@ -60,11 +61,7 @@
}

.label-icon {
background-color: rgba(0, 0, 0, 0.38);
color: white;
border-radius: 50%;
width: 24px;
height: 24px;
color: rgba(0, 0, 0, 0.38);
@apply --paper-font-caption;
text-align: center;
line-height: 24px;
Expand All @@ -76,20 +73,49 @@
color: rgba(0, 0, 0, 0.54);
}

.header.selected .label-icon {
background-color: var(--google-blue-500);
.header.selected .label-icon,
.header[completed] .label-icon {
color: var(--google-blue-500);
}

.header.selected .label-text {
.header.selected .label-text,
.header[completed] .label-text {
color: rgba(0, 0, 0, 0.87);
}

.step-number {
color: white;
background-color: rgba(0, 0, 0, 0.38);
border-radius: 50%;
line-height: 24px;
width: 24px;
height: 24px;
max-height: 24px;
max-width: 24px;
}

.header.selected .step-number {
background-color: var(--google-blue-500);
}
</style>
<iron-selector class="header-container" selectable=".header.selectable" selected-class="selected" selected="{{selectedStep}}">
<dom-repeat items="[[_steps]]">
<iron-selector id="selector" class="header-container" selectable=".header.selectable" selected-class="selected" selected="{{selectedStep}}"
on-iron-activate="_handleStepActivate" selected-attribute="selected">
<dom-repeat items="[[_steps]]" mutable-data>
<template>
<div class$="[[_getHeaderClasses(item)]]">
<div class="header selectable" completed$="[[item.completed]]">
<div class="label">
<div class="label-icon">[[_getStepNumber(index)]]</div>
<div class="label-icon">
<dom-if if="[[item.currentIcon]]">
<template>
<iron-icon icon="[[item.currentIcon]]"></iron-icon>
</template>
</dom-if>
<dom-if if="[[!item.currentIcon]]">
<template>
<div class="step-number">[[_getStepNumber(index)]]</div>
</template>
</dom-if>
</div>
<div class="label-text">[[item.title]]</div>
</div>
</div>
Expand All @@ -112,7 +138,7 @@
* @memberof UrDeveloper
* @demo demo/index.html
*/
class UdStepperElement extends Polymer.Element {
class UdStepperElement extends Polymer.MutableData(Polymer.Element) {
static get is() {
return 'ud-stepper';
}
Expand Down Expand Up @@ -170,11 +196,18 @@

_prepareSteps(steps) {
steps.forEach((step, i) => {
const allowedActions = ['continue','cancel'];
if (i != 0 && !this.linear) {
allowedActions.push('back');
const actions = [{
name: 'continue'
}, {
name: 'cancel'
}];
if (!this.linear) {
actions.push({
name: 'back',
disabled: i === 0
});
}
step.allowedActions = allowedActions;
step.actions = actions;
});
}

Expand All @@ -186,15 +219,13 @@
return index + 1;
}

_getHeaderClasses(item) {
return 'header selectable';
}

_handleStepAction(evt) {
this[evt.detail.toLowerCase()](evt.target);
}

continue (step) {
step.completed = true;
this.notifyPath('_steps');
if (this.selectedStep < this._steps.length - 1) {
this.selectedStep = this.selectedStep + 1;
}
Expand All @@ -209,6 +240,15 @@
cancel(evt) {

}

_handleStepActivate(evt) {
if (this.linear) {
const step = this._steps[evt.detail.selected];
if (!step.completed || !step.editable) {
evt.preventDefault();
}
}
}
}

window.customElements.define(UdStepperElement.is, UdStepperElement);
Expand Down

0 comments on commit 4b65eaf

Please sign in to comment.