compatibility update

petoc · Feb 21, 2024 · 5de152e · 5de152e
1 parent 1a8580f
commit 5de152e
Show file tree

Hide file tree

Showing 6 changed files with 302 additions and 262 deletions.
diff --git a/README.md b/README.md
@@ -8,16 +8,37 @@ https://petoc.github.io/Leaflet.DoubleTouchDragZoom/example/
 
 ## Usage
 
-Include plugin after Leaflet script and enable it in map options.
+```sh
+npm i @petoc/leaflet-double-touch-drag-zoom
+```
+
+```js
+import L from 'leaflet';
+import DoubleTouchDragZoom from '@petoc/leaflet-double-touch-drag-zoom';
+
+import 'leaflet/dist/leaflet.css';
+import '@petoc/leaflet-double-touch-drag-zoom/src/leaflet-double-touch-drag-zoom.css';
+
+L.Map.addInitHook('addHandler', 'doubleTouchDragZoom', DoubleTouchDragZoom);
+
+const map = L.map('map', {
+    center: [48.6726, 19.6994],
+    zoom: 8,
+    doubleTouchDragZoom: true
+});
+```
+
+Alternative usage
 
 ```html
+<link rel="stylesheet" href="leaflet-double-touch-drag-zoom.css" />
+...
 <script src="leaflet.js"></script>
 <script src="leaflet-double-touch-drag-zoom.js"></script>
 <script>
     var map = L.map('map', {
         center: [48.6726, 19.6994],
         zoom: 8,
-        zoomControl: true,
         doubleTouchDragZoom: true
     });
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -26,25 +47,6 @@ Include plugin after Leaflet script and enable it in map options.
 </script>
 ```
 
-Add CSS style to disable user-select and change cursor during zooming.
-
-```html
-<style>
-    .leaflet-double-touch {
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-    }
-    .leaflet-double-touch-drag {
-        cursor: move;
-        cursor: -webkit-grabbing;
-        cursor:    -moz-grabbing;
-        cursor:       row-resize;
-    }
-</style>
-```
-
 ## Options
 
 Plugin adds following options to map configuration.

diff --git a/example/index.html b/example/index.html
@@ -1,39 +1,25 @@
-<!doctype html>
-<html>
-<head>
-    <meta name="referrer" content="no-referrer">
-    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
-    <title>Leaflet.DoubleTouchDragZoom</title>
-    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
-</head>
-<body>
-    <style>
-        .leaflet-double-touch {
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-        }
-        .leaflet-double-touch-drag {
-            cursor: move;
-            cursor: -webkit-grabbing;
-            cursor:    -moz-grabbing;
-            cursor:       row-resize;
-        }
-    </style>
-    <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
-    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
-    <script src="../src/leaflet-double-touch-drag-zoom.js"></script>
-    <script>
-        var map = L.map('map', {
-            center: [48.6726, 19.6994],
-            zoom: 7,
-            zoomControl: true,
-            doubleTouchDragZoom: true
-        });
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-        }).addTo(map);
-    </script>
-</body>
-</html>
+<!doctype html>
+<html>
+<head>
+    <meta name="referrer" content="no-referrer">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
+    <title>Leaflet.DoubleTouchDragZoom</title>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+    <link rel="stylesheet" href="../src/leaflet-double-touch-drag-zoom.css" />
+</head>
+<body>
+    <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+    <script src="../src/leaflet-double-touch-drag-zoom.js"></script>
+    <script>
+        var map = L.map('map', {
+            center: [48.6726, 19.6994],
+            zoom: 7,
+            doubleTouchDragZoom: true
+        });
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(map);
+    </script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@petoc/leafet-double-touch-drag-zoom",
+  "version": "1.0.0",
+  "author": "Peter C.",
+  "license": "MIT",
+  "description": "Leaflet plugin for one finger zoom.",
+  "keywords": [
+    "leaflet",
+    "plugin",
+    "zoom"
+  ],
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "leaflet": "^1.0.0"
+  },
+  "main": "src/leaflet-double-touch-drag-zoom.js",
+  "types": "src/leaflet-double-touch-drag-zoom.d.ts",
+  "homepage": "https://github.com/petoc/Leaflet.DoubleTouchDragZoom#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/petoc/Leaflet.DoubleTouchDragZoom.git"
+  },
+  "bugs": {
+    "url": "https://github.com/petoc/Leaflet.DoubleTouchDragZoom/issues"
+  }
+}
diff --git a/src/leaflet-double-touch-drag-zoom.css b/src/leaflet-double-touch-drag-zoom.css
@@ -0,0 +1,12 @@
+.leaflet-double-touch {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.leaflet-double-touch-drag {
+  cursor: move;
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: row-resize;
+}
diff --git a/src/leaflet-double-touch-drag-zoom.d.ts b/src/leaflet-double-touch-drag-zoom.d.ts
@@ -0,0 +1,10 @@
+import * as L from 'leaflet';
+
+declare module 'leaflet' {
+    interface MapOptions {
+        doubleTouchDragZoom?: boolean
+        doubleTouchDragZoomDelay?: number
+        doubleTouchDragZoomInvert?: boolean
+        doubleTouchDragZoomScaleFactor?: number
+    }
+}