From b019fe407fc3380cb4d21ac15e9b81f8f98aeb12 Mon Sep 17 00:00:00 2001 From: Wikiki Date: Fri, 9 Feb 2018 15:01:39 +0100 Subject: [PATCH] [Prerelease] Bumped version number --- CHANGELOG.md | 5 + bower.json | 2 +- dist/bulma-steps.sass | 286 ++++++++++++++++++++---------------------- package.json | 2 +- 4 files changed, 143 insertions(+), 152 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0f60a3f..e2743d9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ + +## [0.2.3](https://github.com/Wikiki/bulma-steps/compare/0.2.2...0.2.3) (2018-02-09) + + + ## [0.2.2](https://github.com/Wikiki/bulma-steps/compare/v0.1.2...v0.2.2) (2018-02-09) diff --git a/bower.json b/bower.json index 8229f5c..9955a49 100644 --- a/bower.json +++ b/bower.json @@ -2,7 +2,7 @@ "name": "bulma-steps", "description": "Display steps for a process (like sign-up, or order, form), in different colors, sizes, and states", "main": "steps.sass", - "version": "0.2.2", + "version": "0.2.3", "authors": [ "Wikiki (https://wikiki.github.io/bulma-extensions/overview)" ], diff --git a/dist/bulma-steps.sass b/dist/bulma-steps.sass index b0f34d0..31fa1b3 100644 --- a/dist/bulma-steps.sass +++ b/dist/bulma-steps.sass @@ -1,153 +1,139 @@ -$steps-maker-default-color: $grey-light !default -$steps-marker-default-border: .2em solid #fff !default -$steps-default-color: $grey-lighter !default -$steps-completed-color: $primary !default -$steps-active-color: $primary !default -$steps-divider-height: .2em !default - -=steps-size($size) - font-size: $size - min-height: $size * 2 - - .step-item - &:not(:first-child)::before - height: $steps-divider-height - width: 100% - bottom: 0 - left: -50% - top: #{$size} - .step-marker - height: $size * 2 - width: $size * 2 - position: absolute - left: calc(50% - #{$size}) - .icon - * - font-size: $size - .step-details - margin-top: $size * 2 - margin-left: .5em - margin-right: .5em - padding-top: .2em - .step-title - font-size: $size * 1.2 - font-weight: $weight-semibold - - -.steps - +block - display: flex - flex-wrap: wrap - - .step-item - margin-top: 0 - position: relative - flex-grow: 1 - flex-basis: 0 - &:not(:first-child) - flex-basis: 1em - flex-grow: 1 - flex-shrink: 1 - &::before - // This will contain the horizontal or vertical divider - content: " " - display: block - position: absolute - - &::before - background: linear-gradient(to left, $steps-default-color 50%, $steps-active-color 50%) - background-size: 200% 100% - background-position: right bottom - .step-marker - color: $white - &.is-active - &::before - background-position: left bottom - .step-marker - background-color: $white - border-color: $steps-active-color - color: $steps-active-color - &.is-completed - &::before - background-position: left bottom - .step-marker - color: $white - background-color: $steps-completed-color - - .step-marker - align-items: center - display: flex - border-radius: 50% - font-weight: $weight-bold - justify-content: center - background: $steps-maker-default-color - color: $white - border: $steps-marker-default-border - z-index: 1 - - .step-details - text-align: center - - // Override marker color per step - @each $name, $pair in $colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - &.is-#{$name} - &::before - background: linear-gradient(to left, $steps-default-color 50%, $color 50%) - background-size: 200% 100% - background-position: right bottom - &.is-active - &::before - background-position: left bottom - .step-marker - background-color: $white - border-color: $color - color: $color - &.is-completed - &::before - background-position: left bottom - .step-marker - color: $color-invert - background-color: $color - - .steps-content - align-items: stretch - flex-basis: 100% - margin: 2rem 0 - .step-content - display: none - &.is-active - display: block - - .steps-actions - display: flex - align-items: stretch - flex-basis: 100% - .steps-action - display: flex - flex-basis: 0 - flex-grow: 1 - margin: .5rem - justify-content: center - align-items: center - - &.is-animated - .step-item - &::before - transition: all 2s ease - .step-marker - transition: all 0s ease - transition-delay: 1.5s - - +steps-size($size-normal) - &.is-small - +steps-size($size-small) - &.is-medium - +steps-size($size-medium) - &.is-large - +steps-size($size-large) -length) { +const MOUSE_EVENTS = ['click', 'touchstart']; + +export default class StepsWizard { + constructor(element = null, options = {}) { + this.options = Object.assign({}, { + 'selector': '.step-item', + 'selector_content': '.step-content', + 'previous_selector': '[data-nav="previous"]', + 'next_selector': '[data-nav="next"]', + 'active_class': 'is-active', + 'completed_class': 'is-completed', + 'beforeNext': null, + 'onShow': null, + 'onFinish': null, + 'onError': null + }, options); + + this.element = element; + this.steps = element.querySelectorAll(this.options.selector); + this.contents = element.querySelectorAll(this.options.selector_content); + this.previous_btn = element.querySelector(this.options.previous_selector); + this.next_btn = element.querySelector(this.options.next_selector); + + this.init(); + } + + init() { + for (var i = 0; i < this.steps.length; i++) { + var step = this.steps[i]; + + step.setAttribute('data-step-id', i); + } + + this.bind(); + + this.start(); + } + + bind() { + var _this = this; + + if (this.previous_btn != null) { + MOUSE_EVENTS.forEach((event) => { + this.previous_btn.addEventListener(event, function(e) { + e.preventDefault(); + if (!e.target.getAttribute('disabled')) { + _this.previous_step(); + } + }); + }); + } + + if (this.next_btn != null) { + MOUSE_EVENTS.forEach((event) => { + this.next_btn.addEventListener(event, function(e) { + e.preventDefault(); + if (!e.target.getAttribute('disabled')) { + _this.next_step(); + } + }); + }); + } + } + + start() { + this.activate_step(0); + this.updateActions(this.steps[0]); + } + + get_current_step_id() { + for (var i = 0; i < this.steps.length; i++) { + var step = this.steps[i]; + + if (step.classList.contains(this.options.active_class)) { + return parseInt(step.getAttribute('data-step-id')); + } + } + + return null; + } + + updateActions(step) { + var stepId = parseInt(step.getAttribute('data-step-id')); + if (stepId == 0) { + if (this.previous_btn != null) { + this.previous_btn.setAttribute('disabled', 'disabled'); + } + if (this.next_btn != null) { + this.next_btn.removeAttribute('disabled', 'disabled'); + } + } else if (stepId == (this.steps.length - 1)) { + if (this.previous_btn != null) { + this.previous_btn.removeAttribute('disabled', 'disabled'); + } + if (this.next_btn != null) { + this.next_btn.setAttribute('disabled', 'disabled'); + } + } else { + if (this.previous_btn != null) { + this.previous_btn.removeAttribute('disabled', 'disabled'); + } + if (this.next_btn != null) { + this.next_btn.removeAttribute('disabled', 'disabled'); + } + } + } + + next_step() { + var current_id = this.get_current_step_id(); + + if (current_id == null) { + return; + } + + var next_id = current_id + 1, + errors = []; + + if (typeof this.options.beforeNext != 'undefined' && this.options.beforeNext != null && this.options.beforeNext) { + errors = this.options.beforeNext(current_id); + } + + if (typeof errors == 'undefined') { + errors = []; + } + + if (errors.length > 0) { + for (var i = 0; i < errors.length; i++) { + if (typeof this.options.onError != 'undefined' && this.options.onError != null && this.options.onError) { + this.options.onError(errors[i]); + } + } + + return; + } + + if (next_id >= this.steps.length) { if (typeof this.options.onFinish != 'undefined' && this.options.onFinish != null && this.options.onFinish) { this.options.onFinish(current_id); } diff --git a/package.json b/package.json index 3545d46..2265ad9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bulma-steps", - "version": "0.2.2", + "version": "0.2.3", "description": "Display steps for a process (like sign-up, or order, form), in different colors, sizes, and states ", "main": "steps.sass", "scripts": {