Fossil SCM
Changed how fossil.confirmer pinSize option computes element width to be more robust in the face of CSS 'auto' width values.
Commit
1f4143ba285d490f9e8a9bb401c541d885f08287d9ed421cd62c345bcb7ac10e
Parent
2d1a493d9c0c7be…
1 file changed
+7
-4
+7
-4
| --- src/fossil.confirmer.js | ||
| +++ src/fossil.confirmer.js | ||
| @@ -164,15 +164,18 @@ | ||
| 164 | 164 | if(opt.pinSize && opt.confirmText){ |
| 165 | 165 | /* Try to pin the element's width the the greater of its |
| 166 | 166 | current width or its waiting-on-confirmation width |
| 167 | 167 | to avoid layout reflow when it's activated. */ |
| 168 | 168 | const digits = (''+(opt.timeout/1000 || opt.ticks)).length; |
| 169 | - const lblLong = formatCountdown(opt.confirmText, "00000000".substr(0,digits)); | |
| 170 | - const w1 = parseFloat(window.getComputedStyle(target).width); | |
| 169 | + const lblLong = formatCountdown(opt.confirmText, "00000000".substr(0,digits+1)); | |
| 170 | + const w1 = parseInt(target.getBoundingClientRect().width); | |
| 171 | 171 | updateText(lblLong); |
| 172 | - const w2 = parseFloat(window.getComputedStyle(target).width); | |
| 173 | - target.style.minWidth = target.style.maxWidth = (w1>w2 ? w1 : w2)+"px"; | |
| 172 | + const w2 = parseInt(target.getBoundingClientRect().width); | |
| 173 | + if(w1 || w2){ | |
| 174 | + /* If target is not in visible part of the DOM, those values may be 0. */ | |
| 175 | + target.style.minWidth = target.style.maxWidth = (w1>w2 ? w1 : w2)+"px"; | |
| 176 | + } | |
| 174 | 177 | } |
| 175 | 178 | updateText(this.opt.initialText); |
| 176 | 179 | if(this.opt.ticks && !this.opt.ontick){ |
| 177 | 180 | this.opt.ontick = function(tick){ |
| 178 | 181 | updateText(formatCountdown(self.opt.confirmText,tick)); |
| 179 | 182 |
| --- src/fossil.confirmer.js | |
| +++ src/fossil.confirmer.js | |
| @@ -164,15 +164,18 @@ | |
| 164 | if(opt.pinSize && opt.confirmText){ |
| 165 | /* Try to pin the element's width the the greater of its |
| 166 | current width or its waiting-on-confirmation width |
| 167 | to avoid layout reflow when it's activated. */ |
| 168 | const digits = (''+(opt.timeout/1000 || opt.ticks)).length; |
| 169 | const lblLong = formatCountdown(opt.confirmText, "00000000".substr(0,digits)); |
| 170 | const w1 = parseFloat(window.getComputedStyle(target).width); |
| 171 | updateText(lblLong); |
| 172 | const w2 = parseFloat(window.getComputedStyle(target).width); |
| 173 | target.style.minWidth = target.style.maxWidth = (w1>w2 ? w1 : w2)+"px"; |
| 174 | } |
| 175 | updateText(this.opt.initialText); |
| 176 | if(this.opt.ticks && !this.opt.ontick){ |
| 177 | this.opt.ontick = function(tick){ |
| 178 | updateText(formatCountdown(self.opt.confirmText,tick)); |
| 179 |
| --- src/fossil.confirmer.js | |
| +++ src/fossil.confirmer.js | |
| @@ -164,15 +164,18 @@ | |
| 164 | if(opt.pinSize && opt.confirmText){ |
| 165 | /* Try to pin the element's width the the greater of its |
| 166 | current width or its waiting-on-confirmation width |
| 167 | to avoid layout reflow when it's activated. */ |
| 168 | const digits = (''+(opt.timeout/1000 || opt.ticks)).length; |
| 169 | const lblLong = formatCountdown(opt.confirmText, "00000000".substr(0,digits+1)); |
| 170 | const w1 = parseInt(target.getBoundingClientRect().width); |
| 171 | updateText(lblLong); |
| 172 | const w2 = parseInt(target.getBoundingClientRect().width); |
| 173 | if(w1 || w2){ |
| 174 | /* If target is not in visible part of the DOM, those values may be 0. */ |
| 175 | target.style.minWidth = target.style.maxWidth = (w1>w2 ? w1 : w2)+"px"; |
| 176 | } |
| 177 | } |
| 178 | updateText(this.opt.initialText); |
| 179 | if(this.opt.ticks && !this.opt.ontick){ |
| 180 | this.opt.ontick = function(tick){ |
| 181 | updateText(formatCountdown(self.opt.confirmText,tick)); |
| 182 |