|
|
@@ -5,12 +5,14 @@ import { Ressource, IRessource } from './Ressource'
|
|
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
|
import { HorizontalResizer } from './components/horizontal-resizer'
|
|
|
-import { LitElement, html, customElement, property, css, TemplateResult } from 'lit-element';
|
|
|
+import { LitElement, html, customElement, property, TemplateResult } from 'lit-element';
|
|
|
import { styleMap } from 'lit-html/directives/style-map';
|
|
|
|
|
|
import syncronizeElementsScrolling from './utils/syncroScroll';
|
|
|
import Selectable from './utils/selectable';
|
|
|
|
|
|
+import { TimelineStyle } from './styles/TimelineStyle';
|
|
|
+
|
|
|
interface TimelineOptions {
|
|
|
ressources?: Array<IRessource>
|
|
|
items?: Array<IEvent>
|
|
|
@@ -40,238 +42,7 @@ interface legendItem {
|
|
|
|
|
|
@customElement('jc-timeline')
|
|
|
class Timeline extends LitElement {
|
|
|
- static styles = css`
|
|
|
- body{
|
|
|
- font-family:Roboto;
|
|
|
- }
|
|
|
- div {
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .jc-timeline-content,
|
|
|
- .jc-timeline-header{
|
|
|
- width:100%;
|
|
|
- position:relative;
|
|
|
- display: flex;
|
|
|
- flex-direction:row;
|
|
|
- height:max-content;
|
|
|
- align-items: stretch;
|
|
|
- }
|
|
|
-
|
|
|
- .jc-timeline-rows-title,
|
|
|
- .jc-timeline-rows > tr > td{
|
|
|
- padding: 8px;
|
|
|
- min-width:40px;
|
|
|
- }
|
|
|
- .jc-timeline-rows > tr > td {
|
|
|
- max-width:calc( var(--width) - 8px );
|
|
|
- padding: 0px;
|
|
|
- vertical-align:top;
|
|
|
- }
|
|
|
- .jc-timeline-rows > tr.empty > td{
|
|
|
- padding: 6px 0px 4px 8px;
|
|
|
- }
|
|
|
- i.jc-spacer {
|
|
|
- display:inline-block;
|
|
|
- width : 1rem;
|
|
|
- height: 1rem;
|
|
|
- position:relative;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- i.jc-spacer:after{
|
|
|
- content: " ";
|
|
|
- position:absolute;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 1.05rem;
|
|
|
- width: 1.05rem;
|
|
|
- height: 1.05rem;
|
|
|
- }
|
|
|
- .jc-spacer.extend,
|
|
|
- .jc-spacer.collapse {
|
|
|
- cursor:pointer;
|
|
|
- }
|
|
|
- i.jc-spacer.extend:after{
|
|
|
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMFYweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xOSAzSDVjLTEuMTEgMC0yIC45LTIgMnYxNGMwIDEuMS44OSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0wIDE2SDVWNWgxNHYxNHptLTgtMmgydi00aDR2LTJoLTRWN2gtMnY0SDd2Mmg0eiIvPjwvc3ZnPg==")
|
|
|
- }
|
|
|
- i.jc-spacer.collapse:after{
|
|
|
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE5IDNINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0wIDE2SDVWNWgxNHYxNHpNNyAxMWgxMHYySDd6Ii8+PC9zdmc+")
|
|
|
- }
|
|
|
-
|
|
|
- .jc-timeline-rows > tr{
|
|
|
- box-sizing: border-box;
|
|
|
- white-space: nowrap;
|
|
|
- border: 1px solid grey;
|
|
|
- border-style: solid none;
|
|
|
- }
|
|
|
- .jc-timeline-rows,
|
|
|
- .jc-timeline-rows-title{
|
|
|
- width:var(--width, 200px);
|
|
|
- overflow: hidden;
|
|
|
- border-collapse:collapse;
|
|
|
- }
|
|
|
- .jc-timeline-grid-title-container,
|
|
|
- .jc-timeline-grid-container{
|
|
|
- position:relative;
|
|
|
- width: 600px;
|
|
|
- display: block;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .jc-timeline-grid-container{
|
|
|
- overflow-x: auto;
|
|
|
- }
|
|
|
- .jc-timeline-grid-title-container > table,
|
|
|
- .jc-timeline-grid-container > table {
|
|
|
- width:100%;
|
|
|
- table-layout: fixed;
|
|
|
- border-collapse: collapse;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
-
|
|
|
- .jc-timeline-grid-title-container {
|
|
|
- white-space: nowrap;
|
|
|
- cursor: grab;
|
|
|
- user-select: none; /* supported by Chrome and Opera */
|
|
|
- -webkit-user-select: none; /* Safari */
|
|
|
- -khtml-user-select: none; /* Konqueror HTML */
|
|
|
- -moz-user-select: none; /* Firefox */
|
|
|
- -ms-user-select: none; /* Internet Explorer/Edge */
|
|
|
- }
|
|
|
- .jc-timeline-grid-title:first-child > th{
|
|
|
- border-top:0;
|
|
|
- }
|
|
|
- .jc-timeline-grid-title:first-child > th:before,
|
|
|
- .jc-timeline-grid-title:first-child > th:last-child:after {
|
|
|
- content:" ";
|
|
|
- display: block;
|
|
|
- position:absolute;
|
|
|
- left:-1px;
|
|
|
- top:0px;
|
|
|
- height:calc( 100% - 8px);
|
|
|
- border-left: 2px solid white;
|
|
|
- z-index:2;
|
|
|
- }
|
|
|
- .jc-timeline-grid-title:first-child > th:last-child:after
|
|
|
- {
|
|
|
- left:auto;
|
|
|
- right:-1px;
|
|
|
- }
|
|
|
- .jc-timeline-grid-title:first-child:last-child >th{
|
|
|
- padding:8px 0;
|
|
|
- }
|
|
|
- .jc-timeline-grid-title:last-child > th{
|
|
|
- border-bottom:none;
|
|
|
- }
|
|
|
- .jc-timeline-grid-title > th,
|
|
|
- .jc-slot {
|
|
|
- height:100%;
|
|
|
- border: solid 1px lightgray;
|
|
|
- border-left-style: dotted;
|
|
|
- border-right:0;
|
|
|
- text-align: center;
|
|
|
- position:relative;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .jc-timeline-grid-title > th:last-child,
|
|
|
- .jc-slot:last-child{
|
|
|
- border-right:solid 1px lightgray;
|
|
|
- }
|
|
|
- .jc-timeline-grid-title > th,
|
|
|
- .jc-major-slot{
|
|
|
- border-left-style: solid;
|
|
|
- }
|
|
|
- .jc-timeslots{
|
|
|
- position:absolute;
|
|
|
- top:0px;
|
|
|
- left:0px;
|
|
|
- bottom:0px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .jc-timeslot{
|
|
|
- position:absolute;
|
|
|
- white-space: nowrap;
|
|
|
- overflow-x:hidden;
|
|
|
- background-color:var(--default-background);
|
|
|
- color:#fff;
|
|
|
- border-radius:3px;
|
|
|
- padding:4px;
|
|
|
- margin:2px 0px;
|
|
|
- z-index:1;
|
|
|
- cursor:auto;
|
|
|
- }
|
|
|
- .jc-timeslot.empty{
|
|
|
- height:5px;
|
|
|
- padding:2px 2px;
|
|
|
- margin:0px;
|
|
|
- cursor:pointer;
|
|
|
- }
|
|
|
- .jc-timeslot.moving{
|
|
|
- opacity:0.7;
|
|
|
- cursor:grabbing;
|
|
|
- }
|
|
|
- .jc-timeslot.selected:before{
|
|
|
- border:solid 2px black;
|
|
|
- position:absolute;
|
|
|
- top:0;
|
|
|
- bottom:0;
|
|
|
- left:0;
|
|
|
- right:0;
|
|
|
- content:" ";
|
|
|
- }
|
|
|
- .jc-timeslot-resizer-start,
|
|
|
- .jc-timeslot-resizer-end{
|
|
|
- position:absolute;
|
|
|
- top:0;
|
|
|
- bottom:0;
|
|
|
- width:4px;
|
|
|
- min-width:4px;
|
|
|
- display:block;
|
|
|
- cursor: ew-resize;
|
|
|
- }
|
|
|
- .jc-timeslot-resizer-start,
|
|
|
- .jc-timeslot-resizer-end{
|
|
|
- display:block;
|
|
|
- }
|
|
|
- .jc-timeslot-resizer-start{
|
|
|
- left:0px;
|
|
|
- }
|
|
|
- .jc-timeslot-resizer-end{
|
|
|
- right:0px;
|
|
|
- }
|
|
|
- .jc-timeline-rows > tr >td{
|
|
|
- height:100%;
|
|
|
- }
|
|
|
- .jc-ressource{
|
|
|
- padding-top: 2px;
|
|
|
- height: calc( 100% - 8px);
|
|
|
- }
|
|
|
- .jc-ressource > span {
|
|
|
- pointer-events: none;
|
|
|
- }
|
|
|
- .jc-ressource.target{
|
|
|
- background-color: lightgrey;
|
|
|
- }
|
|
|
- .jc-ressource-selected{
|
|
|
- border:1px solid var(--default-background, SteelBlue);
|
|
|
- border-right:0;
|
|
|
- border-left:0;
|
|
|
- background-color:#4682b46b;
|
|
|
- }
|
|
|
- .jc-ressource-above{
|
|
|
- height:4px;
|
|
|
- }
|
|
|
- .jc-ressource-above.target{
|
|
|
- margin-left: calc( var(--depth) * 16px );
|
|
|
- background-color: var(--default-background, SteelBlue);
|
|
|
- border-radius: 0 0 0 4px;
|
|
|
- }
|
|
|
- .jc-ressource-below{
|
|
|
- height:4px;
|
|
|
- }
|
|
|
- .jc-ressource-below.target{
|
|
|
- margin-left: calc( var(--depth) * 16px);
|
|
|
- background-color: var(--default-background, SteelBlue);
|
|
|
- border-radius: 4px 0 0 0;
|
|
|
- }
|
|
|
- `;
|
|
|
+ static styles = [TimelineStyle]
|
|
|
@property({ type: Array })
|
|
|
private rows: Array<Ressource>
|
|
|
@property({ type: Array })
|
tripeur