Skip to content

Commit c5cc87d

Browse files
valididevalidide
committed
Added samples
1 parent 35d8aab commit c5cc87d

File tree

9 files changed

+379
-5
lines changed

9 files changed

+379
-5
lines changed

‎docs/demo/css/demo-counter-js.css

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.js-counter * {
2+
font-size: 200%;
3+
}
4+
5+
.js-counter span {
6+
width: 4rem;
7+
display: inline-block;
8+
text-align: center;
9+
}
10+
11+
.js-counter button {
12+
width: 64px;
13+
height: 64px;
14+
border: none;
15+
border-radius: 10px;
16+
background-color: royalblue;
17+
color: white;
18+
}

‎docs/demo/demo-counter-embedded.html

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Micro Front Ends</title>
7+
<meta name="description" content="Micro Front Ends">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
10+
<style>
11+
span {
12+
width: 4rem;
13+
display: inline-block;
14+
text-align: center;
15+
font-size: 200%;
16+
}
17+
18+
button {
19+
width: 64px;
20+
height: 64px;
21+
border: none;
22+
border-radius: 10px;
23+
background-color: greenyellow;
24+
color: white;
25+
font-size: 200%;
26+
}
27+
28+
#embedded-counter {
29+
text-align: center;
30+
}
31+
32+
</style>
33+
</head>
34+
35+
<body>
36+
<div id="embedded-counter"></div>
37+
<script src="./lib/bundle/index.js"></script>
38+
<script src="./js/boilerplate.js"></script>
39+
<script src="./js/demo-counter-js.js"></script>
40+
<script>
41+
(function (window, boilerplate, ufe, undefined) {
42+
var counter = null;
43+
var communicationHandler = null;
44+
45+
// Only initialize this if we are loaded as a child frame
46+
if (window.parent !== window) {
47+
var manager = new ufe.CrossWindowCommunicationsManager(
48+
window, //inboundEndpoint: Window
49+
ufe.CommunicationsEvent.CONTAINER_EVENT_TYPE,
50+
window.parent, //outboundEndpoint: Window
51+
ufe.CommunicationsEvent.CONTENT_EVENT_TYPE,
52+
ufe.getUrlOrigin(document, window.location.href) // You might want to configure this server side
53+
);
54+
manager.initialize();
55+
var contentMethods = new ufe.ContentCommunicationHandlerMethods();
56+
contentMethods.dispose = function() { dispose(); };
57+
communicationHandler = new ufe.CrossWindowContentCommunicationHandler(
58+
manager,
59+
contentMethods
60+
);
61+
}
62+
63+
function dispose() {
64+
if (communicationHandler) {
65+
communicationHandler.dispatchBeforeDispose();
66+
}
67+
68+
setTimeout(() => {
69+
disposeCore();
70+
}, 1_000)
71+
}
72+
73+
function disposeCore() {
74+
75+
submitHandler = null;
76+
if (communicationHandler) {
77+
communicationHandler.dispatchDisposed();
78+
communicationHandler.dispose();
79+
}
80+
communicationHandler = null;
81+
console.log('EmbeddedCounter Disposed. Count: ' + counter.count);
82+
counter.dispose();
83+
}
84+
85+
86+
87+
function intiActions() {
88+
counter = new window.demo_components.MyCounterJavaScript(document.getElementById('embedded-counter'));
89+
if (communicationHandler) {
90+
// Simulate a delay to consider existing processing
91+
window.setTimeout(() => {
92+
communicationHandler.dispatchMounted();
93+
}, 1_000);
94+
}
95+
}
96+
97+
boilerplate.ready(function () {
98+
intiActions();
99+
});
100+
})(window, window.__boilerplate, window.validide_uFrontEnds, void (0))
101+
</script>
102+
</body>
103+
104+
</html>

‎docs/demo/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,27 @@
2424
<h1>Counter integration options demo</h1>
2525
</div>
2626
</div>
27+
<div class="row">
28+
<div class="col text-center">
29+
<h6>Toggle a classic JavaScript counter child</h6>
30+
<button class="btn btn-primary" id="toggler-js">Toggle JS Counter</button>
31+
</div>
32+
<div class="col text-center" id="js-container"></div>
33+
</div>
2734
<div class="row">
2835
<div class="col text-center">
2936
<h6>Toggle a custom element counter child</h6>
3037
<button class="btn btn-primary" id="toggler-ce">Toggle CE Counter</button>
3138
</div>
3239
<div class="col text-center" id="ce-container"></div>
3340
</div>
41+
<div class="row">
42+
<div class="col text-center">
43+
<h6>Toggle an embedded counter child</h6>
44+
<button class="btn btn-primary" id="toggler-embedded">Toggle Embedded Counter</button>
45+
</div>
46+
<div class="col text-center" id="embedded-container"></div>
47+
</div>
3448
</div>
3549
<script>
3650
(function() {

‎docs/demo/js/demo-counter-ce.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@
141141
this.communicationHandler.dispose();
142142
this.communicationHandler = null;
143143

144-
console.log('Count: ' + this.count);
144+
console.log('MyCounterElementWrapper Disposed. Count: ' + this.count);
145145
// Call the super's dispose method if you have one
146146
// super.dispose();
147147
}

‎docs/demo/js/demo-counter-js.js

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
(function (window, ufe, undefined) {
2+
'use strict';
3+
4+
class MyCounterJavaScript {
5+
constructor(parentEl) {
6+
this.parentEl = parentEl;
7+
this.count = 0;
8+
9+
this.initialize();
10+
}
11+
12+
initialize() {
13+
this.parentEl.innerHTML = `
14+
<button id="dec">-</button>
15+
<span>${this.count}</span>
16+
<button id="inc">+</button>
17+
`;
18+
this.buttonInc = this.parentEl.querySelector('#inc');
19+
this.buttonDec = this.parentEl.querySelector('#dec');
20+
this.spanValue = this.parentEl.querySelector('span');
21+
22+
this.incCb = this.inc.bind(this);
23+
this.decCb = this.dec.bind(this);
24+
25+
this.buttonInc.addEventListener('click', this.incCb, false);
26+
this.buttonDec.addEventListener('click', this.decCb, false);
27+
}
28+
29+
dispose() {
30+
this.buttonInc.removeEventListener('click', this.incCb, false);
31+
this.buttonDec.removeEventListener('click', this.decCb, false);
32+
this.incCb = null;
33+
this.decCb = null;
34+
this.buttonInc = null;
35+
this.buttonDec = null;
36+
this.spanValue = null;
37+
this.parentEl.innerHTML = '';
38+
this.parentEl = null;
39+
}
40+
41+
inc() {
42+
this.count++;
43+
this.update();
44+
}
45+
46+
dec() {
47+
this.count--;
48+
this.update();
49+
}
50+
51+
update() {
52+
this.spanValue.innerText = this.count;
53+
}
54+
}
55+
56+
57+
58+
class MyCounterJavaScriptWrapper extends MyCounterJavaScript {
59+
60+
constructor(parentEl) {
61+
super(parentEl);
62+
}
63+
64+
initialize() {
65+
super.initialize();
66+
67+
var manager = new ufe.HTMLElementCommunicationsManager(
68+
this.parentEl,
69+
ufe.CommunicationsEvent.CONTAINER_EVENT_TYPE,
70+
this.parentEl,
71+
ufe.CommunicationsEvent.CONTENT_EVENT_TYPE
72+
);
73+
manager.initialize();
74+
var contentMethods = new ufe.ContentCommunicationHandlerMethods();
75+
contentMethods.dispose = () => this.disposeHandler();
76+
this.communicationHandler = new ufe.InWindowContentCommunicationHandler(manager, contentMethods);
77+
78+
// Simulate a delay in the initialization
79+
window.setTimeout(() => {
80+
this.communicationHandler.dispatchMounted(); // Signal to the parent that the component has finished mounting
81+
}, 1_000);
82+
}
83+
84+
inc() {
85+
// Signal that we are processing stuff
86+
this.communicationHandler.dispatchBeforeUpdate();
87+
super.inc();
88+
// Simulate call to server or other long running operation
89+
setTimeout(() => {
90+
this.communicationHandler.dispatchUpdated();
91+
}, 1_000);
92+
}
93+
94+
dec() {
95+
// Signal that we are processing stuff
96+
this.communicationHandler.dispatchBeforeUpdate();
97+
super.dec();
98+
// Simulate call to server or other long running operation
99+
setTimeout(() => {
100+
this.communicationHandler.dispatchUpdated();
101+
}, 1_000);
102+
}
103+
104+
disposeHandler() {
105+
// Signal the dispose to the root component
106+
this.communicationHandler.dispatchBeforeDispose();
107+
108+
// Give the root component a chance to react
109+
setTimeout(() => { this.dispose(); }, 1_000)
110+
}
111+
112+
dispose() {
113+
// Dispose any resources you might have allocated in the wrapper
114+
this.communicationHandler.dispatchDisposed();
115+
this.communicationHandler.dispose();
116+
this.communicationHandler = null;
117+
118+
console.log('MyCounterJavaScriptWrapper Disposed. Count: ' + this.count);
119+
// Call the super's dispose method
120+
super.dispose();
121+
}
122+
}
123+
124+
window.demo_components = window.demo_components || {};
125+
window.demo_components.MyCounterJavaScript = MyCounterJavaScript;
126+
window.demo_components.MyCounterJavaScriptWrapper = MyCounterJavaScriptWrapper;
127+
128+
})(window, window.validide_uFrontEnds, void 0);

0 commit comments

Comments
 (0)