Fossil SCM

Moved expand/collapse toggle to the bottom of the post, per forum feedback. That required changing it to a button because of CSS limitations. Fixed a few mis-used P tags in the FORM part of each post (P cannot hold a FORM).

stephan 2020-07-09 18:31 forum-expand-poc
Commit eb392f97191affe5b031c6e3895298644118460e22f14ffec45a90447b97fad9
Parent c824d1dc3e1c3fd…
3 files changed +12 -23 +6 -6 +12 -8
~ src/default.css ~ src/forum.c ~ src/fossil.page.forumpost.js
M src/default.css
+12 -23
--- src/default.css
+++ src/default.css
@@ -768,46 +768,35 @@
768768
 }
769769
 div.forumHier, div.forumTime, div.forumHierRoot {
770770
 display: flex;
771771
 flex-direction: column;
772772
 }
773
-div.forumPostBody {
773
+div.forumHier > div > form,
774
+div.forumTime > div > form,
775
+div.forumHierRoot > div > form {
776
+ margin: 0.5em 0;
777
+}
778
+button.forum-post-collapser {
779
+ align-self: flex-start;
780
+}
781
+div.forumPostBody{
774782
 max-height: 20em /* Posts which overflow this value get an
775783
 Expand/Collapse toggle injected at page-load.
776784
 It's currently intentionally set low for
777785
 demonstration purposes. */;
778786
 overflow: auto;
787
+}
788
+div.forumPostBody.expanded {
789
+ max-height: initial;
779790
 }
780791
 div.forumSel {
781792
 background-color: #cef;
782793
 }
783794
 div.forumObs {
784795
 color: #bbb;
785796
 }
786797
787
-input[type=checkbox].forum-post-collapser {
788
- opacity: 0;
789
- position: absolute;
790
- z-index: -1;
791
-}
792
-input[type=checkbox].forum-post-collapser:checked ~ label.forum-post-collapser::before {
793
- content: "Collapse";
794
-}
795
-input[type=checkbox].forum-post-collapser:not(:checked) ~ label.forum-post-collapser::before {
796
- content: "Expand";
797
-}
798
-label.forum-post-collapser {
799
- align-self: flex-start;
800
- padding: 0.1em 0.5em;
801
- border: 1px outset;
802
- border-radius: 0.25em;
803
- cursor: pointer;
804
-}
805
-input[type=checkbox].forum-post-collapser:checked ~ div.forumPostBody {
806
- max-height: initial;
807
-}
808
-
809798
 #capabilitySummary {
810799
 text-align: center;
811800
 }
812801
 #capabilitySummary td {
813802
 padding-left: 3ex;
814803
--- src/default.css
+++ src/default.css
@@ -768,46 +768,35 @@
768 }
769 div.forumHier, div.forumTime, div.forumHierRoot {
770 display: flex;
771 flex-direction: column;
772 }
773 div.forumPostBody {
 
 
 
 
 
 
 
 
774 max-height: 20em /* Posts which overflow this value get an
775 Expand/Collapse toggle injected at page-load.
776 It's currently intentionally set low for
777 demonstration purposes. */;
778 overflow: auto;
 
 
 
779 }
780 div.forumSel {
781 background-color: #cef;
782 }
783 div.forumObs {
784 color: #bbb;
785 }
786
787 input[type=checkbox].forum-post-collapser {
788 opacity: 0;
789 position: absolute;
790 z-index: -1;
791 }
792 input[type=checkbox].forum-post-collapser:checked ~ label.forum-post-collapser::before {
793 content: "Collapse";
794 }
795 input[type=checkbox].forum-post-collapser:not(:checked) ~ label.forum-post-collapser::before {
796 content: "Expand";
797 }
798 label.forum-post-collapser {
799 align-self: flex-start;
800 padding: 0.1em 0.5em;
801 border: 1px outset;
802 border-radius: 0.25em;
803 cursor: pointer;
804 }
805 input[type=checkbox].forum-post-collapser:checked ~ div.forumPostBody {
806 max-height: initial;
807 }
808
809 #capabilitySummary {
810 text-align: center;
811 }
812 #capabilitySummary td {
813 padding-left: 3ex;
814
--- src/default.css
+++ src/default.css
@@ -768,46 +768,35 @@
768 }
769 div.forumHier, div.forumTime, div.forumHierRoot {
770 display: flex;
771 flex-direction: column;
772 }
773 div.forumHier > div > form,
774 div.forumTime > div > form,
775 div.forumHierRoot > div > form {
776 margin: 0.5em 0;
777 }
778 button.forum-post-collapser {
779 align-self: flex-start;
780 }
781 div.forumPostBody{
782 max-height: 20em /* Posts which overflow this value get an
783 Expand/Collapse toggle injected at page-load.
784 It's currently intentionally set low for
785 demonstration purposes. */;
786 overflow: auto;
787 }
788 div.forumPostBody.expanded {
789 max-height: initial;
790 }
791 div.forumSel {
792 background-color: #cef;
793 }
794 div.forumObs {
795 color: #bbb;
796 }
797
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
798 #capabilitySummary {
799 text-align: center;
800 }
801 #capabilitySummary td {
802 padding-left: 3ex;
803
M src/forum.c
+6 -6
--- src/forum.c
+++ src/forum.c
@@ -484,11 +484,11 @@
484484
 forum_render(0, zMimetype, pPost->zWiki, 0, 1);
485485
 }
486486
 if( g.perm.WrForum && p->pLeaf==0 ){
487487
 int sameUser = login_is_individual()
488488
 && fossil_strcmp(pPost->zUser, g.zLogin)==0;
489
- @ <p><form action="%R/forumedit" method="POST">
489
+ @ <div><form action="%R/forumedit" method="POST">
490490
 @ <input type="hidden" name="fpid" value="%s(p->zUuid)">
491491
 if( !isPrivate ){
492492
 /* Reply and Edit are only available if the post has already
493493
 ** been approved */
494494
 @ <input type="submit" name="reply" value="Reply">
@@ -505,11 +505,11 @@
505505
 }else if( sameUser ){
506506
 /* A post that is pending moderation can be deleted by the
507507
 ** person who originally submitted the post */
508508
 @ <input type="submit" name="reject" value="Delete">
509509
 }
510
- @ </form></p>
510
+ @ </form></div>
511511
 }
512512
 manifest_destroy(pPost);
513513
 @ </div>
514514
 }
515515
@@ -592,11 +592,11 @@
592592
 0, 1);
593593
 }
594594
 if( g.perm.WrForum && p->pLeaf==0 ){
595595
 int sameUser = login_is_individual()
596596
 && fossil_strcmp(pPost->zUser, g.zLogin)==0;
597
- @ <p><form action="%R/forumedit" method="POST">
597
+ @ <div><form action="%R/forumedit" method="POST">
598598
 @ <input type="hidden" name="fpid" value="%s(p->zUuid)">
599599
 if( !isPrivate ){
600600
 /* Reply and Edit are only available if the post has already
601601
 ** been approved */
602602
 @ <input type="submit" name="reply" value="Reply">
@@ -613,11 +613,11 @@
613613
 }else if( sameUser ){
614614
 /* A post that is pending moderation can be deleted by the
615615
 ** person who originally submitted the post */
616616
 @ <input type="submit" name="reject" value="Delete">
617617
 }
618
- @ </form></p>
618
+ @ </form></div>
619619
 }
620620
 manifest_destroy(pPost);
621621
 @ </div>
622622
 }
623623
 forumthread_delete(pThread);
@@ -718,11 +718,11 @@
718718
 @ <p><span class="modpending">Awaiting Moderator Approval</span></p>
719719
 }else{
720720
 forum_render(0, pPost->zMimetype, pPost->zWiki, 0, 1);
721721
 }
722722
 if( g.perm.WrForum ){
723
- @ <p><form action="%R/forumedit" method="POST">
723
+ @ <div><form action="%R/forumedit" method="POST">
724724
 @ <input type="hidden" name="fpid" value="%s(zUuid)">
725725
 if( !isPrivate ){
726726
 /* Reply and Edit are only available if the post has already
727727
 ** been approved */
728728
 @ <input type="submit" name="reply" value="Reply">
@@ -739,11 +739,11 @@
739739
 }else if( sameUser ){
740740
 /* A post that is pending moderation can be deleted by the
741741
 ** person who originally submitted the post */
742742
 @ <input type="submit" name="reject" value="Delete">
743743
 }
744
- @ </form></p>
744
+ @ </form></div>
745745
 }
746746
 manifest_destroy(pPost);
747747
 @ </div>
748748
 }
749749
 forumthread_delete(pThread);
750750
--- src/forum.c
+++ src/forum.c
@@ -484,11 +484,11 @@
484 forum_render(0, zMimetype, pPost->zWiki, 0, 1);
485 }
486 if( g.perm.WrForum && p->pLeaf==0 ){
487 int sameUser = login_is_individual()
488 && fossil_strcmp(pPost->zUser, g.zLogin)==0;
489 @ <p><form action="%R/forumedit" method="POST">
490 @ <input type="hidden" name="fpid" value="%s(p->zUuid)">
491 if( !isPrivate ){
492 /* Reply and Edit are only available if the post has already
493 ** been approved */
494 @ <input type="submit" name="reply" value="Reply">
@@ -505,11 +505,11 @@
505 }else if( sameUser ){
506 /* A post that is pending moderation can be deleted by the
507 ** person who originally submitted the post */
508 @ <input type="submit" name="reject" value="Delete">
509 }
510 @ </form></p>
511 }
512 manifest_destroy(pPost);
513 @ </div>
514 }
515
@@ -592,11 +592,11 @@
592 0, 1);
593 }
594 if( g.perm.WrForum && p->pLeaf==0 ){
595 int sameUser = login_is_individual()
596 && fossil_strcmp(pPost->zUser, g.zLogin)==0;
597 @ <p><form action="%R/forumedit" method="POST">
598 @ <input type="hidden" name="fpid" value="%s(p->zUuid)">
599 if( !isPrivate ){
600 /* Reply and Edit are only available if the post has already
601 ** been approved */
602 @ <input type="submit" name="reply" value="Reply">
@@ -613,11 +613,11 @@
613 }else if( sameUser ){
614 /* A post that is pending moderation can be deleted by the
615 ** person who originally submitted the post */
616 @ <input type="submit" name="reject" value="Delete">
617 }
618 @ </form></p>
619 }
620 manifest_destroy(pPost);
621 @ </div>
622 }
623 forumthread_delete(pThread);
@@ -718,11 +718,11 @@
718 @ <p><span class="modpending">Awaiting Moderator Approval</span></p>
719 }else{
720 forum_render(0, pPost->zMimetype, pPost->zWiki, 0, 1);
721 }
722 if( g.perm.WrForum ){
723 @ <p><form action="%R/forumedit" method="POST">
724 @ <input type="hidden" name="fpid" value="%s(zUuid)">
725 if( !isPrivate ){
726 /* Reply and Edit are only available if the post has already
727 ** been approved */
728 @ <input type="submit" name="reply" value="Reply">
@@ -739,11 +739,11 @@
739 }else if( sameUser ){
740 /* A post that is pending moderation can be deleted by the
741 ** person who originally submitted the post */
742 @ <input type="submit" name="reject" value="Delete">
743 }
744 @ </form></p>
745 }
746 manifest_destroy(pPost);
747 @ </div>
748 }
749 forumthread_delete(pThread);
750
--- src/forum.c
+++ src/forum.c
@@ -484,11 +484,11 @@
484 forum_render(0, zMimetype, pPost->zWiki, 0, 1);
485 }
486 if( g.perm.WrForum && p->pLeaf==0 ){
487 int sameUser = login_is_individual()
488 && fossil_strcmp(pPost->zUser, g.zLogin)==0;
489 @ <div><form action="%R/forumedit" method="POST">
490 @ <input type="hidden" name="fpid" value="%s(p->zUuid)">
491 if( !isPrivate ){
492 /* Reply and Edit are only available if the post has already
493 ** been approved */
494 @ <input type="submit" name="reply" value="Reply">
@@ -505,11 +505,11 @@
505 }else if( sameUser ){
506 /* A post that is pending moderation can be deleted by the
507 ** person who originally submitted the post */
508 @ <input type="submit" name="reject" value="Delete">
509 }
510 @ </form></div>
511 }
512 manifest_destroy(pPost);
513 @ </div>
514 }
515
@@ -592,11 +592,11 @@
592 0, 1);
593 }
594 if( g.perm.WrForum && p->pLeaf==0 ){
595 int sameUser = login_is_individual()
596 && fossil_strcmp(pPost->zUser, g.zLogin)==0;
597 @ <div><form action="%R/forumedit" method="POST">
598 @ <input type="hidden" name="fpid" value="%s(p->zUuid)">
599 if( !isPrivate ){
600 /* Reply and Edit are only available if the post has already
601 ** been approved */
602 @ <input type="submit" name="reply" value="Reply">
@@ -613,11 +613,11 @@
613 }else if( sameUser ){
614 /* A post that is pending moderation can be deleted by the
615 ** person who originally submitted the post */
616 @ <input type="submit" name="reject" value="Delete">
617 }
618 @ </form></div>
619 }
620 manifest_destroy(pPost);
621 @ </div>
622 }
623 forumthread_delete(pThread);
@@ -718,11 +718,11 @@
718 @ <p><span class="modpending">Awaiting Moderator Approval</span></p>
719 }else{
720 forum_render(0, pPost->zMimetype, pPost->zWiki, 0, 1);
721 }
722 if( g.perm.WrForum ){
723 @ <div><form action="%R/forumedit" method="POST">
724 @ <input type="hidden" name="fpid" value="%s(zUuid)">
725 if( !isPrivate ){
726 /* Reply and Edit are only available if the post has already
727 ** been approved */
728 @ <input type="submit" name="reply" value="Reply">
@@ -739,11 +739,11 @@
739 }else if( sameUser ){
740 /* A post that is pending moderation can be deleted by the
741 ** person who originally submitted the post */
742 @ <input type="submit" name="reject" value="Delete">
743 }
744 @ </form></div>
745 }
746 manifest_destroy(pPost);
747 @ </div>
748 }
749 forumthread_delete(pThread);
750
M src/fossil.page.forumpost.js
+12 -8
--- src/fossil.page.forumpost.js
+++ src/fossil.page.forumpost.js
@@ -3,21 +3,25 @@
33
 /* JS code for /forumpage and friends. Requires fossil.dom. */
44
 const P = fossil.page, D = fossil.dom;
55
66
 F.onPageLoad(function(){
77
 const scrollbarIsVisible = (e)=>e.scrollHeight > e.clientHeight;
8
+ const getButtonHandler = function(contentElem){
9
+ return function(ev){
10
+ const btn = ev.target;
11
+ const isExpanded = D.hasClass(contentElem,'expanded');
12
+ btn.innerText = isExpanded ? 'Expand...' : 'Collapse';
13
+ contentElem.classList.toggle('expanded');
14
+ };
15
+ };
816
 const doCollapser = function(forumPostWrapper){
917
 const content = forumPostWrapper.querySelector('div.forumPostBody');
1018
 if(!scrollbarIsVisible(content)) return;
11
- const fid = forumPostWrapper.getAttribute('id');
12
- const cb = D.input('checkbox'), lbl = D.label(),
13
- cbId = fid+'-expand';
14
- D.addClass([cb,lbl], 'forum-post-collapser');
15
- cb.setAttribute('id',cbId);
16
- lbl.setAttribute('for', cbId)
17
- forumPostWrapper.insertBefore(cb, content);
18
- forumPostWrapper.insertBefore(lbl, content);
19
+ const button = D.button('Expand...');
20
+ button.classList.add('forum-post-collapser');
21
+ button.addEventListener('click', getButtonHandler(content), false);
22
+ forumPostWrapper.insertBefore(button, content.nextSibling);
1923
 };
2024
 document.querySelectorAll(
2125
 'div.forumHier, div.forumTime, div.forumHierRoot'
2226
 ).forEach(doCollapser)
2327
 });
2428
--- src/fossil.page.forumpost.js
+++ src/fossil.page.forumpost.js
@@ -3,21 +3,25 @@
3 /* JS code for /forumpage and friends. Requires fossil.dom. */
4 const P = fossil.page, D = fossil.dom;
5
6 F.onPageLoad(function(){
7 const scrollbarIsVisible = (e)=>e.scrollHeight > e.clientHeight;
 
 
 
 
 
 
 
 
8 const doCollapser = function(forumPostWrapper){
9 const content = forumPostWrapper.querySelector('div.forumPostBody');
10 if(!scrollbarIsVisible(content)) return;
11 const fid = forumPostWrapper.getAttribute('id');
12 const cb = D.input('checkbox'), lbl = D.label(),
13 cbId = fid+'-expand';
14 D.addClass([cb,lbl], 'forum-post-collapser');
15 cb.setAttribute('id',cbId);
16 lbl.setAttribute('for', cbId)
17 forumPostWrapper.insertBefore(cb, content);
18 forumPostWrapper.insertBefore(lbl, content);
19 };
20 document.querySelectorAll(
21 'div.forumHier, div.forumTime, div.forumHierRoot'
22 ).forEach(doCollapser)
23 });
24
--- src/fossil.page.forumpost.js
+++ src/fossil.page.forumpost.js
@@ -3,21 +3,25 @@
3 /* JS code for /forumpage and friends. Requires fossil.dom. */
4 const P = fossil.page, D = fossil.dom;
5
6 F.onPageLoad(function(){
7 const scrollbarIsVisible = (e)=>e.scrollHeight > e.clientHeight;
8 const getButtonHandler = function(contentElem){
9 return function(ev){
10 const btn = ev.target;
11 const isExpanded = D.hasClass(contentElem,'expanded');
12 btn.innerText = isExpanded ? 'Expand...' : 'Collapse';
13 contentElem.classList.toggle('expanded');
14 };
15 };
16 const doCollapser = function(forumPostWrapper){
17 const content = forumPostWrapper.querySelector('div.forumPostBody');
18 if(!scrollbarIsVisible(content)) return;
19 const button = D.button('Expand...');
20 button.classList.add('forum-post-collapser');
21 button.addEventListener('click', getButtonHandler(content), false);
22 forumPostWrapper.insertBefore(button, content.nextSibling);
 
 
 
 
23 };
24 document.querySelectorAll(
25 'div.forumHier, div.forumTime, div.forumHierRoot'
26 ).forEach(doCollapser)
27 });
28

Keyboard Shortcuts

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