Skip to content

Commit

Permalink
Fixed buggy auto-sizing labels
Browse files Browse the repository at this point in the history 
Rewrote the hacky programmatic sizing. Replaced with simply programmatically setting known stepper width and step count, and let CSS use `calc()` to figure out stepper control widths and step title widths
  • Loading branch information
@torrobinson
torrobinson committed Dec 20, 2021
1 parent c8bd4e6 commit 82ff8f7
Showing 1 changed file with 16 additions and 12 deletions.
28 changes: 16 additions & 12 deletions dist/progress-steps.min.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
var o=function(e){e=e||{};for(var t=1;t<arguments.length;t++){var s=arguments[t];if(s)for(var r in s)s.hasOwnProperty(r)&&("object"==typeof s[r]?s[r]instanceof Array==1?e[r]=s[r].slice(0):e[r]=o(e[r],s[r]):e[r]=s[r])}return e};function i(e){var t=document.createElement("div");return t.innerHTML=e.trim(),t.firstChild}class e extends HTMLElement{constructor(){super(),this._defaultOptions=null,this._options=null,this._container=null,this._stepNumber=-1,this._shadowRoot=this.attachShadow({mode:"open"}),this._shadowRoot.append(i(`
var r=function(e){e=e||{};for(var t=1;t<arguments.length;t++){var s=arguments[t];if(s)for(var o in s)s.hasOwnProperty(o)&&("object"==typeof s[o]?s[o]instanceof Array==1?e[o]=s[o].slice(0):e[o]=r(e[o],s[o]):e[o]=s[o])}return e};function i(e){var t=document.createElement("div");return t.innerHTML=e.trim(),t.firstChild}class e extends HTMLElement{constructor(){super(),this._defaultOptions=null,this._options=null,this._container=null,this._stepNumber=-1,this._shadowRoot=this.attachShadow({mode:"open"}),this._shadowRoot.append(i(`
<style>
.progress-steps {
/* All Steps */
Expand Down Expand Up @@ -33,17 +33,17 @@ var o=function(e){e=e||{};for(var t=1;t<arguments.length;t++){var s=arguments[t]
/* Labels */
--step-title-display: inline-block;
--step-title-top-padding: 5px;
--step-title-width: 75px; /* Note: this is overriden immedidately and when browser is resized */
--step-title-font: sans-serif;
--step-title-weight: normal;
display: flex;
margin: 0 auto;
position: relative;
width: calc(100% - (var(--step-title-width)-var(--step-width))/1);
transition: width var(--animation-speed);
justify-content: space-between;
/* Dynamically set our width via the 2 'known' attributes updated on resizes and render */
width: calc(100% - (var(--known-available-width) / (var(--known-step-count) - 1)) * 1px);
}
/* The underlying grey line*/
Expand Down Expand Up @@ -149,7 +149,6 @@ var o=function(e){e=e||{};for(var t=1;t<arguments.length;t++){var s=arguments[t]
position: absolute;
text-align: center;
top: calc( var(--step-width) + var(--step-title-top-padding));
width: var(--step-title-width);
font-family: var(--step-title-font);
color: var(--unfilled-color);
font-size: var(--font-size);
Expand All @@ -158,27 +157,32 @@ var o=function(e){e=e||{};for(var t=1;t<arguments.length;t++){var s=arguments[t]
overflow: hidden;
text-overflow: ellipsis;
user-select: none;
}
.progress-steps .progress-step .progress-title {
font-weight: var(--step-title-weight);
/* Dynamically set our own title width via the 2 'known' attributes updated on resizes and render */
--title-clearance: 8px;
width: calc(
var(--known-available-width) / (var(--known-step-count) - 1) /* width per segment */
* 1px /* Cast to pixels */
- (var(--title-clearance) * 2) /* Account for clearance */
);
}
.progress-steps .progress-step.previous .progress-title {
color: var(--previous-label-font-color);
}
</style>
`)),this._container=i('<div class="progress-steps"></div>'),this._shadowRoot.appendChild(this._container),this._container.classList.add("progress-steps"),this._defaultOptions={steps:[],allowStepZero:!0,events:{onStepChanged:function(e,t){}},style:{}};let e=this;var t;this._recalculateStepperTitleWidths(e);function s(){clearTimeout(t),t=setTimeout(function(){e._recalculateStepperTitleWidths(e)},300)}window.addEventListener("resize",s,!1),window.addEventListener("orientationchange",s,!1)}_recalculateStepperTitleWidths(e){var t;0<e._options?.steps.length&&(t=e._container.getBoundingClientRect().width/(e._options.steps.length-1)-6,e._container.style.setProperty("--step-title-width",`${t}px`))}init(e){if(this._options=o({},this._defaultOptions,e),this._options.steps.forEach((e,t)=>{e.number=t+1}),this._options.steps.length?this._stepNumber=1:(this._stepNumber=-1,console.warn("You must provide at least 1 step")),void 0!==this._options.style){let s="";for(var r in this._options.style){let e="",t=this._options.style[r];if("stepWidth"===r)e="--step-width",isNaN(t)||(t+="px");else if("fontSize"===r)e="--font-size",isNaN(t)||(t+="px");else if("borderRadius"===r)e="--step-border-radius",isNaN(t)||(t+="px");else if("lineThickness"===r)e="--bar-thickness",isNaN(t)||(t+="px");else if("animationSpeed"===r)e="--animation-speed",isNaN(t)||(t+="ms");else if("showLabels"===r){if(e="--step-title-display",t)continue;t="none"}else"labelSpacing"===r?(e="--step-title-top-padding",isNaN(t)||(t+="px")):"progressFillColor"===r?e="--fill-color":"currentStepFontColor"===r?e="--current-font-color":"currentStepLabelFontWeight"===r?e="--current-step-label-weight":"stepLabelFontWeight"===r?e="--step-title-weight":"futureStepFillColor"===r?e="--step-color":"disabledStepFontColor"===r?e="--disabled-font-color":"previousLabelFontColor"===r?e="--previous-label-font-color":"currentLabelFontColor"===r?e="--current-label-font-color":"futureLabelFontColor"===r?e="--future-label-font-color":"disabledLabelFontColor"===r?e="--disabled-label-font-color":"progressUnfilledColor"===r?e="--unfilled-color":"disabledStepFillColor"===r&&(e="--disabled-fill-color");s+=`
`)),this._container=i('<div class="progress-steps"></div>'),this._shadowRoot.appendChild(this._container),this._container.classList.add("progress-steps"),this._defaultOptions={steps:[],allowStepZero:!0,events:{onStepChanged:function(e,t){}},style:{}};let e=this;var t;this._updateKnownControlSize=function(){clearTimeout(t),t=setTimeout(function(){null!==e._options&&null!==e._options.steps&&(e._container.style.setProperty("--known-step-count",e._options.steps.length),e._container.style.setProperty("--known-available-width",e.getBoundingClientRect().width))},100)},this._updateKnownControlSize(),window.addEventListener("resize",this._updateKnownControlSize,!1),window.addEventListener("orientationchange",this._updateKnownControlSize,!1)}init(e){if(this._options=r({},this._defaultOptions,e),this._options.steps.forEach((e,t)=>{e.number=t+1}),this._options.steps.length?this._stepNumber=1:(this._stepNumber=-1,console.warn("You must provide at least 1 step")),void 0!==this._options.style){let s="";for(var o in this._options.style){let e="",t=this._options.style[o];if("stepWidth"===o)e="--step-width",isNaN(t)||(t+="px");else if("fontSize"===o)e="--font-size",isNaN(t)||(t+="px");else if("borderRadius"===o)e="--step-border-radius",isNaN(t)||(t+="px");else if("lineThickness"===o)e="--bar-thickness",isNaN(t)||(t+="px");else if("animationSpeed"===o)e="--animation-speed",isNaN(t)||(t+="ms");else if("showLabels"===o){if(e="--step-title-display",t)continue;t="none"}else"labelSpacing"===o?(e="--step-title-top-padding",isNaN(t)||(t+="px")):"progressFillColor"===o?e="--fill-color":"currentStepFontColor"===o?e="--current-font-color":"currentStepLabelFontWeight"===o?e="--current-step-label-weight":"stepLabelFontWeight"===o?e="--step-title-weight":"futureStepFillColor"===o?e="--step-color":"disabledStepFontColor"===o?e="--disabled-font-color":"previousLabelFontColor"===o?e="--previous-label-font-color":"currentLabelFontColor"===o?e="--current-label-font-color":"futureLabelFontColor"===o?e="--future-label-font-color":"disabledLabelFontColor"===o?e="--disabled-label-font-color":"progressUnfilledColor"===o?e="--unfilled-color":"disabledStepFillColor"===o&&(e="--disabled-fill-color");s+=`
${e}: ${t} !important;
`}this._shadowRoot.appendChild(i(`
<style>
.progress-steps{
${s}
}
</style>
`))}this._render()}_render(){for(;this._container.firstChild;)this._container.removeChild(this._container.firstChild);this._container.appendChild(i('<div class="completion-bar"></div>'));var e=this._options.steps.filter(e=>void 0!==e.numberDisplay).length;let s=1<e,r=1;if(e!==this._options.steps.length&&0!==e)throw"Either all or none of your steps can have numberDisplay specified";this._options.steps.forEach(e=>{let t=i(`
<div class="progress-step" data-step-number="${s?e.numberDisplay:r++}">
`))}this._render()}_render(){for(;this._container.firstChild;)this._container.removeChild(this._container.firstChild);this._container.appendChild(i('<div class="completion-bar"></div>'));var e=this._options.steps.filter(e=>void 0!==e.numberDisplay).length;let s=1<e,o=1;if(e!==this._options.steps.length&&0!==e)throw"Either all or none of your steps can have numberDisplay specified";this._options.steps.forEach(e=>{let t=i(`
<div class="progress-step" data-step-number="${s?e.numberDisplay:o++}">
<div class="progress-title">${e.name}</div>
</div>
`);""!=e.name&&t.setAttribute("title",e.name),e.disabled&&t.classList.add("disabled"),this._container.appendChild(t)});let t=this;this._container.querySelectorAll(".progress-step:not(.disabled)").forEach(e=>{e.addEventListener("click",function(e){e=e.target.closest(".progress-step");null!=e&&(e=Array.from(t._container.querySelectorAll(".progress-step")).indexOf(e)+1,t._setStepInternal(e))})}),void 0!==this&&this._setStepInternal(),this._recalculateStepperTitleWidths(t)}getStep(){return this._getStepInternal()}setStep(e){0!==e||this._options.allowStepZero||console.warn("Cannot set to step 0"),-1<e&&e<=this._options.steps.length?0<e&&this._options.steps[e-1].disabled?console.warn("Cant set to disabled step"):(this._stepNumber=e,this._setStepInternal()):console.warn("Step out of range")}stepUp(){this._stepUpInternal()}stepDown(){this._stepDownInternal()}disableStep(e){if(this._options.steps[e-1].disabled=!0,this._stepNumber===e){let e=!1;for(;!e&&!0===this._options.steps[this._stepNumber-1].disabled;)this._stepNumber--,0===this._stepNumber&&(e=!0)}this._render()}enableStep(e){this._options.steps[e-1].disabled=!1,this._render()}_getStepInternal(){return 0<this._stepNumber?this._options.steps[this._stepNumber-1]:null}_stepUpInternal(){this._stepNumber<this._options.steps.length&&!this._options.steps[this._stepNumber].disabled&&(this._stepNumber++,this._setStepInternal())}_stepDownInternal(){0<this._stepNumber&&(this._stepNumber--,0!==this._stepNumber||this._options.allowStepZero||(this._stepNumber=1),this._setStepInternal())}_setStepInternal(s){void 0===s?s=this._stepNumber:this._stepNumber=s;var e=(s-1)/(this._options.steps.length-1)*100;this._container.querySelector(".completion-bar").style.width=`calc(${e}% - (var(--step-width)/2))`,this._container.querySelectorAll(".progress-step").forEach(e=>{e.classList.remove("previous"),e.classList.remove("current"),e.classList.remove("future")}),this._container.querySelectorAll(".progress-step").forEach(function(e,t){t+1<s&&e.classList.add("previous"),t+1===s&&e.classList.add("current"),s<t+1&&e.classList.add("future")}),this._options.events.onStepChanged&&"function"==typeof this._options.events.onStepChanged&&(e=this._getStepInternal(),this._options.events.onStepChanged(s,e))}}customElements.define("progress-steps",e);
`);""!=e.name&&t.setAttribute("title",e.name),e.disabled&&t.classList.add("disabled"),this._container.appendChild(t)});let t=this;this._container.querySelectorAll(".progress-step:not(.disabled)").forEach(e=>{e.addEventListener("click",function(e){e=e.target.closest(".progress-step");null!=e&&(e=Array.from(t._container.querySelectorAll(".progress-step")).indexOf(e)+1,t._setStepInternal(e))})}),void 0!==this&&this._setStepInternal(),setTimeout(this._updateKnownControlSize,100)}getStep(){return this._getStepInternal()}setStep(e){0!==e||this._options.allowStepZero||console.warn("Cannot set to step 0"),-1<e&&e<=this._options.steps.length?0<e&&this._options.steps[e-1].disabled?console.warn("Cant set to disabled step"):(this._stepNumber=e,this._setStepInternal()):console.warn("Step out of range")}stepUp(){this._stepUpInternal()}stepDown(){this._stepDownInternal()}disableStep(e){if(this._options.steps[e-1].disabled=!0,this._stepNumber===e){let e=!1;for(;!e&&!0===this._options.steps[this._stepNumber-1].disabled;)this._stepNumber--,0===this._stepNumber&&(e=!0)}this._render()}enableStep(e){this._options.steps[e-1].disabled=!1,this._render()}_getStepInternal(){return 0<this._stepNumber?this._options.steps[this._stepNumber-1]:null}_stepUpInternal(){this._stepNumber<this._options.steps.length&&!this._options.steps[this._stepNumber].disabled&&(this._stepNumber++,this._setStepInternal())}_stepDownInternal(){0<this._stepNumber&&(this._stepNumber--,0!==this._stepNumber||this._options.allowStepZero||(this._stepNumber=1),this._setStepInternal())}_setStepInternal(s){void 0===s?s=this._stepNumber:this._stepNumber=s;var e=(s-1)/(this._options.steps.length-1)*100;this._container.querySelector(".completion-bar").style.width=`calc(${e}% - (var(--step-width)/2))`,this._container.querySelectorAll(".progress-step").forEach(e=>{e.classList.remove("previous"),e.classList.remove("current"),e.classList.remove("future")}),this._container.querySelectorAll(".progress-step").forEach(function(e,t){t+1<s&&e.classList.add("previous"),t+1===s&&e.classList.add("current"),s<t+1&&e.classList.add("future")}),this._options.events.onStepChanged&&"function"==typeof this._options.events.onStepChanged&&(e=this._getStepInternal(),this._options.events.onStepChanged(s,e))}}customElements.define("progress-steps",e);

0 comments on commit 82ff8f7

Please sign in to comment.