@openremote/or-timeline 1.0.1 → 1.2.0-snapshot.20240512155407

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +30 -2
  2. package/dist/umd/index.bundle.js +188 -0
  3. package/dist/umd/index.bundle.js.LICENSE.txt +21 -0
  4. package/dist/umd/index.js +188 -0
  5. package/dist/umd/index.js.LICENSE.txt +17 -0
  6. package/dist/umd/index.orbundle.js +188 -0
  7. package/dist/umd/index.orbundle.js.LICENSE.txt +21 -0
  8. package/package.json +17 -15
  9. package/dist/index.js +0 -255
  10. package/dist/index.js.map +0 -1
  11. package/src/index.d.ts +0 -1
  12. package/src/index.js +0 -255
  13. package/src/index.js.map +0 -1
  14. package/src/index.ts +0 -254
  15. package/tsconfig.json +0 -14
  16. /package/{dist → lib}/index.d.ts +0 -0
package/dist/umd/index.orbundle.js.LICENSE.txt ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2017 Google LLC
4
+ * SPDX-License-Identifier: BSD-3-Clause
5
+ */
6
+
7
+ /**
8
+ * @license
9
+ * Copyright 2019 Google LLC
10
+ * SPDX-License-Identifier: BSD-3-Clause
11
+ */
12
+
13
+ /**
14
+ * @license
15
+ * Copyright 2021 Google LLC
16
+ * SPDX-License-Identifier: BSD-3-Clause
17
+ */
18
+
19
+ //! moment.js
20
+
21
+ //! moment.js locale configuration
package/package.json CHANGED
@@ -1,26 +1,28 @@
1
1
  {
2
2
  "name": "@openremote/or-timeline",
3
- "version": "1.0.1",
3
+ "version": "1.2.0-snapshot.20240512155407",
4
4
  "description": "OpenRemote Timeline",
5
- "main": "src/index.js",
6
- "types": "src/index.ts",
5
+ "main": "dist/umd/index.bundle.js",
6
+ "module": "lib/index.js",
7
+ "exports": {
8
+ ".": "./lib/index.js",
9
+ "./*": "./lib/*.js"
10
+ },
11
+ "types": "lib/index.d.ts",
7
12
  "scripts": {
8
- "build": "npx tsc",
9
- "test": "echo \"No tests\" && exit 0"
13
+ "test": "echo \"No tests\" && exit 0",
14
+ "prepublishOnly": "npx webpack"
10
15
  },
11
16
  "author": "OpenRemote",
12
17
  "license": "AGPL-3.0-or-later",
13
18
  "dependencies": {
14
- "lit-element": "^2.0.1",
15
- "moment": "^2.24.0"
19
+ "lit": "^2.0.2",
20
+ "moment": "^2.29.4"
16
21
  },
17
22
  "devDependencies": {
18
- "@polymer/decorators": "^3.0.0",
19
- "@polymer/iron-demo-helpers": "^3.0.0-pre.19",
20
- "@webcomponents/webcomponentsjs": "^2.0.0",
21
- "style-loader": "^0.23.1",
22
- "tslint": "^5.11.0",
23
- "typescript": "^3.2.2",
24
- "wct-browser-legacy": "^1.0.0"
23
+ "@openremote/util": "1.2.0-snapshot.20240512155407"
24
+ },
25
+ "publishConfig": {
26
+ "access": "public"
25
27
  }
26
- }
28
+ }
package/dist/index.js DELETED
@@ -1,255 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { html, LitElement, property } from 'lit-element';
8
- import moment from 'moment';
9
- class OrTimeline extends LitElement {
10
- constructor() {
11
- super();
12
- // default value in minutes
13
- this.value = 0;
14
- // default value in minutes
15
- this.current = 0;
16
- // maxRange in minutes
17
- this.maxRange = 360;
18
- // minRange in minutes
19
- this.minRange = 0;
20
- // Steps in minutes
21
- this.step = 5;
22
- }
23
- render() {
24
- if (this.shadowRoot) {
25
- const range = this.shadowRoot.getElementById('or-timeline-slider');
26
- if (range) {
27
- range.value = Math.round(this.current);
28
- this.moveBubble(range);
29
- }
30
- }
31
- return html `
32
- <style>
33
- :host {
34
- position: relative;
35
- }
36
- .timeline-container {
37
- display: block;
38
- height: 52px;
39
- background-color: var(--app-white, #FFFFFF);
40
-
41
- -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.28);
42
- -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.28);
43
- box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.28);
44
-
45
- padding-top: 20px;
46
- }
47
- .slidecontainer {
48
- position: relative;
49
- margin: -5px 50px 0 30px;
50
- }
51
-
52
- /* The slider itself */
53
- .slider {
54
- box-sizing: border-box;
55
- -webkit-appearance: none; /* Override default CSS styles */
56
- appearance: none;
57
- width: calc(100% + 20px);
58
- margin-left: -10px;
59
- height: 12px;
60
- background: #bdbdbd; /* Grey background */
61
- outline: none; /* Remove outline */
62
- opacity: 1; /* Set transparency (for mouse-over effects on hover) */
63
- -webkit-transition: .2s; /* 0.2 seconds transition on hover */
64
- transition: opacity .2s;
65
-
66
- border-radius: 6px;
67
- cursor: pointer;
68
- }
69
-
70
- /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
71
- .slider::-webkit-slider-thumb {
72
- -webkit-appearance: none;
73
- appearance: none;
74
- width: 18px;
75
- height: 18px;
76
- margin: 0;
77
- border-radius: 50%;
78
- cursor: pointer;
79
- border: 0 !important;
80
- background-color: var(--timeline-accent, blue); /* Green background */
81
- }
82
-
83
- .slider::-ms-thumb,
84
- .slider::-moz-range-thumb,
85
- .slider::-webkit-slider-thumb {
86
- width: 18px;
87
- height: 18px;
88
- margin: 0;
89
- border-radius: 50%;
90
- cursor: pointer;
91
- border: 0 !important;
92
- background-color: var(--timeline-accent, blue); /* Green background */
93
- }
94
-
95
- #timelineHourMarkers {
96
- position: relative;
97
- display: -webkit-box;
98
- display: -moz-box;
99
- display: -ms-flexbox;
100
- display: -webkit-flex;
101
- display: flex;
102
- -webkit-box-orient: horizontal;
103
- -moz-box-orient: horizontal;
104
- -webkit-box-direction: normal;
105
- -moz-box-direction: normal;
106
- -webkit-flex-direction: row;
107
- -ms-flex-direction: row;
108
- flex-direction: row;
109
-
110
- margin: 0 50px 0 30px;
111
- }
112
-
113
- #timelineHourMarkers > .timelineHourMark{
114
- display: flex;
115
- flex: 1 100%;
116
- flex-grow: 1;
117
- flex-shrink: 1;
118
- flex-basis: 100%;
119
-
120
- overflow: visible;
121
- color: var(--timeline-grey, darkgrey);
122
- border-left: 1px solid var(--timeline-grey, darkgrey);
123
- font-size: 12px;
124
- -webkit-user-select: none;
125
- -moz-user-select: none;
126
- -ms-user-select: none;
127
- user-select: none;
128
- padding-left: 4px;
129
- padding-bottom: 4px;
130
- }
131
- #timelineHourMarkers .timelineHourMark:last-child {
132
- position: absolute;
133
- right: -25px;
134
- }
135
-
136
- #range-value {
137
- position: absolute;
138
- background-color: var(--timeline-accent, blue);
139
- height: 30px;
140
- width: 60px;
141
- margin-left: -30px;
142
- text-align: center;
143
- color: white;
144
- display: inline-block;
145
- left: 0;
146
- font-size: 12px;
147
- font-weight: bold;
148
- line-height: 30px;
149
- }
150
-
151
- .time-value-container {
152
- width: calc(100% - 80px);
153
- display: block;
154
- position: relative;
155
- height: 30px;
156
- margin: 0 50px 0 30px;
157
- }
158
- </style>
159
-
160
-
161
- <div class="time-value-container">
162
- <div id="range-value">${this.current === 0 ? 'LIVE' : moment().add(this.current, 'minutes').format('HH:mm')}</div>
163
- </div>
164
- <div class="timeline-container">
165
- <div id="timelineHourMarkers" class="layout horizontal justified style-scope controller-timeline">
166
- ${new Array((this.maxRange / 60) + 1).fill(0).map((_, idx) => {
167
- return html `
168
- ${idx === 0 ? html `
169
- <div class="timelineHourMark style-scope controller-timeline">Nu</div>
170
- ` : html `
171
- <div class="timelineHourMark style-scope controller-timeline">+${idx}u</div>
172
- `}
173
- `;
174
- })}
175
- </div>
176
-
177
- <div class="slidecontainer">
178
- <input id="or-timeline-slider" class="slider" type="range" @input="${this.moveBubble}" @change="${this.valueChange}" value="${this.current}" min="${this.minRange}" max="${this.maxRange}" step="${this.step}">
179
- </div>
180
- </div>
181
-
182
- `;
183
- }
184
- moveBubble(e = null, value = null) {
185
- let el;
186
- if (e) {
187
- el = e.target;
188
- }
189
- else {
190
- if (this.shadowRoot) {
191
- el = this.shadowRoot.getElementById('or-timeline-slider');
192
- }
193
- }
194
- if (el) {
195
- if (value) {
196
- this.current = parseInt(value);
197
- }
198
- else {
199
- this.current = parseInt(el.value);
200
- }
201
- // Measure width of range input
202
- const width = el.offsetWidth;
203
- const v = this.current;
204
- // Figure out placement percentage between left and right of input
205
- const newPoint = v / this.maxRange;
206
- // Janky value to get pointer to line up better
207
- let offset = 30;
208
- let newPlace;
209
- // Prevent bubble from going beyond left or right (unsupported browsers)
210
- if (newPoint < 0) {
211
- newPlace = 0;
212
- }
213
- else if (newPoint > 1) {
214
- newPlace = width - offset;
215
- }
216
- else {
217
- newPlace = (width - offset) * newPoint;
218
- if (newPlace < 0) {
219
- newPlace = 0;
220
- }
221
- }
222
- // Move bubble
223
- if (this.shadowRoot) {
224
- const range = this.shadowRoot.getElementById('range-value');
225
- if (range) {
226
- range.style.left = newPlace + "px";
227
- }
228
- }
229
- }
230
- }
231
- valueChange(e) {
232
- this.moveBubble(e);
233
- this.onChange();
234
- }
235
- }
236
- __decorate([
237
- property({ type: Function })
238
- ], OrTimeline.prototype, "onChange", void 0);
239
- __decorate([
240
- property({ type: Number })
241
- ], OrTimeline.prototype, "value", void 0);
242
- __decorate([
243
- property({ type: Number })
244
- ], OrTimeline.prototype, "current", void 0);
245
- __decorate([
246
- property({ type: Number })
247
- ], OrTimeline.prototype, "maxRange", void 0);
248
- __decorate([
249
- property({ type: Number })
250
- ], OrTimeline.prototype, "minRange", void 0);
251
- __decorate([
252
- property({ type: Number })
253
- ], OrTimeline.prototype, "step", void 0);
254
- window.customElements.define('or-timeline', OrTimeline);
255
- //# sourceMappingURL=index.js.map
package/dist/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAC;AAEvD,OAAO,MAAM,MAAM,QAAQ,CAAC;AAE5B,MAAM,UAAW,SAAQ,UAAU;IAkP/B;QACI,KAAK,EAAE,CAAC;QA7EZ,2BAA2B;QAEnB,UAAK,GAAW,CAAC,CAAC;QAE1B,2BAA2B;QAEpB,YAAO,GAAW,CAAC,CAAC;QAE3B,sBAAsB;QAEd,aAAQ,GAAW,GAAG,CAAC;QAE/B,sBAAsB;QAEd,aAAQ,GAAW,CAAC,CAAC;QAE7B,mBAAmB;QAEX,SAAI,GAAW,CAAC,CAAC;IA4DzB,CAAC;IAnPS,MAAM;QACZ,IAAG,IAAI,CAAC,UAAU,EAAC;YACf,MAAM,KAAK,GAAO,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;YACvE,IAAG,KAAK,EAAE;gBACN,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBACvC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;aAC1B;SACJ;QAED,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAmIqB,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;;;;sBAIrG,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAC,EAAE,CAAC,GAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;YACrD,OAAO,IAAI,CAAA;0BACT,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;yBAEjB,CAAC,CAAC,CAAC,IAAI,CAAA;6FAC6D,GAAG;yBACvE;qBACJ,CAAA;QAAA,CAAC,CAAC;;;;wFAIiE,IAAI,CAAC,UAAU,cAAc,IAAI,CAAC,WAAW,YAAY,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,QAAQ,UAAU,IAAI,CAAC,QAAQ,WAAW,IAAI,CAAC,IAAI;;;;KAI3N,CAAC;IACF,CAAC;IAyBD,UAAU,CAAC,IAAM,IAAI,EAAE,QAAkB,IAAI;QACzC,IAAI,EAAE,CAAC;QACP,IAAG,CAAC,EAAC;YACD,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;SACjB;aAAM;YACH,IAAG,IAAI,CAAC,UAAU,EAAC;gBACf,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;aAC7D;SACJ;QAED,IAAG,EAAE,EAAE;YACH,IAAG,KAAK,EAAC;gBACL,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;aAClC;iBAAM;gBACH,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;aACrC;YACD,+BAA+B;YAC/B,MAAM,KAAK,GAAG,EAAE,CAAC,WAAW,CAAC;YAC7B,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC;YAEvB,kEAAkE;YAClE,MAAM,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;YACnC,+CAA+C;YAC/C,IAAI,MAAM,GAAG,EAAE,CAAC;YAChB,IAAI,QAAQ,CAAC;YAEb,wEAAwE;YACxE,IAAI,QAAQ,GAAG,CAAC,EAAE;gBACd,QAAQ,GAAG,CAAC,CAAC;aAChB;iBAAM,IAAI,QAAQ,GAAG,CAAC,EAAE;gBACrB,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;aAC7B;iBAAM;gBACH,QAAQ,GAAG,CAAC,KAAK,GAAG,MAAM,CAAC,GAAG,QAAQ,CAAC;gBAEvC,IAAG,QAAQ,GAAG,CAAC,EAAG;oBACd,QAAQ,GAAG,CAAC,CAAC;iBAChB;aAEJ;YAED,cAAc;YACd,IAAG,IAAI,CAAC,UAAU,EAAE;gBAChB,MAAM,KAAK,GAAsB,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;gBAC/E,IAAG,KAAK,EAAC;oBACL,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC;iBACtC;aACJ;SACJ;IAEL,CAAC;IAED,WAAW,CAAE,CAAK;QACd,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QACnB,IAAI,CAAC,QAAQ,EAAE,CAAC;IACpB,CAAC;CAOJ;AAnFG;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAC,CAAC;4CACL;AAItB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;yCACC;AAI1B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;2CACE;AAI3B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CACM;AAI/B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CACI;AAI7B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;wCACA;AAiE7B,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC"}
package/src/index.d.ts DELETED
@@ -1 +0,0 @@
1
- export {};
package/src/index.js DELETED
@@ -1,255 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { html, LitElement, property } from 'lit-element';
8
- import moment from 'moment';
9
- class OrTimeline extends LitElement {
10
- constructor() {
11
- super();
12
- // default value in minutes
13
- this.value = 0;
14
- // default value in minutes
15
- this.current = 0;
16
- // maxRange in minutes
17
- this.maxRange = 360;
18
- // minRange in minutes
19
- this.minRange = 0;
20
- // Steps in minutes
21
- this.step = 5;
22
- }
23
- render() {
24
- if (this.shadowRoot) {
25
- const range = this.shadowRoot.getElementById('or-timeline-slider');
26
- if (range) {
27
- range.value = Math.round(this.current);
28
- this.moveBubble(range);
29
- }
30
- }
31
- return html `
32
- <style>
33
- :host {
34
- position: relative;
35
- }
36
- .timeline-container {
37
- display: block;
38
- height: 52px;
39
- background-color: var(--app-white, #FFFFFF);
40
-
41
- -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.28);
42
- -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.28);
43
- box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.28);
44
-
45
- padding-top: 20px;
46
- }
47
- .slidecontainer {
48
- position: relative;
49
- margin: -5px 50px 0 30px;
50
- }
51
-
52
- /* The slider itself */
53
- .slider {
54
- box-sizing: border-box;
55
- -webkit-appearance: none; /* Override default CSS styles */
56
- appearance: none;
57
- width: calc(100% + 20px);
58
- margin-left: -10px;
59
- height: 12px;
60
- background: #bdbdbd; /* Grey background */
61
- outline: none; /* Remove outline */
62
- opacity: 1; /* Set transparency (for mouse-over effects on hover) */
63
- -webkit-transition: .2s; /* 0.2 seconds transition on hover */
64
- transition: opacity .2s;
65
-
66
- border-radius: 6px;
67
- cursor: pointer;
68
- }
69
-
70
- /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
71
- .slider::-webkit-slider-thumb {
72
- -webkit-appearance: none;
73
- appearance: none;
74
- width: 18px;
75
- height: 18px;
76
- margin: 0;
77
- border-radius: 50%;
78
- cursor: pointer;
79
- border: 0 !important;
80
- background-color: var(--timeline-accent, blue); /* Green background */
81
- }
82
-
83
- .slider::-ms-thumb,
84
- .slider::-moz-range-thumb,
85
- .slider::-webkit-slider-thumb {
86
- width: 18px;
87
- height: 18px;
88
- margin: 0;
89
- border-radius: 50%;
90
- cursor: pointer;
91
- border: 0 !important;
92
- background-color: var(--timeline-accent, blue); /* Green background */
93
- }
94
-
95
- #timelineHourMarkers {
96
- position: relative;
97
- display: -webkit-box;
98
- display: -moz-box;
99
- display: -ms-flexbox;
100
- display: -webkit-flex;
101
- display: flex;
102
- -webkit-box-orient: horizontal;
103
- -moz-box-orient: horizontal;
104
- -webkit-box-direction: normal;
105
- -moz-box-direction: normal;
106
- -webkit-flex-direction: row;
107
- -ms-flex-direction: row;
108
- flex-direction: row;
109
-
110
- margin: 0 50px 0 30px;
111
- }
112
-
113
- #timelineHourMarkers > .timelineHourMark{
114
- display: flex;
115
- flex: 1 100%;
116
- flex-grow: 1;
117
- flex-shrink: 1;
118
- flex-basis: 100%;
119
-
120
- overflow: visible;
121
- color: var(--timeline-grey, darkgrey);
122
- border-left: 1px solid var(--timeline-grey, darkgrey);
123
- font-size: 12px;
124
- -webkit-user-select: none;
125
- -moz-user-select: none;
126
- -ms-user-select: none;
127
- user-select: none;
128
- padding-left: 4px;
129
- padding-bottom: 4px;
130
- }
131
- #timelineHourMarkers .timelineHourMark:last-child {
132
- position: absolute;
133
- right: -25px;
134
- }
135
-
136
- #range-value {
137
- position: absolute;
138
- background-color: var(--timeline-accent, blue);
139
- height: 30px;
140
- width: 60px;
141
- margin-left: -30px;
142
- text-align: center;
143
- color: white;
144
- display: inline-block;
145
- left: 0;
146
- font-size: 12px;
147
- font-weight: bold;
148
- line-height: 30px;
149
- }
150
-
151
- .time-value-container {
152
- width: calc(100% - 80px);
153
- display: block;
154
- position: relative;
155
- height: 30px;
156
- margin: 0 50px 0 30px;
157
- }
158
- </style>
159
-
160
-
161
- <div class="time-value-container">
162
- <div id="range-value">${this.current === 0 ? 'LIVE' : moment().add(this.current, 'minutes').format('HH:mm')}</div>
163
- </div>
164
- <div class="timeline-container">
165
- <div id="timelineHourMarkers" class="layout horizontal justified style-scope controller-timeline">
166
- ${new Array((this.maxRange / 60) + 1).fill(0).map((_, idx) => {
167
- return html `
168
- ${idx === 0 ? html `
169
- <div class="timelineHourMark style-scope controller-timeline">Nu</div>
170
- ` : html `
171
- <div class="timelineHourMark style-scope controller-timeline">+${idx}u</div>
172
- `}
173
- `;
174
- })}
175
- </div>
176
-
177
- <div class="slidecontainer">
178
- <input id="or-timeline-slider" class="slider" type="range" @input="${this.moveBubble}" @change="${this.valueChange}" value="${this.current}" min="${this.minRange}" max="${this.maxRange}" step="${this.step}">
179
- </div>
180
- </div>
181
-
182
- `;
183
- }
184
- moveBubble(e = null, value = null) {
185
- let el;
186
- if (e) {
187
- el = e.target;
188
- }
189
- else {
190
- if (this.shadowRoot) {
191
- el = this.shadowRoot.getElementById('or-timeline-slider');
192
- }
193
- }
194
- if (el) {
195
- if (value) {
196
- this.current = parseInt(value);
197
- }
198
- else {
199
- this.current = parseInt(el.value);
200
- }
201
- // Measure width of range input
202
- const width = el.offsetWidth;
203
- const v = this.current;
204
- // Figure out placement percentage between left and right of input
205
- const newPoint = v / this.maxRange;
206
- // Janky value to get pointer to line up better
207
- let offset = 30;
208
- let newPlace;
209
- // Prevent bubble from going beyond left or right (unsupported browsers)
210
- if (newPoint < 0) {
211
- newPlace = 0;
212
- }
213
- else if (newPoint > 1) {
214
- newPlace = width - offset;
215
- }
216
- else {
217
- newPlace = (width - offset) * newPoint;
218
- if (newPlace < 0) {
219
- newPlace = 0;
220
- }
221
- }
222
- // Move bubble
223
- if (this.shadowRoot) {
224
- const range = this.shadowRoot.getElementById('range-value');
225
- if (range) {
226
- range.style.left = newPlace + "px";
227
- }
228
- }
229
- }
230
- }
231
- valueChange(e) {
232
- this.moveBubble(e);
233
- this.onChange();
234
- }
235
- }
236
- __decorate([
237
- property({ type: Function })
238
- ], OrTimeline.prototype, "onChange", void 0);
239
- __decorate([
240
- property({ type: Number })
241
- ], OrTimeline.prototype, "value", void 0);
242
- __decorate([
243
- property({ type: Number })
244
- ], OrTimeline.prototype, "current", void 0);
245
- __decorate([
246
- property({ type: Number })
247
- ], OrTimeline.prototype, "maxRange", void 0);
248
- __decorate([
249
- property({ type: Number })
250
- ], OrTimeline.prototype, "minRange", void 0);
251
- __decorate([
252
- property({ type: Number })
253
- ], OrTimeline.prototype, "step", void 0);
254
- window.customElements.define('or-timeline', OrTimeline);
255
- //# sourceMappingURL=index.js.map
package/src/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}