frontello-ui-stepper - npm Package Compare versions

Comparing version 1.2.0 to 2.0.0

package.json

 {
 	"name": "frontello-ui-stepper",
-	"version": "1.2.0",
+	"version": "2.0.0",
 	"description": "UI stepper",
@@ -5,0 +5,0 @@ "main": "stepper.js",

README.md

@@ -1,1 +0,37 @@
-# stepper
+# Stepper
+
+Define dynamicly step states (done, current or todo).
+
+## Header
+
+```html
+<script src="stepper.js"></script>
+<link rel="stylesheet" href="stepper.css">
+```
+
+## Body
+
+```html
+<nav class="frontello-ui-stepper"></nav>
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+	let stepperElement = document.querySelector('.frontello-ui-stepper');
+	stepperElement.addEventListener('init', (event) => {
+		console.log('stepper: init');
+		console.log(event.detail);
+	}, false);
+	stepperElement.addEventListener('change', (event) => {
+		console.log('stepper: change');
+		console.log(event.detail);
+	}, false);
+	
+	let stepper = new Stepper(stepperElement);
+	stepper.setStepList([
+		'Lorem ipsum dolor sit amet',
+		'Duis aute irure dolor',
+		'Ut enim ad minim veniam'
+	]);
+	stepper.setCurrentStep(2);
+});
+</script>
+```

stepper.js

 "use strict";
 
 class Stepper {
-	constructor(stepper, stepList, currentStep = 1, config = {})
+	constructor(container, steps = [], currentStep = 1, config = {})
 	{
-		this.stepper = stepper;
+		this.container = container;
 		this.config = Object.assign({
-			stepsClass: 'steps',
 			stepDoneClass: 'done',
@@ -13,37 +12,36 @@ stepCurrentClass: 'current',
 		
-		this._build();
+		this.steps = [];
 		
-		stepList.forEach((label) => {
-			this.addStep(label);
+		this.setStepList(steps);
+		
+		this._dispatchEvent('init', {
+			steps: this.steps
 		});
 		
-		this.pieStatus = new Progress(this.progress, this.currentStep, this.stepsList.children.length);
-		
 		this.setCurrentStep(currentStep);
 	}
 	
-	_build()
+	setStepList(steps)
 	{
-		this.progress = document.createElement('div');
-		this.stepper.appendChild(this.progress);
+		this.container.innerHTML = "";
 		
-		this._buildStepList();
-	}
-	
-	_buildStepList()
-	{
-		if (!this.stepper) {
-			return;
+		if (steps.length != 0) {
+			steps.forEach((label) => {
+				this.addStep(label);
+			});
 		}
 		
-		this.stepsList = document.createElement('nav');
-		this.stepsList.classList.add(this.config.stepsClass);
-		this.stepper.appendChild(this.stepsList);
+		this._dispatchEvent('change', {
+			steps: this.steps,
+			currentStep: this.currentStep
+		});
 	}
 	
-	addStep(label)
+	addStep(step)
 	{
-		let step = document.createElement('a');
-		step.innerHTML = label;
-		this.stepsList.appendChild(step);
+		this.steps.push(step);
+		
+		let stepElement = document.createElement('a');
+		stepElement.innerHTML = step;
+		this.container.appendChild(stepElement);
 	}
@@ -54,15 +52,14 @@
 		this.currentStep = step;
-		this._updateProgress();
 		this._updateStepList();
+		
+		this._dispatchEvent('change', {
+			steps: this.steps,
+			currentStep: this.currentStep
+		});
 	}
 	
-	_updateProgress()
-	{
-		this.pieStatus.setStep(this.currentStep);
-	}
-	
 	_updateStepList()
 	{
-		for (let stepKey = 0; stepKey < this.stepsList.children.length; stepKey++) {
-			let stepClassList = this.stepsList.children[stepKey].classList;
+		for (let stepKey = 0; stepKey < this.container.children.length; stepKey++) {
+			let stepClassList = this.container.children[stepKey].classList;
 			if (stepKey + 1 < this.currentStep) {
@@ -80,2 +77,9 @@ stepClassList.add(this.config.stepDoneClass);
 	}
+	
+	_dispatchEvent(id, datas)
+	{
+		const event = new CustomEvent(id, { detail: datas } );
+		
+		this.container.dispatchEvent(event);
+	}
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3239

increased by46.49%

Number of package files

4

increased by33.33%

Lines of code

71

increased by9.23%

Number of lines in readme file

38

increased by3700%

No dependency changes