x4js 2.0.12 → 2.0.14

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

@@ -1,21 +1,28 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file image.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.
- **/
-
-
-.x-image {
-	position: relative;
-	background: none;
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file image.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 {
+	--image-border-drop-hover: var( --accent-background );
+}
+
+.x4image {
+	position: relative;
+	background: none;
+
+	&.hit {
+		border-color: var( --image-border-drop-hover ) !important;
+	}
 }

package/lib/src/components/image/image.ts

@@ -1,67 +1,168 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file image.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.js';
-
-import "./image.module.scss"
-
-export interface ImageProps extends ComponentProps {
-	src: string;
-	fit?: "contain" | "cover" | "fill" | "scale-down";
-	position?: string;
-	lazy?: boolean;
-	alt?: string;
-	draggable?: boolean;
-}
-
-/**
- * 
- */
-
-export class Image extends Component<ImageProps> {
-
-	private _img: Component;
-
-	constructor( props: ImageProps ) {
-		super( props );
-
-		this._img = new Component( {
-			tag: "img",
-			attrs: {
-				loading: props.lazy,
-				alt: props.alt,
-				draggable: props.draggable ?? false,
-			},
-			style: {
-				width: "100%",
-				height: "100%",
-				objectFit: props.fit,
-				objectPosition: props.position,
-			}
-		})
-		
-		this.setContent( this._img );
-		this.setImage( props.src );
-	}
-
-	/**
-	 * 
-	 */
-	
-	setImage( src: string ) {
-		this._img.setAttribute( "src", src );
-	}
-}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file image.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 { class_ns } from '../../core/core_tools';
+import { Component, ComponentEvents, ComponentProps } from '../../core/component';
+import { EventCallback, CoreEvent } from '../../core/core_events.js';
+import { dragManager } from '../../core/core_dragdrop.js';
+
+import { EvDropChange, FileDialog } from '../filedrop/filedrop';
+import { Menu } from '../menu/menu';
+
+
+
+import "./image.module.scss"
+import { _tr } from '@core/core_i18n.js';
+
+
+interface ImageEvents extends ComponentEvents {
+	change: EvDropChange;
+	clear: CoreEvent;
+}
+export interface ImageProps extends ComponentProps {
+	src: string;
+	fit?: "contain" | "cover" | "fill" | "scale-down";
+	position?: string;
+	lazy?: boolean;
+	alt?: string;
+	draggable?: boolean;
+
+	candrop?: boolean;
+	accept?: string;	// ex: 'image/*'
+
+	change?: EventCallback<EvDropChange>;
+	clear?: EventCallback<CoreEvent>;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class Image<P extends ImageProps = ImageProps, E extends ImageEvents = ImageEvents> extends Component<P,E> {
+
+	private _img: Component;
+
+	constructor( props: P ) {
+		super( props );
+
+		this._img = new Component( {
+			tag: "img",
+			attrs: {
+				loading: props.lazy,
+				alt: props.alt,
+				draggable: props.draggable ?? false,
+			},
+			style: {
+				width: "100%",
+				height: "100%",
+				objectFit: props.fit,
+				objectPosition: props.position,
+			}
+		})
+		
+		this.setContent( this._img );
+		this.setImage( props.src );
+
+		if( props.candrop ) {
+			this.mapPropEvents( props, "change", "clear" );
+
+			let fileDialog = new FileDialog( {
+				accept: props.accept,
+				multiple: false,
+				callback: ( files ) => {
+					this.fire( "change", { files } );
+				},
+			});
+
+			this.appendContent( fileDialog );
+
+			this.addDOMEvent( "click", ( ) => fileDialog.showDialog() );
+
+			const filterInput = ( _: Component, data: DataTransfer ) => {
+				// check that input is of type image
+				if( data.items?.length ) {
+					const type = data.items[0].type;
+					if( /image\/.*/.test(type) ) {
+						return true;
+					}
+				}	
+
+				return false;
+			}
+
+			dragManager.registerDropTarget( this, async ( cmd, el, infos ) => {
+				if( cmd=="enter" ) {
+					this.addClass( "hit" );
+				}
+				else if( cmd=='leave' ) {
+					this.removeClass( "hit" );
+				}
+				else if( cmd=='drop' ) {
+					if( infos.data.files && infos.data.files.length>0 ) {
+						const files = infos.data.files;
+						this.fire( "change", { files } );
+					}
+				}
+			}, filterInput );
+
+			this.addDOMEvent( "contextmenu", ( ev ) => {
+				const menu = new Menu( {
+					items: [
+						{ text: _tr.global.cut, click: ( ) => {
+							this.fire( "clear", {} );
+						} },
+					]
+				});
+
+				menu.displayAt( ev.pageX, ev.pageY );
+				ev.stopPropagation( );
+				ev.preventDefault( );
+			});
+		}
+	}
+
+	/**
+	 * 
+	 */
+	
+	setImage( src: string ) {
+		if( src ) {
+			this._img.setAttribute( "src", src );
+		}
+		else {
+			this.clear( );
+		}
+	}
+
+	/**
+	 * 
+	 */
+	
+	setBase64( mime: string, base64: string ) {
+		this.setImage( "data:"+mime+";base64,"+base64 );
+	}
+
+	/**
+	 * 
+	 */
+
+	clear( ) {
+		this._img.setAttribute( "src", 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' );
+	}
+}
+
+

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

@@ -1,69 +1,74 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file input.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 {
-	--input-sel-background: var( --accent-background );
-	--input-sel-color: var( --accent-color );
-	--input-placeholder: var( --disabled-background );
-	--input-error: var( --alert-background );
-}
-
-input.x4input {
-	font: inherit;
-	outline: none;
-	
-	border: none;
-
-	&::selection {
-		background-color: var( --input-sel-background );
-		color: var( --input-sel-color );
-	}
-	
-	&[type="text"], 
-	&[type="password"],
-	&[type="email"] {
-		padding: 8px 4px;
-	}
-
-	&[type="checkbox"]:checked,
-	&[type="radio"]:checked {
-		accent-color: var( --color-80 );
-	}
-
-	&[type="range"] {
-		accent-color: var( --color-60 );
-	}
-
-	&::placeholder {
-		color: var( --input-placeholder );
-		font-style: italic;
-		font-weight: 90%;
-
-	}
-
-	&[type="password"] {
-		font-weight: bold;
-	}
-
-	&:disabled {
-		background-color: transparent;
-	}
-
-	&:invalid {
-		color: var( --input-error );
-	}
-}
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file input.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 {
+	--input-sel-background: var( --accent-background );
+	--input-sel-color: var( --accent-color );
+	--input-placeholder: var( --disabled-background );
+	--input-error: var( --alert-background );
+
+	--input-checkbox-color: var( --accent-background );
+}
+
+input.x4input {
+	font: inherit;
+	outline: none;
+	
+	border: none;
+
+	&::selection {
+		background-color: var( --input-sel-background );
+		color: var( --input-sel-color );
+	}
+	
+	&[type="text"], 
+	&[type="password"],
+	&[type="date"],
+	&[type="number"],
+	&[type="email"] {
+		padding: 4px 4px;
+	}
+
+	&[type="checkbox"]:checked,
+	&[type="radio"]:checked {
+		accent-color: var( --input-checkbox-color );
+		padding: 2px;
+	}
+
+	&[type="range"] {
+		accent-color: var( --input-checkbox-color );
+	}
+
+	&::placeholder {
+		color: var( --input-placeholder );
+		font-style: italic;
+		font-weight: 90%;
+
+	}
+
+	&[type="password"] {
+		font-weight: bold;
+	}
+
+	&:disabled {
+		background-color: transparent;
+	}
+
+	&:invalid {
+		color: var( --input-error );
+	}
+}
+