@vnejs/plugins.views.screens.gallery.full 0.1.2

package/const/events.js

@@ -0,0 +1,5 @@
+export const SUBSCRIBE_EVENTS = {
+  SHOW: "vne:gallery_full:show",
+  HIDE: "vne:gallery_full:hide",
+  UPDATE: "vne:gallery_full:update",
+};

package/const/params.js

@@ -0,0 +1,7 @@
+export const TRANSITION = 500;
+export const ZINDEX = 9000;
+
+export const VIEW_PROPS = {
+  screen: { isIgnoreOnScreenshot: true, zIndex: ZINDEX, transition: TRANSITION },
+  close: { position: { right: 120, top: 90 }, props: { size: 60 } },
+};

package/index.js

@@ -0,0 +1,9 @@
+import { regPlugin } from "@vnejs/shared";
+
+import { SUBSCRIBE_EVENTS } from "./const/events";
+import * as params from "./const/params";
+
+import { GalleryFullController } from "./modules/controller";
+import { GalleryFullView } from "./modules/view";
+
+regPlugin("GALLERY_FULL_VIEW", { events: SUBSCRIBE_EVENTS, params }, [GalleryFullController, GalleryFullView]);

package/modules/controller.js

@@ -0,0 +1,32 @@
+import { ModuleController } from "@vnejs/module.components";
+
+export class GalleryFullController extends ModuleController {
+  name = "gallery.full.controller";
+
+  updateEvent = this.EVENTS.GALLERY_FULL_VIEW.UPDATE;
+
+  emitHide = () => this.emit(this.EVENTS.GALLERY_FULL_VIEW.HIDE);
+
+  controls = {
+    [this.CONST.CONTROLS.BUTTONS.BACK]: this.emitHide,
+    [this.CONST.CONTROLS.BUTTONS.MENU]: this.emitHide,
+    [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: this.emitHide,
+  };
+  controlsIndex = this.PARAMS.GALLERY_FULL_VIEW.ZINDEX;
+
+  subscribe = () => {
+    this.on(this.EVENTS.GALLERY_FULL_VIEW.SHOW, this.onShow);
+    this.on(this.EVENTS.GALLERY_FULL_VIEW.HIDE, this.onHide);
+
+    this.on(this.EVENTS.GALLERY.CHOOSE, this.onGalleryViewChoose);
+  };
+
+  beforeShow = async ({ index } = {}) => {
+    const { fullName, mediaType } = this.globalState?.["gallery.controller"].currentItems[index];
+
+    return this.updateState({ bgSrc: (await this.loadImageMedia(fullName, mediaType, this.shared.settings[this.SETTINGS.LAYER.QUALITY])).src });
+  };
+  afterHide = () => this.setDefaultState();
+
+  onGalleryViewChoose = ({ index } = {}) => this.emit(this.EVENTS.GALLERY_FULL_VIEW.SHOW, { index });
+}

package/modules/view.js

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

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.views.screens.gallery.full",
+  "version": "0.1.2",
+  "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/index.jsx

@@ -0,0 +1,26 @@
+import { useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { PositionBox, Screen, Svg } from "@vnejs/uis.react";
+
+const GalleryFull = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, isForce = false, bgSrc = "" }, setState] = useState({});
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const propsView = props.PARAMS.GALLERY_FULL_VIEW.VIEW_PROPS;
+
+  const propsScreen = useMemo(() => ({ ...propsView.screen, isShow, isForce, isDisableAutoread: isShow, bgSrc }), [isShow, isForce, bgSrc]);
+  const propsClose = useMemo(() => ({ ...propsView.close.props, onClick: () => props.emit(props.EVENTS.GALLERY_FULL_VIEW.HIDE) }), []);
+
+  return (
+    <Screen {...propsScreen}>
+      <PositionBox {...propsView.close.position}>
+        <Svg.Cross {...propsClose} />
+      </PositionBox>
+    </Screen>
+  );
+};
+
+export const render = (props, root) => createRoot(root).render(<GalleryFull {...props} />);