Fossil

div.forumHier > div > form,
div.forumTime > div > form,
div.forumHierRoot > div > form {
  margin: 0.5em 0;
}
.forum-post-collapser {
  font-size: 0.8em;
  margin: 0 0 0.4em 0;
  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: 1px solid rgba(0, 0, 0, 0.1);

  border-radius: 0 0 0.5em 0.5em;
  border-color: rgba(0, 0, 0, 0.2);
  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.with-expander {
  display: flex;
  flex-direction: row;
  overflow: auto;
}
div.forumPostBody.with-expander:not(.expanded) > :first-child {
  overflow-y: hidden;
}
div.forumPostBody.with-expander > *:first-child {
  /* Main content DIV */
  overflow: auto;
}
div.forumPostBody.with-expander.expanded > *:first-child {
  margin-bottom: 0.5em /* try to suppress scroll bar */;
}
div.forumPostBody.with-expander > *:nth-child(2) {
  /* "Tap zone" for expansion of the post, sits to the right of the
     post's content. */
  min-width: 1.25em;
  max-width: 1.25em;
  /*for testing only:*//*background: magenta;*/
  margin: 0 0 0 0.2em /* leave a gap between this and the neighboring scrollbar */;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 0.1em;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 0;
  border-radius: 0 0.5em 0 0;
  border-color: rgba(0, 0, 0, 0.2);
  opacity: 0.8;
}
div.forumPostBody.with-expander > *:nth-child(2) > span:before {
  content: "⇣";
}
div.forumPostBody.with-expander.expanded > *:nth-child(2) > span:before {
  content: "⇡";
}
div.forumPostBody.expanded {
  max-height: initial;
}
div.forumPostBody.shrunken {
  /* When an expandable post is un-expanded, it is shrunkend down
     to this size instead of its original size. */

      return function(ev){
        if(ev) ev.preventDefault();
        const wasExpanded = widget.classList.contains('expanded');
        widget.classList.toggle('expanded');
        contentElem.classList.toggle('expanded');
        if(wasExpanded){
          contentElem.classList.add('shrunken');
          contentElem.parentElement.scrollIntoView({
            /* This is non-standard, but !(MSIE, Safari) supposedly support it:
               https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#Browser_compatibility
            */ behavior: 'smooth'
          });
        }else{
          contentElem.classList.remove('shrunken');
        }
        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 f(forumPostWrapper){
      const content = forumPostWrapper.querySelector('div.forumPostBody');
      if(!content || !scrollbarIsVisible(content)) return;
      const parent = content.parentElement,
            rightTapZone = D.div(),
            widget = D.div();
      /* Repopulates the rightTapZone with arrow indicators. Because
         of the wildly varying height of these elements, This has to
         be done dynamically at init time and upon collapse/expand. Will not
         work until the rightTapZone has been added to the DOM. */
      const refillTapZone = function f(){
        if(!f.baseTapIndicatorHeight){
          /* To figure out how often to place an arrow in the rightTapZone,
             we simply grab the first header element from the page and use
             its hight as our basis for calculation. */
          const h1 = document.querySelector('h1, h2');
          f.baseTapIndicatorHeight = h1.getBoundingClientRect().height;
        }
        D.clearElement(rightTapZone);
        var rtzHeight = parseInt(window.getComputedStyle(rightTapZone).height);
        do {
          D.append(rightTapZone, D.span());
          rtzHeight -= f.baseTapIndicatorHeight * 8;
        }while(rtzHeight>0);
      };
      const handlerStep1 = getWidgetHandler(widget, content);
      const widgetEventHandler = ()=>{ handlerStep1(); refillTapZone(); };
      content.classList.add('with-expander');
      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);
      }





      content.appendChild(rightTapZone);
      rightTapZone.addEventListener('click', widgetEventHandler, false);
      refillTapZone();
    });
  })/*onload callback*/;
  
})(window.fossil);