Fossil

Check-in [a30a6db480]
Login

Check-in [a30a6db480]

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

Overview
Comment:Forum post collapse/expand: 1) Is now full width to balance visibility and mobile accessibility. 2) Use arrows (instead of words) to convey intent. 3) When collapsing, scroll the collapser widget to the top of the viewport so that the next post is in view (avoids manual scrolling back up). 4) double-click on a large post toggles expand/collapse (avoids scrolling when expanded).
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: a30a6db480ece85773abf8923db91a5b48e3c5fefe7b479b8ddb7d523c73d4d3
User & Date: stephan 2020-07-10 10:02:20.266
Context
2020-07-10
11:11
Ardoise skin: removed 'appearance' CSS attributes (non-standard and not supported by modern FF), reset textarea height from 32px to initial (otherwise forum and skin editor are next to useless), updated a couple light-on-lighter colors to make the forum more legible. ... (check-in: 78487dfc58 user: stephan tags: trunk)
10:02
Forum post collapse/expand: 1) Is now full width to balance visibility and mobile accessibility. 2) Use arrows (instead of words) to convey intent. 3) When collapsing, scroll the collapser widget to the top of the viewport so that the next post is in view (avoids manual scrolling back up). 4) double-click on a large post toggles expand/collapse (avoids scrolling when expanded). ... (check-in: a30a6db480 user: stephan tags: trunk)
2020-07-09
20:50
Improvements to bisect built-in documentation. No changes to code. ... (check-in: d4c45b50a9 user: drh tags: trunk)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/default.css.
︙︙
771
772
773
774
775
776
777
778
779
780
























781
782
783
784
785
786
787

  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;
  margin-top: 0.1em;
























}
div.forumPostBody{
  max-height: 50em;
  overflow: auto;
}
div.forumPostBody.expanded {
  max-height: initial;








|
|
|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>








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

  flex-direction: column;
}
div.forumHier > div > form,
div.forumTime > div > form,
div.forumHierRoot > div > form {
  margin: 0.5em 0;
}
.forum-post-collapser {
  font-size: 0.8em;
  margin-top: 0.2em;
  padding: 0;
  height: 1.75em;
  line-height: 1.75em;
  /* ^^^ Those sizes are finely tuned for the current selection of
     arrow characters. If those change, these should, too. Remember that
     FF/Chrome simply do not agree on alignment with most values :/.  */
  border-width: 1px;
  border-style: solid;
  border-radius: 0.25em;
  opacity: 0.8;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.forum-post-collapser > span {
  margin: 0 1em 0 1em;
  vertical-align: middle;
}
.forum-post-collapser.expanded > span::before {
  content: "⇡⇡⇡" /*reminder: FF/Chrome cannot agree on alignment of ⮝*/;
}
.forum-post-collapser:not(.expanded) > span::before {
  content: "⇣⇣⇣";
}
div.forumPostBody{
  max-height: 50em;
  overflow: auto;
}
div.forumPostBody.expanded {
  max-height: initial;
︙︙
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50





51
52
53
54
55


56
57
58

59
60
61
62

(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(btn, contentElem){
      return function(ev){
        if(ev) ev.preventDefault();
        const isExpanded = D.hasClass(contentElem,'expanded');
        btn.innerText = isExpanded ? 'Expand...' : 'Collapse';
        contentElem.classList.toggle('expanded');

        return false;
      };
    };
    /** Install an event handler on element e which calls the given
        callback if the user presses the element for a brief period
        (time is defined a few lines down from here). */
    const addLongpressHandler = function(e, callback){
      const longPressTime = 650 /*ms*/;
      var timer;
      const clearTimer = function(){
        if(timer){
          clearTimeout(timer);
          timer = undefined;
        }
      };
      e.addEventListener('mousedown', function(ev){
        timer = setTimeout(function(){
          clearTimer();
          callback();
        }, longPressTime);
      }, false);
      e.addEventListener('mouseup', clearTimer, false);
      e.addEventListener('mouseout', clearTimer, false);
    };
    /* Adds an Expand/Collapse toggle to all div.forumPostBody
       elements which are deemed "too large" (those for which
       scrolling is currently activated because they are taller than
       their max-height). */
    document.querySelectorAll(
      'div.forumHier, div.forumTime, div.forumHierRoot'
    ).forEach(function(forumPostWrapper){
      const content = forumPostWrapper.querySelector('div.forumPostBody');
      if(!content || !scrollbarIsVisible(content)) return;
      const button = D.button('Expand...'),
            btnEventHandler = getButtonHandler(button, content);
      button.classList.add('forum-post-collapser');
      button.addEventListener('click', btnEventHandler, false);





      if(content.nextSibling){
        forumPostWrapper.insertBefore(button, content.nextSibling);
      }else{
        forumPostWrapper.appendChild(button);
      }


      // uncomment to enable long-press expand/collapse toggle:
      // addLongpressHandler(content, btnEventHandler);
      // It may interfere with default actions on mobile platforms, though.

    });
  })/*onload callback*/;
  
})(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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

46
47
48
49
50
51

(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;
    /* Returns an event handler which implements the post expand/collapse toggle
       on contentElem when the given widget is activated. */
    const getWidgetHandler = function(widget, contentElem){
      return function(ev){
        if(ev) ev.preventDefault();
        const wasExpanded = widget.classList.contains('expanded');
        widget.classList.toggle('expanded');
        contentElem.classList.toggle('expanded');
        if(wasExpanded) widget.scrollIntoView();
        return false;
      };
    };





















    /* Adds an Expand/Collapse toggle to all div.forumPostBody
       elements which are deemed "too large" (those for which
       scrolling is currently activated because they are taller than
       their max-height). */
    document.querySelectorAll(
      'div.forumHier, div.forumTime, div.forumHierRoot'
    ).forEach(function(forumPostWrapper){
      const content = forumPostWrapper.querySelector('div.forumPostBody');
      if(!content || !scrollbarIsVisible(content)) return;
      const widget = D.div(),
            widgetEventHandler = getWidgetHandler(widget, content);
      widget.classList.add('forum-post-collapser');
      widget.addEventListener('click', widgetEventHandler, false);
      /** Append 3 children, which CSS will evenly space across the
          widget. This improves visibility over having the label
          in only the left, right, or center. */
      var i = 0;
      for( ; i < 3; ++i ) D.append(widget, D.span());
      if(content.nextSibling){
        forumPostWrapper.insertBefore(widget, content.nextSibling);
      }else{
        forumPostWrapper.appendChild(widget);
      }
      /** A double-click toggle will select "the current word" on the
          post, which is minorly annoying but otherwise harmless. Such
          a toggle has proven convenient on "excessive" posts,

          though. */
      content.addEventListener('dblclick', widgetEventHandler);
    });
  })/*onload callback*/;
  
})(window.fossil);