Fossil

Check-in [4368f529]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment: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.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: 4368f52961d0bc57ac5a5e57e9579a32cffdb472aa7d166eb537feb9e89abbc8
User & Date: stephan 2020-08-16 15:52:45
Context
2020-08-16
16:06
Fix segfault in /artifact introduced by check-in [b699040d701464ce] and reported on the forum. ... (check-in: 5a9ac6ca user: drh tags: trunk)
15:52
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. ... (check-in: 4368f529 user: stephan tags: trunk)
15:51
Fixed a recursion bug in fossil.dom.append(e,array) (currently unused, but will be soon). ... (check-in: 2018954b user: drh tags: trunk)
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to src/default.css.

940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
  transition: max-height 0.25s ease-out;
}
.error {
  color: darkred;
  background: yellow;
}
.warning {
  color: darkred;
  background: yellow;
  opacity: 0.7;
}
.hidden {
  /* The framework-wide way of hiding elements is to assign them this
     CSS class. To make them visible again, remove it. The !important
     qualifiers are unfortunate but sometimes necessary when hidden
     element has other classes which specify visibility-related
     options. */







|

<







940
941
942
943
944
945
946
947
948

949
950
951
952
953
954
955
  transition: max-height 0.25s ease-out;
}
.error {
  color: darkred;
  background: yellow;
}
.warning {
  color: black;
  background: yellow;

}
.hidden {
  /* The framework-wide way of hiding elements is to assign them this
     CSS class. To make them visible again, remove it. The !important
     qualifiers are unfortunate but sometimes necessary when hidden
     element has other classes which specify visibility-related
     options. */
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262

1263





1264
1265
1266
1267
1268
1269
1270
















1271



1272
1273
1274
1275
1276
1277
  border: 1px solid black;
  border-radius: 0.25em;
  position: absolute;
  display: inline-block;
  z-index: 100;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.75);
  background-color: inherit;
  font-size: 80%;
}


.fossil-toast {/* "toast"-style popup message */





  padding: 0.25em 0.5em;
  margin: 0;
  border-radius: 0.25em;
  font-size: 1em;
  opacity: 0.8;
  border-size: 1px;
  border-style: dotted;
















  border-color: rgb( 127, 127, 127, 0.5 );



}

blockquote.file-content {
  /* file content block in the /file page */
  margin: 0 1em;
}







<


>
|
>
>
>
>
>
|

<

<
|
|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
|
>
>
>






1252
1253
1254
1255
1256
1257
1258

1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269

1270

1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
  border: 1px solid black;
  border-radius: 0.25em;
  position: absolute;
  display: inline-block;
  z-index: 100;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.75);
  background-color: inherit;

}

.fossil-toast-message {
  /* "toast"-style popup message.
     See fossil.popupwidget:toast() */
  position: absolute;
  display: block;
  z-index: 101;
  text-align: left;
  padding: 0.15em 0.5em;
  margin: 0;

  font-size: 1em;

  border-width: 1px;
  border-style: solid;
  border-color: rgba( 127, 127, 127, 0.75 );
  border-radius: 0.25em;
  background-color: rgba(20, 20, 20, 1)
  /* problem: if we inherit the color it may either be
     transparent or inherit translucency via the
     skin, leaving it unreadable. Since we set the bg
     color we must also set the fg color. */;
  color: rgba(235, 235, 235, 0.9);
}
.fossil-toast-message.error,
.fossil-toast-message.warning {
  background: yellow;
}
.fossil-toast-message.error {
  font-weight: bold;
  color: darkred;
  border-color: darkred;
}
.fossil-toast-message.warning {
  color: black;
}

blockquote.file-content {
  /* file content block in the /file page */
  margin: 0 1em;
}

Changes to src/fossil.numbered-lines.js.

53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
            link = D.span();
      this.state = {link};
      F.copyButton(btnCopy,{
        copyFromElement: link,
        extractText: ()=>link.dataset.url,
        oncopy: (ev)=>{
          D.flashOnce(ev.target, undefined, ()=>lineTip.hide());
          F.toast("Copied link to clipboard.");
        }
      });
      this.e.addEventListener('click', ()=>btnCopy.click(), false);
      D.append(this.e, btnCopy, link)
    }
  });








|







53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
            link = D.span();
      this.state = {link};
      F.copyButton(btnCopy,{
        copyFromElement: link,
        extractText: ()=>link.dataset.url,
        oncopy: (ev)=>{
          D.flashOnce(ev.target, undefined, ()=>lineTip.hide());
          F.toast.message("Copied link to clipboard.");
        }
      });
      this.e.addEventListener('click', ()=>btnCopy.click(), false);
      D.append(this.e, btnCopy, link)
    }
  });

Changes to src/fossil.popupwidget.js.

184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201


202


203
204
205
206
207
208
209
210
211


212
213





214





215









216
217
218
219


220


221




222
223

224
225
226



227








228
229
      return this;
    },

    hide: function(){return this.show(false)}
  }/*F.PopupWidget.prototype*/;

  /**
     Convenience wrapper around a PopupWidget which pops up a shared
     PopupWidget instance to show toast-style messages (commonly seen
     on Android). Its arguments may be anything suitable for passing
     to fossil.dom.append(), and each argument is first append()ed to
     the toast widget, then the widget is shown for
     F.toast.config.displayTimeMs milliseconds. This is called while
     a toast is currently being displayed, the first will be overwritten
     and the time until the message is hidden will be reset.

     The toast is always shown at the viewport-relative coordinates
     defined by the F.toast.config.position.





     The toaster's DOM element has the CSS classes fossil-tooltip
     and fossil-toast, so can be style via those.
  */
  F.toast = function f(/*...*/){
    if(!f.toast){
      f.toast = function ff(argsObject){
        if(!ff.toaster) ff.toaster = new F.PopupWidget({
          cssClass: ['fossil-tooltip', 'fossil-toast']
        });


        if(f._timer) clearTimeout(f._timer);
        D.clearElement(ff.toaster.e);





        var i = 0;





        for( ; i < argsObject.length; ++i ){









          D.append(ff.toaster.e, argsObject[i]);
        };
        ff.toaster.show(f.config.position.x, f.config.position.y);
        f._timer = setTimeout(()=>ff.toaster.hide(), f.config.displayTimeMs);


      };


    }




    f.toast(arguments);
  };

  F.toast.config = {
    position: { x: 5, y: 5 /*viewport-relative, pixels*/ },
    displayTimeMs: 2500



  };









})(window.fossil);







|
|
|
|
|
|
|
<

<
|
>
>

>
>
|
|

|
|
<
|
|
|
>
>
|
|
>
>
>
>
>
|
>
>
>
>
>
|
>
>
>
>
>
>
>
>
>
|
<
|
|
>
>
|
>
>
|
>
>
>
>
|
|
>
|
<
|
>
>
>
|
>
>
>
>
>
>
>
>


184
185
186
187
188
189
190
191
192
193
194
195
196
197

198

199
200
201
202
203
204
205
206
207
208
209

210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238

239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254

255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
      return this;
    },

    hide: function(){return this.show(false)}
  }/*F.PopupWidget.prototype*/;

  /**
     Internal impl for F.toast() and friends.

     args:

     1) CSS class to assign to the outer element, along with
     fossil-toast-message. Must be falsy for the non-warning/non-error
     case.



     2) Multiplier of F.toast.config.displayTimeMs. Should be
     1 for default case and progressively higher for warning/error
     cases.

     3) The 'arguments' object from the function which is calling
     this.

     Returns F.toast.
  */
  const toastImpl = function f(cssClass, durationMult, argsObject){
    if(!f.toaster){

      f.toaster = new F.PopupWidget({
        cssClass: 'fossil-toast-message'
      });
    }
    const T = f.toaster;
    if(f._timer) clearTimeout(f._timer);
    D.clearElement(T.e);
    if(f._prevCssClass) T.e.classList.remove(f._prevCssClass);
    if(cssClass) T.e.classList.add(cssClass);
    f._prevCssClass = cssClass;
    D.append(T.e, Array.prototype.slice.call(argsObject,0));
    T.show(F.toast.config.position.x, F.toast.config.position.y);
    f._timer = setTimeout(
      ()=>T.hide(),
      F.toast.config.displayTimeMs * durationMult
    );
    return F.toast;
  };

  F.toast = {
    config: {
      position: { x: 5, y: 5 /*viewport-relative, pixels*/ },
      displayTimeMs: 3000
    },
    /**
       Convenience wrapper around a PopupWidget which pops up a shared
       PopupWidget instance to show toast-style messages (commonly seen
       on Android). Its arguments may be anything suitable for passing
       to fossil.dom.append(), and each argument is first append()ed to

       the toast widget, then the widget is shown for
       F.toast.config.displayTimeMs milliseconds. This is called while
       a toast is currently being displayed, the first will be overwritten
       and the time until the message is hidden will be reset.

       The toast is always shown at the viewport-relative coordinates
       defined by the F.toast.config.position.

       The toaster's DOM element has the CSS classes fossil-tooltip
       and fossil-toast, so can be style via those.
    */
    message: function(/*...*/){
      return toastImpl(false,1, arguments);
    },
    /**
       Displays a toast with the 'warning' CSS class assigned to it. It

       displays for 1.5 times as long as a normal toast.
    */
    warning: function(/*...*/){
      return toastImpl('warning',1.5,arguments);
    },
    /**
       Displays a toast with the 'warning' CSS class assigned to it. It
       displays for twice as long as a normal toast.
    */
    error: function(/*...*/){
      return toastImpl('error',2,arguments);
    }
  }/*F.toast*/;

})(window.fossil);