Fossil

Check-in [eb392f9719]
Login

Check-in [eb392f9719]

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

Overview
Comment: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).
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | forum-expand-poc
Files: files | file ages | folders
SHA3-256: eb392f97191affe5b031c6e3895298644118460e22f14ffec45a90447b97fad9
User & Date: stephan 2020-07-09 18:31:24.727
Context
2020-07-09
19:09
Provide an "Expand" or "Collapse" button on long forum posts. The default threshold is 50em. ... (check-in: cd9cb4d24a user: drh tags: trunk)
18:31
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). ... (Closed-Leaf check-in: eb392f9719 user: stephan tags: forum-expand-poc)
18:06
For expanded view, use max-height:initial instead of some arbitrarily large value. That will effectively disable max-height. Change the pointer for the expand toggle to 'cursor'. ... (check-in: c824d1dc3e user: stephan tags: forum-expand-poc)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/default.css.
︙︙
766
767
768
769
770
771
772








773
774
775
776
777
778



779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815

  padding-right: 1ex;
  margin-top: 1ex;
}
div.forumHier, div.forumTime, div.forumHierRoot {
  display: flex;
  flex-direction: column;
}








div.forumPostBody {
  max-height: 20em /* Posts which overflow this value get an
                      Expand/Collapse toggle injected at page-load.
                      It's currently intentionally set low for
                      demonstration purposes. */;
  overflow: auto;



}
div.forumSel {
  background-color: #cef;
}
div.forumObs {
  color: #bbb;
}

input[type=checkbox].forum-post-collapser {
  opacity: 0;
  position: absolute;
  z-index: -1;
}
input[type=checkbox].forum-post-collapser:checked ~ label.forum-post-collapser::before {
  content: "Collapse";
}
input[type=checkbox].forum-post-collapser:not(:checked) ~ label.forum-post-collapser::before {
  content: "Expand";
}
label.forum-post-collapser {
  align-self: flex-start;
  padding: 0.1em 0.5em;
  border: 1px outset;
  border-radius: 0.25em;
  cursor: pointer;
}
input[type=checkbox].forum-post-collapser:checked ~ div.forumPostBody {
  max-height: initial;
}

#capabilitySummary {
  text-align: center;
}
#capabilitySummary td {
  padding-left: 3ex;
  padding-right: 3ex;
}








>
>
>
>
>
>
>
>
|





>
>
>








<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<








766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797






















798
799
800
801
802
803
804

  padding-right: 1ex;
  margin-top: 1ex;
}
div.forumHier, div.forumTime, div.forumHierRoot {
  display: flex;
  flex-direction: column;
}
div.forumHier > div > form,
div.forumTime > div > form,
div.forumHierRoot > div > form {
  margin: 0.5em 0;
}
button.forum-post-collapser {
  align-self: flex-start;
}
div.forumPostBody{
  max-height: 20em /* Posts which overflow this value get an
                      Expand/Collapse toggle injected at page-load.
                      It's currently intentionally set low for
                      demonstration purposes. */;
  overflow: auto;
}
div.forumPostBody.expanded {
  max-height: initial;
}
div.forumSel {
  background-color: #cef;
}
div.forumObs {
  color: #bbb;
}























#capabilitySummary {
  text-align: center;
}
#capabilitySummary td {
  padding-left: 3ex;
  padding-right: 3ex;
}
︙︙
Changes to src/forum.c.
︙︙
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517

        zMimetype = pPost->zMimetype;
      }
      forum_render(0, zMimetype, pPost->zWiki, 0, 1);
    }
    if( g.perm.WrForum && p->pLeaf==0 ){
      int sameUser = login_is_individual()
                     && fossil_strcmp(pPost->zUser, g.zLogin)==0;
      @ <p><form action="%R/forumedit" method="POST">
      @ <input type="hidden" name="fpid" value="%s(p->zUuid)">
      if( !isPrivate ){
        /* Reply and Edit are only available if the post has already
        ** been approved */
        @ <input type="submit" name="reply" value="Reply">
        if( g.perm.Admin || sameUser ){
          @ <input type="submit" name="edit" value="Edit">
          @ <input type="submit" name="nullout" value="Delete">
        }
      }else if( g.perm.ModForum ){
        /* Provide moderators with moderation buttons for posts that
        ** are pending moderation */
        @ <input type="submit" name="approve" value="Approve">
        @ <input type="submit" name="reject" value="Reject">
        generateTrustControls(pPost);
      }else if( sameUser ){
        /* A post that is pending moderation can be deleted by the
        ** person who originally submitted the post */
        @ <input type="submit" name="reject" value="Delete">
      }
      @ </form></p>
    }
    manifest_destroy(pPost);
    @ </div>
  }

  /* Undocumented "threadtable" query parameter causes thread table
  ** to be displayed for debugging purposes.








|




















|








482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517

        zMimetype = pPost->zMimetype;
      }
      forum_render(0, zMimetype, pPost->zWiki, 0, 1);
    }
    if( g.perm.WrForum && p->pLeaf==0 ){
      int sameUser = login_is_individual()
                     && fossil_strcmp(pPost->zUser, g.zLogin)==0;
      @ <div><form action="%R/forumedit" method="POST">
      @ <input type="hidden" name="fpid" value="%s(p->zUuid)">
      if( !isPrivate ){
        /* Reply and Edit are only available if the post has already
        ** been approved */
        @ <input type="submit" name="reply" value="Reply">
        if( g.perm.Admin || sameUser ){
          @ <input type="submit" name="edit" value="Edit">
          @ <input type="submit" name="nullout" value="Delete">
        }
      }else if( g.perm.ModForum ){
        /* Provide moderators with moderation buttons for posts that
        ** are pending moderation */
        @ <input type="submit" name="approve" value="Approve">
        @ <input type="submit" name="reject" value="Reject">
        generateTrustControls(pPost);
      }else if( sameUser ){
        /* A post that is pending moderation can be deleted by the
        ** person who originally submitted the post */
        @ <input type="submit" name="reject" value="Delete">
      }
      @ </form></div>
    }
    manifest_destroy(pPost);
    @ </div>
  }

  /* Undocumented "threadtable" query parameter causes thread table
  ** to be displayed for debugging purposes.
︙︙
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

    }else{
      forum_render(0, bRawMode?"text/plain":pPost->zMimetype, pPost->zWiki,
                   0, 1);
    }
    if( g.perm.WrForum && p->pLeaf==0 ){
      int sameUser = login_is_individual()
                     && fossil_strcmp(pPost->zUser, g.zLogin)==0;
      @ <p><form action="%R/forumedit" method="POST">
      @ <input type="hidden" name="fpid" value="%s(p->zUuid)">
      if( !isPrivate ){
        /* Reply and Edit are only available if the post has already
        ** been approved */
        @ <input type="submit" name="reply" value="Reply">
        if( g.perm.Admin || sameUser ){
          @ <input type="submit" name="edit" value="Edit">
          @ <input type="submit" name="nullout" value="Delete">
        }
      }else if( g.perm.ModForum ){
        /* Provide moderators with moderation buttons for posts that
        ** are pending moderation */
        @ <input type="submit" name="approve" value="Approve">
        @ <input type="submit" name="reject" value="Reject">
        generateTrustControls(pPost);
      }else if( sameUser ){
        /* A post that is pending moderation can be deleted by the
        ** person who originally submitted the post */
        @ <input type="submit" name="reject" value="Delete">
      }
      @ </form></p>
    }
    manifest_destroy(pPost);
    @ </div>
  }
  forumthread_delete(pThread);
}









|




















|








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

    }else{
      forum_render(0, bRawMode?"text/plain":pPost->zMimetype, pPost->zWiki,
                   0, 1);
    }
    if( g.perm.WrForum && p->pLeaf==0 ){
      int sameUser = login_is_individual()
                     && fossil_strcmp(pPost->zUser, g.zLogin)==0;
      @ <div><form action="%R/forumedit" method="POST">
      @ <input type="hidden" name="fpid" value="%s(p->zUuid)">
      if( !isPrivate ){
        /* Reply and Edit are only available if the post has already
        ** been approved */
        @ <input type="submit" name="reply" value="Reply">
        if( g.perm.Admin || sameUser ){
          @ <input type="submit" name="edit" value="Edit">
          @ <input type="submit" name="nullout" value="Delete">
        }
      }else if( g.perm.ModForum ){
        /* Provide moderators with moderation buttons for posts that
        ** are pending moderation */
        @ <input type="submit" name="approve" value="Approve">
        @ <input type="submit" name="reject" value="Reject">
        generateTrustControls(pPost);
      }else if( sameUser ){
        /* A post that is pending moderation can be deleted by the
        ** person who originally submitted the post */
        @ <input type="submit" name="reject" value="Delete">
      }
      @ </form></div>
    }
    manifest_destroy(pPost);
    @ </div>
  }
  forumthread_delete(pThread);
}
︙︙
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751

    sameUser = notAnon && fossil_strcmp(pPost->zUser, g.zLogin)==0;
    if( isPrivate && !g.perm.ModForum && !sameUser ){
      @ <p><span class="modpending">Awaiting Moderator Approval</span></p>
    }else{
      forum_render(0, pPost->zMimetype, pPost->zWiki, 0, 1);
    }
    if( g.perm.WrForum ){
      @ <p><form action="%R/forumedit" method="POST">
      @ <input type="hidden" name="fpid" value="%s(zUuid)">
      if( !isPrivate ){
        /* Reply and Edit are only available if the post has already
        ** been approved */
        @ <input type="submit" name="reply" value="Reply">
        if( g.perm.Admin || sameUser ){
          @ <input type="submit" name="edit" value="Edit">
          @ <input type="submit" name="nullout" value="Delete">
        }
      }else if( g.perm.ModForum ){
        /* Provide moderators with moderation buttons for posts that
        ** are pending moderation */
        @ <input type="submit" name="approve" value="Approve">
        @ <input type="submit" name="reject" value="Reject">
        generateTrustControls(pPost);
      }else if( sameUser ){
        /* A post that is pending moderation can be deleted by the
        ** person who originally submitted the post */
        @ <input type="submit" name="reject" value="Delete">
      }
      @ </form></p>
    }
    manifest_destroy(pPost);
    @ </div>
  }
  forumthread_delete(pThread);
  return target;
}








|




















|








716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751

    sameUser = notAnon && fossil_strcmp(pPost->zUser, g.zLogin)==0;
    if( isPrivate && !g.perm.ModForum && !sameUser ){
      @ <p><span class="modpending">Awaiting Moderator Approval</span></p>
    }else{
      forum_render(0, pPost->zMimetype, pPost->zWiki, 0, 1);
    }
    if( g.perm.WrForum ){
      @ <div><form action="%R/forumedit" method="POST">
      @ <input type="hidden" name="fpid" value="%s(zUuid)">
      if( !isPrivate ){
        /* Reply and Edit are only available if the post has already
        ** been approved */
        @ <input type="submit" name="reply" value="Reply">
        if( g.perm.Admin || sameUser ){
          @ <input type="submit" name="edit" value="Edit">
          @ <input type="submit" name="nullout" value="Delete">
        }
      }else if( g.perm.ModForum ){
        /* Provide moderators with moderation buttons for posts that
        ** are pending moderation */
        @ <input type="submit" name="approve" value="Approve">
        @ <input type="submit" name="reject" value="Reject">
        generateTrustControls(pPost);
      }else if( sameUser ){
        /* A post that is pending moderation can be deleted by the
        ** person who originally submitted the post */
        @ <input type="submit" name="reject" value="Delete">
      }
      @ </form></div>
    }
    manifest_destroy(pPost);
    @ </div>
  }
  forumthread_delete(pThread);
  return target;
}
︙︙
Changes to src/fossil.page.forumpost.js. 
1
2
3
4
5
6
7








8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

(function(F/*the fossil object*/){
  "use strict";
  /* JS code for /forumpage and friends. Requires fossil.dom. */
  const P = fossil.page, D = fossil.dom;
 
  F.onPageLoad(function(){
    const scrollbarIsVisible = (e)=>e.scrollHeight > e.clientHeight;








    const doCollapser = function(forumPostWrapper){
      const content = forumPostWrapper.querySelector('div.forumPostBody');
      if(!scrollbarIsVisible(content)) return;
      const fid = forumPostWrapper.getAttribute('id');
      const cb = D.input('checkbox'), lbl = D.label(),
            cbId = fid+'-expand';
      D.addClass([cb,lbl], 'forum-post-collapser');
      cb.setAttribute('id',cbId);
      lbl.setAttribute('for', cbId)
      forumPostWrapper.insertBefore(cb, content);
      forumPostWrapper.insertBefore(lbl, content);
    };
    document.querySelectorAll(
      'div.forumHier, div.forumTime, div.forumHierRoot'
    ).forEach(doCollapser)
  });
  
})(window.fossil);








>
>
>
>
>
>
>
>



<
<
|
|
<
<
|
|








1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18


19
20


21
22
23
24
25
26
27
28
29

(function(F/*the fossil object*/){
  "use strict";
  /* JS code for /forumpage and friends. Requires fossil.dom. */
  const P = fossil.page, D = fossil.dom;
 
  F.onPageLoad(function(){
    const scrollbarIsVisible = (e)=>e.scrollHeight > e.clientHeight;
    const getButtonHandler = function(contentElem){
      return function(ev){
        const btn = ev.target;
        const isExpanded = D.hasClass(contentElem,'expanded');
        btn.innerText = isExpanded ? 'Expand...' : 'Collapse';
        contentElem.classList.toggle('expanded');
      };
    };
    const doCollapser = function(forumPostWrapper){
      const content = forumPostWrapper.querySelector('div.forumPostBody');
      if(!scrollbarIsVisible(content)) return;


      const button = D.button('Expand...');
      button.classList.add('forum-post-collapser');


      button.addEventListener('click', getButtonHandler(content), false);
      forumPostWrapper.insertBefore(button, content.nextSibling);
    };
    document.querySelectorAll(
      'div.forumHier, div.forumTime, div.forumHierRoot'
    ).forEach(doCollapser)
  });
  
})(window.fossil);