Revert "decouple logic and display (#287)" (#288)

This reverts commit 7bc4919.

Author: fabi1cazenave

code/stats-table.js code/collapsable-table.js

@@ -1,4 +1,4 @@
-class StatsTable extends HTMLElement {
+class CollapsableTable extends HTMLElement {
   maxLinesCollapsed = 12;
 
   // Elements built in constructor
@@ -19,6 +19,14 @@ class StatsTable extends HTMLElement {
     // Actually build the content of the element (+ remove the stupid tr)
     shadow.innerHTML = `
       <style>
+      /* Mostly copy-pasted from '/css/heatmap.css', with some ajustments */
+      h3 { border-bottom: 1px dotted; }
+
+      #header {
+        text-align: right;
+        margin-top: -1em;
+      }
+
       #wrapper {
         margin-bottom: 1em;
         display: flex;
@@ -40,25 +48,37 @@ class StatsTable extends HTMLElement {
       td:nth-child(2) { width: 4em; text-align: right; }
 
       button {
-        width: 20%;
-        height: 1.5em;
+        width: 30%;
         margin: auto;
         background-color: #88fa;
-        cursor: pointer;
-        clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
-      }
-      button.showLess {
-        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+        border: 1px solid black;
+        border-radius: 15px;
       }
       </style>
 
+      <h3> ${this.id} </h3>
       <!-- Using a style attribute on top of the stylesheet, as it is used by
            the button 'click' event-listner -->
       <div id='wrapper' style='max-height: ${this.maxHeightCollapsed}px;'></div>
-      <button style='display: none'></button>
+      <button style='display: none'> show more </button>
     `;
 
+    // If we find a 'small' element, then move it in a '#header' div instead of
+    // the '#wrapper' div. A 'slot' is probably better, but I can’t make it work
+    const smallElement = this.querySelector('small');
     const wrapper = shadow.getElementById('wrapper');
+    if (smallElement) {
+      // Placing the 'small' element in a wrapper div, otherwise the 'text-align'
+      // and 'margin-top' css properties don’t do anything.
+      const smallElementWrapper = document.createElement('div');
+      smallElementWrapper.id = 'header';
+      smallElementWrapper.appendChild(smallElement.cloneNode(true));
+
+      shadow.insertBefore(smallElementWrapper, wrapper);
+      // Remove the 'small' element from this.innerHTML, before moving that to shadow
+      smallElement.remove();
+    }
+
     wrapper.innerHTML = this.innerHTML;
     this.innerHTML = ''; // Remove original content
 
@@ -69,19 +89,19 @@ class StatsTable extends HTMLElement {
       const wrapper = shadow.getElementById('wrapper');
       if (wrapper.style.maxHeight == `${self.maxHeightCollapsed}px`) {
         wrapper.style.maxHeight = `${wrapper.children[0].offsetHeight}px`;
-        this.className = 'showLess';
+        this.innerText = 'show less';
       } else {
         wrapper.style.maxHeight = `${self.maxHeightCollapsed}px`;
-        this.className = '';
+        this.innerText = 'show more';
       }
     });
   }
 
-  updateTableData(tableSelector, values, precision) {
+  updateTableData(tableSelector, title, values, precision) {
     const table = this.shadowRoot.querySelector(tableSelector);
 
     table.innerHTML =
-      `<tr><th colspan='2'>${table.title}</td></tr>` +
+      `<tr><th colspan='2'>${title}</td></tr>` +
       Object.entries(values)
         .filter(([digram, freq]) => freq >= 10 ** -precision)
         .sort(([_, freq1], [__, freq2]) => freq2 - freq1)
@@ -95,5 +115,4 @@ class StatsTable extends HTMLElement {
       table.offsetHeight > this.maxHeightCollapsed ? 'block' : 'none';
   }
 }
-
-customElements.define('stats-table', StatsTable);
+customElements.define('collapsable-table', CollapsableTable);