Fossil

Check-in [73c8ccd3a7]
Login

Check-in [73c8ccd3a7]

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

Overview
Comment:Reformulate the LEGEND elements to include an embedded anchor tag as an attempt to working around Safari's inability to click a LEGEND element. Edit: this approach didn't work - same effect as before on Safari.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | chat-safari-ts-popup
Files: files | file ages | folders
SHA3-256: 73c8ccd3a7c97268222dbc70791c858aca964fafc22628ac67ac8eee1c5b4511
User & Date: stephan 2020-12-25 21:36:48.227
Original Comment: Reformulate the LEGEND elements to include an embedded anchor tag as an attempt to working around Safari's inability to click a LEGEND element.
Context
2020-12-25
21:36
Reformulate the LEGEND elements to include an embedded anchor tag as an attempt to working around Safari's inability to click a LEGEND element. Edit: this approach didn't work - same effect as before on Safari. ... (Closed-Leaf check-in: 73c8ccd3a7 user: stephan tags: chat-safari-ts-popup)
20:30
For the chat function, the server-to-client JSON uses strict ISO8601 time strings, including the "T" in the middle and the "Z" at the end. ... (check-in: 13c95f0c75 user: drh tags: trunk)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/chat.js.
︙︙
411
412
413
414
415
416
417

418
419
420
421
422
423
424
425
426
427
428
429

      f.popup.hide = function(){
        delete this._eMsg;
        D.clearElement(this.e);
        return this.show(false);
      };
    }/*end static init*/
    const rect = ev.target.getBoundingClientRect();

    const eMsg = ev.target.parentNode/*the owning fieldset element*/;
    f.popup._eMsg = eMsg;
    let x = rect.left, y = rect.top - 10;
    f.popup.show(ev.target)/*so we can get its computed size*/;
    if('right'===ev.target.getAttribute('align')){
      // Shift popup to the left for right-aligned messages to avoid
      // truncation off the right edge of the page.
      const pRect = f.popup.e.getBoundingClientRect();
      x -= pRect.width/3*2;
    }
    f.popup.show(x, y);
  }/*handleLegendClicked()*/;








>
|


|
|








411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430

      f.popup.hide = function(){
        delete this._eMsg;
        D.clearElement(this.e);
        return this.show(false);
      };
    }/*end static init*/
    const rect = ev.target.getBoundingClientRect();
    const legend = ev.target.parentNode;
    const eMsg = legend.parentNode/*the owning fieldset element*/;
    f.popup._eMsg = eMsg;
    let x = rect.left, y = rect.top - 10;
    f.popup.show(legend)/*so we can get its computed size*/;
    if('right'===legend.getAttribute('align')){
      // Shift popup to the left for right-aligned messages to avoid
      // truncation off the right edge of the page.
      const pRect = f.popup.e.getBoundingClientRect();
      x -= pRect.width/3*2;
    }
    f.popup.show(x, y);
  }/*handleLegendClicked()*/;
︙︙
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612




613
614
615
616
617
618
619
620
621
622
623
624
625
626
627

        }
        const eWho = D.create('legend'),
              row = D.addClass(D.fieldset(eWho), 'message-row');
        row.dataset.msgid = m.msgid;
        row.dataset.xfrom = m.xfrom;
        row.dataset.timestamp = m.mtime;
        Chat.injectMessageElem(row,atEnd);
        eWho.addEventListener('click', handleLegendClicked, false);
        eWho.setAttribute('role', 'button');
        if( m.xfrom==Chat.me ){
          eWho.setAttribute('align', Chat.msgMyAlign);
          if('right'===Chat.msgMyAlign){
            row.style.justifyContent = "flex-end";
          }else{
            row.style.justifyContent = "flex-start";
          }
        }else{
          eWho.setAttribute('align', 'left');
        }
        eWho.style.backgroundColor = m.uclr;
        eWho.classList.add('message-user');
        let whoName = m.xfrom;
        var d = new Date(m.mtime);




        if( d.getMinutes().toString()!="NaN" ){
          /* Show local time when we can compute it */
          eWho.append(D.text(whoName+' @ '+
                             d.getHours()+":"+(d.getMinutes()+100).toString().slice(1,3)
                            ))
        }else{
          /* Show UTC on systems where Date() does not work */
          eWho.append(D.text(whoName+' @ '+m.mtime.slice(11,16)))
        }
        let eContent = D.addClass(D.div(),'message-content','chat-message');
        eContent.style.backgroundColor = m.uclr;
        row.appendChild(eContent);
        if( m.fsize>0 ){
          if( m.fmime
              && m.fmime.startsWith("image/")








<















>
>
>
>


|




|








591
592
593
594
595
596
597

598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631

        }
        const eWho = D.create('legend'),
              row = D.addClass(D.fieldset(eWho), 'message-row');
        row.dataset.msgid = m.msgid;
        row.dataset.xfrom = m.xfrom;
        row.dataset.timestamp = m.mtime;
        Chat.injectMessageElem(row,atEnd);

        eWho.setAttribute('role', 'button');
        if( m.xfrom==Chat.me ){
          eWho.setAttribute('align', Chat.msgMyAlign);
          if('right'===Chat.msgMyAlign){
            row.style.justifyContent = "flex-end";
          }else{
            row.style.justifyContent = "flex-start";
          }
        }else{
          eWho.setAttribute('align', 'left');
        }
        eWho.style.backgroundColor = m.uclr;
        eWho.classList.add('message-user');
        let whoName = m.xfrom;
        var d = new Date(m.mtime);
        // Workaround for Safari, which isn't handling clicks on our LEGEND...
        const link = D.a('#');
        link.addEventListener('click', handleLegendClicked, false);
        D.append(eWho, link);
        if( d.getMinutes().toString()!="NaN" ){
          /* Show local time when we can compute it */
          link.append(D.text(whoName+' @ '+
                             d.getHours()+":"+(d.getMinutes()+100).toString().slice(1,3)
                            ))
        }else{
          /* Show UTC on systems where Date() does not work */
          link.append(D.text(whoName+' @ '+m.mtime.slice(11,16)))
        }
        let eContent = D.addClass(D.div(),'message-content','chat-message');
        eContent.style.backgroundColor = m.uclr;
        row.appendChild(eContent);
        if( m.fsize>0 ){
          if( m.fmime
              && m.fmime.startsWith("image/")
︙︙
Changes to src/default.css.
︙︙
1508
1509
1510
1511
1512
1513
1514



1515
1516
1517
1518
1519
1520
1521
1522

  border-radius: 0.25em 0.25em 0 0;
  padding: 0 0.5em;
  /*text-align: left; Firefox requires the 'align' attribute */
  margin: 0 0.25em 0.4em 0.15em;
  padding: 0 0.5em 0em 0.5em;
  cursor: pointer;
}




body.chat .fossil-tooltip.help-buttonlet-content {
  font-size: 80%;
}

body.chat .chat-message-popup {
  font-family: monospace;
  font-size: 0.8em;








>
>
>
|








1508
1509
1510
1511
1512
1513
1514
1515
1516
1517
1518
1519
1520
1521
1522
1523
1524
1525

  border-radius: 0.25em 0.25em 0 0;
  padding: 0 0.5em;
  /*text-align: left; Firefox requires the 'align' attribute */
  margin: 0 0.25em 0.4em 0.15em;
  padding: 0 0.5em 0em 0.5em;
  cursor: pointer;
}
body.chat .message-row .message-user a {
  text-decoration: none;
  color: inherit;
}
body.chat .fossil-tooltip.help-buttonlet-content {
  font-size: 80%;
}

body.chat .chat-message-popup {
  font-family: monospace;
  font-size: 0.8em;
︙︙