-
Notifications
You must be signed in to change notification settings - Fork 1
/
flow.html
130 lines (117 loc) · 4.52 KB
/
flow.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>flow</title>
<script type="module" src="https://js.arcgis.com/calcite-components/1.0.0-beta.91/calcite.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.0.0-beta.91/calcite.css" />
<style>
h1,
calcite-flow {
margin-bottom: 5rem;
}
h2 {
margin-bottom: 3rem;
}
body {
font-family: var(--calcite-sans-family);
font-size: var(--calcite-font-size-0);
color: var(--calcite-ui-text-1);
max-width: 1024px;
min-width: 280px;
width: 70vw;
padding: 0 var(--calcite-spacing-double);
margin: 0 auto;
background-color: var(--calcite-ui-background);
}
/* Theme Switcher */
#theme-label {
position: fixed;
top: 20px;
right: 20px;
z-index: 2;
background-color: var(--calcite-ui-background);
border: 1px solid;
border-color: var(--calcite-ui-border-1);
border-radius: var(--calcite-border-radius);
margin: 0;
padding: 10px;
}
#theme-label label {
margin: 0;
}
</style>
</head>
<body>
<main>
<!-- calcite-switch -->
<div id="theme-label">
<calcite-label layout="inline">
Toggle theme
<calcite-switch id="theme-switch"></calcite-switch>
</calcite-label>
</div>
<h1><code>flow</code></h1>
<h2>Test 1. Flow</h2>
<calcite-flow>
<calcite-panel heading="Parent panel">
</calcite-panel>
<calcite-panel heading="Child panel that will be removed when selecting 'back'">
</calcite-panel>
</calcite-flow>
<h2>Test 2. Flow with footer actions</h2>
<calcite-flow>
<calcite-panel heading="What are the most popular commute alternatives?">
<calcite-button slot="footer-actions" appearance="outline" label="Save button for display purposes only">Save</calcite-button>
<calcite-button slot="footer-actions" appearance="outline" label="Cancel button for display purposes only">Cancel</calcite-button>
</calcite-panel>
</calcite-flow>
<h2>Test 3. Add new items to Flow</h2>
<calcite-button id="add-panel" appearance="solid" icon-end="plus" scale="l" label="Add a new flow item">Add Flow Item</calcite-button>
<br><br>
<h3>Adds panel to flow:</h3>
<calcite-flow id="flow">
<calcite-panel heading="Parent panel" summary="Select the 'Add Flow Item' button to add in additional panels.">
<calcite-button slot="footer-actions" class="btn" appearance="outline" label="Save button for display purposes only">Save</calcite-button>
<calcite-button slot="footer-actions" class="btn btn-secondary" appearance="outline" label="Cancel button for display purposes only">Cancel</calcite-button>
</calcite-panel>
</calcite-flow>
</main>
</body>
<script>
window.onload = () => {
// Theme Switcher
const themeSwitch = document.getElementById("theme-switch");
themeSwitch.addEventListener("calciteSwitchChange", () => {
document.body.classList.toggle("calcite-theme-dark");
});
};
// Add a new panel to the flow (test 3)
const flowNode = document.getElementById("flow");
const addFlowButtonNode = document.getElementById("add-panel");
addFlowButtonNode.addEventListener("click", function () {
const newNode = document.createElement("calcite-panel");
newNode.beforeBack = function () {
newNode.loading = true;
newNode.disabled = true;
return new Promise((resolve) =>
setTimeout(() => {
newNode.disabled = false;
newNode.loading = false;
resolve();
}, 1000)
);
};
newNode.heading = "Item " + (flowNode.childElementCount + 1);
newNode.summary = "Child panel that will be removed when selecting 'back'.";
newNode.innerHTML = `
<p><img src="https://placeimg.com/300/200/nature" alt="nature" /></p>
<calcite-action label="pencil icon" slot="menu-actions" icon="pencil"></calcite-action>
<calcite-button slot="footer-actions" appearance="outline">Save</calcite-button>
<calcite-button slot="footer-actions" appearance="outline">Cancel</calcite-button>
`;
flowNode.appendChild(newNode);
});
</script>
</html>