[Prerelease] Bumped version number

CHANGELOG.md

@@ -1,3 +1,8 @@
+<a name="0.2.3"></a>
+## [0.2.3](https://github.com/Wikiki/bulma-steps/compare/0.2.2...0.2.3) (2018-02-09)
+
+
+
 <a name="0.2.2"></a>
 ## [0.2.2](https://github.com/Wikiki/bulma-steps/compare/v0.1.2...v0.2.2) (2018-02-09)
 

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 <[email protected]> (https://wikiki.github.io/bulma-extensions/overview)"
   ],

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);
       }

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": {