lambdaway :: viewing

6 | list | login |load

| |

_h1 viewing trees {sup ( with Kate Rose Morley )}
_p Using lambdatalk we rewrite a code created by [[Kate Rose Morley|https://iamkate.com/code/tree-views/]], found in [[HN|https://news.ycombinator.com/item?id=33667270]].

_p We get

{{tree}
 {li
  {details open
   {summary Giant planets}
   {ul
    {li {details close
      {summary Gas giants}
      {ul {li Jupiter} {li Saturn} 
    }}}   
    {li {details close
      {summary Ice giants}
      {ul {li Uranus} {li Neptune} 
    }}}
    {li {details open
      {summary foo bar baz}
      {ul {li one two} {li three four} {li five six} 
    }}}
 }}}
}

_p writing

{pre
'{{tree} 
 {li
  {details open
   {summary Giant planets}
   {ul
    {li {details close
      {summary Gas giants}
      {ul {li Jupiter}
          {li Saturn}
    }}}
    {li {details close
      {summary Ice giants}
      {ul {li Uranus}
          {li Neptune}
    }}}
    {li {details open
      {summary foo bar baz}
      {ul {li one two}
          {li three four}
          {li five six}
    }}}
 }}}
}
}

_p This code uses three lambdatalk functions

{pre
'{def tree ul {@ class="tree"}}
-> {def tree ul {@ class="tree"}}

'{def summary
 {lambda {:s}
  < summary>:s< /summary>}}  // spaces after "<" for display only
-> {def summary
 {lambda {:s}
  <summary>:s</summary>}}

'{def details
 {lambda {:flag :s}
  {if {W.equal? :flag open}
   then < details open> :s < /details>
   else < details> :s < /details>}}}
-> {def details
 {lambda {:flag :s}
  {if {W.equal? :flag open}
   then <details open> :s </details>
   else <details> :s </details>}}}
}

_p and these (very smart) CSS rules

{pre °° 
.tree{
  --spacing : 1.5rem;
  --radius  : 10px;
}

.tree li{
  display      : block;
  position     : relative;
  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree ul{
  margin-left  : calc(var(--radius) - var(--spacing));
  padding-left : 0;
}

.tree ul li{
  border-left : 2px solid #ddd;
}

.tree ul li:last-child{
  border-color : transparent;
}

.tree ul li::before{
  content      : '';
  display      : block;
  position     : absolute;
  top          : calc(var(--spacing) / -2);
  left         : -2px;
  width        : calc(var(--spacing) + 2px);
  height       : calc(var(--spacing) + 1px);
  border       : solid #ddd;
  border-width : 0 0 2px 2px;
}

.tree summary{
  display : block;
  cursor  : pointer;
}

.tree summary::marker,
.tree summary::-webkit-details-marker{
  display : none;
}

.tree summary:focus{
  outline : none;
}

.tree summary:focus-visible{
  outline : 1px dotted #000;
}

.tree li::after,
.tree summary::before{
  content       : '';
  display       : block;
  position      : absolute;
  top           : calc(var(--spacing) / 2 - var(--radius));
  left          : calc(var(--spacing) - var(--radius) - 1px);
  width         : calc(2 * var(--radius));
  height        : calc(2 * var(--radius));
  border-radius : 50%;
  background    : #ddd;
}

.tree summary::before{
  content     : '+';
  z-index     : 1;
  background  : #696;
  color       : #fff;
  line-height : calc(2 * var(--radius) - 2px);
  text-align  : center;
}

.tree details[open] > summary::before{
  content : '−';
}
°°}

_p See also [[https://www.naiveui.com/en-US/os-theme/components/tree|https://www.naiveui.com/en-US/os-theme/components/tree]].

{style 
.tree{
  --spacing : 1.5rem;
  --radius  : 10px;
}