Unify/framework/client/dom.js

/*

	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;
	
	}

}