@maplat/ui 0.10.4 → 0.10.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maplat/ui",
-  "version": "0.10.4",
+  "version": "0.10.5",
   "description": "Maplat is the cool Historical Map/Illustrated Map Viewer.\nIt can transform each map coordinates with nonlinear but homeomorphic projection and makes possible that the maps can collaborate with GPS/accurate maps, without distorting original maps.",
   "main": "src/index.js",
   "module": "src/index.js",
@@ -14,11 +14,11 @@
     "locales/"
   ],
   "scripts": {
-    "server": "webpack-cli serve --config ./webpack_config/webpack.config.standard.dev.js --mode=development",
-    "server:packed": "npm run freeze && webpack-cli serve --config ./webpack_config/webpack.config.packed.dev.js --mode=development",
+    "server": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack-cli serve --config ./webpack_config/webpack.config.standard.dev.js --mode=development",
+    "server:packed": "cross-env NODE_OPTIONS=--openssl-legacy-provider npm run freeze && cross-env NODE_OPTIONS=--openssl-legacy-provider webpack-cli serve --config ./webpack_config/webpack.config.packed.dev.js --mode=development",
     "build": "npm run build:standard && npm run build:packed",
-    "build:standard": "webpack --color --progress --config ./webpack_config/webpack.config.standard.js",
-    "build:packed": "npm run freeze && webpack --config ./webpack_config/webpack.config.packed.js",
+    "build:standard": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --color --progress --config ./webpack_config/webpack.config.standard.js",
+    "build:packed": "cross-env NODE_OPTIONS=--openssl-legacy-provider npm run freeze && cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --config ./webpack_config/webpack.config.packed.js",
     "zip": "gulp zip",
     "test": "jest",
     "preversion": "npm run lint",
@@ -44,7 +44,7 @@
   },
   "homepage": "https://github.com/code4history/Maplat/wiki",
   "dependencies": {
-    "@maplat/core": "^0.10.5",
+    "@maplat/core": "^0.10.6",
     "@maplat/tin": "^0.9.4",
     "@turf/turf": "^6.5.0",
     "caniuse-lite": "^1.0.30001431",
@@ -65,6 +65,7 @@
     "concaveman": "https://github.com/grassick/concaveman#patch-1",
     "copy-webpack-plugin": "^6.4.1",
     "core-js": "^3.22.7",
+    "cross-env": "^7.0.3",
     "css-loader": "^5.2.6",
     "css-minimizer-webpack-plugin": "^4.2.2",
     "eslint": "^7.32.0",

package/src/index.js

@@ -1,5 +1,6 @@
 import { absoluteUrl } from "./absolute_url";
 import { Swiper } from "./swiper_ex";
+import { Navigation, Pagination } from "swiper";
 import EventTarget from "ol/events/Target";
 import page from "../legacy/page";
 import bsn from "../legacy/bootstrap-native";
@@ -31,6 +32,7 @@ import { NowMap } from "@maplat/core/lib/source/nowmap";
 import Weiwudi from "weiwudi";
 import { normalizeArg } from "./function";
 import pointer from "./pointer_images";
+Swiper.use([Navigation, Pagination]);
 
 // Maplat UI Class
 export class MaplatUi extends EventTarget {
@@ -187,6 +189,9 @@ export class MaplatUi extends EventTarget {
     if (appOption.appEnvelope) {
       ui.appEnvelope = true;
     }
+    if (appOption.northTop) {
+      ui.northTop = true;
+    }
 
     let pwaManifest = appOption.pwaManifest;
     let pwaWorker = appOption.pwaWorker;
@@ -277,6 +282,7 @@ export class MaplatUi extends EventTarget {
           <d c="poi_data hide">
             <d c="col-xs-12 swiper-container poi_img_swiper">
               <d c="swiper-wrapper"></d>
+              <d c="swiper-pagination poi-pagination"></d>
               <d c="swiper-button-next poi-img-next"></d>
               <d c="swiper-button-prev poi-img-prev"></d>
             </d>
@@ -508,7 +514,8 @@ export class MaplatUi extends EventTarget {
           tipLabel: ui.core.t("control.info", { ns: "translation" })
         }),
         new CompassRotate({
-          tipLabel: ui.core.t("control.compass", { ns: "translation" })
+          tipLabel: ui.core.t("control.compass", { ns: "translation" }),
+          northTop: ui.northTop
         }),
         new Zoom({
           tipLabel: ui.core.t("control.zoom", { ns: "translation" })
@@ -1463,8 +1470,9 @@ enable-background="new 0 0 10 10" xml:space="preserve">
           if (!this.poiSwiper) {
             this.poiSwiper = new Swiper(".swiper-container.poi_img_swiper", {
               lazy: true,
+              modules: [Navigation, Pagination],
               pagination: {
-                el: ".swiper-pagination",
+                el: ".poi-pagination",
                 clickable: true
               },
               navigation: {

package/src/maplat_control.js

@@ -610,11 +610,13 @@ export class CompassRotate extends Rotate {
         center[1] != this.center_[1] ||
         zoom != this.zoom_
       ) {
-        const contains = this.element.classList.contains("disable");
-        if (!contains && rotation === 0) {
-          this.element.classList.add("disable");
-        } else if (contains && rotation !== 0) {
-          this.element.classList.remove("disable");
+        if (!this.northTop_) {
+          const contains = this.element.classList.contains("disable");
+          if (!contains && rotation === 0) {
+            this.element.classList.add("disable");
+          } else if (contains && rotation !== 0) {
+            this.element.classList.remove("disable");
+          }
         }
         const self = this;
         const layer = this.getMap().getLayers().item(0);
@@ -634,6 +636,14 @@ export class CompassRotate extends Rotate {
           self.label_.style.msTransform = transform;
           self.label_.style.webkitTransform = transform;
           self.label_.style.transform = transform;
+          if (this.northTop_) {
+            const contains = self.element.classList.contains("disable");
+            if (!contains && rot === 0) {
+              self.element.classList.add("disable");
+            } else if (contains && rot !== 0) {
+              self.element.classList.remove("disable");
+            }
+          }
         });
       }
       this.rotation_ = rotation;
@@ -647,6 +657,20 @@ export class CompassRotate extends Rotate {
     }
     this.center_ = [];
     this.zoom_ = undefined;
+    this.northTop_ = options.northTop;
+    this.callResetNorth_ = () => {
+      if (this.northTop_) {
+        const layer = this.getMap().getLayers().item(0);
+        const source = layer.getSource
+          ? layer.getSource()
+          : layer.getLayers().item(0).getSource();
+        source.setViewpoint({
+          direction: 0
+        });
+      } else {
+        this.resetNorth_();
+      }
+    };
   }
 }