First commit

application/elements/textarea.js

@@ -0,0 +1,306 @@
+
+
+import document 		from '/unify/document.js';
+
+import tools	 		from '/unify/tools.js';
+
+export default class textarea{
+
+	outline					= "none";
+
+	margin					= 12;
+
+	renderToDOM				= true;
+
+	#ifdef MACOS
+
+		width					= "70%";
+
+		#ifdef LIGHT
+
+			background		= "rgb(0 0 0 / 3%)";
+
+			background		= "rgb(0 0 0 / 3%)";
+
+			color			= "black";
+
+		#endif
+
+
+		#ifdef DARK
+
+			background		= "rgb(255 255 255 / 3%)";
+
+			background		= "#3e3c3c!important";
+
+			color			= "white";
+
+		#endif
+
+		padding					= 6;
+
+		margin					= 6;
+
+		marginRight				= 20;
+
+		height					= "fit-content";
+
+		borderRadius			= 0;
+
+		fontWeight				= "bold";
+
+		fontSize				= 10;
+
+		border					= "1px solid rgb(255 255 255 / 18%)";
+
+	#endif
+
+
+	#ifdef WINDOWS
+
+
+		margin					= 12;
+
+		padding					= 12;
+
+
+		borderWidth				= 1;
+
+		borderRadius			= 6;
+
+
+		borderColor				= "#E5E5E5";
+
+		borderBottomColor		= "#868686";
+
+		#ifdef LIGHT
+
+			background	= "#F7FAFC";
+
+			border		= "1px solid #E5E5E5";
+
+
+		#endif
+
+
+		#ifdef DARK
+
+			background		= "#2D2D2D"
+
+			border			= "1px solid #303030";
+
+			borderBottom	= "2px solid #9A9A9A";
+
+			color			= "WHITE";
+
+		#endif
+	
+	#endif
+
+
+
+	#ifdef ANDROID
+
+		margin		 = 4
+
+		height			= "auto"
+		#ifdef LIGHT
+
+			border		= "1px solid #E5E5E5";
+
+			borderRadius	= 20;
+
+			background		= "white";
+
+			padding			= 6;
+
+		#endif
+
+	#endif
+
+
+
+	focus() {
+
+		#ifdef WINDOWS
+
+		#ifdef LIGHT
+
+			this.borderBottom		= "2px solid #0067C0";
+
+			this.background			= "white";
+
+		#endif 
+
+		#ifdef DARK
+
+
+			this.borderBottom		= "2px solid #4CC2FF";
+
+			this.background			= "#1F1F1F";
+
+		#endif
+
+		#endif WINDOWS
+
+	}
+
+	blur() {
+
+
+		#ifdef WINDOWS
+
+		#ifdef LIGHT
+
+			this.background			= "#fbfbfb";
+
+			this.borderBottom		= "2px solid #868686";
+
+		#endif 
+
+		#ifdef DARK
+
+
+			this.background		= "#2D2D2D"
+
+			this.borderBottom	= "1px solid #9A9A9A";
+
+		#endif
+
+		#endif WINDOWS
+		
+	}
+
+
+	value 	= "";
+
+	layers	= 1;
+
+	
+	customElement 		= document.createElement("textarea");
+	
+	useCustomElement	= true;
+	//border			= "1px solid #d8d8d9";
+	
+	scrollbarColor		= "#98adc8 #eaeaea";
+
+	constructor() {
+
+		//super();
+		
+		var that = this;
+		
+		if( this.customElement.addEventListener ) {
+			
+			this.customElement.addEventListener('keydown', function( e ) {
+			
+			    if( e.keyCode === 9 ) { 
+
+					var start 		= this.selectionStart;
+
+					var end 		= this.selectionEnd;
+
+					var target 		= e.target;
+
+					var value 		= target.value;
+
+					// set textarea value to: text before caret + tab + text after caret
+					target.value = value.substring(0, start)
+						    + "	"
+						    + value.substring(end);
+
+					// put caret at right position again (add one for the tab)
+					this.selectionStart = this.selectionEnd = start + 1;
+
+					// prevent the focus lose
+					e.preventDefault();
+				
+			    }
+			    
+			}, false );
+
+		}
+		
+	}
+	
+	async keyup( event ){
+		//console.log("event.target.value", event.target.value);
+
+		this.value = event.target.value;
+
+	}
+
+	setup() {
+
+		var that = this;
+
+		that._useCustomElement = this.useCustomElement;
+
+		this.__defineSetter__( "useCustomElement", function( value ) { 
+
+			that._useCustomElement = value;
+			
+			that.setupElement( value );
+
+		});
+
+		this.__defineGetter__( "useCustomElement", function( value ){ 
+			
+			if( typeof that._useCustomElement == "undefined" ) {
+			
+				that._useCustomElement = false;
+
+				return false;
+				
+			} else {
+			
+				return that._useCustomElement;
+				
+			}
+		});
+
+
+		this.setupElement( this.useCustomElement );
+
+	}
+
+	setupElement( value ) {
+
+		this.customElement.setAttribute( "placeholder", this.placeholder );
+		
+
+		if( this.element ) {
+		
+			var parentNode = this.element.parentNode;
+			
+			if( this.useCustomElement ) {
+			
+				if( this.element.tagName != this.customElement.tagName ) {
+
+					parentNode.replaceChild( this.customElement, this.element );
+					
+					this.element = this.customElement;
+				
+				}
+			
+			} else {
+			
+				if( this.element.tagName != this.defaultElement.tagName ) {
+			
+					parentNode.replaceChild( this.defaultElement, this.element );
+					
+					this.element = this.defaultElement;
+				
+				}
+				
+			}
+			
+			this.updateElementContent();
+		
+		}
+
+		
+	}
+
+}
+