First commit

application/elements/select.js

@@ -0,0 +1,251 @@
+
+import header	 			from './header.js';
+import button	 			from './button.js';
+
+import querySQL	 			from '/unify/querySQL.js';
+import renderCollection		from '/unify/renderCollection.js';
+import document 			from '/unify/document.js';
+
+
+import permission			from '/user/group/user.group.permission.js';
+
+
+export default class select extends renderCollection { 
+
+	values					= new Array();
+
+	width					= 200;
+	
+	layers					= 1;
+
+	customElement			= document.createElement("select");
+
+	useCustomElement 		= true;
+	
+	editable				= true;
+
+	typedSelect				= false;
+
+	debug					= true;
+
+	#ifdef WINDOWS
+
+		borderBottom			= "2px solid #868686"
+
+		borderRadius			= 6;
+
+		padding					= 8;
+
+		margin					= 12;
+
+		#ifdef LIGHT
+
+			background				= "#F7FAFC";
+
+			border					= "1px solid #E5E5E5";
+
+			opaqueBackgroundColor	= "#F7FAFC";
+
+
+			focusBackgroundColor	= "white";
+
+			focusBorderBottom		= "2px solid #4CC2FF";
+
+
+			blurBackgroundColor		= "#F7FAFC";
+
+			blurBorderBottom		= "1px solid #E5E5E5";
+
+
+		#endif
+
+
+		#ifdef DARK
+
+			background				= "#2D2D2D!important"
+
+			webkitBoxShadow			= "0 0 0px 30px #2D2D2D inset!important";
+
+			webkitTextFillColor		= "white";
+
+			color					= "white"
+
+			transition				= "background-color 5000s ease-in-out 0s";
+
+
+			border					= "1px solid #303030";
+
+			borderBottom			= "2px solid #9A9A9A";
+
+			color					= "WHITE";
+
+			opaqueBackgroundColor	= "#2D2D2D!important";
+
+
+			focusBackgroundColor	= "#1F1F1F";
+
+			focusBorderBottom		= "2px solid #0067C0";
+
+
+			blurBackgroundColor		= "#fbfbfb";
+
+			blurBorderBottom		= "1px solid #9A9A9A";
+
+	
+
+		#endif
+	
+
+	#endif
+
+
+	constructor( object, collection ) {
+
+		super( object, collection );
+
+		if( collection && collection.type == "collection" ) {
+
+			for (var i = 0; i < collection.rows.length; i++) {
+
+				var row = collection.rows[i];
+
+				this["option" + i] = row;
+			}
+
+		}
+
+	}
+
+
+	
+	change() {
+
+		if( this.element.selectedOptions ) {
+
+			var selectedElement	= this.element.selectedOptions[ 0 ];
+			
+			var selectedID		= parseFloat( selectedElement.value );
+			
+			this.value			= selectedID;
+			
+			this.parent.value 	= selectedID;
+			
+			console.log("selected option", this.parent);
+		
+		}
+
+		if( this.element.tagName == "SELECT" ) {
+
+			var selectedElement	= this.element.selectedOptions[ 0 ];
+
+			var element 			= this.element;
+
+			var index 				= element.selectedIndex;
+			var options 			= element.options;
+
+			var selectedOption 		= options[ index ];
+			var selectedOptionValue = selectedOption.value;
+
+			this.value			= selectedOptionValue;
+			
+			this.parent.value 	= selectedOptionValue;
+
+			console.log( "value is now:", this.value );
+		}
+
+
+		if( this.update ) {
+
+			this.update();
+			
+		}
+		
+	
+	}
+	
+	addValue( value ) {
+		
+		if( !this.values.includes( value ) ) {
+		
+			this.values.push( value );
+		}
+		
+		this.value = this.values.join(",");
+	
+	}
+	
+	removeValue( value ) {
+	
+		for( var c = 0; c < this.values.length;c++ ) {
+		
+			if( this.values[c] == value ) {
+			
+				delete this.values[c];
+			
+			}
+		
+		}
+		
+		this.value = this.values.join(",");
+	
+	}
+	
+	valueExists( value ) {
+	
+		return this.values.includes( value );
+	
+	}
+	
+
+
+	serverSign( object ) {
+		
+		this.create();
+
+	}
+
+
+	permission() {
+		
+		this.allow( permission.admin, "READ" );
+
+		this.allow( permission.admin, "WRITE" );
+
+	}
+
+	addOption( value, label, selected ) {
+
+		var optionElement		= document.createElement("option")
+
+		optionElement.text 		= label;
+
+		optionElement.id 		= value;
+
+		optionElement.value 	= value;
+
+		if( label == "Select Country" ) {
+
+			optionElement.setAttribute("disabled", "")  
+
+			optionElement.setAttribute("selected", "")  
+			
+
+		}
+
+		if( selected ) {
+
+			optionElement.setAttribute( "selected", "" )  
+
+		}
+
+		this.customElement.appendChild( optionElement );
+
+	}
+
+}
+
+
+
+
+
+