8: No need to use placeholder for wrapper element
This commit is contained in:
metacryst
19
index.html
19
index.html
@@ -7,17 +7,16 @@
|
||||
<script src=""></script>
|
||||
<script type="module" src="https://server.parchment.page/quill.js"></script>
|
||||
<script type="module">
|
||||
/* EXAMPLE IMPORTS
|
||||
import President from "./Web/President/President.js";
|
||||
import RepublicanPrimaries from "./Web/President/RepublicanPrimaries.js";
|
||||
import MyRepresentatives from "./Web/myRepresentatives/MyRepresentatives.js";
|
||||
*/
|
||||
// EXAMPLE ROUTES
|
||||
// import President from "./Web/President/President.js";
|
||||
// import RepublicanPrimaries from "./Web/President/RepublicanPrimaries.js";
|
||||
// import MyRepresentatives from "./Web/myRepresentatives/MyRepresentatives.js";
|
||||
|
||||
window.routes = { // Replace with your imported objects, delete empty strings
|
||||
"/": /*President*/"",
|
||||
"/exampleone": /*RepublicanPrimaries*/"",
|
||||
"/exampletwo/examplethree": /*MyRepresentatives*/""
|
||||
}
|
||||
// window.routes = {
|
||||
// "/": President,
|
||||
// "/exampleone": RepublicanPrimaries,
|
||||
// "/exampletwo/examplethree": MyRepresentatives
|
||||
// }
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
129
index.js
129
index.js
@@ -1,77 +1,102 @@
|
||||
window.css = function css(cssString) {
|
||||
let container = document.querySelector("style#quillStyles");
|
||||
if(!container) {
|
||||
container = document.createElement('style');
|
||||
container.id = "quillStyles";
|
||||
document.head.appendChild(container);
|
||||
}
|
||||
|
||||
let primarySelector = cssString.substring(0, cssString.indexOf("{")).trim();
|
||||
primarySelector = primarySelector.replace(/\*/g, "all");
|
||||
primarySelector = primarySelector.replace(/#/g, "id-");
|
||||
primarySelector = primarySelector.replace(/,/g, "");
|
||||
let stylesheet = container.querySelector(`:scope > style[id='${primarySelector}']`)
|
||||
if(!stylesheet) {
|
||||
stylesheet = document.createElement('style');
|
||||
stylesheet.id = primarySelector;
|
||||
stylesheet.appendChild(document.createTextNode(cssString));
|
||||
container.appendChild(stylesheet);
|
||||
} else {
|
||||
stylesheet.innerText = cssString
|
||||
}
|
||||
let container = document.querySelector("style#quillStyles");
|
||||
if(!container) {
|
||||
container = document.createElement('style');
|
||||
container.id = "quillStyles";
|
||||
document.head.appendChild(container);
|
||||
}
|
||||
|
||||
let primarySelector = cssString.substring(0, cssString.indexOf("{")).trim();
|
||||
primarySelector = primarySelector.replace(/\*/g, "all");
|
||||
primarySelector = primarySelector.replace(/#/g, "id-");
|
||||
primarySelector = primarySelector.replace(/,/g, "");
|
||||
let stylesheet = container.querySelector(`:scope > style[id='${primarySelector}']`)
|
||||
if(!stylesheet) {
|
||||
stylesheet = document.createElement('style');
|
||||
stylesheet.id = primarySelector;
|
||||
stylesheet.appendChild(document.createTextNode(cssString));
|
||||
container.appendChild(stylesheet);
|
||||
} else {
|
||||
stylesheet.innerText = cssString
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
window.html = function html(elementString) {
|
||||
let parser = new DOMParser();
|
||||
let doc = parser.parseFromString(elementString, 'text/html');
|
||||
return doc.body.firstChild;
|
||||
let parser = new DOMParser();
|
||||
let doc = parser.parseFromString(elementString, 'text/html');
|
||||
return doc.body.firstChild;
|
||||
}
|
||||
|
||||
|
||||
function trailingSlash(url) {
|
||||
return url.endsWith("/") ? url : url+"/";
|
||||
return url.endsWith("/") ? url : 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;
|
||||
history.pushState = function pushState() {
|
||||
let ret = oldPushState.apply(this, arguments);
|
||||
window.dispatchEvent(new Event('pushstate'));
|
||||
window.dispatchEvent(new Event('locationchange'));
|
||||
return ret;
|
||||
let ret = oldPushState.apply(this, arguments);
|
||||
window.dispatchEvent(new Event('pushstate'));
|
||||
window.dispatchEvent(new Event('locationchange'));
|
||||
return ret;
|
||||
};
|
||||
window.addEventListener('popstate', () => {
|
||||
window.dispatchEvent(new Event('locationchange'));
|
||||
window.dispatchEvent(new Event('locationchange'));
|
||||
});
|
||||
|
||||
|
||||
window.addEventListener('locationchange', locationChange);
|
||||
let urlBeforeChange = window.location.href;
|
||||
|
||||
|
||||
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() {
|
||||
let URL = window.location.pathname.split("/").filter(d => (d !== 'Web') && (d !== 'index.html')).join("/")
|
||||
if(URL === "") URL = "/"
|
||||
console.log(URL)
|
||||
console.log(document.body.children[0])
|
||||
document.body.children[0].replaceWith(new window.routes[URL]())
|
||||
urlBeforeChange = window.location.href;
|
||||
console.log("location change")
|
||||
let URL = window.location.pathname.split("/").filter(d => (d !== 'Web') && (d !== 'index.html')).join("/")
|
||||
if(URL === "") URL = "/"
|
||||
console.log(URL)
|
||||
console.log(document.body.children[0])
|
||||
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() {
|
||||
const mobileDeviceRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
|
||||
return mobileDeviceRegex.test(navigator.userAgent);
|
||||
const mobileDeviceRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
|
||||
return mobileDeviceRegex.test(navigator.userAgent);
|
||||
}
|
||||
|
||||
|
||||
function getSafariVersion() {
|
||||
const userAgent = navigator.userAgent;
|
||||
const isSafari = userAgent.includes("Safari") && !userAgent.includes("Chrome");
|
||||
if (isSafari) {
|
||||
const safariVersionMatch = userAgent.match(/Version\/(\d+\.\d+)/);
|
||||
const safariVersion = safariVersionMatch ? parseFloat(safariVersionMatch[1]) : null;
|
||||
return safariVersion;
|
||||
}
|
||||
const userAgent = navigator.userAgent;
|
||||
const isSafari = userAgent.includes("Safari") && !userAgent.includes("Chrome");
|
||||
if (isSafari) {
|
||||
const safariVersionMatch = userAgent.match(/Version\/(\d+\.\d+)/);
|
||||
const safariVersion = safariVersionMatch ? parseFloat(safariVersionMatch[1]) : null;
|
||||
return safariVersion;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user