@brandup/ui-kit 1.0.1 → 1.0.2

package/README.md

@@ -10,7 +10,7 @@ npm i @brandup/ui-kit@latest
 
 Add `@brandup/ui-kit` middleware to your application.
 
-```
+```TypeScript
 import { ApplicationBuilder } from "@brandup/ui-app";
 import { uiKitMiddlewareFactory } from "@brandup/ui-kit";
 
@@ -105,4 +105,33 @@ Styles for:
 - input[type=text]
 - textarea
 
-See [inputs.less](source/inputs.less) file.
+See [inputs.less](source/inputs.less) file.
+
+### Popups
+
+Popups work with class `ui-popup`.
+
+```HTML
+<button data-command="ui-popup-toggle">Menu1</button>
+<div class="ui-popup"></div>
+
+<button id="menu2">Menu2</button>
+<div id="popup2" class="ui-popup"></div>
+
+<button>Menu3</button>
+<div id="popup2" class="ui-popup"></div>
+```
+
+Open popup by popup and initiator element:
+
+```TypeScript
+PopupManager.open(DOM.getById("popup2"), { initiator: DOM.getById("menu2") });
+```
+
+Open popup by only popup element:
+
+```TypeScript
+PopupManager.open(DOM.getById("popup3"));
+```
+
+If the initiator is specified, then when the popup is opened again, it will be closed.

package/package.json

@@ -22,7 +22,7 @@
   },
   "type": "module",
   "license": "Apache-2.0",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "source/index.ts",
   "types": "source/index.ts",
   "dependencies": {

package/source/common.less

@@ -31,6 +31,15 @@
 	--svg-height: var(--svg-size);
 	--svg-fill: var(--text-color);
 	--svg-stroke: var(--text-color);
+
+	// popup
+
+	--popup-fill: var(--main-background);
+	--popup-border-style: solid;
+	--popup-border-width: 1px;
+	--popup-border-color: #aaa;
+	--popup-border-radius: 5px;
+	--popup-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.12);
 }
 
 // Body styles
@@ -105,4 +114,29 @@ svg {
 	padding-left: var(--content-padding-lr);
 	padding-right: var(--content-padding-lr);
 	box-sizing: border-box;
+}
+
+// Popup styles
+
+.ui-popup {
+	position: absolute;
+	box-sizing: border-box;
+	z-index: 1000;
+	background: var(--popup-fill);
+	border-style: var(--popup-border-style);
+	border-color: var(--popup-border-color);
+	border-width: var(--popup-border-width);
+	border-radius: var(--popup-border-radius);
+	box-shadow: var(--popup-box-shadow);
+	visibility: collapse;
+
+	&.opened {
+		visibility: visible;
+	}
+}
+
+.ui-popup-expanded {
+	& ~ .ui-popup {
+		visibility: visible;
+	}
 }

package/source/index.ts

@@ -1,8 +1,5 @@
-import { Middleware } from "@brandup/ui-app";
+import { UiKitMiddleware } from "./middleware";
+export * from "./popup"
 import "./styles.less";
 
-export const uiKitMiddlewareFactory = (): Middleware => {
-	return {
-		name: "uikit"
-	};
-};
+export const uiKitMiddlewareFactory = () => new UiKitMiddleware();

package/source/middleware.ts

@@ -0,0 +1,23 @@
+import { Middleware, MiddlewareNext, NavigateContext, StartContext } from "@brandup/ui-app";
+import { PopupManager, POPUP_COMMAND, POPUP_CLASS } from "./popup";
+
+export class UiKitMiddleware implements Middleware {
+	name = "uikit";
+
+	start(context: StartContext, next: MiddlewareNext) {
+		context.app.registerCommand(POPUP_COMMAND, context => {
+			if (!context.target.nextElementSibling?.classList.contains(POPUP_CLASS))
+				throw new Error('Not found popup elem.');
+
+			PopupManager.open(context.target.nextElementSibling as HTMLElement, { initiator: context.target });
+		});
+
+		return next();
+	}
+
+	navigate(_context: NavigateContext, next: MiddlewareNext) {
+		PopupManager.close(); // закрываем открытое контекстное меню при навигации
+
+		return next();
+	}
+}

package/source/popup.ts

@@ -0,0 +1,79 @@
+export const POPUP_CLASS = "ui-popup";
+export const POPUP_EXPANDED_CLASS = "ui-popup-expanded";
+export const POPUP_COMMAND = "ui-popup-toggle";
+
+type CurrentPopup = {
+	initiator?: HTMLElement,
+	popup: HTMLElement,
+	closeCallback?: () => void
+};
+
+var current: CurrentPopup | null = null;
+
+const closePopupEventHandler = (e: MouseEvent) => {
+	const target = e.target as HTMLElement;
+	if (target.closest(`.${POPUP_CLASS}`))
+		return; // если клик внутри popup, то делать ничего не нужно
+
+	close();
+
+	const clickedMenuItem = target.closest(`.${POPUP_EXPANDED_CLASS}`);
+	if (clickedMenuItem || target == current?.initiator) {
+		// если клик по тому же элементу, который открыл контекстное меню, то останавливаем обработку клика, чтобы оно не отрылось заново
+
+		e.preventDefault();
+		e.stopImmediatePropagation();
+	}
+};
+
+const close = () => {
+	if (current) {
+		if (current.closeCallback)
+			current.closeCallback();
+
+		current.initiator?.classList.remove(POPUP_EXPANDED_CLASS); // закрываем последнее открытое контекстное меню
+		current.popup.classList.remove("opened");
+	}
+
+	document.body.removeEventListener("click", closePopupEventHandler);
+}
+
+const open = (popupElem: HTMLElement, options?: PopupOptions) => {
+	let newPopup: CurrentPopup = {
+		popup: popupElem,
+		initiator: options?.initiator
+	};
+
+	newPopup.closeCallback = options?.onClose;
+
+	if (newPopup.popup.classList.toggle("opened")) {
+		// это новый popup, открываем его
+
+		newPopup.initiator?.classList.add(POPUP_EXPANDED_CLASS);
+
+		document.body.addEventListener("click", closePopupEventHandler);
+
+		current = newPopup;
+	}
+	else {
+		// данный popup уже открыт, закрываем его
+		close();
+	}
+}
+
+export const PopupManager: IPopupManager = {
+	open,
+	close,
+	isOpened: () => !!current
+};
+
+interface IPopupManager {
+	open: (popupElem: HTMLElement, options?: PopupOptions) => void;
+	close: () => void;
+	isOpened: () => boolean;
+}
+
+interface PopupOptions {
+	initiator?: HTMLElement;
+	onClose?: () => void
+}