Fossil SCM

Minimize the FOUC effect before the tabs are re-assembed in JS by initially hiding all tabs.

stephan 2020-07-31 05:14 ajax-wiki-editor
Commit d8f18bc54effa4a17e7274de490009ea8ef79ace1d5a510e4b1d29c8a18e3a6e
Parent a95dd98e8147351…
3 files changed +2 -4 +1 -1 +13 -6
~ src/fossil.page.wikiedit.js ~ src/style.wikiedit.css ~ src/wiki.c
M src/fossil.page.wikiedit.js
+2 -4
--- src/fossil.page.wikiedit.js
+++ src/fossil.page.wikiedit.js
@@ -579,40 +579,38 @@
579579
580580
 F.onPageLoad(function() {
581581
 document.body.classList.add('wikiedit');
582582
 P.base = {tag: E('base'), wikiUrl: F.repoUrl('wiki')};
583583
 P.base.originalHref = P.base.tag.href;
584
- P.tabs = new fossil.TabManager('#wikiedit-tabs');
585584
 P.e = { /* various DOM elements we work with... */
586585
 taEditor: E('#wikiedit-content-editor'),
587
-// btnCommit: E("#wikiedit-btn-commit"),
588586
 btnReload: E("#wikiedit-tab-content button.wikiedit-content-reload"),
589587
 btnSave: E("button.wikiedit-save"),
590588
 selectMimetype: E('select[name=mimetype]'),
591589
 selectFontSizeWrap: E('#select-font-size'),
592590
 // selectDiffWS: E('select[name=diff_ws]'),
593591
 cbAutoPreview: E('#cb-preview-autoupdate > input[type=checkbox]'),
594592
 previewTarget: E('#wikiedit-tab-preview-wrapper'),
595593
 diffTarget: E('#wikiedit-tab-diff-wrapper'),
596594
 attachmentWrapper: E("#wikiedit-attachments"),
595
+ tabContainer: E('#wikiedit-tabs'),
597596
 tabs:{
598597
 pageList: E('#wikiedit-tab-pages'),
599598
 content: E('#wikiedit-tab-content'),
600599
 preview: E('#wikiedit-tab-preview'),
601600
 diff: E('#wikiedit-tab-diff'),
602601
 misc: E('#wikiedit-tab-misc')
603602
 //commit: E('#wikiedit-tab-commit')
604603
 }
605604
 };
606
-
605
+ P.tabs = new fossil.TabManager(D.clearElement(P.e.tabContainer));
607606
 P.tabs.e.container.insertBefore(
608607
 /* Move the status bar between the tab buttons and
609608
 tab panels. Seems to be the best fit in terms of
610609
 functionality and visibility. */
611610
 E('#fossil-status-bar'), P.tabs.e.tabs
612611
 );
613
-
614612
 P.tabs.addEventListener(
615613
 /* Set up some before-switch-to tab event tasks... */
616614
 'before-switch-to', function(ev){
617615
 if(ev.detail===P.e.tabs.preview){
618616
 P.baseHrefForWiki();
619617
--- src/fossil.page.wikiedit.js
+++ src/fossil.page.wikiedit.js
@@ -579,40 +579,38 @@
579
580 F.onPageLoad(function() {
581 document.body.classList.add('wikiedit');
582 P.base = {tag: E('base'), wikiUrl: F.repoUrl('wiki')};
583 P.base.originalHref = P.base.tag.href;
584 P.tabs = new fossil.TabManager('#wikiedit-tabs');
585 P.e = { /* various DOM elements we work with... */
586 taEditor: E('#wikiedit-content-editor'),
587 // btnCommit: E("#wikiedit-btn-commit"),
588 btnReload: E("#wikiedit-tab-content button.wikiedit-content-reload"),
589 btnSave: E("button.wikiedit-save"),
590 selectMimetype: E('select[name=mimetype]'),
591 selectFontSizeWrap: E('#select-font-size'),
592 // selectDiffWS: E('select[name=diff_ws]'),
593 cbAutoPreview: E('#cb-preview-autoupdate > input[type=checkbox]'),
594 previewTarget: E('#wikiedit-tab-preview-wrapper'),
595 diffTarget: E('#wikiedit-tab-diff-wrapper'),
596 attachmentWrapper: E("#wikiedit-attachments"),
 
597 tabs:{
598 pageList: E('#wikiedit-tab-pages'),
599 content: E('#wikiedit-tab-content'),
600 preview: E('#wikiedit-tab-preview'),
601 diff: E('#wikiedit-tab-diff'),
602 misc: E('#wikiedit-tab-misc')
603 //commit: E('#wikiedit-tab-commit')
604 }
605 };
606
607 P.tabs.e.container.insertBefore(
608 /* Move the status bar between the tab buttons and
609 tab panels. Seems to be the best fit in terms of
610 functionality and visibility. */
611 E('#fossil-status-bar'), P.tabs.e.tabs
612 );
613
614 P.tabs.addEventListener(
615 /* Set up some before-switch-to tab event tasks... */
616 'before-switch-to', function(ev){
617 if(ev.detail===P.e.tabs.preview){
618 P.baseHrefForWiki();
619
--- src/fossil.page.wikiedit.js
+++ src/fossil.page.wikiedit.js
@@ -579,40 +579,38 @@
579
580 F.onPageLoad(function() {
581 document.body.classList.add('wikiedit');
582 P.base = {tag: E('base'), wikiUrl: F.repoUrl('wiki')};
583 P.base.originalHref = P.base.tag.href;
 
584 P.e = { /* various DOM elements we work with... */
585 taEditor: E('#wikiedit-content-editor'),
 
586 btnReload: E("#wikiedit-tab-content button.wikiedit-content-reload"),
587 btnSave: E("button.wikiedit-save"),
588 selectMimetype: E('select[name=mimetype]'),
589 selectFontSizeWrap: E('#select-font-size'),
590 // selectDiffWS: E('select[name=diff_ws]'),
591 cbAutoPreview: E('#cb-preview-autoupdate > input[type=checkbox]'),
592 previewTarget: E('#wikiedit-tab-preview-wrapper'),
593 diffTarget: E('#wikiedit-tab-diff-wrapper'),
594 attachmentWrapper: E("#wikiedit-attachments"),
595 tabContainer: E('#wikiedit-tabs'),
596 tabs:{
597 pageList: E('#wikiedit-tab-pages'),
598 content: E('#wikiedit-tab-content'),
599 preview: E('#wikiedit-tab-preview'),
600 diff: E('#wikiedit-tab-diff'),
601 misc: E('#wikiedit-tab-misc')
602 //commit: E('#wikiedit-tab-commit')
603 }
604 };
605 P.tabs = new fossil.TabManager(D.clearElement(P.e.tabContainer));
606 P.tabs.e.container.insertBefore(
607 /* Move the status bar between the tab buttons and
608 tab panels. Seems to be the best fit in terms of
609 functionality and visibility. */
610 E('#fossil-status-bar'), P.tabs.e.tabs
611 );
 
612 P.tabs.addEventListener(
613 /* Set up some before-switch-to tab event tasks... */
614 'before-switch-to', function(ev){
615 if(ev.detail===P.e.tabs.preview){
616 P.baseHrefForWiki();
617
M src/style.wikiedit.css
+1 -1
--- src/style.wikiedit.css
+++ src/style.wikiedit.css
@@ -64,11 +64,11 @@
6464
 }
6565
 body.wikiedit .WikiList select option.stashed-new::before {
6666
 content: "[+] ";
6767
 }
6868
 body.wikiedit textarea {
69
- max-width: calc(100% - 1em);
69
+ max-width: initial;
7070
 }
7171
 body.wikiedit .tabs .tab-panel {
7272
 /* Needed for wide diffs */
7373
 overflow: auto;
7474
 }
7575
--- src/style.wikiedit.css
+++ src/style.wikiedit.css
@@ -64,11 +64,11 @@
64 }
65 body.wikiedit .WikiList select option.stashed-new::before {
66 content: "[+] ";
67 }
68 body.wikiedit textarea {
69 max-width: calc(100% - 1em);
70 }
71 body.wikiedit .tabs .tab-panel {
72 /* Needed for wide diffs */
73 overflow: auto;
74 }
75
--- src/style.wikiedit.css
+++ src/style.wikiedit.css
@@ -64,11 +64,11 @@
64 }
65 body.wikiedit .WikiList select option.stashed-new::before {
66 content: "[+] ";
67 }
68 body.wikiedit textarea {
69 max-width: initial;
70 }
71 body.wikiedit .tabs .tab-panel {
72 /* Needed for wide diffs */
73 overflow: auto;
74 }
75
M src/wiki.c
+13 -6
--- src/wiki.c
+++ src/wiki.c
@@ -1112,27 +1112,31 @@
11121112
 "title='Status message area. Double-click to clear them.'>"
11131113
 "Status messages will go here.</div>\n"
11141114
 /* will be moved into the tab container via JS */);
11151115
11161116
 /* Main tab container... */
1117
- CX("<div id='wikiedit-tabs' class='tab-container'></div>");
1117
+ CX("<div id='wikiedit-tabs' class='tab-container'>Loading...</div>");
1118
+ /* The .hidden class on the following tab elements is to help lessen
1119
+ the FOUC effect of the tabs before JS re-assembles them. */
11181120
11191121
 /******* Page list *******/
11201122
 {
11211123
 CX("<div id='wikiedit-tab-pages' "
11221124
 "data-tab-parent='wikiedit-tabs' "
1123
- "data-tab-label='Wiki Page List'"
1125
+ "data-tab-label='Wiki Page List' "
1126
+ "class='hidden'"
11241127
 ">");
11251128
 CX("<div>Loading wiki pages list...</div>");
11261129
 CX("</div>"/*#wikiedit-tab-pages*/);
11271130
 }
11281131
11291132
 /******* Content tab *******/
11301133
 {
11311134
 CX("<div id='wikiedit-tab-content' "
11321135
 "data-tab-parent='wikiedit-tabs' "
1133
- "data-tab-label='Wiki Editor'"
1136
+ "data-tab-label='Wiki Editor' "
1137
+ "class='hidden'"
11341138
 ">");
11351139
 CX("<div class='flex-container flex-row child-gap-small'>");
11361140
 CX("<span class='input-with-label'>"
11371141
 "<label>Mime type</label>");
11381142
 mimetype_option_menu(0);
@@ -1161,11 +1165,12 @@
11611165
 }
11621166
 /****** Preview tab ******/
11631167
 {
11641168
 CX("<div id='wikiedit-tab-preview' "
11651169
 "data-tab-parent='wikiedit-tabs' "
1166
- "data-tab-label='Preview &amp; Save'"
1170
+ "data-tab-label='Preview &amp; Save' "
1171
+ "class='hidden'"
11671172
 ">");
11681173
 CX("<div class='wikiedit-options flex-container flex-row'>");
11691174
 CX("<button id='btn-preview-refresh' "
11701175
 "data-f-preview-from='wikiContent' "
11711176
 /* ^^^ fossil.page[methodName]() OR text source elem ID,
@@ -1191,11 +1196,12 @@
11911196
11921197
 /****** Diff tab ******/
11931198
 {
11941199
 CX("<div id='wikiedit-tab-diff' "
11951200
 "data-tab-parent='wikiedit-tabs' "
1196
- "data-tab-label='Diff'"
1201
+ "data-tab-label='Diff' "
1202
+ "class='hidden'"
11971203
 ">");
11981204
11991205
 CX("<div class='wikiedit-options flex-container flex-row' "
12001206
 "id='wikiedit-tab-diff-buttons'>");
12011207
 CX("<button class='sbs'>Side-by-side</button>"
@@ -1209,11 +1215,12 @@
12091215
12101216
 /****** The obligatory "Misc" tab ******/
12111217
 {
12121218
 CX("<div id='wikiedit-tab-misc' "
12131219
 "data-tab-parent='wikiedit-tabs' "
1214
- "data-tab-label='Help, Attachments, etc.'"
1220
+ "data-tab-label='Help, Attachments, etc.' "
1221
+ "class='hidden'"
12151222
 ">");
12161223
 CX("<h3>Wiki formatting rules</h3>");
12171224
 CX("<ul>");
12181225
 CX("<li><a href='%R/wiki_rules'>Fossil wiki format</a></li>");
12191226
 CX("<li><a href='%R/md_rules'>Markdown format</a></li>");
12201227
--- src/wiki.c
+++ src/wiki.c
@@ -1112,27 +1112,31 @@
1112 "title='Status message area. Double-click to clear them.'>"
1113 "Status messages will go here.</div>\n"
1114 /* will be moved into the tab container via JS */);
1115
1116 /* Main tab container... */
1117 CX("<div id='wikiedit-tabs' class='tab-container'></div>");
 
 
1118
1119 /******* Page list *******/
1120 {
1121 CX("<div id='wikiedit-tab-pages' "
1122 "data-tab-parent='wikiedit-tabs' "
1123 "data-tab-label='Wiki Page List'"
 
1124 ">");
1125 CX("<div>Loading wiki pages list...</div>");
1126 CX("</div>"/*#wikiedit-tab-pages*/);
1127 }
1128
1129 /******* Content tab *******/
1130 {
1131 CX("<div id='wikiedit-tab-content' "
1132 "data-tab-parent='wikiedit-tabs' "
1133 "data-tab-label='Wiki Editor'"
 
1134 ">");
1135 CX("<div class='flex-container flex-row child-gap-small'>");
1136 CX("<span class='input-with-label'>"
1137 "<label>Mime type</label>");
1138 mimetype_option_menu(0);
@@ -1161,11 +1165,12 @@
1161 }
1162 /****** Preview tab ******/
1163 {
1164 CX("<div id='wikiedit-tab-preview' "
1165 "data-tab-parent='wikiedit-tabs' "
1166 "data-tab-label='Preview &amp; Save'"
 
1167 ">");
1168 CX("<div class='wikiedit-options flex-container flex-row'>");
1169 CX("<button id='btn-preview-refresh' "
1170 "data-f-preview-from='wikiContent' "
1171 /* ^^^ fossil.page[methodName]() OR text source elem ID,
@@ -1191,11 +1196,12 @@
1191
1192 /****** Diff tab ******/
1193 {
1194 CX("<div id='wikiedit-tab-diff' "
1195 "data-tab-parent='wikiedit-tabs' "
1196 "data-tab-label='Diff'"
 
1197 ">");
1198
1199 CX("<div class='wikiedit-options flex-container flex-row' "
1200 "id='wikiedit-tab-diff-buttons'>");
1201 CX("<button class='sbs'>Side-by-side</button>"
@@ -1209,11 +1215,12 @@
1209
1210 /****** The obligatory "Misc" tab ******/
1211 {
1212 CX("<div id='wikiedit-tab-misc' "
1213 "data-tab-parent='wikiedit-tabs' "
1214 "data-tab-label='Help, Attachments, etc.'"
 
1215 ">");
1216 CX("<h3>Wiki formatting rules</h3>");
1217 CX("<ul>");
1218 CX("<li><a href='%R/wiki_rules'>Fossil wiki format</a></li>");
1219 CX("<li><a href='%R/md_rules'>Markdown format</a></li>");
1220
--- src/wiki.c
+++ src/wiki.c
@@ -1112,27 +1112,31 @@
1112 "title='Status message area. Double-click to clear them.'>"
1113 "Status messages will go here.</div>\n"
1114 /* will be moved into the tab container via JS */);
1115
1116 /* Main tab container... */
1117 CX("<div id='wikiedit-tabs' class='tab-container'>Loading...</div>");
1118 /* The .hidden class on the following tab elements is to help lessen
1119 the FOUC effect of the tabs before JS re-assembles them. */
1120
1121 /******* Page list *******/
1122 {
1123 CX("<div id='wikiedit-tab-pages' "
1124 "data-tab-parent='wikiedit-tabs' "
1125 "data-tab-label='Wiki Page List' "
1126 "class='hidden'"
1127 ">");
1128 CX("<div>Loading wiki pages list...</div>");
1129 CX("</div>"/*#wikiedit-tab-pages*/);
1130 }
1131
1132 /******* Content tab *******/
1133 {
1134 CX("<div id='wikiedit-tab-content' "
1135 "data-tab-parent='wikiedit-tabs' "
1136 "data-tab-label='Wiki Editor' "
1137 "class='hidden'"
1138 ">");
1139 CX("<div class='flex-container flex-row child-gap-small'>");
1140 CX("<span class='input-with-label'>"
1141 "<label>Mime type</label>");
1142 mimetype_option_menu(0);
@@ -1161,11 +1165,12 @@
1165 }
1166 /****** Preview tab ******/
1167 {
1168 CX("<div id='wikiedit-tab-preview' "
1169 "data-tab-parent='wikiedit-tabs' "
1170 "data-tab-label='Preview &amp; Save' "
1171 "class='hidden'"
1172 ">");
1173 CX("<div class='wikiedit-options flex-container flex-row'>");
1174 CX("<button id='btn-preview-refresh' "
1175 "data-f-preview-from='wikiContent' "
1176 /* ^^^ fossil.page[methodName]() OR text source elem ID,
@@ -1191,11 +1196,12 @@
1196
1197 /****** Diff tab ******/
1198 {
1199 CX("<div id='wikiedit-tab-diff' "
1200 "data-tab-parent='wikiedit-tabs' "
1201 "data-tab-label='Diff' "
1202 "class='hidden'"
1203 ">");
1204
1205 CX("<div class='wikiedit-options flex-container flex-row' "
1206 "id='wikiedit-tab-diff-buttons'>");
1207 CX("<button class='sbs'>Side-by-side</button>"
@@ -1209,11 +1215,12 @@
1215
1216 /****** The obligatory "Misc" tab ******/
1217 {
1218 CX("<div id='wikiedit-tab-misc' "
1219 "data-tab-parent='wikiedit-tabs' "
1220 "data-tab-label='Help, Attachments, etc.' "
1221 "class='hidden'"
1222 ">");
1223 CX("<h3>Wiki formatting rules</h3>");
1224 CX("<ul>");
1225 CX("<li><a href='%R/wiki_rules'>Fossil wiki format</a></li>");
1226 CX("<li><a href='%R/md_rules'>Markdown format</a></li>");
1227

Keyboard Shortcuts

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