angular-ws-steps - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

app.js

@@ -30,3 +30,3 @@ angular.module('app', [
 
-  myNavigation1.onStepChange(function(){
+  myNavigation1.onStepChange(function() {
     console.log('Step Changes');
@@ -33,0 +33,0 @@ });

package.json

 {
   "name": "angular-ws-steps",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Steps directive for AngularJS. Works like the Tabs. Easy to use.",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -42,3 +42,3 @@ ## Steps Directive [wsSteps]
 
-Note: title and ref parameter from step directive are optional.
+Note: title, ref and across parameter from step directive are optional.
 
@@ -104,2 +104,26 @@ ``` html
 
+- You can pass an Object to the Step using "across" parameter and later, rescues it using ```
+myNav.getStepAcrossObject(myNav.getStep());``` Something like:
+
+``` html
+<steps step="2" enabled-step="2" id="idName">
+  <step icon="icon_name" title="title" ref="idRef1" across="vm.myFunction"></step>
+  <step icon="icon_name" title="title" ref="idRef2" across="vm.myObject"></step>
+</steps>
+
+<script>
+angular.module('app', ['wsSteps'])
+.controller('AppCtrl as vm', function(StepsAPI) {
+  var vm = this;
+  vm.myFunction = function() {...};
+  vm.myObject = {name: 'User Name'};
+  
+  var myNav = new StepsAPI.init('idName');
+  myNav.onStepChange(function() {
+    console.log(myNav.getStepAcrossObject(myNav.getStep())); //Return across vm.myFunction / vm.myObject
+  };
+});
+</script>
+```
+
 - To use the simple bind of AngularJS simply set the same in the desired parameter:
@@ -137,2 +161,3 @@
     myNav.getStepAttributes(myNav.getStep()).myParameter; //Return "my-parameter" from current Step (html example: <step ... my-parameter="value"></step>)
+    myNav.getStepAcrossObject(myNav.getStep()); //Will return any object passed on "across" parameter on Step (Object, Function...)
     myNav.update() //Updates the step and enabled-step based on current value setted on HTML tag.
@@ -182,2 +207,5 @@ });
 ## Change Logs
+#### Version 1.1.1 - 2017-10-24
+- New API access method: getStepAcrossObject(step);
+
 #### Version 1.1.0 - 2017-10-19
@@ -184,0 +212,0 @@ - New API access method: getStepAttributes(step);

src/steps.directive.js

@@ -41,5 +41,4 @@ (function(){
           return stepsNavigation;
-        } else {
-          printNoReady();
         }
+        printNoReady();
       };
@@ -50,5 +49,4 @@
           return stepsNavigation.scope().vm.getElementId();
-        } else {
-          printNoReady();
         }
+        printNoReady();
       }
@@ -67,5 +65,4 @@
           return parseInt(stepsNavigation.scope().vm.step);
-        } else {
-          printNoReady();
         }
+        printNoReady();
       };
@@ -76,13 +73,18 @@
           return stepsNavigation.scope().vm.getStepAttributes(step);
-        } else {
-          printNoReady();
         }
+        printNoReady();
       };
 
+      this.getStepAcrossObject = function(step) {
+        if(stepsNavigation && isReady) {
+          return stepsNavigation.scope().vm.getStepAcrossObject(step);
+        }
+        printNoReady();
+      }
+
       this.getTotalSteps = function() {
         if(stepsNavigation && isReady) {
           return stepsNavigation.scope().vm.getTotalSteps();
-        } else {
-          printNoReady();
         }
+        printNoReady();
       };
@@ -101,5 +103,4 @@
           return parseInt(stepsNavigation.scope().vm.enabledStep);
-        } else {
-          printNoReady();
         }
+        printNoReady();
       };
@@ -442,2 +443,9 @@
 
+    vm.getStepAcrossObject = function(step) {
+      var acrossObject = null;
+      if(step === 0) step = 1;
+      if(vm.stepsChildList[(step - 1)]) acrossObject = vm.stepsChildList[(step - 1)].instance.across;
+      return acrossObject;
+    };
+
     vm.onDestroyCallback = null;
@@ -498,10 +506,12 @@
         icon: '@',
-        title: '@'
+        title: '@',
+        across: '='
       },
       controller: StepController,
+      bindToController: true,
       controllerAs: 'vm',
       template: '<div ng-class="{\'button-mode\': vm.buttonMode, \'complete\': vm.isComplete, \'incomplete\': !vm.isComplete}" class="step" ng-click="vm.showContent()">'+
                 '<div class="step-line-enabled"></div>'+
-                '<i class="step-icon material-icons md-18">{{icon}}</i>'+
-                '<span class="step-title">{{title}}</span>'+
+                '<i class="step-icon material-icons md-18">{{vm.icon}}</i>'+
+                '<span class="step-title">{{vm.title}}</span>'+
                 '</div>'
@@ -518,5 +528,6 @@ }
 
-    //Provides Attributes
+    //Provides Attributes and Across Object
     var scopeAttrs = {
       reference: null,
+      instance: vm,
       attrs: $attrs
@@ -523,0 +534,0 @@ };

src/steps.directive.min.js

 (function(){'use strict';function StepsAPI(){var constructor=function(elementID,stepColors){if(api.registerObjectId(elementID)){console.warn('Duplicated id used on instance. ID name: "'+elementID+'"')}
-var root=this;var elementID=elementID;var stepColors=stepColors;var isReady=!1;var stepsNavigation;function setElement(){stepsNavigation=angular.element(document.querySelector('#'+elementID+' .ws-steps'));if(stepColors){stepsNavigation.scope().vm.setEnabledColor(stepColors.enabledColor);stepsNavigation.scope().vm.setDisabledColor(stepColors.disabledColor);stepsNavigation.scope().vm.setEnabledIconColor(stepColors.enabledIconColor)}};function printNoReady(){console.warn('Component is not ready. Use onReady() event.')};this.getElement=function(){if(stepsNavigation&&isReady){return stepsNavigation}else{printNoReady()}};this.getElementId=function(){if(stepsNavigation&&isReady){return stepsNavigation.scope().vm.getElementId()}else{printNoReady()}}
-this.setStep=function(step){if(stepsNavigation&&isReady){stepsNavigation.scope().vm.setStep(step)}else{printNoReady()}};this.getStep=function(){if(stepsNavigation&&isReady){return parseInt(stepsNavigation.scope().vm.step)}else{printNoReady()}};this.getStepAttributes=function(step){if(stepsNavigation&&isReady){return stepsNavigation.scope().vm.getStepAttributes(step)}else{printNoReady()}};this.getTotalSteps=function(){if(stepsNavigation&&isReady){return stepsNavigation.scope().vm.getTotalSteps()}else{printNoReady()}};this.setEnabledStep=function(value){if(stepsNavigation&&isReady){stepsNavigation.scope().vm.setEnabledStep(value)}else{printNoReady()}};this.getEnabledStep=function(){if(stepsNavigation&&isReady){return parseInt(stepsNavigation.scope().vm.enabledStep)}else{printNoReady()}};this.setEnabledColor=function(color){if(stepsNavigation&&isReady){stepsNavigation.scope().vm.setEnabledColor(color)}else{printNoReady()}};this.setDisabledColor=function(color){if(stepsNavigation&&isReady){stepsNavigation.scope().vm.setDisabledColor(color)}else{printNoReady()}};this.setEnabledIconColor=function(color){if(stepsNavigation&&isReady){stepsNavigation.scope().vm.setEnabledIconColor(color)}else{printNoReady()}};this.onReady=function(callback){var onReadyStepEvent=new StepEvent(elementID,api.events.typeEvent.READY,function(){isReady=!0;setElement();if(callback)callback()});api.addEvent(onReadyStepEvent)};this.onDestroy=function(callback){if(stepsNavigation&&isReady){stepsNavigation.scope().vm.onDestroyCallback=callback}else{printNoReady()}};this.update=function(){if(stepsNavigation&&isReady){root.setStep(root.getStep());root.setEnabledStep(root.getEnabledStep())}else{printNoReady()}}
+var root=this;var elementID=elementID;var stepColors=stepColors;var isReady=!1;var stepsNavigation;function setElement(){stepsNavigation=angular.element(document.querySelector('#'+elementID+' .ws-steps'));if(stepColors){stepsNavigation.scope().vm.setEnabledColor(stepColors.enabledColor);stepsNavigation.scope().vm.setDisabledColor(stepColors.disabledColor);stepsNavigation.scope().vm.setEnabledIconColor(stepColors.enabledIconColor)}};function printNoReady(){console.warn('Component is not ready. Use onReady() event.')};this.getElement=function(){if(stepsNavigation&&isReady){return stepsNavigation}
+printNoReady()};this.getElementId=function(){if(stepsNavigation&&isReady){return stepsNavigation.scope().vm.getElementId()}
+printNoReady()}
+this.setStep=function(step){if(stepsNavigation&&isReady){stepsNavigation.scope().vm.setStep(step)}else{printNoReady()}};this.getStep=function(){if(stepsNavigation&&isReady){return parseInt(stepsNavigation.scope().vm.step)}
+printNoReady()};this.getStepAttributes=function(step){if(stepsNavigation&&isReady){return stepsNavigation.scope().vm.getStepAttributes(step)}
+printNoReady()};this.getStepAcrossObject=function(step){if(stepsNavigation&&isReady){return stepsNavigation.scope().vm.getStepAcrossObject(step)}
+printNoReady()}
+this.getTotalSteps=function(){if(stepsNavigation&&isReady){return stepsNavigation.scope().vm.getTotalSteps()}
+printNoReady()};this.setEnabledStep=function(value){if(stepsNavigation&&isReady){stepsNavigation.scope().vm.setEnabledStep(value)}else{printNoReady()}};this.getEnabledStep=function(){if(stepsNavigation&&isReady){return parseInt(stepsNavigation.scope().vm.enabledStep)}
+printNoReady()};this.setEnabledColor=function(color){if(stepsNavigation&&isReady){stepsNavigation.scope().vm.setEnabledColor(color)}else{printNoReady()}};this.setDisabledColor=function(color){if(stepsNavigation&&isReady){stepsNavigation.scope().vm.setDisabledColor(color)}else{printNoReady()}};this.setEnabledIconColor=function(color){if(stepsNavigation&&isReady){stepsNavigation.scope().vm.setEnabledIconColor(color)}else{printNoReady()}};this.onReady=function(callback){var onReadyStepEvent=new StepEvent(elementID,api.events.typeEvent.READY,function(){isReady=!0;setElement();if(callback)callback()});api.addEvent(onReadyStepEvent)};this.onDestroy=function(callback){if(stepsNavigation&&isReady){stepsNavigation.scope().vm.onDestroyCallback=callback}else{printNoReady()}};this.update=function(){if(stepsNavigation&&isReady){root.setStep(root.getStep());root.setEnabledStep(root.getEnabledStep())}else{printNoReady()}}
 this.onStepChange=function(callback){var onStepChangeStepEvent=new StepEvent(elementID,api.events.typeEvent.STEP_CHANGE,function(){if(callback)callback()},!1);api.addEvent(onStepChangeStepEvent)};this.onEnabledStepChange=function(callback){var onEnabledStepChangeStepEvent=new StepEvent(elementID,api.events.typeEvent.ENABLED_STEP_CHANGE,function(){if(callback)callback()},!1);api.addEvent(onEnabledStepChangeStepEvent)};this.onStepChangeNotAllowed=function(callback){var onStepChangeNotAllowed=new StepEvent(elementID,api.events.typeEvent.STEP_CHANGE_NOT_ALLOWED,function(event){if(callback)callback('Step '+event.requestedStepPosition+' is not enabled for the element "'+elementID+'".')},!1);api.addEvent(onStepChangeNotAllowed)}};var StepEvent=function(elementID,type,callback,autoKill){if(autoKill==undefined)autoKill=!0;this.elementID=elementID;this.type=type;this.autoKill=autoKill;this.callback=callback};var eventsList=[];var createdObjectsId={};var createdElementId={};var api={init:constructor,events:{event:StepEvent,typeEvent:{READY:'onReadyEvent',STEP_CHANGE:'onStepChange',ENABLED_STEP_CHANGE:'onEnabledStepChange',STEP_CHANGE_NOT_ALLOWED:'onStepChangeNotAllowed'}},addEvent:function(stepEvent){eventsList.push(stepEvent)},removeEvent:function(stepEvent){var indexEventOnList=eventsList.indexOf(stepEvent);if(indexEventOnList!==-1){eventsList.splice(indexEventOnList,1)}},removeAllEvents:function(elementID){delete createdElementId[elementID];delete createdObjectsId[elementID];var eventsListCopy=eventsList;eventsListCopy.forEach(function(event){if(event.elementID===elementID){eventsList.splice(eventsList.indexOf(event),1)}})},dispatchEvent:function(elementID,typeEvent,params){var cloneEventsList
@@ -19,7 +27,7 @@ cloneEventsList=eventsList;cloneEventsList.forEach(function(stepEvent){if(stepEvent.elementID===elementID&&stepEvent.type===typeEvent&&stepEvent.callback){stepEvent.callback(params);if(stepEvent.autoKill){api.removeEvent(stepEvent)}}})},registerObjectId:function(elementID){var alreadyRegistered=createdObjectsId[elementID];createdObjectsId[elementID]=!0;return alreadyRegistered},registerElementId:function(elementID){var alreadyRegistered=createdElementId[elementID];createdElementId[elementID]=!0;return alreadyRegistered}};return api};function StepColors(){function constructor(enabledColor,disabledColor,enabledIconColor){this.enabledColor=enabledColor;this.disabledColor=disabledColor;this.enabledIconColor=enabledIconColor}
 vm.getTotalSteps=getTotalSteps;vm.getElementId=function(){return $attrs.id}
-vm.setElement=function(element){vm.element=element;stepsNavigation=vm.element[0].querySelector('nav.ws-steps-transclude');if(vm.colors){var newColors=vm.colors.split(',');vm.setEnabledColor(newColors[0]);vm.setDisabledColor(newColors[1]);vm.setEnabledIconColor(newColors[2])}};vm.setEnabledColor=function(color){document.getElementById($attrs.id).style.setProperty('--ws-steps-enabled-color',color)};vm.setDisabledColor=function(color){document.getElementById($attrs.id).style.setProperty('--ws-steps-disabled-color',color)};vm.setEnabledIconColor=function(color){document.getElementById($attrs.id).style.setProperty('--ws-steps-enabled-icon-color',color)};vm.setStep=function(step){vm.step=step};vm.setEnabledStep=function(value){vm.enabledStep=value};vm.getStepAttributes=function(step){var attributes=null;if(step===0)step=1;if(vm.stepsChildList[(step-1)])attributes=vm.stepsChildList[(step-1)].attrs;return attributes};vm.onDestroyCallback=null;$scope.$on('$destroy',function(){StepsAPI.removeAllEvents($attrs.id)
+vm.setElement=function(element){vm.element=element;stepsNavigation=vm.element[0].querySelector('nav.ws-steps-transclude');if(vm.colors){var newColors=vm.colors.split(',');vm.setEnabledColor(newColors[0]);vm.setDisabledColor(newColors[1]);vm.setEnabledIconColor(newColors[2])}};vm.setEnabledColor=function(color){document.getElementById($attrs.id).style.setProperty('--ws-steps-enabled-color',color)};vm.setDisabledColor=function(color){document.getElementById($attrs.id).style.setProperty('--ws-steps-disabled-color',color)};vm.setEnabledIconColor=function(color){document.getElementById($attrs.id).style.setProperty('--ws-steps-enabled-icon-color',color)};vm.setStep=function(step){vm.step=step};vm.setEnabledStep=function(value){vm.enabledStep=value};vm.getStepAttributes=function(step){var attributes=null;if(step===0)step=1;if(vm.stepsChildList[(step-1)])attributes=vm.stepsChildList[(step-1)].attrs;return attributes};vm.getStepAcrossObject=function(step){var acrossObject=null;if(step===0)step=1;if(vm.stepsChildList[(step-1)])acrossObject=vm.stepsChildList[(step-1)].instance.across;return acrossObject};vm.onDestroyCallback=null;$scope.$on('$destroy',function(){StepsAPI.removeAllEvents($attrs.id)
 if(vm.onDestroyCallback)vm.onDestroyCallback()});vm.stepsChildList=[];function onStepChanged(activeStepPosition){if(activeStepPosition<=vm.enabledStep){updateStepsStyle();updateCompleteStepsClass();lastValidStep=activeStepPosition;var contentIndex=activeStepPosition-1;if(contentIndex<0){hideAllContents()}else{if(vm.stepsChildList[contentIndex])hideAllContents(vm.stepsChildList[contentIndex].reference)}
-StepsAPI.dispatchEvent($attrs.id,StepsAPI.events.typeEvent.STEP_CHANGE)}else{updateStepsStyle();console.warn('Step '+activeStepPosition+' is not enabled for the element "'+$attrs.id+'".');StepsAPI.dispatchEvent($attrs.id,StepsAPI.events.typeEvent.STEP_CHANGE_NOT_ALLOWED,{requestedStepPosition:activeStepPosition})}};function onEnabledStepChanged(enabledStepPosition){updateStepsStyle();StepsAPI.dispatchEvent($attrs.id,StepsAPI.events.typeEvent.ENABLED_STEP_CHANGE)};var onReadyEvent=new StepsAPI.events.event($attrs.id,StepsAPI.events.typeEvent.READY,function(){$scope.$watch('vm.step',onStepChanged);$scope.$watch('vm.enabledStep',onEnabledStepChanged)});StepsAPI.addEvent(onReadyEvent)};function Step(){return{restrict:'E',scope:{icon:'@',title:'@'},controller:StepController,controllerAs:'vm',template:'<div ng-class="{\'button-mode\': vm.buttonMode, \'complete\': vm.isComplete, \'incomplete\': !vm.isComplete}" class="step" ng-click="vm.showContent()">'+'<div class="step-line-enabled"></div>'+'<i class="step-icon material-icons md-18">{{icon}}</i>'+'<span class="step-title">{{title}}</span>'+'</div>'}};StepController.childrenFilter={};function StepController($scope,$attrs,StepsAPI){var vm=this;vm.buttonMode=!1;vm.isComplete=!1;var scopeAttrs={reference:null,attrs:$attrs};if($attrs.ref){document.getElementById($attrs.ref).classList.add('ws-steps-content-hidden');scopeAttrs.reference=$attrs.ref}
+StepsAPI.dispatchEvent($attrs.id,StepsAPI.events.typeEvent.STEP_CHANGE)}else{updateStepsStyle();console.warn('Step '+activeStepPosition+' is not enabled for the element "'+$attrs.id+'".');StepsAPI.dispatchEvent($attrs.id,StepsAPI.events.typeEvent.STEP_CHANGE_NOT_ALLOWED,{requestedStepPosition:activeStepPosition})}};function onEnabledStepChanged(enabledStepPosition){updateStepsStyle();StepsAPI.dispatchEvent($attrs.id,StepsAPI.events.typeEvent.ENABLED_STEP_CHANGE)};var onReadyEvent=new StepsAPI.events.event($attrs.id,StepsAPI.events.typeEvent.READY,function(){$scope.$watch('vm.step',onStepChanged);$scope.$watch('vm.enabledStep',onEnabledStepChanged)});StepsAPI.addEvent(onReadyEvent)};function Step(){return{restrict:'E',scope:{icon:'@',title:'@',across:'='},controller:StepController,bindToController:!0,controllerAs:'vm',template:'<div ng-class="{\'button-mode\': vm.buttonMode, \'complete\': vm.isComplete, \'incomplete\': !vm.isComplete}" class="step" ng-click="vm.showContent()">'+'<div class="step-line-enabled"></div>'+'<i class="step-icon material-icons md-18">{{vm.icon}}</i>'+'<span class="step-title">{{vm.title}}</span>'+'</div>'}};StepController.childrenFilter={};function StepController($scope,$attrs,StepsAPI){var vm=this;vm.buttonMode=!1;vm.isComplete=!1;var scopeAttrs={reference:null,instance:vm,attrs:$attrs};if($attrs.ref){document.getElementById($attrs.ref).classList.add('ws-steps-content-hidden');scopeAttrs.reference=$attrs.ref}
 $scope.$parent.$parent.vm.stepsChildList.push(scopeAttrs);var stepsNavigationScope=$scope.$parent.$parent.vm;if(!StepController.childrenFilter[stepsNavigationScope.getElementId()]){StepController.childrenFilter[stepsNavigationScope.getElementId()]=1}else{StepController.childrenFilter[stepsNavigationScope.getElementId()]++}
 var expectedSteps=stepsNavigationScope.getTotalSteps();var currentTotalSteps=StepController.childrenFilter[stepsNavigationScope.getElementId()];$attrs.$set('position',currentTotalSteps);if(expectedSteps===currentTotalSteps){delete StepController.childrenFilter[stepsNavigationScope.getElementId()];StepsAPI.dispatchEvent(stepsNavigationScope.getElementId(),StepsAPI.events.typeEvent.READY)}
 vm.showContent=function(){if($attrs.position<=stepsNavigationScope.enabledStep){stepsNavigationScope.setStep($attrs.position)}else{StepsAPI.dispatchEvent(stepsNavigationScope.getElementId(),StepsAPI.events.typeEvent.STEP_CHANGE_NOT_ALLOWED,{requestedStepPosition:$attrs.position})}}};function StepContent(){return{restrict:'E',link:function(scope,element,attrs){element.addClass('ws-steps-content-hidden')}}};angular.module('wsSteps',['ngMaterial']).factory('StepsAPI',StepsAPI).factory('StepColors',StepColors).directive('steps',Steps).directive('step',Step).directive('stepContent',StepContent)}())

No alert changes

Improved metrics

Total package byte prevSize

51462

0.83%

Lines of code

752

2.17%

Number of lines in readme file

215

14.97%

No dependency changes