-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (116 loc) · 6.64 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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue-grey.css">
<script src="cd-alert/cd-alert.js"></script>
<script>
function viewCode(t){
CD.alert(
'<textarea style=\'min-width: -webkit-fill-available;max-width: -webkit-fill-available;min-height: 230px;\'>'+t.previousElementSibling.getAttribute('onclick')+'</textarea>',
'Source Code'
);
}
</script>
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body class="w3-theme-d4">
<div class="w3-content" style="max-width:1400px">
<h1 class="w3-center w3-row">cd-alert.js Example Usage
<h4 style="margin-top: 0px;position: absolute;top: 0px;right: 0px;" class="w3-button" onclick="window.open('https://github.com/littlej247/cd-alert')">
github <img src="http://pluspng.com/img-png/github-octocat-png-the-20-cooler-octocat-896.png" style="height: 60px;"\>
</h4>
</h1>
<div class="w3-row">
<div class="w3-third"><div class="w3-container w3-card w3-white w3-round w3-margin">
<h4>Simple Message</h4>
<p>A simple message box with no title or additional options set</p>
<button class="w3-block w3-button w3-margin-bottom w3-theme" onclick="CD.alert('Some simple testing text..');">Try it »</button>
<button class="w3-block w3-button w3-margin-bottom w3-theme" onclick="viewCode(this);">View Code</button>
</div></div>
<div class="w3-third"><div class="w3-container w3-card w3-white w3-round w3-margin">
<h4>Title and Callback</h4>
<p>Built on the prior, this one includes a message title and callback.</p>
<button class="w3-block w3-button w3-margin-bottom w3-theme" onclick="CD.alert('Clicking <b>OK</b> will trigger the callback!','Fancy Title I AM..','ok', function(){ CD.alert('You clicked OK!','Callback Title'); });">Try it »</button>
<button class="w3-block w3-button w3-margin-bottom w3-theme" onclick="viewCode(this);">View Code</button>
</div></div>
<div class="w3-third"><div class="w3-container w3-card w3-white w3-round w3-margin">
<h4>Cancel Option</h4>
<p>Make a decision based on response</p><br>
<button class="w3-block w3-button w3-margin-bottom w3-theme" onclick="CD.alert('If you like cats click OK. <br> If you like dogs click Cancel',
'Cats? or Dogs?',
'cancel',
function(ok){
if (ok){
CD.alert('You clicked OK! Cats are the best.','Purr');
}else{
CD.alert('You clicked Cancel! Dogs are great too.','Woof');
}
}
);">Try it »</button>
<button class="w3-block w3-button w3-margin-bottom w3-theme" onclick="viewCode(this);">View Code</button>
</div></div>
<div class="w3-third"><div class="w3-container w3-card w3-white w3-round w3-margin">
<h4>Buttonless Footer for Loading</h4>
<p>Setting the third argument to 'none' hides the buttons in the footer. Usefull for making loading screens.</p>
<button class="w3-block w3-button w3-margin-bottom w3-theme" onclick="(function(){
//The Immediately Invoked Function Expression or 'IIFE' is just so we don't pollute the global namespace with our code for this demo.
var dialog = CD.alert('<h2>Lets lock it down people...</h2><p>For 5 secconds</p><div class=\'loader w3-center\'></div>',
null,
'none' );
setTimeout(function(){dialog.destroy();}, 5000);
})();">Try it »</button>
<button class="w3-block w3-button w3-margin-bottom w3-theme" onclick="viewCode(this);">View Code</button>
</div></div>
<div class="w3-third"><div class="w3-container w3-card w3-white w3-round w3-margin">
<h4>Changing the Body After Initialization then Destroy</h4>
<p>The alert function returns the appended dialog element with additional functions and references added. Such as 'destroy()' and 'body'. </p>
<button class="w3-block w3-button w3-margin-bottom w3-theme" onclick="(function(){
//The Immediately Invoked Function Expression or 'IIFE' is just so we don't pollute the global namespace with our code for this demo.
var dialog = CD.alert('When initialized I may say one thing.',
'Modifying after initialization'
);
setTimeout(function(){ dialog.body.innerText = 'but then say another later on...'; }, 1500);
setTimeout(function(){ dialog.body.innerText = 'and then another. Until..'; }, 3000);
setTimeout(function(){ dialog.body.innerHTML = '<h1 class=\'w3-center w3-xxxlarge w3-yellow\'>POW!!</h1>'; }, 4500);
setTimeout(function(){ dialog.body.querySelector('h1').innerText = 'LIGHTS OUT!..'; }, 6000);
setTimeout(function(){ dialog.destroy(); }, 7000);
})();">Try it »</button>
<button class="w3-block w3-button w3-margin-bottom w3-theme" onclick="viewCode(this);">View Code</button>
</div></div>
<div class="w3-third"><div class="w3-container w3-card w3-white w3-round w3-margin">
<h4>Collecting Input</h4>
<p>Ask user for some input, then make use of it in the call back.</p>
<button class="w3-block w3-button w3-margin-bottom w3-theme" onclick="CD.alert('Tell me your name <input type=\'text\' />',
'Input Box',
null,
function(ok,dialog){
var input = dialog.querySelector('input').value;
CD.alert('Hi ' + input + '. Hope you\'re enjoying this JS library!');
}
);">Try it »</button>
<button class="w3-block w3-button w3-margin-bottom w3-theme" onclick="viewCode(this);">View Code</button>
</div></div>
</div>
</div>
</body>
</html>