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

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 (10) hide show
  1. package/README.md +30 -2
  2. package/package.json +17 -15
  3. package/dist/index.d.ts +0 -1
  4. package/dist/index.js +0 -255
  5. package/dist/index.js.map +0 -1
  6. package/src/index.d.ts +0 -1
  7. package/src/index.js +0 -255
  8. package/src/index.js.map +0 -1
  9. package/src/index.ts +0 -254
  10. package/tsconfig.json +0 -14
package/README.md CHANGED
@@ -1,3 +1,31 @@
1
- # \<or-timeline\>
1
+ # @openremote/or-timeline \<or-timeline\>
2
+ [![NPM Version][npm-image]][npm-url]
3
+ [![Linux Build][travis-image]][travis-url]
4
+ [![Test Coverage][coveralls-image]][coveralls-url]
2
5
 
3
- OpenRemote Timline
6
+ Web Component for displaying a timeline control.
7
+
8
+ ## Install
9
+ ```bash
10
+ npm i @openremote/or-timeline
11
+ yarn add @openremote/or-timeline
12
+ ```
13
+
14
+ ## Usage
15
+ For a full list of properties, methods and options refer to the TypeDoc generated [documentation]().
16
+
17
+
18
+ ## Supported Browsers
19
+ The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition,
20
+ Internet Explorer 11 is also supported.
21
+
22
+
23
+ ## License
24
+ [GNU AGPL](https://www.gnu.org/licenses/agpl-3.0.en.html)
25
+
26
+ [npm-image]: https://img.shields.io/npm/v/live-xxx.svg
27
+ [npm-url]: https://npmjs.org/package/@openremote/or-timeline
28
+ [travis-image]: https://img.shields.io/travis/live-js/live-xxx/master.svg
29
+ [travis-url]: https://travis-ci.org/live-js/live-xxx
30
+ [coveralls-image]: https://img.shields.io/coveralls/live-js/live-xxx/master.svg
31
+ [coveralls-url]: https://coveralls.io/r/live-js/live-xxx?branch=master
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.20240512154942",
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.20240512154942"
24
+ },
25
+ "publishConfig": {
26
+ "access": "public"
25
27
  }
26
- }
28
+ }
package/dist/index.d.ts DELETED
@@ -1 +0,0 @@
1
- export {};
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":"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"}
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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"}
package/src/index.ts DELETED
@@ -1,254 +0,0 @@
1
- import {html, LitElement, property} from 'lit-element';
2
-
3
- import moment from 'moment';
4
-
5
- class OrTimeline extends LitElement {
6
- protected render() {
7
- if(this.shadowRoot){
8
- const range:any = this.shadowRoot.getElementById('or-timeline-slider');
9
- if(range) {
10
- range.value = Math.round(this.current);
11
- this.moveBubble(range);
12
- }
13
- }
14
-
15
- return html`
16
- <style>
17
- :host {
18
- position: relative;
19
- }
20
- .timeline-container {
21
- display: block;
22
- height: 52px;
23
- background-color: var(--app-white, #FFFFFF);
24
-
25
- -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.28);
26
- -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.28);
27
- box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.28);
28
-
29
- padding-top: 20px;
30
- }
31
- .slidecontainer {
32
- position: relative;
33
- margin: -5px 50px 0 30px;
34
- }
35
-
36
- /* The slider itself */
37
- .slider {
38
- box-sizing: border-box;
39
- -webkit-appearance: none; /* Override default CSS styles */
40
- appearance: none;
41
- width: calc(100% + 20px);
42
- margin-left: -10px;
43
- height: 12px;
44
- background: #bdbdbd; /* Grey background */
45
- outline: none; /* Remove outline */
46
- opacity: 1; /* Set transparency (for mouse-over effects on hover) */
47
- -webkit-transition: .2s; /* 0.2 seconds transition on hover */
48
- transition: opacity .2s;
49
-
50
- border-radius: 6px;
51
- cursor: pointer;
52
- }
53
-
54
- /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
55
- .slider::-webkit-slider-thumb {
56
- -webkit-appearance: none;
57
- appearance: none;
58
- width: 18px;
59
- height: 18px;
60
- margin: 0;
61
- border-radius: 50%;
62
- cursor: pointer;
63
- border: 0 !important;
64
- background-color: var(--timeline-accent, blue); /* Green background */
65
- }
66
-
67
- .slider::-ms-thumb,
68
- .slider::-moz-range-thumb,
69
- .slider::-webkit-slider-thumb {
70
- width: 18px;
71
- height: 18px;
72
- margin: 0;
73
- border-radius: 50%;
74
- cursor: pointer;
75
- border: 0 !important;
76
- background-color: var(--timeline-accent, blue); /* Green background */
77
- }
78
-
79
- #timelineHourMarkers {
80
- position: relative;
81
- display: -webkit-box;
82
- display: -moz-box;
83
- display: -ms-flexbox;
84
- display: -webkit-flex;
85
- display: flex;
86
- -webkit-box-orient: horizontal;
87
- -moz-box-orient: horizontal;
88
- -webkit-box-direction: normal;
89
- -moz-box-direction: normal;
90
- -webkit-flex-direction: row;
91
- -ms-flex-direction: row;
92
- flex-direction: row;
93
-
94
- margin: 0 50px 0 30px;
95
- }
96
-
97
- #timelineHourMarkers > .timelineHourMark{
98
- display: flex;
99
- flex: 1 100%;
100
- flex-grow: 1;
101
- flex-shrink: 1;
102
- flex-basis: 100%;
103
-
104
- overflow: visible;
105
- color: var(--timeline-grey, darkgrey);
106
- border-left: 1px solid var(--timeline-grey, darkgrey);
107
- font-size: 12px;
108
- -webkit-user-select: none;
109
- -moz-user-select: none;
110
- -ms-user-select: none;
111
- user-select: none;
112
- padding-left: 4px;
113
- padding-bottom: 4px;
114
- }
115
- #timelineHourMarkers .timelineHourMark:last-child {
116
- position: absolute;
117
- right: -25px;
118
- }
119
-
120
- #range-value {
121
- position: absolute;
122
- background-color: var(--timeline-accent, blue);
123
- height: 30px;
124
- width: 60px;
125
- margin-left: -30px;
126
- text-align: center;
127
- color: white;
128
- display: inline-block;
129
- left: 0;
130
- font-size: 12px;
131
- font-weight: bold;
132
- line-height: 30px;
133
- }
134
-
135
- .time-value-container {
136
- width: calc(100% - 80px);
137
- display: block;
138
- position: relative;
139
- height: 30px;
140
- margin: 0 50px 0 30px;
141
- }
142
- </style>
143
-
144
-
145
- <div class="time-value-container">
146
- <div id="range-value">${this.current === 0 ? 'LIVE' : moment().add(this.current, 'minutes').format('HH:mm')}</div>
147
- </div>
148
- <div class="timeline-container">
149
- <div id="timelineHourMarkers" class="layout horizontal justified style-scope controller-timeline">
150
- ${new Array((this.maxRange/60)+1).fill(0).map((_, idx) => {
151
- return html`
152
- ${idx === 0 ? html`
153
- <div class="timelineHourMark style-scope controller-timeline">Nu</div>
154
- ` : html`
155
- <div class="timelineHourMark style-scope controller-timeline">+${idx}u</div>
156
- `}
157
- `})}
158
- </div>
159
-
160
- <div class="slidecontainer">
161
- <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}">
162
- </div>
163
- </div>
164
-
165
- `;
166
- }
167
- // default value in minutes
168
- @property({type: Function})
169
- private onChange: any;
170
-
171
- // default value in minutes
172
- @property({type: Number})
173
- private value: number = 0;
174
-
175
- // default value in minutes
176
- @property({type: Number})
177
- public current: number = 0;
178
-
179
- // maxRange in minutes
180
- @property({type: Number})
181
- private maxRange: number = 360;
182
-
183
- // minRange in minutes
184
- @property({type: Number})
185
- private minRange: number = 0;
186
-
187
- // Steps in minutes
188
- @property({type: Number})
189
- private step: number = 5;
190
-
191
- moveBubble(e:any=null, value:string|null=null) {
192
- let el;
193
- if(e){
194
- el = e.target;
195
- } else {
196
- if(this.shadowRoot){
197
- el = this.shadowRoot.getElementById('or-timeline-slider');
198
- }
199
- }
200
-
201
- if(el) {
202
- if(value){
203
- this.current = parseInt(value);
204
- } else {
205
- this.current = parseInt(el.value);
206
- }
207
- // Measure width of range input
208
- const width = el.offsetWidth;
209
- const v = this.current;
210
-
211
- // Figure out placement percentage between left and right of input
212
- const newPoint = v / this.maxRange;
213
- // Janky value to get pointer to line up better
214
- let offset = 30;
215
- let newPlace;
216
-
217
- // Prevent bubble from going beyond left or right (unsupported browsers)
218
- if (newPoint < 0) {
219
- newPlace = 0;
220
- } else if (newPoint > 1) {
221
- newPlace = width - offset;
222
- } else {
223
- newPlace = (width - offset) * newPoint;
224
-
225
- if(newPlace < 0 ) {
226
- newPlace = 0;
227
- }
228
-
229
- }
230
-
231
- // Move bubble
232
- if(this.shadowRoot) {
233
- const range:HTMLElement | null = this.shadowRoot.getElementById('range-value');
234
- if(range){
235
- range.style.left = newPlace + "px";
236
- }
237
- }
238
- }
239
-
240
- }
241
-
242
- valueChange (e:any) {
243
- this.moveBubble(e);
244
- this.onChange();
245
- }
246
-
247
- constructor() {
248
- super();
249
- }
250
-
251
-
252
- }
253
-
254
- window.customElements.define('or-timeline', OrTimeline);
package/tsconfig.json DELETED
@@ -1,14 +0,0 @@
1
- {
2
- "extends": "../../tsconfig",
3
- "compilerOptions": {
4
- "outDir": "./dist/",
5
- "rootDir": "src"
6
- },
7
- "include": [
8
- "./src"
9
- ],
10
- "references": [
11
- { "path": "../core" },
12
- { "path": "../rest" }
13
- ]
14
- }