-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
234 lines (203 loc) · 9.83 KB
/
index.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>DC demo</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/themes/prism-okaidia.css">
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@deleteagency/live-highlight@0.0.1/build/live-highlight.min.js"></script>
<script src="dist/dc.min.js"></script>
</head>
<script>
LiveHighlight.bootstrap((element, type) => {
function getLanguage(type) {
switch (type) {
case LiveHighlight.TYPE_JAVASCRIPT:
return 'js';
case LiveHighlight.TYPE_STYLES:
return 'css';
case LiveHighlight.TYPE_HTML:
return 'markup';
}
}
element.className = `lang-${getLanguage(type)}`;
Prism.highlightElement(element);
});
</script>
<style>
.example {
position: relative;
padding: 1rem;
margin: 1rem -15px 0;
border: solid #F8F9FA;
border-width: .2rem 0 0
}
@media (min-width: 576px) {
.example {
padding: 1.5rem;
margin-right: 0;
margin-left: 0;
border-width: .2rem
}
}
</style>
<body>
<div class="py-4">
<div class="container">
<h1>DC Examples</h1>
<div class="mb-5">
<h2>Simple example</h2>
<p>
To enable your component's logic on some DOM element you can either
</p>
<ul>
<li>
Add <b>data-dc-${namespace}</b> attribute to the element,
when "namespace" is the value of the getNamespace() static method of the component class.
</li>
<li>
If you can't or don't want to use default searching strategy
pass second argument of the dcFactory.register to set css selector which will be used for searching elements
</li>
</ul>
<div data-live-highlight-target="simple"></div>
<div class="example mb-5">
<div class="collapsed" data-live-highlight="simple" data-dc-collapsed='{"speed": 500, "ease": "linear"}'>
<button class="collapsed__button btn btn-primary mt-2 mb-2" data-dc-collapsed-ref="button">
Toggle
</button>
<div class="collapse card card-body" data-dc-collapsed-ref="content">
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
<div class="collapsed" data-dc-collapsed='{"speed": 500, "ease": "linear"}'>
<button class="collapsed__button btn btn-primary mt-2 mb-2" data-dc-collapsed-ref="button">
Nested Toggle
</button>
<div class="collapse card card-body" data-dc-collapsed-ref="content">
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
</div>
</div>
</div>
</div>
</div>
<script data-live-highlight="simple">
class CollapsedComponent extends DcBaseComponent {
static namespace = 'collapsed';
static requiredRefs = ['button', 'content'];
init = () => {
console.log('CollapsedComponent was instantiated on the element', this.element);
console.log('Options', this.options);
console.log('Refs', this.refs);
this.addListener(this.refs.button, 'click', this.onClick);
}
onClick = () => {
if (this.refs.content.classList.contains('show')) {
this.refs.content.classList.remove('show');
} else {
this.refs.content.classList.add('show');
}
}
}
</script>
<p>
Call dcFactory.register with your components, and then starts the factory by calling
dcFactory.init(document.body)
</p>
<script data-live-highlight>
dcFactory.register(CollapsedComponent);
dcFactory.init(document.body);
</script>
</div>
<div class="mb-5">
<h2>Lazy initialization</h2>
<p>
You can defer your components initialization by marking its element or any of its parents with
<b>data-dc-lazy</b> attribute.
Passing an additional argument withLazy equals false to dcFactory.init(element, withLazy = true) you can manage whether or not components which are marked as lazy should be created.
It can be useful when some component(s) require specific action to become visible and interactive. (For example if you want to initialize components within the modal only when it is opened)
After those action have happened you can call dcComponent(element, true) and all component within the element will be created despite the data-dc-lazy attribute
</p>
<p>
Example below shows that one of the message components won't be created until the button is clicked
</p>
<div data-live-highlight-target="lazy"></div>
<div class="mb-5">
<style>
.message {
padding: 20px;
background-color: lightgray;
}
.is-hidden {
display: none;
}
</style>
<div data-live-highlight="lazy">
<div class="message" data-dc-message='{"message": "I am created at once"}'>
</div>
<button id="lazy-trigger-button"
class="btn btn-primary mt-2 mb-2">Create lazy components
</button>
<div id="lazy-target" data-dc-lazy class="is-hidden">
<div class="message "
data-dc-message='{"message": "I am created once button is clicked"}'>
</div>
</div>
</div>
</div>
<script data-live-highlight="lazy">
class MessageComponent extends DcBaseComponent {
static namespace = 'message';
init() {
console.log('MessageComponent is created on node', this.element);
this.element.innerText = this.options.message;
}
}
dcFactory.register(MessageComponent);
dcFactory.init(document.body, false);
const lazyTriggerButton = document.getElementById('lazy-trigger-button');
const lazyTarget = document.getElementById('lazy-target');
lazyTriggerButton.addEventListener('click', () => {
lazyTarget.classList.remove('is-hidden');
dcFactory.init(lazyTarget, true);
})
</script>
</div>
<div class="mb-5">
<h2>Async Loading</h2>
<p>
You can defer your components loading by changing the way of registering components.
This technique compliments Webpack dynamic imports: webpack creates a separate chunk for the component on the build step.
</p>
<p>
The second argument in <i>dcAsync</i> should be the component's namespace.
This value will also replace components <i>namespace</i> static method so you don't have to declare component namespace twice.
</p>
<p>
The async loading is more powerful with lazy initialization.
In this case, the component's chunk will be loaded only after dcFactory tries to initialize it.
</p>
<div id="async-example" data-dc-lazy data-dc-test-async-component></div>
<button id="async-trigger-button"
class="btn btn-primary mt-2 mb-2">Init lazy component combined with async
</button>
<script>
dcFactory.register(dcAsync(() => import('./demo/test-async-component.js')), '[data-dc-test-async-component]');
const asyncTriggerButton = document.getElementById('async-trigger-button');
asyncTriggerButton.addEventListener('click', () => {
dcFactory.init(document.getElementById('async-example'), true);
})
</script>
<p>
In Network tab you can see that the whole code of the component is downloaded separately
</p>
</div>
</div>
</div>
</body>
</html>