First commit

framework/client/themeSwitcher.js

@@ -0,0 +1,389 @@
+/*
+
+	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 );
+
+			}
+
+		}
+
+	}
+
+}