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