@eric-skaftason/web-components 1.0.0
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.
- package/LICENSE +339 -0
- package/README.md +2 -0
- package/index.js +0 -0
- package/package.json +19 -0
- package/src/card/card.html +7 -0
- package/src/card/card.js +102 -0
- package/src/card/card_container.html +16 -0
- package/src/card/styles/default.css +12 -0
- package/src/card/styles/flat.css +7 -0
- package/src/card/styles/universal.css +65 -0
- package/src/dropdown/dropdown.js +120 -0
- package/src/dropdown/dropdown_element.html +27 -0
- package/src/dropdown/dropdown_menu.html +58 -0
- package/src/modal/list_add_element/list_add_element.html +44 -0
- package/src/modal/list_add_element/list_add_element.js +53 -0
- package/src/modal/list_element/list_element.html +42 -0
- package/src/modal/list_element/list_element.js +28 -0
- package/src/modal/list_input/list_input.html +28 -0
- package/src/modal/list_input/list_input.js +174 -0
- package/src/modal/menu_body/menu_body.html +38 -0
- package/src/modal/menu_body/menu_body.js +22 -0
- package/src/modal/menu_button/menu_button.html +32 -0
- package/src/modal/menu_button/menu_button.js +15 -0
- package/src/modal/menu_controller/menu_controller.html +22 -0
- package/src/modal/menu_controller/menu_controller.js +38 -0
- package/src/modal/menu_controls/menu_controls.html +19 -0
- package/src/modal/menu_controls/menu_controls.js +15 -0
- package/src/modal/menu_header/menu_header.html +16 -0
- package/src/modal/menu_header/menu_header.js +15 -0
- package/src/modal/menu_text/menu_text.html +18 -0
- package/src/modal/menu_text/menu_text.js +15 -0
- package/src/modal/menu_title/menu_title.html +21 -0
- package/src/modal/menu_title/menu_title.js +15 -0
- package/src/modal/modal_menu/modal_menu.html +39 -0
- package/src/modal/modal_menu/modal_menu.js +42 -0
- package/src/modal/modal_menu.js +15 -0
- package/src/modal-lite/modal_menu.css +122 -0
- package/src/nav_bar/nav_bar.html +178 -0
- package/src/nav_bar/nav_bar.js +50 -0
- package/src/progress_bar/progress_bar.html +21 -0
- package/src/progress_bar/progress_bar.js +58 -0
- package/tests/card.html +17 -0
- package/tests/dropdown.html +0 -0
- package/tests/modal.html +0 -0
- package/tests/nav_bar.html +0 -0
- package/tests/progress_bar.html +0 -0
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
class ProgressBar extends HTMLElement {
|
|
2
|
+
constructor() {
|
|
3
|
+
super();
|
|
4
|
+
this.attachShadow({ mode: 'open' });
|
|
5
|
+
this.calibration;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
async connectedCallback() {
|
|
9
|
+
const response = await fetch('/components/progress_bar/progress_bar.html');
|
|
10
|
+
const html = await response.text();
|
|
11
|
+
this.shadowRoot.innerHTML = html;
|
|
12
|
+
|
|
13
|
+
this.calibration = JSON.parse(this.getAttribute('data-calibration'));
|
|
14
|
+
|
|
15
|
+
this.bar_container = this.shadowRoot.querySelector('.bar_container');
|
|
16
|
+
this.bar = this.shadowRoot.querySelector('.bar');
|
|
17
|
+
|
|
18
|
+
// Set colour
|
|
19
|
+
const container_color = this.getAttribute('containerColor');
|
|
20
|
+
if (container_color) this.bar_container.style.backgroundColor = container_color;
|
|
21
|
+
|
|
22
|
+
const bar_color = this.getAttribute('barColor');
|
|
23
|
+
if (bar_color) this.bar.style.backgroundColor = bar_color;
|
|
24
|
+
|
|
25
|
+
// Set dimensions
|
|
26
|
+
const width = this.getAttribute('width');
|
|
27
|
+
const height = this.getAttribute('height');
|
|
28
|
+
if (width) this.bar_container.style.width = `${width}px`;
|
|
29
|
+
if (height) this.bar_container.style.height = `${height}px`;
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
// Bar movement
|
|
33
|
+
this.update(0);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
update(checkpointIndex = 0) {
|
|
37
|
+
const checkpoints = this.calibration.checkpoints;
|
|
38
|
+
|
|
39
|
+
if (checkpointIndex >= checkpoints.length) return;
|
|
40
|
+
|
|
41
|
+
const current_checkpoint = checkpoints[checkpointIndex];
|
|
42
|
+
const percent = current_checkpoint[0];
|
|
43
|
+
const ms = current_checkpoint[1];
|
|
44
|
+
const transition = current_checkpoint[2] || 'linear';
|
|
45
|
+
|
|
46
|
+
this.bar.offsetWidth; // browser recalculates layout to ensure first transition occurs properly
|
|
47
|
+
this.bar.style.transition = `width ${ms}ms ${transition}`; // smooth transition
|
|
48
|
+
|
|
49
|
+
this.bar.style.width = `${percent}%`;
|
|
50
|
+
|
|
51
|
+
setTimeout(() => {
|
|
52
|
+
this.update(checkpointIndex + 1)
|
|
53
|
+
}, ms);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
customElements.define('progress-bar', ProgressBar);
|
package/tests/card.html
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Card</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<card-container>
|
|
10
|
+
<page-card variant="flat">Card1</page-card>
|
|
11
|
+
<page-card link="example.com">Card1</page-card>
|
|
12
|
+
<page-card>Card1</page-card>
|
|
13
|
+
</card-container>
|
|
14
|
+
|
|
15
|
+
<script src="../src/card/card.js"></script>
|
|
16
|
+
</body>
|
|
17
|
+
</html>
|
|
File without changes
|
package/tests/modal.html
ADDED
|
File without changes
|
|
File without changes
|
|
File without changes
|