79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
|
element. On each subsequent call, the tick count will be reduced by
1, and it is passed 0 after the final tick expires or when the
action has been confirmed, immediately before the onconfirm or
ontimeout callback. The intention of the callback is to update the
label of the target element. If .ticks is set but .ontick is not
then a default implementation is used which updates the element with
the .confirmText, prepending a countdown to it.
.pinSize = if true AND confirmText is set, calculate the larger of
the element's original and confirmed size and pin it to the larger
of those sizes to avoid layout reflows when confirmation is
running. The pinning is implemented by setting its minWidth and
maxWidth style properties to the same value. This does not work if
the element text is updated dynamically via ontick(). This ONLY
works if the element is in the DOM and is not hidden (e.g. via
display:none) at the time this routine is called, otherwise we
cannot calculate its size. If the element needs to be hidden, hide
it after initializing the confirmer.
.debug = boolean. If truthy, it sends some debug output to the dev
console to track what it's doing.
Various notes:
- To change the default option values, modify the
fossil.confirmer.defaultOpts object.
- Exceptions triggered via the callbacks are caught and emitted to the
dev console if the debug option is enabled, but are otherwise
ignored.
- Due to the nature of multi-threaded code, it is potentially possible
that confirmation and timeout actions BOTH happen if the user
triggers the associated action at "just the right millisecond"
before the timeout is triggered.
TODO:
TODO: add an invert option which activates if the timeout is reached
and "times out" if the element is clicked again. e.g. a button which
says "Saving..." and cancels the op if it's clicked again, else it
saves after X time/ticks.
|
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
+
+
+
+
+
+
+
+
|
this.timerID = undefined;
this.state = this.states.initial;
const isInput = f.isInput(target);
const updateText = function(msg){
if(isInput) target.value = msg;
else target.innerHTML = msg;
}
if(opt.pinSize && opt.confirmText){
const digits = (''+(opt.timeout/1000 || opt.ticks)).length;
const lblLong = "("+("00000000".substr(0,digits))+") "+opt.confirmText;
const w1 = parseFloat(window.getComputedStyle(target).width);
updateText(lblLong);
const w2 = parseFloat(window.getComputedStyle(target).width);
target.style.minWidth = target.style.maxWidth = (w1>w2 ? w1 : w2)+"px";
}
updateText(this.opt.initialText);
if(this.opt.ticks && !this.opt.ontick){
this.opt.ontick = function(tick){
updateText("("+tick+") "+self.opt.confirmText);
};
}
this.setClasses(false);
|