angular-ws-steps - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

app.js

@@ -14,6 +14,8 @@ angular.module('app', [
     console.log('Total Steps:', myNavigation1.getTotalSteps());
-    myNavigation1.setStep(0);
+    myNavigation1.setStep(1);
     console.log('Current Step:', myNavigation1.getStep());
     myNavigation1.setEnabledStep(5);
     console.log('Enabled Steps:', myNavigation1.getEnabledStep());
+    console.log('Current Step Attributes:', myNavigation1.getStepAttributes(myNavigation1.getStep()));
+    console.log('Get attribute "my-attribute" from current Step (Step 1):', myNavigation1.getStepAttributes(myNavigation1.getStep()).myAttribute);
 
@@ -20,0 +22,0 @@

package.json

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

README.md

@@ -107,3 +107,3 @@ ## Steps Directive [wsSteps]
 <div ng-controller="AppCtrl as vm">
-  <steps step="{vm.currentStep}" enabled-step="{vm.currentEnabledStep}" id="idName">
+  <steps step="{{vm.currentStep}}" enabled-step="{{vm.currentEnabledStep}}" id="idName">
     ...
@@ -134,2 +134,4 @@ </steps>
     myNav.setEnabledIconColor('#0000ff'); //Sets enabled icon color.
+    myNav.getStepAttributes(myNav.getStep()); //Return all attributes of the requested Step (current)
+    myNav.getStepAttributes(myNav.getStep()).myParameter; //Return "my-parameter" from current Step (html example: <step ... my-parameter="value"></step>)
     myNav.update() //Updates the step and enabled-step based on current value setted on HTML tag.
@@ -152,2 +154,8 @@ });
   });
+
+  //When AngularJS destroys myNav Controller (when it exits outside the Screen Context)
+  myNav.onDestroy(function() {
+    console.log('myNav was destroyed');
+    myNav = null;
+  })
 });
@@ -173,2 +181,11 @@ ```
 
+## Change Logs
+#### Version 1.1.0 - 2017-10-19
+- New API access method: getStepAttributes(step);
+- New Event: onDestroy(callback);
+- Remove events automatically when the Step controller is destroyed.
+
+See examples from API use in the above lines.
+
+## License
 License MIT.

src/steps.directive.js

@@ -70,2 +70,10 @@ (function(){
 
+      this.getStepAttributes = function(step) {
+        if(stepsNavigation && isReady) {
+          return stepsNavigation.scope().vm.getStepAttributes(step);
+        } else {
+          printNoReady();
+        }
+      };
+
       this.getTotalSteps = function() {
@@ -129,2 +137,10 @@ if(stepsNavigation && isReady) {
 
+      this.onDestroy = function(callback) {
+        if(stepsNavigation && isReady) {
+          stepsNavigation.scope().vm.onDestroyCallback = callback;
+        } else {
+          printNoReady();
+        }
+      };
+
       this.update = function(){
@@ -202,2 +218,13 @@ if(stepsNavigation && isReady) {
       },
+      removeAllEvents: function(elementID) {
+        //Remove events an registers from element
+        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){
@@ -356,7 +383,9 @@ var cloneEventsList
     function hideAllContents(exception){
-      vm.stepsChildList.forEach(function(content){
-        if(content !== exception){
-          document.getElementById(content).classList.add('ws-steps-content-hidden');
-        } else {
-          document.getElementById(content).classList.remove('ws-steps-content-hidden');
+      vm.stepsChildList.forEach(function(content) {
+        if(content.reference !== null) {
+          if (content.reference !== exception) {
+            document.getElementById(content.reference).classList.add('ws-steps-content-hidden');
+          } else {
+            document.getElementById(content.reference).classList.remove('ws-steps-content-hidden');
+          }
         }
@@ -405,2 +434,16 @@ });
 
+    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)
+      if(vm.onDestroyCallback) vm.onDestroyCallback();
+    });
+
     //Directive Step Access
@@ -419,3 +462,3 @@ vm.stepsChildList = [];
         } else {
-          hideAllContents(vm.stepsChildList[contentIndex]);
+          if(vm.stepsChildList[contentIndex]) hideAllContents(vm.stepsChildList[contentIndex].reference);
         }
@@ -474,6 +517,13 @@
 
-    if($attrs.ref){
+    //Provides Attributes
+    var scopeAttrs = {
+      reference: null,
+      attrs: $attrs
+    };
+
+    if ($attrs.ref) {
       document.getElementById($attrs.ref).classList.add('ws-steps-content-hidden');
-      $scope.$parent.$parent.vm.stepsChildList.push($attrs.ref);
+      scopeAttrs.reference = $attrs.ref;
     }
+    $scope.$parent.$parent.vm.stepsChildList.push(scopeAttrs);
 
@@ -480,0 +530,0 @@ var stepsNavigationScope = $scope.$parent.$parent.vm;

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.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.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)}},dispatchEvent:function(elementID,typeEvent,params){var cloneEventsList
+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()}}
+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
 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}
@@ -17,8 +17,9 @@ return constructor}
 function getCompleteSteps(){return stepsNavigation.querySelectorAll('div.step > .step-line-enabled')}
-function updateCompleteStepsClass(){var completeSteps=getCompleteSteps();var totalSteps=getTotalSteps();completeSteps.forEach(function(completeStep){var stepWidth=parseInt(100/totalSteps);completeStep.style.width=stepWidth+'%';var marginLeft=parseInt(stepWidth)/2;completeStep.style['margin-left']='-'+marginLeft+'%'})};function hideAllContents(exception){vm.stepsChildList.forEach(function(content){if(content!==exception){document.getElementById(content).classList.add('ws-steps-content-hidden')}else{document.getElementById(content).classList.remove('ws-steps-content-hidden')}})}
+function updateCompleteStepsClass(){var completeSteps=getCompleteSteps();var totalSteps=getTotalSteps();completeSteps.forEach(function(completeStep){var stepWidth=parseInt(100/totalSteps);completeStep.style.width=stepWidth+'%';var marginLeft=parseInt(stepWidth)/2;completeStep.style['margin-left']='-'+marginLeft+'%'})};function hideAllContents(exception){vm.stepsChildList.forEach(function(content){if(content.reference!==null){if(content.reference!==exception){document.getElementById(content.reference).classList.add('ws-steps-content-hidden')}else{document.getElementById(content.reference).classList.remove('ws-steps-content-hidden')}}})}
 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.stepsChildList=[];function onStepChanged(activeStepPosition){if(activeStepPosition<=vm.enabledStep){updateStepsStyle();updateCompleteStepsClass();lastValidStep=activeStepPosition;var contentIndex=activeStepPosition-1;if(contentIndex<0){hideAllContents()}else{hideAllContents(vm.stepsChildList[contentIndex])}
-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;if($attrs.ref){document.getElementById($attrs.ref).classList.add('ws-steps-content-hidden');$scope.$parent.$parent.vm.stepsChildList.push($attrs.ref)}
-var stepsNavigationScope=$scope.$parent.$parent.vm;if(!StepController.childrenFilter[stepsNavigationScope.getElementId()]){StepController.childrenFilter[stepsNavigationScope.getElementId()]=1}else{StepController.childrenFilter[stepsNavigationScope.getElementId()]++}
+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)
+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}
+$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

51037

8.88%

Number of downloads

6

50%

Lines of code

736

7.13%

Number of lines in readme file

187

10%

No dependency changes