Fossil SCM

Update /chat and /pikchrshow UIs to work with skins conforming to the WCAG rework as well as pre-WCAG skins (except for the bootstrap skin, which restructures the DOM in an incompatible way).

stephan 2022-11-13 18:49 wcag-2.1
Commit d208efdd5e19d082139d59e54f560060e3f1f1fd9b97cf6744f088ee3f876e01
Parent e1a9fdd768fe000…
2 files changed +12 -14 +3 -7
~ src/fossil.page.chat.js ~ src/fossil.page.pikchrshowasm.js
M src/fossil.page.chat.js
+12 -14
--- src/fossil.page.chat.js
+++ src/fossil.page.chat.js
@@ -64,10 +64,18 @@
6464
 /* This can inadvertently influence our flexbox layouts, so move
6565
 it out of the way. */
6666
 D.append(document.body,dbg);
6767
 }
6868
 })();
69
+
70
+ /**
71
+ Selectors for elements which are direct children of the BODY
72
+ element but not part of the /chat UI.
73
+ */
74
+ const selectorsOutsideChat = [
75
+ 'body > *:not(.content)'
76
+ ];
6977
 const ForceResizeKludge = (function(){
7078
 /* Workaround for Safari mayhem regarding use of vh CSS units....
7179
 We tried to use vh units to set the content area size for the
7280
 chat layout, but Safari chokes on that, so we calculate that
7381
 height here: 85% when in "normal" mode and 95% in chat-only
@@ -75,16 +83,13 @@
7583
 causing the input area to move off-screen.
7684
7785
 While we're here, we also use this to cap the max-height
7886
 of the input field so that pasting huge text does not scroll
7987
 the upper area of the input widget off-screen. */
80
- const elemsToCount = [
81
- document.querySelector('body > header.header'),
82
- document.querySelector('body > nav.mainmenu'),
83
- document.querySelector('body > #hbdrop'),
84
- document.querySelector('body > footer.footer')
85
- ];
88
+ const elemsToCount = document.querySelectorAll(
89
+ selectorsOutsideChat.join(',')
90
+ );
8691
 const contentArea = E1('main.content');
8792
 const bcl = document.body.classList;
8893
 const resized = function f(){
8994
 if(f.$disabled) return;
9095
 const wh = window.innerHeight,
@@ -322,18 +327,11 @@
322327
 footer, leaving only the chat application visible to the
323328
 user.
324329
 */
325330
 chatOnlyMode: function f(yes){
326331
 if(undefined === f.elemsToToggle){
327
- f.elemsToToggle = [];
328
- document.querySelectorAll(
329
- ["body > header.header",
330
- "body > nav.mainmenu",
331
- "body > footer.footer",
332
- "#debugMsg"
333
- ].join(',')
334
- ).forEach((e)=>f.elemsToToggle.push(e));
332
+ f.elemsToToggle = document.querySelectorAll(selectorsOutsideChat.join(','));
335333
 }
336334
 if(!arguments.length) yes = true;
337335
 if(yes === this.isChatOnlyMode()) return this;
338336
 if(yes){
339337
 D.addClass(f.elemsToToggle, 'hidden');
340338
--- src/fossil.page.chat.js
+++ src/fossil.page.chat.js
@@ -64,10 +64,18 @@
64 /* This can inadvertently influence our flexbox layouts, so move
65 it out of the way. */
66 D.append(document.body,dbg);
67 }
68 })();
 
 
 
 
 
 
 
 
69 const ForceResizeKludge = (function(){
70 /* Workaround for Safari mayhem regarding use of vh CSS units....
71 We tried to use vh units to set the content area size for the
72 chat layout, but Safari chokes on that, so we calculate that
73 height here: 85% when in "normal" mode and 95% in chat-only
@@ -75,16 +83,13 @@
75 causing the input area to move off-screen.
76
77 While we're here, we also use this to cap the max-height
78 of the input field so that pasting huge text does not scroll
79 the upper area of the input widget off-screen. */
80 const elemsToCount = [
81 document.querySelector('body > header.header'),
82 document.querySelector('body > nav.mainmenu'),
83 document.querySelector('body > #hbdrop'),
84 document.querySelector('body > footer.footer')
85 ];
86 const contentArea = E1('main.content');
87 const bcl = document.body.classList;
88 const resized = function f(){
89 if(f.$disabled) return;
90 const wh = window.innerHeight,
@@ -322,18 +327,11 @@
322 footer, leaving only the chat application visible to the
323 user.
324 */
325 chatOnlyMode: function f(yes){
326 if(undefined === f.elemsToToggle){
327 f.elemsToToggle = [];
328 document.querySelectorAll(
329 ["body > header.header",
330 "body > nav.mainmenu",
331 "body > footer.footer",
332 "#debugMsg"
333 ].join(',')
334 ).forEach((e)=>f.elemsToToggle.push(e));
335 }
336 if(!arguments.length) yes = true;
337 if(yes === this.isChatOnlyMode()) return this;
338 if(yes){
339 D.addClass(f.elemsToToggle, 'hidden');
340
--- src/fossil.page.chat.js
+++ src/fossil.page.chat.js
@@ -64,10 +64,18 @@
64 /* This can inadvertently influence our flexbox layouts, so move
65 it out of the way. */
66 D.append(document.body,dbg);
67 }
68 })();
69
70 /**
71 Selectors for elements which are direct children of the BODY
72 element but not part of the /chat UI.
73 */
74 const selectorsOutsideChat = [
75 'body > *:not(.content)'
76 ];
77 const ForceResizeKludge = (function(){
78 /* Workaround for Safari mayhem regarding use of vh CSS units....
79 We tried to use vh units to set the content area size for the
80 chat layout, but Safari chokes on that, so we calculate that
81 height here: 85% when in "normal" mode and 95% in chat-only
@@ -75,16 +83,13 @@
83 causing the input area to move off-screen.
84
85 While we're here, we also use this to cap the max-height
86 of the input field so that pasting huge text does not scroll
87 the upper area of the input widget off-screen. */
88 const elemsToCount = document.querySelectorAll(
89 selectorsOutsideChat.join(',')
90 );
 
 
 
91 const contentArea = E1('main.content');
92 const bcl = document.body.classList;
93 const resized = function f(){
94 if(f.$disabled) return;
95 const wh = window.innerHeight,
@@ -322,18 +327,11 @@
327 footer, leaving only the chat application visible to the
328 user.
329 */
330 chatOnlyMode: function f(yes){
331 if(undefined === f.elemsToToggle){
332 f.elemsToToggle = document.querySelectorAll(selectorsOutsideChat.join(','));
 
 
 
 
 
 
 
333 }
334 if(!arguments.length) yes = true;
335 if(yes === this.isChatOnlyMode()) return this;
336 if(yes){
337 D.addClass(f.elemsToToggle, 'hidden');
338
M src/fossil.page.pikchrshowasm.js
+3 -7
--- src/fossil.page.pikchrshowasm.js
+++ src/fossil.page.pikchrshowasm.js
@@ -481,21 +481,17 @@
481481
 off-screen. */
482482
 const appViews = EAll('.app-view');
483483
 const elemsToCount = [
484484
 /* Elements which we need to always count in the
485485
 visible body size. */
486
- E('body > header.header'),
487
- E('body > nav.mainmenu'),
488
- E('body > footer.footer')
486
+ ...EAll('body > *:not(.content)')
489487
 ];
490488
 const resized = function f(){
491489
 if(f.$disabled) return;
492490
 const wh = window.innerHeight;
493
- var ht;
494
- var extra = 0;
495
- elemsToCount.forEach((e)=>e ? extra += F.dom.effectiveHeight(e) : false);
496
- ht = wh - extra;
491
+ let ht = wh;
492
+ elemsToCount.forEach((e)=>ht -= F.dom.effectiveHeight(e));
497493
 appViews.forEach(function(e){
498494
 e.style.height =
499495
 e.style.maxHeight = [
500496
 "calc(", (ht>=100 ? ht : 100), "px",
501497
 " - 2em"/*fudge value*/,")"
502498
--- src/fossil.page.pikchrshowasm.js
+++ src/fossil.page.pikchrshowasm.js
@@ -481,21 +481,17 @@
481 off-screen. */
482 const appViews = EAll('.app-view');
483 const elemsToCount = [
484 /* Elements which we need to always count in the
485 visible body size. */
486 E('body > header.header'),
487 E('body > nav.mainmenu'),
488 E('body > footer.footer')
489 ];
490 const resized = function f(){
491 if(f.$disabled) return;
492 const wh = window.innerHeight;
493 var ht;
494 var extra = 0;
495 elemsToCount.forEach((e)=>e ? extra += F.dom.effectiveHeight(e) : false);
496 ht = wh - extra;
497 appViews.forEach(function(e){
498 e.style.height =
499 e.style.maxHeight = [
500 "calc(", (ht>=100 ? ht : 100), "px",
501 " - 2em"/*fudge value*/,")"
502
--- src/fossil.page.pikchrshowasm.js
+++ src/fossil.page.pikchrshowasm.js
@@ -481,21 +481,17 @@
481 off-screen. */
482 const appViews = EAll('.app-view');
483 const elemsToCount = [
484 /* Elements which we need to always count in the
485 visible body size. */
486 ...EAll('body > *:not(.content)')
 
 
487 ];
488 const resized = function f(){
489 if(f.$disabled) return;
490 const wh = window.innerHeight;
491 let ht = wh;
492 elemsToCount.forEach((e)=>ht -= F.dom.effectiveHeight(e));
 
 
493 appViews.forEach(function(e){
494 e.style.height =
495 e.style.maxHeight = [
496 "calc(", (ht>=100 ? ht : 100), "px",
497 " - 2em"/*fudge value*/,")"
498

Keyboard Shortcuts

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