From 3d7aa89862e30a3802da10c46b5626b59b15f8fd Mon Sep 17 00:00:00 2001 From: Arthur TRESSOL Date: Fri, 16 Mar 2018 18:58:55 -0400 Subject: [PATCH 1/7] added vscode debug file into gitignore --- .gitignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 7ce0078..444b9e0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .git /bower_components* -node_modules \ No newline at end of file +node_modules +.vscode/* \ No newline at end of file From e7bd41c358ba519807348e2365556d4045fd26f9 Mon Sep 17 00:00:00 2001 From: Arthur TRESSOL Date: Fri, 16 Mar 2018 18:59:17 -0400 Subject: [PATCH 2/7] fixed readme typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 29fbe23..4ccf5cd 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ All the elements can be customized refer to the styling section. ### NEW -- Horizontal stepper is coming +- Horizontal stepper - Step validation - IE11 support From c1ef2f5d71365aca821b71f75a7c2f5c81b04282 Mon Sep 17 00:00:00 2001 From: Arthur TRESSOL Date: Fri, 16 Mar 2018 18:59:34 -0400 Subject: [PATCH 3/7] Fixed last step display issue in vertical mode. --- caribou-step.html | 25 +++++++++++++-------- caribou-stepper-stepper-property-mixin.html | 8 +++++++ 2 files changed, 24 insertions(+), 9 deletions(-) diff --git a/caribou-step.html b/caribou-step.html index 695beb7..10f2620 100644 --- a/caribou-step.html +++ b/caribou-step.html @@ -283,8 +283,10 @@ this._setStepperHorizontal(this.parentElement.horizontal); //if there is no step behind, we clear the number of step context temp we used. - if (this.nextElementSibling === null) + if (this.nextElementSibling === null) { + this.parentElement.numberOfStep = Caribouflex.Stepper.Context.numberOfStep; Caribouflex.Stepper.Context.numberOfStep = undefined; + } } /** @@ -314,7 +316,7 @@ * @param {Boolean} active is the active step or not. * @private */ - _setFloatForTransition(active) { + _setFloatForTransition() { var toStep = this.parentElement.__toStep; var fromStep = this.parentElement.__fromStep; @@ -322,15 +324,19 @@ if (toStep !== undefined && toStep !== null) { - if (toStep._badgeNumber < this._badgeNumber) + if (toStep._badgeNumber === this.parentElement.numberOfStep && !this.parentElement.horizontal) + this.$.stepContent.style.float = ""; + else if (toStep._badgeNumber < this._badgeNumber) this.$.stepContent.style.float = "right"; else if (toStep._badgeNumber > this._badgeNumber) this.$.stepContent.style.float = ""; else if (activeStep === undefined) this.$.stepContent.style.float = ""; - else if(toStep._badgeNumber === this._badgeNumber && fromStep !== undefined && toStep._badgeNumber < fromStep._badgeNumber) + else if (toStep._badgeNumber === this._badgeNumber && fromStep !== undefined && toStep._badgeNumber < + fromStep._badgeNumber) this.$.stepContent.style.float = ""; - else if (toStep._badgeNumber === this._badgeNumber && fromStep !== undefined && toStep._badgeNumber > fromStep._badgeNumber) + else if (toStep._badgeNumber === this._badgeNumber && fromStep !== undefined && toStep._badgeNumber > + fromStep._badgeNumber) this.$.stepContent.style.float = "right"; else if (toStep._badgeNumber === this._badgeNumber && activeStep === null) this.$.stepContent.style.float = "right"; @@ -338,8 +344,8 @@ this.$.stepContent.style.float = "right"; else if (toStep._badgeNumber === this._badgeNumber && activeStep._badgeNumber > this._badgeNumber) this.$.stepContent.style.float = ""; - else if (toStep._badgeNumber === this._badgeNumber && !active) - this.$.stepContent.style.float = ""; + // else if (toStep._badgeNumber === this._badgeNumber && !active) + // this.$.stepContent.style.float = ""; } } @@ -368,10 +374,11 @@ */ toggleStep(isLast) { - this._setFloatForTransition(!this.active); + this._setFloatForTransition(); - if (isLast !== undefined && isLast) + if (isLast !== undefined && isLast) { this.$.stepButtons.setFinish(true); + } this.$.stepContent.toggle(); } diff --git a/caribou-stepper-stepper-property-mixin.html b/caribou-stepper-stepper-property-mixin.html index 0c8e458..c641637 100644 --- a/caribou-stepper-stepper-property-mixin.html +++ b/caribou-stepper-stepper-property-mixin.html @@ -79,6 +79,14 @@ readOnly: true }, + /** + * Quantity total of step inside the stepper. + */ + numberOfStep: { + type: Number, + value: 0 + }, + /** * Used for the transition in horizontal mode. * This is the step where we are going. (step targeting) From af1847e17d797896f45d8e797cbd9c0a04ac9e49 Mon Sep 17 00:00:00 2001 From: caribouflex Date: Wed, 28 Mar 2018 23:16:58 -0400 Subject: [PATCH 4/7] Fix type timer in Readme file --- README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index 4ccf5cd..0a535cf 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/PolymerElements/caribou-timer) +[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/PolymerElements/caribou-stepper) ## <caribou-stepper> @@ -77,8 +77,6 @@ For the styling check the ``, `` and ` Date: Wed, 11 Apr 2018 18:41:23 -0400 Subject: [PATCH 5/7] Added validation for only required input. can be bypassed --- caribou-stepper-step-property-mixin.html | 32 +++++++++++++++++++++++- caribou-stepper.html | 4 +-- demo/index.html | 5 ++-- 3 files changed, 36 insertions(+), 5 deletions(-) diff --git a/caribou-stepper-step-property-mixin.html b/caribou-stepper-step-property-mixin.html index c23e8f8..5540f43 100644 --- a/caribou-stepper-step-property-mixin.html +++ b/caribou-stepper-step-property-mixin.html @@ -111,6 +111,11 @@ backButton: { type: Boolean, value: false + }, + + noInputNativeValidity: { + type: Boolean, + value: false } } } @@ -138,7 +143,32 @@ this.parentElement._registerStep(this); } - validate(){ + _nestedValidate() { + //We check if the validity is required. + if (this.noInputNativeValidity) + return true; + + var result = true; + this.querySelectorAll("[required]").forEach(function (el) { + let r; + try { + //Use classic input validation + r = el.checkValidity(); + } catch (err) { + //used to try on input that may be polymer input with a validate() function. + try { + r = el.validate(); + } catch (err) { + console.log("caribou-step", "Can't validate required input"); + } + } + if (!r) + result = false; + }); + return result; + } + + validate() { return true; } diff --git a/caribou-stepper.html b/caribou-stepper.html index c11e7e4..4a86990 100644 --- a/caribou-stepper.html +++ b/caribou-stepper.html @@ -136,7 +136,7 @@ * @private */ __finishStep(e) { - if (this.activeStep.validate()) { + if (this.activeStep._nestedValidate() && this.activeStep.validate()) { this.openNextStep(); this._setFinish(true); this.dispatchEvent(new CustomEvent('stepper-finished', { @@ -156,7 +156,7 @@ * Then it will open the next step if there is one. */ openNextStep() { - if (this.activeStep.validate()) { + if (this.activeStep._nestedValidate() && this.activeStep.validate()) { this.activeStep.saveStep(); //set the value to and from the the transition effect. diff --git a/demo/index.html b/demo/index.html index d3e7970..94b6790 100644 --- a/demo/index.html +++ b/demo/index.html @@ -33,11 +33,12 @@

Horizontal stepper

+
- Soccer - Backetball + Soccer + Backetball Tennis Fishing
From 16381003fd9d531e90b9fb49605738134b6d4c79 Mon Sep 17 00:00:00 2001 From: Arthur TRESSOL Date: Thu, 26 Apr 2018 17:58:25 -0400 Subject: [PATCH 6/7] Added comment for the nested validation. --- caribou-stepper-step-property-mixin.html | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/caribou-stepper-step-property-mixin.html b/caribou-stepper-step-property-mixin.html index 5540f43..a11fe21 100644 --- a/caribou-stepper-step-property-mixin.html +++ b/caribou-stepper-step-property-mixin.html @@ -113,6 +113,11 @@ value: false }, + /** + * If true this will skip the validation of the input. + * If false all the checkbox will have a native validation check on the input. + * + */ noInputNativeValidity: { type: Boolean, value: false @@ -143,6 +148,11 @@ this.parentElement._registerStep(this); } + /** + * This function is used to check the validity of the required input. + * This will check the native validation for classic input and call the validate() function for the polymer element. + * @private + */ _nestedValidate() { //We check if the validity is required. if (this.noInputNativeValidity) From f78a61db606c98e2937fdf65855e76ca7153e458 Mon Sep 17 00:00:00 2001 From: Arthur TRESSOL Date: Thu, 26 Apr 2018 18:03:37 -0400 Subject: [PATCH 7/7] Update readme file --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 0a535cf..332e59f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/PolymerElements/caribou-stepper) +[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/caribouflex/caribou-stepper) ## <caribou-stepper> @@ -14,8 +14,10 @@ All the elements can be customized refer to the styling section. - Horizontal stepper - Step validation - IE11 support +- Step native Required input validation. ### Incoming (TODO) +- GITHUB demo pages. - Bug Fixes - Mobile stepper