bulma-extensions
Version:
Set of extensions for Bulma.io CSS Framework
1 lines • 4.41 kB
JavaScript
"use strict";function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function _defineProperties(t,e){for(var s=0;s<e.length;s++){var i=e[s];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function _createClass(t,e,s){return e&&_defineProperties(t.prototype,e),s&&_defineProperties(t,s),t}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var MOUSE_EVENTS=["click","touchstart"],StepsWizard=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};_classCallCheck(this,t),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},s),this.element=e,this.steps=e.querySelectorAll(this.options.selector),this.contents=e.querySelectorAll(this.options.selector_content),this.previous_btn=e.querySelector(this.options.previous_selector),this.next_btn=e.querySelector(this.options.next_selector),this.init()}return _createClass(t,[{key:"init",value:function(){for(var t=0;t<this.steps.length;t++){this.steps[t].setAttribute("data-step-id",t)}this.bind(),this.start()}},{key:"bind",value:function(){var t=this,e=this;null!=this.previous_btn&&MOUSE_EVENTS.forEach(function(s){t.previous_btn.addEventListener(s,function(t){t.preventDefault(),t.target.getAttribute("disabled")||e.previous_step()})}),null!=this.next_btn&&MOUSE_EVENTS.forEach(function(s){t.next_btn.addEventListener(s,function(t){t.preventDefault(),t.target.getAttribute("disabled")||e.next_step()})})}},{key:"start",value:function(){this.activate_step(0),this.updateActions(this.steps[0])}},{key:"get_current_step_id",value:function(){for(var t=0;t<this.steps.length;t++){var e=this.steps[t];if(e.classList.contains(this.options.active_class))return parseInt(e.getAttribute("data-step-id"))}return null}},{key:"updateActions",value:function(t){var e=parseInt(t.getAttribute("data-step-id"));0==e?(null!=this.previous_btn&&this.previous_btn.setAttribute("disabled","disabled"),null!=this.next_btn&&this.next_btn.removeAttribute("disabled","disabled")):e==this.steps.length-1?(null!=this.previous_btn&&this.previous_btn.removeAttribute("disabled","disabled"),null!=this.next_btn&&this.next_btn.setAttribute("disabled","disabled")):(null!=this.previous_btn&&this.previous_btn.removeAttribute("disabled","disabled"),null!=this.next_btn&&this.next_btn.removeAttribute("disabled","disabled"))}},{key:"next_step",value:function(){var t=this.get_current_step_id();if(null!=t){var e=t+1,s=[];if(void 0!==this.options.beforeNext&&null!=this.options.beforeNext&&this.options.beforeNext&&(s=this.options.beforeNext(t)),void 0===s&&(s=[]),s.length>0)for(var i=0;i<s.length;i++)void 0!==this.options.onError&&null!=this.options.onError&&this.options.onError&&this.options.onError(s[i]);else e>=this.steps.length?(void 0!==this.options.onFinish&&null!=this.options.onFinish&&this.options.onFinish&&this.options.onFinish(t),this.deactivate_step(t)):(this.complete_step(t),this.activate_step(e))}}},{key:"previous_step",value:function(){var t=this.get_current_step_id();null!=t&&(this.uncomplete_step(t-1),this.activate_step(t-1))}},{key:"activate_step",value:function(t){this.updateActions(this.steps[t]);for(var e=0;e<this.steps.length;e++){this.steps[e]!=this.steps[t]&&this.deactivate_step(e)}this.steps[t].classList.add(this.options.active_class),void 0!==this.contents[t]&&this.contents[t].classList.add(this.options.active_class),void 0!==this.options.onShow&&null!=this.options.onShow&&this.options.onShow&&this.options.onShow(t)}},{key:"complete_step",value:function(t){this.steps[t].classList.add(this.options.completed_class)}},{key:"uncomplete_step",value:function(t){this.steps[t].classList.remove(this.options.completed_class)}},{key:"deactivate_step",value:function(t){this.steps[t].classList.remove(this.options.active_class),void 0!==this.contents[t]&&this.contents[t].classList.remove(this.options.active_class)}}]),t}();exports.default=StepsWizard,document.addEventListener("DOMContentLoaded",function(){var t=document.querySelectorAll(".steps");[].forEach.call(t,function(t){new StepsWizard(t)})});