frontello-ui-progress - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

package.json

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

progress.js

 "use strict";
 
 class Progress {
-	constructor(container, currentStep, numberOfSteps, config = {})
+	constructor(container, currentStep = 0, numberOfSteps = 0, config = {})
 	{
@@ -11,3 +11,2 @@ this.container = container;
 			boxSize: 32,
-			progressClass: 'progress',
 			progressUnitClass: 'unit',
@@ -17,5 +16,21 @@ }, config);
 		this._build();
+		
+		this._dispatchEvent('init', {
+			steps: this.steps
+		});
+		
 		this._updateState();
 	}
 	
+	setNumberOfSteps(numberOfSteps)
+	{
+		this._setNumberOfStep(numberOfSteps);
+		this._updateStepNumber();
+		this._updateState();
+		
+		this._dispatchEvent('change', {
+			currentStep: this.currentStep
+		});
+	}
+	
 	setStep(step)
@@ -26,4 +41,19 @@ {
 		this._updateState();
+		
+		this._dispatchEvent('change', {
+			currentStep: this.currentStep
+		});
 	}
 	
+	_updateStepNumber()
+	{
+		this.progressCurrent.innerHTML = this.currentStep;
+	}
+	
+	_setNumberOfStep(numberOfSteps)
+	{
+		this.numberOfSteps = numberOfSteps;
+		this.progressUnit.innerHTML = this.numberOfSteps;
+	}
+	
 	_build()
@@ -64,3 +94,2 @@ {
 	{
-		this.container.classList.add(this.config.progressClass);
 		this.progressCurrent = document.createElement('span');
@@ -71,11 +100,5 @@ this.container.appendChild(this.progressCurrent);
 		this.progressUnit.classList.add(this.config.progressUnitClass);
-		this.progressUnit.innerHTML = this.numberOfSteps;
 		this.container.appendChild(this.progressUnit);
 	}
 	
-	_updateStepNumber()
-	{
-		this.progressCurrent.innerHTML = this.currentStep;
-	}
-	
 	_updateState()
@@ -86,2 +109,9 @@ {
 	}
+	
+	_dispatchEvent(id, datas)
+	{
+		const event = new CustomEvent(id, { detail: datas } );
+		
+		this.container.dispatchEvent(event);
+	}
 }

README.md

@@ -1,1 +0,33 @@
-# progress
+# Progress
+
+Dynamically set the progress status of steps, on a round progress preview.
+
+## Header
+
+```html
+<script src="progress.js"></script>
+<link rel="stylesheet" href="progress.css">
+```
+
+## Body
+
+```html
+<nav class="frontello-ui-progress"></nav>
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+	let progressElement = document.querySelector('.frontello-ui-progress');
+	progressElement.addEventListener('init', (event) => {
+		console.log('progress: init');
+		console.log(event.detail);
+	}, false);
+	progressElement.addEventListener('change', (event) => {
+		console.log('progress: change');
+		console.log(event.detail);
+	}, false);
+	
+	let progress = new Progress(progressElement);
+	progress.setNumberOfSteps(3);
+	progress.setStep(1);
+});
+</script>
+```

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

4897

increased by42.35%

Lines of code

98

increased by28.95%

Number of lines in readme file

34

increased by3300%

No dependency changes