improve css

dev/index.ts

@@ -6,14 +6,14 @@ import "../src/Ressource";
 import { IEvent } from "../src/Event";
 import dayjs from "dayjs";
 
+const container = document.createElement("div");
+document.body.appendChild(container);
 // TimeLine.extendStyle.push(new_css)
-const emptyTimeline: TimeLine = document.createElement(
-  "jc-timeline"
-) as TimeLine;
+const emptyTimeline: TimeLine = document.createElement("jc-timeline") as TimeLine;
 let title = document.createElement("h2");
 title.innerText = "Empty Timeline";
-document.body.appendChild(title);
-document.body.appendChild(emptyTimeline);
+container.appendChild(title);
+container.appendChild(emptyTimeline);
 emptyTimeline.setLegendUnitFormat("d", "dddd D MMMM");
 
 emptyTimeline.setAttribute("legendSpan", "2");
@@ -114,17 +114,15 @@ timeline.addEventListener("reorder-ressource", (e) => {
 
 title = document.createElement("h2");
 title.innerText = "Generic Timeline";
-document.body.appendChild(title);
-document.body.appendChild(timeline);
+container.appendChild(title);
+container.appendChild(timeline);
 
-const nestedTimeline: TimeLine = document.createElement(
-  "jc-timeline"
-) as TimeLine;
+const nestedTimeline: TimeLine = document.createElement("jc-timeline") as TimeLine;
 
 title = document.createElement("h2");
 title.innerText = "Multiple level Timeline";
-document.body.appendChild(title);
-document.body.appendChild(nestedTimeline);
+container.appendChild(title);
+container.appendChild(nestedTimeline);
 
 const ressources = Array(8)
   .fill(0)

lib/Timeline.js

@@ -349,13 +349,11 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
     _grabHeader(e) {
         const root = this.shadowRoot;
         if (root !== null) {
-            const gridContainer = root.querySelector(".jc-timeline-grid-container");
             const headerContainer = root.querySelector(".jc-timeline-grid-title-container");
             let lastPosX = e.clientX;
             const scroll = function (e) {
                 const scrollLeft = lastPosX - e.clientX;
-                headerContainer.scrollLeft += scrollLeft;
-                gridContainer.scrollLeft += scrollLeft;
+                headerContainer.scrollBy({ left: scrollLeft });
                 lastPosX = e.clientX;
             };
             const mouseUpListener = function (_e) {
@@ -701,16 +699,13 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
       <style>
         ${this.customStyle}
       </style>
-      <div class="jc-timeline-header">
-        <div
-          class="jc-timeline-rows-title"
-          style=${style_map_1.styleMap({
-            minWidth: this.ressourceWidth + "px",
-            width: this.ressourceWidth + "px",
+      <div
+        class="jc-timeline-header"
+        style=${style_map_1.styleMap({
+            "--width": this.ressourceWidth + "px",
         })}
-        >
-          ${this.rowsTitle}
-        </div>
+      >
+        <div class="jc-timeline-rows-title">${this.rowsTitle}</div>
         <horizontal-resizer @resize-x="${this._handleResizeX}"></horizontal-resizer>
         <div class="jc-timeline-grid-title-container">
           <table @mousedown="${this._grabHeader}" style="width:${nCol * this.slotWidth}px;">
@@ -725,10 +720,12 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
           </table>
         </div>
       </div>
-      <div class="jc-timeline-content">
+      <div
+        class="jc-timeline-content"
+        style="${style_map_1.styleMap({ "--width": this.ressourceWidth + "px" })}"
+      >
         <table
           class="jc-timeline-rows"
-          style="${style_map_1.styleMap({ "--width": this.ressourceWidth + "px" })}"
           @dragover="${(e) => e.preventDefault()}"
           @dragenter="${this._onRessourceDragEnter}"
           @dragleave="${this._onRessourceDragLeave}"

lib/styles/Timeline.style.js

@@ -25,11 +25,10 @@ exports.TimelineStyle = lit_element_1.css `
   .jc-timeline-rows-title,
   .jc-timeline-rows > tr > td {
     padding: 8px;
-    min-width: 40px;
     box-sizing: border-box;
   }
   .jc-timeline-rows > tr > td {
-    max-width: calc(var(--width) - 8px);
+    width: var(--width, 200px);
     padding: 0px;
     vertical-align: top;
   }
@@ -67,18 +66,21 @@ exports.TimelineStyle = lit_element_1.css `
     white-space: nowrap;
     border: 1px solid grey;
     border-style: solid none;
+    width: 100%;
   }
   .jc-timeline-rows,
   .jc-timeline-rows-title {
     height: inherit;
     width: var(--width, 200px);
-    overflow: hidden;
+    min-width: 40px;
+    overflow-x: hidden;
     border-collapse: collapse;
+    display: block;
   }
   .jc-timeline-grid-title-container,
   .jc-timeline-grid-container {
     position: relative;
-    width: 600px;
+    width: calc(100% - var(--width, 200px));
     display: block;
     overflow: hidden;
   }

lib/styles/Timeline.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.style.js","sourceRoot":"","sources":["../../src/styles/Timeline.style.ts"],"names":[],"mappings":";;;AAAA,6CAA6C;AAEhC,QAAA,aAAa,GAAc,iBAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyP1C,CAAC"}
+{"version":3,"file":"Timeline.style.js","sourceRoot":"","sources":["../../src/styles/Timeline.style.ts"],"names":[],"mappings":";;;AAAA,6CAA6C;AAEhC,QAAA,aAAa,GAAc,iBAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2P1C,CAAC"}

lib/utils/syncroScroll.js

@@ -4,9 +4,14 @@ function syncronizeElementsScrolling(elements, direction = "vh") {
     let activeScroller = null;
     const bSyncroV = direction.indexOf("v") > -1;
     const bSyncroH = direction.indexOf("h") > -1;
+    const setActive = function (e) {
+        activeScroller = e.target;
+    };
     const applyListener = function (element) {
-        element.addEventListener("mouseenter", function (e) {
-            activeScroller = e.target;
+        element.addEventListener("mouseenter", setActive);
+        element.addEventListener("mousedown", () => {
+            elements.forEach((e) => e.removeEventListener("mouseenter", setActive));
+            window.addEventListener("mouseup", () => elements.forEach((e) => e.addEventListener("mouseenter", setActive)));
         });
         element.addEventListener("scroll", function (e) {
             if (e.target !== activeScroller)

lib/utils/syncroScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"syncroScroll.js","sourceRoot":"","sources":["../../src/utils/syncroScroll.ts"],"names":[],"mappings":";;AAEA,SAAwB,2BAA2B,CACjD,QAAgC,EAChC,YAAgC,IAAI;IAEpC,IAAI,cAAc,GAAuB,IAAI,CAAC;IAC9C,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;IAC7C,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;IAC7C,MAAM,aAAa,GAAG,UAAU,OAAwB;QACtD,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,UAAU,CAAa;YAC5D,cAAc,GAAG,CAAC,CAAC,MAAqB,CAAC;QAC3C,CAAC,CAAC,CAAC;QACH,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAQ;YACnD,IAAI,CAAC,CAAC,MAAM,KAAK,cAAc;gBAAE,OAAO;YACxC,QAAQ,CAAC,OAAO,CAAC,UAAU,OAAO;gBAChC,IAAI,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,IAAI;oBAAE,OAAO;gBAClE,IAAI,QAAQ;oBAAE,OAAO,CAAC,SAAS,GAAG,cAAc,CAAC,SAAS,CAAC;gBAC3D,IAAI,QAAQ;oBAAE,OAAO,CAAC,UAAU,GAAG,cAAc,CAAC,UAAU,CAAC;YAC/D,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IACF,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;AAClC,CAAC;AArBD,8CAqBC"}
+{"version":3,"file":"syncroScroll.js","sourceRoot":"","sources":["../../src/utils/syncroScroll.ts"],"names":[],"mappings":";;AAEA,SAAwB,2BAA2B,CACjD,QAAgC,EAChC,YAAgC,IAAI;IAEpC,IAAI,cAAc,GAAuB,IAAI,CAAC;IAC9C,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;IAC7C,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,UAAU,CAAa;QACvC,cAAc,GAAG,CAAC,CAAC,MAAqB,CAAC;IAC3C,CAAC,CAAC;IACF,MAAM,aAAa,GAAG,UAAU,OAAwB;QACtD,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;QAClD,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,GAAG,EAAE;YACzC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC;YACxE,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,CACtC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CACrE,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAQ;YACnD,IAAI,CAAC,CAAC,MAAM,KAAK,cAAc;gBAAE,OAAO;YACxC,QAAQ,CAAC,OAAO,CAAC,UAAU,OAAO;gBAChC,IAAI,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,IAAI;oBAAE,OAAO;gBAClE,IAAI,QAAQ;oBAAE,OAAO,CAAC,SAAS,GAAG,cAAc,CAAC,SAAS,CAAC;gBAC3D,IAAI,QAAQ;oBAAE,OAAO,CAAC,UAAU,GAAG,cAAc,CAAC,UAAU,CAAC;YAC/D,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IACF,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;AAClC,CAAC;AA5BD,8CA4BC"}

src/Timeline.ts

@@ -444,15 +444,13 @@ class Timeline extends LitElement {
   private _grabHeader(e: MouseEvent): void {
     const root = this.shadowRoot;
     if (root !== null) {
-      const gridContainer = root.querySelector(".jc-timeline-grid-container") as HTMLBaseElement;
       const headerContainer = root.querySelector(
         ".jc-timeline-grid-title-container"
       ) as HTMLBaseElement;
       let lastPosX = e.clientX;
       const scroll = function (e: MouseEvent) {
         const scrollLeft = lastPosX - e.clientX;
-        headerContainer.scrollLeft += scrollLeft;
-        gridContainer.scrollLeft += scrollLeft;
+        headerContainer.scrollBy({ left: scrollLeft });
         lastPosX = e.clientX;
       };
       const mouseUpListener = function (_e: MouseEvent) {
@@ -841,16 +839,13 @@ class Timeline extends LitElement {
       <style>
         ${this.customStyle}
       </style>
-      <div class="jc-timeline-header">
-        <div
-          class="jc-timeline-rows-title"
-          style=${styleMap({
-            minWidth: this.ressourceWidth + "px",
-            width: this.ressourceWidth + "px",
-          })}
-        >
-          ${this.rowsTitle}
-        </div>
+      <div
+        class="jc-timeline-header"
+        style=${styleMap({
+          "--width": this.ressourceWidth + "px",
+        })}
+      >
+        <div class="jc-timeline-rows-title">${this.rowsTitle}</div>
         <horizontal-resizer @resize-x="${this._handleResizeX}"></horizontal-resizer>
         <div class="jc-timeline-grid-title-container">
           <table @mousedown="${this._grabHeader}" style="width:${nCol * this.slotWidth}px;">
@@ -868,10 +863,12 @@ class Timeline extends LitElement {
           </table>
         </div>
       </div>
-      <div class="jc-timeline-content">
+      <div
+        class="jc-timeline-content"
+        style="${styleMap({ "--width": this.ressourceWidth + "px" })}"
+      >
         <table
           class="jc-timeline-rows"
-          style="${styleMap({ "--width": this.ressourceWidth + "px" })}"
           @dragover="${(e: DragEvent) => e.preventDefault()}"
           @dragenter="${this._onRessourceDragEnter}"
           @dragleave="${this._onRessourceDragLeave}"

src/styles/Timeline.style.ts

@@ -23,11 +23,10 @@ export const TimelineStyle: CSSResult = css`
   .jc-timeline-rows-title,
   .jc-timeline-rows > tr > td {
     padding: 8px;
-    min-width: 40px;
     box-sizing: border-box;
   }
   .jc-timeline-rows > tr > td {
-    max-width: calc(var(--width) - 8px);
+    width: var(--width, 200px);
     padding: 0px;
     vertical-align: top;
   }
@@ -65,18 +64,21 @@ export const TimelineStyle: CSSResult = css`
     white-space: nowrap;
     border: 1px solid grey;
     border-style: solid none;
+    width: 100%;
   }
   .jc-timeline-rows,
   .jc-timeline-rows-title {
     height: inherit;
     width: var(--width, 200px);
-    overflow: hidden;
+    min-width: 40px;
+    overflow-x: hidden;
     border-collapse: collapse;
+    display: block;
   }
   .jc-timeline-grid-title-container,
   .jc-timeline-grid-container {
     position: relative;
-    width: 600px;
+    width: calc(100% - var(--width, 200px));
     display: block;
     overflow: hidden;
   }