Unify/framework/client/animation/animation.js

/*

	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 );

	}

}