-
Notifications
You must be signed in to change notification settings - Fork 2
/
beestcard.html
236 lines (215 loc) · 11.9 KB
/
beestcard.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
235
236
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="A simple element creator to generate responsive code that can be easily embbedded into Moodle">
<meta name="author" content="T&M">
<title>BEEST Alerts</title>
<link rel="icon" href="https://mon-arts-ed-des.github.io/BEEST/dragon-solid%20favicon.png" type="image/gif">
<!-- external link to css file -->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Arts CSS -->
<link rel="stylesheet" href="https://mon-arts-ed-des.github.io/artsmoodlecode/adminPlusSetuBlockStyle.css" />
<!-- external link to js file -->
<script src=" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Bootstrap js file -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- FontAwesome js file -->
<script src="https://kit.fontawesome.com/3817feae52.js"></script>
<!-- Tinymce js file -->
<script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
<script src="js/advancedModeLocalStorage.js"></script>
<script type="text/javascript">
tinymce.init({
selector: '#cardText',
menubar: false,
plugins : 'advlist autolink link lists charmap print preview code',
toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | autolink link |lists | charmap | code'
});
function generateAlertCode() {
// Get the HTML contents of the currently active editor
console.debug(tinyMCE.activeEditor.getContent());
//Retrieve the content by id of the tinyMCE textarea
var alertCode = tinyMCE.get('tinyMCE2').getContent();
var textOutput1 = monAlert_1+alertCode+monAlert_2;
document.getElementById('monAlertCode').innerHTML=textOutput1;
SelectAll("monAlertCode");
var popup = document.getElementById("myPopup");
popup.classList.toggle("showPopup");
}
function generateCardCode() {
// Get the HTML contents of the currently active editor
console.debug(tinyMCE.activeEditor.getContent());
//Retrieve the content by id of the tinyMCE textarea
var card_TextCode = tinyMCE.get('cardText').getContent();
var card_Heading = document.getElementById('cardHeading').value
var cardOutput = card_1+card_Heading+card_2+card_TextCode+card_3;
document.getElementById('monCardCode').innerHTML=cardOutput;
SelectAll("monCardCode");
$('#demoCard').nextAll('div').remove();
$('#demoCard').after(cardOutput);
}
function SelectAll(id){
document.getElementById(id).focus();
document.getElementById(id).select();
document.execCommand("copy");
var popup = document.getElementById("myPopup");
popup.classList.toggle("showPopup");
//window.alert('test');
}
function submitform()
{
document.forms["myform"].submit();
}
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
/* Variable Key
These variables are pre-defined html that is added to inputs from users before and after to generate the final html product for copying and pasting.
card = predefined code to create Bootstrap cards
*/
var card_1="<div class=\"w-50 mx-auto\"><div class=\"card mb-3 rounded\"><div class=\"card-header text-white bg-mu text-center h5\">"
var card_2="</div><div class=\"card-body\"><p class=\"card-text mb-0\">"
var card_3="</p></div></div>"
</script>
<script>
window.onload=function(){
$('#beestNav').load('https://mon-arts-ed-des.github.io/BEEST/beestnav.html');
};
</script>
<style>
.mce-notification-inner, .mce-close, .mce-notification-warning {
display:none !important;
}
/* Popup container - can be anything you want */
#popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
#popup .popuptext {
visibility: hidden;
width: 220px;
background-color: #222222;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 10px 5px;
position: absolute;
z-index: 1;
bottom:100%;
left: 50%;
margin-left: -110px;
}
/* Popup arrow */
#popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
#popup .showPopup {
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
visibility: visible;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
10% {opacity: 1;}
66% { opacity: 1; }
}
@keyframes fadeinout {
0%,100% { opacity: 0; }
10% {opacity: 1;}
66% { opacity: 1; }
}
.tooltip-inner {
text-align: left;
padding: 15px;
font-size: 1.05rem;
max-width: 400px;
}
</style>
</head>
<body>
<div id="beestNav"></div>
<div class="row w-100 mb-5"></div>
<div class="row w-100 mb-4"></div>
<div class="container-fluid">
<div class="w-100 mx-auto alert alert-arts alert-dismissible fade show rounded" role="alert">
<div class="h6"><i class="fa fa-fw fa-2x fa-pull-left fa-exclamation-circle"></i>When using Bootstrap cards, keep the heading brief (30 characters or less) and the information inside the card to less than 5 lines where possible.</div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<form id="monCard">
<h1 class="text-center"><i class="fa fa-id-card-o fa-fw"></i> Cards</h1>
<span class="hideableinstruct">
<h5><i class="fa fa-fw fa-flag-checkered"></i> The result of this process</h5>
<p>The intention for this element is to contain important information and make it stand out like learning outcomes or lecturer contact details. When using Bootstrap cards, we have pre-coded them to format in a certain manner. One card will be centred on the page and half the width of the screen. Two or more cards will take up equal width on the screen, i.e. Two cards will be half the width of the screen and 3 cards a 1/3 of the width of the screen each.</p>
<h5><i class="fa fa-fw fa-list-ol"></i> How to use this page</h5>
<p>If you hover your mouse over the headings for the steps on this page instructions will appear. Once you have generated and copied the code for your element paste them into Moodle using the HTML editor. If you are unsure of how to paste HTML into Moodle, <a data-toggle="modal" data-target=".bd-example-modal-lg" href="">this short video will help</a> (it will open in an overlay on this screen).</p>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content p-2">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">To close this window click the button on the right or anywhere outside this box.</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" frameborder="0" allowfullscreen="allowfullscreen" src="https://monash-panopto.aarnet.edu.au/Panopto/Pages/Embed.aspx?id=d1c0ffaa-23a4-4d38-bb49-abda00b7805a"></iframe></div>
</div>
</div>
</div>
<h5><i class="fa fa-fw fa-refresh"></i> Refresh this page if you make an error</h5>
<div class="row w-100">
<div class="col-lg">
<p>Click this button to refresh this page if you make an error, or if you are making multiple elements and have already pasted your previous elements.</p></div>
<div class="col-lg-3"><div class="text-center">
<a href="javascript:window.location.reload()" class="btn btn-mu">Refresh the page <i class="fa fa-fw fa-refresh"></i></a>
</div></div></div>
</span>
<h5>Advanced mode - turn <span class="onoffswapinstr">off</span> instructions</h5>
<div class="row w-100">
<div class="col-lg">
<p>Click this button to turn <span class="onoffswapinstr">off</span> the instructions that appear when you hover over the headings.<span class="hideableinstruct"> Only do this if you are completely familiar with how to use the tool.</span></p></div>
<div class="col-lg-3"><div class="text-center">
<button onclick="flipTooltip()" class="btn btn-mu">Turn <span class="onoffswapinstr">off</span> instructions <i class="fa fa-fw fa-power-off"></i></a>
</div></div></div>
<hr class="hr-3">
<div class="row w-100 mx-auto text-center">
<div class="col-lg mt-3">
<h5 class="mt-3" data-toggle="tooltip" data-placement="top" data-trigger="hover focus" title="This is the box where you should put your card heading. You can copy and paste or type the heading."><i class="fa fa-pencil fa-fw"></i> Step 1 - Input the Card Heading</h5>
<textarea class="border border-dark rounded p-2 w-100 mt-3" cols="70" rows="1" id="cardHeading" name="cardHeading" placeholder="Write your heading here."></textarea>
</div>
<div class="col-lg mt-3">
<h5 class="mt-3" data-toggle="tooltip" data-placement="top" data-trigger="hover focus" title="Input the content for the body of your card. You can embed videos and use rich text here."><i class="fa fa-fw fa-times"></i> Step 2 - Input the Card Content</h5>
<textarea class="border border-dark rounded p-2 w-100 mt-3" cols="70" rows="6" id="cardText" name="cardText" placeholder="Write the content for your reference here."></textarea>
</div>
</div>
<div class="row w-100 mx-auto text-center">
<div class="col-lg mt-3">
<h5 class="mt-3" data-toggle="tooltip" data-placement="top" data-trigger="hover focus" title="Click this button to generate and copy the code for your element ready for pasting in Moodle. A preview of the element will appear under Step 4."><i class="fa fa-fw fa-code"></i> Step 3 - Generate/copy code</h5>
<p id="popup"> <span class="popuptext" id="myPopup">Your code has been copied</span><input type="button" class="btn btn-arts m-1 text-center" name="GenerateWrap" value="Generate and copy code </>" onClick=generateCardCode()></p>
<p class="text-center"><textarea readonly class="rounded p-2 w-100" id="monCardCode" cols="70" rows="4" name="Result" placeholder="Code for your element will appear here."></textarea></p>
</div></div>
</form>
<div class="row w-100 mx-auto mt-3 text-center">
<div class="col-lg mt-3">
<h5 data-toggle="tooltip" data-placement="top" data-trigger="hover focus" title="A preview of your element will appear below when you click the generate code button in Step 4."><i class="fa fa-fw fa-eye"></i> Step 4 - A preview of your content will appear below</h5>
</div>
</div>
<div id="demoCard"></div>