x4js 1.4.51 → 1.4.53

package/src/menu.ts

@@ -1,425 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|  
-*  /__/ \__\   |_|
-*        
-* @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/src/messagebox.ts

@@ -1,203 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|  
-*  /__/ \__\   |_|
-*        
-* @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/src/panel.ts

@@ -1,86 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|  
-*  /__/ \__\   |_|
-*        
-* @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;
-	}
-}