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

4: Adding modern templates and preparing for remote usage

Browse Source
This commit is contained in:
metacryst
2023-12-03 23:39:36 +00:00
parent 38678b703a
commit e417df949a
4 changed files with 112 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
el.js Normal file
View File

@@ -0,0 +1,28 @@
class Index extends HTMLElement {
css = /*css*/ `
index-el {
}
`
html = /*html*/ `
`
constructor() {
super();
addStyle(this.css);
this.innerHTML = this.html;
}
connectedCallback() {
}
}
customElements.define('index-el', Index);
export default Index;

38
index.html
View File

@@ -4,37 +4,21 @@
<title>Quill</title> <title>Quill</title>
<link rel="icon" href=""> <link rel="icon" href="">
<link rel="stylesheet" href=""> <link rel="stylesheet" href="">
<script src=""></script>
<script type="module" src="https://server.parchment.page/quill.js"></script>
<script type="module"> <script type="module">
window.addStyle = function addStyle(cssString) { /* EXAMPLE IMPORTS
let container = document.querySelector("style#quillStyles"); import President from "./Web/President/President.js";
if(!container) { import RepublicanPrimaries from "./Web/President/RepublicanPrimaries.js";
container = document.createElement('style'); import MyRepresentatives from "./Web/myRepresentatives/MyRepresentatives.js";
container.id = "quillStyles"; */
document.head.appendChild(container);
}
let primarySelector = cssString.substring(0, cssString.indexOf("{")).trim(); window.routes = { // Replace with your imported objects, delete empty strings
primarySelector = primarySelector.replace(/\*/g, "all"); "/": /*President*/"",
primarySelector = primarySelector.replace(/#/g, "id-"); "/exampleone": /*RepublicanPrimaries*/"",
primarySelector = primarySelector.replace(/,/g, ""); "/exampletwo/examplethree": /*MyRepresentatives*/""
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;
} }
</script> </script>
<script type="module" src=""></script>
</head> </head>
<body> <body>

97
index.js
View File

@@ -1,28 +1,77 @@
class Index extends HTMLElement { window.css = function css(cssString) {
let container = document.querySelector("style#quillStyles");
css = /*css*/ ` if(!container) {
index-el { container = document.createElement('style');
container.id = "quillStyles";
} document.head.appendChild(container);
` }
html = /*html*/ `
`
constructor() {
super();
addStyle(this.css);
this.innerHTML = this.html;
}
connectedCallback() {
}
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
}
} }
customElements.define('index-el', Index); window.html = function html(elementString) {
export default Index; let parser = new DOMParser();
let doc = parser.parseFromString(elementString, 'text/html');
return doc.body.firstChild;
}
function trailingSlash(url) {
return url.endsWith("/") ? url : url+"/";
}
function noTrailingSlash(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;
};
window.addEventListener('popstate', () => {
window.dispatchEvent(new Event('locationchange'));
});
window.addEventListener('locationchange', locationChange);
let urlBeforeChange = window.location.href;
window.navigateTo = function(url) {
window.history.pushState({}, '', url);
}
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;
}
function detectMobile() {
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;
}
}

41
quill.js
View File

@@ -1,41 +0,0 @@
export function addStyle(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");
let stylesheet = container.querySelector(`:scope > style#${primarySelector}`)
if(!stylesheet) {
stylesheet = document.createElement('style');
stylesheet.id = primarySelector;
stylesheet.appendChild(document.createTextNode(cssString));
container.appendChild(stylesheet);
} else {
stylesheet.innerText = cssString
}
}
export function createElement(elementString) {
let parser = new DOMParser();
let doc = parser.parseFromString(elementString, 'text/html');
return doc.body.firstChild;
}
export function detectMobile() {
const mobileDeviceRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
return mobileDeviceRegex.test(navigator.userAgent);
}
export 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;
}
}