First commit

application/demo/animations/animation.color.js

@@ -0,0 +1,69 @@
+
+
+import panelRow 					from '/elements/panel/row.js';
+
+import label 						from '/elements/label.js';
+
+
+class animationBlock{
+
+	width			= 100;
+
+	height			= 100;
+
+	margin			= 20;
+
+	background		= "#03a9f4";
+
+	create() {
+
+		this.animation = this.createAnimation("backgroundAnimation");
+
+		var key = this.animation.createKeyFrame( 0 );
+
+		key.setProperty( "background", "#03a9f4" );
+
+
+		var key = this.animation.createKeyFrame( 40 );
+
+		key.setProperty( "background", "#a6e22e" );
+
+
+
+		var key = this.animation.createKeyFrame( 70 );
+
+		key.setProperty( "background", "#f92672" );
+
+
+
+		var key = this.animation.createKeyFrame( 100 );
+
+		key.setProperty( "background", "#03a9f4" );
+
+	}
+
+	async click() {
+
+		this.animation.play("2s");
+
+	}
+
+}
+
+
+class rowLabel extends label{
+
+	flex = "1";
+
+} 
+
+
+export default class row extends panelRow{
+
+	boxWidth			= "95%"
+
+	rowLabel			= new rowLabel("Background color");
+
+	animationBlock		= new animationBlock();
+
+}

application/demo/animations/animation.move.js

@@ -0,0 +1,79 @@
+
+
+class animationBlock{
+
+	width			= 100;
+
+	height			= 100;
+
+	margin			= 20;
+
+	background		= "#03a9f4";
+
+	marginTop		= 12;
+
+	marginLeft		= 12;
+
+	create() {
+
+
+		this.moveAnimation = this.createAnimation("moveAnimation");
+
+
+		var key = this.moveAnimation.createKeyFrame( 0 );
+
+		key.setProperty( "margin-right", 12 );
+
+
+		var key = this.moveAnimation.createKeyFrame( 20 );
+
+		//key.setProperty( "margin-top", 200 );
+		key.setProperty( "margin-right", 40 );
+
+
+		var key = this.moveAnimation.createKeyFrame( 30 );
+
+		//key.setProperty( "margin-top", 500 );
+		key.setProperty( "margin-right", 120 );
+
+
+		var key = this.moveAnimation.createKeyFrame( 50 );
+
+		key.setProperty( "margin-top", 200 );
+
+
+		var key = this.moveAnimation.createKeyFrame( 100 );
+
+		//key.setProperty( "margin-top", 0 );
+
+	}
+
+	async click() {
+
+		this.moveAnimation.play("2s");
+
+	}
+
+}
+
+import panelRow 					from '/elements/panel/row.js';
+
+import label 						from '/elements/label.js';
+
+
+class rowLabel extends label{
+
+	flex = "1";
+
+} 
+
+
+export default class moveRow extends panelRow{
+
+	boxWidth			= "95%"
+
+	rowLabel			= new rowLabel("Move");
+
+	animationBlock		= new animationBlock();
+
+}

application/demo/animations/animation.render.js

@@ -0,0 +1,50 @@
+
+
+import panelRow 					from '/elements/panel/row.js';
+
+import label 						from '/elements/label.js';
+
+
+
+class animationBlock{
+
+	width			= 100;
+
+	height			= 100;
+
+	margin			= 20;
+
+	background		= "#03a9f4";
+
+	time			= 0;
+
+
+	render(  ) {
+
+		this.time++;
+
+		this.width	=   100 + ( Math.cos( this.time / 100 ) * 100 );
+
+		this.height	=   100 + ( Math.sin( this.time / 100 ) * 100 );
+
+	}
+
+}
+
+
+class rowLabel extends label{
+
+	flex = "1";
+
+} 
+
+
+export default class row extends panelRow{
+
+	boxWidth			= "95%"
+
+	rowLabel			= new rowLabel("RenderLoop");
+
+	animationBlock		= new animationBlock();
+
+}

application/demo/animations/animation.reverse.js

@@ -0,0 +1,188 @@
+
+
+import panelRow 					from '/elements/panel/row.js';
+
+import label 						from '/elements/label.js';
+
+import button 						from '/elements/button.js';
+
+class animationBlock{
+
+	width			= 100;
+
+	height			= 100;
+
+	margin			= 20;
+
+	background		= "#03a9f4";
+
+	create() {
+
+		this.animation = this.createAnimation("reverseAnimation");
+/*
+		var key = this.animation.createKeyFrame( 0 );
+
+		key.setProperty( "rotate", "0deg" );
+
+
+		var key = this.animation.createKeyFrame( 20 );
+
+		key.setProperty( "rotate", "60deg" );
+
+
+		var key = this.animation.createKeyFrame( 60 );
+
+		key.setProperty( "rotate", "120deg" );
+
+
+		var key = this.animation.createKeyFrame( 100 );
+
+		key.setProperty( "rotate", "0deg" );
+
+		*/
+		var key = this.animation.createKeyFrame( 0 );
+
+		key.setProperty( "rotate", "0deg" );
+
+
+
+		var key = this.animation.createKeyFrame( 100 );
+
+		key.setProperty( "rotate", "360deg" );
+
+		this.animation.duration = "2s"
+
+		this.animation.iterationCount = "infinite"
+
+		this.animation.fillMode = "forwards"
+	}
+
+	async mouseover() {
+
+
+
+
+		//this.animation.play();
+
+	}
+
+	async mouseleave() {
+
+		//this.animation.pause();
+
+	}
+
+}
+
+class forwardButton extends button{
+
+	text	= "Direction Forward";
+
+	click() {
+
+		var animation	= this.parent.parent.animationBlock.animation;
+
+		animation.direction		= "normal"
+
+	}
+
+
+}
+
+class backwardButton extends button{
+
+	text	= "Direction  Backward";
+
+	click() {
+
+		var animation	= this.parent.parent.animationBlock.animation;
+
+		animation.direction		= "reverse"
+
+	}
+	
+}
+
+
+class pauseButton extends button{
+
+	text	= "Pause";
+
+	click() {
+
+		var animation	= this.parent.parent.animationBlock.animation;
+
+		
+		animation.pause();
+	}
+	
+}
+
+class playButton extends button{
+
+	text	= "Play";
+
+	click() {
+
+		var animation	= this.parent.parent.animationBlock.animation;
+
+		animation.play();
+
+	}
+	
+}
+
+class stopButton extends button{
+
+	text	= "Stop";
+
+	click() {
+
+		var animation	= this.parent.parent.animationBlock.animation;
+
+		animation.stop();
+
+	}
+	
+}
+
+
+class rowLabel extends label{
+
+	flex = "1";
+
+} 
+
+class buttons{
+
+
+
+	playButton			= new playButton();
+
+	pauseButton			= new pauseButton();
+
+	stopButton			= new stopButton();
+
+	forwardButton		= new forwardButton();
+
+	backwardButton		= new backwardButton();
+
+
+	flexDirection		= "column"
+
+}
+
+
+
+export default class row extends panelRow{
+
+	boxWidth			= "95%"
+
+	rowLabel			= new rowLabel("Reverse");
+
+	buttons				= new buttons();
+
+	animationBlock		= new animationBlock();
+
+
+}

application/demo/animations/animation.rotate.js

@@ -0,0 +1,67 @@
+
+
+import panelRow 					from '/elements/panel/row.js';
+
+import label 						from '/elements/label.js';
+
+
+class animationBlock{
+
+	width			= 100;
+
+	height			= 100;
+
+	margin			= 20;
+
+	background		= "#03a9f4";
+
+	create() {
+
+		this.animation = this.createAnimation("rotateAnimation");
+
+		var key = this.animation.createKeyFrame( 0 );
+
+		key.setProperty( "rotate", "0deg" );
+
+
+		var key = this.animation.createKeyFrame( 20 );
+
+		key.setProperty( "rotate", "60deg" );
+
+
+		var key = this.animation.createKeyFrame( 60 );
+
+		key.setProperty( "rotate", "120deg" );
+
+
+		var key = this.animation.createKeyFrame( 100 );
+
+		key.setProperty( "rotate", "0deg" );
+
+	}
+
+	async click() {
+
+		this.animation.play("2s");
+
+	}
+
+}
+
+
+class rowLabel extends label{
+
+	flex = "1";
+
+} 
+
+
+export default class row extends panelRow{
+
+	boxWidth			= "95%"
+
+	rowLabel			= new rowLabel("Rotate");
+
+	animationBlock		= new animationBlock();
+
+}

application/demo/animations/animation.rotateMoveColor.js

@@ -0,0 +1,145 @@
+
+
+import panelRow 					from '/elements/panel/row.js';
+
+import label 						from '/elements/label.js';
+
+
+class animationBlock{
+
+	width			= 100;
+
+	height			= 100;
+
+	margin			= 20;
+
+	background		= "#03a9f4";
+
+
+    zIndex			= 4;
+    
+
+	create() {
+
+		this.rotateAnimation = this.createAnimation("rotateAnimation");
+
+		var key = this.rotateAnimation.createKeyFrame( 0 );
+
+		key.setProperty( "rotate", "0deg" );
+
+
+		var key = this.rotateAnimation.createKeyFrame( 20 );
+
+		key.setProperty( "rotate", "60deg" );
+
+
+		var key = this.rotateAnimation.createKeyFrame( 60 );
+
+		key.setProperty( "rotate", "120deg" );
+
+
+		var key = this.rotateAnimation.createKeyFrame( 100 );
+
+		key.setProperty( "rotate", "0deg" );
+
+
+
+
+
+
+		this.moveAnimation = this.createAnimation("moveAnimation");
+
+		var key = this.moveAnimation.createKeyFrame( 0 );
+
+		key.setProperty( "margin-right", 12 );
+
+
+		var key = this.moveAnimation.createKeyFrame( 20 );
+
+		//key.setProperty( "margin-top", 200 );
+		key.setProperty( "margin-right", 40 );
+
+
+		var key = this.moveAnimation.createKeyFrame( 30 );
+
+		//key.setProperty( "margin-top", 500 );
+		key.setProperty( "margin-right", 120 );
+
+
+		var key = this.moveAnimation.createKeyFrame( 50 );
+
+		key.setProperty( "margin-top", 200 );
+
+
+		var key = this.moveAnimation.createKeyFrame( 100 );
+
+		//key.setProperty( "margin-top", 0 );
+
+
+
+
+		this.backgroundAnimation = this.createAnimation("backgroundAnimation");
+
+		var key = this.backgroundAnimation.createKeyFrame( 0 );
+
+		key.setProperty( "background", "#03a9f4" );
+
+
+		var key = this.backgroundAnimation.createKeyFrame( 40 );
+
+		key.setProperty( "background", "#a6e22e" );
+
+
+
+		var key = this.backgroundAnimation.createKeyFrame( 70 );
+
+		key.setProperty( "background", "#f92672" );
+
+
+
+		var key = this.backgroundAnimation.createKeyFrame( 100 );
+
+		key.setProperty( "background", "#03a9f4" );
+
+
+	}
+
+	async click() {
+
+
+		this.text		= "Rotating and moving.";
+
+		this.rotateAnimation.play("2s");
+
+		await this.moveAnimation.play("3s");
+
+
+
+		this.text		= "Changing background color.";
+
+		await this.backgroundAnimation.play("2s");
+
+
+		this.text		= "Animation is done."
+
+	}
+
+}
+
+
+class rowLabel extends label{
+
+	flex = "1";
+
+} 
+
+
+export default class row extends panelRow{
+
+	boxWidth			= "95%"
+
+	rowLabel			= new rowLabel("Rotate + Move + Background");
+
+	animationBlock		= new animationBlock();
+
+}

application/demo/animations/animation.skewX.js

@@ -0,0 +1,67 @@
+
+
+import panelRow 					from '/elements/panel/row.js';
+
+import label 						from '/elements/label.js';
+
+
+class animationBlock{
+
+	width			= 100;
+
+	height			= 100;
+
+	margin			= 20;
+
+	background		= "#03a9f4";
+
+	create() {
+
+		this.animation = this.createAnimation("rotateAnimation");
+
+		var key = this.animation.createKeyFrame( 0 );
+
+		key.setProperty( "skewX", "0deg" );
+
+
+		var key = this.animation.createKeyFrame( 20 );
+
+		key.setProperty( "skewX", "14deg" );
+
+
+		var key = this.animation.createKeyFrame( 60 );
+
+		key.setProperty( "skewX", "52deg" );
+
+
+		var key = this.animation.createKeyFrame( 100 );
+
+		key.setProperty( "skewX", "0deg" );
+
+	}
+
+	async click() {
+
+		this.animation.play("2s");
+
+	}
+
+}
+
+
+class rowLabel extends label{
+
+	flex = "1";
+
+} 
+
+
+export default class row extends panelRow{
+
+	boxWidth			= "95%"
+
+	rowLabel			= new rowLabel("skewX");
+
+	animationBlock		= new animationBlock();
+
+}

application/demo/animations/animations.js

@@ -0,0 +1,95 @@
+
+import moveAnimation		from "./animation.move.js";
+
+import rotateAnimation		from "./animation.rotate.js";
+
+import backgroundColor		from "./animation.color.js";
+
+import skewX				from "./animation.skewX.js";
+
+import rotateMoveColor		from "./animation.rotateMoveColor.js";
+
+import reverse				from "./animation.reverse.js";
+
+import render				from "./animation.render.js";
+
+export default class animations{
+
+	overflowY		= "auto"
+
+	height			= 600;
+
+	width			= "auto"
+
+	flexDirection	= "column";
+
+
+	scrollbarWidth					= "6px";
+
+	scrollbarTrackBackground		= "#1c1d1e";
+
+	scrollbarThumbBackground		= "#404040"
+
+	scrollbarThumbBorderRadius		= "4px"
+
+	scrollbarThumbHoverBackground	= "grey";
+
+
+	#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%"
+
+
+	moveAnimation					= new moveAnimation();
+
+	rotateAnimation					= new rotateAnimation();
+
+	backgroundColor					= new backgroundColor();
+
+	skewX							= new skewX();
+
+
+	rotateMoveColor					= new rotateMoveColor();
+
+	reverse							= new reverse();
+
+	render							= new render();
+
+}

application/demo/application.js

@@ -0,0 +1,183 @@
+
+
+import minimizeButton 				from './minimizeButton.js';
+
+import leftSide						from './leftSide/leftSide.js';
+ 
+import rightSide					from './rightSide/rightSide.js';
+
+import document						from '/unify/document.js';
+
+import vector2						from '/unify/math/vector2.js';
+
+import flexbox 						from '/elements/flexbox.js';
+
+import frostedGlass					from '/elements/window/frostedGlass.js';
+
+import draggable 					from '/elements/window/draggable.js';
+
+
+
+export default class application extends frostedGlass, flexbox, draggable{
+
+	// Children
+	minimizeButton		= new minimizeButton();
+
+	leftSide			= new leftSide();
+
+	rightSide			= new rightSide();
+
+	// Environment
+	mode				= "development"
+
+	os					= "Windows";
+
+	device				= "Pc";
+
+	tint				= "Dark";
+
+
+	loadThemes			= true;
+
+
+	maxClients			= 1000;
+
+	cacheBuildSpeed		= 4;
+
+	maxClusters			= 1;
+
+	//serverAddress		= "192.168.178.15";
+
+
+	// Styling
+	position			= "absolute";
+
+	borderRadius		= 12;
+
+	boxBackgroundSize	= "1000px 1000px";
+
+	boxTransition		= "background-image 0.1s ease-in-out";
+
+	boxHeight			= "100vh";
+
+	position			= "absolute";
+
+	
+
+	#ifdef ANDROID
+
+		flexDirection			= "column";
+		
+	#else
+
+		flexDirection			= "row";
+
+	#endif
+
+
+
+
+	// Pragma's
+	#ifdef ANDROID
+
+		lastPosition		= new vector2( 0, 0 );
+
+		fontFamily			= "android"; 
+
+		transform			= "translate(0px, 0px)";
+
+	#endif
+
+	#ifdef WINDOWS
+
+		fontFamily	= "SegoeUI";
+
+		#ifdef DARK
+
+			//boxBackgroundImage	= "url('/assets/images/wallpapers/windows/light/2048.png')";
+
+			//backgroundImage		= "url('/assets/images/wallpapers/windows/light/blur_1024.jpg')";
+
+		#endif
+
+		#ifdef LIGHT
+
+			//boxBackgroundImage	= "url('/assets/images/wallpapers/windows/light/2048.jpg')";
+
+			//backgroundImage		= "url('/assets/images/wallpapers/windows/light/blur_1024.jpg')";
+
+		#endif
+
+		border				= "1px solid rgb(65 84 118 / 32%)";
+
+	#endif
+
+
+	#ifdef MACOS
+
+		fontFamily	= "Inter";
+
+		#ifdef DARK
+
+			//boxBackgroundImage	= "url('/assets/images/wallpapers/ventura/dark/dark.jpg')";
+
+			//backgroundImage		= "url('/assets/images/wallpapers/ventura/dark/darkBlur.jpg')";
+
+			border				= "1px solid #8f8f8f59";
+
+			outline				= "1px solid black";
+
+		#endif
+
+		#ifdef LIGHT
+
+			//boxBackgroundImage	= "url('/assets/images/wallpapers/ventura/light/light.jpg')";
+
+			//backgroundImage		= "url('/assets/images/wallpapers/ventura/light/lightBlur.jpg')";
+
+		#endif
+	
+	#endif
+
+	// Methods
+	afterLoad() {
+
+		console.log( "loaded application", this );
+		
+		this.centerObject();
+
+	}
+
+	centerObject() {
+
+		var domWindow		= document.defaultView;
+
+		this.windowHeight	= domWindow.innerHeight;
+
+		this.windowWidth	= domWindow.innerWidth;
+
+
+		var boundBox		= this.defaultElement.getBoundingClientRect();
+
+
+		var width			= boundBox.width;
+
+		var height			= boundBox.height;
+
+
+		var x				= this.windowWidth / 2 - ( width / 2 );
+
+		var y				= this.windowHeight / 2 - ( height / 2 ); 
+
+
+		this.lastPosition		= new vector2( Math.round( x ), Math.round( y ) );
+
+	}
+	
+	click() {
+
+		this.boxShadow = "1px 1px 3px 0px #00000054"
+
+	}
+
+}

application/demo/comment/comment.body.js

@@ -0,0 +1,11 @@
+
+
+import column 	from '/unify/column.js';
+
+
+export default class body extends column {
+
+}
+
+
+

application/demo/comment/comment.js

@@ -0,0 +1,22 @@
+
+import table		from '/unify/table.js';
+
+import user			from '/user/user.js';
+
+import body			from './comment.body.js';
+
+import title		from './comment.title.js';
+
+
+export default class comment extends table{
+
+	author				= new user();
+	
+	title				= new title();
+
+	body				= new body();
+	
+	flexDirection		= "column";
+
+}
+

application/demo/comment/comment.title.js

@@ -0,0 +1,40 @@
+
+
+import column 	from '/unify/column.js';
+
+
+export default class title extends column {
+
+	padding			= 20;
+
+	color			= "black";
+	
+	label			= "title";
+	
+	useCustomElement	= true;
+
+	
+	async keyup( event ){
+		
+		this.value = event.target.value;
+
+		this.animate(150, 400, function( value ){
+		
+			this.height = value;
+		
+		})
+
+		var result = await this.socketManager.get( "column", "update", this, "keyup" );
+
+	}
+
+	serverKeyup( object ) {
+
+		this.value = object.value;
+
+	}
+
+}
+
+
+

application/demo/comment/comments.messages.js

@@ -0,0 +1,48 @@
+
+import renderCollection				from '/unify/renderCollection.js';
+
+import groups						from '/user/group/user.group.permission.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 commentsMessages extends renderCollection { 
+
+	flexFlow		= "column";
+
+	direction		= "desc";
+
+	width			= "-webkit-fill-available";
+
+	marginTop		= 20;
+
+	debug			= true;
+
+	node async search( value ) {
+
+		var filter 			= this.getFilter();
+
+		filter.search 		= OR( LIKE( filter.body, value ), LIKE( filter.title, value ) );
+		
+		filter.direction 	= "desc";
+
+	}
+
+	permission() {
+
+		this.allow( groups.visitor, "READ" );
+	
+		this.allow( groups.member, "READ" );
+
+		this.allow( groups.admin, "READ" );
+
+
+		
+
+	}
+
+}

application/demo/comment/create/comment.create.author.js

@@ -0,0 +1,8 @@
+
+import user				from '/user/user.js';
+
+export default class commentEditAuthor extends user{
+	
+	display = 	"none";
+
+}

application/demo/comment/create/comment.create.body.js

@@ -0,0 +1,16 @@
+
+
+import commentBody 	from '../comment.body.js';
+
+import textarea 	from '/elements/textarea.js';
+
+
+export default class commentEditBody extends commentBody, textarea{
+	
+	useCustomElement 			= true;
+
+    height						= "97px";
+
+    placeholder					= "Message";
+
+}

application/demo/comment/create/comment.create.js

@@ -0,0 +1,103 @@
+
+import comment 					from '../comment.js';
+
+import saveButton 				from './comment.saveButton.js';
+
+import userLabel 				from './comment.userLabel.js';
+
+import commentEditTitle			from './comment.create.title.js';
+
+import commentEditBody			from './comment.create.body.js';
+
+import commentEditAuthor		from './comment.create.author.js';
+
+import header	 				from '/elements/header.js';
+
+import collection				from '/unify/collection.js';
+
+import groups					from '/user/group/user.group.permission.js';
+
+
+
+export default class createComment extends comment{
+
+	display			= "flex";
+
+	body 			= new commentEditBody();
+
+	saveButton 		= new saveButton();
+
+	title 			= false;
+
+	author 			= this.user; // bug destroys the permission system
+
+
+	#ifdef WINDOWS
+
+		#ifdef DARK
+
+		#endif
+
+		#ifdef LIGHT
+
+		#endif
+
+	#endif
+
+
+	#ifdef MACOS
+
+		#ifdef DARK
+
+			background			= "#00000042";
+
+		#endif
+
+		#ifdef LIGHT
+
+			background		= "#ffffffd1";
+
+		#endif
+
+	#endif
+
+	width 			= "50vw";
+
+	debug			= true;
+
+	width			= "100%";
+
+	marginTop		= 40;
+
+
+	async create() {
+
+		this.body.value 	= "";
+
+		this.setID( false );
+
+	}
+
+	disableWRITE() {
+
+		this.hide();
+
+	}
+
+	enableWRITE() {
+
+		this.show();
+
+	}
+	
+	permission() {
+	
+		this.allow( groups.member, "WRITE" );
+
+		this.allow( groups.admin, "WRITE" );
+
+	}
+
+}
+
+

application/demo/comment/create/comment.create.title.js

@@ -0,0 +1,8 @@
+
+
+import commentTitle 	from '../comment.title.js';
+
+
+export default class commentEditTitle extends commentTitle{
+
+}

application/demo/comment/create/comment.saveButton.js

@@ -0,0 +1,29 @@
+
+import button 			from '/elements/button.js';
+
+import tools	 		from '/unify/tools.js';
+
+
+export default class saveCommentButton extends button {
+	
+	label 				= "Create comment"; 
+
+	async click( event ){
+
+		var result = await this.socketManager.get( "table", "save", this.parent );
+
+		this.parent.create();
+		
+		await this.parent.parent.commentsMessages.sync();
+
+		this.parent.parent.customElement.scrollTo( 0, this.parent.parent.customElement.scrollHeight);
+
+		console.log("laatste", this.parent.parent.customElement.scrollHeight);
+
+	}
+	
+
+}
+
+
+

application/demo/comment/create/comment.userLabel.js

@@ -0,0 +1,38 @@
+
+import input	 	from '/elements/input.js';
+
+export default class userLabel extends input{
+
+	float					= "right";
+	
+	useCustomElement		= false;
+
+	height					= 20;
+
+	float					= "right";
+
+	marginLeft				= 100;
+
+	marginTop				= 20;
+
+
+	setAuthor( author ) {
+		
+		if( author.username ) {
+		
+			this.value = "author: " + author.username.value;
+			
+		}
+	}
+
+
+	create() {
+		
+		var author = this.parent.parent.author;
+		
+		this.setAuthor( author );
+		
+	}
+
+}
+

application/demo/comment/edit/comment.deleteButton.js

@@ -0,0 +1,37 @@
+
+import button 		from '/elements/button.js';
+
+export default class deleteButton extends button {
+
+	label				= "Delete";
+
+	#ifdef ANDROID
+
+		fontSize	= 12;
+
+		width		= "auto"
+
+		height		= "auto"
+		
+	#endif
+
+	async click() {
+
+		var sure = confirm("Are you sure you want to delete this Post");
+
+		if( sure ) {
+
+			this.parent.parent.delete();
+			
+			this.parent.parent.remove();
+
+		}
+	}
+}
+
+
+
+
+
+
+

application/demo/comment/edit/comment.edit.author.js

@@ -0,0 +1,10 @@
+
+
+import user				from '/user/user.js';
+
+
+export default class commentEditAuthor extends user{
+	
+	display = 	"none";
+
+}

application/demo/comment/edit/comment.edit.body.js

@@ -0,0 +1,109 @@
+
+import commentBody 	from '../comment.body.js';
+
+import textarea 	from '/elements/textarea.js';
+
+import document 	from '/unify/document.js';
+
+import flexbox 		from '/elements/flexbox.js';
+
+
+export default class commentEditBody extends  commentBody, flexbox{
+
+	customElement 			= document.createElement("textarea");
+	
+	useCustomElement		= true;
+
+	width					= "-webkit-fill-available"
+
+	padding					= 20;
+
+
+	#ifdef MACOS
+
+	#ifdef LIGHT
+
+		background			= "white";
+
+		color				= "black";
+
+		borderRadius		= 12;
+
+		margin				= 6;
+
+	#endif
+
+
+	#ifdef DARK
+
+		background		= "#282828!important";
+
+
+		//color			= "white";
+
+	#endif
+
+	#endif
+
+	#ifdef WINDOWS
+
+		#ifdef LIGHT
+
+			background			= "none";
+
+			color				= "black";
+
+		#endif
+
+
+		#ifdef DARK
+
+			background			= "#202020cc";
+
+			borderRadius		= 12;
+
+		#endif
+
+		margin				= 16;
+
+	#endif
+
+
+
+
+
+	async keyup( event ){
+
+		this.value = event.target.value;
+
+		var result = await this.socketManager.get( "column", "update", this, "keyup" );
+
+	}
+
+
+	create() {
+
+		this.deactivateTextarea()
+
+	}
+
+	activateTextarea() {
+
+		this.useCustomElement	= true;
+
+	}
+
+	deactivateTextarea() {
+
+		this.useCustomElement	= false;
+
+
+	}
+
+	useCustomElement 		= false;
+
+	fontSize				= 14;
+
+	//color	= "red";
+
+}

application/demo/comment/edit/comment.edit.js

@@ -0,0 +1,127 @@
+
+import comment 					from '../comment.js';
+
+import saveButton 				from './comment.saveButton.js';
+
+import commentEditTitle			from './comment.edit.title.js';
+
+import commentEditBody			from './comment.edit.body.js';
+
+import commentEditAuthor		from './comment.edit.author.js';
+
+import header	 				from '/elements/header.js';
+
+import collection				from '/unify/collection.js';
+
+import userLabel 				from './comment.userLabel.js';
+
+import deleteButton 			from './comment.deleteButton.js';
+
+import editButton 				from './comment.editButton.js';
+
+import information				from './comment.information.js';
+
+
+
+export default class editComment extends comment{
+
+
+
+
+	layers			= 1;
+
+	display			= "flex";
+
+	debug			= true;
+
+	flexFlow		= "column";
+
+	gridTemplate	=	"	'_information		' 	" +
+			    		"	'body						'			" +
+			    		"	'body  						' 			" +
+			    		"	'saveButton  			' 	";
+
+
+	_information 		= new information();
+
+	body 				= new commentEditBody();
+
+	title 				= new commentEditTitle();
+
+	saveButton 			= new saveButton();
+
+	
+
+
+	width				= "-webkit-fill-available";
+
+	#ifdef ANDROID
+
+		width			= "100vw"
+
+		borderRadius = 18
+
+		margin		 = 4
+
+
+		#ifdef LIGHT
+
+			background		= "white";
+
+		#endif
+
+	#endif
+
+
+	create() {
+
+		this.title.hide();
+
+		this.author.disable = true;
+
+		if( !this.id ) {
+			
+			this.body.useCustomElement = true;
+			
+		}
+
+	}
+
+	enableWRITE() {
+		
+		this._information._editButton.show();
+	
+	}
+	
+	disableWRITE() {
+
+		this._information._editButton.hide();
+	
+		this.body.useCustomElement = false;
+
+		this.saveButton.hide();
+
+	}
+
+	enableDELETE() {
+		
+		this._information._deleteButton.show();
+
+	}
+	
+	disableDELETE() {
+	
+		this._information._deleteButton.hide();
+
+	}
+	
+	permission() {
+	
+		this.allow( this.author, "WRITE" );
+		this.allow( this.author, "DELETE" );
+		
+	}
+	
+}
+
+

application/demo/comment/edit/comment.edit.title.js

@@ -0,0 +1,31 @@
+
+
+import commentTitle 	from '../comment.title.js';
+
+
+export default class commentEditTitle extends commentTitle{
+
+
+	useCustomElement 		= false;
+
+	borderLeft				= "solid 1px #faebd7";
+
+	borderRight				= "solid 1px #faebd7";
+
+	enableInput() {
+
+		this.background = "#373b44";
+		
+		this.useCustomElement = true;
+
+	}
+
+	disableInput() {
+
+		this.background = "white";
+
+		this.useCustomElement = false;
+
+	}
+
+}

application/demo/comment/edit/comment.editButton.js

@@ -0,0 +1,35 @@
+
+import button 		from '/elements/button.js';
+
+export default class editButton extends button{
+
+	label				= "Edit";
+
+	#ifdef ANDROID
+
+		fontSize	= 12;
+
+		width		= "auto"
+
+		height		= "auto"
+		
+	#endif
+
+	async click() {
+		
+		this.parent.parent.body.activateTextarea();
+
+		this.parent.parent.saveButton.show();
+
+		this.hide();
+
+	}
+
+}
+
+
+
+
+
+
+

application/demo/comment/edit/comment.information.js

@@ -0,0 +1,70 @@
+
+import userLabel 				from './comment.userLabel.js';
+
+import deleteButton 			from './comment.deleteButton.js';
+
+import editButton 				from './comment.editButton.js';
+
+import icon 					from '/elements/icon.js';
+
+
+class chatIcon extends icon{
+
+	margin				= 12;
+
+
+}
+
+export default class information{
+
+
+	width				= "100%";
+
+	display				= "grid";
+
+	display				= "flex";
+
+	flexFlow			= "row";
+
+	layers				= 2;
+
+	borderBottom		= "#2b2c2d57";
+
+	borderTop			= "#2b2c2d57";
+
+
+	gridTemplate		=	"	'_deleteButton	_editButton' 	" +
+			    			"	'userLabel  	userLabel'		";
+
+	gridTemplateColumns	= "40px 100px";
+
+	gridTemplateRows	= "40px 60px";
+
+	#ifdef WINDOWS
+
+		#ifdef LIGHT
+
+			background		= "#4b94d31f";
+
+		#endif
+
+		#ifdef DARK
+
+			//background		= "rgb(48 51 56 / 86%)";
+
+		#endif
+
+	#endif
+
+
+	
+
+	_deleteButton	= new deleteButton(  );
+
+	_editButton		= new editButton( );
+
+	_userLabel		= new userLabel();
+
+	//_icon			= new chatIcon("ios-chatbubbles-outline.svg", true);
+
+}

application/demo/comment/edit/comment.saveButton.js

@@ -0,0 +1,36 @@
+
+import button 			from '/elements/button.js';
+
+import tools	 		from '/unify/tools.js';
+
+
+export default class saveEditButton extends button {
+
+	text				= "Save Message";
+
+	display				= "none";
+
+	userContract;
+
+
+	async click( event ){
+
+		var result = await this.socketManager.get( "table", "save", this, "sign" );
+		
+		this.parent.id = false;
+		
+		this.hide();
+
+		this.parent._information._editButton.show();
+
+		this.parent.body.useCustomElement = false;
+
+		//this.parent.background = "#cdf0ce";
+
+	}
+	
+
+}
+
+
+

application/demo/comment/edit/comment.userLabel.js

@@ -0,0 +1,34 @@
+
+import input	 	from '/elements/input.js';
+
+import label	 	from '/elements/label.js';
+
+export default class userLabel extends label {
+
+	float					= "left";
+	
+	fontWeight				= "bold";
+
+	padding					= "12px";
+
+	paddingLeft				= 26;
+
+	setAuthor( author ) {
+		
+		if( author.username ) {
+		
+			this.text = author.username.value;
+
+		}
+	}
+
+	create() {
+		
+		var author = this.parent.parent.author;
+		
+		this.setAuthor( author );
+		
+	}
+
+}
+

application/demo/edit/news.edit.body.js

@@ -0,0 +1,19 @@
+
+import newsBody 		from '../news.body.js';
+
+import textarea 		from '/elements/textarea.js';
+
+
+export default class newsPageBody extends newsBody, textarea{
+
+	placeholder		= "Message";
+
+	height			= 120;
+
+	async keyup( event ) {
+
+		this.value = event.target.value;
+
+	}
+
+}

application/demo/edit/news.edit.button.js

@@ -0,0 +1,39 @@
+import button 	from '/elements/button.js';
+
+export default class editButton extends button {
+
+	label 		= "Save"; 
+
+	async click( event, object ){
+
+		var result = await this.parent.parent.save();
+
+		// reset id so you can create a new row again
+		var editNewsDialog	= this.parent.parent;
+
+		editNewsDialog.id	= false;
+
+		// reset title
+		editNewsDialog.newsTitleRow.title.value = "";
+
+		// reset body
+		editNewsDialog.newsBodyRow.body.value = "";
+
+		editNewsDialog.hide();
+
+		this.parents("newsPages").newsPage.sync();
+
+		if( this.parents("newsItemPage").newsListTable ) {
+
+			this.parents("newsItemPage").newsListTable.body.update();
+
+
+
+
+
+
+		}
+
+	}
+
+}

application/demo/edit/news.edit.js

@@ -0,0 +1,246 @@
+
+
+import news 				from '../news.js';
+
+import newsEditTitle 		from './news.edit.title.js';
+
+import newsEditBody			from './news.edit.body.js';
+
+import newsEditbutton 		from './news.edit.button.js';
+
+import newsEditPrice		from './news.edit.price.js';
+
+
+import groups				from '/user/group/user.group.permission.js';
+
+import label 				from '/elements/label/left.js';
+
+import panel 				from '/elements/panel.js';
+
+import frostedGlass			from '/elements/window/frostedGlass.js';
+
+import draggable 			from '/elements/window/draggable.js';
+
+import button 				from '/elements/button.js';
+
+
+import panelRow 			from '/elements/panel/row.js';
+
+class newsBodyRow extends panelRow{
+
+	#ifdef WINDOWS
+
+		background 	= "none";
+
+	#endif
+
+	border						= "none"
+
+	label						= new label("Message");
+
+	body						= new newsEditBody();
+
+}
+
+class newsTitleRow extends panelRow{
+
+	#ifdef WINDOWS
+
+		background 	= "none";
+
+	#endif
+
+	border						= "none"
+
+	label						= new label("Title");
+
+	title						= new newsEditTitle();
+
+}
+
+class newsPriceRow extends panelRow{
+
+	#ifdef WINDOWS
+
+		background 	= "none";
+
+	#endif
+
+	border						= "none"
+
+	label						= new label("Price");
+
+	price						= new newsEditPrice();
+
+}
+
+
+
+class cancelButton extends button{
+
+	text		= "Cancel";
+
+	boxWidth		= "100%"
+
+
+	click() {
+
+		this.parent.parent.hide();
+
+	}
+
+}
+
+
+class newsButtonRow extends panelRow{
+
+	border						= "none"
+
+	cancelButton				= new cancelButton();
+
+	newsEditbutton				= new newsEditbutton();
+
+
+	#ifdef WINDOWS
+
+		background 	= "none";
+
+	#endif
+
+}
+
+
+import header 						from '/elements/window/header.js';
+
+export default class newsEdit extends news, panel, draggable {
+
+	header				= new header("News");
+
+	layers				= 2;
+
+	zIndex				= 10000;
+
+
+	#ifdef WINDOWS
+
+		fontFamily			= "segoe";
+
+
+	#endif
+
+
+
+	#ifdef MACOS
+
+		fontFamily		= "sf-ui";
+
+		width			= 600;
+
+		#ifdef DARK
+
+			background		= "#161110bf";
+
+			
+
+		#endif
+
+		#ifdef LIGHT
+
+			//background		= "white";
+
+			background				= "#fdfdfdbf"
+
+		#endif
+
+		backdropFilter			= "blur(22px)";
+
+	#endif
+
+	#ifdef WINDOWS
+
+		fontFamily		= "SegoeUI";
+
+		width			= 600;
+
+		#ifdef DARK
+
+			background		= "#202020cc";
+
+			border				= "1px solid rgb(44 45 46)";
+
+			
+
+		#endif
+
+		#ifdef LIGHT
+
+			//background		= "white";
+
+			background				= "#fdfdfdbf"
+
+		#endif
+
+		backdropFilter			= "blur(22px)";
+
+	#endif
+
+
+	
+
+	selector			= "#application";
+
+	display				= "none";
+
+	flexDirection		= "column";
+
+	debug 				= true;
+
+	position			= "absolute"
+
+	boxBackgroundImage;
+
+	newsTitleRow				= new newsTitleRow();
+
+	newsPriceRow				= new newsPriceRow();
+
+	newsBodyRow					= new newsBodyRow();
+
+	newsButtonRow				= new newsButtonRow();
+
+
+
+	debug						= true;
+
+	height						= "fit-content";
+
+	async create() {
+
+		//await this.sync();
+
+		//this.hide();
+
+	}
+
+	afterLoad() {
+
+		this.center();
+
+	}
+
+	permission() {
+
+		this.allow( groups.member, "READ" );
+
+		this.allow( groups.admin, "READ" );
+
+		this.allow( groups.visitor, "READ" );
+
+		this.allow( groups.member, "WRITE" );
+
+		this.allow( groups.admin, "WRITE" );
+
+		this.allow( groups.visitor, "WRITE" );
+	
+	}
+
+}

application/demo/edit/news.edit.price.js

@@ -0,0 +1,18 @@
+
+import newsPrice 		from '../news.price.js';
+
+import input 		from '/elements/input.js';
+
+
+export default class newsPagePrice extends newsPrice, input{
+
+	placeholder		= "Price";
+
+
+	async keyup( event ) {
+
+		this.value = event.target.value;
+
+	}
+
+}

application/demo/edit/news.edit.title.js

@@ -0,0 +1,11 @@
+
+import newsTitle 	from '../news.title.js';
+
+import input 		from '/elements/input.js';
+
+
+export default class newsEditTitle extends input, newsTitle{
+
+	placeholder		= "Title";
+	
+}

application/demo/examples/grids.js

@@ -0,0 +1,140 @@
+
+import input 	from "/elements/input.js"
+
+import page 	from "/elements/page.js"
+
+
+class label{
+
+	constructor( text ) {
+
+		this.text	= text;
+
+	}
+
+	background		= "#0000002e"
+
+	borderRadius	= 6;
+
+	margin			= 10;
+
+	padding			= 26;
+
+}
+
+class a extends input{
+
+	boxAlignItems		= "center"
+
+	boxJustifyContent	= "center";
+
+	boxColor			= "black"
+
+}
+
+
+class b extends input{
+
+	//background			= "blue";
+
+	boxAlignItems		= "center"
+
+	boxJustifyContent	= "center";
+
+	boxColor			= "black"
+
+}
+
+class c extends input{
+
+	//background			= "yellow";
+
+	boxAlignItems		= "center"
+
+	boxJustifyContent	= "center";
+
+	boxColor			= "black"
+
+
+}
+
+class d extends input{
+
+	//boxBackground		= "grey";
+
+	boxAlignItems		= "center"
+
+	boxJustifyContent	= "center";
+
+	boxColor			= "black"
+
+
+}
+
+class gridA{
+
+	display				= "grid";
+	
+	gridTemplate			=	`
+
+							"label          label"
+						    "a             	a"
+						    "b              d"
+						    "c          	d" 
+						`;
+
+	height			= 400;
+
+	width			= "100%"
+
+	label		= new label("This is the first Grid, Press tab to navigate trough the inputs.");
+
+	a			= new a();
+
+	b			= new b();
+
+	c			= new c();
+
+	d			= new d();
+
+}
+
+
+class gridB{
+
+	display				= "grid";
+	
+	gridTemplate			=	`
+
+							"label          label"
+						    "d             	d"
+						    "a              empty"
+						    "b          	b" 
+						`;
+
+	height			= 400;
+
+	width			= "100%"
+
+	label		= new label("This is the second Grid, Press tab to navigate trough the inputs.");
+
+	a			= new a();
+
+	b			= new b();
+
+	c			= new c();
+
+	d			= new d();
+
+}
+
+export default class gridExample extends page{
+
+	flexDirection	= "column"
+
+
+	gridA	= new gridA();
+
+	gridB	= new gridB();
+
+}

application/demo/fileManager/fileManager.icon.deleteButton.js

@@ -0,0 +1,102 @@
+
+import icon			from "/elements/icon.js";
+
+
+
+#ifdef SERVER
+
+	import fs		from "fs";
+
+#endif
+
+
+const delay = time => new Promise(res=>setTimeout(res,time));
+
+
+export default class deleteFileIconButton extends icon{
+
+	width				= 24;
+
+	height				= 24;
+
+	propegateEvent		= false;
+
+	boxMarginTop		= "-12px";
+
+    boxBorderRadius		= 14;
+
+    boxBackground		= "#ffffffbf";
+
+    boxWidth			= "fit-content";
+
+    boxPadding			= 2;
+
+    boxPosition			= "absolute";
+
+    boxMarginLeft		= -8;
+
+    boxDisplay			= "none";
+
+
+   	async click() {
+
+    	this.parent.opacity 	= "0%";
+
+    	await delay(200)
+
+    	this.parent.background	= "none";
+
+    	this.parent.width		= 0;
+
+    	this.parent.margin		= 0;
+
+    	this.parent.padding		= 0;
+
+    	this.parent.border		= "none"
+
+    	await delay(200)
+
+    	this.parent.hide();
+
+    	this.parent.remove();
+
+    	var fileName	= this.parent.value;
+
+    	await this.removeFile( fileName );
+
+    }
+
+    node async removeFile( fileName ) {
+
+    	var absolutePath	= path.resolve( "./assets/uploads/" + fileName );
+
+    	console.log("Removing file test", absolutePath);
+
+    	if( fs.existsSync( absolutePath ) ) {
+
+    		fs.unlinkSync( absolutePath );
+
+    		console.log("File is removed.");
+
+    	} else {
+
+    		console.log("File does not exist.");
+
+    	}
+
+    }
+
+	constructor() {
+
+		super("close.svg")
+
+	}
+
+	create() {
+
+		this.hide();
+
+	}
+
+
+}

application/demo/fileManager/fileManager.icon.js

@@ -0,0 +1,164 @@
+
+import icon				from "/elements/icon.js";
+
+import deleteButton		from "./fileManager.icon.deleteButton.js";
+
+
+export default class fileIcon extends icon{
+
+	boxSizing			= "border-box"
+
+	border				= "none"
+
+	opacity				= "100%"
+
+	fontSize			= "0"
+
+	propegateEvent		= false;
+
+	backgroundSize		= "cover!important"
+
+	width				= 60;
+
+	height				= 60;
+
+	borderRadius		= 12;
+
+	margin				= 6;
+
+	display				= "block";
+
+	float				= "left";
+
+	layers				= 1;
+
+	border				= "2px solid #F7FAFC"
+
+	cursor				= "pointer";
+
+
+	deleteButton		= new deleteButton();
+
+	mode				= "show";
+
+	//transition			= "2s"
+
+	toggleEditMode() {
+
+		if( this.mode == "show" ) {
+
+			this.deleteButton.show();
+
+			this.mode = "edit";
+
+			this.rotateAnimation.play();
+
+		} else {
+
+			this.deleteButton.hide();
+
+			this.mode = "show";
+
+			this.rotateAnimation.stop();
+
+		}
+
+	}
+
+	create() {
+
+		this.setImage( "'/assets/uploads/" + this.value + "'" );
+
+		this.createKeyFrame();
+
+		this.opacityAnimation.play();
+
+	}
+
+	createKeyFrame() {
+
+		this.rotateAnimation = this.createAnimation("rotateAnimation");
+
+		var randomTime	= "0."+ 2 + Math.floor(Math.random() *1000);
+
+		this.rotateAnimation.setDuration( randomTime +"s" );
+
+		this.rotateAnimation.setIterationCount("infinite");
+
+
+		var key = this.rotateAnimation.createKeyFrame( 0 );
+
+		key.setProperty( "rotate", "3deg" );
+
+
+		var key = this.rotateAnimation.createKeyFrame( 50 );
+
+		key.setProperty( "rotate", "-3deg" );
+
+
+		var key = this.rotateAnimation.createKeyFrame( 100 );
+
+		key.setProperty( "rotate", "3deg" );
+
+
+
+		this.opacityAnimation = this.createAnimation("opacityAnimation");
+
+		this.opacityAnimation.setIterationCount("1");
+
+		this.opacityAnimation.setDuration( "0.9s" );
+
+		this.opacityAnimation.setFillMode( "forwards" );
+
+		
+
+
+		var key = this.opacityAnimation.createKeyFrame( 0 );
+
+		key.setProperty( "opacity", "0" );
+		key.setProperty( "display", "none" );
+
+
+		var key = this.opacityAnimation.createKeyFrame( 1 );
+
+		key.setProperty( "opacity", "0" );
+		key.setProperty( "display", "block" );
+
+
+		var key = this.opacityAnimation.createKeyFrame( 100 );
+
+		key.setProperty( "display", "block" );
+		key.setProperty( "opacity", "100%" );
+
+	}
+
+
+	mouseover() {
+
+		this.border	= "2px solid rgb(125 177 211)";
+
+	}
+
+	mouseleave() {
+
+		this.border	= "2px solid #F7FAFC";
+
+		//this.rotateAnimation.stop();
+
+	}
+
+	async click() {
+
+		var previewWindow = this.parent.parent.previewWindow;	
+
+		previewWindow.setTitle( this.value );
+
+		previewWindow.show("block");
+
+		previewWindow.center();
+
+		previewWindow.setImage( "/assets/uploads/" + this.value  );
+
+	}
+
+}

application/demo/fileManager/fileManager.imagePreviewWindow.js

@@ -0,0 +1,70 @@
+
+import draggable 			from '/elements/window/draggable.js';
+
+import page 				from '/elements/page.js';
+
+import windowHeader 		from '/elements/window/header.js';
+
+import previewImage 		from './preview/previewWindow.image.js';
+
+
+export default class imagePreviewWindow extends draggable{
+	
+	selector				= "#application";
+
+	backdropFilter			= "blur(22px)";
+
+	paddingBottom			= 30;
+
+	display					= "none"
+
+
+	#ifdef WINDOWS
+
+		#ifdef LIGHT
+
+			background				= "rgb(255 255 255 / 75%)"
+			
+		#endif
+
+		#ifdef DARK
+
+			background				= "#202020cc"
+
+		#endif
+
+	#endif
+
+	create() {
+
+		this.center();
+
+		this.hide();
+
+	}
+
+
+
+	width				= 600;
+
+
+	flexDirection		= "column";
+
+	borderRadius		= 12;
+
+	windowHeader		= new windowHeader();
+
+	previewImage		= new previewImage();
+
+	setTitle( title ) {
+
+		this.windowHeader.setTitle( title );
+	}
+
+	setImage( path ) {
+
+		this.previewImage.setImage( path )
+
+	}
+
+}

application/demo/fileManager/fileManager.js

@@ -0,0 +1,44 @@
+
+
+import fileupload 				from './fileManager.upload.js';
+
+import fileList					from "./fileManager.list.js";
+
+import removeIcons				from "./fileManager.removeIcons.js";
+
+import header 					from '/elements/header.js';
+
+import page 					from '/elements/page.js';
+
+import previewWindow			from "./fileManager.imagePreviewWindow.js"
+
+import fileChooser 				from '/elements/fileChooser/fileChooser.js';
+
+
+export default class fileManager extends page{
+
+
+	width					= "100%"
+
+	minHeight				= 350;
+
+	flexDirection			= "column"
+	
+	uploadHeader			= new header("Upload");
+
+	fileupload				= new fileupload();
+
+	filesHeader				= new header("Files");
+
+	removeIcons				= new removeIcons();
+
+	fileList				= new fileList();
+
+	previewWindow			= new previewWindow();
+
+
+	fileChooser				= new fileChooser();
+
+
+
+}

application/demo/fileManager/fileManager.list.js

@@ -0,0 +1,55 @@
+
+
+import fileIcon 	from 		"./fileManager.icon.js";
+
+import panel		from		"/elements/panel/row.js";
+
+#ifdef SERVER
+
+	import fs		from "fs";
+
+	import path		from "path";
+
+#endif
+
+export default class fileList extends panel{
+
+	margin	= 20;
+
+	padding	= 20;
+
+	display	= "block";
+
+	async create() {
+
+		this.empty();
+
+		var files = await this.readFiles();
+
+	}
+
+	node async readFiles() {
+
+		var absolutePath	= path.resolve( "./assets/uploads/" );
+
+		var files			= fs.readdirSync( absolutePath );
+
+		for (var i = 0; i < files.length; i++) {
+
+			var file 				= files[i];
+
+
+			var currentFileIcon		= new fileIcon();
+
+			currentFileIcon.value	= file;
+
+			this.add( currentFileIcon );
+			
+
+		}
+
+		return files;
+
+	}
+
+}

application/demo/fileManager/fileManager.removeIcons.js

@@ -0,0 +1,74 @@
+
+import icon 		from "/elements/icon.js";
+
+
+export default class removeIcons extends icon{
+	
+	width		= 14;
+
+	height		= 14;
+
+	margin		= 4;
+
+	propegateEvent	= false;
+
+	backgroundSize	= "contain!important"
+
+
+	cursor			= "pointer";
+
+	boxMarginTop	= "17px";
+
+    boxBorderRadius	= 14;
+
+    boxBackground	= "#ffffffbf";
+
+    boxWidth		= "fit-content";
+
+    boxPadding		= 2;
+
+    //boxPosition		= "";
+
+    boxMarginLeft	= 11;
+
+    boxMarginBottom	= -37;
+
+
+	constructor() {
+
+		super("edit.svg");
+
+	}
+
+	mode	= "normal";
+
+	click() {
+
+		var icons	= this.parent.fileList.getChildren();
+
+		for (var i = 0; i < icons.length; i++) {
+
+			var icon = icons[i];
+
+			icon.toggleEditMode();
+
+		}
+
+
+		if(this.mode == "normal") {
+
+			this.setImage("/assets/images/icons/stop.png")
+
+			this.mode = "wiggle";
+
+		} else {
+
+			this.mode = "normal";
+
+			this.setImage("/assets/images/icons/edit.svg")
+
+		}
+
+	}
+
+}

application/demo/fileManager/fileManager.upload.js

@@ -0,0 +1,150 @@
+
+import fileUpload 		from 	"/elements/fileUpload.js";
+
+import fileIcon 		from "./fileManager.icon.js";
+
+
+#ifdef SERVER
+
+	import fs			from "fs";
+
+	import path			from "path";
+
+	//import android	 from 'androidjs';
+
+#endif
+
+
+export default class stream extends fileUpload {
+
+	placeholder		= "Upload."
+
+	
+
+	margin	= 20;
+
+	stream;
+
+	type;
+/*
+	inputType		= "button";
+
+
+
+	click( event ) {
+
+		//this.android_file_chooser();
+
+
+		//var fileChooser	= this.parent.fileChooser;
+
+		//fileChooser.show("flex")
+
+		//fileChooser.open();
+
+	}
+*/
+	async change( event ) {
+
+		var input			= this.customElement;
+
+		var files			= input.files;
+
+		for (var i = 0; i < files.length; i++) {
+
+			var file 			= files[i];
+
+			var chunksize 		= 64 * 1024;
+
+			var offset 			= 0;
+
+			var filename		= file.name.replaceAll(" ", "_");
+
+			await this.createStream( filename );
+
+
+			while( offset < file.size ) {
+
+				const chunkfile = await file.slice( offset, offset + chunksize );
+
+				const chunk 	= await chunkfile.arrayBuffer();
+
+				var intChunk	= new Int8Array( chunk );
+
+				this.writeChunk( intChunk )
+
+				offset += chunksize;
+
+			}
+
+			await this.endstream();
+
+		}
+
+	}
+
+	node async createStream( filename ) {
+
+		var absolutePath	= path.resolve( "./assets/uploads/" + filename );
+
+		this.filename		= filename;
+
+		console.log("Writing file to path", absolutePath);
+
+		this.stream = fs.createWriteStream( absolutePath, { encoding: 'binary' } );
+
+		this.stream.on('finish', function() {
+
+			console.log('file has been written');
+
+		});
+
+	}
+
+
+	node async writeChunk( chunk ) {
+
+		this.stream.write( Buffer.from( Object.values( chunk ) ) );
+
+	}
+
+	node async endstream() {
+
+		this.stream.end();
+
+
+		var currentFileIcon		= new fileIcon();
+
+		currentFileIcon.value	= this.filename;
+
+		this.parent.fileList.add( currentFileIcon );
+
+	}
+
+	node async android_file_chooser() {
+
+		//const status = app.mobiledata.isEnabled();
+
+		//console.log(android);
+
+		//console.log("Mobile Data status: ", android);
+
+		//console.log(app.mobiledata.isEnabled());
+
+	}
+
+
+	//mouseover() {
+
+	//	console.log("mouseover??", this.parent.removeIcons)
+
+	//	if( this.parent.removeIcons.mode == "wiggle" ) {
+
+	//		this.parent.removeIcons.click();
+
+	//	}
+
+	//}
+
+
+}

application/demo/fileManager/preview/previewWindow.image.js

@@ -0,0 +1,24 @@
+
+import image	from "/elements/image.js";
+
+
+export default class previewImage extends image{
+	
+	layers				= 1;
+
+	width				= "90%"
+
+	//height	= "100%"
+
+	margin				= "0 auto";
+
+	backgroundSize		= "contain!important";
+
+	propegateEvent		= false;
+
+	borderRadius		= 12;
+
+	transition			= "1s"
+
+	maxHeight			= "87vh"
+}

application/demo/leftSide/leftSide.button.animations.js

@@ -0,0 +1,51 @@
+
+
+import menuButton					from './leftSide.button.js';
+
+export default class settingsButton extends menuButton{
+
+	text				= "Animations";
+
+	create() {
+
+		//this.activateButton();
+
+	}
+
+	touchstart() {
+
+		this.click();
+
+	}
+	
+	async click() {
+
+		this.stateMachine.composeState( "Animations" );
+
+		this.openPage();
+
+
+	}
+
+	state openPage() {
+
+		var application		= this.parent.parent;
+
+		var rightSide		= application.rightSide;
+		var menu 			= application.leftSide;
+
+		this.deactivateButtons();
+		this.activateButton();
+
+		rightSide.hideChildren();
+		rightSide.animations.show();
+
+		#ifdef ANDROID
+
+			application.minimizeButton.close();
+
+		#endif
+
+	}
+
+}

application/demo/leftSide/leftSide.button.fileManager.js

@@ -0,0 +1,51 @@
+
+
+import menuButton					from './leftSide.button.js';
+
+export default class fileMangerButton extends menuButton{
+
+	text				= "File Manager";
+
+	create() {
+
+		//this.activateButton();
+
+	}
+
+	touchstart() {
+
+		this.click();
+
+	}
+	
+	async click() {
+
+		this.stateMachine.composeState( "File Manager" );
+
+		this.openPage();
+
+	}
+
+	state openPage() {
+
+		var application		= this.parent.parent;
+
+		var rightSide		= application.rightSide;
+
+		this.deactivateButtons();
+		this.activateButton();
+
+		rightSide.hideChildren();
+		rightSide.fileManager.show();
+
+		rightSide.fileManager.fileList.create();
+
+		#ifdef ANDROID
+
+			application.minimizeButton.close();
+
+		#endif
+
+	}
+
+}

application/demo/leftSide/leftSide.button.grid.js

@@ -0,0 +1,51 @@
+
+
+import menuButton					from './leftSide.button.js';
+
+export default class settingsButton extends menuButton{
+
+	text				= "Grids";
+
+	create() {
+
+		//this.activateButton();
+
+	}
+
+	touchstart() {
+
+		this.click();
+
+	}
+	
+	async click() {
+
+		this.stateMachine.composeState( "Appearance" );
+
+		this.openPage();
+
+	}
+
+	state openPage() {
+
+		var application		= this.parent.parent;
+
+		var rightSide		= application.rightSide;
+		var menu 			= application.leftSide;
+
+		this.deactivateButtons();
+		this.activateButton();
+
+		rightSide.hideChildren();
+		rightSide.gridExample.show();
+
+		#ifdef ANDROID
+
+			application.minimizeButton.close();
+
+		#endif
+
+
+	}
+
+}

application/demo/leftSide/leftSide.button.js

@@ -0,0 +1,202 @@
+export default class menuButton{
+
+	width				= 110;
+
+	color;
+
+	background;
+
+	fontWeight;
+
+	#ifdef ANDROID
+
+		width			= "80vw";
+
+		borderRadius	= 18;
+
+		textAlign		= "center"
+
+		padding			= 20;
+
+		margin			= "0 auto"
+
+		marginTop		= 8;
+
+		fontSize		= 20;
+
+		height			= 24;				
+
+		fontWeight	 	= "600"
+
+		fontColor		= "#313131";
+
+		#ifdef LIGHT
+
+			borderBottom	= "1px solid #ececec";
+
+			background		= "white";
+
+		#endif
+
+
+	#endif
+
+	#ifdef WINDOWS
+
+		borderRadius		= 6;	
+
+		width				= 160
+
+		padding				= 10;
+
+		marginTop			= 2;
+
+		marginBottom		= 2;
+
+		paddingLeft			= 30;
+
+	#endif
+
+
+	activated			= false;
+
+	propegateEvent		= false;
+
+	cursor				= "pointer";
+
+	#ifdef WINDOWS
+
+		#ifdef DARK
+
+			hightlightBackgroundColor 		= "#2d2d2d";
+
+			hightlightBackgroundColor 		= "#0c0e165c";
+	
+
+		#endif
+
+		#ifdef LIGHT
+
+			hightlightBackgroundColor 		= "rgb(141 180 189 / 12%)";
+
+		#endif
+
+	#endif
+
+	#ifdef MACOS
+
+		borderRadius		= 8;
+
+		padding				= 10;
+
+		paddingLeft			= 20;
+
+		fontSize			= 16;
+
+		fontWeight			= "600";
+
+
+		hightlightBackgroundColor	= "rgb(189 193 221 / 22%)"
+
+
+		#ifdef LIGHT
+
+			color 		= "#343434";
+
+		#endif
+
+	#endif
+
+
+	activated			= false;
+
+	state activateButton() {
+
+		this.activated			= true;
+
+		this.highlightButton();
+
+	}
+
+	state deactivateButton() {
+
+		this.activated			= false;
+
+		this.lowlightButton();
+
+	}
+
+	highlightButton() {
+
+		this.background			= this.hightlightBackgroundColor;
+
+		if( !this.activated ) {
+
+		
+		}
+
+	}
+
+	lowlightButton() {
+
+		if( !this.activated ) {
+
+			this.background			= "";
+
+		}
+
+	}
+
+	mouseover() {
+
+		this.highlightButton();
+
+	}
+
+	mouseleave() {
+
+		if( !this.activated ) {
+
+			this.lowLightButtons();
+
+		}
+
+	}
+
+	deactivateButtons() {
+
+		var children = this.parent.getChildren();
+
+		for (var i = 0; i < children.length; i++) {
+
+			var child = children[i];
+
+			if( child.deactivateButton ) {
+
+				child.deactivateButton();
+
+			}
+
+		}
+
+	}
+
+	lowLightButtons() {
+
+		var children = this.parent.getChildren();
+
+		for (var i = 0; i < children.length; i++) {
+
+			var child = children[i];
+
+			if( child.lowlightButton ){
+
+				child.lowlightButton();
+			
+			}
+
+		}
+
+	}
+
+}

application/demo/leftSide/leftSide.button.news.js

@@ -0,0 +1,74 @@
+
+
+import menuButton					from './leftSide.button.js';
+
+export default class newsButton extends menuButton{
+
+	text				= "Home";
+
+	#ifdef MACOS
+
+		borderTopLeftRadius	= 8;
+
+	#endif
+
+
+
+	create() {
+
+		var pathName		= window.location.pathname;
+
+		var pathParts  		= pathName.split("/");
+
+		if( !pathParts[1] ) {
+
+			this.stateMachine.composeState( );
+
+		}
+
+		//this.activateButton();
+
+		this.openPage();
+
+	}
+	
+	async click() {
+
+		this.stateMachine.composeState( "Home" );
+
+		this.openPage();
+
+	}
+
+	state openPage() {
+
+		var application		= this.parent.parent;
+
+		var rightSide		= application.rightSide;
+
+
+		#ifdef ANDROID
+
+			application.minimizeButton.close();
+
+		#endif
+
+		this.deactivateButtons();
+
+		//this.activateButton();
+
+		console.log("rightSide", rightSide);
+
+		rightSide.newsPages.newsItemPage.transform	= "translateX(0)";
+
+		rightSide.newsPages.newsPage.transform		= "translateX(0)";
+
+		rightSide.hideChildren();
+
+		rightSide.newsPages.show();
+
+		//rightSide.newsPages.newsItemPage.newsListTable.body.sync()
+
+	}
+
+}

application/demo/leftSide/leftSide.button.settings.js

@@ -0,0 +1,51 @@
+
+
+import menuButton					from './leftSide.button.js';
+
+export default class settingsButton extends menuButton{
+
+	text				= "Appearance";
+
+	create() {
+
+		//this.activateButton();
+
+	}
+
+	touchstart() {
+
+		this.click();
+
+	}
+	
+	async click() {
+
+		this.stateMachine.composeState( "Appearance" );
+
+		this.openPage();
+
+	}
+
+	state openPage() {
+
+		var application		= this.parent.parent;
+
+		var rightSide		= application.rightSide;
+		var menu 			= application.leftSide;
+
+		this.deactivateButtons();
+		this.activateButton();
+
+		rightSide.hideChildren();
+		rightSide.settings.show();
+
+		#ifdef ANDROID
+
+			application.minimizeButton.close();
+
+		#endif
+
+
+	}
+
+}

application/demo/leftSide/leftSide.button.signin.js

@@ -0,0 +1,62 @@
+
+
+import menuButton					from './leftSide.button.js';
+
+import groups						from '/user/group/user.group.permission.js';
+
+
+export default class signinPageButton extends menuButton{
+
+	text				= "Signin";
+
+	click() {
+
+		this.stateMachine.composeState( "Signin" );
+
+		this.openPage();
+		
+	}
+
+	state openPage() {
+
+		this.deactivateButtons();
+		this.activateButton();
+
+		var application		= this.parent.parent;
+
+		var rightSide		= application.rightSide;
+
+		rightSide.width		= "";
+
+		rightSide.hideChildren();
+
+		rightSide.signin.show();
+
+		#ifdef ANDROID
+
+			application.minimizeButton.close();
+
+		#endif
+
+	}
+
+	enableREAD() {
+
+		this.hide();
+
+	}
+
+	disableREAD() {
+
+		this.show();
+
+	}
+
+	permission() {
+
+		this.allow( groups.member , "READ" );
+		this.allow( groups.admin ,  "READ" );
+		
+	}
+
+}

application/demo/leftSide/leftSide.button.signout.js

@@ -0,0 +1,94 @@
+
+
+import menuButton					from './leftSide.button.js';
+
+import groups						from '/user/group/user.group.permission.js';
+
+import userManager					from '/server/userManager.js';
+
+
+export default class signoutButton extends menuButton{
+
+	text				= "Signout";
+
+	create(){
+
+		this.hide();
+
+	}
+
+	async click() {
+
+		this.stateMachine.composeState( "Signout" );
+
+		await this.openPage();
+
+	}
+
+	state async openPage() {
+
+		this.deactivateButtons();
+		this.activateButton();
+
+		console.log("before process",this);
+
+		var visitorUser = await this.signout();
+
+
+		localStorage.setItem( "username", false );
+
+		localStorage.setItem( "sessionKey", false );
+
+		this.getCore().updatePermissions( visitorUser.permissionObjects );	
+
+	}
+
+	createVisitor( client ) {
+	
+		var userInstance = new user(); 
+		
+		userInstance.username.value			= "Visitor";
+
+		userInstance.id 					= 0;
+		
+		userInstance.permissionObjects 		= userManager.getPermissions( userInstance, client );
+
+		return userInstance;
+	
+	}
+
+	node async signout( object, client ) {
+
+		var newUser = this.createVisitor( this.client );
+
+		this.client.user = newUser;
+
+		global.core.setUserObjects( false, this.client );
+
+		return newUser;
+
+	}
+
+	enableREAD() {
+
+		this.show();
+		
+	}
+
+	disableREAD() {
+
+		this.hide();
+
+	}
+
+	permission() {
+
+		this.allow( groups.member , "PROCESS" );
+		this.allow( groups.admin ,  "PROCESS" );
+
+		this.allow( groups.member , "READ" );
+		this.allow( groups.admin ,  "READ" );
+		
+	}
+
+}

application/demo/leftSide/leftSide.button.signup.js

@@ -0,0 +1,37 @@
+
+import menuButton					from './leftSide.button.js';
+
+export default class signinButton extends menuButton{
+
+	text				= "Signup";
+
+	click() {
+
+		this.stateMachine.composeState( "Signup" );
+
+		this.openPage();
+
+	}
+
+	state openPage() {
+
+		this.deactivateButtons();
+		this.activateButton();
+
+		var application		= this.parent.parent;
+
+		var rightSide		= application.rightSide;
+
+		rightSide.hideChildren();
+
+		rightSide.signup.show();
+
+		#ifdef ANDROID
+
+			application.minimizeButton.close();
+
+		#endif
+
+	}
+
+}

application/demo/leftSide/leftSide.button.users.js

@@ -0,0 +1,68 @@
+
+
+import menuButton					from './leftSide.button.js';
+
+import groups						from '/user/group/user.group.permission.js';
+
+
+export default class usersPageButton extends menuButton{
+
+	text				= "Users";
+
+	click() {
+
+		this.stateMachine.composeState( "Users" );
+
+		this.openPage();
+		
+	}
+
+	state openPage() {
+
+		this.deactivateButtons();
+		
+		this.activateButton();
+
+		var application		= this.parent.parent;
+
+		var rightSide		= application.rightSide;
+
+		rightSide.width		= "";
+
+		rightSide.hideChildren();
+
+		rightSide.userListPage.show();
+
+		rightSide.userListPage.userTable.body.create()
+
+		#ifdef ANDROID
+
+			application.minimizeButton.close();
+
+		#endif
+
+	}
+
+	enableREAD() {
+
+		this.show();
+		
+	}
+
+	disableREAD() {
+
+		this.hide();
+
+	}
+
+	permission() {
+
+		this.allow( groups.member , "PROCESS" );
+		this.allow( groups.admin ,  "PROCESS" );
+
+		this.allow( groups.member , "READ" );
+		this.allow( groups.admin ,  "READ" );
+		
+	}
+
+}

application/demo/leftSide/leftSide.header.js

@@ -0,0 +1,33 @@
+
+import header						from "/elements/header.js";
+
+export default class menuHeader extends header{
+
+	text 				= "Menu";
+
+	flexDirection		= "column";
+
+	fontSize			= 36;
+
+	paddingTop			= 100;
+
+	fontWeight			= "300"
+
+	paddingBottom		= 100;
+
+	textAlign			= "center";
+
+	width				=  "100vw";
+
+	#ifdef ANDROID
+
+		display			= "flex";
+
+	#else
+
+		display			= "none";
+
+	#endif
+
+	
+}

application/demo/leftSide/leftSide.js

@@ -0,0 +1,179 @@
+
+
+import button						from '/elements/button.js';
+
+import newsButton					from './leftSide.button.news.js';
+
+import settingsButton				from './leftSide.button.settings.js';
+
+import signinButton					from './leftSide.button.signin.js';
+
+import signupButton					from './leftSide.button.signup.js';
+
+import signoutButton				from './leftSide.button.signout.js';
+
+import fileManagerButton			from './leftSide.button.fileManager.js';
+
+import animationsButton				from './leftSide.button.animations.js';
+
+import usersButton					from './leftSide.button.users.js';
+
+import gridButton					from './leftSide.button.grid.js';
+
+import menuHeader					from './leftSide.header.js';
+
+
+
+export default class leftSide{
+
+	state				= "visible";
+
+	boxOverflow			= "hidden";
+
+	boxTransition		= "0.3S";
+
+	#ifdef ANDROID
+
+		boxHeight			= "100vh";
+
+	#else
+
+		boxHeight			= "";
+
+	#endif
+
+	boxWidth			= 220;
+
+	width				= 220;
+
+	flexDirection		= "column";
+
+	//borderRight		= "1px solid #3D3D3D"
+	paddingTop			= 30;
+
+	//minHeight			= "40vh"
+
+	header				= new menuHeader();
+
+	#ifdef ANDROID
+
+		height		= "100vh";
+
+		paddingTop	= "";
+
+		boxWidth	= "100vw";
+
+		width		= "100vw";
+
+		#ifdef LIGHT
+
+			boxBackground		= "#f2f2f2";
+
+			//background			= "white";
+
+		#endif
+
+
+	#endif
+
+	#ifdef WINDOWS
+
+		paddingLeft		= 4;
+
+		paddingRight	= 4;
+
+		#ifdef DARK
+
+			background			= "#202020cc";
+
+			color				= "white"
+
+			borderRight			= "1px solid black"
+
+			fontWeight			= "500";
+
+		#endif 
+
+		#ifdef LIGHT
+
+			background			= "rgb(255 255 255 / 75%)";
+
+			color				= "black";
+
+
+			fontWeight			= "200";
+
+		#endif
+	#endif
+
+	#ifdef MACOS
+
+		paddingTop			= 40;
+
+		paddingLeft			= 20;
+
+
+		#ifdef DARK
+
+			background		= "rgb(40 22 22 / 75%)";
+
+			color			= "white"
+
+			borderRight		= "1px solid black"
+
+			fontWeight			= "bold";
+
+		#endif 
+
+		#ifdef LIGHT
+
+			background		= "rgb(255 255 255 / 75%)";
+
+			color			= "black";
+
+
+			fontWeight			= "200";
+
+		#endif
+
+	#endif
+
+	render() {
+
+
+
+	}
+
+	//opacity			= "90%";
+
+	//backdropFilter	= "blur(20px)";
+
+	borderTopLeftRadius			= 8;
+
+	borderBottomLeftRadius		= 8;
+
+	borderTopLeftRadius			= "12px";
+
+	borderBottomLeftRadius		= "12px";
+
+ 
+
+	newsButton			= new newsButton();
+
+	settingsButton		= new settingsButton();
+
+	usersButton			= new usersButton();
+
+	signinButton		= new signinButton();
+
+	signoutButton		= new signoutButton();
+
+	signupButton		= new signupButton();
+
+	animationsButton	= new animationsButton();
+
+	gridButton			= new gridButton();
+
+	fileManagerButton	= new fileManagerButton();
+
+}

application/demo/leftSide/testChild.js

@@ -0,0 +1,21 @@
+export default class testChild{
+
+	text	= "test";
+
+	width	= 160;
+
+	height	= 30;
+
+	background	= "red";
+
+
+	fontSize		= 24;
+
+	constructor( abc ) {
+
+		this.text = abc;
+
+	}
+
+
+}

application/demo/list/header/news.list.header.actions.js

@@ -0,0 +1,29 @@
+
+import groups				from '/user/group/user.group.permission.js';
+
+import gridViewColumn		from '/elements/gridView/gridView.header.row.column.js';
+
+
+export default class newsListHeaderActions extends gridViewColumn {
+	
+	text				= "Actions";
+
+	enableDELETE() {
+
+		this.show();
+
+	}
+
+	disableDELETE() {
+
+		this.hide();
+
+	}
+
+	permission() {
+
+		this.allow( groups.admin, "DELETE" );
+		
+	}
+
+}

application/demo/list/header/news.list.header.body.js

@@ -0,0 +1,9 @@
+
+
+import gridViewColumn		from '/elements/gridView/gridView.header.row.column.js';
+
+export default class newsListHeaderBody extends gridViewColumn{
+
+	text				= "Message";
+
+}

application/demo/list/header/news.list.header.js

@@ -0,0 +1,26 @@
+
+
+import news							from '../../news.js';
+
+import body							from './news.list.header.body.js';
+
+import title						from './news.list.header.title.js';
+
+import price						from './news.list.header.price.js';
+
+import actions						from './news.list.header.actions.js';
+
+import gridViewRow					from '/elements/gridView/gridView.header.row.js';
+
+
+export default class newsListHeader extends news, gridViewRow { 
+
+	body				= new body();
+
+	title				= new title();
+
+	price				= new price();
+
+	actions				= new actions();
+
+}

application/demo/list/header/news.list.header.price.js

@@ -0,0 +1,10 @@
+
+
+import gridViewColumn		from '/elements/gridView/gridView.header.row.column.js';
+
+
+export default class newsListHeaderPrice extends gridViewColumn{
+
+	text				= "Price";
+
+}

application/demo/list/header/news.list.header.title.js

@@ -0,0 +1,12 @@
+
+
+import newsTitle 			from '../../news.title.js';
+
+import gridViewColumn		from '/elements/gridView/gridView.header.row.column.js';
+
+
+export default class newsListHeaderTitle extends gridViewColumn{
+
+	text				= "Title";
+
+}

application/demo/list/item/news.list.item.actions.deleteButton.js

@@ -0,0 +1,32 @@
+
+import button 				from "/elements/button.js";
+
+import groups				from '/user/group/user.group.permission.js';
+
+export default class deleteButton extends button {
+
+	text			= "Delete";
+
+	propegateEvent	= false;
+
+
+	async click() {
+
+		var sure = confirm("Are you sure you want to delete this item");
+
+		if( sure ) {
+			
+			await this.parent.parent.delete();
+			
+			this.parent.parent.remove();
+
+		}
+	}
+
+	permission() {
+
+		this.allow( groups.admin, "DELETE" );
+		
+	}
+
+}

application/demo/list/item/news.list.item.actions.js

@@ -0,0 +1,23 @@
+
+import gridViewColumn		from '/elements/gridView/gridView.body.row.column.js';
+
+import deleteButton			from "./news.list.item.actions.deleteButton.js"
+
+
+export default class newsListItemActions extends gridViewColumn, gridViewColumn{
+
+	useCustomElement	= false;
+
+	padding				= 20;
+
+	display				= "table-cell";
+
+	layers				= 1;
+
+	paddingLeft			= 30;
+
+	borderRadius;
+
+	deleteButton		= new deleteButton();
+
+}

application/demo/list/item/news.list.item.body.js

@@ -0,0 +1,9 @@
+
+import newsBody 			from '../../news.body.js';
+
+import gridViewColumn		from '/elements/gridView/gridView.body.row.column.js';
+
+export default class newsListItemBody extends newsBody, gridViewColumn{
+
+	
+}

application/demo/list/item/news.list.item.js

@@ -0,0 +1,123 @@
+import news						from '../../news.js';
+
+import body						from './news.list.item.body.js';
+
+import title					from './news.list.item.title.js';
+
+import price					from './news.list.item.price.js';
+
+import actions					from './news.list.item.actions.js';
+
+import groups					from '/user/group/user.group.permission.js';
+
+import gridViewRow				from '/elements/gridView/gridView.body.row.js';
+
+export default class newsListItem extends news, gridViewRow { 
+
+	body				= new body();
+
+	title				= new title();
+
+	price				= new price();
+
+	actions				= new actions();
+
+	cursor				= "pointer";
+
+	background;
+
+	#ifdef MACOS
+
+		fontSize	= 14;
+
+	#endif
+
+	hoverBackgroundColor	= "#363333"
+
+	#ifdef DARK
+
+		//mouseHoverColor	= "#363333";
+
+	#endif
+
+	#ifdef LIGHT
+
+		//mouseHoverColor	= "rgb(255 255 255 / 95%)";
+
+	#endif
+
+	async click() {
+
+		this.stateMachine.composeState( this.id, this.value );
+
+		await this.loadPage( this.id );
+
+	}
+
+	state async loadPage( id ) {
+
+		var rightSide 	= this.parents("newsPages");
+
+		var boundBox	= this.defaultElement.getBoundingClientRect();
+
+		var width		= boundBox.width;
+		
+
+		#ifdef ANDROID
+
+			rightSide.newsItemPage.translateX	= -width;
+
+		#elif
+
+			rightSide.newsItemPage.transform	= "translateX(-600px)";
+
+			rightSide.newsPage.transform		= "translateX(-600px)";
+
+
+		#endif
+
+		var newsPage = rightSide.newsPage;
+
+		newsPage.id = this.id;
+
+		await newsPage.sync();
+
+		newsPage.createComment.create();
+
+		//newsPage.updateFrostglass();
+
+		//newsPage.show();
+
+	}
+
+	mouseover() {
+
+		//this.background	= this.mouseHoverColor;
+
+	}
+
+	mouseleave() {
+
+		//this.background	= "none";
+
+	}
+
+	enableDELETE() {
+
+		this.actions.show();
+
+	}
+
+	disableDELETE() {
+
+		this.actions.hide();
+
+	}
+
+	permission() {
+
+		this.allow( groups.admin, "DELETE" );
+		
+	}
+
+}

application/demo/list/item/news.list.item.price.js

@@ -0,0 +1,20 @@
+
+import newsPrice 			from '../../news.price.js';
+
+import gridViewColumn		from '/elements/gridView/gridView.body.row.column.js';
+
+
+export default class newsListItemPrice extends newsPrice, gridViewColumn{
+
+	create() {
+
+		const formatter = new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: 'EUR',
+		});
+
+		this.text	= formatter.format( this.value );
+
+	}
+
+}

application/demo/list/item/news.list.item.title.js

@@ -0,0 +1,10 @@
+import newsTitle 			from '../../news.title.js';
+
+import gridViewColumn		from '/elements/gridView/gridView.body.row.column.js';
+
+
+export default class newsListItemTitle extends newsTitle, gridViewColumn{
+
+
+
+}

application/demo/list/news.list.table.body.js

@@ -0,0 +1,168 @@
+
+
+import renderCollection				from '/unify/renderCollection.js';
+
+import groups						from '/user/group/user.group.permission.js';
+
+import gridViewBody					from '/elements/gridView/gridView.body.js';
+
+import OR							from '/unify/sql/OR.js';
+
+import AND							from '/unify/sql/AND.js';
+	
+import LIKE							from '/unify/sql/LIKE.js';
+
+import GREATER						from '/unify/sql/GREATER_OR_EQUAL.js';
+
+import SMALLER						from '/unify/sql/SMALLER_OR_EQUAL.js';
+
+
+export default class newsListTableBody extends renderCollection, gridViewBody { 
+
+	debug					= true;
+
+	sort					= "title";
+
+	page					= 0;
+
+	limit					= 2;
+
+	async create() {
+
+		//this.update();
+
+	}
+
+	async update( updatePagination = true ) {
+
+		if( updatePagination ) {
+
+			this.page	= 0;
+
+		}
+
+		this.numberOfPages = await this.filterSearch( this.searchType, this.searchTerm, this.sort, this.direction, this.limit, this.page );
+
+		await this.sync();
+
+		if( updatePagination ) {
+
+			this.parents("newsItemPage").tableControl.pagination.create();
+
+		}
+
+	}
+
+	node async filterSearch( searchType, searchTerm, order, direction, limit, page ) {
+
+		console.log("searchType", searchType);
+
+		console.log("search input", searchTerm);
+
+		console.log("search order", order);
+
+		console.log("direction", direction);
+
+		console.log("limit", limit);
+
+		console.log("from", page * limit);
+
+
+
+		var filter 			= this.getFilter();
+
+		switch( searchType ) {
+
+			case 0:
+
+				filter.search 		= OR( OR( LIKE( filter.title, searchTerm ), LIKE( filter.comments.body, searchTerm ) ), LIKE( filter.body, searchTerm ) );
+
+
+			break;
+
+			case 1:
+
+				filter.search 		= GREATER( filter.price, searchTerm );
+
+			break;
+
+			case 2:
+
+				filter.search 		= SMALLER( filter.price, searchTerm );
+
+			break;
+
+		}
+
+		if( !searchTerm ) {
+
+			filter.search	= false;
+
+		}
+
+		switch( order ) {
+
+			case "title":
+
+				filter.order			= filter.title;
+
+			break;
+
+			case "body":
+
+				filter.order			= filter.body;
+
+			break;
+
+			case "price":
+
+				filter.order			= filter.price;
+
+			break;
+
+		}
+
+		if( direction == "desc" ) {
+
+			filter.direction 		= "desc";
+
+		} else {
+
+			filter.direction 		= "asc";
+
+		}
+
+		filter.limit			= 1000;
+
+		filter.from				= 0;
+
+		// See how many searched rows there are in total
+		this.get();
+
+		filter.limit			= parseInt( limit );
+
+		filter.from				= parseInt( page * limit );
+
+		var numberOfPages		= Math.ceil( this.rows.length / limit );
+
+		console.log("numberOfPages", numberOfPages);
+
+		console.log("this.rows.length", this.rows.length);
+
+		console.log("limit", limit);
+
+		return numberOfPages;
+
+	}
+	
+	permission() {
+
+		this.allow( groups.visitor, "READ" );
+	
+		this.allow( groups.member, "READ" );
+
+		this.allow( groups.admin, "READ" );
+
+	}
+
+}

application/demo/list/news.list.table.header.js

@@ -0,0 +1,13 @@
+
+import newsListHeaderRow			from "./header/news.list.header.js";
+
+import document						from '/unify/document.js';
+
+import gridViewHeader				from '/elements/gridView/gridView.header.js';
+
+
+export default class newsListTableHeader extends gridViewHeader { 
+
+	newsListHeaderRow		= new newsListHeaderRow();
+
+}

application/demo/list/news.list.table.js

@@ -0,0 +1,34 @@
+
+
+import newsListTableHeader			from "./news.list.table.header.js";
+
+import newsListTableBody			from "./news.list.table.body.js";
+
+
+import collection					from '/unify/collection.js';
+
+import newsListItem					from '../list/item/news.list.item.js';
+
+import news							from '../news.js';
+
+import gridView						from '/elements/gridView/gridView.js';
+
+
+
+export default class newsListTable extends gridView{
+
+	header	= new newsListTableHeader();
+
+	body	= new newsListTableBody( newsListItem, new collection( news ) );
+
+	#ifdef MACOS
+
+		marginLeft	= 6;
+
+		width		= "auto"
+
+		margin		= "6px -2px 10px 6px"
+
+	#endif
+
+}

application/demo/minimizeButton.js

@@ -0,0 +1,122 @@
+
+import icon						from '/elements/icon.js';
+
+export default class minimizeButton {
+
+	//showFps				= true;
+
+	text				= "<"
+
+	color				= "white"
+
+	fontWeight			= "bold"
+
+	cursor				= "pointer"
+
+
+
+	propegateEvent 		= false
+
+	zIndex				= 5000
+
+	transition			= "1s easeInOutQuart";
+
+	margin				= 10;
+
+
+
+	position			= "absolute";
+
+	#ifdef ANDROID
+
+		top					= "4px"
+
+	#else
+
+		bottom				= "4px"
+
+	#endif
+
+	left				= "0"
+
+	zIndex				= "100000"
+
+	transform			= "rotate(0)" ;
+
+	open() {
+
+		var menu 		= this.parent.leftSide;
+
+		//this.setImage("chevron-right.svg")
+
+		this.transform	= "scale(1, 1)";
+
+		#ifdef ANDROID
+
+			menu.boxHeight 	= "100vh";
+
+		#else
+
+			menu.boxWidth 	= 220;
+
+		#endif
+
+		menu.state		= "visible";
+		
+		this.parent.rightSide.borderRadius = "";
+
+	}
+
+	close() {
+
+		var menu 		= this.parent.leftSide;
+
+		//this.setImage("chevron-left.svg")
+
+		this.transform	= "scale(-1, 1)";
+
+		#ifdef ANDROID
+
+			menu.boxHeight 	= "0";
+
+		#else
+
+			menu.boxWidth 	= "0";
+
+		#endif
+
+		menu.state		= "hidden";
+
+		var that = this;
+
+		setTimeout(function(){
+
+			console.log("asd");
+
+			that.parent.rightSide.borderRadius = 12;
+
+
+		}, 1000)
+
+	}
+
+	click() {
+
+		var menu 		= this.parent.leftSide;
+
+		var state		= menu.state;
+
+		if( state == "visible" ) {
+
+			this.close();
+
+		} else {
+
+
+			this.open();
+
+		}
+
+	}
+
+}

application/demo/news.body.js

@@ -0,0 +1,7 @@
+
+import column 	from '/unify/column.js';
+
+export default class body extends column{
+
+
+}

application/demo/news.js

@@ -0,0 +1,29 @@
+
+import table			from '/unify/table.js';
+
+import title			from './news.title.js';
+
+import body				from './news.body.js';
+
+import price			from './news.price.js';
+
+import user				from '/user/user.js';
+
+import comment			from './comment/comment.js';
+
+import collection		from '/unify/collection.js';
+
+
+
+
+export default class news extends table {
+
+	title	 	= new title();
+
+	body	 	= new body();
+
+	price		= new price();
+
+	comments	= new collection( comment );
+	
+}

application/demo/news.price.js

@@ -0,0 +1,11 @@
+
+import column 		from '/unify/column.js';
+
+import datatype 	from '/unify/datatype.js';
+
+
+export default class price extends column{
+
+	datatype	= datatype.REAL;
+
+}

application/demo/news.title.js

@@ -0,0 +1,9 @@
+
+
+import column 	from '/unify/column.js';
+
+export default class title extends column {
+
+
+
+}

application/demo/page/news.page.backButton.js

@@ -0,0 +1,77 @@
+
+import icon						from "/elements/icon.js";
+
+export default class backButton{
+
+	text				= "<"
+
+	color				= "white"
+
+	fontWeight			= "bold"
+
+	cursor				= "pointer";
+
+	propegateEvent 		= false
+
+	transition			= "2s";
+
+	margin				= 10;
+
+	marginLeft			= 20;
+
+	fontFamily			= "unset"
+
+
+
+	#ifdef WINDOWS
+
+		#ifdef DARK
+
+		#endif
+
+		#ifdef LIGHT
+
+
+		#endif
+	
+	#endif
+
+	#ifdef MACOS
+	
+		#ifdef DARK
+
+			boxBackground		= "#282828";
+
+		#endif
+
+		#ifdef LIGHT
+
+			boxBackground		= "#ffffff";
+
+		#endif
+
+	#endif
+
+
+
+	click() {
+
+		this.stateMachine.composeState( "Home" );
+
+		this.openNewsItems();
+
+	}
+
+	state openNewsItems() {
+
+		var rightSide = this.parents("newsPages");
+
+		//rightSide.newsItemPage.marginLeft	= "0";
+
+		rightSide.newsItemPage.transform	= "translateX(0)";
+
+		rightSide.newsPage.transform		= "translateX(0)";
+
+	}
+
+}

application/demo/page/news.page.body.js

@@ -0,0 +1,57 @@
+
+import newsBody 		from '../news.body.js';
+
+import textarea 		from '/elements/textarea.js';
+
+import flexbox 			from '/elements/flexbox.js';
+
+export default class newsPageBody extends flexbox, newsBody{
+
+	padding				= 20;
+
+	width				= "-webkit-fill-available"
+	
+	#ifdef MACOS
+
+		#ifdef DARK
+
+			background		= "#282828";
+
+		#endif
+
+		#ifdef LIGHT
+
+			background		= "#ffffff";
+
+		#endif
+	
+	#endif
+
+	#ifdef WINDOWS
+
+		#ifdef DARK
+
+
+		#endif
+
+		#ifdef LIGHT
+
+
+		#endif
+	
+	#endif
+
+	#ifdef ANDROID
+
+		borderRadius = "0 0 18px 18px"
+
+
+		#ifdef LIGHT
+
+			background		= "white";
+
+		#endif
+
+	#endif
+
+}

application/demo/page/news.page.edit.button.js

@@ -0,0 +1,49 @@
+
+import button						from "/elements/button.js";
+
+export default class backButton extends button{
+
+	text				= "Edit News"
+
+	color				= "white"
+
+	fontWeight			= "bold"
+
+	cursor				= "pointer";
+
+	float				= "right"
+
+	propegateEvent 		= false
+
+	transition			= "2s";
+
+	margin				= 10;
+
+	marginLeft			= 20;
+
+	fontFamily			= "unset"
+
+
+
+	click() {
+
+		this.stateMachine.composeState( "Edit" );
+
+		var rightSide	= this.parents("newsPages");
+
+		//this.parent.hide();
+
+		var newsEdit	= rightSide.newsEdit;
+
+		newsEdit.id = this.parent.id;
+
+		newsEdit.sync();
+
+		newsEdit.show();
+
+		//rightSide.newsPage.transform		= "translateX(-1200px)";
+
+	}
+
+
+}

application/demo/page/news.page.js

@@ -0,0 +1,254 @@
+
+import news 					from '../news.js';
+
+import newsPageTitle 			from './news.page.title.js';
+
+import newsPageBody				from './news.page.body.js';
+
+import groups					from '/user/group/user.group.permission.js';
+
+import commentsMessages			from '../comment/comments.messages.js';
+
+import editComment 				from '../comment/edit/comment.edit.js';
+
+import createComment 			from '../comment/create/comment.create.js';
+
+import saveButton				from './news.page.save.js';
+
+import backButton				from "./news.page.backButton.js"
+
+import editButton				from "./news.page.edit.button.js"
+
+import filler					from "/elements/filler.js";
+
+import searchComments			from "./search.comments.js";
+
+import tools					from "/unify/tools.js";
+
+
+
+
+class testDiv{
+
+	pageTitle				= new newsPageTitle();
+
+}
+
+class testSuffixes{
+
+	layers				= 1;
+
+	useCustomElement	= true;
+
+	customElement		= document.createElement("a")
+
+	text				= "visit Unify";
+
+
+
+	visitedColor		= "green";
+
+	linkColor			= "#009688"
+
+	activeColor			= "red"
+
+
+	create() {
+
+		this.element.setAttribute("href", "https://unifyjs.org")
+
+	}
+
+}
+
+
+export default class newsPage extends news{
+	
+	willChange					= "transform";
+
+	transform;
+
+	minHeight					= "100%";
+
+	transition					= "1s"
+
+
+	scrollbarWidth					= "6px";
+
+	scrollbarTrackBackground		= "#1c1d1e";
+
+	scrollbarThumbBackground		= "#404040"
+
+	scrollbarThumbBorderRadius		= "4px"
+
+	scrollbarThumbHoverBackground	= "grey";
+
+
+	#ifdef MACOS
+
+		#ifdef LIGHT
+
+			background			= "white"; 
+
+		#endif
+
+
+		#ifdef DARK
+
+			background			= "#282828";
+
+		#endif
+
+	#endif
+
+
+	#ifdef WINDOWS
+
+		#ifdef LIGHT
+
+			background			= "rgb(255 255 255 / 75%)";
+
+		#endif
+
+
+		#ifdef DARK
+
+			background			= "#202020cc";
+
+		#endif
+
+	#endif
+
+
+	#ifdef ANDROID
+
+		height		= "100vh";
+
+		paddingTop	= "";
+
+		boxWidth	= "100vw";
+
+		width		= "100vw";
+
+		#ifdef LIGHT
+
+			background		= "#f2f2f2";
+
+		#endif
+
+
+	#endif
+
+
+	flexDirection		= "column"
+
+	_backButton			= new backButton();
+
+	_testDiv			= new testDiv();
+
+	body				= new newsPageBody();
+
+
+	editButton			= new editButton();
+	//testSuffixes			= new testSuffixes();
+
+	debug				= true;
+
+	width				= 600;
+
+	sizing				= "border-box";
+
+	layers				= 1;
+
+	height				= "70vh"
+
+	overflowY			= "auto"
+
+
+	searchComments		= new searchComments();
+
+	commentsMessages	= new commentsMessages( editComment, this.comments );
+
+	createComment		= new createComment( this.comments );
+
+	filler				= new filler();
+
+	async afterLoad() {
+
+		var pathName		= window.location.pathname;
+
+		var pathParts  		= pathName.split("/");
+
+		var id 				= parseFloat( pathParts[1] );
+
+
+		if( id ) {
+
+			this.stateMachine.composeState();
+
+			this.showParents();
+
+			this.show();
+
+			await this.loadPage( id )
+
+		}
+
+	}
+
+	state async loadPage( id ) {
+
+		var rightSide 	= this.parents("newsPages");
+
+		var boundBox	= this.defaultElement.getBoundingClientRect();
+
+		var width		= boundBox.width;
+		
+
+		#ifdef ANDROID
+
+			rightSide.newsItemPage.translateX	= -width;
+
+		#elif
+
+			rightSide.newsItemPage.transform	= "translateX(-600px)";
+
+			rightSide.newsPage.transform		= "translateX(-600px)";
+
+
+		#endif
+
+		this.id = id;
+
+		await this.sync();
+
+		this.createComment.create();
+
+	}
+
+	async create() {
+
+		await this.commentsMessages.sync();
+
+	}
+
+	permission() {
+
+		this.allow( groups.member, "WRITE" );
+
+		this.allow( groups.admin, "WRITE" );
+
+		this.allow( groups.visitor, "WRITE" );
+
+
+
+		this.allow( groups.member, "READ" );
+
+		this.allow( groups.admin, "READ" );
+
+		this.allow( groups.visitor, "READ" );
+	
+	}
+
+
+}

application/demo/page/news.page.price.js

@@ -0,0 +1,17 @@
+
+
+import newsPrice 	from '../news.price.js';
+
+import flexbox 		from '/elements/flexbox.js';
+
+export default class newsPagePrice extends newsPrice, flexbox{
+
+	useCustomElement	= false;
+
+	fontWeight			= "bold";
+
+	fontSize			= 30;
+
+	padding				= 20;
+
+}

application/demo/page/news.page.save.js

@@ -0,0 +1,16 @@
+
+
+import button 	from '/elements/button.js';
+
+export default class saveButton extends button {
+
+	label 		= "Save"; 
+
+	async click( event, object ){
+
+		var result = await this.parent.save();
+
+
+	}
+
+}

application/demo/page/news.page.title.js

@@ -0,0 +1,70 @@
+
+
+import newsTitle 	from '../news.title.js';
+
+import flexbox 		from '/elements/flexbox.js';
+
+export default class newsPageTitle extends newsTitle, flexbox{
+
+	useCustomElement	= false;
+
+	fontWeight			= "bold";
+
+	//padding				= 20;
+
+	//width				= "600px"
+
+	//boxSizing			= "border-box";
+
+
+	#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
+
+	#ifdef ANDROID
+
+		borderRadius = "18px 18px 0 0"
+
+		width	= "100%"
+
+		#ifdef LIGHT
+
+			background		= "white";
+
+		#endif
+
+	#endif
+
+	fontSize			= 30;
+
+	padding				= 20;
+
+}

application/demo/page/search.comments.js

@@ -0,0 +1,28 @@
+
+import input 	from 	"/elements/input.js";
+
+
+
+
+export default class searchBar extends input {
+
+	placeholder		= "Search."
+
+
+	async keyup( event ) {
+
+		this.value = this.customElement.value;
+
+		var value 	= this.value;
+
+		console.log("search input", value);
+
+		var newsItems 	= this.parent.commentsMessages;
+
+		await newsItems.search( value );
+
+		await newsItems.sync();
+
+	}
+
+}

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();
+
+	
+
+}