nodality 1.0.0-beta.1

package/layout/textField.js

@@ -0,0 +1,282 @@
+import {Animator} from "./animator.js";
+
+class TextField extends Animator {
+	constructor(text){
+		super();
+		this.text = text;
+		this.res = null;
+        this.valid = false;
+		this.setup();
+	}
+	
+	setup(){
+		let el = document.createElement("input");
+		
+		this.res = el;
+		this.res.style.padding = 0;
+		this.res.style.margin = 0;
+		this.res.style.padding = ".4rem .75rem";
+		
+		this.res.style.fontSize = "1rem";
+
+		let query = window.matchMedia("(max-device-width: 415px)");
+			if (query.matches) {
+				this.res.style.width = "100%";
+			
+			} else {
+				
+			}
+
+
+	//	div.style.width = "100%";
+		return this;
+	}
+    
+
+	set(obj){
+		this.options = obj;
+		this.res.setAttribute("type", obj.type ?? "text");
+		obj.placeholder && (this.res.placeholder = obj.placeholder);
+		obj.arrayPadding && this.arrayPadding(obj.arrayPadding.sides, obj.arrayPadding.value);
+		obj.arrayMargin && this.arrayMargin(obj.arrayMargin.sides, obj.arrayMargin.value);
+		obj.pad && this.pad(obj.pad);
+        obj.mar && this.mar(obj.mar);
+		return this;
+	}
+
+
+    arrayPadding(arr, value) {
+		//alert("PP")
+		//console.log(arr);
+			if (arr.includes("left")){
+				this.res.style.paddingLeft = value;
+			}
+	
+			// console.log("PAD");
+			// console.log(this.res.style.paddingLeft);
+			// console.log(arr);
+			// console.log(value);
+			
+			if (arr.includes("right")){
+				this.res.style.paddingRight = value;
+			}
+			
+			if (arr.includes("top")){
+				this.res.style.paddingTop = value;
+			}
+			
+			if (arr.includes("bottom")){
+				this.res.style.paddingBottom = value;
+			}
+	
+			if (arr.includes("all")){
+				this.res.style.padding = value;
+					}
+				
+			
+			return this;
+		}
+
+		toCode() {
+			const objString = JSON.stringify(this.options, null, 4);
+			return [`new TextField().set(${objString})`];
+		}
+	
+		arrayMargin(arr, value) {
+			//alert("PP")
+			//console.log(arr);
+				if (arr.includes("left")){
+					this.res.style.marginLeft = value;
+				}
+		
+				// console.log("PAD");
+				// console.log(this.res.style.paddingLeft);
+				// console.log(arr);
+				// console.log(value);
+				
+				if (arr.includes("right")){
+					this.res.style.marginRight = value;
+				}
+				
+				if (arr.includes("top")){
+					this.res.style.marginTop = value;
+				}
+				
+				if (arr.includes("bottom")){
+					this.res.style.marginBottom = value;
+				}
+		
+				if (arr.includes("all")){
+					this.res.style.margin = value;
+						}
+					
+				
+				return this;
+			}
+			
+    
+    setValid(valid, value){
+        
+        
+        
+        if (valid){
+          this.res.style.border = "6px solid green";
+        } else {
+             this.res.style.border = "6px solid red";
+        }
+        
+        if (value.length === 0){
+             this.res.style.border = "none";
+        }
+        
+        return this;
+        
+    }
+    
+     auto() {
+		const adj = () => {
+			let query = window.matchMedia("(max-device-width: 415px)");
+			if (query.matches) {
+				this.res.style.fontSize = '3rem';
+		
+			} else {
+				this.res.style.fontSize = '1rem';
+			}
+		}
+
+		adj();
+		window.addEventListener("resize", adj);
+		return this;
+	}
+	
+	listen(value){
+		this.res.addEventListener("input", (e) => this.process(e) /*console.log(this.res.value)*/);
+		return this;
+	}
+	
+	value(val){
+		 this.res.setAttribute("value", val);
+		return this;
+	}
+	
+	password(){
+		this.res.setAttribute("type", "password");
+		return this;
+	}
+	
+	number(){
+		this.res.setAttribute("type", "number");
+		return this;
+	}
+	
+	week(){
+		this.res.setAttribute("type", "week");
+		return this;
+	}
+	
+	process(e){
+		//console.log(this.res.value)
+		return this.res.value;
+	}
+	
+	font(font){
+		this.res.style.fontFamily = font;
+		return this;
+	}
+	
+	size(s){
+        this.res.style.fontSize = s;
+		return this;
+	}
+	
+	em(e){
+		this.res.style.fontSize = `${e}em`;
+		return this;
+	}
+	
+	color(color){
+		this.res.style.color = color;
+		return this;
+	}
+	
+	weight(weight){
+		this.res.style.fontWeight = weight;
+		return this;
+	}
+	
+	bold(){
+		this.res.style.fontWeight = "bold";
+		return this;
+	}
+	
+	italic(){
+		this.res.style.fontStyle = "italic";
+		return this;
+	}
+	
+	padding(L, T, R, B){
+        
+        
+        if (L){
+           this.res.style.padding = `${L}px`;
+        }
+        
+        else if (L && T && R && B){
+            
+        
+		this.res.style.paddingLeft = L;
+		this.res.style.paddingTop = T;
+		this.res.style.paddingRight = R;
+		this.res.style.paddingBottom = `${B}px`;
+        }
+		return this;
+	}
+	
+	margin(L, T, R, B){
+		this.res.style.marginLeft = L;
+		this.res.style.marginTop = T;
+		this.res.style.marginLeft = R;
+		this.res.style.marginBottom = `${B}px`;
+		return this;
+	}
+	
+    
+    placeholder(text){
+        this.res.setAttribute("placeholder", text);
+        return this;
+    }
+    
+	border(color, w){
+		this.res.style.border = `${w}px solid ${color}`;
+		return this;
+	}
+	
+	
+	width(w){
+		this.res.style.width = w;
+		return this;
+	}
+	
+	round(amount){
+		this.res.style.borderRadius = `${amount}px`;
+		return this;
+	}
+	
+	onChange(action){
+		var value = this.res.value;
+		this.res.addEventListener("input", e => { action(this.res.value); /*this.res.value = value*/ });
+		// this.res.value = 
+		return this;
+	}
+	
+	render(div){
+		if (div){
+			document.querySelector(div).appendChild(this.res);
+		} else {
+			return this.res;
+		}
+			return this.res;
+	}
+}
+	
+export { TextField };

package/layout/ulist.js

@@ -0,0 +1,147 @@
+import {Animator} from "./animator.js";
+
+
+
+// 13:28 07/04/2020 - BEGIN NOTHING GONNA STOP US NOW  Lets go!
+class UList extends Animator {
+	constructor(){
+		super();
+		this.res = null;
+		this.setup();
+	}
+
+
+	set(obj){
+		obj.pad && this.pad(obj.pad);
+		obj.mar && this.mar(obj.mar);
+		return this;
+	}
+	
+	setup(){
+		let el = document.createElement("ul");
+		this.res = el;
+		
+		this.res.style.padding = 0;
+		this.res.style.margin = 0;
+		return this;
+	}
+
+
+	newItems(items){
+		for (var i = 0; i < items.length; i++){
+			console.log(items[i]);
+			let rendered = items[i].render();
+			this.res.appendChild(rendered);
+		}
+		
+		return this;
+	}
+	
+	items(itemso){
+		for (var i = 0; i < itemso.length; i++){
+			let li = document.createElement("li");
+			let node = document.createTextNode(itemso[i]);
+			li.appendChild(node);
+			this.res.appendChild(li);
+		}
+		
+		return this;
+	}
+	
+	
+	font(font){
+		this.res.style.fontFamily = font;
+		return this;
+	}
+	
+	
+	size(s){
+		this.res.style.fontSize = s;
+		return this;
+	}
+	
+	em(e){
+		this.res.style.fontSize = `${e}em`;
+		return this;
+	}
+	
+	color(color){
+		this.res.style.color = color;
+		return this;
+	}
+	
+	align(direction){
+		this.res.style.textAlign = `${direction}`;
+		return this;
+	}
+	
+	weight(weight){
+		this.res.style.fontWeight = weight;
+		return this;
+	}
+	
+	bold(){
+		this.res.style.fontWeight = "bold";
+		return this;
+	}
+	
+	italic(){
+		this.res.style.fontStyle = "italic";
+		return this;
+	}
+	
+	/*padding(val){
+		this.res.style.padding = val;
+		return this;
+	}*/
+	
+	
+	margin(val){
+		this.res.style.margin = val;
+		return this;
+	}
+	
+	border(w, color){
+		this.res.style.border = `${w}px solid ${color}`;
+		return this;
+	}
+	
+	
+	
+	
+	padding(T, L, R, B){
+		this.res.style.paddingTop = T;
+		this.res.style.paddingLeft = L;
+		this.res.style.paddingRight = R;
+		this.res.style.paddingBottom = B;
+		return this;
+	}
+	
+	
+	
+	
+	headline(){
+		this.em(4)
+		this.font("Arial")
+		this.bold()
+		return this;
+	}
+	
+	
+	caption(){
+		this.bold();
+		this.res.style.fontFamily = "Arial";
+		this.res.style.color = "#3498db";
+		return this;
+	}
+	
+	render(div){
+		if (div){
+			document.querySelector(div).appendChild(this.res);
+		} else {
+			return this.res;
+		}	
+	}
+}
+	 
+export { UList };

package/layout/video.js

@@ -0,0 +1,70 @@
+import {Animator} from "./animator.js";
+
+
+	
+	
+class Video extends Animator {
+	constructor(url, /*obj*/) {
+		super();
+		this.url = url;
+		this.res = null;
+		//this.setup(obj);
+		
+		this.setup();
+	}
+		
+		
+		
+		setup(){
+			this.res = document.createElement("video");
+			this.res.setAttribute("src", this.url);
+			this.res.setAttribute("controls", "controls");
+		}
+
+
+		set(obj){
+			this.options = obj;
+			obj.radius && (this.res.style.borderRadius = "1rem");
+			obj.width && (this.res.style.width = `${obj.width}`);
+			obj.opacity && (this.res.style.opacity = obj.opacity);
+			return this;
+		}
+		
+		
+		
+		size(w/*, h*/) {
+			
+			this.res.style.width = w;
+			//this.res.style.height = w;
+			
+			
+		/*if (w && h) {
+			this.res.style.width = w;
+			this.res.style.height = h;
+		} else {
+			this.res.style.width = w;
+			this.res.style.height = w;
+		}*/
+
+		return this;
+	}
+		
+	toCode() {
+        const objString = JSON.stringify(this.options, null, 4);
+        return [`new Video("${this.url}").set(${objString})`];
+    }
+	
+		render(el) {
+		if (el) {
+			document.querySelector(el).appendChild(this.res);
+		} else {
+			return this.res;
+		}
+	}
+	}
+	
+	
+	//var _oldVideo = Video;
+//Video = function(...args) { return new _oldVideo(...args) };
+	
+export { Video };

package/layout/withoutNew.js

@@ -0,0 +1,60 @@
+var _old = Text;
+Text = function(...args) { return new _old(...args) };
+
+var _oldLink = Link;
+Link = function(...args) { return new _oldLink(...args) };
+
+var _oldNavBar = NavBar;
+NavBar = function(...args) { return new _oldNavBar(...args) };
+
+var _oldHeader = Header;
+Header = function(...args) { return new _oldHeader(...args) };
+
+var _oldCard = Card;
+Card = function(...args) { return new _oldCard(...args) };
+
+
+
+
+/*
+var _oldImage = ExactImage;
+ExactImage = function(...args) { return new _oldImage(...args) };
+*/
+
+var _oldSpacer = Spacer;
+Spacer = function(...args) { return new _oldSpacer(...args) };
+
+var _oldGrid = Grid;
+Grid = function(...args) { return new _oldGrid(...args) };
+
+var _oldCenter = Center;
+Center = function(...args) { return new _oldCenter(...args) };
+
+var _oldGroup = Group;
+Group = function(...args) { return new _oldGroup(...args) };
+/*
+var _oldParagraph = Paragraph;
+Paragraph = function(...args) { return new _oldParagraph(...args) };
+*/
+
+
+var _oldRow = Row;
+Row = function(...args) { return new _oldRow(...args) };
+
+var _oldWrap = Wrap;
+Wrap = function(...args) { return new _oldWrap(...args) };
+
+var _oldAudio = Audio;
+Audio = function(...args) { return new _oldAudio(...args) };
+
+var _oldImage = Image;
+Image = function(...args) { return new _oldImage(...args) };
+
+var _oldFlexRow = FlexRow;
+FlexRow = function(...args) { return new _oldFlexRow(...args) };
+
+var _oldTable = Table;
+Table = function(...args) { return new _oldTable(...args) };
+
+var _oldSideBar = SideBar;
+SideBar = function(...args) { return new _oldSideBar(...args) };

package/layout/wrap.js

@@ -0,0 +1,140 @@
+import {Animator} from "./animator.js";
+
+class Wrap { 
+	constructor(els){
+		this.code = [];
+
+		this.setup();
+		
+		
+		
+		
+		for (var i = 0; i < els.length; i++){
+			
+			
+			/*var element = els[i];
+			var _oldEl = element;
+			element = function(...args) { return new _oldEl(...args) };
+			*/
+			
+			
+			//console.log(new els[i])
+			this.res.appendChild(els[i].render().render());
+
+
+
+			
+		}
+	}
+
+
+
+	
+	
+	setup(){
+		let gr = document.createElement("div");
+		gr.style.padding = 0;
+		gr.style.margin = 0;
+		this.res = gr;
+	}
+	
+	width(w, shouldCenter){
+		this.res.style.width = w;
+		
+		if (shouldCenter){
+		this.res.style.marginLeft = "auto";
+		this.res.style.marginRight = "auto";
+		}
+		return this;
+	}
+	
+	padding(value){
+		this.res.style.padding = `${value}px`;
+		return this;
+	}
+	
+	size(w, h){
+		this.w = w;
+		this.h = h;
+		
+		if (this.w){
+			this.res.style.width = this.w;
+		} else {
+			this.res.style.width = window.innerWidth;
+		}
+		
+	if (this.h){
+			this.res.style.height = this.h;
+		} else {
+			this.res.style.height = window.innerHeight;
+		}
+		
+		
+		return this;
+	}
+	
+	
+	
+	
+	
+	/*items(els){
+		for (var i = 0; i < els.length; i++){
+			this.res.appendChild(els[i].render().render());
+		}
+		return this;
+	}*/
+	
+	
+	
+	border(color, width){
+		this.res.style.border = `${width}px solid ${color}`;
+		return this;
+	}
+	
+	render(el){
+		if (el){
+			document.querySelector(el).appendChild(this.res);
+		} else {
+			return this.res;
+		}
+		
+	}
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+export { Wrap };