x4js 1.6.5 → 2.0.1

package/lib/src/components/popup/popup.ts

@@ -0,0 +1,395 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file popup.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, ComponentEvent, ComponentEvents, ComponentProps, componentFromDOM, makeUniqueComponentId } from "@core/component"
+import { CSizer } from '../sizers/sizer';
+import { Rect, Point } from '@core/core_tools.js';
+
+import "./popup.module.scss"
+
+
+export interface PopupEvents extends ComponentEvents {
+	closed: ComponentEvent;
+	opened: ComponentEvent;
+}
+
+export interface PopupProps extends ComponentProps {
+	modal?: boolean;
+	autoClose?: boolean | string;
+	sizable?: boolean;
+	movable?: boolean;
+}
+
+
+let modal_mask: Component;
+let modal_count = 0;
+
+let modal_stack: Popup[] = [];
+let autoclose_list: Popup[] = [];
+let popup_list:  Popup[] = [];
+
+
+
+/**
+ * 
+ */
+
+export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = PopupEvents> extends Component<P,E> {
+
+	private _isopen = false;
+	private _isshown = false;
+
+	constructor( props: P ) {
+		super( props );
+
+		if( this.props.sizable ) {
+			this._createSizers( );
+		}
+	}
+
+	displayNear( rc: Rect, dst = "top left", src = "top left", offset = {x:0,y:0} ) {
+
+		this.setStyle( { left: "0px", top: "0px" } );	// avoid scrollbar
+		this._show( );									// to compute size
+		
+		let rm = this.getBoundingRect();
+
+		let xref = rc.left;
+		let yref = rc.top;
+
+		if( src.indexOf('right')>=0 ) {
+			xref = (rc.left+rc.width);
+		}
+		else if( src.indexOf('center')>=0 ) {
+			xref = rc.left + rc.width/2;
+		}
+
+		if( src.indexOf('bottom')>=0 ) {
+			yref = rc.bottom;
+		}
+		else if( src.indexOf('middle')>=0 ) {
+			yref = rc.top + rc.height/2;
+		}
+
+		let halign = 'l';
+		if (dst.indexOf('right') >= 0) {
+			xref -= rm.width;
+		}
+		else if( dst.indexOf('center')>=0 ) {
+			xref -= rm.width/2;
+		}
+
+		let valign = 't';
+		if (dst.indexOf('bottom') >= 0) {
+			yref -= rm.height;
+		}
+		else if( dst.indexOf('middle')>=0 ) {
+			yref -= rm.height/2;
+		}
+		
+		if (offset) {
+			xref += offset.x;
+			yref += offset.y;
+		}
+
+		// our parent is body, so take care of the scroll position
+		xref += document.scrollingElement.scrollLeft;
+		yref += document.scrollingElement.scrollTop;
+
+		this.displayAt( xref, yref );
+	}
+
+	/**
+	 * 
+	 */
+
+	displayCenter( ) {
+		this.displayNear( new Rect( window.innerWidth/2, window.innerHeight/2, 0, 0 ), "center middle" );
+	}
+
+	/**
+	 * 
+	 */
+
+	displayAt( x: number, y: number ) {
+		//TODO: check is already visible
+		this.setStyle( {
+			left: x+"px",
+			top: y+"px",
+		})
+
+		this._show( );
+
+		const rc = this.getBoundingRect( );
+		const width = window.innerWidth - 16;
+		const height = window.innerHeight - 16;
+		
+		if( rc.right>width ) {
+			this.setStyleValue( "left", width-rc.width );
+		}
+
+		if( rc.bottom>height ) {
+			this.setStyleValue( "top", height-rc.height );
+		}
+
+		if( this.props.movable ) {
+			const movers = this.queryAll( ".caption-element" );
+			movers.forEach( m => new CMover(m,this) );
+
+			if( this.hasClass("popup-caption") ) {
+				new CMover(this,this);
+			}		
+		}
+
+		this.fire( "opened", {} );
+	}
+
+	private _show( ) {
+		
+		if( this.props.modal && !this._isshown ) {
+			this._showModalMask( );
+			modal_stack.push( this );
+			modal_count++;
+		}
+
+		this._isshown = true;
+		
+		if( this.props.autoClose ) {
+			if( autoclose_list.length==0 ) {
+				document.addEventListener( "pointerdown", this._dismiss );
+			}
+
+			autoclose_list.push( this );
+			this.setData( "close", this.props.autoClose===true ? makeUniqueComponentId() : this.props.autoClose );
+		}
+
+		popup_list.push( this );
+		document.body.appendChild( this.dom );
+
+		this.show( );
+	}
+
+	override show( show = true ) {
+		this._isopen = show;
+		super.show( show );
+	}
+
+	isOpen( ) {
+		return this._isopen;
+	}
+
+	/**
+	 * 
+	 */
+
+	close( ) {
+		document.body.removeChild( this.dom );
+
+		// remove from popup list
+		const idx = popup_list.indexOf( this );
+		console.assert( idx>=0 );
+		popup_list.splice( idx, 1 );
+
+		// remove from auto close list
+		if( this.props.autoClose ) {
+			const idx = autoclose_list.indexOf( this );
+			if( idx>=0 ) {
+				autoclose_list.splice( idx, 1 );
+				if( autoclose_list.length==0 ) {
+					document.removeEventListener( "pointerdown", this._dismiss );
+				}
+			}
+		}
+
+		// update mask
+		if( this.props.modal ) {
+			const top = modal_stack.pop( );
+			console.assert( top==this );
+			this._updateModalMask( );
+		}
+
+		this._isshown = false;
+		this.fire( "closed", {} );
+	}
+
+	/**
+	 * binded
+	 */
+
+	private _dismiss = ( e: UIEvent ) => {
+		const onac = autoclose_list.some( x=> x.dom.contains(e.target as Node) )
+		if( onac ) {
+			return;
+		}
+
+		e.preventDefault( );
+		e.stopPropagation( );
+
+		this.dismiss( );
+	}
+	
+	/**
+	 * dismiss all popup belonging to the same group as 'this'
+	 */
+
+	dismiss( after = false ) {
+
+		if( autoclose_list.length==0 ) {
+			return;
+		}
+
+		const cgroup = this.getData( "close" );
+		const inc_group: Popup[] = [];
+		const excl_group: Popup[] = [];
+		
+		let aidx = -1;
+		if( after ) {
+			aidx = autoclose_list.indexOf( this );
+		}
+
+		autoclose_list.forEach( (x,idx) => {
+			const group = x.getData( "close" );
+			if( group==cgroup && idx>aidx) {
+				inc_group.push( x );
+			}
+			else {
+				excl_group.push( x );
+			}
+		})
+
+		const list = inc_group.reverse( );
+		autoclose_list = excl_group;
+		if( autoclose_list.length==0 ) {
+			document.removeEventListener( "pointerdown", this._dismiss );
+		}
+		
+		list.forEach( x => x.close() );
+	}
+
+	/**
+	 * 
+	 */
+
+	private _showModalMask( ) {
+		
+		if( !modal_mask ) {
+			modal_mask = new Component( {
+				cls: "x4modal-mask",
+				domEvents: {
+					click: this._dismiss
+				}
+			});
+		}
+
+		modal_mask.show( true );
+		document.body.insertAdjacentElement( "beforeend", modal_mask.dom );
+	}
+
+	/**
+	 * 
+	 */
+
+	private _updateModalMask( ) {
+		if( --modal_count == 0 ) {
+			modal_mask.show( false );
+		}
+		else {
+			this.dom.insertAdjacentElement( "beforebegin", modal_mask.dom );
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	private _createSizers( ) {
+		this.appendContent( [
+			new CSizer( "top" ),
+			new CSizer( "bottom" ),
+			new CSizer( "left" ),
+			new CSizer( "right" ),
+			new CSizer( "top-left" ),
+			new CSizer( "bottom-left" ),
+			new CSizer( "top-right" ),
+			new CSizer( "bottom-right" ),
+		])
+	}
+}
+
+
+/**
+ * 
+ */
+
+class CMover {
+	private ref: Component;
+	private delta: Point;
+	private self: boolean;
+
+	constructor( x: Component, ref?: Component ) {
+
+		this.self = ref ? true : false;
+
+		x.addDOMEvent( "pointerdown", ( e: PointerEvent ) => {
+			if( this.self && e.target!=x.dom ) {
+				return;
+			}
+
+			x.setCapture( e.pointerId );
+
+			this.ref = ref ?? componentFromDOM( x.dom.parentElement );
+
+			this.delta = {x:0,y:0};
+			const rc = this.ref.getBoundingRect();
+
+			this.delta.x = e.pageX-rc.left;
+			this.delta.y = e.pageY-rc.top;
+		});
+
+		x.addDOMEvent( "pointerup", ( e: PointerEvent ) => {
+			x.releaseCapture( e.pointerId );
+			this.ref = null;
+		});
+
+		x.addDOMEvent( "pointermove", ( e: PointerEvent ) => {
+			this._onMouseMove( e );
+		});
+	}
+
+	private _onMouseMove( e: PointerEvent ) {
+		if( !this.ref ) {
+			return;
+		}
+
+		const pt = { x: e.pageX-this.delta.x, y: e.pageY-this.delta.y };
+		const rc = this.ref.getBoundingRect( );
+
+		let nr: any = {
+		};
+
+		this.ref.setStyle( {
+			top: pt.y+"",
+			left: pt.x+"",
+		} );
+		
+		e.preventDefault( );
+		e.stopPropagation( );
+	}
+}
+
+
+
+

package/lib/src/components/progress/progress.module.scss

@@ -0,0 +1,57 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file progress.module.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.
+ **/
+
+:root {
+	--progress-background: var( --border );
+	--progress-color: var( --accent-background );
+}
+
+.x4progress {
+	background-color: var( --progress-background );
+	position: relative;
+	height: 6px;
+	margin: 0 5px;
+	border-radius: 3px;
+
+	.bar {
+		position: absolute;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		width: 0;
+
+		background-color: var( --progress-color );
+		border-radius: 3px;
+
+		transition: width ease 0.2s;
+	}
+
+	&.indeterm .bar {
+		background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);
+		background-size: 20px 20px;
+		animation: slide 1s linear infinite;
+	}
+}
+
+@keyframes slide {
+	0% {
+        background-position: 0 0
+    }
+
+    to {
+        background-position: 2.5rem 0
+    }
+}

package/lib/src/components/progress/progress.ts

@@ -0,0 +1,43 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file progress.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, ComponentProps } from '@core/component';
+
+import "./progress.module.scss";
+
+interface ProgressProps extends ComponentProps {
+	value: number;
+	min: number;
+	max: number;
+}
+
+
+export class Progress extends Component<ProgressProps> {
+
+	private _bar: Component;
+
+	constructor( props: ProgressProps ) {
+		super( props );
+
+		this.setContent( this._bar=new Component( { cls: "bar" } ) );
+		this.setValue( props.value );
+	}
+
+	setValue( value: number ) {
+		const perc = value / (this.props.max-this.props.min) * 100;
+		this._bar.setStyleValue( "width", perc+"%" );
+	}
+}

package/lib/src/components/rating/rating.module.scss

@@ -0,0 +1,23 @@
+:root {
+	--rating: var( --border );
+	--rating-hover: var( --border-hover );
+	--rating-checked: var( --accent-background );
+}
+
+.x4rating {
+	gap: 2px;
+
+	.item {
+		width: 16px;
+		height: 16px;
+		color: var( --rating );
+	}
+
+	.item:hover {
+		color: var( --rating-hover );
+	}
+
+	.item.checked {
+		color: var( --rating-checked );
+	}
+}

package/lib/src/components/rating/rating.ts

@@ -0,0 +1,125 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file rating.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, ComponentEvents, componentFromDOM, ComponentProps, EvChange } from '@core/component.js';
+import { EventCallback } from '@core/core_events.js';
+import { HBox } from '../boxes/boxes.js';
+import { Input } from '../input/input.js';
+import { Icon } from '../icon/icon.js';
+
+import "./rating.module.scss"
+import star_icon from "./star-sharp-solid.svg"
+
+interface RatingEventMap extends ComponentEvents {
+	change: EvChange;
+}
+
+
+
+export interface RatingProps extends ComponentProps {
+	steps?: number;
+	value?: number;
+	icon?: string;
+	name?: string; 
+
+	change?: EventCallback<EvChange>;
+}
+
+export class Rating extends HBox<RatingProps,RatingEventMap> {
+
+	private m_els: Component[];
+	private m_input: Input;
+	
+	constructor( props: RatingProps ) {
+		super( props );
+
+		props.steps = props.steps ?? 5;
+		this._update( );
+	}
+
+	private _update( ) {
+		
+		const props = this.props;
+
+		let shape = props.icon ?? star_icon;
+		let value = props.value ?? 0;
+
+		this.m_input = new Input( {
+			type: "text",
+			hidden: true,
+			name: props.name,
+			value: ''+value
+		} );
+
+		this.addDOMEvent( 'click', (e) => this._on_click(e) );
+
+		this.m_els = [];
+		for( let i=0; i<props.steps; i++ ) {
+			
+			let cls = 'item';
+			if( i+1 <= value ) {
+				cls += ' checked';
+			}
+
+			let c = new Icon( { 
+				cls,
+				iconId: shape,
+			} );
+
+			c.setInternalData( "value", i );
+
+			this.m_els.push( c );
+		}
+
+		this.m_els.push( this.m_input );
+		this.setContent( this.m_els );
+	}
+
+	getValue( ) {
+		return this.props.value ?? 0;
+	}
+
+	setValue( v: number ) {
+		this.props.value = v;
+
+		for( let c=0; c<this.props.steps; c++ ) {
+			this.m_els[c].setClass( 'checked', this.m_els[c].getInternalData('value')<=v );
+		}
+
+		this.m_input.setValue( ''+this.props.value );
+	}
+
+	setSteps( n: number ) {
+		this.props.steps = n;
+		this._update( );
+	}
+
+	setShape( icon: string ) {
+		this.removeClass( this.props.icon );
+		this.props.icon = icon;
+	}
+
+	private _on_click( ev: MouseEvent ) {
+		let item = componentFromDOM( ev.target as HTMLElement );
+		item = item.parentElement( Icon );
+		
+		if( item ) {
+			this.setValue( item.getInternalData("value") );
+		}
+
+		this.fire( 'change', {value:this.props.value} );
+	} 
+}

package/lib/src/components/rating/star-sharp-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M374.6 164L306.1 34.3 288.1 0 270 34.3 201.5 164 57.1 189l-38.2 6.6 27 27.8L148.1 328.5 127.2 473.6 121.7 512l34.8-17.1 131.6-64.7 131.6 64.7L454.4 512l-5.5-38.4L428 328.5 530.2 223.4l27-27.8L519 189 374.6 164zM492 216.8l-86.9 89.4-11 11.3 2.2 15.6 17.8 123.5-111.9-55-14.1-6.9-14.1 6.9L162 456.5l17.8-123.5 2.2-15.6-11-11.3L84.1 216.8 207 195.5l15.5-2.7 7.3-13.9L288.1 68.6l58.2 110.3 7.3 13.9 15.5 2.7L492 216.8z"/></svg>

package/lib/src/components/rating/star-sharp-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M288.1 0l86.5 164 182.7 31.6L428 328.5 454.4 512 288.1 430.2 121.7 512l26.4-183.5L18.9 195.6 201.5 164 288.1 0z"/></svg>

package/lib/src/components/shared.scss

@@ -0,0 +1,76 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file shared.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.
+ **/
+
+.box {
+	position: relative;
+}
+
+.hbox {
+	@extend .box;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.vbox {
+	@extend .box;
+	display: flex;
+	flex-direction: column;
+}
+
+
+.fit {
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+}
+
+
+.rel-fit {
+	position: relative;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+}
+
+.flex {
+	flex-grow: 1;
+	flex-shrink: 0;
+	flex-basis: 0;
+	min-width: 0;
+}
+
+
+// from tailwind
+
+.shadow-sm {
+	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.shadow-md {
+	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+.shadow-lg {
+	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.shadow-xl {
+	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+}