chore: update dependencies

s-yadav · Nov 3, 2023 · 98e8170 · 98e8170
1 parent 9842243
commit 98e8170
Show file tree

Hide file tree

Showing 14 changed files with 5,143 additions and 5,611 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,7 +1,7 @@
 {
   "presets": ["@babel/preset-env"],
   "plugins": [
-    "@babel/plugin-proposal-class-properties",
-    ["@babel/plugin-proposal-object-rest-spread", {}, "rest-spread"]
+    "@babel/plugin-transform-class-properties",
+    ["@babel/plugin-transform-object-rest-spread", {}, "rest-spread"]
   ]
 }
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,5 @@
 node_modules
 temp
 .idea
+*.tgz
+.parcel-cache
diff --git a/.npmignore b/.npmignore
@@ -4,12 +4,14 @@
 *.swp
 .DS_Store
 .vscode
+.idea
+*.tgz
 
 #ignore gitignore
 .gitignore
 
 #ignore build files
-rollup.config.js
+rollup.config.mjs
 build-css.js
 .babelrc
 .eslintrc
@@ -19,3 +21,4 @@ node_modules/
 temp/
 assets/
 example/
+.parcel-cache
diff --git a/README.md b/README.md
@@ -249,6 +249,12 @@ codesandbox link: [https://codesandbox.io/s/8ypwzryom0](https://codesandbox.io/s
 [:star: this repo](https://github.com/s-yadav/iv-viewer)
 
 ### Major updates
+
+#### v2.2.0
+
+- Includes TypeScript type declarations
+- Bugfixing
+
 #### v2.1.0
 
 - It's a complete rewrite of ImageViewer with no jQuery requirement in ES6.

diff --git a/build-css.js → build-css.cjs b/build-css.js → build-css.cjs
@@ -17,8 +17,9 @@ async function compileCss () {
   const [unminifiedCss, minifiedCss] = await Promise.all([unminifiedCssPromise, minifiedCssPromise]);
   const distUnminified = writeFile('./dist/iv-viewer.css', unminifiedCss.toString());
   const distMinified = writeFile('./dist/iv-viewer.min.css', minifiedCss.toString());
+  const libUnminified = writeFile('./lib/image-viewer.css', unminifiedCss.toString());
 
-  return Promise.all([distUnminified, distMinified]);
+  return Promise.all([distUnminified, distMinified, libUnminified]);
 }
 
 compileCss();
diff --git a/example/container-mode/example.html b/example/container-mode/example.html
@@ -66,7 +66,7 @@ <h3>Container Mode</h3>
     </div>
   </div>
   <link href="../../src/scss/build.scss" rel=" stylesheet" type="text/css" />
-  <script src="./example.js"></script>
+  <script src="./example.js" type="module"></script>
 </body>
 
 </html>
diff --git a/example/fullscreen-mode/example.html b/example/fullscreen-mode/example.html
@@ -41,6 +41,6 @@ <h3>Full Screen Mode</h3>
       />
     </div>
     <link href="../../src/scss/build.scss" rel="stylesheet" type="text/css" />
-    <script src="./example.js"></script>
+    <script src="./example.js" type="module"></script>
   </body>
 </html>
diff --git a/example/image-mode/example.html b/example/image-mode/example.html
@@ -28,6 +28,6 @@ <h3>Image Mode</h3>
       />
     </div>
     <link href="../../src/scss/build.scss" rel="stylesheet" type="text/css" />
-    <script src="./example.js"></script>
+    <script src="./example.js" type="module"></script>
   </body>
 </html>
diff --git a/example/index.html b/example/index.html
@@ -7,11 +7,11 @@
   <body>
     <h1 class="header">ImageViewer examples</h1>
     <nav>
-      <a class="nav-link" href="/container-mode/example.html">Container Mode</a>
-      <a class="nav-link" href="/fullscreen-mode/example.html">
+      <a class="nav-link" href="./container-mode/example.html">Container Mode</a>
+      <a class="nav-link" href="./fullscreen-mode/example.html">
         Full Screen Mode
       </a>
-      <a class="nav-link" href="/image-mode/example.html">Image Mode</a>
+      <a class="nav-link" href="./image-mode/example.html">Image Mode</a>
     </nav>
   </body>
 </html>
diff --git a/iv-viewer.d.ts b/iv-viewer.d.ts
@@ -1,17 +1,13 @@
 declare module "iv-viewer" {
-    export type Point = {
-        x: number;
-        y: number;
-    };
-    export type CallbackData = {
+    type Callback = (data: {
         container: HTMLElement;
         snapView: HTMLElement;
         zoomValue: number;
         reachedMin: number;
         reachedMax: number;
         instance: ImageViewer;
-    };
-    export type Callback = (data: CallbackData) => void | null;
+    }) => void | null;
+
     export type Config = {
         zoomValue: number;
         snapView: boolean;
@@ -22,7 +18,7 @@ declare module "iv-viewer" {
         zoomStep: number;
         listeners: {
             onInit?: Callback;
-            onDestroy?: Callback;
+            onDestroy?: () => void | null;
             onImageLoaded?: Callback;
             onZoomChange?: Callback;
         };
@@ -35,13 +31,13 @@ declare module "iv-viewer" {
 
         resetZoom(animate?: boolean): void;
 
-        zoom(percent: number, point?: Point): void;
+        zoom(percent: number, point?: { x: number, y: number }): void;
 
         showSnapView(noTimeout?: boolean): void;
 
         hideSnapView(): void;
 
-        refresh(): void;
+        refresh(animate?: boolean): void;
 
         load(imageSrc: string, hiResImageSrc?: string): void;
     }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iv-viewer",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "A zooming and panning plugin inspired by google photos for your web images.",
   "main": "dist/iv-viewer.js",
   "module": "dist/iv-viewer.es.js",
@@ -23,36 +23,39 @@
   },
   "homepage": "https://github.com/s-yadav/iv-viewer#readme",
   "scripts": {
-    "start": "yarn copy-assets & parcel example/index.html --out-dir temp",
+    "start": "yarn copy-assets & parcel serve example/index.html --dist-dir temp",
     "copy-assets": "cp -R example/ temp",
     "bundle": "cross-env yarn compile & yarn build-css & yarn bundle-dist",
-    "bundle-dist": "cross-env rollup -c rollup.config.js",
-    "build-css": "node build-css.js",
+    "bundle-dist": "cross-env rollup -c rollup.config.mjs",
+    "build-css": "node build-css.cjs",
     "compile": "cross-env NODE_ENV=production babel src --out-dir lib"
   },
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.3.4",
-    "@babel/plugin-proposal-class-properties": "^7.3.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
-    "all-contributors-cli": "^6.9.1",
-    "babel-eslint": "^9.0.0",
-    "cross-env": "^5.2.0",
-    "cssnano": "^4.1.10",
-    "eslint": "^5.9.0",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-config-standard": "^12.0.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-node": "^8.0.0",
-    "eslint-plugin-promise": "^4.0.1",
-    "eslint-plugin-standard": "^4.0.0",
-    "parcel-bundler": "^1.11.0",
-    "rollup": "^1.4.0",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-filesize": "^6.0.1",
-    "rollup-plugin-license": "^0.8.1",
-    "rollup-plugin-uglify": "^6.0.2",
-    "sass": "^1.17.0"
-  }
+    "@babel/cli": "^7.23.0",
+    "@babel/core": "^7.23.2",
+    "@babel/eslint-parser": "^7.22.15",
+    "@babel/plugin-transform-class-properties": "^7.22.5",
+    "@babel/plugin-transform-object-rest-spread": "^7.22.15",
+    "@babel/preset-env": "^7.23.2",
+    "@parcel/transformer-sass": "2.10.2",
+    "all-contributors-cli": "^6.26.1",
+    "autoprefixer": "^10.4.16",
+    "cross-env": "^7.0.3",
+    "cssnano": "^6.0.1",
+    "eslint": "^8.52.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-standard": "^5.0.0",
+    "parcel": "^2.10.2",
+    "postcss": "^8.4.31",
+    "rollup": "^4.2.0",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-filesize": "^10.0.0",
+    "rollup-plugin-license": "^3.2.0",
+    "rollup-plugin-uglify": "^6.0.4",
+    "sass": "^1.69.5"
+  },
+  "dependencies": {}
 }
diff --git a/rollup.config.js → rollup.config.mjs b/rollup.config.js → rollup.config.mjs
@@ -4,7 +4,7 @@ import { uglify } from 'rollup-plugin-uglify';
 import fileSize from 'rollup-plugin-filesize';
 import license from 'rollup-plugin-license';
 
-import PACKAGE from './package.json';
+import PACKAGE from './package.json' assert { type: 'json' };
 const fullYear = new Date().getFullYear();
 
 const banner = `${PACKAGE.name} - ${PACKAGE.version}

diff --git a/src/scss/_iv-viewer.scss b/src/scss/_iv-viewer.scss
@@ -26,9 +26,9 @@
         position: absolute;
         width: $iv-close-icon-size;
         height: $iv-close-icon-size;
-        right: $iv-boundary-space / 2;
-        top: $iv-boundary-space / 2;
-        padding: $iv-boundary-space / 2;
+        right: calc($iv-boundary-space / 2);
+        top: calc($iv-boundary-space / 2);
+        padding: calc($iv-boundary-space / 2);
         cursor: pointer;
         text-align: center;
         overflow: hidden;