x4js 1.6.4 → 2.0.1

package/lib/src/styles.ts

@@ -1,343 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|  
-*  /__/ \__\   |_|
-*        
-* @file styles.ts
-* @author Etienne Cochard 
-*
-* Copyright (c) 2019-2023 R-libre ingenierie
-*
-* Permission is hereby granted, free of charge, to any person obtaining a copy 
-* of this software and associated documentation files (the "Software"), to deal 
-* in the Software without restriction, including without limitation the rights 
-* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
-* of the Software, and to permit persons to whom the Software is furnished to do so, 
-* subject to the following conditions:
-* The above copyright notice and this permission notice shall be included in all copies
-* or substantial portions of the Software.
-*
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
-* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
-* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
-* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
-* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-**/
-
-import { x4document } from './x4dom'
-
-import { pascalCase, isString, isArray } from "./tools";
-
-
-/**
- *  -- [ @STYLESHEET ] -----------------------------------------------------------------
- */
-
-export class Stylesheet {
-
-	private m_sheet: CSSStyleSheet;
-	private m_rules: Map<string, number> = new Map<string,number>( );
-
-	constructor() {
-		
-		function getStyleSheet( name ) : CSSStyleSheet {
-			for(let i=0; i<x4document.styleSheets.length; i++) {
-			  	let sheet = x4document.styleSheets[i];
-			  	if(sheet.title === name ) {
-					return <CSSStyleSheet>sheet;
-			  	}
-			}
-		}
-
-		this.m_sheet = getStyleSheet( '@dynamic-css' );
-		if( !this.m_sheet ) {
-			let dom = x4document.createElement( 'style' );
-			dom.setAttribute('id', '@dynamic-css' );
-			x4document.head.appendChild(dom);
-
-			this.m_sheet = <CSSStyleSheet>dom.sheet
-		}
-	}
-
-    /**
-     * add a new rule to the style sheet
-     * @param {string} name - internal rule name 
-     * @param {string} definition - css definition of the rule 
-     * @example
-     * setRule('xbody', "body { background-color: #ff0000; }" );
-     */
-
-	public setRule(name: string, definition: any ) {
-
-		if( isString(definition) ) {
-			let index = this.m_rules.get( name );
-			if (index !== undefined) {
-				this.m_sheet.deleteRule(index);
-			}
-			else {
-				index = this.m_sheet.cssRules.length;
-			}
-
-			this.m_rules.set( name, this.m_sheet.insertRule( definition, index) );
-		}
-		else {
-			let idx = 1;
-			for( let r in definition ) {
-
-				let rule = r + " { ",
-					css = definition[r];
-
-				for (let i in css) {
-					
-					let values = css[i];	// this is an array !
-					for (let j = 0; j < values.length; j++) {
-						rule += i + ": " + values[j] + "; "
-					}
-				}
-
-				rule += '}';
-
-				//console.log( rule );
-				
-				this.setRule( name+'--'+idx, rule );
-				idx++;
-			}
-		}
-	}
-
-	/**
-	 * return the style variable value
-	 * @param name - variable name 
-	 * @example
-	 * ```
-	 * let color = Component.getCss( ).getVar( 'button-color' );
-	 * ```
-	 */
-
-	public static getVar( name: string ) : any {
-		if( !Stylesheet.doc_style ) {
-			Stylesheet.doc_style = getComputedStyle( x4document.documentElement );
-		}
-
-		if( name[0]!='-' ) {
-			name = '--'+name;
-		}
-
-    	return Stylesheet.doc_style.getPropertyValue( name ); // #999999
-	}
-
-	static guid: number = 1;
-	static doc_style: CSSStyleDeclaration;
-}
-
-
-/**
- *  -- [ @CSSPARSER ] -----------------------------------------------------------------
- * 
- * adaptation of jss-for-node-js
- */
-
-export class CSSParser {
-
-	private result = {};
-
-	parse(css) {
-		this.result = {};
-		this.parse_json('', css);
-		return CSSParser.mk_string(this.result);
-	}
-
-	public static mk_string( rules: any ) {
-
-		// output result:	
-		let ret = '';
-
-		for (let a in rules) {
-			let css = rules[a];
-			ret += a + " { "
-
-			for (let i in css) {
-				
-				let values = css[i];	// this is an array !
-				for (let j = 0; j < values.length; j++) {
-					ret += i + ": " + values[j] + "; "
-				}
-			}
-
-			ret += "}\n"
-		}
-
-		return ret;
-	}
-
-	private parse_json(scope: string, css: any) {
-
-		if (scope && !this.result[scope]) {
-			this.result[scope] = {};
-		}
-
-		for (let property in css) {
-
-			let value = css[property];
-
-			if ( isArray(value) ) {
-				let values = value;
-				for (let i = 0; i < values.length; i++) {
-					this.addProperty(scope, property, values[i]);
-				}
-			}
-			/*else if (value instanceof Color) {
-				this.addProperty(scope, property, value.toString());
-			}*/
-			else {
-				switch (typeof (value)) {
-
-					case "number": {
-						this.addProperty(scope, property, value);
-						break;
-					}
-
-					case "string": {
-						this.addProperty(scope, property, value );
-						break;
-					}
-
-					case "object": {
-						this.parse_json(this.makeSelectorName(scope, property), value);
-						break;
-					}
-
-					default: {
-						console.error("ignoring unknown type " + typeof (value) + " in property " + property);
-						break;
-					}
-				}
-			}
-		}
-	}
-
-	private makePropertyName(n: string): string {
-		return pascalCase(n);
-	}
-
-	private makeSelectorName(scope: string, name: string): string {
-
-		let snames = [];
-		let names = name.split(/\s*,\s*/);
-		let scopes = scope.split(/\s*,\s*/);
-
-		for (let s = 0; s < scopes.length; s++) {
-			let scope = scopes[s];
-
-			for (let i = 0; i < names.length; i++) {
-
-				let name = names[i],
-					sub = false;
-
-				if (name.charAt(0) == "&") {
-					name = name.substr(1);
-					sub = true;
-				}
-
-				if (name.charAt(0) === '%') {
-					name = '.o-' + name.substr(1);
-				}
-
-				if (sub) {
-					snames.push(scope + name)
-				}
-				else {
-					snames.push(scope ? scope + " " + name : name)
-				}
-			}
-		}
-
-		return snames.join(", ");
-	}
-
-	addProperty(scope: string, property: string, value: any) {
-
-		let properties = property.split(/\s*,\s*/);
-
-		for (let i = 0; i < properties.length; i++) {
-
-			let property = this.makePropertyName(properties[i]);
-
-			if (this.result[scope][property]) {
-				this.result[scope][property].push(value);
-			}
-			else {
-				this.result[scope][property] = [value];
-			}
-
-			let specials = {
-				"box-shadow": [
-					"-moz-box-shadow",
-					"-webkit-box-shadow"
-				],
-				"border-radius": [
-					"-moz-border-radius",
-					"-webkit-border-radius"
-				],
-				"border-radius-topleft": [
-					"-moz-border-radius-topleft",
-					"-webkit-border-top-left-radius"
-				],
-				"border-radius-topright": [
-					"-moz-border-radius-topright",
-					"-webkit-border-top-right-radius"
-				],
-				"border-radius-bottomleft": [
-					"-moz-border-radius-bottomleft",
-					"-webkit-border-bottom-left-radius"
-				],
-				"border-radius-bottomright": [
-					"-moz-border-radius-bottomright",
-					"-webkit-border-bottom-right-radius"
-				]
-			}
-
-			let browser_specials = specials[property];
-			for (let j = 0; browser_specials && j < browser_specials.length; j++) {
-				this.addProperty(scope, browser_specials[j], value);
-			}
-		}
-	}
-}
-
-export class ComputedStyle {
-	m_style:CSSStyleDeclaration;
-
-	constructor( style: CSSStyleDeclaration ) {
-		this.m_style = style;
-	}
-
-	/**
-	 * return the raw value
-	 */
-
-	value( name: string ) : string {
-		name = pascalCase( name );
-		return this.m_style[name];
-	}
-
-	/**
-	 * return the interpreted value
-	 */
-	
-	parse( name: string ) : number {
-		name = pascalCase( name );
-		return parseInt( this.m_style[name] );
-	}
-
-	/**
-	 * 
-	 */
-
-	get style( ) {
-		return this.m_style;
-	}
-}