alttiri / popup-enhance Goto Github PK

PopupEnhance

It's a pretty simple JavaScript (TS) library (mostly, for personal use) to enhance a popup to make it movable and resizable.

It's only 34 lines to make it movable: makeMovable ↓ and 38 lines to make it resizable: makeResizable ↓

Also, there is en extra code to store the move / resize state in localStorage (popup-enh-extra.ts).

The required CSS is located here: popup.css.

It's available on npm:

npm i @alttiri/popup-enhance

Demo

https://alttiri.github.io/popup-enhance/ (see: main.ts).

How to use

import {getPopupEnh, makeFocusable} from "@alttiri/popup-enhance";

const {makeMovableEx} = getPopupEnh("fancy-demo-app");

const popupElem  = document.querySelector(".popup");
const handleElem = popupElem.querySelector(".popup-header");

const {reset} = makeMovableEx(popupElem, "popup-1", {handle: handleElem});
makeFocusable(popupElem, handleElem);

"fancy-demo-app" — localStorage' prefix for keys
"popup-1" — localStorage' key

The recommended HTML:

<body>
    <div id="app"> ... </div>
    <div class="popup-root">
        <div class="popup" id="popup-1">
            <div class="popup-header">Popup Title</div>
            <div class="popup-content"> ... </div>
        </div>
        <div class="popup" id="popup-2"> ... </div>
    </div>
</body>

The recommended CSS:

// JS imports:
import "@alttiri/popup-enhance/css/popup.css";
import "@alttiri/popup-enhance/css/popup-content.css";
// Or CSS import:
// @import "@alttiri/popup-enhance/css/popup.css";
// @import "@alttiri/popup-enhance/css/popup-content.css";

`makeMovable`

popup-enhance/src/popup-enh-core.ts

Lines 29 to 63 in 606e394

 export function makeMovable(element: HTMLElement, { 

 handle: hdl, onMove, onStop, state, reset, position = "absolute" 

 }: MovableOpts = {}) { 

 state && assignStyleState(element, state); // Restore position 

 const handle = hdl || element; 

 handle.style.userSelect = "none"; 

 handle.style.touchAction = "none"; 

 element.style.position = position; 

 handle.addEventListener("pointerdown", (event: PointerEvent) => { 

 event.preventDefault(); // To prevent bugs when all text on the page is selected (Ctrl + A) 

 const offsetY = event.clientY - parseInt(getComputedStyle(element).top); 

 const offsetX = event.clientX - parseInt(getComputedStyle(element).left); 

 function _onMove(event: PointerEvent) { 

 if (!handle.hasPointerCapture(event.pointerId)) { 

 handle.setPointerCapture(event.pointerId); 

 } 

 state = { 

 top: `${event.clientY - offsetY}px`, 

 left: `${event.clientX - offsetX}px`, 

 }; 

 assignStyleState(element, state); 

 onMove?.(state); 

 } 

 function _onStop() { 

 removeEventListener("pointermove", _onMove); 

 state && onStop?.(state); 

 } 

 addEventListener("pointermove", _onMove, {passive: true}); 

 addEventListener("pointerup", _onStop, {once: true}); 

 }); 

 return { reset: () => { state && resetStyleState(element, state); reset?.(); } }; 

 }

`makeResizable`

popup-enhance/src/popup-enh-core.ts

Lines 76 to 114 in 606e394

 export function makeResizable(element: HTMLElement, { 

 minW = 64, minH = 64, size = 16, onMove, onStop, state, reset 

 }: ResizableOpts = {}) { 

 state && assignStyleState(element, state); // Restore size 

 const lrCorner = document.createElement("div"); 

 lrCorner.style.cssText = 

 `width: ${size}px; height: ${size}px; border-radius: ${(size / 2)}px; ` + 

 `bottom: ${-(size / 2)}px; right: ${-(size / 2)}px; ` + 

 `position: absolute; background-color: transparent; cursor: se-resize; touch-action: none;`; 

 element.append(lrCorner); 

 lrCorner.addEventListener("pointerdown", event => { 

 event.preventDefault(); // To prevent (Ctrl + A) bug 

 lrCorner.setPointerCapture(event.pointerId); 

 const offsetX = event.clientX - element.offsetLeft - parseInt(getComputedStyle(element).width); 

 const offsetY = event.clientY - element.offsetTop - parseInt(getComputedStyle(element).height); 

 function _onMove(event: PointerEvent) { 

 let x = event.clientX - element.offsetLeft - offsetX; 

 let y = event.clientY - element.offsetTop - offsetY; 

 if (x < minW) { x = minW; } 

 if (y < minH) { y = minH; } 

 state = { 

 width: `${x}px`, 

 height: `${y}px`, 

 }; 

 assignStyleState(element, state); 

 onMove?.(state); 

 } 

 function _onStop() { 

 lrCorner.removeEventListener("pointermove", _onMove); 

 state && onStop?.(state); 

 } 

 lrCorner.addEventListener("pointermove", _onMove, {passive: true}); 

 lrCorner.addEventListener("lostpointercapture", _onStop, {once: true}); 

 }); 

 return { reset: () => { state && resetStyleState(element, state); reset?.(); } }; 

 }

*.d.ts

export type MoveStyleProps = "top" | "left";
export type MoveState = Record<MoveStyleProps, `${string}px`>;
export type ResizeStyleProps = "width" | "height";
export type ResizeState = Record<ResizeStyleProps, `${string}px`>;
export type AnyStyleProps = MoveStyleProps | ResizeStyleProps;
export type AnyState = MoveState | ResizeState;
export type MovableOpts = {
    handle?: HTMLElement;
    onMove?: (state: MoveState) => void;
    onStop?: (state: MoveState) => void;
    state?: MoveState;
    reset?: Function;
    position?: "absolute" | "relative";
};
export declare function makeMovable(element: HTMLElement, { handle: hdl, onMove, onStop, state, reset, position }?: MovableOpts): {
    reset: () => void;
};
export type ResizableOpts = {
    minW?: number;
    minH?: number;
    size?: number;
    onMove?: (state: ResizeState) => void;
    onStop?: (state: ResizeState) => void;
    state?: ResizeState;
    reset?: Function;
};
export declare function makeResizable(element: HTMLElement, { minW, minH, size, onMove, onStop, state, reset }?: ResizableOpts): {
    reset: () => void;
};

type StoreStateOpt<T extends AnyState, S extends string> = {
    id: S extends "" ? never : S;
    onMove?: (state: T) => void;
    onStop?: (state: T) => void;
};
type StoreStateReturn<T extends AnyState> = {
    onMove?: (state: T) => void;
    onStop?: (state: T) => void;
    state?: T;
    reset: () => void;
};
export declare function storeStateInLS<T extends AnyState, S extends string>({ id: lsName, onMove, onStop }: StoreStateOpt<T, S>): StoreStateReturn<T>;
export declare function getPopupEnh<S extends string>(appName: S extends "" ? never : S): {
    /**
     * Use `position: "relative"` option if you want to open multiple popups at once,
     * and you do not want they overlap each other. However, don't use it with resizable popups.
     */
    makeMovableEx<S_1 extends string>(element: HTMLElement, id: S_1 extends "" ? never : S_1, opt?: MovableOpts): {
        reset: () => void;
    };
    makeResizableEx<S_1 extends string>(element: HTMLElement, id: S_1 extends "" ? never : S_1, opt?: ResizableOpts): {
        reset: () => void;
    };
};
/**
 * Makes the element focusable, adds `"focus"` class.
 * Specify the drag `handle` (if exists) to run `"focus"` listener callback on `"pointerdown"` on it.
 */
export declare function makeFocusable(element: HTMLElement, handle?: HTMLElement): void;

alttiri / popup-enhance Goto Github PK

popup-enhance's Introduction

PopupEnhance

Demo

How to use

`makeMovable`

`makeResizable`

See also

*.d.ts

popup-enhance's People

Contributors

Watchers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	export function makeMovable(element: HTMLElement, {
	handle: hdl, onMove, onStop, state, reset, position = "absolute"
	}: MovableOpts = {}) {
	state && assignStyleState(element, state); // Restore position

	const handle = hdl \|\| element;
	handle.style.userSelect = "none";
	handle.style.touchAction = "none";
	element.style.position = position;

	handle.addEventListener("pointerdown", (event: PointerEvent) => {
	event.preventDefault(); // To prevent bugs when all text on the page is selected (Ctrl + A)
	const offsetY = event.clientY - parseInt(getComputedStyle(element).top);
	const offsetX = event.clientX - parseInt(getComputedStyle(element).left);

	function _onMove(event: PointerEvent) {
	if (!handle.hasPointerCapture(event.pointerId)) {
	handle.setPointerCapture(event.pointerId);
	}
	state = {
	top: `${event.clientY - offsetY}px`,
	left: `${event.clientX - offsetX}px`,
	};
	assignStyleState(element, state);
	onMove?.(state);
	}
	function _onStop() {
	removeEventListener("pointermove", _onMove);
	state && onStop?.(state);
	}
	addEventListener("pointermove", _onMove, {passive: true});
	addEventListener("pointerup", _onStop, {once: true});
	});
	return { reset: () => { state && resetStyleState(element, state); reset?.(); } };
	}

	export function makeResizable(element: HTMLElement, {
	minW = 64, minH = 64, size = 16, onMove, onStop, state, reset
	}: ResizableOpts = {}) {
	state && assignStyleState(element, state); // Restore size

	const lrCorner = document.createElement("div");
	lrCorner.style.cssText =
	`width: ${size}px; height: ${size}px; border-radius: ${(size / 2)}px; ` +
	`bottom: ${-(size / 2)}px; right: ${-(size / 2)}px; ` +
	`position: absolute; background-color: transparent; cursor: se-resize; touch-action: none;`;
	element.append(lrCorner);

	lrCorner.addEventListener("pointerdown", event => {
	event.preventDefault(); // To prevent (Ctrl + A) bug
	lrCorner.setPointerCapture(event.pointerId);
	const offsetX = event.clientX - element.offsetLeft - parseInt(getComputedStyle(element).width);
	const offsetY = event.clientY - element.offsetTop - parseInt(getComputedStyle(element).height);

	function _onMove(event: PointerEvent) {
	let x = event.clientX - element.offsetLeft - offsetX;
	let y = event.clientY - element.offsetTop - offsetY;
	if (x < minW) { x = minW; }
	if (y < minH) { y = minH; }
	state = {
	width: `${x}px`,
	height: `${y}px`,
	};
	assignStyleState(element, state);
	onMove?.(state);
	}
	function _onStop() {
	lrCorner.removeEventListener("pointermove", _onMove);
	state && onStop?.(state);
	}
	lrCorner.addEventListener("pointermove", _onMove, {passive: true});
	lrCorner.addEventListener("lostpointercapture", _onStop, {once: true});
	});
	return { reset: () => { state && resetStyleState(element, state); reset?.(); } };
	}