enable verticale scrollinng

lib/Timeline.js

@@ -15,7 +15,7 @@ const lit_element_1 = require("lit-element");
 const style_map_1 = require("lit-html/directives/style-map");
 const unsafe_html_1 = require("lit-html/directives/unsafe-html");
 const simplebar_1 = __importDefault(require("simplebar"));
-const SimplbeBar_styles_1 = require("./styles/SimplbeBar.styles");
+const SimpleBar_styles_1 = require("./styles/SimpleBar.styles");
 const Event_1 = require("./Event");
 const Ressource_1 = require("./Ressource");
 var horizontal_resizer_1 = require("./components/horizontal-resizer");
@@ -61,7 +61,7 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
         this.render();
     }
     static get styles() {
-        return [Timeline_style_1.TimelineStyle, SimplbeBar_styles_1.SimpleBarStyle];
+        return [Timeline_style_1.TimelineStyle, SimpleBar_styles_1.SimpleBarStyle];
     }
     get start() {
         return this._start.toISOString();

lib/styles/SimpleBar.styles.d.ts

@@ -0,0 +1,2 @@
+import { CSSResult } from "lit-element";
+export declare const SimpleBarStyle: CSSResult;

lib/styles/SimpleBar.styles.js

@@ -0,0 +1,218 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleBarStyle = void 0;
+const lit_element_1 = require("lit-element");
+exports.SimpleBarStyle = lit_element_1.css `
+  [data-simplebar] {
+    position: relative;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: flex-start;
+  }
+
+  .simplebar-wrapper {
+    overflow: hidden;
+    width: inherit;
+    height: inherit;
+    max-width: inherit;
+    max-height: inherit;
+  }
+
+  .simplebar-mask {
+    direction: inherit;
+    position: absolute;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: auto !important;
+    height: auto !important;
+    z-index: 0;
+  }
+
+  .simplebar-offset {
+    direction: inherit !important;
+    box-sizing: inherit !important;
+    resize: none !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    padding: 0;
+    margin: 0;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .simplebar-content-wrapper {
+    direction: inherit;
+    box-sizing: border-box !important;
+    position: relative;
+    display: block;
+    height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
+    width: auto;
+    max-width: 100%; /* Not required for horizontal scroll to trigger */
+    max-height: 100%; /* Needed for vertical scroll to trigger */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .simplebar-content-wrapper::-webkit-scrollbar,
+  .simplebar-hide-scrollbar::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .simplebar-content:before,
+  .simplebar-content:after {
+    content: " ";
+    display: table;
+  }
+
+  .simplebar-placeholder {
+    max-height: 100%;
+    max-width: 100%;
+    width: 100%;
+    pointer-events: none;
+  }
+
+  .simplebar-height-auto-observer-wrapper {
+    box-sizing: inherit !important;
+    height: 100%;
+    width: 100%;
+    max-width: 1px;
+    position: relative;
+    float: left;
+    max-height: 1px;
+    overflow: hidden;
+    z-index: -1;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+    flex-grow: inherit;
+    flex-shrink: 0;
+    flex-basis: 0;
+  }
+
+  .simplebar-height-auto-observer {
+    box-sizing: inherit;
+    display: block;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 1000%;
+    width: 1000%;
+    min-height: 1px;
+    min-width: 1px;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: -1;
+  }
+
+  .simplebar-track {
+    z-index: 1;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    overflow: hidden;
+  }
+
+  [data-simplebar].simplebar-dragging .simplebar-content {
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  [data-simplebar].simplebar-dragging .simplebar-track {
+    pointer-events: all;
+  }
+
+  .simplebar-scrollbar {
+    position: absolute;
+    left: 0;
+    right: 0;
+    min-height: 10px;
+  }
+
+  .simplebar-scrollbar:before {
+    position: absolute;
+    content: "";
+    background: black;
+    border-radius: 7px;
+    left: 2px;
+    right: 2px;
+    opacity: 0;
+    transition: opacity 0.2s linear;
+  }
+
+  .simplebar-scrollbar.simplebar-visible:before {
+    /* When hovered, remove all transitions from drag handle */
+    opacity: 0.5;
+    transition: opacity 0s linear;
+  }
+
+  .simplebar-track.simplebar-vertical {
+    top: 0;
+    width: 11px;
+  }
+
+  .simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
+    top: 2px;
+    bottom: 2px;
+  }
+
+  .simplebar-track.simplebar-horizontal {
+    left: 0;
+    height: 11px;
+  }
+
+  .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
+    height: 100%;
+    left: 2px;
+    right: 2px;
+  }
+
+  .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
+    right: auto;
+    left: 0;
+    top: 2px;
+    height: 7px;
+    min-height: 0;
+    min-width: 10px;
+    width: auto;
+  }
+
+  /* Rtl support */
+  [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical {
+    right: auto;
+    left: 0;
+  }
+
+  .hs-dummy-scrollbar-size {
+    direction: rtl;
+    position: fixed;
+    opacity: 0;
+    visibility: hidden;
+    height: 500px;
+    width: 500px;
+    overflow-y: hidden;
+    overflow-x: scroll;
+  }
+
+  .simplebar-hide-scrollbar {
+    position: fixed;
+    left: 0;
+    visibility: hidden;
+    overflow-y: scroll;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+`;
+//# sourceMappingURL=SimpleBar.styles.js.map

lib/styles/SimpleBar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleBar.styles.js","sourceRoot":"","sources":["../../src/styles/SimpleBar.styles.ts"],"names":[],"mappings":";;;AAAA,6CAA6C;AAEhC,QAAA,cAAc,GAAc,iBAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoN3C,CAAC"}

lib/styles/Timeline.style.js

@@ -21,7 +21,10 @@ exports.TimelineStyle = lit_element_1.css `
     height: max-content;
     align-items: stretch;
   }
-
+  .jc-timeline-content {
+    height: auto;
+    overflow-y: auto;
+  }
   .jc-timeline-rows-title,
   .jc-timeline-rows > tr > td {
     padding: 8px;
@@ -85,7 +88,8 @@ exports.TimelineStyle = lit_element_1.css `
     overflow: hidden;
   }
   .jc-timeline-grid-container {
-    overflow-x: auto;
+    overflow: auto;
+    display: flex;
   }
   .jc-timeline-grid-title-container table,
   .jc-timeline-grid-container table {
@@ -160,7 +164,6 @@ exports.TimelineStyle = lit_element_1.css `
     top: 0px;
     left: 0px;
     bottom: 0px;
-    overflow: hidden;
   }
   .jc-timeslot {
     position: absolute;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2P1C,CAAC"}
+{"version":3,"file":"Timeline.style.js","sourceRoot":"","sources":["../../src/styles/Timeline.style.ts"],"names":[],"mappings":";;;AAAA,6CAA6C;AAEhC,QAAA,aAAa,GAAc,iBAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8P1C,CAAC"}

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,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"}
+{"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;QAElD,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;AA7BD,8CA6BC"}

src/Timeline.ts

@@ -11,7 +11,7 @@ import {
 import { styleMap } from "lit-html/directives/style-map";
 import { unsafeHTML } from "lit-html/directives/unsafe-html";
 import SimpleBar from "simplebar";
-import { SimpleBarStyle } from "./styles/SimplbeBar.styles";
+import { SimpleBarStyle } from "./styles/SimpleBar.styles";
 
 import { Event, IEvent } from "./Event";
 import { Ressource, IRessource } from "./Ressource";
@@ -44,7 +44,6 @@ interface legendItem {
   colspan: number;
   title: string;
 }
-// TODO define std zoom level
 // TODO add selectable Slot
 // TODO enable to rearrange between different component.
 /**

src/styles/Timeline.style.ts

@@ -19,7 +19,10 @@ export const TimelineStyle: CSSResult = css`
     height: max-content;
     align-items: stretch;
   }
-
+  .jc-timeline-content {
+    height: auto;
+    overflow-y: auto;
+  }
   .jc-timeline-rows-title,
   .jc-timeline-rows > tr > td {
     padding: 8px;
@@ -83,7 +86,8 @@ export const TimelineStyle: CSSResult = css`
     overflow: hidden;
   }
   .jc-timeline-grid-container {
-    overflow-x: auto;
+    overflow: auto;
+    display: flex;
   }
   .jc-timeline-grid-title-container table,
   .jc-timeline-grid-container table {
@@ -158,7 +162,6 @@ export const TimelineStyle: CSSResult = css`
     top: 0px;
     left: 0px;
     bottom: 0px;
-    overflow: hidden;
   }
   .jc-timeslot {
     position: absolute;