-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex-skeleton.html
201 lines (186 loc) · 9.03 KB
/
index-skeleton.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
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./Bootstrapifier.js"></script>
<title>Bootstrapifier</title>
<script>
const BTN_ANIMATE_DELAY = 3000;
const initialCopyClipboardBtnVal = "Copy HTML Output To Clipboard";
const initialParseClipboardBtnVal = "Parse & Replace Clipboard";
// Thanks to 'Alvaro Montoro' solid detailed answer about this on here
// https://stackoverflow.com/questions/22581345/click-button-copy-to-clipboard-using-jquery
// though I switched to the modern clipboard API, it was informative.
// I liked this one for the modern API: https://alligator.io/js/async-clipboard-api/
function copyToClipboard(selectorToCopy, onSuccess=null, onError=null) {
navigator.clipboard.writeText($(selectorToCopy).val()).then(() => {
if (typeof onSuccess == "function") { // success callback
onSuccess($(selectorToCopy).val());
}
})
.catch(err => {
if (typeof onError == "function") { // error callback
onError(err);
}
})
}
function pasteFromClipboard(selectorToPaste, onSuccess=null, onError=null) {
navigator.clipboard.readText().then(text => {
$(selectorToPaste).val(text);
if (typeof onSuccess == "function") { // success callback
onSuccess(text);
}
})
.catch(err => {
if (typeof onError == "function") { // error callback
onError(err);
}
})
}
// Change btn text to "Success" and give bootstrap class "btn-success" (green)
// Width may occasionally break temporarily if spamming the button. Negligible
function animateButtonCopied(buttonSelector, initialText) {
let initialWidth = $(buttonSelector).width();
$(buttonSelector).val("Result Copied!").addClass("btn-success");
$(buttonSelector).width(initialWidth);
setTimeout(function() {
$(buttonSelector).val(initialText).removeClass("btn-success");
}, BTN_ANIMATE_DELAY);
}
// Change btn text to "Error" and give bootstrap class "btn-danger" (red)
// Width may occasionally break temporarily if spamming the button. Negligible
function animateButtonError(buttonSelector, initialText) {
let initialWidth = $(buttonSelector).width();
$(buttonSelector).val("Error").addClass("btn-danger");
$(buttonSelector).width(initialWidth);
setTimeout(function() {
$(buttonSelector).val(initialText).removeClass("btn-danger");
}, BTN_ANIMATE_DELAY);
}
// Change btn text to "Parsing..." and give bootstrap class "btn-warning" (yellow)
// Width may occasionally break temporarily if spamming the button. Negligible
function animateButtonParsing(buttonSelector) {
let initialWidth = $(buttonSelector).width();
$(buttonSelector).addClass("btn-warning").val("Parsing...");
$(buttonSelector).width(initialWidth);
}
$(function() { // on load
if (!navigator.clipboard) {
$("#copyOutput").prop("disabled", true).hide();
$("#parseClipboard").prop("disabled", true).hide();
}
$("#elementsToWrapRow").val(Bootstrapifier.DEFAULT_ROW_ELEMENTS.join(", "));
$("#elementsToWrapTextCenter").val(Bootstrapifier.DEFAULT_TEXT_CENTER_ELEMENTS.join(", "));
$("#bootstrapify").click(function() {
$("#htmlOutput").val(
Bootstrapifier.bootstrapify(
$("#htmlInput").val(),
$("#wrapContainer").prop("checked"),
$("#elementsToWrapRow").val().split(",").map((elem) => { return elem.trim().toLowerCase() }),
$("#elementsToWrapTextCenter").val().split(",").map((elem) => { return elem.trim().toLowerCase() }),
$("#basicDarkTheme").prop("checked"),
$("#applyListGroups").prop("checked"),
$("#centerLists").prop("checked"),
4,
true,
Number.MAX_SAFE_INTEGER
)
);
});
$("#copyOutput").click(function() {
copyToClipboard("#htmlOutput",
function(textCopied) { // on success
animateButtonCopied("#copyOutput", initialCopyClipboardBtnVal);
console.log(`The following HTML output was copied to the clipboard:`);
// log as an object so it can be collapsed and does not spam the console too much.
console.log({ copied : textCopied });
},
function(err) { // on error
animateButtonError("#copyOutput");
console.log(`Error copying HTML output to clipboard: ${err}`)
}
);
});
$("#parseClipboard").click(function() {
pasteFromClipboard("#htmlInput",
function(textPasted) { // on success
animateButtonParsing("#parseClipboard");
console.log(`The following HTML was pasted to the clipboard:`);
console.log({ pasted : textPasted });
// delay execution by 100ms so the browser has time to update the button
// to display that it's parsing.
setTimeout(function(){
$("#bootstrapify").trigger("click")
copyToClipboard("#htmlOutput",
function(textCopied) { // on success
$("#parseClipboard").removeClass("btn-warning");
animateButtonCopied("#parseClipboard", initialParseClipboardBtnVal);
console.log(`The following HTML output was copied to the clipboard:`);
// log as an object so it can be collapsed and does not spam the console too much.
console.log({ copied : textCopied });
},
function(err) { // on error
animateButtonError("#parseClipboard");
console.log(`Error copying HTML output to clipboard: ${err}`)
}
);
$("#parseClipboard").focus();
}, 100);
},
function(err) { // on error
animateButtonError("#parseClipboard");
console.log(`Error pasting HTML from clipboard: ${err}`)
}
);
});
});
</script>
<style>
textarea, input[type="text"] {
font-family: monospace,monospace !important;
}
</style>
</head>
<body>
<h1>Bootstrapifier</h1>
<a href="https://github.com/Matsyir/Bootstrapifier"><h4>GitHub Repo</h4></a>
<h3>Guidelines</h3>
<ul>
<li>No need to include any classes or id's for it to work</li>
<li>No need to include/link Bootstrap, it will for you</li>
<li>It will add the classes alongside existing ones, which could cause CSS interference</li>
<li>It will preserve scripts and comments</li>
<li>Simply copy your HTML, and click the "Parse & Replace Clipboard" button. Alternatively, paste it in the HTML Input text area, then parse and copy it</li>
<li>Copy/Paste buttons may be disabled if your browser does not support clipboard usage</li>
</ul>
<h3>Options</h3>
<input type="checkbox" id="wrapContainer" checked>
<label for="wrapContainer">Wrap body contents with container?</label>
<br/>
<input type="checkbox" id="applyListGroups" checked>
<label for="applyListGroups">Apply list groups and list group items to lists (ul, ol, li)?</label>
<br/>
<input type="checkbox" id="centerLists" checked>
<label for="centerLists">Center list groups at 50% width? (adds "w-50", "ml-auto", and "mr-auto" classes to "ol" and "ul")</label>
<br/>
<input type="checkbox" id="basicDarkTheme">
<label for="basicDarkTheme">Apply basic dark theme to body? Note that this is not Bootstrap. Details on repo.</label>
<br/>
<label for="elementsToWrapRow">Element tags to wrap with row (csv):</label>
<input type="text" name="elementsToWrapRow" id="elementsToWrapRow">
<br/>
<label for="elementsToWrapTextCenter">Element tags to add text-center class (csv):</label>
<input type="text" name="elementsToWrapTextCenter" id="elementsToWrapTextCenter">
<br/>
<input type="button" id="parseClipboard" value="Parse & Replace Clipboard">
<br/><br/>
<h3>HTML Input</h3>
<textarea id="htmlInput"></textarea>
<br/>
<input type="button" id="bootstrapify" value="Bootstrapify (Parse HTML Input)">
<input type="button" id="copyOutput" value="Copy HTML Output To Clipboard">
<br/><br/>
<h3>HTML Output</h3>
<textarea id="htmlOutput"></textarea>
</body>
</html>