First commit

framework/client/dom.js

@@ -0,0 +1,291 @@
+/*
+
+	Copyright (c) 2020, 2023, The Unified Company.
+
+	This code is part of Unify.
+
+	This program is free software; you can redistribute it and/or modify
+	it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE,
+	as published by the Free Software Foundation.
+	See the GNU AFFERO GENERAL PUBLIC LICENSE, for more details.
+
+	https://unifyjs.org 
+
+*/
+
+import document 	from '../unify/document.js';
+
+import tools	 	from '../unify/tools.js';
+
+export default class dom{
+
+	addDOMToSelector	= true;
+
+	setElement() {
+	
+		var objectName 		= tools.createCSSClassName( object );
+		
+		element.className 	= this.getClassName( object.editable, objectName ); //tools.cleanRollup( objectName )
+	
+	}
+
+	getClassName( editable, objectName ) {
+	
+		if( editable ) {
+		
+			return objectName + "Element";
+		
+		} else {
+
+			return objectName + "Grid grid";
+			
+		}
+	
+	}
+
+	createSetter( object ) {
+
+		object.__defineSetter__( "text", function( value ){ 
+
+			if( typeof value == "number" ) {
+
+				value = value.toString();
+
+			}
+
+			object.__text = value;
+			
+			object.updateElementContent();
+				
+		});
+
+	}
+
+	createGetter( object ) {
+
+		object.__defineGetter__( "text", function(){ 
+			
+			return object.__text;
+			
+		});
+
+	}
+	
+	createSetterAndGetters( object ) {
+	
+		object.__text = object.text;
+		
+		this.createSetter( object );
+		 
+		this.createGetter( object );
+		 
+	}
+
+	createDOMElements( object, objectName ) {
+
+		object.elements = [];
+
+		if( object.layers == 2 ) {
+		
+			object.boxElement = this.createDiv( objectName, "box", object.id );
+			
+			object.elements.push( object.boxElement  );
+
+		}
+
+		object.defaultElement = this.createDiv( objectName, "grid", object.id );
+
+		if( object.useCustomElement ) {
+		
+			object.element = object.customElement;
+			
+		} else {
+		
+			object.element = object.defaultElement;
+			
+		}
+
+		object.elements.push( object.element );
+
+	}
+
+	addClasses( object, objectName ) {
+
+		var type 			= "Element";
+
+		var mainClassName	= objectName; //tools.cleanRollup(  );
+
+		object.customElement.classList.add( mainClassName + type );
+
+		object.customElement.classList.add( type );
+
+		object.customElement.classList.add( this.device );
+
+		object.customElement.classList.add( this.tint );
+
+		object.customElement.classList.add( this.os );
+
+	}
+
+	updateZIndex( object ) {
+
+		if( !object.zIndex && object.setZIndex ) {
+		
+			object.element.style["z-index"] = tools.getApplicationDepth( object );
+
+			if( object.inverseZIndex ) {
+
+				object.element.style["z-index"] =  1000 - tools.getApplicationDepth( object )
+
+			}
+		
+		}
+
+	}
+
+	attachUnifyObjectToElements( object ) {
+
+		for( var c = 0; c < object.elements.length; c++ ) {
+		
+			object.elements[ c ].object = object;
+			
+		}
+
+	}
+
+	parseObject( object ) {
+
+		var objectName = tools.createCSSClassName( object );
+
+		this.createDOMElements( object, objectName );
+	
+		if( object.customElement ) {
+
+			this.addClasses( object, objectName );
+
+		} else {
+		
+			object.customElement = object.defaultElement;
+		
+		}
+		
+		this.createSetterAndGetters( object );
+
+		object.updateElementContent();
+		
+		this.updateZIndex( object );
+
+		this.attachUnifyObjectToElements( object );
+		
+		if( !object.selector && object.parent && object.addToDom ) {
+
+			this.parseProperty( objectName, object, object.parent );
+		
+		}
+		
+	}
+
+	addElementToDOMParent( object, propertyValue ) {
+
+		if( propertyValue.propertyName[0] == "_" ) {
+		
+			object.elements[ object.elements.length - 1 ].prepend( propertyValue.elements[0] );
+		
+		} else {
+
+			if( object.elements ) {
+
+				object.elements[ object.elements.length - 1 ].appendChild( propertyValue.elements[0] );
+
+			}		
+		
+		}
+
+	}
+
+	addElementToBody( propertyValue ) {
+
+		document.body.appendChild( propertyValue.elements[0] );
+				
+	}
+	
+	parseProperty( propertyName, propertyValue, object ) {
+
+		if( tools.isUnifyObject( propertyName, propertyValue ) ) {
+		
+			if( propertyValue.absolute ) {
+			
+				this.addElementToBody( propertyValue );
+
+				return true;
+			
+			}
+	
+			this.addElementToDOMParent( object, propertyValue );
+
+		}
+
+	}
+	
+	parseInnerElements( object ){
+	
+		var elements = object.elements;
+
+		for( var c = elements.length - 1; c > 0; c--) {
+
+			elements[ c - 1 ].appendChild( elements[c] );
+
+		}
+
+		if( object.selector && this.addDOMToSelector ) {
+		
+			this.appendToSelector( object, elements );
+	
+		}
+	}
+	
+	appendToSelector( object, elements ) {
+
+		var selector = object.selector;
+
+		var element  = document.querySelector( selector );
+
+		if( element ) {
+
+			element.appendChild( elements[0] );
+	
+		}
+		
+	}
+
+	createDiv( divName, type, id ){
+	
+		var div = document.createElement("div");
+
+		var mainClassName		= divName + tools.CamelCase( type.toUpperCase() ); //tools.cleanRollup( 
+	
+		div.classList.add( mainClassName );
+
+		if( id ) {
+
+			div.classList.add( mainClassName.replace( "_" + id, "" ).replace(id, "")  );
+
+		}
+		
+		div.classList.add( type );
+
+		div.classList.add( this.device );
+
+		div.classList.add( this.tint );
+
+		div.classList.add( this.os );
+		
+		return div;
+	
+	}
+
+}
+
+
+
+