Skip to content

Commit ba1b06b

Browse files
chriskthomaschriskthomas
authored
inline index.js and build preview elements
1 parent 9a1cf11 commit ba1b06b

File tree

3 files changed

+118
-70
lines changed

3 files changed

+118
-70
lines changed

‎build.sh

+4-5
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,13 @@ set -e
66
rm -rf dist
77

88
# Build
9-
mkdir dist && cd dist
9+
mkdir dist
1010

1111
# Minify static assets
12-
minify -o default.css ../src/default.css
13-
minify -o index.js ../src/index.js
12+
minify -o dist/default.css src/default.css
1413

1514
# Copy other assets
16-
cp ../src/api.php ../src/template.php ./
15+
cp src/api.php src/template.php dist/
1716

1817
# Compile PHP and minify
19-
php ../src/index.php | minify --type html -o index.html
18+
cd src/ && php index.php | minify --type html -o ../dist/index.html

‎src/index.js

+111-64
Original file line numberDiff line numberDiff line change
@@ -254,102 +254,149 @@ formData["photo"].addEventListener("input", (e) => {
254254
const reader = new FileReader();
255255
reader.onload = (e) => {
256256
photo = e.target.result;
257-
UpdatePreview();
257+
UpdatePreview(e);
258258
};
259259
reader.readAsDataURL(photoData);
260260
}
261261
});
262262

263263
// Update Preview Function
264-
function UpdatePreview() {
264+
function UpdatePreview(e = null) {
265265
var name = formData["name"].value;
266266
var mainUrl = formData["url"].value;
267267
var description = formData["description"].value;
268268
var email = formData["email"].value;
269-
var links = "";
270-
var photoCode = "";
271269

272-
// Links
273-
for (var i = 0; i <= linksIndex; i++) {
274-
var linkId = `links[${i}]`;
275-
var linkUrl = document.getElementById(linkId + "[url]").value;
276-
var linkName = document.getElementById(linkId + "[name]").value;
277-
var linkIcon = document.getElementById(linkId + "[icon]").value;
278-
279-
if (linkUrl !== "") {
280-
if (linkIcon !== "") {
281-
links += `<a class="link" href="${linkUrl}" target="_blank">
282-
<ion-icon name="${linkIcon}"></ion-icon>
283-
${linkName} </a>`;
284-
} else {
285-
links += `<a class="link" href="${linkUrl}" target="_blank">
286-
${linkName} </a>`;
287-
}
270+
// Define a function that creates a link element
271+
function createLinkElement(href, icon = null, name = null, target = null) {
272+
// Create link
273+
let userLink = document.createElement("a");
274+
275+
// Set link attributes
276+
userLink.href = href;
277+
userLink.target = target;
278+
userLink.classList.add("link");
279+
280+
// Create icon
281+
if (icon) {
282+
let userIcon = document.createElement("ion-icon");
283+
userIcon.setAttribute("name", icon);
284+
userLink.appendChild(userIcon);
285+
}
286+
287+
// Create label
288+
if (name) {
289+
userLink.appendChild(document.createTextNode(` ${name}`));
288290
}
291+
292+
return userLink;
289293
}
290294

295+
// Build entire body from scratch
296+
var previewBody = document.createElement("body");
297+
291298
// Check if data is added
292-
if (photo !== "")
293-
photoCode = `<img id="userPhoto" src="${photo}" alt="User Photo"></img>`;
294-
if (name !== "")
295-
name = `<a href="${mainUrl}" target="_blank"><h1 id="userName">${name}</h1></a>`;
296-
if (description !== "")
297-
description = `<p id="description">${description}</p>`;
298-
if (email !== "")
299-
email = `<a class="link" href="mailto:${email}" target="_blank"><ion-icon name="mail"></ion-icon> Email</a>`;
299+
if (photo !== "") {
300+
let userImg = document.createElement("img");
301+
userImg.id = "userPhoto";
302+
userImg.src = photo;
303+
userImg.alt = "User Photo";
304+
previewBody.appendChild(userImg);
305+
}
306+
if (name !== "") {
307+
// Create username link
308+
let userUrl = document.createElement("a");
309+
userUrl.href = mainUrl;
310+
userUrl.target = "_blank";
311+
312+
let userName = document.createElement("h1");
313+
userName.id = "userName";
314+
userName.appendChild(document.createTextNode(name));
315+
userUrl.appendChild(userName);
316+
317+
previewBody.appendChild(userUrl);
318+
}
319+
if (description !== "") {
320+
let userDescription = document.createElement("p");
321+
userDescription.id = "description";
322+
userDescription.appendChild(document.createTextNode(description));
323+
previewBody.appendChild(userDescription);
324+
}
325+
326+
// Links
327+
{
328+
// Create links div
329+
let linksDiv = document.createElement("div");
330+
linksDiv.id = "links";
331+
332+
for (var i = 0; i <= linksIndex; i++) {
333+
let linkId = `links[${i}]`;
334+
let linkUrl = document.getElementById(linkId + "[url]").value;
335+
let linkName = document.getElementById(linkId + "[name]").value;
336+
let linkIcon = document.getElementById(linkId + "[icon]").value;
337+
338+
if (linkUrl !== "") {
339+
let userLink = createLinkElement(linkUrl, linkIcon, linkName, "_blank");
340+
linksDiv.appendChild(userLink);
341+
}
342+
}
343+
344+
if (email !== "") {
345+
// Create email link
346+
let userEmail = createLinkElement(`mailto:${email}`, "mail", "Email");
347+
linksDiv.appendChild(userEmail);
348+
}
349+
350+
// Append links to the body
351+
previewBody.appendChild(linksDiv);
352+
}
300353

301354
// Read theme data
302355
var json = theme.value ? JSON.parse(theme.value) : {};
303356
var themeStylePath = json.css ? themeUrl + "/" + json.css : `default.css`;
304-
var themeScriptTag = json.js
305-
? `<script src="${themeUrl + "/" + json.js}"></script>`
306-
: "";
307-
308-
// Update Preview
309-
var previewBody = `${photoCode} ${name} ${description}
310-
<div id="links">
311-
${links}
312-
${email}
313-
</div>
314-
${themeScriptTag}
315-
<script type="module" src="${ioniconsUrl}/dist/ionicons/ionicons.esm.js"></script>
316-
<script nomodule src="${ioniconsUrl}/dist/ionicons/ionicons.js"></script>`;
357+
358+
if (json.js) {
359+
let themeScript = document.createElement("script");
360+
themeScript.src = themeUrl + "/" + json.js;
361+
previewBody.appendChild(themeScript);
362+
}
363+
364+
// Append ionicons module script to the body
365+
var ioniconsScriptModule = document.createElement("script");
366+
ioniconsScriptModule.src = `${ioniconsUrl}/dist/ionicons/ionicons.esm.js`;
367+
ioniconsScriptModule.type = "module";
368+
previewBody.appendChild(ioniconsScriptModule);
369+
370+
// Append ionicons nomodule script to the body
371+
var ioniconsScriptNoModule = document.createElement("script");
372+
ioniconsScriptNoModule.src = `${ioniconsUrl}/dist/ionicons/ionicons.js`;
373+
ioniconsScriptNoModule.noModule = true;
374+
previewBody.appendChild(ioniconsScriptNoModule);
375+
376+
// Only define the HTML code once to avoid flickering
377+
var previewHTMLCode = `<html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"><link id="theme-stylesheet" rel="stylesheet" href="${themeStylePath}"></head>${previewBody.outerHTML}</html>`;
317378

318379
// If previewBlock is empty, append the iframe
319380
if (previewBlock.childElementCount === 0) {
320-
// Only define the HTML code once to avoid flickering
321-
var previewHTMLCode = `<html>
322-
<head>
323-
<meta name="viewport" content="width=device-width, initial-scale=1">
324-
<meta charset="UTF-8">
325-
<link id="theme-stylesheet" rel="stylesheet" href="${themeStylePath}">
326-
</head>
327-
<body>
328-
${previewBody}
329-
</body>
330-
</html>`;
331-
332-
// Create iframe to include in previewBlock
333-
const preview_iframe = document.createElement("iframe");
381+
// On first run, create iframe to include in previewBlock
382+
let preview_iframe = document.createElement("iframe");
334383
preview_iframe.classList.add("w-100", "h-100");
335384
preview_iframe.srcdoc = previewHTMLCode;
336385
preview_iframe.id = "preview_iframe";
337386

338387
// Append the iframe to the previewBlock
339388
previewBlock.appendChild(preview_iframe);
389+
} else if (e && e.target === theme) {
390+
// if the theme is changed, reset the srcdoc
391+
let preview_iframe = document.getElementById("preview_iframe");
392+
preview_iframe.srcdoc = previewHTMLCode;
340393
} else {
341394
// Get the iframe
342-
const preview_iframe = document.getElementById("preview_iframe");
395+
let preview_iframe = document.getElementById("preview_iframe");
343396

344397
// Update the iframe body content
345-
preview_iframe.contentWindow.document.body.innerHTML = previewBody;
346-
347-
// If the theme has changed, update the stylesheet
348-
var preview_theme_style =
349-
preview_iframe.contentWindow.document.getElementById("theme-stylesheet");
350-
if (preview_theme_style.href !== themeStylePath) {
351-
preview_theme_style.href = themeStylePath;
352-
}
398+
preview_iframe.contentWindow.document.body.innerHTML =
399+
previewBody.innerHTML;
353400
}
354401
}
355402

‎src/index.php

+3-1
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,9 @@
182182
<ion-icon name="eye"></ion-icon> Preview
183183
</button>
184184
<div id="previewBlock" class="offcanvas offcanvas-end z-1"></div>
185-
<script src="index.js" integrity="sha384-<?= base64_encode(hash_file("sha384", "index.js", true)) ?>"></script>
185+
<script>
186+
<?php include "index.js" ?>
187+
</script>
186188

187189
<script type="module" src="<?= $ionicons_source ?>/dist/ionicons/ionicons.esm.js"></script>
188190
<script nomodule src="<?= $ionicons_source ?>/dist/ionicons/ionicons.js"></script>

0 commit comments

Comments
 (0)