Fossil SCM

Reworked fossil.toast to support normal/warning/error-level toasts. Alas, animating a toast's appearance and disappearance proved to be beyond my current skills.

stephan 2020-08-16 15:52 trunk
Commit 4368f52961d0bc57ac5a5e57e9579a32cffdb472aa7d166eb537feb9e89abbc8
Parent 2018954b3f12259…
3 files changed +31 -10 +1 -1 +76 -36
~ src/default.css ~ src/fossil.numbered-lines.js ~ src/fossil.popupwidget.js
M src/default.css
+31 -10
--- src/default.css
+++ src/default.css
@@ -942,13 +942,12 @@
942942
 .error {
943943
 color: darkred;
944944
 background: yellow;
945945
 }
946946
 .warning {
947
- color: darkred;
947
+ color: black;
948948
 background: yellow;
949
- opacity: 0.7;
950949
 }
951950
 .hidden {
952951
 /* The framework-wide way of hiding elements is to assign them this
953952
 CSS class. To make them visible again, remove it. The !important
954953
 qualifiers are unfortunate but sometimes necessary when hidden
@@ -1255,23 +1254,45 @@
12551254
 position: absolute;
12561255
 display: inline-block;
12571256
 z-index: 100;
12581257
 box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.75);
12591258
 background-color: inherit;
1260
- font-size: 80%;
12611259
 }
12621260
1263
-.fossil-toast {/* "toast"-style popup message */
1264
- padding: 0.25em 0.5em;
1261
+.fossil-toast-message {
1262
+ /* "toast"-style popup message.
1263
+ See fossil.popupwidget:toast() */
1264
+ position: absolute;
1265
+ display: block;
1266
+ z-index: 101;
1267
+ text-align: left;
1268
+ padding: 0.15em 0.5em;
12651269
 margin: 0;
1266
- border-radius: 0.25em;
12671270
 font-size: 1em;
1268
- opacity: 0.8;
1269
- border-size: 1px;
1270
- border-style: dotted;
1271
- border-color: rgb( 127, 127, 127, 0.5 );
1271
+ border-width: 1px;
1272
+ border-style: solid;
1273
+ border-color: rgba( 127, 127, 127, 0.75 );
1274
+ border-radius: 0.25em;
1275
+ background-color: rgba(20, 20, 20, 1)
1276
+ /* problem: if we inherit the color it may either be
1277
+ transparent or inherit translucency via the
1278
+ skin, leaving it unreadable. Since we set the bg
1279
+ color we must also set the fg color. */;
1280
+ color: rgba(235, 235, 235, 0.9);
1281
+}
1282
+.fossil-toast-message.error,
1283
+.fossil-toast-message.warning {
1284
+ background: yellow;
1285
+}
1286
+.fossil-toast-message.error {
1287
+ font-weight: bold;
1288
+ color: darkred;
1289
+ border-color: darkred;
1290
+}
1291
+.fossil-toast-message.warning {
1292
+ color: black;
12721293
 }
12731294
12741295
 blockquote.file-content {
12751296
 /* file content block in the /file page */
12761297
 margin: 0 1em;
12771298
 }
12781299
--- src/default.css
+++ src/default.css
@@ -942,13 +942,12 @@
942 .error {
943 color: darkred;
944 background: yellow;
945 }
946 .warning {
947 color: darkred;
948 background: yellow;
949 opacity: 0.7;
950 }
951 .hidden {
952 /* The framework-wide way of hiding elements is to assign them this
953 CSS class. To make them visible again, remove it. The !important
954 qualifiers are unfortunate but sometimes necessary when hidden
@@ -1255,23 +1254,45 @@
1255 position: absolute;
1256 display: inline-block;
1257 z-index: 100;
1258 box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.75);
1259 background-color: inherit;
1260 font-size: 80%;
1261 }
1262
1263 .fossil-toast {/* "toast"-style popup message */
1264 padding: 0.25em 0.5em;
 
 
 
 
 
 
1265 margin: 0;
1266 border-radius: 0.25em;
1267 font-size: 1em;
1268 opacity: 0.8;
1269 border-size: 1px;
1270 border-style: dotted;
1271 border-color: rgb( 127, 127, 127, 0.5 );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1272 }
1273
1274 blockquote.file-content {
1275 /* file content block in the /file page */
1276 margin: 0 1em;
1277 }
1278
--- src/default.css
+++ src/default.css
@@ -942,13 +942,12 @@
942 .error {
943 color: darkred;
944 background: yellow;
945 }
946 .warning {
947 color: black;
948 background: yellow;
 
949 }
950 .hidden {
951 /* The framework-wide way of hiding elements is to assign them this
952 CSS class. To make them visible again, remove it. The !important
953 qualifiers are unfortunate but sometimes necessary when hidden
@@ -1255,23 +1254,45 @@
1254 position: absolute;
1255 display: inline-block;
1256 z-index: 100;
1257 box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.75);
1258 background-color: inherit;
 
1259 }
1260
1261 .fossil-toast-message {
1262 /* "toast"-style popup message.
1263 See fossil.popupwidget:toast() */
1264 position: absolute;
1265 display: block;
1266 z-index: 101;
1267 text-align: left;
1268 padding: 0.15em 0.5em;
1269 margin: 0;
 
1270 font-size: 1em;
1271 border-width: 1px;
1272 border-style: solid;
1273 border-color: rgba( 127, 127, 127, 0.75 );
1274 border-radius: 0.25em;
1275 background-color: rgba(20, 20, 20, 1)
1276 /* problem: if we inherit the color it may either be
1277 transparent or inherit translucency via the
1278 skin, leaving it unreadable. Since we set the bg
1279 color we must also set the fg color. */;
1280 color: rgba(235, 235, 235, 0.9);
1281 }
1282 .fossil-toast-message.error,
1283 .fossil-toast-message.warning {
1284 background: yellow;
1285 }
1286 .fossil-toast-message.error {
1287 font-weight: bold;
1288 color: darkred;
1289 border-color: darkred;
1290 }
1291 .fossil-toast-message.warning {
1292 color: black;
1293 }
1294
1295 blockquote.file-content {
1296 /* file content block in the /file page */
1297 margin: 0 1em;
1298 }
1299
M src/fossil.numbered-lines.js
+1 -1
--- src/fossil.numbered-lines.js
+++ src/fossil.numbered-lines.js
@@ -55,11 +55,11 @@
5555
 F.copyButton(btnCopy,{
5656
 copyFromElement: link,
5757
 extractText: ()=>link.dataset.url,
5858
 oncopy: (ev)=>{
5959
 D.flashOnce(ev.target, undefined, ()=>lineTip.hide());
60
- F.toast("Copied link to clipboard.");
60
+ F.toast.message("Copied link to clipboard.");
6161
 }
6262
 });
6363
 this.e.addEventListener('click', ()=>btnCopy.click(), false);
6464
 D.append(this.e, btnCopy, link)
6565
 }
6666
--- src/fossil.numbered-lines.js
+++ src/fossil.numbered-lines.js
@@ -55,11 +55,11 @@
55 F.copyButton(btnCopy,{
56 copyFromElement: link,
57 extractText: ()=>link.dataset.url,
58 oncopy: (ev)=>{
59 D.flashOnce(ev.target, undefined, ()=>lineTip.hide());
60 F.toast("Copied link to clipboard.");
61 }
62 });
63 this.e.addEventListener('click', ()=>btnCopy.click(), false);
64 D.append(this.e, btnCopy, link)
65 }
66
--- src/fossil.numbered-lines.js
+++ src/fossil.numbered-lines.js
@@ -55,11 +55,11 @@
55 F.copyButton(btnCopy,{
56 copyFromElement: link,
57 extractText: ()=>link.dataset.url,
58 oncopy: (ev)=>{
59 D.flashOnce(ev.target, undefined, ()=>lineTip.hide());
60 F.toast.message("Copied link to clipboard.");
61 }
62 });
63 this.e.addEventListener('click', ()=>btnCopy.click(), false);
64 D.append(this.e, btnCopy, link)
65 }
66
M src/fossil.popupwidget.js
+76 -36
--- src/fossil.popupwidget.js
+++ src/fossil.popupwidget.js
@@ -186,44 +186,84 @@
186186
187187
 hide: function(){return this.show(false)}
188188
 }/*F.PopupWidget.prototype*/;
189189
190190
 /**
191
- Convenience wrapper around a PopupWidget which pops up a shared
192
- PopupWidget instance to show toast-style messages (commonly seen
193
- on Android). Its arguments may be anything suitable for passing
194
- to fossil.dom.append(), and each argument is first append()ed to
195
- the toast widget, then the widget is shown for
196
- F.toast.config.displayTimeMs milliseconds. This is called while
197
- a toast is currently being displayed, the first will be overwritten
198
- and the time until the message is hidden will be reset.
199
-
200
- The toast is always shown at the viewport-relative coordinates
201
- defined by the F.toast.config.position.
202
-
203
- The toaster's DOM element has the CSS classes fossil-tooltip
204
- and fossil-toast, so can be style via those.
191
+ Internal impl for F.toast() and friends.
192
+
193
+ args:
194
+
195
+ 1) CSS class to assign to the outer element, along with
196
+ fossil-toast-message. Must be falsy for the non-warning/non-error
197
+ case.
198
+
199
+ 2) Multiplier of F.toast.config.displayTimeMs. Should be
200
+ 1 for default case and progressively higher for warning/error
201
+ cases.
202
+
203
+ 3) The 'arguments' object from the function which is calling
204
+ this.
205
+
206
+ Returns F.toast.
205207
 */
206
- F.toast = function f(/*...*/){
207
- if(!f.toast){
208
- f.toast = function ff(argsObject){
209
- if(!ff.toaster) ff.toaster = new F.PopupWidget({
210
- cssClass: ['fossil-tooltip', 'fossil-toast']
211
- });
212
- if(f._timer) clearTimeout(f._timer);
213
- D.clearElement(ff.toaster.e);
214
- var i = 0;
215
- for( ; i < argsObject.length; ++i ){
216
- D.append(ff.toaster.e, argsObject[i]);
217
- };
218
- ff.toaster.show(f.config.position.x, f.config.position.y);
219
- f._timer = setTimeout(()=>ff.toaster.hide(), f.config.displayTimeMs);
220
- };
221
- }
222
- f.toast(arguments);
223
- };
224
- F.toast.config = {
225
- position: { x: 5, y: 5 /*viewport-relative, pixels*/ },
226
- displayTimeMs: 2500
227
- };
208
+ const toastImpl = function f(cssClass, durationMult, argsObject){
209
+ if(!f.toaster){
210
+ f.toaster = new F.PopupWidget({
211
+ cssClass: 'fossil-toast-message'
212
+ });
213
+ }
214
+ const T = f.toaster;
215
+ if(f._timer) clearTimeout(f._timer);
216
+ D.clearElement(T.e);
217
+ if(f._prevCssClass) T.e.classList.remove(f._prevCssClass);
218
+ if(cssClass) T.e.classList.add(cssClass);
219
+ f._prevCssClass = cssClass;
220
+ D.append(T.e, Array.prototype.slice.call(argsObject,0));
221
+ T.show(F.toast.config.position.x, F.toast.config.position.y);
222
+ f._timer = setTimeout(
223
+ ()=>T.hide(),
224
+ F.toast.config.displayTimeMs * durationMult
225
+ );
226
+ return F.toast;
227
+ };
228
+
229
+ F.toast = {
230
+ config: {
231
+ position: { x: 5, y: 5 /*viewport-relative, pixels*/ },
232
+ displayTimeMs: 3000
233
+ },
234
+ /**
235
+ Convenience wrapper around a PopupWidget which pops up a shared
236
+ PopupWidget instance to show toast-style messages (commonly seen
237
+ on Android). Its arguments may be anything suitable for passing
238
+ to fossil.dom.append(), and each argument is first append()ed to
239
+ the toast widget, then the widget is shown for
240
+ F.toast.config.displayTimeMs milliseconds. This is called while
241
+ a toast is currently being displayed, the first will be overwritten
242
+ and the time until the message is hidden will be reset.
243
+
244
+ The toast is always shown at the viewport-relative coordinates
245
+ defined by the F.toast.config.position.
246
+
247
+ The toaster's DOM element has the CSS classes fossil-tooltip
248
+ and fossil-toast, so can be style via those.
249
+ */
250
+ message: function(/*...*/){
251
+ return toastImpl(false,1, arguments);
252
+ },
253
+ /**
254
+ Displays a toast with the 'warning' CSS class assigned to it. It
255
+ displays for 1.5 times as long as a normal toast.
256
+ */
257
+ warning: function(/*...*/){
258
+ return toastImpl('warning',1.5,arguments);
259
+ },
260
+ /**
261
+ Displays a toast with the 'warning' CSS class assigned to it. It
262
+ displays for twice as long as a normal toast.
263
+ */
264
+ error: function(/*...*/){
265
+ return toastImpl('error',2,arguments);
266
+ }
267
+ }/*F.toast*/;
228268
229269
 })(window.fossil);
230270
--- src/fossil.popupwidget.js
+++ src/fossil.popupwidget.js
@@ -186,44 +186,84 @@
186
187 hide: function(){return this.show(false)}
188 }/*F.PopupWidget.prototype*/;
189
190 /**
191 Convenience wrapper around a PopupWidget which pops up a shared
192 PopupWidget instance to show toast-style messages (commonly seen
193 on Android). Its arguments may be anything suitable for passing
194 to fossil.dom.append(), and each argument is first append()ed to
195 the toast widget, then the widget is shown for
196 F.toast.config.displayTimeMs milliseconds. This is called while
197 a toast is currently being displayed, the first will be overwritten
198 and the time until the message is hidden will be reset.
199
200 The toast is always shown at the viewport-relative coordinates
201 defined by the F.toast.config.position.
202
203 The toaster's DOM element has the CSS classes fossil-tooltip
204 and fossil-toast, so can be style via those.
 
 
205 */
206 F.toast = function f(/*...*/){
207 if(!f.toast){
208 f.toast = function ff(argsObject){
209 if(!ff.toaster) ff.toaster = new F.PopupWidget({
210 cssClass: ['fossil-tooltip', 'fossil-toast']
211 });
212 if(f._timer) clearTimeout(f._timer);
213 D.clearElement(ff.toaster.e);
214 var i = 0;
215 for( ; i < argsObject.length; ++i ){
216 D.append(ff.toaster.e, argsObject[i]);
217 };
218 ff.toaster.show(f.config.position.x, f.config.position.y);
219 f._timer = setTimeout(()=>ff.toaster.hide(), f.config.displayTimeMs);
220 };
221 }
222 f.toast(arguments);
223 };
224 F.toast.config = {
225 position: { x: 5, y: 5 /*viewport-relative, pixels*/ },
226 displayTimeMs: 2500
227 };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
228
229 })(window.fossil);
230
--- src/fossil.popupwidget.js
+++ src/fossil.popupwidget.js
@@ -186,44 +186,84 @@
186
187 hide: function(){return this.show(false)}
188 }/*F.PopupWidget.prototype*/;
189
190 /**
191 Internal impl for F.toast() and friends.
192
193 args:
194
195 1) CSS class to assign to the outer element, along with
196 fossil-toast-message. Must be falsy for the non-warning/non-error
197 case.
198
199 2) Multiplier of F.toast.config.displayTimeMs. Should be
200 1 for default case and progressively higher for warning/error
201 cases.
202
203 3) The 'arguments' object from the function which is calling
204 this.
205
206 Returns F.toast.
207 */
208 const toastImpl = function f(cssClass, durationMult, argsObject){
209 if(!f.toaster){
210 f.toaster = new F.PopupWidget({
211 cssClass: 'fossil-toast-message'
212 });
213 }
214 const T = f.toaster;
215 if(f._timer) clearTimeout(f._timer);
216 D.clearElement(T.e);
217 if(f._prevCssClass) T.e.classList.remove(f._prevCssClass);
218 if(cssClass) T.e.classList.add(cssClass);
219 f._prevCssClass = cssClass;
220 D.append(T.e, Array.prototype.slice.call(argsObject,0));
221 T.show(F.toast.config.position.x, F.toast.config.position.y);
222 f._timer = setTimeout(
223 ()=>T.hide(),
224 F.toast.config.displayTimeMs * durationMult
225 );
226 return F.toast;
227 };
228
229 F.toast = {
230 config: {
231 position: { x: 5, y: 5 /*viewport-relative, pixels*/ },
232 displayTimeMs: 3000
233 },
234 /**
235 Convenience wrapper around a PopupWidget which pops up a shared
236 PopupWidget instance to show toast-style messages (commonly seen
237 on Android). Its arguments may be anything suitable for passing
238 to fossil.dom.append(), and each argument is first append()ed to
239 the toast widget, then the widget is shown for
240 F.toast.config.displayTimeMs milliseconds. This is called while
241 a toast is currently being displayed, the first will be overwritten
242 and the time until the message is hidden will be reset.
243
244 The toast is always shown at the viewport-relative coordinates
245 defined by the F.toast.config.position.
246
247 The toaster's DOM element has the CSS classes fossil-tooltip
248 and fossil-toast, so can be style via those.
249 */
250 message: function(/*...*/){
251 return toastImpl(false,1, arguments);
252 },
253 /**
254 Displays a toast with the 'warning' CSS class assigned to it. It
255 displays for 1.5 times as long as a normal toast.
256 */
257 warning: function(/*...*/){
258 return toastImpl('warning',1.5,arguments);
259 },
260 /**
261 Displays a toast with the 'warning' CSS class assigned to it. It
262 displays for twice as long as a normal toast.
263 */
264 error: function(/*...*/){
265 return toastImpl('error',2,arguments);
266 }
267 }/*F.toast*/;
268
269 })(window.fossil);
270

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button