First commit

framework/unify/column.js

@@ -0,0 +1,182 @@
+/*
+
+	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 ESA Software Community License - Strong Copyleft LICENSE,
+	as published by the ESA.
+	See the ESA Software Community License - Strong Copyleft LICENSE, for more details.
+
+	https://unifyjs.org 
+
+*/
+
+
+
+import document 	from './document.js';
+
+import datatype 	from './datatype.js';
+
+
+
+export default class column{
+	
+	datatype				= datatype.VARCHAR;
+	
+	value 					= "";
+
+	type					= "column";
+
+
+	defineSetter() {
+
+		var that =  this;
+
+		this.__defineSetter__( "useCustomElement", function( value ) { 
+
+			that._useCustomElement = value;
+			
+			that.setupElement();
+
+		});
+
+	}
+
+	defineGetter() {
+
+		var that =  this;
+
+		this.__defineGetter__( "useCustomElement", function( value ){ 
+			
+			if( typeof that._useCustomElement == "undefined" ) {
+			
+				that._useCustomElement = false;
+				
+				return false;
+				
+			} else {
+			
+				return that._useCustomElement;
+				
+			}
+			
+		});
+
+	}
+
+	setup( ) {
+		
+		this._useCustomElement = this.useCustomElement;
+
+		this.defineSetter();
+
+		this.defineGetter();
+		
+		this.setupElement();
+		
+	}
+	
+	setAttributes() {
+
+		this.customElement.setAttribute( "type", this.inputType );
+
+		this.customElement.setAttribute( "autocomplete", this.autocomplete );
+
+		this.customElement.setAttribute( "placeholder", this.placeholder );
+		
+
+		if( this.step ) {
+
+			this.customElement.setAttribute( "step", this.step );
+		}
+		
+
+		if( this.placeholder && this.customElement ) {
+
+			this.customElement.setAttribute( "placeholder", this.placeholder );
+
+		}
+
+	}
+
+	serializeSizing() {
+
+		if( this.width ) {
+
+			if( typeof this.width == "number" ) {
+
+				this.customElement.style.width = this.width + "px"; 
+
+			} else {
+
+				this.customElement.style.width = this.width;
+
+			}
+
+		}
+
+	}
+
+	replaceCustomElement( parentNode ) {
+
+		parentNode.replaceChild( this.customElement, this.element );
+		
+		this.element = this.customElement;
+
+	}
+
+	replaceDefaultElement( parentNode ) {
+
+		parentNode.replaceChild( this.defaultElement, this.element );
+		
+		this.element = this.defaultElement;
+
+	}
+
+	handleDOMReplacement() {
+
+		var parentNode = this.element.parentNode;
+		
+		if( this.useCustomElement ) {
+
+			if( this.element.tagName != this.customElement.tagName ) {
+
+				this.replaceCustomElement( parentNode );
+			
+			}
+		
+		} else {
+		
+			if( this.element.tagName != this.defaultElement.tagName ) {
+
+				this.replaceDefaultElement( parentNode );
+
+			}
+			
+		}
+
+	}
+
+	setupElement() {
+
+		if( this.customElement ) {
+			
+			this.setAttributes();
+
+			this.serializeSizing();
+
+		}
+
+		if( this.element ) {
+
+			this.handleDOMReplacement();
+		
+			this.updateElementContent();
+		
+		}
+
+	}
+	
+}