inviton-powerduck 0.0.178 → 0.0.180

package/components/modal/modal-utils.ts

@@ -136,6 +136,100 @@ export class ModalUtils {
 		}
 	}
 
+	static bindModalBottomSheetHandle(getModal: () => HTMLElement, hideModal: () => void) {
+		if ((getModal() as any)?._dragBound) {
+			return;
+		}
+
+		setTimeout(() => {
+			const modal = getModal() as HTMLElement;
+			const modalDialog = modal.querySelector('.modal-dialog') as HTMLElement;
+			const dragHandle = modal.querySelector('.drag-handle');
+
+			let startY = 0;
+			let currentY = 0;
+			let isDragging = false;
+			const threshold = 100;
+			const cancelDragging = () => {
+				isDragging = false;
+				modal.classList.remove('modal-is-dragging');
+			};
+
+			const startDragging = () => {
+				isDragging = true;
+				modal.classList.add('modal-is-dragging');
+			};
+
+			const onMove = (y) => {
+				const translateY = Math.max(y - startY, 0);
+				modalDialog.style.transform = `translateY(${translateY}px)`;
+			};
+
+			const endDrag = () => {
+				cancelDragging();
+				const dragDistance = currentY - startY;
+
+				if (dragDistance > threshold) {
+					hideModal();
+				} else {
+					modalDialog.style.transform = 'translateY(0)';
+				}
+			};
+
+			// Touch events
+			dragHandle.addEventListener('touchstart', (e) => {
+				startY = (e as TouchEvent).touches[0].clientY;
+				startDragging();
+			});
+
+			dragHandle.addEventListener('touchmove', (e) => {
+				if (!isDragging) {
+					return;
+				}
+
+				currentY = (e as TouchEvent).touches[0].clientY;
+				onMove(currentY);
+			});
+
+			dragHandle.addEventListener('touchend', endDrag);
+
+			// Mouse events
+			dragHandle.addEventListener('mousedown', (e) => {
+				startY = (e as MouseEvent).clientY;
+				startDragging();
+
+				const onMouseMove = (e) => {
+					if (!isDragging) {
+						return;
+					}
+
+					currentY = e.clientY;
+					onMove(currentY);
+					e.preventDefault();
+					e.stopPropagation();
+					e.stopImmediatePropagation();
+				};
+
+				const onMouseUp = () => {
+					endDrag();
+					globalState.removeEventListener('mousemove', onMouseMove);
+					globalState.removeEventListener('mouseup', onMouseUp);
+				};
+
+				globalState.addEventListener('mousemove', onMouseMove);
+				globalState.addEventListener('mouseup', onMouseUp);
+			});
+
+			// Reset on modal hide
+			modal.addEventListener('hidden.bs.modal', () => {
+				cancelDragging();
+				modalDialog.style.transform = '';
+			});
+
+			(modal as any)._dragBound = true;
+		}, 100);
+	}
+
 	private static _getModalJquery(modalElem: Element | IVue): JQuery {
 		return globalState.jQuery(modalElem as any);
 	}

package/components/modal/modal.tsx

@@ -122,98 +122,10 @@ class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
 			return;
 		}
 
-		const modal = this.$refs.modalRoot as HTMLElement;
-		if ((modal as any)?._dragBound) {
-			return;
-		}
-
-		setTimeout(() => {
-			const modal = this.$refs.modalRoot as HTMLElement;
-			const modalDialog = modal.querySelector('.modal-dialog') as HTMLElement;
-			const dragHandle = modal.querySelector('.drag-handle');
-
-			let startY = 0;
-			let currentY = 0;
-			let isDragging = false;
-			const threshold = 100;
-			const cancelDragging = () => {
-				isDragging = false;
-				modal.classList.remove('modal-is-dragging');
-			};
-
-			const startDragging = () => {
-				isDragging = true;
-				modal.classList.add('modal-is-dragging');
-			};
-
-			const onMove = (y) => {
-				const translateY = Math.max(y - startY, 0);
-				modalDialog.style.transform = `translateY(${translateY}px)`;
-			};
-
-			const endDrag = () => {
-				cancelDragging();
-				const dragDistance = currentY - startY;
-
-				if (dragDistance > threshold) {
-					this.hide();
-				} else {
-					modalDialog.style.transform = 'translateY(0)';
-				}
-			};
-
-			// Touch events
-			dragHandle.addEventListener('touchstart', (e) => {
-				startY = (e as TouchEvent).touches[0].clientY;
-				startDragging();
-			});
-
-			dragHandle.addEventListener('touchmove', (e) => {
-				if (!isDragging) {
-					return;
-				}
-
-				currentY = (e as TouchEvent).touches[0].clientY;
-				onMove(currentY);
-			});
-
-			dragHandle.addEventListener('touchend', endDrag);
-
-			// Mouse events
-			dragHandle.addEventListener('mousedown', (e) => {
-				startY = (e as MouseEvent).clientY;
-				startDragging();
-
-				const onMouseMove = (e) => {
-					if (!isDragging) {
-						return;
-					}
-
-					currentY = e.clientY;
-					onMove(currentY);
-					e.preventDefault();
-					e.stopPropagation();
-					e.stopImmediatePropagation();
-				};
-
-				const onMouseUp = () => {
-					endDrag();
-					globalState.removeEventListener('mousemove', onMouseMove);
-					globalState.removeEventListener('mouseup', onMouseUp);
-				};
-
-				globalState.addEventListener('mousemove', onMouseMove);
-				globalState.addEventListener('mouseup', onMouseUp);
-			});
-
-			// Reset on modal hide
-			modal.addEventListener('hidden.bs.modal', () => {
-				cancelDragging();
-				modalDialog.style.transform = '';
-			});
-
-			(modal as any)._dragBound = true;
-		}, 100);
+		ModalUtils.bindModalBottomSheetHandle(
+			() => this.$refs.modalRoot as HTMLElement,
+			() => this.hide()
+		)
 	}
 
 	treatMobileAsBottomSheet(): boolean {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "inviton-powerduck",
 	"type": "module",
-	"version": "0.0.178",
+	"version": "0.0.180",
 	"files": [
 		"app/",
 		"common/",