x4js 2.0.35 → 2.1.0-manual

package/src/components/tooltips/tooltips.scss

@@ -1,72 +1,72 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file tooltips.scss
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 R-libre ingenierie
- *
- * Use of this source code is governed by an MIT-style license 
- * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
- **/
-
-@use "../shared.scss";
-
-:root {
-	--tooltip-caption-background: var( --color-primary-a70 );
-	--tooltip-caption-color: white;
-
-	--tooltip-icon-background: white;
-	--tooltip-icon-color: var( --color-primary-a70 );
-
-	--tooltip-background: var( --color-primary-a10 );	//white;
-	--tooltip-color: var( --color-primary-a90 );
-	--tooltip-border: var( --color-primary-a20 );
-}
-
-.x4tooltip {
-	@extend %shadow-xl;
-	
-	display: flex;
-	flex-direction: row;
-	border: none;
-	font-size: 90%;
-	position: absolute;
-
-	border: 1px solid var( --tooltip-border ); 
-	background-color: var( --tooltip-background );
-
-	.x4icon {
-		padding: 2px 4px;
-		svg {
-			max-height: 100%;
-		}
-
-		.fa-primary,
-		.fa-secondary {
-			fill: var( --tooltip-icon-color );	
-		}
-
-		//background-color: var( --tooltip-caption-background );
-		color: var( --tooltip-icon-color );
-		width: 2em;
-		height: 2em;
-	}
-
-	#text {
-		background-color: var( --tooltip-background );
-		color: var( --tooltip-color );
-		padding: 4px;
-	}
-
-	img {
-		max-width: 100px;
-		max-height: 50px;
-		background-color: white;
-		margin: 4px;
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file tooltips.scss
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license 
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+
+@use "../shared.scss";
+
+:root {
+	--tooltip-caption-background: var( --color-primary-a70 );
+	--tooltip-caption-color: white;
+
+	--tooltip-icon-background: white;
+	--tooltip-icon-color: var( --color-primary-a70 );
+
+	--tooltip-background: var( --color-primary-a10 );	//white;
+	--tooltip-color: var( --color-primary-a90 );
+	--tooltip-border: var( --color-primary-a20 );
+}
+
+.x4tooltip {
+	@extend .shadow-xl;
+	
+	display: flex;
+	flex-direction: row;
+	border: none;
+	font-size: 90%;
+	position: absolute;
+
+	border: 1px solid var( --tooltip-border ); 
+	background-color: var( --tooltip-background );
+
+	.x4icon {
+		padding: 2px 4px;
+		svg {
+			max-height: 100%;
+		}
+
+		.fa-primary,
+		.fa-secondary {
+			fill: var( --tooltip-icon-color );	
+		}
+
+		//background-color: var( --tooltip-caption-background );
+		color: var( --tooltip-icon-color );
+		width: 2em;
+		height: 2em;
+	}
+
+	#text {
+		background-color: var( --tooltip-background );
+		color: var( --tooltip-color );
+		padding: 4px;
+	}
+
+	img {
+		max-width: 100px;
+		max-height: 50px;
+		background-color: white;
+		margin: 4px;
+	}
 }

package/src/components/tooltips/tooltips.ts

@@ -1,121 +1,121 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file tooltips.ts
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 R-libre ingenierie
- *
- * Use of this source code is governed by an MIT-style license 
- * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
- **/
-
-import { Component, componentFromDOM, wrapDOM } from '../../core/component';
-import { class_ns, ITipHandler, Point, Rect, Timer, UnsafeHtml, unsafeHtml } from '../../core/core_tools';
-
-import { HBox } from '../boxes/boxes';
-import { Popup, PopupProps } from '../popup/popup';
-import { Icon } from '../icon/icon';
-
-import "./tooltips.scss"
-
-import icon from "./comments-question.svg"
-
-
-let last_hit: HTMLElement = null;
-let tooltip: Tooltip = null;
-let mouse_pos: Point = {x:0, y:0 };
-
-const timer = new Timer( );
-
-export function initTooltips( ) {
-
-	document.addEventListener( "mouseenter", ( ev: MouseEvent ) => {
-		if( ev.target===document ) {
-			return;
-		}
-		
-		const c = wrapDOM( ev.target as HTMLElement );
-		let tt = c.getAttribute( "tooltip" );
-		const ifx = c.queryInterface("tip-handler" ) as ITipHandler;
-		if( ifx ) {
-			tt = ifx.getTip( );
-		}
-
-		if( tt ) {
-			last_hit = ev.target as HTMLElement;
-			const rc = c.getBoundingRect( );
-			showTT( tt, rc, { x:ev.pageX,y:ev.pageY } );
-		}
-
-	}, true );
-
-	document.addEventListener( "mouseleave", ( ev: MouseEvent ) => {
-		//console.log( "leave", ev.target );
-		if( last_hit && ev.target==last_hit ) {
-			last_hit = null;
-			closeTT( );
-		}
-
-	}, true );
-
-	document.addEventListener( "mousemove", ( ev: MouseEvent ) => {
-		if( last_hit ) {
-			mouse_pos = { x:ev.pageX, y:ev.pageY }
-		}
-	});
-}
-
-function showTT( text: string, rc: Rect, pt: Point ) {
-	if( !tooltip ) {
-		tooltip = new Tooltip( { } );
-	}
-
-	timer.setTimeout( null, 300, ( ) => {
-		tooltip.setText( unsafeHtml(text) );
-
-		let y = mouse_pos.y;
-		if( rc.contains(mouse_pos) ) {
-			y = rc.bottom;
-		}
-
-		//tooltip.displayNear( rc, "top left", "bottom left", {x:0,y:4} );
-		tooltip.displayAt( mouse_pos.x+17, y+5 );
-	} );
-}
-
-function closeTT( ) {
-	tooltip.show( false );
-	timer.clearTimeout( null );
-}
-
-/**
- * 
- */
-
-@class_ns( "x4" )
-class Tooltip extends Popup {
-
-	constructor( props: PopupProps ) {
-		super( props );
-
-		this.setContent( 
-			new HBox( {content: [
-				new Icon( { iconId: icon } ),
-				new Component( { id: "text" } )
-			]} )
-		);
-	}
-
-	/**
-	 * 
-	 */
-
-	setText( text: string|UnsafeHtml )	{
-		this.query( "#text" ).setContent( text );
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file tooltips.ts
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license 
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+
+import { Component, componentFromDOM, wrapDOM } from '../../core/component';
+import { class_ns, ITipHandler, Point, Rect, Timer, UnsafeHtml, unsafeHtml } from '../../core/core_tools';
+
+import { HBox } from '../boxes/boxes';
+import { Popup, PopupProps } from '../popup/popup';
+import { Icon } from '../icon/icon';
+
+import "./tooltips.scss"
+
+import icon from "./comments-question.svg"
+
+
+let last_hit: HTMLElement = null;
+let tooltip: Tooltip = null;
+let mouse_pos: Point = {x:0, y:0 };
+
+const timer = new Timer( );
+
+export function initTooltips( ) {
+
+	document.addEventListener( "mouseenter", ( ev: MouseEvent ) => {
+		if( ev.target===document ) {
+			return;
+		}
+		
+		const c = wrapDOM( ev.target as HTMLElement );
+		let tt = c.getAttribute( "tooltip" );
+		const ifx = c.queryInterface("tip-handler" ) as ITipHandler;
+		if( ifx ) {
+			tt = ifx.getTip( );
+		}
+
+		if( tt ) {
+			last_hit = ev.target as HTMLElement;
+			const rc = c.getBoundingRect( );
+			showTT( tt, rc, { x:ev.pageX,y:ev.pageY } );
+		}
+
+	}, true );
+
+	document.addEventListener( "mouseleave", ( ev: MouseEvent ) => {
+		//console.log( "leave", ev.target );
+		if( last_hit && ev.target==last_hit ) {
+			last_hit = null;
+			closeTT( );
+		}
+
+	}, true );
+
+	document.addEventListener( "mousemove", ( ev: MouseEvent ) => {
+		if( last_hit ) {
+			mouse_pos = { x:ev.pageX, y:ev.pageY }
+		}
+	});
+}
+
+function showTT( text: string, rc: Rect, pt: Point ) {
+	if( !tooltip ) {
+		tooltip = new Tooltip( { } );
+	}
+
+	timer.setTimeout( null, 300, ( ) => {
+		tooltip.setText( unsafeHtml(text) );
+
+		let y = mouse_pos.y;
+		if( rc.contains(mouse_pos) ) {
+			y = rc.bottom;
+		}
+
+		//tooltip.displayNear( rc, "top left", "bottom left", {x:0,y:4} );
+		tooltip.displayAt( mouse_pos.x+17, y+5 );
+	} );
+}
+
+function closeTT( ) {
+	tooltip.show( false );
+	timer.clearTimeout( null );
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+class Tooltip extends Popup {
+
+	constructor( props: PopupProps ) {
+		super( props );
+
+		this.setContent( 
+			new HBox( {content: [
+				new Icon( { iconId: icon } ),
+				new Component( { id: "text" } )
+			]} )
+		);
+	}
+
+	/**
+	 * 
+	 */
+
+	setText( text: string|UnsafeHtml )	{
+		this.query( "#text" ).setContent( text );
+	}
 }