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

Moving styles, Stacks working in Group

Browse Source
This commit is contained in:
metacryst
2024-09-12 15:35:13 -05:00
parent cfdf67998d
commit 1060797170
2 changed files with 68 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
Test/Element/Group.test.js
View File

@@ -15,4 +15,24 @@ window.testSuites.push( class testGroup {
}
}
VStack() {
let divs = Group(() => {
VStack(() => {
div()
div()
div()
})
})
if(!(divs instanceof HTMLElement)) {
return `Did not receive an element!`
}
if(!(divs.style.display === "flex")) {
return `Did not receive a flex container!`
}
if(!(divs.children.length === 3)) {
return `Incorrect amount of children!`
}
}
})

90
index.js
View File

@@ -110,44 +110,6 @@ window.html = function html(htmlString) {
return fragment;
};
/* STYLES */
window.quillStyles = document.querySelector("style#shadows");
if(!window.quillStyles) {
window.quillStyles = document.createElement('style');
window.quillStyles.id = "shadows";
document.head.appendChild(window.quillStyles);
}
window.quillStyles.add = function(tag) {
let stylesheet = this.querySelector(`:scope > style[id='${tag}']`)
tag = tag.replace(/\*/g, "all");
tag = tag.replace(/#/g, "id-");
tag = tag.replace(/,/g, "");
if(!stylesheet) {
stylesheet = document.createElement('style');
stylesheet.id = tag;
this.appendChild(stylesheet);
}
}
window.quillStyles.update = function(tag, string) {
let sheet = this.querySelector(`:scope > style[id='${tag}']`)?.sheet
if(!sheet) console.error('Quill: could not find stylesheet to update!')
for (let i = 0; i < sheet.cssRules.length; i++) {
let rule = sheet.cssRules[i];
if (rule.selectorText === tag || rule.selectorText === `${tag.toLowerCase()}`) {
sheet.deleteRule(i);
break;
}
}
sheet.insertRule(`${tag} { ${string} }`, sheet.cssRules.length);
}
/* COMPATIBILITY */
function detectMobile() {
@@ -295,6 +257,8 @@ window.Shadow = class Shadow extends HTMLElement {
window.Registry = class Registry {
static style = document.querySelector("style#shadows");
/*
State Reactivity [stateName].get(elem).push(attribute)
_observers = {
@@ -583,7 +547,7 @@ window.Registry = class Registry {
});
customElements.define(tagname, el)
quillStyles.add(tagname)
this.addStyle(tagname)
// Actual Constructor
window[el.prototype.constructor.name] = function (...params) {
@@ -593,6 +557,40 @@ window.Registry = class Registry {
return elIncarnate
}
}
static addStyle = function(tag) {
let stylesheet = this.styles.querySelector(`:scope > style[id='${tag}']`)
tag = tag.replace(/\*/g, "all");
tag = tag.replace(/#/g, "id-");
tag = tag.replace(/,/g, "");
if(!stylesheet) {
stylesheet = document.createElement('style');
stylesheet.id = tag;
this.styles.appendChild(stylesheet);
}
}
static updateStyle = function(tag, string) {
let sheet = this.styles.querySelector(`:scope > style[id='${tag}']`)?.sheet
if(!sheet) console.error('Quill: could not find stylesheet to update!')
for (let i = 0; i < sheet.cssRules.length; i++) {
let rule = sheet.cssRules[i];
if (rule.selectorText === tag || rule.selectorText === `${tag.toLowerCase()}`) {
sheet.deleteRule(i);
break;
}
}
sheet.insertRule(`${tag} { ${string} }`, sheet.cssRules.length);
}
}
if(!Registry.styles) {
Registry.styles = document.createElement('style');
Registry.styles.id = "shadows";
document.head.appendChild(Registry.styles);
}
/* DEFAULT WRAPPERS */
@@ -662,12 +660,16 @@ window.ForEach = function (arr, cb) {
window.VStack = function (cb = () => {}) {
let nowRendering = window.rendering.last()
if(nowRendering.innerHTML === "") {
if(nowRendering.innerHTML === "") { // Parent is Empty, make it a VStack
let styles = `
display: flex;
flex-direction: column;
`
quillStyles.update(nowRendering.tagName.toLowerCase(), styles)
if(nowRendering instanceof Shadow) {
Registry.updateStyle(nowRendering.tagName.toLowerCase(), styles)
} else {
nowRendering.style.cssText += styles
}
cb()
return nowRendering
} else {
@@ -688,7 +690,11 @@ window.HStack = function (cb = () => {}) {
display: flex;
flex-direction: row;
`
quillStyles.update(nowRendering.tagName.toLowerCase(), styles)
if(nowRendering instanceof Shadow) {
Registry.updateStyle(nowRendering.tagName.toLowerCase(), styles)
} else {
nowRendering.style.cssText += styles
}
cb()
return nowRendering
}