@vnejs/plugins.views.screens.gallery 0.1.5

package/const/events.js

@@ -0,0 +1,13 @@
+export const SUBSCRIBE_EVENTS = {
+  OPEN: "vne:gallery:open",
+  CHECK: "vne:gallery:check",
+  CLEAR: "vne:gallery:clear",
+
+  SHOW: "vne:gallery:show",
+  HIDE: "vne:gallery:hide",
+  PAGE_SET: "vne:gallery:page_set",
+  TYPE_SET: "vne:gallery:type_set",
+  UPDATE: "vne:gallery:update",
+  PRELOAD: "vne:gallery:preload",
+  CHOOSE: "vne:gallery:choose",
+};

package/const/params.js

@@ -0,0 +1,32 @@
+export const TABS = {};
+
+export const BACKGROUND = "save";
+
+export const TRANSITION = 300;
+export const ZINDEX = 4000;
+
+export const LOC_LABEL = "gallery";
+
+const [ITEM_WIDTH, ITEM_HEIGHT, ITEM_GAP] = [800, 450, 120];
+
+export const VIEW_PROPS = {
+  screen: { withBackgroundDark: true, zIndex: ZINDEX, transition: TRANSITION },
+  close: {
+    position: { right: 120, top: 90 },
+    svg: { size: 60 },
+  },
+  controls: {
+    position: { top: 240, left: 120 },
+    controls: { flexDirection: "column", flexGap: 60, textSize: 96 },
+  },
+  items: {
+    position: { top: 240, right: 120 },
+    flex: { gap: ITEM_GAP, withWrap: true, width: 2 * ITEM_GAP + 3 * ITEM_WIDTH },
+    stub: { width: ITEM_WIDTH, height: ITEM_HEIGHT },
+    item: { width: ITEM_WIDTH, height: ITEM_HEIGHT, withHover: true },
+  },
+  pages: { position: { bottom: 120, right: 120 } },
+};
+
+export const ROWS = 3;
+export const COLUMNS = 3;

package/index.js

@@ -0,0 +1,10 @@
+import { regPlugin } from "@vnejs/shared";
+
+import { SUBSCRIBE_EVENTS } from "./const/events";
+import * as params from "./const/params";
+
+import { GalleryController } from "./modules/controller";
+import { Gallery } from "./modules/gallery";
+import { GalleryView } from "./modules/view";
+
+regPlugin("GALLERY", { params, events: SUBSCRIBE_EVENTS }, [GalleryController, Gallery, GalleryView]);

package/modules/controller.js

@@ -0,0 +1,165 @@
+import { ModuleController } from "@vnejs/module.components";
+
+export class GalleryController extends ModuleController {
+  name = "gallery.controller";
+
+  updateEvent = this.EVENTS.GALLERY.UPDATE;
+
+  bgName = this.PARAMS.GALLERY.BACKGROUND;
+
+  maxPagesCount = {};
+
+  emitHide = () => this.emit(this.EVENTS.GALLERY.HIDE);
+
+  initRowAndColumns = () => this.updateStateAndViewFast({ currentRow: 0, currentColumn: 0 });
+  incRow = () => {
+    if (this.state.currentRow === null || this.state.currentColumn === null) return this.initRowAndColumns();
+
+    const maxRows = this.PARAMS.GALLERY.ROWS;
+
+    if (this.state.currentRow + 1 < maxRows) {
+      this.updateStateAndView({ currentRow: this.state.currentRow + 1 });
+    } else if (this.state.currentPage + 1 < this.state.pages) {
+      this.updateState({ currentRow: 0 });
+      this.updatePageAndType(this.state.currentPage + 1, false, true);
+    }
+  };
+  decRow = () => {
+    if (this.state.currentRow === null || this.state.currentColumn === null) return this.initRowAndColumns();
+
+    const maxRows = this.PARAMS.GALLERY.ROWS;
+
+    if (this.state.currentRow !== 0) {
+      this.updateStateAndView({ currentRow: this.state.currentRow - 1 });
+    } else if (this.state.currentPage > 0) {
+      this.updateState({ currentRow: maxRows - 1 });
+      this.updatePageAndType(this.state.currentPage - 1, false, true);
+    }
+  };
+  incColumn = () => {
+    if (this.state.currentRow === null || this.state.currentColumn === null) return this.initRowAndColumns();
+
+    const maxColumns = this.PARAMS.GALLERY.COLUMNS;
+
+    if (this.state.currentColumn + 1 < maxColumns) {
+      this.updateStateAndView({ currentColumn: this.state.currentColumn + 1 });
+    } else if (this.state.currentPage + 1 < this.state.pages) {
+      this.updateState({ currentColumn: 0 });
+      this.updatePageAndType(this.state.currentPage + 1, false, true);
+    }
+  };
+  decColumn = () => {
+    if (this.state.currentRow === null || this.state.currentColumn === null) return this.initRowAndColumns();
+
+    const maxColumns = this.PARAMS.GALLERY.COLUMNS;
+
+    if (this.state.currentColumn !== 0) {
+      this.updateStateAndView({ currentColumn: this.state.currentColumn - 1 });
+    } else if (this.state.currentPage > 0) {
+      this.updateState({ currentColumn: maxColumns - 1 });
+      this.updatePageAndType(this.state.currentPage - 1, false, true);
+    }
+  };
+  accept = () => this.emit(this.EVENTS.GALLERY.CHOOSE, { index: this.state.currentColumn + this.state.currentRow * this.PARAMS.GALLERY.COLUMNS });
+  onPrevTab = () => {
+    const keys = Object.keys(this.PARAMS.GALLERY.TABS);
+    const currentTypeIndex = keys.findIndex((key) => key === this.state.currentType);
+    const type = currentTypeIndex === 0 ? keys[keys.length - 1] : keys[(currentTypeIndex - 1) % keys.length];
+
+    this.emit(this.EVENTS.GALLERY.TYPE_SET, { type });
+  };
+  onNextTab = () => {
+    const keys = Object.keys(this.PARAMS.GALLERY.TABS);
+    const currentTypeIndex = keys.findIndex((key) => key === this.state.currentType);
+    const type = currentTypeIndex === keys.length - 1 ? keys[0] : keys[(currentTypeIndex + 1) % keys.length];
+
+    this.emit(this.EVENTS.GALLERY.TYPE_SET, { type });
+  };
+
+  controls = {
+    [this.CONST.CONTROLS.BUTTONS.BACK]: this.emitHide,
+    [this.CONST.CONTROLS.BUTTONS.MENU]: this.emitHide,
+    [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: this.emitHide,
+    [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: this.decRow,
+    [this.CONST.CONTROLS.BUTTONS.ARROW_RIGHT]: this.incColumn,
+    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incRow,
+    [this.CONST.CONTROLS.BUTTONS.ARROW_LEFT]: this.decColumn,
+    [this.CONST.CONTROLS.BUTTONS.TAB_PREV]: this.onPrevTab,
+    [this.CONST.CONTROLS.BUTTONS.TAB_NEXT]: this.onNextTab,
+    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: this.accept,
+    [this.CONST.CONTROLS.BUTTONS.INTERACT]: this.accept,
+  };
+  controlsIndex = this.PARAMS.GALLERY.ZINDEX;
+
+  subscribe = () => {
+    this.on(this.EVENTS.GALLERY.SHOW, this.onShow);
+    this.on(this.EVENTS.GALLERY.HIDE, this.onHide);
+    this.on(this.EVENTS.GALLERY.PAGE_SET, this.onPageSet);
+    this.on(this.EVENTS.GALLERY.TYPE_SET, this.onTypeSet);
+    this.on(this.EVENTS.GALLERY.PRELOAD, this.onPreload);
+
+    this.on(this.EVENTS.MEMORY.CLEARED, this.onMemoryCleared);
+
+    this.on(this.EVENTS.STATE.CLEAR, this.onHide);
+
+    this.on(this.EVENTS.SYSTEM.STARTED, this.onStarted);
+  };
+  init = () => {
+    this.itemsOnPage = this.PARAMS.GALLERY.ROWS * this.PARAMS.GALLERY.COLUMNS;
+
+    this.updateState({ currentType: Object.keys(this.PARAMS.GALLERY.TABS)[0], currentPage: 0 });
+  };
+
+  beforeShow = async () => {
+    this.updateState({ bgSrc: (await this.loadBgMedia()).src, currentRow: null, currentColumn: null });
+
+    return this.updatePageAndType(0, Object.keys(this.PARAMS.GALLERY.TABS)[0], false);
+  };
+  afterHide = () => this.setDefaultState();
+
+  onStarted = () => Object.keys(this.PARAMS.GALLERY.TABS).forEach(this.calcMaxPageCount);
+  onPreload = () => Promise.all([this.loadBgMedia(), this.getItemsInfo(Object.keys(this.PARAMS.GALLERY.TABS)[0], 0).map(this.mapTabContent)]);
+  onMemoryCleared = () => {
+    if (!this.state.isShow) return;
+
+    const { currentPage = 0, currentType = "" } = this.state;
+
+    const promises = [this.loadBgMedia(), ...this.getItemsInfo(currentType, currentPage).map(this.mapTabContent)];
+
+    if (currentPage > 0) promises.push(...this.getItemsInfo(currentType, currentPage - 1).map(this.mapTabContent));
+    if (currentPage + 1 < this.maxPagesCount[currentType]) promises.push(...this.getItemsInfo(currentType, currentPage + 1).map(this.mapTabContent));
+
+    Object.keys(this.PARAMS.GALLERY.TABS).forEach((type) => type !== currentType && promises.push(...this.getItemsInfo(type, 0).map(this.mapTabContent)));
+
+    return Promise.all(promises);
+  };
+
+  onPageSet = ({ page } = {}) => page !== this.state.currentPage && this.updatePageAndType(page);
+  onTypeSet = ({ type } = {}) => type !== this.state.currentType && this.updatePageAndType(0, type);
+
+  updatePageAndType = async (page, type, isUpdateView = true) => {
+    this.updateState({ currentPage: page });
+    if (type) this.updateState({ currentType: type, pages: this.maxPagesCount[type], currentColumn: null, currentRow: null });
+
+    const currentItems = await Promise.all(this.getItemsInfo(this.state.currentType, this.state.currentPage).map(this.mapTabContent));
+
+    while (currentItems.length < this.itemsOnPage) currentItems.push({ isStub: true });
+    this.updateState({ currentItems });
+    if (isUpdateView) await this.updateViewFast();
+
+    this.emit(this.EVENTS.MEMORY.CLEAR);
+  };
+
+  mapTabContent = async ({ check, mediaType, name, fullName } = {}) => {
+    const isOpened = await this.emitOne(this.EVENTS.GALLERY.CHECK, { key: check });
+    const src = isOpened ? (await this.loadImageMedia(name, mediaType, this.shared.settings[this.SETTINGS.LAYER.QUALITY])).src : "";
+
+    return { isOpened, fullName, src, mediaType };
+  };
+
+  getItemsInfo = (type, page) => this.PARAMS.GALLERY.TABS[type].content.slice(page * this.itemsOnPage, (page + 1) * this.itemsOnPage);
+
+  calcMaxPageCount = (type) => {
+    this.maxPagesCount[type] = Math.ceil(this.PARAMS.GALLERY.TABS[type].content.length / this.itemsOnPage);
+  };
+}

package/modules/gallery.js

@@ -0,0 +1,19 @@
+import { Module } from "@vnejs/module";
+
+const STORAGE_VALUE = 1;
+
+const isEqualStorageValueFunc = (value) => value === STORAGE_VALUE;
+
+export class Gallery extends Module {
+  name = "gallery";
+
+  subscribe = () => {
+    this.on(this.EVENTS.GALLERY.OPEN, this.onOpen);
+    this.on(this.EVENTS.GALLERY.CHECK, this.onCheck);
+    this.on(this.EVENTS.GALLERY.CLEAR, this.onClear);
+  };
+
+  onOpen = ({ key } = {}) => this.emit(this.EVENTS.STORAGE.SET, { module: this.name, key, value: STORAGE_VALUE });
+  onCheck = ({ key } = {}) => this.emitOne(this.EVENTS.STORAGE.GET, { module: this.name, key }).then(isEqualStorageValueFunc);
+  onClear = () => this.emit(this.EVENTS.STORAGE.RM_ALL, { module: this.name });
+}

package/modules/view.js

@@ -0,0 +1,14 @@
+import { ModuleView } from "@vnejs/module.components";
+
+import { render } from "../view";
+
+export class GalleryView extends ModuleView {
+  name = "gallery.view";
+
+  locLabel = this.PARAMS.GALLERY.LOC_LABEL;
+  animationTime = this.PARAMS.GALLERY.TRANSITION;
+  updateEvent = this.EVENTS.GALLERY.UPDATE;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
+}

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.views.screens.gallery",
+  "version": "0.1.5",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "publish:major:plugin": "npm run publish:major",
+    "publish:minor:plugin": "npm run publish:minor",
+    "publish:patch:plugin": "npm run publish:patch",
+    "publish:major": "npm version major && npm publish --access public",
+    "publish:minor": "npm version minor && npm publish --access public",
+    "publish:patch": "npm version patch && npm publish --access public"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}

package/view/components/GalleryClose.jsx

@@ -0,0 +1,15 @@
+import { useCallback, useMemo } from "react";
+
+import { PositionBox, Svg } from "@vnejs/uis.react";
+
+export const GalleryClose = (props) => {
+  const onClick = useCallback(() => props.emit(props.EVENTS.GALLERY.HIDE));
+
+  const propsSvg = useMemo(() => ({ ...props.PARAMS.GALLERY.VIEW_PROPS.close.svg, onClick }), []);
+
+  return (
+    <PositionBox {...props.PARAMS.GALLERY.VIEW_PROPS.close.position}>
+      <Svg.Cross {...propsSvg} />
+    </PositionBox>
+  );
+};

package/view/components/GalleryControls.jsx

@@ -0,0 +1,18 @@
+import { useCallback, useMemo } from "react";
+
+import { PositionBox, TextControls } from "@vnejs/uis.react";
+
+export const GalleryControls = ({ locs, currentType, ...props } = {}) => {
+  const texts = useMemo(() => Object.keys(props.PARAMS.GALLERY.TABS).map((key) => ({ text: locs[props.PARAMS.GALLERY.TABS[key].locKey], value: key })), [locs]);
+  const selectedIndex = useMemo(() => Object.keys(props.PARAMS.GALLERY.TABS).findIndex((key) => key === currentType), [currentType]);
+
+  const onClick = useCallback((type) => props.emit(props.EVENTS.GALLERY.TYPE_SET, { type }), []);
+
+  const propsControls = useMemo(() => ({ ...props.PARAMS.GALLERY.VIEW_PROPS.controls.controls, selectedIndex, texts, onClick }), [selectedIndex, texts]);
+
+  return (
+    <PositionBox {...props.PARAMS.GALLERY.VIEW_PROPS.controls.position}>
+      <TextControls {...propsControls} />
+    </PositionBox>
+  );
+};

package/view/components/GalleryItems.jsx

@@ -0,0 +1,37 @@
+import { useCallback } from "react";
+
+import { Flex, PositionBox, WrapWithContent } from "@vnejs/uis.react";
+
+export const GalleryItems = ({ currentItems = [], selectedIndex = -1, ...props } = {}) => {
+  const onSlotClick = useCallback((index) => props.emit(props.EVENTS.GALLERY.CHOOSE, { index }), []);
+
+  const renderSlot = useCallback(
+    (item, i) => {
+      if (item.isStub)
+        return (
+          <div
+            {...props.PARAMS.GALLERY.VIEW_PROPS.items.stub}
+            key={i}
+          />
+        );
+
+      return (
+        <WrapWithContent
+          {...props.PARAMS.GALLERY.VIEW_PROPS.items.item}
+          key={item.isOpened ? item.src : i}
+          value={i}
+          imageSrc={item.isOpened && item.src}
+          isSelected={selectedIndex === i}
+          onClick={item.isOpened ? onSlotClick : undefined}
+        />
+      );
+    },
+    [selectedIndex],
+  );
+
+  return (
+    <PositionBox {...props.PARAMS.GALLERY.VIEW_PROPS.items.position}>
+      <Flex {...props.PARAMS.GALLERY.VIEW_PROPS.items.flex}>{currentItems.map(renderSlot)}</Flex>
+    </PositionBox>
+  );
+};

package/view/components/GalleryPages.jsx

@@ -0,0 +1,16 @@
+import { useCallback, useMemo } from "react";
+
+import { PageSelector, PositionBox } from "@vnejs/uis.react";
+
+export const GalleryPages = ({ pagesCount, currentPage, ...props } = {}) => {
+  const onPrevPage = useCallback(() => props.emit(props.EVENTS.GALLERY.PAGE_SET, { page: currentPage - 1 }), []);
+  const onNextPage = useCallback(() => props.emit(props.EVENTS.GALLERY.PAGE_SET, { page: currentPage + 1 }), []);
+
+  const propsSelector = useMemo(() => ({ onPrevPage, onNextPage, pagesCount, page: currentPage + 1, pagesMinCount: 1 }), [currentPage, pagesCount]);
+
+  return (
+    <PositionBox {...props.PARAMS.GALLERY.VIEW_PROPS.pages.position}>
+      <PageSelector {...propsSelector} />
+    </PositionBox>
+  );
+};

package/view/components/index.js

@@ -0,0 +1,4 @@
+export * from "./GalleryClose";
+export * from "./GalleryControls";
+export * from "./GalleryItems";
+export * from "./GalleryPages";

package/view/index.jsx

@@ -0,0 +1,33 @@
+import { useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { Screen } from "@vnejs/uis.react";
+
+import { GalleryClose, GalleryControls, GalleryItems, GalleryPages } from "./components";
+
+const Gallery = ({ store, onMount, ...props } = {}) => {
+  const [state, setState] = useState({});
+
+  const { isShow = false, isForce = false, locs = {}, bgSrc = "" } = state;
+  const { currentType = "", currentItems = [], pages, currentColumn = null, currentRow = null, currentPage } = state;
+  const selectedIndex = currentColumn !== null && currentRow !== null ? currentColumn + currentRow * 3 : -1;
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const propsScreen = useMemo(() => ({ ...props.PARAMS.GALLERY.VIEW_PROPS.screen, isShow, isForce, bgSrc }), [isShow, isForce, bgSrc]);
+  const propsControls = useMemo(() => ({ ...props, currentType, locs }), [currentType, locs]);
+  const propsPages = useMemo(() => ({ ...props, pagesCount: pages, currentPage }), [pages, currentPage]);
+  const propsItems = useMemo(() => ({ ...props, currentItems, currentType, selectedIndex, locs }), [currentItems, currentType, selectedIndex, locs]);
+
+  return (
+    <Screen {...propsScreen}>
+      <GalleryControls {...propsControls} />
+      <GalleryPages {...propsPages} />
+      <GalleryItems {...propsItems} />
+      <GalleryClose {...props} />
+    </Screen>
+  );
+};
+
+export const render = (props, root) => createRoot(root).render(<Gallery {...props} />);