Fossil SCM

Reformulate the LEGEND elements to include an embedded anchor tag as an attempt to working around Safari's inability to click a LEGEND element.

stephan 2020-12-25 21:36 trunk
Commit 73c8ccd3a7c97268222dbc70791c858aca964fafc22628ac67ac8eee1c5b4511
Parent 13c95f0c7537746…
2 files changed +10 -6 +4 -1
~ src/chat.js ~ src/default.css
M src/chat.js
+10 -6
--- src/chat.js
+++ src/chat.js
@@ -413,15 +413,16 @@
413413
 D.clearElement(this.e);
414414
 return this.show(false);
415415
 };
416416
 }/*end static init*/
417417
 const rect = ev.target.getBoundingClientRect();
418
- const eMsg = ev.target.parentNode/*the owning fieldset element*/;
418
+ const legend = ev.target.parentNode;
419
+ const eMsg = legend.parentNode/*the owning fieldset element*/;
419420
 f.popup._eMsg = eMsg;
420421
 let x = rect.left, y = rect.top - 10;
421
- f.popup.show(ev.target)/*so we can get its computed size*/;
422
- if('right'===ev.target.getAttribute('align')){
422
+ f.popup.show(legend)/*so we can get its computed size*/;
423
+ if('right'===legend.getAttribute('align')){
423424
 // Shift popup to the left for right-aligned messages to avoid
424425
 // truncation off the right edge of the page.
425426
 const pRect = f.popup.e.getBoundingClientRect();
426427
 x -= pRect.width/3*2;
427428
 }
@@ -592,11 +593,10 @@
592593
 row = D.addClass(D.fieldset(eWho), 'message-row');
593594
 row.dataset.msgid = m.msgid;
594595
 row.dataset.xfrom = m.xfrom;
595596
 row.dataset.timestamp = m.mtime;
596597
 Chat.injectMessageElem(row,atEnd);
597
- eWho.addEventListener('click', handleLegendClicked, false);
598598
 eWho.setAttribute('role', 'button');
599599
 if( m.xfrom==Chat.me ){
600600
 eWho.setAttribute('align', Chat.msgMyAlign);
601601
 if('right'===Chat.msgMyAlign){
602602
 row.style.justifyContent = "flex-end";
@@ -608,18 +608,22 @@
608608
 }
609609
 eWho.style.backgroundColor = m.uclr;
610610
 eWho.classList.add('message-user');
611611
 let whoName = m.xfrom;
612612
 var d = new Date(m.mtime);
613
+ // Workaround for Safari, which isn't handling clicks on our LEGEND...
614
+ const link = D.a('#');
615
+ link.addEventListener('click', handleLegendClicked, false);
616
+ D.append(eWho, link);
613617
 if( d.getMinutes().toString()!="NaN" ){
614618
 /* Show local time when we can compute it */
615
- eWho.append(D.text(whoName+' @ '+
619
+ link.append(D.text(whoName+' @ '+
616620
 d.getHours()+":"+(d.getMinutes()+100).toString().slice(1,3)
617621
 ))
618622
 }else{
619623
 /* Show UTC on systems where Date() does not work */
620
- eWho.append(D.text(whoName+' @ '+m.mtime.slice(11,16)))
624
+ link.append(D.text(whoName+' @ '+m.mtime.slice(11,16)))
621625
 }
622626
 let eContent = D.addClass(D.div(),'message-content','chat-message');
623627
 eContent.style.backgroundColor = m.uclr;
624628
 row.appendChild(eContent);
625629
 if( m.fsize>0 ){
626630
--- src/chat.js
+++ src/chat.js
@@ -413,15 +413,16 @@
413 D.clearElement(this.e);
414 return this.show(false);
415 };
416 }/*end static init*/
417 const rect = ev.target.getBoundingClientRect();
418 const eMsg = ev.target.parentNode/*the owning fieldset element*/;
 
419 f.popup._eMsg = eMsg;
420 let x = rect.left, y = rect.top - 10;
421 f.popup.show(ev.target)/*so we can get its computed size*/;
422 if('right'===ev.target.getAttribute('align')){
423 // Shift popup to the left for right-aligned messages to avoid
424 // truncation off the right edge of the page.
425 const pRect = f.popup.e.getBoundingClientRect();
426 x -= pRect.width/3*2;
427 }
@@ -592,11 +593,10 @@
592 row = D.addClass(D.fieldset(eWho), 'message-row');
593 row.dataset.msgid = m.msgid;
594 row.dataset.xfrom = m.xfrom;
595 row.dataset.timestamp = m.mtime;
596 Chat.injectMessageElem(row,atEnd);
597 eWho.addEventListener('click', handleLegendClicked, false);
598 eWho.setAttribute('role', 'button');
599 if( m.xfrom==Chat.me ){
600 eWho.setAttribute('align', Chat.msgMyAlign);
601 if('right'===Chat.msgMyAlign){
602 row.style.justifyContent = "flex-end";
@@ -608,18 +608,22 @@
608 }
609 eWho.style.backgroundColor = m.uclr;
610 eWho.classList.add('message-user');
611 let whoName = m.xfrom;
612 var d = new Date(m.mtime);
 
 
 
 
613 if( d.getMinutes().toString()!="NaN" ){
614 /* Show local time when we can compute it */
615 eWho.append(D.text(whoName+' @ '+
616 d.getHours()+":"+(d.getMinutes()+100).toString().slice(1,3)
617 ))
618 }else{
619 /* Show UTC on systems where Date() does not work */
620 eWho.append(D.text(whoName+' @ '+m.mtime.slice(11,16)))
621 }
622 let eContent = D.addClass(D.div(),'message-content','chat-message');
623 eContent.style.backgroundColor = m.uclr;
624 row.appendChild(eContent);
625 if( m.fsize>0 ){
626
--- src/chat.js
+++ src/chat.js
@@ -413,15 +413,16 @@
413 D.clearElement(this.e);
414 return this.show(false);
415 };
416 }/*end static init*/
417 const rect = ev.target.getBoundingClientRect();
418 const legend = ev.target.parentNode;
419 const eMsg = legend.parentNode/*the owning fieldset element*/;
420 f.popup._eMsg = eMsg;
421 let x = rect.left, y = rect.top - 10;
422 f.popup.show(legend)/*so we can get its computed size*/;
423 if('right'===legend.getAttribute('align')){
424 // Shift popup to the left for right-aligned messages to avoid
425 // truncation off the right edge of the page.
426 const pRect = f.popup.e.getBoundingClientRect();
427 x -= pRect.width/3*2;
428 }
@@ -592,11 +593,10 @@
593 row = D.addClass(D.fieldset(eWho), 'message-row');
594 row.dataset.msgid = m.msgid;
595 row.dataset.xfrom = m.xfrom;
596 row.dataset.timestamp = m.mtime;
597 Chat.injectMessageElem(row,atEnd);
 
598 eWho.setAttribute('role', 'button');
599 if( m.xfrom==Chat.me ){
600 eWho.setAttribute('align', Chat.msgMyAlign);
601 if('right'===Chat.msgMyAlign){
602 row.style.justifyContent = "flex-end";
@@ -608,18 +608,22 @@
608 }
609 eWho.style.backgroundColor = m.uclr;
610 eWho.classList.add('message-user');
611 let whoName = m.xfrom;
612 var d = new Date(m.mtime);
613 // Workaround for Safari, which isn't handling clicks on our LEGEND...
614 const link = D.a('#');
615 link.addEventListener('click', handleLegendClicked, false);
616 D.append(eWho, link);
617 if( d.getMinutes().toString()!="NaN" ){
618 /* Show local time when we can compute it */
619 link.append(D.text(whoName+' @ '+
620 d.getHours()+":"+(d.getMinutes()+100).toString().slice(1,3)
621 ))
622 }else{
623 /* Show UTC on systems where Date() does not work */
624 link.append(D.text(whoName+' @ '+m.mtime.slice(11,16)))
625 }
626 let eContent = D.addClass(D.div(),'message-content','chat-message');
627 eContent.style.backgroundColor = m.uclr;
628 row.appendChild(eContent);
629 if( m.fsize>0 ){
630
M src/default.css
+4 -1
--- src/default.css
+++ src/default.css
@@ -1510,11 +1510,14 @@
15101510
 /*text-align: left; Firefox requires the 'align' attribute */
15111511
 margin: 0 0.25em 0.4em 0.15em;
15121512
 padding: 0 0.5em 0em 0.5em;
15131513
 cursor: pointer;
15141514
 }
1515
-
1515
+body.chat .message-row .message-user a {
1516
+ text-decoration: none;
1517
+ color: inherit;
1518
+}
15161519
 body.chat .fossil-tooltip.help-buttonlet-content {
15171520
 font-size: 80%;
15181521
 }
15191522
15201523
 body.chat .chat-message-popup {
15211524
--- src/default.css
+++ src/default.css
@@ -1510,11 +1510,14 @@
1510 /*text-align: left; Firefox requires the 'align' attribute */
1511 margin: 0 0.25em 0.4em 0.15em;
1512 padding: 0 0.5em 0em 0.5em;
1513 cursor: pointer;
1514 }
1515
 
 
 
1516 body.chat .fossil-tooltip.help-buttonlet-content {
1517 font-size: 80%;
1518 }
1519
1520 body.chat .chat-message-popup {
1521
--- src/default.css
+++ src/default.css
@@ -1510,11 +1510,14 @@
1510 /*text-align: left; Firefox requires the 'align' attribute */
1511 margin: 0 0.25em 0.4em 0.15em;
1512 padding: 0 0.5em 0em 0.5em;
1513 cursor: pointer;
1514 }
1515 body.chat .message-row .message-user a {
1516 text-decoration: none;
1517 color: inherit;
1518 }
1519 body.chat .fossil-tooltip.help-buttonlet-content {
1520 font-size: 80%;
1521 }
1522
1523 body.chat .chat-message-popup {
1524

Keyboard Shortcuts

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