Unify/framework/client/css.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 cssRules			from './cssRules.js';

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

import cssManager		from './cssManager.js';

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

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


export default class css{

	cssCache 		= new cssManager();

	global_css 		= "";

	skipBoxTerms	= new Array( "box-sizing", "box-shadow", "box-reflect", "box-decoration-break" );

	constructor() {

		this.boxTermWithoutPrefix	= new Array();

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

			var boxTerm 					= this.skipBoxTerms[i]

			this.boxTermWithoutPrefix[i] 	= boxTerm.replace("box-")

		}

	}

	PerformPropertyGridCorrection( property ) {
		
		for ( var i = 0; i < this.skipBoxTerms.length; i++ ) {
			
			if( this.boxTermWithoutPrefix[ i ].includes( property ) ) {

				property = this.skipBoxTerms[ i ];

			}

		}

		return property;

	}

	parseObject( object ){

		var objectName 			= object.propertyName;	

		object.__proto__.css 			= new cssRules();

		object.__proto__.boxRules 		= new cssRules();

		object.__proto__.cssRules		= new cssRules();


		object.cssRules.addStyleListener( "hover", ":hover" );

		object.cssRules.addStyleListener( "visited", ":visited" );

		object.cssRules.addStyleListener( "link", ":link" );

		object.cssRules.addStyleListener( "active", ":active" );


		object.cssRules.addStyleListener( "placeholder", "::placeholder" );

		object.cssRules.addStyleListener( "scrollbar", "::-webkit-scrollbar" );

		object.cssRules.addStyleListener( "scrollbarTrack", "::-webkit-scrollbar-track" );

		object.cssRules.addStyleListener( "scrollbarThumb", "::-webkit-scrollbar-thumb" );

		object.cssRules.addStyleListener( "scrollbarThumbHover", "::-webkit-scrollbar-thumb:hover" );

		
	}
	
	parseCSSValue( value ) {
	
		if( typeof value == "number" ) {
			
			value += "px";
		}

		return value;
		
	}
	
	createStyleRule( normalizedProperty, value ){

		if( !value ) {

			return "";

		}
	
		value = this.parseCSSValue( value );

		normalizedProperty = this.PerformPropertyGridCorrection( normalizedProperty );

		return "\t" + normalizedProperty + ":" + value + ";   \n";
	
	}

	compareUpperCase( term ) {
	
		const compare 	= function( current ){ if( term.indexOf( current ) != -1 ){  return true; } }
	
		const n 		= definitions.alphabet;

		var map 		= n.map( compare );
		
		return map; // [false, false, true, false] where true is where higher case is
		
	}
	
	
	hasUpperCase( a ) {

		let regExp = /[A-Z]/;

		return regExp.test( a );
	
	}
	
	replaceUpperCase( word ) {
	
		var map = this.compareUpperCase( word );
		
		var letter = definitions.alphabet[ map.indexOf( true ) ];
		
		return word.replace( letter, "-" + letter.toLowerCase() );
	
	}

	normalizePropertyName( name ) {

		return tools.firstLowerCase( name.replace("__", "").replace("box", "") );

	}
	
	// needs caching
	normalizeProperty( name ) {

		// webkit -> -webkit
		if( name.slice( 0, 6 ) == "webkit" ) {

			name = "-" + name;

		}

		for (var i = 0; i < 6; i++) {

			if( this.hasUpperCase( name ) ) {
			
				name = this.replaceUpperCase( name ); // backgroundColor -> background-color-and-something

			}

		}

		return name;
		
	}

	setter( object, domStyleObject, propertyName, property, value ) {

		object[ "__" + propertyName ] = value;

		value 				= this.parseCSSValue( value );

		property 			= this.PerformPropertyGridCorrection( property );

		var NSTabNames		= new Array("svg", "circle")

		// todo : doesnt work properly
		//if( NSTabNames.includes( object.element.tagName ) ) {

		//	domStyleObject.setAttributeNS( null, property, value ); 

		//} else {

			domStyleObject.setProperty( property, value ); 

		//}

	}

	createSetter( property, objectProperty, object, domStyleObject ) {
	
		var css = this;
		
		object[ "__" + objectProperty ] = object[ objectProperty ];
		
		object.__defineSetter__( objectProperty, this.setter.bind( this, object, domStyleObject, objectProperty, property ) );

	}

	getter( object, objectProperty, value ) {

		var newValue = object[ "__" + objectProperty ];

		if(typeof newValue == "string") {

			var chars = newValue.split();

			if( chars[chars.length-2] == "p" && chars[chars.length-1] == "x" ) {

				chars = chars.slice(0, -2);

				newValue = chars.join();

			}

		}

		if( tools.isCustomNumber( newValue ) ) {

			return parseFloat( newValue );

		} else {

			return newValue;

		}

	}

	createGetter( property, objectProperty, object, domStyleObject ) {

		object.__defineGetter__( objectProperty, this.getter.bind( this, object, objectProperty ) );

	}
	
	parseProperty( property, object ) {

		var propertyName 		= property.name;

		var propertyValue		= property.value;

		var normalizedProperty 	= this.normalizeProperty( propertyName );

		//if( propertyName == "gridArea" && propertyValue == "none" ) {

		//	return false;

		//}

		var slicedProperty		= propertyName.toLowerCase().slice( 0, 3 );

		if( slicedProperty == "box" ) {
		
			object.boxRules.style += this.parseCssTerm( object, propertyName, propertyValue, object.elements[0], "box" );
		
		} else {

			object.css.style += this.parseCssTerm( object, propertyName, propertyValue, object.element )

		}

		this.parseExtraStyleSuffixes( object, propertyName, propertyValue );

	}

	parseExtraStyleSuffixes( object, propertyName, propertyValue ) {

		var styleTypes			= object.cssRules.styleTypes;

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

			var cssType				= styleTypes[i];

			var propertyTerm		= cssType.propertyTerm;

			var slicedProperty		= propertyName.slice( 0, propertyTerm.length );


			if( slicedProperty == propertyTerm && propertyName.length > slicedProperty.length ) {

				cssType.css += this.parseCssTerm( object, propertyName, propertyValue, object.elements[0], propertyTerm );

			}

		}

	}
	
	parseCssTerm( object, propertyName, propertyValue, element, term = "" ) {

		var cssPropertyName 			= tools.firstLowerCase( propertyName.replace( term, "" ) );

		var normalizedProperty 			= this.normalizeProperty( cssPropertyName ); 

		if( this.propertyIsStyle( normalizedProperty ) ) {

			// Setters and getters don't work yet for special suffixes.
			if( !term || term == "box" ) {

				this.createSetter( normalizedProperty, propertyName, object, element.style );

				this.createGetter( normalizedProperty, propertyName, object, element.style );

			}
			
			return this.createStyleRule( normalizedProperty, propertyValue );

		} else {
		
			return "";
		
		}

	}

	clearCache() {

		this.cssCache.rules = new Array();

	}
	
	parseCssRule( object, objectPropertyName, propertyName, propertyValue ) {
	
		var normalizedProperty = this.normalizeProperty( objectPropertyName );

		object.boxRules.style += this.createStyleRule( normalizedProperty, propertyValue );


		this.createSetter( objectPropertyName, propertyName, object, object.elements[0].style );
		
		this.createGetter( objectPropertyName, propertyName, object, object.elements[0].style );

	}

	createSelector( className, afterTerm ) {

		var selector 	= "." + className;

		selector		+= "." + this.device;

		selector		+= "." + this.os;

		selector		+= "." + this.tint;

		// this doesnt work yet.
		if( afterTerm ) {

			selector		+= afterTerm;

		}

		//selector		+= "," + selector.replace( "_" + id, "" );

		return selector;

	}
	
	createStyleSheet( object ){

		var objectName 	= tools.createCSSClassName( object );

		var body		= object.css.style;


		if( object.customElement ) {
		
			var selector 	= this.createSelector( objectName + "Element" );

			this.global_css += this.cssCache.getRule( selector,  body );


			var selector 	= this.createSelector( objectName + "Grid" );

			this.global_css += this.cssCache.getRule( selector,  body );

		} else {
		
			var selector 	= this.createSelector( objectName + "Grid" );
			
			this.global_css += this.cssCache.getRule( selector,  body );

		}
		
		if( object.boxRules ) {

			var selector 	= this.createSelector( objectName + "Box" );

			var body		= object.boxRules.style;

			this.global_css += this.cssCache.getRule( selector, body );

		}



		var styleTypes			= object.cssRules.styleTypes;

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

			var cssType		= styleTypes[i];

			if( object.useCustomElement ) {

				var selector 	= this.createSelector( objectName + "Element", cssType.cssSuffix );

			} else {

				var selector 	= this.createSelector( objectName + "Grid", cssType.cssSuffix );

			}

			var body		= cssType.css;

			if( body != "" ) {

				//console.log("cssType.cssSuffix", cssType.cssSuffix);

				this.global_css += this.cssCache.getRule( selector, body );

			}

		}



		if( !object.parent ) {

			this.writeCssToPage( this.global_css );
			
			this.global_css = "";

		}
		
		if( object.dynamic ) {
		
			this.writeCssToPage( this.global_css );
			
			this.global_css = "";
		
		}
		
	}
	
	writeCssToPage( css ) {
	
		if( css == "" ) {
		
			return false;
		
		}

		var style = document.createElement("style");
		
		style.innerHTML = css;
		
		document.head.appendChild( style );
		
	}
	
	removeStripe( name ) {
	
		var splitName = name.split("-");
		
		if( splitName.length > 1 ) {
		
			return splitName[1].toLowerCase();
		
		} else {
		
			return name;
		
		}
	
	}
	
	getStyleSheetObject(){

		if( !document.body ) {

			return definitions.css;
/*
			var array =  JSON.parse(cssDef);

			var object = new Object();

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

				var def = array[i];

				if( this.hasUpperCase( def ) ) {

					object[ this.replaceUpperCase( def ) ] = '';

					console.log( this.replaceUpperCase( def ) );

				} else {

					object[  def  ] = '';

				}
			}
*/
			return object;

		}
		
		if( document.body.style ) {

			var bodyStyle = document.body.style;

			bodyStyle.webkitBoxShadow = "";

			return bodyStyle;

		}

		if( document.body.styleSheets ) {

			// fix please!!!! not allowed
			return document.styleSheets[1].cssRules[0].style;

		} else {
		
			return document.customStyleTerms;
			
		}

	}
	
	camelCaseToDash( name ) {

		for ( var i = 0; i < 4; i++ ) {

			if( this.hasUpperCase( name ) ) {
			
				name = this.replaceUpperCase( name ); // backgroundColor -> background-color
			
			}

		}

		return name;

	}

	removeBoxPrefix( name ) {

		if( !name.includes("webkit-box") ) {

			name = name.replace("box", "").toLowerCase();

		}

		return name;

	}

	checkBoxSpecialCase( name ) {

		for (var i = 0; i < this.boxTermWithoutPrefix.length; i++) {
			
			if( this.boxTermWithoutPrefix[ i ].includes( name ) ) {

				return true;

			}

		}

	}

	propertyIsStyle( name ){

		name = this.camelCaseToDash( name );

		name = this.removeBoxPrefix( name );

		

		if( this.checkBoxSpecialCase( name ) ) {

			return true;

		}


		var styleTerms = this.getStyleSheetObject();

		if( typeof styleTerms[ name ] == "string"  ) {

			return true;
		
		} else {

			return false;
		
		}

	}

	propertyHasStyle( name ){
		
		var styleTerms = Object.keys( definitions.css );

		if( styleTerms.includes( name.toLowerCase() ) ) {

			return true;

		} else {

			return false;

		}

	}
	
}