Update all dependencies (#134)

* Update all dependencies

* Re-build yarn.lock

* Replace intrinsice-scale

* Re-build package

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Mario Rodriguez <64106728+MarioRodriguezS@users.noreply.github.com>

.github/workflows/codeql.yml

@@ -55,7 +55,7 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@47b3d888fe66b639e431abf22ebca059152f1eea # v3.24.5
+        uses: github/codeql-action/init@1b1aada464948af03b950897e5eb522f92603cc2 # v3.24.9
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -68,7 +68,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@47b3d888fe66b639e431abf22ebca059152f1eea # v3.24.5
+        uses: github/codeql-action/autobuild@1b1aada464948af03b950897e5eb522f92603cc2 # v3.24.9
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -81,6 +81,6 @@ jobs:
       #   ./location_of_script_within_repo/buildscript.sh
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@47b3d888fe66b639e431abf22ebca059152f1eea # v3.24.5
+        uses: github/codeql-action/analyze@1b1aada464948af03b950897e5eb522f92603cc2 # v3.24.9
         with:
           category: "/language:${{matrix.language}}"

.github/workflows/scorecards.yml

@@ -69,6 +69,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: "Upload to code-scanning"
-        uses: github/codeql-action/upload-sarif@47b3d888fe66b639e431abf22ebca059152f1eea # v3.24.5
+        uses: github/codeql-action/upload-sarif@1b1aada464948af03b950897e5eb522f92603cc2 # v3.24.9
         with:
           sarif_file: results.sarif

package.json

@@ -43,8 +43,7 @@
     "webpack-cli": "^5.0.0"
   },
   "dependencies": {
-    "axios": "1.6.0",
-    "intrinsic-scale": "^3.0.4"
+    "axios": "1.6.8"
   },
   "jest": {
     "testEnvironment": "jsdom",

src/helpers.js

@@ -70,3 +70,22 @@ export const createImageCredits = ({ appName, author, profileLink }) => {
   wrapper.appendChild(unsplashLink);
   return wrapper;
 };
+
+/**
+ * Resize an image to fit within the modal.
+ *
+ * @param {{width: number, height: number}} ImageSize image width and height.
+ * @param {{width: number, height: number}} sizeToFit width and height size to fit the image.
+ *
+ * @returns {{width: number, height: number}}
+ */
+export const resizeToFit = (
+  { width: imgWidth, height: imgHeight },
+  { width: widthToFit, height: heightToFit },
+) => {
+  const imgRatio = imgWidth / imgHeight;
+  const ratioToFit = widthToFit / heightToFit;
+
+  if (imgRatio > ratioToFit) return { width: widthToFit, height: widthToFit / imgRatio };
+  return { width: heightToFit * imgRatio, height: heightToFit };
+};

src/modalHandler.js

@@ -1,5 +1,4 @@
-import { contain } from 'intrinsic-scale';
-import { make } from './helpers';
+import { make, resizeToFit } from './helpers';
 
 /**
  * Renders modal when the image is clicked and handle internal actions
@@ -50,15 +49,18 @@ export default class ModalHandler {
 
   /**
    * Load image in the modal and adjust size
-   * @param {} src
+   * @param {string} src - image url
    */
   setImage(src) {
     const image = document.getElementById('inline-image__modal-img');
     image.src = src;
     const container = document.getElementById('inline-image__modal-content');
     const screenW = screen.width - 200;
     const screenH = screen.height - 200;
-    const { width, height } = contain(screenW, screenH, image.width, image.height);
+    const { width, height } = resizeToFit(
+      { width: image.width, height: image.height },
+      { width: screenW, height: screenH },
+    );
     container.style.maxHeight = `${height}px`;
     container.style.maxWidth = `${width}px`;
   }