First commit

application/demo/pages/appearance/panel.js

@@ -0,0 +1,17 @@
+
+import os			from "./rows/os.js";
+
+import tint			from "./rows/tint.js";
+
+import panel		from '/elements/panel.js';
+
+
+export default class appearancePanel extends panel{
+
+	flexDirection		= "column";
+
+	os					= new os();
+
+	tint				= new tint();
+
+}

application/demo/pages/appearance/rows/os.js

@@ -0,0 +1,37 @@
+
+import panelRow 					from '/elements/panel/row.js';
+
+import spinner 						from '/elements/preloaders/simpleSpinner.js';
+
+import osSelectorList				from "./os.selector.list.js";
+
+import osLabel						from "./os.label.js";
+
+
+export default class os extends panelRow{
+
+	flexDirection		= "row";
+
+	label				= new osLabel("Os");
+
+	osSelector			= new osSelectorList();
+
+	spinner				= new spinner();
+
+	create() {
+
+		this.osSelector.hide();
+
+	}
+
+	afterThemeLoad() {
+
+		this.spinner.hide()
+
+		this.osSelector.show();
+
+	}
+
+
+}
+

application/demo/pages/appearance/rows/os.label.js

@@ -0,0 +1,8 @@
+
+import label 						from '/elements/label.js';
+
+export default class osLabel extends label{
+
+	flex = "1";
+
+} 

application/demo/pages/appearance/rows/os.selector.js

@@ -0,0 +1,26 @@
+
+
+import themeSelector				from "../themeSelector.js";
+
+import tools 						from '/unify/tools.js';
+
+export default class themeOSSelectorItem extends themeSelector{
+
+	click() {
+
+		var osName = tools.CamelCase( this.selectLabel.text );
+
+		this.getRoot().os 	= osName;
+
+
+		this.parent.updateImages( this.getRoot().tint );
+
+		this.parents("appearancePanel").tint.themeTintSelectors.updateImages( osName )
+
+		this.highlight();
+
+	}
+
+	propegateEvent	= false;
+
+}

application/demo/pages/appearance/rows/os.selector.list.js

@@ -0,0 +1,44 @@
+
+import themeOSSelector				from './os.selector.js'
+
+import tools 						from '/unify/tools.js';
+
+
+export default class osSelectorList{
+
+	themeWindows	= new themeOSSelector("Windows");
+
+	themeMacOS		= new themeOSSelector("macOS");
+
+	//themeAndroid	= new themeOSSelector("Android");
+
+	updateImages( tint ) {
+
+		var camelCaseTint	= tools.CamelCase( tint );
+
+		this.themeWindows.setImage("/assets/images/themeSelectors/windows" + camelCaseTint + ".png");
+
+		this.themeMacOS.setImage("/assets/images/themeSelectors/macos" + camelCaseTint + ".png");
+
+		//this.themeAndroid.setImage("/assets/images/themeSelectors/macos" + camelCaseTint + ".png");
+
+	}
+
+	create() {
+
+		this.themeWindows.highlight();
+
+		this.themeWindows.setImage('/assets/images/themeSelectors/windowsLight.png');
+
+		this.themeMacOS.setImage('/assets/images/themeSelectors/macosLight.png');
+
+		//this.themeAndroid.setImage('/assets/images/themeSelectors/macosLight.png');
+	}
+
+	layers				= 1;
+
+	margin				= 4;
+
+	marginLeft			= "auto";
+
+}

application/demo/pages/appearance/rows/tint.js

@@ -0,0 +1,38 @@
+
+import panelRow 					from '/elements/panel/row.js';
+
+import select 						from '/elements/selectRenderCollection.js';
+
+import spinner 						from '/elements/preloaders/simpleSpinner.js';
+
+import themeTintSelectors			from "./tint.selector.list.js";
+
+import customLabel					from "./tint.label.js";
+
+
+
+export default class tint extends panelRow{
+
+	flexDirection			= "row";
+
+	label					= new customLabel("Appearance");
+
+	themeTintSelectors		= new themeTintSelectors();
+
+	spinner					= new spinner();
+
+	create() {
+
+		this.themeTintSelectors.hide()
+
+	}
+
+	afterThemeLoad() {
+
+		this.spinner.hide()
+
+		this.themeTintSelectors.show();
+
+	}
+
+}

application/demo/pages/appearance/rows/tint.label.js

@@ -0,0 +1,10 @@
+
+
+import label 						from '/elements/label.js';
+
+
+export default class customLabel extends label{
+
+	flex = "1";
+
+} 

application/demo/pages/appearance/rows/tint.selector.js

@@ -0,0 +1,24 @@
+
+import themeSelector		from "../themeSelector.js";
+
+import tools				from '/unify/tools.js';
+
+
+export default class themeTintSelector extends themeSelector{
+
+	click() {
+
+		var tintName = tools.CamelCase( this.selectLabel.text );
+	
+		this.parents("appearancePanel").os.osSelector.updateImages( tintName )
+
+		this.highlight();
+
+
+		this.getRoot().tint 	= tintName;
+
+	}
+
+	propegateEvent	= false;
+
+}

application/demo/pages/appearance/rows/tint.selector.list.js

@@ -0,0 +1,46 @@
+
+import themeTintSelector			from "./tint.selector.js"
+
+import tools 						from '/unify/tools.js';
+
+
+export default class themeTintSelectors{
+
+
+	themeLight		= new themeTintSelector("Light");
+
+	themeDark		= new themeTintSelector("Dark");
+
+
+	updateImages( os ) {
+
+		os				= os.toLowerCase();
+
+		var tint		= tools.CamelCase( this.getRoot().tint );
+
+
+		this.themeDark.setImage("/assets/images/themeSelectors/" + os + "Dark.png");
+
+		this.themeLight.setImage("/assets/images/themeSelectors/" + os + "Light.png");
+
+		this["theme"+tint].highlight();
+
+	}
+
+	create() {
+
+		this.themeDark.highlight();
+
+		this.themeDark.setImage('/assets/images/themeSelectors/windowsDark.png');
+
+		this.themeLight.setImage('/assets/images/themeSelectors/windowsLight.png');
+
+	}
+
+	layers				= 1;
+
+	margin				= 4;
+
+	marginLeft			= "auto";
+
+}

application/demo/pages/appearance/themeSelector.image.js

@@ -0,0 +1,41 @@
+
+
+export default class themaSelectorImage{
+
+	cursor			= "pointer";
+
+	backgroundSize	= "cover";
+
+	borderRadius	= 12;
+
+	layers			= 1;
+
+	width			= 80;
+
+	height			= 80;
+
+	margin			= 20;
+
+	marginBottom	= 4;
+
+	transition		= "1s"
+
+
+	border;
+
+	backgroundImage;
+
+
+	lowLight() {
+
+		this.border			= "none";
+
+	}
+
+	highlight() {
+
+		this.border			= "2px solid blue";
+
+	}
+
+}

application/demo/pages/appearance/themeSelector.js

@@ -0,0 +1,45 @@
+
+
+import themeSelectorImage		from "./themeSelector.image.js";
+
+import themeSelectorLabel		from "./themeSelector.label.js";
+
+
+export default class themeSelector{
+
+	flexDirection	= "column";
+
+	marginBottom		= 20;
+
+	constructor( name ) {
+
+		this.selectLabel.text				= name;
+
+	}
+
+	highlight() {
+
+		var children = this.parent.getChildren();
+
+		for (var i = 0; i < children.length; i++) {
+
+			children[i].selectImage.lowLight();
+
+		}
+
+		this.selectImage.highlight();
+
+	}
+
+	setImage( image ) {
+
+		this.selectImage.backgroundImage	= "url("+image+")";
+
+	}
+
+
+	selectImage		= new themeSelectorImage();
+
+	selectLabel 	= new themeSelectorLabel();
+	
+}

application/demo/pages/appearance/themeSelector.label.js

@@ -0,0 +1,24 @@
+
+
+export default class selectLabel{
+
+	fontSize		= 12;
+
+	fontWeight		= "bold";
+
+	margin			= "0 auto"
+
+
+#ifdef DARK
+
+	color	= "white"
+
+#endif
+
+#ifdef LIGHT
+
+	color	= "black";
+
+#endif
+
+}

application/demo/pages/newsDialogButton.js

@@ -0,0 +1,42 @@
+
+import button 						from '/elements/button.js';
+
+import groups						from '/user/group/user.group.permission.js';
+
+
+export default class newsDialogButton extends button{
+
+	text		= "Create News"
+
+	marginTop	= 10;
+
+	marginLeft	= 2;
+
+
+	async click() {
+
+		this.parent.createNews.show();
+
+		this.parent.createNews.center();
+
+	}
+
+	enableREAD() {
+
+		this.show();
+
+	}
+
+	disableREAD() {
+
+		this.hide();
+
+	}
+
+	permission() {
+
+		this.allow( groups.admin, "READ" );
+		
+	}
+
+}

application/demo/pages/newsItemPage.js

@@ -0,0 +1,134 @@
+
+
+
+import newsListTable				from '../list/news.list.table.js';
+
+import createNews					from '../edit/news.edit.js';
+
+import header 						from '/elements/header.js';
+
+import button 						from '/elements/button.js';
+
+import toggle 						from '/elements/toggle.js';
+
+import newsDialogButton				from './newsDialogButton.js';
+
+import searchWidget					from './search.widget.js';
+
+import tableControl					from './newsItemPage.tableControl.js';
+	
+import testbutton					from "./testButton.js";
+
+export default class newsItemPage{
+
+	layers				= 1;
+
+	overflowY			= "auto";
+
+	width				= "-webkit-fill-available";
+	
+	flexDirection		= "column";
+
+	transition			= "1s"
+
+	willChange			= "transform";
+
+	overflowX			= "none"
+
+	transform;
+
+	#ifdef MACOS
+
+		#ifdef DARK
+
+			background		= "#282828";
+
+		#endif
+
+		#ifdef LIGHT
+
+			background		= "#ffffff";
+
+		#endif
+
+	#endif
+
+
+	#ifdef WINDOWS
+
+		#ifdef DARK
+
+			background		= "#202020cc";
+
+		#endif
+
+		#ifdef LIGHT
+
+			background		= "rgb(255 255 255 / 75%)";
+
+		#endif
+
+	#endif
+
+	
+
+	marginLeft				= "0"
+
+	sizing				= "border-box";
+
+
+	#ifdef ANDROID
+
+		width					= "100vw";
+
+		padding					= "0";
+
+	#else
+
+		width					= 600;
+
+		padding					= 20;
+
+	#endif
+
+
+
+	newsListHeader			= new header("News Items");
+
+	searchWidget			= new searchWidget();
+
+	newsListTable			= new newsListTable();
+
+	tableControl			= new tableControl();
+
+	createNews	        	= new createNews();
+
+	testbutton				= new testbutton();
+
+	newsDialogButton		= new newsDialogButton();
+
+
+
+
+	#ifdef ANDROID
+
+		height		= "100vh";
+
+		paddingTop	= "";
+
+		boxWidth	= "100vw";
+
+		width		= "100vw";
+
+		#ifdef LIGHT
+
+			background		= "#f2f2f2";
+
+		#endif
+
+
+	#endif
+
+
+}
+

application/demo/pages/newsItemPage.limit.js

@@ -0,0 +1,50 @@
+
+import select	from "/elements/select.js";
+
+export default class limit extends select{
+
+
+	height					= 40;
+
+	marginTop				= -1;
+
+	width					= 60;
+
+	change() {
+
+		var index				= this.element.selectedIndex;
+
+		var renderCollection 	= this.parents("newsItemPage").newsListTable.body;
+
+		renderCollection.limit	= index;
+
+		renderCollection.update( true );
+
+		console.log("index", index);
+
+	}
+
+	create() {
+
+		var renderCollection 	= this.parents("newsItemPage").newsListTable.body;
+
+		var limit				= renderCollection.limit;
+
+		// ( value, label, selected )
+		for (var i = 0; i < 10; i++) {
+
+			if( limit == i ) {
+
+				this.addOption( i, i, true );
+
+			} else {
+
+				this.addOption( i, i );
+
+			}
+
+		}
+		
+	}
+
+}

application/demo/pages/newsItemPage.pagination.item.js

@@ -0,0 +1,172 @@
+
+
+export default class paginationItem{
+	
+	padding			= 10
+
+	layers			= 1;
+
+	background		= "#2d2d2d";
+
+	cursor			= "pointer"
+	
+	border			= "1px solid rgb(46, 46, 46)"
+
+	borderRadius	= "none"
+
+	disabled		= false;
+
+	select() {
+
+		this.background	= "#434743"
+
+		this.selected	= true;
+
+	}
+
+	deselect() {
+
+		this.background	= "#2d2d2d"
+
+		this.selected	= false;
+
+	}
+
+	getSelected() {
+
+		var children = this.parent.getChildren();
+
+		for (var i = 0; i < children.length; i++) {
+
+			var child = children[i];
+
+			if( child.selected ) {
+
+				return child;
+
+			}
+
+		}
+
+	}
+
+	deselectItems() {
+
+		var children = this.parent.getChildren();
+
+		for (var i = 0; i < children.length; i++) {
+
+			var child = children[i];
+
+			//child.value	= i;
+
+			if( child.deselect ) {
+
+				child.deselect();
+
+			}
+
+		}
+
+	}
+
+	click() {
+
+		if( this.disabled ) {
+
+			return true;
+
+		}
+
+		var children 			= this.parent.getChildren();
+
+		var renderCollection	= this.parents("newsItemPage").newsListTable.body;
+
+		var numberOfPages		= renderCollection.numberOfPages;
+
+		console.log("this.value", this.value);
+
+		console.log("numberOfPages",  numberOfPages);
+
+		switch( this.value ) {
+
+			case "<":
+
+				var selectedChildItem 	= this.getSelected();
+
+				var previousSibling	 	= selectedChildItem.getPreviousSibling();
+
+				previousSibling.click();
+
+			break;
+
+			case ">":
+
+				var selectedChildItem 	= this.getSelected();
+
+				var nextSibling	 	= selectedChildItem.getNextSibling();
+
+				nextSibling.click();
+
+			break;
+
+			default:
+
+				if( this.value >= numberOfPages - 1 ) {
+
+					children.pop().disable()
+
+				} else {
+
+					children.pop().enable();
+
+				}
+
+				if( this.value == 0 ) {
+
+					children[0].disable()
+
+				} else {
+
+					children[0].enable();
+
+				}
+
+
+				renderCollection.page	= this.value;
+
+				renderCollection.update( false );
+
+				this.deselectItems();
+
+				this.select();
+
+
+
+		}
+
+	}
+
+	disable() {
+
+		this.opacity	= "30%"
+
+		this.cursor		= "default"
+
+		this.disabled	= true;
+
+	}
+
+	enable() {
+
+		this.opacity	= "100%"
+
+		this.cursor		= "pointer"
+
+		this.disabled	= false;
+
+	}
+
+	opacity;
+
+}

application/demo/pages/newsItemPage.pagination.js

@@ -0,0 +1,68 @@
+
+import item from "./newsItemPage.pagination.item.js";
+
+
+export default class pagination{
+	
+	height					= 40;
+
+	create() {
+
+		this.clearChildren();
+
+		this.update();
+
+	}
+
+	update() {
+
+		var renderCollection 	= this.parents("newsItemPage").newsListTable.body;
+
+		var numberOfPages		= renderCollection.numberOfPages;
+
+
+
+		var newItem				= new item();
+
+		newItem.text			= "<";
+
+		newItem.value			= "<"
+
+		newItem.borderRadius	= "4px 0 0 4px"
+
+		this.add( newItem );
+
+		
+		for (var i = 0; i < numberOfPages; i++) {
+
+			var newItem		= new item();
+
+			newItem.value	= i;
+
+			newItem.text	= (i + 1).toString();
+
+			this.add( newItem );
+
+
+			if( i == 0 ) {
+
+				newItem.click();
+
+			}
+
+		}
+
+		var newItem				= new item();
+
+		newItem.text			= ">";
+
+		newItem.value			= ">"
+
+		newItem.borderRadius	= "0 4px 4px 0"
+
+		this.add( newItem );
+		
+
+	}
+
+}

application/demo/pages/newsItemPage.tableControl.js

@@ -0,0 +1,20 @@
+
+import pagination					from './newsItemPage.pagination.js';
+
+import limit						from './newsItemPage.limit.js';
+
+import label						from '/elements/label.js';
+
+export default class tableControl{
+
+	pageLabel		= new label("Select page:");			
+	
+	pagination		= new pagination();
+
+	limitLabel		= new label("Select items per page:");
+
+	limit			= new limit();
+
+	
+
+}

application/demo/pages/newsPages.js

@@ -0,0 +1,20 @@
+
+import newsItemPage		from "./newsItemPage.js";
+
+import newsPage			from "../page/news.page.js";
+
+import newsEdit			from "../edit/news.edit.js";
+
+export default class newsPages{
+
+	sizing				= "border-box";
+	
+	newsItemPage		= new newsItemPage();
+
+	newsPage			= new newsPage();
+
+	newsEdit			= new newsEdit();
+
+	width				= 1800;
+
+}

application/demo/pages/search.input.js

@@ -0,0 +1,47 @@
+
+import input 	from 	"/elements/input.js";
+
+
+
+
+export default class searchBar extends input {
+
+	placeholder				= "Search."
+
+	placeholderColor		= "#8e8e8e"
+
+	webkitTextFillColor		= "none";
+
+	async keyup( event ) {
+
+		this.search();
+
+		//newsItems.value = value;
+
+		//newsItems.sync();
+
+	}
+
+	async search() {
+
+		var searchType 		= this.parent.select.customElement.selectedIndex;
+
+		var searchTerm 		= this.customElement.value;
+
+
+		console.log("searchType", searchType);
+
+		console.log("search input", searchTerm);
+
+
+		var newsItems 			= this.parent.parent.newsListTable.body;
+
+		newsItems.searchType	= searchType;
+
+		newsItems.searchTerm	= searchTerm;
+
+		newsItems.update();
+
+	}
+
+}

application/demo/pages/search.select.js

@@ -0,0 +1,19 @@
+
+
+import select 						from '/elements/select.js';
+
+export default class customSelect extends select{
+
+	width		= 100;
+
+	change() {
+
+		//var index = this.customElement.selectedIndex;
+
+		this.parent.search.search();
+
+		//this.parents("newsItemPage").newsListTable.body.searchType	= index;
+
+	}
+
+}

application/demo/pages/search.widget.js

@@ -0,0 +1,25 @@
+
+
+import search 						from './search.input.js';
+
+import select 						from './search.select.js';
+
+
+
+
+export default class searchWidget{
+
+	search					= new search();
+
+	select					= new select()
+
+	create() {
+
+		// ( value, label, selected )
+		this.select.addOption( 1, "Name" );
+		this.select.addOption( 2, "Price >" );
+		this.select.addOption( 3, "Price <" );
+
+	}
+
+}

application/demo/pages/settings.js

@@ -0,0 +1,66 @@
+
+import header 						from '/elements/header.js';
+
+import appearancePanel				from "./appearance/panel.js";
+
+
+import document 					from '/unify/document.js';
+
+
+
+
+
+
+export default class settings{
+
+	sizing			= "border-box";
+
+	#ifdef MACOS
+
+		#ifdef DARK
+
+			background          = "#282828";
+
+		#endif
+
+		#ifdef LIGHT
+
+			background      = "#fdfdfd";
+
+		#endif
+
+	#endif
+
+	#ifdef WINDOWS
+
+		#ifdef DARK
+
+			background		= "#202020cc";
+
+		#endif
+
+		#ifdef LIGHT
+
+			background		= "rgb(255 255 255 / 75%)";
+
+		#endif
+
+	#endif
+
+    layers                  = 1;
+
+    height                  = "-webkit-fill-available";
+
+    padding					= 20;
+
+    width					= "100%"
+
+    flexDirection			= "column";
+
+	settingsHeader			= new header("Appearance");
+
+	appearancePanel			= new appearancePanel();
+
+	//spinner					= new spinner();
+
+}

application/demo/pages/testButton.js

@@ -0,0 +1,103 @@
+import user 						from "/user/user.js"
+
+import collection 					from "/unify/collection.js"
+
+import button 						from '/elements/button.js';
+
+import OR					from '/unify/sql/OR.js';
+
+import AND					from '/unify/sql/AND.js';
+
+import LIKE					from '/unify/sql/LIKE.js';
+
+
+export default class testbutton extends button{
+
+	text	= "test"
+
+	async click() {
+
+		var a = new Array();
+
+		var b = new Object();
+
+		b.a		= "this is a test"
+
+		b.b		= "this works good."
+
+		a.push( b );
+
+		a.push( b );
+
+		a.push( b );
+
+		await this.test( a );
+
+	}
+
+	node async test() {
+
+		var users		= new collection( user );
+
+		var filter 		= users.getFilter();
+
+		console.log("filter", filter);
+
+		// Compose Filter
+
+		//filter.search	= AND( LIKE( filter.email, "josephDaniel@mail.com" ), LIKE( filter.username, "admin" ) );
+
+		filter.search	= LIKE( filter.selectedUsers.email, "JosephDaniel@mail.com" );
+
+		filter.order 	= filter.groups;
+
+
+		users.sync();
+
+	
+
+		var rows = users.rows;
+
+		console.log( rows.length, rows );
+
+		// get first user
+		var a = users.get( 0 );
+
+		console.log("users.get( 0 )", a.username.value);
+
+		console.log( "users.length()", users.length() );
+
+		// get and remove last item
+		var b = users.pop();
+
+		console.log( "users.length()", users.length() );
+
+		console.log("users.pop()", b.username.value);
+
+
+
+		// get and remove first item
+		var c = users.shift();
+
+		console.log( "users.length()", users.length() );
+
+		console.log("users.shift()", c.username.value );
+
+
+		users.sync();
+
+		// get all rows
+		var d = users.getRows();
+
+		console.log("users.getRows()",d.length);
+		
+
+	}
+
+	//node async test( a ) {
+
+	//	console.log( a );
+
+	//}
+
+}