First commit

framework/client/animation/animation.js

@@ -0,0 +1,163 @@
+/*
+
+	Copyright (c) 2020, 2023, The Unified Company.
+
+	This code is part of Unify.
+
+	This program is free software; you can redistribute it and/or modify
+	it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE,
+	as published by the Free Software Foundation.
+	See the GNU AFFERO GENERAL PUBLIC LICENSE, for more details.
+
+	https://unifyjs.org 
+
+*/
+
+import keyFrame		from "./animation.keyFrame.js";
+
+export default class animation{
+
+	name;
+
+	element;
+
+	keyFrames			= new Array();
+
+	animationManager;
+
+	duration;
+
+
+	createKeyFrame( percent ) {
+
+		var newKeyFrame = new keyFrame();
+
+		newKeyFrame.percent = percent;
+
+		this.keyFrames.push( newKeyFrame );
+
+		return newKeyFrame;
+
+	}
+
+	createPromiseFunction( id ) {
+		
+		var that = this;
+		
+		function promiseFunction( resolveFunction ){
+
+			var promiseObject 		= new Object;
+
+			promiseObject.id 		= id;
+
+			promiseObject.resolve 	= resolveFunction;
+
+			that.animationManager.addPromise( promiseObject );
+
+		}
+		
+		
+		return promiseFunction;
+
+	}
+
+	async stop() {
+
+		if( !this.element.classList.contains("keyFrameAnimations") ) {
+
+			var animationClassName = this.animationManager.getAnimationClassName();
+
+			this.element.classList.remove( animationClassName );
+			
+		}
+
+	}
+
+	async pause() {
+
+		this.element.classList.add("pause-animation");
+
+	}
+
+	setDuration( duration ) {
+
+		this.duration 		= duration;
+
+	}
+
+	setDirection( direction ) {
+
+		this.direction 		= direction;
+
+	}
+
+	setIterationCount( iterationCount ) {
+
+		this.iterationCount = iterationCount;
+
+	}
+
+	setFillMode( fillMode ) {
+
+		this.fillMode		= fillMode;
+
+	}
+
+
+	async play( duration ) {
+
+		if( this.element.classList.contains("pause-animation") ) {
+
+			this.element.classList.remove("pause-animation");
+
+			return true;
+
+
+		}
+
+		if( !this.element.classList.contains("keyFrameAnimations") ) {
+
+			var animationClassName = this.animationManager.getAnimationClassName();
+
+			this.element.classList.add( animationClassName );
+
+		}
+
+		if( duration ) {
+
+			this.duration = duration;
+
+		}
+
+		this.active	= true;
+
+		var source = this.animationManager.composeCss();
+		
+		this.writeStyleToDOM( source );
+
+		var promiseFunction 	= this.createPromiseFunction( this.id );
+
+		var promise				= new Promise(  promiseFunction  );
+
+		this.animationManager.createEventListener();
+
+		await promise;
+
+		return true;
+
+	}
+
+	writeStyleToDOM( source ) {
+
+		var style = document.createElement("style")
+
+		style.type = 'text/css';
+
+		style.appendChild( document.createTextNode( source ) );
+
+
+		document.getElementsByTagName("head")[0].appendChild( style );
+
+	}
+
+}