Skip to content

Commit 00e0085

Browse files
valididevalidide
committed
Added moda sample
1 parent 4eb89dc commit 00e0085

File tree

10 files changed

+254
-5
lines changed

10 files changed

+254
-5
lines changed

‎docs/css/app.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,3 +65,31 @@
6565
transform: rotate(360deg);
6666
}
6767
}
68+
69+
#global-loading {
70+
position: fixed;
71+
top: 0;
72+
left: 0;
73+
width: 100%;
74+
height: 100%;
75+
z-index: 2000;
76+
}
77+
78+
#global-loading:before {
79+
box-sizing: border-box;
80+
content: " ";
81+
width: 100%;
82+
height: 100%;
83+
display: block;
84+
background-color: #fff;
85+
opacity: 0.8;
86+
}
87+
88+
89+
.iframe-modal-content iframe{
90+
position: fixed;
91+
top: 0;
92+
left: 0;
93+
width: 100%;
94+
height: 100%;
95+
}

‎docs/empty.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ <h5 class="my-0 mr-md-auto font-weight-normal">JavaScript Browser Utilities</h5>
2323
<h1>JavaScript Browser Utilities</h1>
2424
</div>
2525

26+
2627
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
2728
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
2829
crossorigin="anonymous"></script>

‎docs/index.html

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,10 +128,22 @@ <h4>Events</h4>
128128
</div>
129129
</div>
130130
</article>
131+
<article>
132+
<h3>Modal Content IframeLoader</h3>
133+
<div class="container">
134+
<div class="row">
135+
<div class="col-12">
136+
<a role="button" href="javascript:void(0)" class="btn btn-primary" id="open-modal">Open Modal</a>
137+
<div data-code="js-IframeLoader-modal"></div>
138+
</div>
139+
</div>
140+
</div>
141+
</article>
131142
</section>
132143
</section>
133144
</div>
134145

146+
135147
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
136148
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
137149
crossorigin="anonymous"></script>
@@ -401,6 +413,74 @@ <h4>Events</h4>
401413
});
402414
})();
403415
</script>
416+
<script data-lang="js" id="js-IframeLoader-modal">
417+
(function () {
418+
var contentLoader = null;
419+
var btn = document.getElementById('open-modal');
420+
btn.addEventListener('click', openModal);
421+
422+
function openModal(e) {
423+
e.target.setAttribute('disabled', 'disabled');
424+
if (contentLoader)
425+
return; // Should not happen but better be safe.
426+
427+
contentLoader = new validide_jbu
428+
.IframeLoader(window, {
429+
url: './modal-iframe-content.html',
430+
parent: 'body',
431+
events: {
432+
beforeCreate: eventHander,
433+
created: eventHander,
434+
beforeUpdate: eventHander,
435+
updated: eventHander,
436+
beforeDestroy: eventHander,
437+
destroyed: eventHander
438+
},
439+
iframeAttributes: {
440+
'allowtransparency': 'true',
441+
'frameborder': 0
442+
}
443+
});
444+
}
445+
446+
var eventHander = function (e) {
447+
console.log(e);
448+
switch (e.type) {
449+
case 'beforeCreate': {
450+
window.app.setPageLoadingState(true);
451+
break;
452+
}
453+
case 'created': {
454+
e.el.classList.add('d-none');
455+
break;
456+
}
457+
case 'beforeUpdate': {
458+
window.app.setPageLoadingState(true);
459+
break;
460+
}
461+
case 'updated': {
462+
e.el.classList.remove('d-none');
463+
e.el.classList.add('iframe-modal-content');
464+
window.app.setPageLoadingState(false);
465+
break;
466+
}
467+
case 'beforeDestroy': {
468+
window.app.setPageLoadingState(true);
469+
break;
470+
}
471+
case 'destroyed': {
472+
window.app.setPageLoadingState(false);
473+
contentLoader = null;
474+
btn.removeAttribute('disabled');
475+
break;
476+
}
477+
478+
default:
479+
break;
480+
}
481+
};
482+
})();
483+
</script>
404484
</body>
405485

406486
</html>

‎docs/js/app.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,25 @@
8585
});
8686
}
8787

88+
function setPageLoadingState(loading) {
89+
//loader-absolute
90+
var globalLoader = document.getElementById('global-loading');
91+
if (!globalLoader) {
92+
globalLoader = document.createElement('div');
93+
globalLoader.id = 'global-loading';
94+
globalLoader.classList.add('d-none');
95+
globalLoader.classList.add('loader-absolute');
96+
globalLoader.innerHTML = '<div class="loader"></div>';
97+
document.body.appendChild(globalLoader);
98+
}
99+
100+
if (loading) {
101+
globalLoader.classList.remove('d-none');
102+
} else {
103+
globalLoader.classList.add('d-none');
104+
}
105+
}
106+
88107
function init() {
89108
highlight();
90109
}
@@ -97,6 +116,7 @@
97116
removeLoader: removeLoader,
98117
ready: ready,
99118
setQueryParms: setQueryParms,
119+
setPageLoadingState: setPageLoadingState,
100120
init: init
101121
};
102122
})(window, window.hljs, void 0);

‎docs/lib/bundle/index.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/lib/bundle/index.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/modal-iframe-content.html

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>JavaScript Browser Utilities</title>
7+
<meta name="description" content="JavaScript Browser Utilities Library">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
10+
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
11+
<link rel="stylesheet" href="./css/app.css" />
12+
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
13+
<style>
14+
html,
15+
body {
16+
height: 100%;
17+
}
18+
19+
body {
20+
background-color: #f8f9fa;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
27+
aria-hidden="true">
28+
<div class="modal-dialog modal-xl" role="document">
29+
<div class="modal-content">
30+
<div class="modal-header">
31+
<h5 class="modal-title" id="exampleModalLabel">JavaScript Browser Utilities</h5>
32+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
33+
<span aria-hidden="true">&times;</span>
34+
</button>
35+
</div>
36+
<div class="modal-body">
37+
<pre><code id="message"></code></pre>
38+
</div>
39+
<div class="modal-footer">
40+
<a role="button" href="javascript:void(0)" class="btn btn-primary" id="action-busy">Save</a>
41+
<a role="button" href="javascript:void(0)" class="btn btn-secondary" data-dismiss="modal">Cancel</a>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
47+
48+
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
49+
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
50+
crossorigin="anonymous"></script>
51+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
52+
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
53+
crossorigin="anonymous"></script>
54+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
55+
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
56+
crossorigin="anonymous"></script>
57+
<script src="./js/app.js"></script>
58+
<script src="./lib/bundle/index.js"></script>
59+
60+
<script>
61+
(function () {
62+
var origin = validide_jbu.getUrlOrigin(document, window.location.href);
63+
var parentOrigin = window.location.hostname === 'localhost'
64+
? window.location.origin
65+
: validide_jbu.getUrlOrigin(document, window.location.href);
66+
var iframeContent = new validide_jbu.IframeContent(window, parentOrigin);
67+
var isChildFrame = window !== window.parent;
68+
69+
70+
document.getElementById('message').textContent = 'This content is from: '
71+
+ '\n - location: ' + window.location.href
72+
+ '\n - origin: ' + origin
73+
+ '\n - parentOrigin: ' + parentOrigin;
74+
75+
document.getElementById('action-busy').addEventListener('click', function (e) {
76+
iframeContent.signalBusyState(true);
77+
if (!isChildFrame) {
78+
window.app.setPageLoadingState(true);
79+
}
80+
81+
setTimeout(function () {
82+
iframeContent.signalBusyState(false);
83+
if (!isChildFrame) {
84+
window.app.setPageLoadingState(false);
85+
}
86+
}, 5000);
87+
});
88+
89+
var $modal = $('#exampleModal').modal({
90+
show: isChildFrame ? false : true,
91+
focus: isChildFrame ? false : true,
92+
keyboard: isChildFrame ? true : false,
93+
backdrop: isChildFrame ? true : 'static'
94+
});
95+
96+
if (isChildFrame) {
97+
// Simulate some long running process.
98+
setTimeout(function () {
99+
document.body.style.backgroundColor = 'transparent';
100+
101+
$modal
102+
.modal('show')
103+
.on('hide.bs.modal', function (e) {
104+
iframeContent.dispose();
105+
});
106+
107+
iframeContent.signalBusyState(false);
108+
}, 2000);
109+
} else {
110+
document.getElementById('exampleModal')
111+
.querySelectorAll('[data-dismiss="modal"]')
112+
.forEach(f => f.style.display = 'none');
113+
}
114+
})();
115+
</script>
116+
</body>
117+
118+
</html>

‎docs/redirect.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111

1212
<body>
1313
<p id="redirect-info">Redirecting: </p>
14+
1415
<script src="./js/app.js"></script>
1516
<script>
1617
var params = window.app.getQueryParms();

‎docs/simple-iframe-content.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ <h5 class="my-0 mr-md-auto font-weight-normal">JavaScript Browser Utilities</h5>
3535
</div>
3636
</div>
3737

38+
3839
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
3940
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
4041
crossorigin="anonymous"></script>
@@ -69,8 +70,8 @@ <h5 class="my-0 mr-md-auto font-weight-normal">JavaScript Browser Utilities</h5>
6970
iframeContent.dispose();
7071
});
7172

73+
// Simulate some long running process.
7274
setTimeout(function() {
73-
// Simulate some long running process.
7475
iframeContent.signalBusyState(false);
7576
}, 2000);
7677
})();

‎src/dom/iframe/iframeLoader.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export enum IframeLoaderEventType {
3030
export interface IframeLoaderEvent {
3131
type: IframeLoaderEventType;
3232
el: HTMLElement | null;
33-
rootEl: HTMLElement | null;
33+
parentEl: HTMLElement;
3434
id: string;
3535
}
3636

@@ -179,7 +179,7 @@ export class IframeLoader extends BaseComponent {
179179
handler({
180180
type: eventType,
181181
el: this.rootElement,
182-
rootEl: this.rootElement,
182+
parentEl: this.getParentElement(),
183183
id: this.iframeId
184184
});
185185
}

0 commit comments

Comments
 (0)