x4js 2.0.12 → 2.0.14

package/lib/src/components/sizers/sizer.ts

@@ -1,120 +1,131 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file sizer.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 } from '../../core/component';
-import { Point } from '../../core/core_tools.js';
-
-import "./sizer.module.scss"
-
-/**
- * 
- */
-
-interface EvSizeChange extends ComponentEvent {
-	size: number;
-}
-
-interface CSizerEvent extends ComponentEvents {
-	resize: EvSizeChange;
-}
-
-
-export class CSizer extends Component<ComponentProps,CSizerEvent> {
-
-	private _type: string;
-	private _ref: Component;
-	private _delta: Point;
-
-	constructor( type: string, target?: Component ) {
-		super( {} );
-
-		this._type = type;
-		this.addClass( type );
-
-		this.addDOMEvent( "pointerdown", ( e: PointerEvent ) => {
-			this.setCapture( e.pointerId );
-			this._ref = target ?? componentFromDOM( this.dom.parentElement );
-
-			this._delta = {x:0,y:0};
-			const rc = this._ref.getBoundingRect();
-
-			if( this._type.includes("left") ) {
-				this._delta.x = e.pageX-rc.left;
-			}
-			else {
-				this._delta.x = e.pageX-(rc.left+rc.width);
-			}
-
-			if( this._type.includes("top") ) {
-				this._delta.y = e.pageY-rc.top;
-			}
-			else {
-				this._delta.y = e.pageY-(rc.top+rc.height);
-			}
-		});
-
-		this.addDOMEvent( "pointerup", ( e: PointerEvent ) => {
-			this.releaseCapture( e.pointerId );
-			this._ref = null;
-		});
-
-		this.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 = {};
-		let horz = true;
-
-		if( this._type.includes("top") ) {
-			nr.top = pt.y,
-			nr.height = (rc.top+rc.height)-pt.y;
-			horz = false;
-		}
-
-		if( this._type.includes("bottom") ) {
-			//nr.top = rc.top;
-			nr.height = (pt.y-rc.top);
-			horz = false;
-		}
-
-		if( this._type.includes("left") ) {
-			nr.left = pt.x;
-			nr.width = ((rc.left+rc.width)-pt.x);
-		}
-
-		if( this._type.includes("right") ) {
-			//nr.left = rc.left;
-			nr.width = (pt.x-rc.left);
-		}
-
-		this._ref.setStyle( nr );
-
-		const nrc = this._ref.getBoundingRect( );
-		this.fire( "resize", { size: horz ? nrc.width : nrc.height })
-
-		e.preventDefault( );
-		e.stopPropagation( );
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file sizer.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 } from '../../core/component';
+import { class_ns, Point } from '../../core/core_tools.js';
+
+import "./sizer.module.scss"
+
+/**
+ * 
+ */
+
+interface EvSizeChange extends ComponentEvent {
+	size: number;
+}
+
+interface CSizerEvent extends ComponentEvents {
+	resize: EvSizeChange;
+	start: ComponentEvent;
+	stop: ComponentEvent;
+}
+
+type SizerType = "left" | "top" | "right" | "bottom";
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class CSizer extends Component<ComponentProps,CSizerEvent> {
+
+	private _type: SizerType;
+	private _ref: Component;
+	private _delta: Point;
+
+	constructor( type: SizerType, target?: Component ) {
+		super( {} );
+
+		this._type = type;
+		this.addClass( type );
+
+		this.addDOMEvent( "pointerdown", ( e: PointerEvent ) => {
+			this.setCapture( e.pointerId );
+			this._ref = target ?? componentFromDOM( this.dom.parentElement );
+
+			this._delta = {x:0,y:0};
+			const rc = this._ref.getBoundingRect();
+
+			if( this._type.includes("left") ) {
+				this._delta.x = e.pageX-rc.left;
+			}
+			else {
+				this._delta.x = e.pageX-(rc.left+rc.width);
+			}
+
+			if( this._type.includes("top") ) {
+				this._delta.y = e.pageY-rc.top;
+			}
+			else {
+				this._delta.y = e.pageY-(rc.top+rc.height);
+			}
+
+			this.fire( "start", { })
+		});
+
+		this.addDOMEvent( "pointerup", ( e: PointerEvent ) => {
+			this.fire( "stop", { })
+			this.releaseCapture( e.pointerId );
+			this._ref = null;
+		});
+
+		this.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 = {};
+		let horz = true;
+
+		if( this._type.includes("top") ) {
+			nr.top = pt.y,
+			nr.height = (rc.top+rc.height)-pt.y;
+			horz = false;
+		}
+
+		if( this._type.includes("bottom") ) {
+			//nr.top = rc.top;
+			nr.height = (pt.y-rc.top);
+			horz = false;
+		}
+
+		if( this._type.includes("left") ) {
+			nr.left = pt.x;
+			nr.width = ((rc.left+rc.width)-pt.x);
+		}
+
+		if( this._type.includes("right") ) {
+			//nr.left = rc.left;
+			nr.width = (pt.x-rc.left);
+		}
+
+		this._ref.setStyle( nr );
+
+		const nrc = this._ref.getBoundingRect( );
+		this.fire( "resize", { size: horz ? nrc.width : nrc.height })
+
+		e.preventDefault( );
+		e.stopPropagation( );
+	}
 }

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

@@ -1,71 +1,118 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file slider.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 {
-	--slider-track: var( --border );
-	--slider-thumb-background: var( --accent-background );
-	--slider-thumb-border: var( --accent-background );
-	--slider-thumb-border-focus: var( --border-focus );
-}
-
-.x4slider {
-	height: 28px;
-	outline: none;
-	padding: 10px 12px;
-	touch-action: none;
-	margin: 5px 0;
-
-	.track {
-		background-color: var( --slider-track );
-		width: 100%;
-
-		position: relative;
-		top: 50%;
-		height: 3px;
-	}
-
-	.bar {
-		position: absolute;
-		width: 61%;
-		height: 3px;
-		//padding: 4px 0;
-		background-color: var( --color-60 );
-	}
-
-	.thumb {
-		position: absolute;
-		left: 61%;
-		outline: none;
-		
-		background-color: var( --slider-thumb-background );
-		border: 3px solid var( --slider-thumb-border );
-		border-radius: 8px;
-
-		top: 50%;
-		width: 16px;
-		height: 16px;
-
-		transform: translate(-50%,-50%);
-		cursor: pointer;
-	}
-
-	&:focus .thumb {
-		outline-offset: 3px;
-    	outline-color: var(--slider-thumb-border-focus);
-		outline-style: solid;
-    	outline-width: 1px;
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file slider.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 {
+	--slider-track: var( --border );
+	--slider-thumb-background: var( --accent-background );
+	--slider-thumb-border: var( --accent-background );
+	--slider-thumb-border-focus: var( --border-focus );
+}
+
+.x4slider {
+	outline: none;
+	touch-action: none;
+	overflow: hidden;
+
+	&:not(.vertical) {
+		padding: 10px 12px;
+		margin: 5px 0;
+		height: 28px;
+		
+		.track {
+			background-color: var( --slider-track );
+			width: 100%;
+
+			position: relative;
+			top: 50%;
+			height: 3px;
+		}
+
+		.bar {
+			position: absolute;
+			width: 61%;
+			height: 3px;
+			//padding: 4px 0;
+			//background-color: var( --color-60 );
+		}
+
+		.thumb {
+			position: absolute;
+			left: 61%;
+			outline: none;
+			
+			background-color: var( --slider-thumb-background );
+			border: 3px solid var( --slider-thumb-border );
+			border-radius: 8px;
+
+			top: 50%;
+			width: 16px;
+			height: 16px;
+
+			transform: translate(-50%,-50%);
+			cursor: pointer;
+		}
+	}
+
+	&.vertical {
+		padding: 12px 10px;
+		margin: 0 5px;
+		width: 28px;
+
+		.track {
+			background-color: var( --slider-track );
+			height: 100%;
+	
+			position: relative;
+			left: 50%;
+			width: 3px;
+		}
+	
+		.bar {
+			position: absolute;
+			width: 3px;
+			height: 61%;
+			//padding: 4px 0;
+			//background-color: var( --color-60 );
+		}
+	
+		.thumb {
+			position: absolute;
+			left: 50%;
+			outline: none;
+			
+			background-color: var( --slider-thumb-background );
+			border: 3px solid var( --slider-thumb-border );
+			border-radius: 8px;
+	
+			top: 61%;
+			width: 16px;
+			height: 16px;
+	
+			transform: translate(-50%,-50%);
+			cursor: pointer;
+		}
+	
+	}
+
+
+	
+	&:focus .thumb {
+		outline-offset: 3px;
+    	outline-color: var(--slider-thumb-border-focus);
+		outline-style: solid;
+    	outline-width: 1px;
+	}
 }