sam/Quill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

8: No need to use placeholder for wrapper element

Browse Source
This commit is contained in:
metacryst
2023-12-04 15:12:43 -06:00
parent e417df949a
commit 934547c676
2 changed files with 86 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
index.html
View File

@@ -7,17 +7,16 @@
<script src=""></script> <script src=""></script>
<script type="module" src="https://server.parchment.page/quill.js"></script> <script type="module" src="https://server.parchment.page/quill.js"></script>
<script type="module"> <script type="module">
/* EXAMPLE IMPORTS // EXAMPLE ROUTES
import President from "./Web/President/President.js"; // import President from "./Web/President/President.js";
import RepublicanPrimaries from "./Web/President/RepublicanPrimaries.js"; // import RepublicanPrimaries from "./Web/President/RepublicanPrimaries.js";
import MyRepresentatives from "./Web/myRepresentatives/MyRepresentatives.js"; // import MyRepresentatives from "./Web/myRepresentatives/MyRepresentatives.js";
*/
window.routes = { // Replace with your imported objects, delete empty strings // window.routes = {
"/": /*President*/"", // "/": President,
"/exampleone": /*RepublicanPrimaries*/"", // "/exampleone": RepublicanPrimaries,
"/exampletwo/examplethree": /*MyRepresentatives*/"" // "/exampletwo/examplethree": MyRepresentatives
} // }
</script> </script>
</head> </head>
<body> <body>

115
index.js
View File

@@ -1,77 +1,102 @@
window.css = function css(cssString) { window.css = function css(cssString) {
let container = document.querySelector("style#quillStyles"); let container = document.querySelector("style#quillStyles");
if(!container) { if(!container) {
container = document.createElement('style'); container = document.createElement('style');
container.id = "quillStyles"; container.id = "quillStyles";
document.head.appendChild(container); document.head.appendChild(container);
} }
let primarySelector = cssString.substring(0, cssString.indexOf("{")).trim(); let primarySelector = cssString.substring(0, cssString.indexOf("{")).trim();
primarySelector = primarySelector.replace(/\*/g, "all"); primarySelector = primarySelector.replace(/\*/g, "all");
primarySelector = primarySelector.replace(/#/g, "id-"); primarySelector = primarySelector.replace(/#/g, "id-");
primarySelector = primarySelector.replace(/,/g, ""); primarySelector = primarySelector.replace(/,/g, "");
let stylesheet = container.querySelector(`:scope > style[id='${primarySelector}']`) let stylesheet = container.querySelector(`:scope > style[id='${primarySelector}']`)
if(!stylesheet) { if(!stylesheet) {
stylesheet = document.createElement('style'); stylesheet = document.createElement('style');
stylesheet.id = primarySelector; stylesheet.id = primarySelector;
stylesheet.appendChild(document.createTextNode(cssString)); stylesheet.appendChild(document.createTextNode(cssString));
container.appendChild(stylesheet); container.appendChild(stylesheet);
} else { } else {
stylesheet.innerText = cssString stylesheet.innerText = cssString
} }
} }
window.html = function html(elementString) { window.html = function html(elementString) {
let parser = new DOMParser(); let parser = new DOMParser();
let doc = parser.parseFromString(elementString, 'text/html'); let doc = parser.parseFromString(elementString, 'text/html');
return doc.body.firstChild; return doc.body.firstChild;
} }
function trailingSlash(url) { function trailingSlash(url) {
return url.endsWith("/") ? url : url+"/"; return url.endsWith("/") ? url : url+"/";
} }
function noTrailingSlash(url) { function noTrailingSlash(url) {
return url.endsWith("/") ? url.substring(0, url.length-1) : url; return url.endsWith("/") ? url.substring(0, url.length-1) : url;
} }
let oldPushState = history.pushState; let oldPushState = history.pushState;
history.pushState = function pushState() { history.pushState = function pushState() {
let ret = oldPushState.apply(this, arguments); let ret = oldPushState.apply(this, arguments);
window.dispatchEvent(new Event('pushstate')); window.dispatchEvent(new Event('pushstate'));
window.dispatchEvent(new Event('locationchange')); window.dispatchEvent(new Event('locationchange'));
return ret; return ret;
}; };
window.addEventListener('popstate', () => { window.addEventListener('popstate', () => {
window.dispatchEvent(new Event('locationchange')); window.dispatchEvent(new Event('locationchange'));
}); });
window.addEventListener('locationchange', locationChange); window.addEventListener('locationchange', locationChange);
let urlBeforeChange = window.location.href; let urlBeforeChange = window.location.href;
window.navigateTo = function(url) { window.navigateTo = function(url) {
window.history.pushState({}, '', url); window.history.pushState({}, '', url);
} }
Object.defineProperty(window, 'routes', {
configurable: true,
enumerable: true,
set: function(newValue) {
Object.defineProperty(window, 'routes', {
value: newValue,
writable: false,
configurable: false,
enumerable: true
});
locationChange();
},
get: function() {
return window.routes;
}
});
function locationChange() { function locationChange() {
let URL = window.location.pathname.split("/").filter(d => (d !== 'Web') && (d !== 'index.html')).join("/") console.log("location change")
if(URL === "") URL = "/" let URL = window.location.pathname.split("/").filter(d => (d !== 'Web') && (d !== 'index.html')).join("/")
console.log(URL) if(URL === "") URL = "/"
console.log(document.body.children[0]) console.log(URL)
document.body.children[0].replaceWith(new window.routes[URL]()) console.log(document.body.children[0])
urlBeforeChange = window.location.href; let wrapper = document.querySelector("#wrapper");
if(wrapper) {
wrapper.replaceWith(new window.routes[URL]())
} else {
document.body.prepend(new window.routes[URL]())
document.body.children[0].id = "wrapper"
}
urlBeforeChange = window.location.href;
} }
function detectMobile() { function detectMobile() {
const mobileDeviceRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i; const mobileDeviceRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
return mobileDeviceRegex.test(navigator.userAgent); return mobileDeviceRegex.test(navigator.userAgent);
} }
function getSafariVersion() { function getSafariVersion() {
const userAgent = navigator.userAgent; const userAgent = navigator.userAgent;
const isSafari = userAgent.includes("Safari") && !userAgent.includes("Chrome"); const isSafari = userAgent.includes("Safari") && !userAgent.includes("Chrome");
if (isSafari) { if (isSafari) {
const safariVersionMatch = userAgent.match(/Version\/(\d+\.\d+)/); const safariVersionMatch = userAgent.match(/Version\/(\d+\.\d+)/);
const safariVersion = safariVersionMatch ? parseFloat(safariVersionMatch[1]) : null; const safariVersion = safariVersionMatch ? parseFloat(safariVersionMatch[1]) : null;
return safariVersion; return safariVersion;
} }
} }