x4js 1.4.53 → 1.5.0

package/lib/ts_src/menu.ts

@@ -0,0 +1,425 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|  
+*  /__/ \__\   |_|
+*        
+* @file menu.ts
+* @author Etienne Cochard 
+*
+* Copyright (c) 2019-2022 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 { CEventMap, Component, CProps } from './component'
+import { EvClick, EventCallback } from './x4events'
+
+import { Action } from './action'
+
+import { Popup, PopupProps } from './popup'
+import { Icon, IconID } from './icon'
+import { Label } from './label'
+import { HLayout } from './layout'
+import { isString, getMousePos } from './tools'
+
+// ============================================================================
+// [MENU]
+// ============================================================================
+
+export class MenuSeparator extends Component {
+}
+
+export class MenuTitle extends Label {
+}
+
+
+/**
+ * Standard Menu
+ */
+
+export type MenuOrSep = MenuItem | MenuSeparator | MenuTitle;
+
+export interface MenuProps extends PopupProps {
+	items?: MenuOrSep[];
+}
+
+export class Menu extends Popup<MenuProps>
+{
+	private static watchCount: number = 0;
+	private static rootMenu: Menu = null;
+
+	protected m_subMenu: Menu;
+	protected m_opener: MenuItem;
+	protected m_virtual: boolean;
+	protected m_lock: number;
+
+	constructor(props: MenuProps, opener?: MenuItem) {
+		super(props);
+
+		this.addClass('@shadow');
+
+		this.m_opener = opener;
+		this.m_virtual = false;
+		this.m_lock = 0;
+
+		this.enableMask(false);
+	}
+
+	lock(yes: boolean) {
+		this.m_lock += yes ? 1 : -1;
+	}
+
+	setVirtual() {
+		this.m_virtual = true;
+	}
+
+	setSubMenu(menu: Menu) {
+		this.m_subMenu = menu;
+	}
+
+	hideSubMenu() {
+		if (this.m_subMenu) {
+			this.m_subMenu.m_opener._close();
+			this.m_subMenu.hide();
+			this.m_subMenu = null;
+		}
+	}
+
+	/** @ignore */
+	render(props: MenuProps) {
+		this.setContent(props.items);
+	}
+
+	/**
+	* 
+	*/
+
+	public show() {
+		if (!this.m_virtual) {
+			Menu._addMenu(this);
+		}
+
+		super.show();
+	}
+
+	/**
+	 * 
+	*/
+
+	public close() {
+
+		if (!this.dom && !this.m_virtual) {
+			return;
+		}
+
+		if (this.m_opener) {
+			this.m_opener._close();
+		}
+
+		if (this.m_subMenu) {
+			this.m_subMenu.close();
+			this.m_subMenu = null;
+		}
+
+		super.close();
+		Menu._removeMenu();
+	}
+
+	/**
+	 * 
+	 */
+
+	public clear() {
+		this.m_props.items = [];
+	}
+
+	/**
+	* @internal
+	*/
+
+	public static _addMenu(menu) {
+		//console.log( 'addmenu' );
+		if (Menu.watchCount == 0) {
+			Menu.rootMenu = menu;
+			x4document.addEventListener('mousedown', Menu._mouseWatcher);
+		}
+
+		Menu.watchCount++;
+	}
+
+	public static _removeMenu() {
+		//console.log( 'removemenu' );
+		console.assert(Menu.watchCount > 0);
+		Menu.watchCount--;
+
+		if (Menu.watchCount == 0) {
+			x4document.removeEventListener('mousedown', Menu._mouseWatcher);
+		}
+	}
+
+	private static _mouseWatcher(ev: MouseEvent) {
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		let elOn = <HTMLElement>ev.target;
+
+		while (elOn) {
+			// is mouse on a menu
+			let mouseon = Component.getElement(elOn);
+			if (mouseon && (mouseon instanceof Menu /*|| elOn.$el instanceof Menubar*/)) {
+				return;
+			}
+
+			elOn = elOn.parentElement;
+		}
+
+		Menu._discardAll();
+	}
+
+	/**
+	* hide all the visible menus
+	*/
+
+	public static _discardAll() {
+		if (Menu.rootMenu) {
+			Menu.rootMenu.close();
+			Menu.rootMenu = null;
+		}
+	}
+
+	public displayAt(ev: UIEvent): void;
+	public displayAt(x: number, y?: number, align?: string, offset?: { x, y }): void;
+	public displayAt(...args) {
+
+		if (!this.m_lock) {
+			Menu._discardAll();
+		}
+
+		let x, y, align, offset;
+
+		if (args.length == 1) {
+			({ x, y } = getMousePos(args[0], true));
+		}
+		else {
+			[x, y, align, offset] = args;
+		}
+
+		if (!align) {
+			align = 'top left';
+		}
+
+		super.displayAt(x, y, align, offset);
+	}
+}
+
+/**
+ * MENU ITEM
+ */
+
+interface MenuItemEventMap extends CEventMap {
+	click: EvClick;
+}
+
+export interface MenuItemProps extends CProps {
+	itemId?: any;
+	text?: string;
+	icon?: IconID;		// pass -1 to avoid space for icon
+	items?: MenuOrSep[];
+	checked?: boolean;
+	cls?: string;
+	click?: EventCallback<EvClick>;	// shortcut to events: { click ... }
+
+	action?: Action;
+}
+
+
+
+export class MenuItem extends Component<MenuItemProps, MenuItemEventMap> {
+
+	private m_menu: Menu;
+	private m_isOpen: boolean;
+	private m_action: Action;
+
+	constructor(action: Action);
+	constructor(text: string, click: EventCallback<EvClick>);
+	constructor(props: MenuItemProps);
+	constructor(a, b?) {
+
+		if (a instanceof Action) {
+			super({
+				click: () => { a.fire(); }
+			});
+
+			this.m_action = a;
+		}
+		else if (isString(a)) {
+			super({
+				text: a,
+				click: b
+			});
+		}
+		else {
+			super(a);
+		}
+
+		this.mapPropEvents(this.m_props, 'click');
+
+		this.m_menu = null;
+		this.m_isOpen = false;
+
+		this.setDomEvent('mousedown', (e) => this._mousedown(e));
+		this.setDomEvent('click', (e) => this._click(e));
+	}
+
+	/** @ignore */
+	render(props: MenuItemProps) {
+
+		let icon = props.icon ?? 0;
+		let text = props.text;
+
+		if (props.checked !== undefined) {
+			icon = props.checked ? 'var( --x4-icon-check )' : 0;
+		}
+
+		if (this.m_action) {
+			if (!icon) {
+				icon = this.m_action.props.icon;
+			}
+
+			if (text === undefined) {
+				text = this.m_action.props.text;
+			}
+		}
+
+		let popIco = null;
+		if (this.isPopup) {
+			this.addClass('@popup-menu-item');
+			popIco = new Icon({ icon: "var( --x4-icon-chevron-right )", cls: "pop-mark" });
+		}
+
+		if (!text && !icon) {
+			this.addClass('@separator');
+		}
+
+		if (props.cls) {
+			this.addClass(props.cls);
+		}
+
+		this.setTag('a');
+		//@bug: do not kill focus on click 
+		//	this.setAttribute( 'tabindex', '0' );
+
+		this.setContent([
+			icon < 0 ? null : new Icon({ icon }),
+			new Label({ flex: 1, text }),
+			popIco
+		]);
+	}
+
+	get id(): any {
+		return this.m_props.itemId;
+	}
+
+	get text(): string {
+		return this.m_props.text;
+	}
+
+	get isPopup(): boolean {
+		return !!this.m_props.items;
+	}
+
+	public _close() {
+		this.removeClass('@opened');
+		this.m_isOpen = false;
+	}
+
+	protected _click(ev: MouseEvent) {
+		if (!this.isPopup) {
+			this.emit('click', EvClick());
+			Menu._discardAll();
+		}
+	}
+
+	protected _mousedown(ev: MouseEvent) {
+
+		if (this.isPopup) {
+			if (!this.m_menu) {
+				this.m_menu = new Menu({ items: this.m_props.items }, this);
+			}
+
+			let doClose = this.m_isOpen;
+
+			// if parent menu has an opened sub menu, close it
+			let parent_menu = Component.getElement(this.dom, Menu);
+
+			if (parent_menu) {
+				parent_menu.hideSubMenu();
+			}
+
+			if (!doClose) {
+				if (parent_menu) {
+					parent_menu.setSubMenu(this.m_menu);
+				}
+
+				this.m_isOpen = true;
+
+				let rc = this.getBoundingRect();
+
+				this.m_menu.lock(true);
+				if (parent_menu) {
+					// standard menu
+					this.m_menu.displayAt(rc.right, rc.top);
+				}
+				else {
+					// menubar / menubutton
+					this.m_menu.displayAt(rc.left, rc.bottom);
+				}
+				this.m_menu.lock(false);
+				this.addClass('@opened');
+			}
+
+			ev.preventDefault();
+		}
+	}
+}
+
+/**
+ * 
+ */
+
+export class MenuBar extends HLayout {
+	protected m_items: MenuOrSep[];
+
+	constructor(props: MenuProps, opener?: MenuItem) {
+		super(props);
+
+		console.assert(false, 'not imp');
+
+		this.addClass('@shadow');
+		this.m_items = props.items;
+	}
+
+	/** @ignore */
+	render() {
+		this.setContent(this.m_items);
+	}
+}

package/lib/ts_src/messagebox.ts

@@ -0,0 +1,203 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|  
+*  /__/ \__\   |_|
+*        
+* @file messagebox.ts
+* @author Etienne Cochard 
+*
+* Copyright (c) 2019-2022 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 { Dialog, DialogProps, EvBtnClick } from './dialog'
+import { FormButtons } from './form'
+import { asap, HtmlString, isHtmlString, isString } from './tools'
+import { HLayout } from './layout'
+import { Icon, IconID } from './icon'
+import { Label } from './label'
+import { TextEdit } from './textedit'
+
+/**
+ * [ MESSAGEBOX ] -----------------------------------------------------------------
+ */
+
+export interface MessageBoxProps extends DialogProps {
+	message: string | HtmlString;	// always allow html
+	click: (button: string) => void;
+}
+
+export class MessageBox extends Dialog<MessageBoxProps>
+{
+	m_label: Label;
+
+	constructor(props: MessageBoxProps) {
+
+		// remove overloaded elements from DialogBoxProps
+		let icon = props.icon ?? 'var( --x4-icon-exclamation )';	// todo: resolve that
+		props.icon = undefined;
+
+		let buttons: FormButtons = props.buttons === undefined ? ['ok'] : props.buttons;
+		props.buttons = undefined;
+
+		super(props);
+
+		let msg = props.message;
+
+		this.form.updateContent(new HLayout({
+			style: { padding: 8 },
+			content: [
+				icon ? new Icon({ cls: 'icon', icon }) : null,
+				this.m_label = new Label({ cls: 'text', text: msg, multiline: true })
+			]
+		}), buttons);
+
+		this.on('btnClick', (ev: EvBtnClick) => {
+			// no prevent default -> always close the messagebox
+			if (!this.m_props.click) {
+				return;
+			}
+
+			asap(() => {
+				this.m_props.click( ev.button );
+			});
+		});
+	}
+
+	set text(txt: string | HtmlString) {
+		this.m_label.text = txt;
+	}
+
+
+	/**
+	 * display a messagebox
+	 */
+
+	static show(props: string | HtmlString | MessageBoxProps): MessageBox {
+
+		let msg;
+
+		if (isString(props) || isHtmlString(props)) {
+			msg = new MessageBox({ message: props, click: () => { } });
+		}
+		else {
+			msg = new MessageBox(props);
+		}
+
+		msg.show();
+		return msg;
+	}
+
+	/**
+	 * display an alert message
+	 */
+
+	static alert(text: string | HtmlString, title: string = null) {
+		new MessageBox({
+			cls: 'warning',
+			title,
+			message: text,
+			buttons: ['ok'],
+			click: () => { },
+		}).show();
+	}
+}
+
+
+// :: PrompDialogBox  ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+export interface PromptBoxProps extends DialogProps {
+	message: string | HtmlString;
+	value?: string;		// default input value
+	icon?: IconID;
+
+	click: (value: string) => void;
+}
+
+export class PromptDialogBox extends Dialog<PromptBoxProps> {
+
+	m_edit: TextEdit;
+
+	constructor(props: PromptBoxProps) {
+
+		// remove overloaded elements from DialogBoxProps
+		//let icon = props.icon;	// ?? 'cls(far fa-comment-check)';	// todo: resolve that
+		//props.icon = undefined;
+		props.buttons = undefined;
+
+		props.width = props.width ?? 500;
+		super(props);
+
+		this.form.updateContent(
+			new HLayout({
+				cls: 'panel',
+				content: [
+					//icon ? new Icon({
+					//	cls: 'icon',
+					//	icon: icon
+					//}) : null,
+					this.m_edit = new TextEdit({
+						flex: 1,
+						autoFocus: true,
+						label: props.message,
+						value: props.value
+					}),
+				]
+			}),
+			['ok', 'cancel']
+		);
+
+		if (props.click) {
+			this.on('btnClick', (ev: EvBtnClick) => {
+
+				if (ev.button === 'ok') {
+					// no prevent default -> always close the messagebox
+					// asap to allow
+					asap(() => {
+						this.m_props.click(this.m_edit.value);
+					});
+				}
+			});
+		}
+	}
+
+	set text(txt: string | HtmlString) {
+		this.m_edit.label = txt;
+	}
+
+	/**
+	 * display a messagebox
+	 */
+
+	static show(props: string | HtmlString | PromptBoxProps, inputCallback?: (input: string) => void): PromptBoxProps {
+
+		let msg;
+
+		if (isString(props) || isHtmlString(props)) {
+			msg = new PromptDialogBox({ message: props, click: inputCallback });
+		}
+		else {
+			msg = new PromptDialogBox(props);
+		}
+
+		msg.show();
+		return msg;
+	}
+}

package/lib/ts_src/panel.ts

@@ -0,0 +1,86 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|  
+*  /__/ \__\   |_|
+*        
+* @file panel.ts
+* @author Etienne Cochard 
+*
+* Copyright (c) 2019-2022 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 { Component, CProps, ComponentContent, ContainerProps, ContainerEventMap } from './component'
+import { VLayout, HLayout } from './layout'
+import { Label } from './label'
+import { Icon, IconID } from './icon';
+
+// ============================================================================
+// [PANEL]
+// ============================================================================
+
+export interface  PanelProps<E extends ContainerEventMap = ContainerEventMap> extends ContainerProps<E> {
+	icon?: IconID;
+	title: string;
+	gadgets?: Component[];
+	sens?: 'horizontal' | 'vertical';	// vertical by default
+	bodyStyle?: any;
+}
+
+export class Panel<T extends PanelProps = PanelProps, E extends ContainerEventMap = ContainerEventMap> extends VLayout<T,E> {
+	private m_ui_title: Label;
+	private m_ui_body: Component;
+	
+	constructor( props: T ) {
+		super( props );
+
+		const sens = props?.sens=='horizontal' ? '@hlayout' : '@vlayout';
+
+		//todo: cannot be called twice do to content overload
+		this.m_ui_title = new Label({cls: 'title', text: this.m_props.title});
+		this.m_ui_body = new Component( { cls: 'body '+sens, content: this.m_props.content, style: props.bodyStyle } );
+	}
+
+	/** @ignore */	
+	render( ) {
+		const gadgets = this.m_props.gadgets ?? [];
+		const icon = this.m_props.icon ? new Icon( { icon: this.m_props.icon}) : null;
+
+		super.setContent( [ 
+			new HLayout( {
+				cls: 'title',
+				content: [
+					icon,
+					this.m_ui_title, 
+					...gadgets
+				]
+			}),
+			this.m_ui_body
+		] );
+	}
+
+	setContent( els: ComponentContent ) {
+		this.m_ui_body.setContent( els );
+	}
+
+	set title( text: string ) {
+		this.m_ui_title.text = text;
+	}
+}