Fossil

Check-in [8de6b9084a]
Login

Check-in [8de6b9084a]

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

Overview
Comment:Added a tiny margin above the forum expand/collapse button. Docs and minor cleanups to the new forum JS code. Added a disabled, but potentially interesting, long-press handler in the forum code to toggle expand/collapse.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: 8de6b9084a733e3539d13ea3ad8629fc65546ba91bc7136b2b223b54bba9523b
User & Date: stephan 2020-07-09 20:39:31.095
Context
2020-07-09
20:44
Add the "fossil bisect skip" command. ... (check-in: 9e7262b4e0 user: drh tags: trunk)
20:39
Added a tiny margin above the forum expand/collapse button. Docs and minor cleanups to the new forum JS code. Added a disabled, but potentially interesting, long-press handler in the forum code to toggle expand/collapse. ... (check-in: 8de6b9084a user: stephan tags: trunk)
19:09
Provide an "Expand" or "Collapse" button on long forum posts. The default threshold is 50em. ... (check-in: cd9cb4d24a user: drh tags: trunk)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/default.css.
︙︙
773
774
775
776
777
778
779

780
781
782
783
784
785
786

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: 50em;
  overflow: auto;
}
div.forumPostBody.expanded {
  max-height: initial;








>








773
774
775
776
777
778
779
780
781
782
783
784
785
786
787

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;
︙︙
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

(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);





|


|

|



>


>
>
>
|
>
>
|
|
>
|
<
>
>
|
<
>
>
>
>
>
>
>

>
>
>
>


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



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);