Fossil SCM
fossil.confirmer: moved the confirmation countdown to the right side of the element. This seems to be less visually jarring.
Commit
c09949e5e469f283b78cf1bc982012bef4ff16e111ce53c9859e73dd62b0d91b
Parent
d79f08df7b9aa6f…
1 file changed
+8
-4
+8
-4
| --- src/fossil.confirmer.js | ||
| +++ src/fossil.confirmer.js | ||
| @@ -158,22 +158,26 @@ | ||
| 158 | 158 | const isInput = f.isInput(target); |
| 159 | 159 | const updateText = function(msg){ |
| 160 | 160 | if(isInput) target.value = msg; |
| 161 | 161 | else target.innerHTML = msg; |
| 162 | 162 | } |
| 163 | + const formatCountdown = (txt, number) => txt + " ["+number+"]"; | |
| 163 | 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. */ | |
| 164 | 168 | const digits = (''+(opt.timeout/1000 || opt.ticks)).length; |
| 165 | - const lblLong = "("+("00000000".substr(0,digits))+") "+opt.confirmText; | |
| 169 | + const lblLong = formatCountdown(opt.confirmText, "00000000".substr(0,digits)); | |
| 166 | 170 | const w1 = parseFloat(window.getComputedStyle(target).width); |
| 167 | 171 | updateText(lblLong); |
| 168 | 172 | const w2 = parseFloat(window.getComputedStyle(target).width); |
| 169 | 173 | target.style.minWidth = target.style.maxWidth = (w1>w2 ? w1 : w2)+"px"; |
| 170 | 174 | } |
| 171 | 175 | updateText(this.opt.initialText); |
| 172 | 176 | if(this.opt.ticks && !this.opt.ontick){ |
| 173 | 177 | this.opt.ontick = function(tick){ |
| 174 | - updateText("("+tick+") "+self.opt.confirmText); | |
| 178 | + updateText(formatCountdown(self.opt.confirmText,tick)); | |
| 175 | 179 | }; |
| 176 | 180 | } |
| 177 | 181 | this.setClasses(false); |
| 178 | 182 | this.doTimeout = function() { |
| 179 | 183 | if(this.timerID){ |
| @@ -300,12 +304,12 @@ | ||
| 300 | 304 | dynamically-generated, and can't reasonably be set in the |
| 301 | 305 | defaults. Some, like ticks, cannot be set here because that would |
| 302 | 306 | end up indirectly replacing non-tick timeouts with ticks. |
| 303 | 307 | */ |
| 304 | 308 | F.confirmer.defaultOpts = { |
| 305 | - timeout:3000, | |
| 306 | - ticks: undefined, | |
| 309 | + timeout:undefined, | |
| 310 | + ticks: 3, | |
| 307 | 311 | ticktime: 998/*not *quite* 1000*/, |
| 308 | 312 | onconfirm: undefined, |
| 309 | 313 | ontimeout: undefined, |
| 310 | 314 | onactivate: undefined, |
| 311 | 315 | classInitial: '', |
| 312 | 316 |
| --- src/fossil.confirmer.js | |
| +++ src/fossil.confirmer.js | |
| @@ -158,22 +158,26 @@ | |
| 158 | const isInput = f.isInput(target); |
| 159 | const updateText = function(msg){ |
| 160 | if(isInput) target.value = msg; |
| 161 | else target.innerHTML = msg; |
| 162 | } |
| 163 | if(opt.pinSize && opt.confirmText){ |
| 164 | const digits = (''+(opt.timeout/1000 || opt.ticks)).length; |
| 165 | const lblLong = "("+("00000000".substr(0,digits))+") "+opt.confirmText; |
| 166 | const w1 = parseFloat(window.getComputedStyle(target).width); |
| 167 | updateText(lblLong); |
| 168 | const w2 = parseFloat(window.getComputedStyle(target).width); |
| 169 | target.style.minWidth = target.style.maxWidth = (w1>w2 ? w1 : w2)+"px"; |
| 170 | } |
| 171 | updateText(this.opt.initialText); |
| 172 | if(this.opt.ticks && !this.opt.ontick){ |
| 173 | this.opt.ontick = function(tick){ |
| 174 | updateText("("+tick+") "+self.opt.confirmText); |
| 175 | }; |
| 176 | } |
| 177 | this.setClasses(false); |
| 178 | this.doTimeout = function() { |
| 179 | if(this.timerID){ |
| @@ -300,12 +304,12 @@ | |
| 300 | dynamically-generated, and can't reasonably be set in the |
| 301 | defaults. Some, like ticks, cannot be set here because that would |
| 302 | end up indirectly replacing non-tick timeouts with ticks. |
| 303 | */ |
| 304 | F.confirmer.defaultOpts = { |
| 305 | timeout:3000, |
| 306 | ticks: undefined, |
| 307 | ticktime: 998/*not *quite* 1000*/, |
| 308 | onconfirm: undefined, |
| 309 | ontimeout: undefined, |
| 310 | onactivate: undefined, |
| 311 | classInitial: '', |
| 312 |
| --- src/fossil.confirmer.js | |
| +++ src/fossil.confirmer.js | |
| @@ -158,22 +158,26 @@ | |
| 158 | const isInput = f.isInput(target); |
| 159 | const updateText = function(msg){ |
| 160 | if(isInput) target.value = msg; |
| 161 | else target.innerHTML = msg; |
| 162 | } |
| 163 | const formatCountdown = (txt, number) => txt + " ["+number+"]"; |
| 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 | }; |
| 180 | } |
| 181 | this.setClasses(false); |
| 182 | this.doTimeout = function() { |
| 183 | if(this.timerID){ |
| @@ -300,12 +304,12 @@ | |
| 304 | dynamically-generated, and can't reasonably be set in the |
| 305 | defaults. Some, like ticks, cannot be set here because that would |
| 306 | end up indirectly replacing non-tick timeouts with ticks. |
| 307 | */ |
| 308 | F.confirmer.defaultOpts = { |
| 309 | timeout:undefined, |
| 310 | ticks: 3, |
| 311 | ticktime: 998/*not *quite* 1000*/, |
| 312 | onconfirm: undefined, |
| 313 | ontimeout: undefined, |
| 314 | onactivate: undefined, |
| 315 | classInitial: '', |
| 316 |