Unify/framework/client/themeSwitcher.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 omitMethods			from "../unify/omitMethodNames.js";

import tools	 			from '../unify/tools.js';

import definitions	 		from '../unify/definitions.js';


export default class themeSwitcher{

	setCore( core ) {

		this.core = core;

	}

	communicateTheme( os, device, tint ) {

		var themeProfile		= new Object();

		themeProfile.os 		= os;

		themeProfile.device		= device;

		themeProfile.tint 		= tint;

		this.core.socketManager.get( "settings", "setTheme", JSON.stringify( themeProfile )  );

	}

	parseObject( object ) {

		if( !object.parent ) {

			if( object.device ) {

				object.__os			= object.os;

				object.__tint		= object.tint;

				object.__device		= object.device;


				this.createSetters( object );

			}

		}

	}
	
	updateClassName( oldValue, newValue ) {

		var elements 	= document.querySelectorAll( "." + oldValue )

		for (var i = 0; i < elements.length; i++) {

			var element = elements[i];

			//var display	= element.style.display;

			//element.setAttribute('style', '');

			//element.style.display	= display;

			element.classList.remove( oldValue );

			element.classList.add( newValue );

		}

	}

	delayUpdateThemeProperties() {

		var that 	= this;

		setTimeout(function() {

				that.updateThemeProperties();

		}, 1000 );

	}

	updateCoreOS( newValue ) {

		var core 		= this.core;

		core.os			= newValue;

		core.setTheme();

		core.os			= newValue;

	}

	osSetter( newValue, object ) {

		var core 		= this.core;

		var oldValue	= object.__os;


		object.__os 		= newValue;

		this.updateCoreOS( newValue );

		this.updateClassName( oldValue, newValue )

		core.callAfterLoad( object.getRoot() );

		this.delayUpdateThemeProperties( themeSwitcher );

		core.communicateTheme( object.__os, object.__device, object.__tint );


		console.log( "this is the setter of os, changed value from", oldValue, "to", newValue );

	}

	createOSSetter( object ) {

		var themeSwitcher	= this;

		object.__defineSetter__( "os", function( value ) {  themeSwitcher.osSetter( value, object );  });

	}

	createOSGetter( object ) {

		object.__defineGetter__( "os", function( value ){

			return object.__os;

		});

	}

	updateCoreTint( newValue ) {

		var core 		= this.core;

		core.tint		= newValue;

		core.setTheme();

		core.tint		= newValue;

	}

	tintSetter( newValue, object ){

		var core 			= this.core;

		var oldValue		= object.__tint;

		object.__tint 		= newValue;

		this.updateCoreTint( newValue );

		this.updateClassName( oldValue, newValue );

		document.config.tint = newValue;

		this.delayUpdateThemeProperties();

		core.communicateTheme( object.__os, object.__device, object.__tint );

	}

	createTintSetter( object ) {

		var themeSwitcher	= this;

		object.__defineSetter__( "tint", function( value ){ themeSwitcher.tintSetter( value, object );  } );

	}

	createTintGetter( object ) {

		object.__defineGetter__( "tint", function( value ){

			return object.__tint;

		});

	}

	createSetters( object ) {

		this.createOSSetter( object );
		
		this.createOSGetter( object );


		this.createTintSetter( object );

		this.createTintGetter( object );

	}

	updateMethodA( object, themeObject ) {

		var properties = Object.getOwnPropertyNames( object )

		for (var j = 0; j < properties.length; j++) {
			
			var methodName = properties[j]

			if( !omitMethods.includes( methodName ) ){

				if( themeObject[ methodName ] && typeof themeObject[ methodName ] == "function" ) {

					// todo this destroys the all events
					//object[ methodName ] = themeObject[methodName];

				}

			}

		}

	}

	updateMethodB( object, themeObject ) {

		Object.getOwnPropertyNames( Object.getPrototypeOf( object ) ).forEach( methodName => {

			if( !omitMethods.includes(methodName) ){

				if( themeObject[methodName] && typeof themeObject[methodName] == "function" ) {

					// todo this destroys the all events
					//object[methodName] = themeObject[methodName];

				}
			}

		});

	}

	updateMethods( object, themeObject ) {

		this.updateMethodA( object, themeObject );

		this.updateMethodB( object, themeObject );

	}

	updateRenderCollection( object, themeObject ) {

		if( object.type == "renderCollection" ) {

			if( object.object ) {

				object.object = themeObject.object;

			}

		}

	}

	updateProperty( object, themeObject, name ) {

		var objectString	= object["__" + name ];

		var themeString		= themeObject[ name ];


		if( themeString != objectString ) {

			var css					= this.core.css;

			var cssPropertyName 	= css.normalizePropertyName( name ); 
			
			var normalizedProperty 	= css.normalizeProperty( cssPropertyName ); 

			var isCSS 				= css.propertyIsStyle( normalizedProperty );


			if( !isCSS && !definitions.invalid.includes( name ) ) {

				object[name] = themeObject[name];

			}

			//object[name] = themeObject[name];

		}

	}

	updateCustomProperties( object, themeObject ) {

		var properties	= themeObject.getProperties();

		for (var j = 0; j < properties.length; j++) {

			var name	= properties[j].name;

			var value	= properties[j].value;

			if( typeof value == "string" ) {

				if( !definitions.invalid.includes( name ) ) {
					
					this.updateProperty( object, themeObject, name );

				}

			}

		}

	}

	getThemeObject( themeObjects, className ) {

		var themeByClass	= themeObjects[ className ];

		themeByClass 		= themeByClass.filter( n => n );

		var themeObject 	= themeByClass[ 0 ];

		return themeObject;

	}

	updateObject( object, className, themeObjects ) {

		var themeObject	= this.getThemeObject( themeObjects, className );

		if( themeObject ){

			this.updateMethods( object, themeObject );

		}

		this.updateRenderCollection( object, themeObject );

		if( themeObject ) {

			this.updateCustomProperties( object, themeObject );
			
		}

	}

	updateThemeProperties() {

		var themeObjects 	= document.themeObjects[ this.core.os ][ this.core.device ][ this.core.tint ];

		console.log("themeObjects", themeObjects);

		for ( var i = 0; i < this.core.objects.length; i++ ) {

			var object 				= this.core.objects[i];

			var className 			= object.getClassName();

			
			if( themeObjects[ className ] ) {

				this.updateObject( object, className, themeObjects );

			}

		}

	}

}