@vnejs/plugins.view.coralina.settings.defaults 0.0.1

package/index.js

@@ -0,0 +1,6 @@
+import { regPlugin } from "@vnejs/shared";
+
+import { SettingsDefaultsController } from "./modules/controller";
+import { SettingsDefaultsView } from "./modules/view";
+
+regPlugin("SETTINGS_DEFAULTS_VIEW", {}, [SettingsDefaultsController, SettingsDefaultsView]);

package/modules/controller.js

@@ -0,0 +1,20 @@
+import { Module } from "@vnejs/module";
+
+export class SettingsDefaultsController extends Module.Controller {
+  name = "settings.defaults.controller";
+
+  updateEvent = this.EVENTS.SETTINGS_DEFAULTS.UPDATE;
+
+  subscribe = () => {
+    this.on(this.EVENTS.SETTINGS_DEFAULTS.SHOW, this.onShow);
+
+    this.on(this.EVENTS.LOCS.LANG_CHANGED, this.onSettingChange);
+    this.on(this.EVENTS.SETTINGS.CHANGED, this.onSettingChange);
+  };
+
+  beforeShow = () => this.updateState({ defaultSettingsItems: window.VNESettingsDefaultsItems.map(this.emitFunc) });
+
+  emitFunc = (func) => func({ SETTINGS: this.SETTINGS, CONST: this.CONST, platform: window.VneCore.getPlatform() });
+
+  onSettingChange = () => this.state.isShow && this.updateViewFast();
+}

package/modules/view.js

@@ -0,0 +1,12 @@
+import { Module } from "@vnejs/module";
+
+import { render } from "../view";
+
+export class SettingsDefaultsView extends Module.View {
+  name = "settings.defaults.view";
+  locLabel = "settings_defaults";
+  animationTime = 300;
+  renderFunc = render;
+  updateEvent = this.EVENTS.SETTINGS_DEFAULTS.UPDATE;
+  updateHandler = this.onUpdateReactComponent;
+}

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@vnejs/plugins.view.coralina.settings.defaults",
+  "version": "0.0.1",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "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": "",
+  "peerDependencies": {
+    "@vnejs/shared": "*",
+    "@vnejs/module": "*"
+  }
+}

package/view/index.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import { cn } from "@bem-react/classname";
+
+import "./index.styl";
+
+const b = cn("SettingsDefaults");
+
+class SettingsDefaults extends React.Component {
+  state = { locs: {} };
+
+  onClickValue = (e) => {
+    const { value, settingKey } = e.currentTarget.dataset;
+
+    return this.props.emit(this.props.EVENTS.SETTINGS.SET, { name: settingKey, value });
+  };
+
+  onClickConfirm = () => this.props.emit(this.props.EVENTS.SETTINGS_DEFAULTS.CONFIRM);
+
+  renderValues = ({ titleKey = "", value = "" } = {}, settingKey = "") => (
+    <div
+      className={b("value", { current: this.props.shared.settings[settingKey] === value }, ["textWrap_120"])}
+      onClick={this.onClickValue}
+      data-value={value}
+      data-setting-key={settingKey}
+      key={value}
+    >
+      <span className="text">{this.state.locs[titleKey]}</span>
+    </div>
+  );
+
+  renderItem = ({ titleKey = "", settingKey = "", values = [] } = {}, i) => (
+    <div className={b("item")} key={settingKey}>
+      <div className={b("name", ["textWrap_120"])}>
+        <span className="text">{this.state.locs[titleKey]}</span>
+      </div>
+      <div className={b("values")}>{values.map((value) => this.renderValues(value, settingKey))}</div>
+    </div>
+  );
+
+  render() {
+    const { isShow = false, defaultSettingsItems = [], locs = {} } = this.state;
+
+    return (
+      <div className={b({ isShow })} data-html2canvas-ignore="1">
+        <div className={b("title", ["textWrap_120"])}>
+          <span className="text">{locs.title}</span>
+        </div>
+        <div className={b("items")}>{defaultSettingsItems.map(this.renderItem)}</div>
+        <div className={b("confirm", ["textWrap_120"])} onClick={this.onClickConfirm}>
+          <span className="text">{locs.confirm}</span>
+        </div>
+      </div>
+    );
+  }
+}
+
+export const render = (props, root, resolve) => ReactDOM.render(<SettingsDefaults {...props} />, root, resolve);

package/view/index.styl

@@ -0,0 +1,62 @@
+.SettingsDefaults
+    position: absolute
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+
+    display: flex
+    align-items: center
+    justify-content: center
+    flex-direction: column;
+    gap: calc(180 / 2160* 100%);
+
+    color: rgba(255,255,255,0.6);
+    font-family: Montserrat;
+    text-align: center
+
+    opacity: 0
+    pointer-events: none
+
+    transition: color 300ms, opacity 1000ms
+
+    &-items
+        width: 100%
+
+    &-item
+        display: flex
+        justify-content: space-evenly
+
+    &-item ~ &-item
+        margin-top: 2.345%
+
+    &-name
+        width: 20%
+
+    &-values
+        width: 65%
+        display: flex
+        justify-content: space-evenly
+
+    &-value
+        cursor: pointer
+        transition: color 300ms
+
+        &:hover
+            color: rgba(255,255,255,0.75);
+
+        &_current
+            color: rgba(255,255,255,0.9);
+
+    &-confirm
+        color: rgba(255,255,255,0.6);
+        cursor: pointer
+        transition: color 300ms
+
+        &:hover
+            color: rgba(255,255,255,1);
+
+    &_isShow
+        pointer-events: all
+        opacity: 1
+