@maplat/ui 0.10.3 → 0.10.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maplat/ui",
-  "version": "0.10.3",
+  "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 --devtool=inline-source-map",
-    "server:packed": "npm run freeze && webpack-cli serve --config ./webpack_config/webpack.config.packed.dev.js --mode=development --devtool=inline-source-map",
+    "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,52 +44,52 @@
   },
   "homepage": "https://github.com/code4history/Maplat/wiki",
   "dependencies": {
-    "@maplat/core": "^0.10.4",
-    "@maplat/tin": "^0.9.3",
+    "@maplat/core": "^0.10.6",
+    "@maplat/tin": "^0.9.4",
     "@turf/turf": "^6.5.0",
-    "bootstrap.native": "^3.0.15",
-    "caniuse-lite": "^1.0.30001239",
+    "caniuse-lite": "^1.0.30001431",
     "lodash.template": "^4.5.0",
-    "ol": "^6.1.1",
+    "ol": "^6.14.1",
     "ol-contextmenu": "^4.1.0",
     "swiper": "^6.7.1",
     "swiper4": "npm:swiper@^4.5.1",
     "weiwudi": "^0.1.4"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.5",
-    "@babel/core": "^7.14.6",
-    "@babel/preset-env": "^7.14.7",
-    "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.2",
-    "clean-webpack-plugin": "^3.0.0",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.2",
+    "@babel/preset-env": "^7.18.2",
+    "babel-jest": "^28.1.0",
+    "babel-loader": "^8.2.5",
+    "clean-webpack-plugin": "^4.0.0",
     "concaveman": "https://github.com/grassick/concaveman#patch-1",
     "copy-webpack-plugin": "^6.4.1",
-    "core-js": "^3.15.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.29.0",
-    "eslint-config-prettier": "^7.2.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-loader": "^4.0.2",
-    "eslint-plugin-jest": "^24.3.6",
+    "eslint-plugin-jest": "^26.3.0",
     "file-loader": "^6.2.0",
-    "fs-extra": "^8.1.0",
+    "fs-extra": "^10.1.0",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
-    "gulp-zip": "^4.2.0",
-    "html-webpack-plugin": "^4.5.2",
-    "jest": "^26.6.3",
+    "gulp-zip": "^5.1.0",
+    "html-webpack-plugin": "^5.5.0",
+    "jest": "^28.1.0",
     "jest-canvas-mock": "^2.3.1",
-    "less": "^3.13.1",
-    "less-loader": "^7.1.0",
+    "less": "^4.1.2",
+    "less-loader": "^11.0.0",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^1.6.0",
-    "prettier": "^2.3.1",
+    "mini-css-extract-plugin": "^2.6.0",
+    "prettier": "^2.6.2",
     "strip-whitespace-loader": "github:kochizufan/strip-whitespace-loader#fix_dq_npm",
-    "terser-webpack-plugin": "^4.2.3",
+    "terser-webpack-plugin": "^5.3.1",
     "url-loader": "^4.1.1",
-    "webpack": "^5.40.0",
-    "webpack-cli": "^4.7.2",
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.11.1",
     "workbox-build": "^6.5.4",
     "workbox-cli": "^6.5.4",

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_();
+      }
+    };
   }
 }