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

create OO with default values, adding triangle

Browse Source
This commit is contained in:
metacryst
2024-04-02 17:19:28 -05:00
parent 6a33126563
commit c9ae021c6b
10 changed files with 63 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
3.14.js
View File

@@ -1,42 +0,0 @@
/* Class */
// - Force initialization of all variables. Throw error if not enough params passed in
/* State (denoted by "$" in front of the name) */
// - Sync with attributes
// - Proxies to enforce type
// w/ initializers like [] {} 0 ""
// How would one detect class object changes?
// Does object detection go all layers down?
// Swift: Yes, if you change the inner it will rerender the outer.
// struct ContentView: View {
// @State private var outerState = OuterStruct()
// var body: some View {
// Text(outerState.innerState.property)
// .onTapGesture {
// outerState.innerState.property = "New Value"
// }
// }
// }
// struct OuterStruct {
// var innerState = InnerStruct()
// }
// struct InnerStruct {
// var property = "Initial Value"
// }
// Reactivity:
// Parse lines which use the variables?
// Rerender whole thing?
// Lit does only parts which depend, React does whole thing then compares
// Binding
// Objects are passed by reference, str and int by value

2
Test/init.test.js
View File

@@ -272,7 +272,7 @@ window.testSuites.push( class testInit {
}
try {
let space = ChildSpace(Form.decode({path: "/asd"}))
let space = ChildSpace(Form.create({path: "/asd"}))
} catch(e) {
if(e.message.includes("Cannot read properties of undefined (reading 'path')")) {
return "Form did not get initialized!"

21
Test/observedobject.test.js
View File

@@ -8,7 +8,7 @@ window.testSuites.push( class testObservedObject {
}
try {
let obj = Form.decode({id: "123"})
let obj = Form.create({id: "123"})
return "Not implemented"
} catch {}
}
@@ -20,14 +20,23 @@ window.testSuites.push( class testObservedObject {
$canvasPosition
}
let obj = Form.decode({id: "123", path: "/", canvasPosition: "25|25"})
let obj = Form.create({id: "123", path: "/", canvasPosition: "25|25"})
if(!(obj && obj["id"] === "123" && obj["path"] === "/" && obj["canvasPosition"] === "25|25")) {
return "Not all fields initialized!"
}
}
ConstructorWorks() {
return "not done"
DefaultValueWorks() {
class WindowState extends ObservedObject {
$sidebarOut = false
}
let obj = WindowState.create()
console.log(obj)
if(obj.sidebarOut !== false) {
return "Default field not set"
}
}
NotExtensible() {
@@ -41,7 +50,7 @@ window.testSuites.push( class testObservedObject {
// $canvasPosition
// }
// let obj = Form.decode({id: "123", path: "/", canvasPosition: "25|25"})
// let obj = Form.create({id: "123", path: "/", canvasPosition: "25|25"})
// if(!(obj && obj["id"] === "123" && obj["path"] === "/" && obj["canvasPosition"] === "25|25")) {
// return "Not all fields initialized!"
// }
@@ -55,7 +64,7 @@ window.testSuites.push( class testObservedObject {
// }
// let json = {id: "123", path: "/", canvasPosition: "25|25"}
// let obj = Form.decode({id: "123", path: "/", canvasPosition: "25|25"})
// let obj = Form.create({id: "123", path: "/", canvasPosition: "25|25"})
// json.id = "456"
// if(!(obj["id"] === "456")) {
// return "Change to original object was not reflected!"

6
Test/render.test.js
View File

@@ -79,7 +79,7 @@ window.testSuites.push( class testRender {
}
class File extends Shadow {
$$form = Form.decode({id: "123", path: "/", canvasPosition: "25|25"})
$$form = Form.create({id: "123", path: "/", canvasPosition: "25|25"})
render = () => {
p(this.form.path)
@@ -101,7 +101,7 @@ window.testSuites.push( class testRender {
$canvasPosition
}
let object = Form.decode({id: "123", path: "/", canvasPosition: "25|25"});
let object = Form.create({id: "123", path: "/", canvasPosition: "25|25"});
register(class File extends Shadow {
$$form
@@ -132,7 +132,7 @@ window.testSuites.push( class testRender {
$children
}
let object = Form.decode({id: "123", children: [{path: "berry"}, {path: "blue"}]});
let object = Form.create({id: "123", children: [{path: "berry"}, {path: "blue"}]});
register(class File extends Shadow {
$$form

28
el.js
View File

@@ -1,28 +0,0 @@
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;

17
index.js
View File

@@ -213,7 +213,7 @@ class ObservedObject {
this._observers = {}
}
static decode(obj) {
static create(obj = {}) {
let instance = new this()
Object.keys(instance).forEach((key) => {
@@ -221,6 +221,7 @@ class ObservedObject {
key = key.slice(1)
instance._observers[key] = new Map()
const backingFieldName = `_${key}`;
instance[backingFieldName] = instance["$" + key]
Object.defineProperty(instance, key, {
set: function(newValue) {
if(Array.isArray(newValue) && newValue.parent === undefined) {
@@ -254,7 +255,7 @@ class ObservedObject {
if(obj[key]) {
instance[key] = obj[key]
} else {
if(!instance[key]) {
if(instance[key] === undefined || instance[key] === null) {
throw new Error(`ObservedObject: Non-default value "${key}" must be initialized!`)
}
}
@@ -676,6 +677,18 @@ window.Circle = function(text = "") {
return div
}
window.Triangle = function() {
let div = document.createElement("div")
div.style.cssText += `
width: 20px;
height: 17.3px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
background: black;
`
Registry.render(div)
return div
}
/* PROTOTYPE FUNCTIONS */
Array.prototype.last = function() {

49
navigation.js
View File

@@ -1,49 +0,0 @@
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);
}
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() {
console.log("location change")
let URL = window.location.pathname.split("/").filter(d => (d !== 'Web') && (!d.includes('.html'))).join("/")
if(URL === "") URL = "/"
let wrapper = document.querySelector("#wrapper");
if(wrapper) {
wrapper.replaceWith(new window.routes[URL]())
document.body.children[0].id = "wrapper"
} else {
document.body.prepend(new window.routes[URL]())
document.body.children[0].id = "wrapper"
}
urlBeforeChange = window.location.href;
}

60
navtemplate.js
View File

@@ -1,60 +0,0 @@
class NavigationIndex extends HTMLElement {
urlBeforeChange;
css = /*css*/ `
navigation-index {
}
`
html = /*html*/ `
`
constructor() {
super();
quill.addStyle(this.css);
this.innerHTML = this.html;
}
connectedCallback() {
this.listenForNavigation();
}
listenForNavigation() {
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', this.locationChange);
this.urlBeforeChange = window.location.href;
}
locationChange = async () => {
let splitURL = window.location.pathname.split("/");
let urlPrefix = splitURL.slice(0, -1).join('/');
let urlEnding = splitURL[splitURL.length-1];
if(urlEnding === '') {
this.innerHTML = this.html;
} else {
let pascalizedEnding = urlEnding.replace(/(^\w|-\w)/g, (urlEnding) => urlEnding.replace(/-/, "").toUpperCase());
import(`.${urlPrefix}/${pascalizedEnding}/${pascalizedEnding}.js`)
let htmlTag = urlEnding.includes("-") ? urlEnding : urlEnding + "-wrapper";
this.innerHTML = `<${htmlTag}></${htmlTag}>`
}
this.urlBeforeChange = window.location.href;
}
}
customElements.define('navigation-index', NavigationIndex);
export default NavigationIndex;

29
notes.txt
View File

@@ -1,3 +1,32 @@
Shadow.File = (param) => new class {
trippy = "asd"
constructor() {
console.log(param)
}
}
console.log(Shadow.File("as"))
ObservedObject.WindowState = () => ({
sidebarOut: false,
children: null
})
let windowState = ObservedObject.WindowState()
console.log(windowState)
Shadow(class File {
}, "file-")
3/16
const TestClass = () => new class {
constructor() {

11
todo.txt
View File

@@ -1,11 +0,0 @@
Constructor Parameters
In swift, can choose to pass in parameters from outside or not
This works because of labels and ability to override based on parameters
In JS, how would I init state from within but pass in another parameter?
Refresh in Subpages
The hosting service needs to redirect all pages to the main index.html
This is the problem with Forum - you navigate, it's fine, refresh, goes away