Fossil

Check-in [9e797bf9bf]
Login

Check-in [9e797bf9bf]

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

Overview
Comment:Chat settings menu tweaks based on chat session feedback.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: 9e797bf9bfa92debc5684d0f249853216d5534e64e0eb612c283396aaa23bdc2
User & Date: stephan 2020-12-25 15:27:32.850
Context
2020-12-25
16:08
chat internal cleanups in prep for upcoming changes. Possibly fixed the cosmetic bug where the titlebar says '(0) ...' after receiving an empty list of messages in response to an auto-reconnect after a timeout. ... (check-in: e52d0fd5ce user: stephan tags: trunk)
15:27
Chat settings menu tweaks based on chat session feedback. ... (check-in: 9e797bf9bf user: stephan tags: trunk)
14:58
Added chat setting chat-inline-images: specifies whether /chat images default to display inline or as download links. Various code-adjacent tweaks. ... (check-in: 9d86a4af61 user: stephan tags: trunk)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/chat.js.
︙︙
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395

      adjustY: function(y){
        const rect = settingsButton.getBoundingClientRect();
        return rect.top + rect.height + 2;
      }
    });
    /* Settings menu entries... */
    const settingsOps = [{
      label: "Toggle chat-only mode",
      tooltip: "Toggles the page's header and footer on and off.",
      callback: function f(){
        if(undefined === f.isHidden){
          f.isHidden = false;
          f.elemsToToggle = [];
          document.body.childNodes.forEach(function(e){
            if(!e.classList) return/*TEXT nodes and such*/;
            else if(!e.classList.contains('content')








|
|








380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395

      adjustY: function(y){
        const rect = settingsButton.getBoundingClientRect();
        return rect.top + rect.height + 2;
      }
    });
    /* Settings menu entries... */
    const settingsOps = [{
      label: "Chat-only mode",
      boolValue: ()=>!!document.body.classList.contains('chat-only-mode'),
      callback: function f(){
        if(undefined === f.isHidden){
          f.isHidden = false;
          f.elemsToToggle = [];
          document.body.childNodes.forEach(function(e){
            if(!e.classList) return/*TEXT nodes and such*/;
            else if(!e.classList.contains('content')
︙︙
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454






455
456
457
458


459
460


461
462
463
464

465
466
467
468
469
470
471
472


473
474


475
476
477
478
479
480
481

        }else{
          D.removeClass(f.elemsToToggle, 'hidden');
          D.removeClass(document.body, 'chat-only-mode');
          iws.backgroundColor = f.initialBg;
        }
      }
    },{
      label: "Toggle left/right layout",
      tooltip: "Toggles your own messages between the right (mobile-style) "+
        "or left of the screen (more readable on large windows).",
      callback: function f(){
        if('right'===Chat.msgMyAlign) Chat.msgMyAlign = 'left';
        else Chat.msgMyAlign = 'right';
        const msgs = Chat.e.messagesWrapper.querySelectorAll('.message-row');
        msgs.forEach(function(row){
          if(row.dataset.xfrom!==Chat.me) return;
          row.querySelector('legend').setAttribute('align', Chat.msgMyAlign);
          if('right'===Chat.msgMyAlign) row.style.justifyContent = "flex-end";
          else row.style.justifyContent = "flex-start";
        });
      }
    },{
      label: "Toggle images inline",
      persistent: true,
      tooltip: "Toggles whether newly-arrived images appear "+
        "inline or as download links.",
      callback: function(){
        const v = Chat.settings.getBool('images-inline',true);
        Chat.settings.set('images-inline', !v);
        F.toast.message("Image mode set to "+(v ? "hyperlink" : "inline")+".");
      }
    }];







    settingsOps.forEach(function(op){
      const line = D.addClass(D.span(), 'menu-entry');
      const btn = D.append(D.addClass(D.span(), 'button'),
                          (op.persistent ? "[P] " : "")+op.label);


      op.callback.button = btn;
      if('function'===op.init) op.init();


      if(op.tooltip){
        const help = D.span();
        D.append(line, help);
        F.helpButtonlets.create(help, op.tooltip);

      }
      D.append(line, btn);
      D.append(settingsPopup.e, line);
      btn.addEventListener('click', function(ev){
        settingsPopup.hide();
        op.callback.call(this,ev);
      });
    });


    D.append(settingsPopup.e, D.append(D.span(),"[P] = locally-persistent setting"));
    // settingsPopup.installClickToHide();// Don't do this for this popup!


    settingsButton.addEventListener('click',function(ev){
      //ev.preventDefault();
      if(settingsPopup.isShown()) settingsPopup.hide();
      else settingsPopup.show(settingsButton);
      /* Reminder: we cannot toggle the visibility from her
       */
    }, false);








|
|
<












|
|
<
<







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

|
>
>
|
|
>
>








422
423
424
425
426
427
428
429
430

431
432
433
434
435
436
437
438
439
440
441
442
443
444


445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460

461
462
463

464
465
466
467
468

469
470

471
472


473
474
475
476
477
478
479
480
481
482
483
484
485
486
487

        }else{
          D.removeClass(f.elemsToToggle, 'hidden');
          D.removeClass(document.body, 'chat-only-mode');
          iws.backgroundColor = f.initialBg;
        }
      }
    },{
      label: "Left-align my posts",
      boolValue: ()=>'left'===Chat.msgMyAlign,

      callback: function f(){
        if('right'===Chat.msgMyAlign) Chat.msgMyAlign = 'left';
        else Chat.msgMyAlign = 'right';
        const msgs = Chat.e.messagesWrapper.querySelectorAll('.message-row');
        msgs.forEach(function(row){
          if(row.dataset.xfrom!==Chat.me) return;
          row.querySelector('legend').setAttribute('align', Chat.msgMyAlign);
          if('right'===Chat.msgMyAlign) row.style.justifyContent = "flex-end";
          else row.style.justifyContent = "flex-start";
        });
      }
    },{
      label: "Images inline",
      boolValue: ()=>Chat.settings.getBool('images-inline'),


      callback: function(){
        const v = Chat.settings.getBool('images-inline',true);
        Chat.settings.set('images-inline', !v);
        F.toast.message("Image mode set to "+(v ? "hyperlink" : "inline")+".");
      }
    }];

    /**
       Rebuild the menu each time it's shown so that the toggles can
       show their current values.
    */
    settingsPopup.options.refresh = function(){
      D.clearElement(this.e);
      settingsOps.forEach(function(op){
        const line = D.addClass(D.span(), 'menu-entry');
        const btn = D.append(D.addClass(D.span(), 'button'), op.label);

        const callback = function(ev){
          settingsPopup.hide();
          op.callback.call(this,ev);

        };
        D.append(line, btn);
        if(op.hasOwnProperty('boolValue')){
          const check = D.checkbox(1, op.boolValue());
          D.append(line, check);

          check.addEventListener('click', callback);
        }

        D.append(settingsPopup.e, line);
        btn.addEventListener('click', callback);


      });
    };
    /**
       Reminder:
       settingsPopup.installClickToHide();
       Don't do this for this popup! It interferes with the embedded
       "?" buttons in the popup, which are also PopupWidget users.
    */
    settingsButton.addEventListener('click',function(ev){
      //ev.preventDefault();
      if(settingsPopup.isShown()) settingsPopup.hide();
      else settingsPopup.show(settingsButton);
      /* Reminder: we cannot toggle the visibility from her
       */
    }, false);
︙︙
Changes to src/default.css.
︙︙
1587
1588
1589
1590
1591
1592
1593
1594
1595




1596
1597
1598
1599
1600
1601
1602

  vertical-align: middle;
}
body.chat .chat-settings-popup > span.menu-entry{
  white-space: nowrap;
  cursor: pointer;
  border: 1px outset;
  border-radius: 0.25em;
  margin: 0.25em 0.2em;
  padding: 0.5em;




}
body.chat .chat-settings-popup > span.menu-entry > .help-buttonlet {
  vertical-align: middle;
}
body.chat .chat-settings-popup > span.menu-entry > span.button {
  margin: 0.25em 0.2em;
  padding: 0.5em;








<
|
>
>
>
>








1587
1588
1589
1590
1591
1592
1593

1594
1595
1596
1597
1598
1599
1600
1601
1602
1603
1604
1605

  vertical-align: middle;
}
body.chat .chat-settings-popup > span.menu-entry{
  white-space: nowrap;
  cursor: pointer;
  border: 1px outset;
  border-radius: 0.25em;

  padding: 0.25em 0.5em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
body.chat .chat-settings-popup > span.menu-entry > .help-buttonlet {
  vertical-align: middle;
}
body.chat .chat-settings-popup > span.menu-entry > span.button {
  margin: 0.25em 0.2em;
  padding: 0.5em;
︙︙