react-image-gallery 1.3.0 → 1.4.0

package/styles/scss/image-gallery.scss

@@ -1,14 +1,16 @@
+@use "sass:color";
+
 $ig-small-screen: 768px !default;
 $ig-xsmall-screen: 480px !default;
 $ig-white: #fff !default;
 $ig-black: #000 !default;
 $ig-blue: #337ab7 !default;
-$ig-background-black: rgba(0, 0, 0, .4) !default;
+$ig-background-black: rgba(0, 0, 0, 0.4) !default;
 $ig-transparent: rgba(0, 0, 0, 0) !default;
-$ig-shadow: 0 2px 2px lighten($ig-black, 10%);
+$ig-shadow: 0 2px 2px color.adjust($ig-black, $lightness: 10%);
 
 @mixin vendor-prefix($name, $value) {
-  @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', '') {
+  @each $vendor in ("-webkit-", "-moz-", "-ms-", "-o-", "") {
     #{$vendor}#{$name}: #{$value};
   }
 }
@@ -16,7 +18,7 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
 // SVG ICON STYLES
 .image-gallery-icon {
   color: $ig-white;
-  transition: all .3s ease-out;
+  transition: all 0.3s ease-out;
   appearance: none;
   background-color: transparent;
   border: 0;
@@ -86,6 +88,46 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
   left: 0;
 }
 
+.image-gallery-top-nav,
+.image-gallery-bottom-nav {
+  padding: 10px 10px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  .image-gallery-svg {
+    height: 120px;
+    width: 90px;
+  }
+
+  @media (max-width: $ig-small-screen) {
+    .image-gallery-svg {
+      height: 72px;
+      width: 48px;
+    }
+  }
+
+  @media (max-width: $ig-xsmall-screen) {
+    .image-gallery-svg {
+      height: 48px;
+      width: 36px;
+    }
+  }
+
+  &[disabled] {
+    cursor: disabled;
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+
+.image-gallery-top-nav {
+  top: 0;
+}
+
+.image-gallery-bottom-nav {
+  bottom: 0;
+}
+
 .image-gallery-left-nav,
 .image-gallery-right-nav {
   padding: 50px 10px;
@@ -113,7 +155,7 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
 
   &[disabled] {
     cursor: disabled;
-    opacity: .6;
+    opacity: 0.6;
     pointer-events: none;
   }
 }
@@ -128,7 +170,7 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
 // End of Icon styles
 
 .image-gallery {
-  @include vendor-prefix('user-select', none);
+  @include vendor-prefix("user-select", none);
   -webkit-tap-highlight-color: $ig-transparent;
   position: relative;
 
@@ -194,6 +236,7 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
   position: relative;
   white-space: nowrap;
   text-align: center;
+  touch-action: none; // prevent scrolling when touching gallery
 }
 
 .image-gallery-slide {
@@ -223,10 +266,9 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
 
     @media (max-width: $ig-small-screen) {
       bottom: 45px;
-      font-size: .8em;
+      font-size: 0.8em;
       padding: 8px 15px;
     }
-
   }
 }
 
@@ -256,7 +298,7 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
     margin: 0 5px;
     outline: none;
     padding: 5px;
-    transition: all .2s ease-out;
+    transition: all 0.2s ease-out;
 
     @media (max-width: $ig-small-screen) {
       margin: 0 3px;
@@ -290,6 +332,29 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
       }
     }
   }
+
+  &.image-gallery-bullets-vertical {
+    left: 20px;
+    right: auto;
+    bottom: auto;
+    width: auto;
+    top: 50%;
+    transform: translateY(-50%);
+
+    .image-gallery-bullet {
+      display: block;
+      margin: 12px 0;
+
+      @media (max-width: $ig-small-screen) {
+        margin: 6px 0px;
+        padding: 3px;
+      }
+
+      @media (max-width: $ig-xsmall-screen) {
+        padding: 2.7px;
+      }
+    }
+  }
 }
 
 .image-gallery-thumbnails-wrapper {
@@ -333,9 +398,7 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
           margin-left: 0;
           margin-top: 2px;
         }
-
       }
-
     }
   }
 
@@ -362,13 +425,12 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
     text-align: center;
     white-space: nowrap;
   }
-
 }
 
 .image-gallery-thumbnail {
   display: inline-block;
   border: 4px solid transparent;
-  transition: border .3s ease-out;
+  transition: border 0.3s ease-out;
   width: 100px;
   background: transparent;
   padding: 0;
@@ -413,7 +475,6 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
       }
     }
   }
-
 }
 
 .image-gallery-thumbnail-label {
@@ -430,9 +491,9 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
   white-space: normal;
   width: 100%;
 
-  @media(max-width: $ig-small-screen) {
-    font-size: .8em;
-    line-height: .8em;
+  @media (max-width: $ig-small-screen) {
+    font-size: 0.8em;
+    line-height: 0.8em;
   }
 }
 
@@ -446,8 +507,8 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
   top: 0;
   z-index: 4;
 
-  @media(max-width: $ig-small-screen) {
-    font-size: .8em;
+  @media (max-width: $ig-small-screen) {
+    font-size: 0.8em;
     padding: 5px 10px;
   }
-}
+}

package/.eslintrc.json

@@ -1,47 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:prettier/recommended", // Enable eslint-plugin-prettier and eslint-config-prettier
-    "plugin:import/errors", // Enable eslint-plugin-import
-    "plugin:import/warnings",
-    "plugin:jsx-a11y/recommended", // Enable eslint-plugin-jsx-a11y
-    "plugin:react-hooks/recommended",
-    "plugin:jest/recommended"
-  ],
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 12,
-    "sourceType": "module"
-  },
-  "plugins": ["react", "jest"],
-  "rules": {
-    "react/display-name": "off"
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    },
-    "import/resolver": {
-      "alias": {
-        "map": [["src", "./src"]],
-        "extensions": [".ts", ".js", ".jsx", ".json"]
-      }
-    }
-  },
-  "overrides": [
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {
-        "prettier/prettier": ["error", { "trailingComma": "es5" }]
-      }
-    }
-  ]
-}

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,39 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Checklist before opening an issue**\
-Lots of issues are opened that are unrelated to this package, please take a moment to ensure the issue is not on your end 🙏.
-- [ ] Did you try google?
-- [ ] Did you search for previous Issues in this repo?
-
-**Describe the bug**\
-A clear and concise description of what the bug is.
-
-**Image Gallery Version**\
-What version of `react-image-gallery` are you using?
-
-**To Reproduce**\
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**\
-A clear and concise description of what you expected to happen.
-
-**Screenshots**\
-If applicable, add screenshots to help explain your problem.
-
-**Client info (please complete the following information):**\
- - OS: [e.g. iOS]
- - Browser: [e.g. chrome, safari]
-
-**Additional context**\
-Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

package/.github/workflows/eslint.yml

@@ -1,56 +0,0 @@
-# This workflow uses actions that are not certified by GitHub.
-# They are provided by a third-party and are governed by
-# separate terms of service, privacy policy, and support
-# documentation.
-# ESLint is a tool for identifying and reporting on patterns
-# found in ECMAScript/JavaScript code.
-# More details at https://github.com/eslint/eslint
-# and https://eslint.org
-
-name: workflow
-
-on:
-  push:
-    branches: ["master"]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: ["master"]
-  schedule:
-    - cron: "35 15 * * 3"
-
-jobs:
-  eslint:
-    name: Eslint
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      security-events: write
-      actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Install Packages
-        run: yarn
-
-      - name: Run ESLint
-        run: yarn lint
-        continue-on-error: false
-
-  jest:
-    name: Jest
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      security-events: write
-      actions: read
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Install Packages
-        run: yarn
-
-      - name: Run Jest
-        run: yarn jest
-        continue-on-error: false

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@babel/preset-env", "@babel/preset-react"],
-};

package/jest.config.js

@@ -1,16 +0,0 @@
-const path = require("path");
-
-module.exports = {
-  testEnvironment: "jsdom", // Use jsdom environment for DOM-related tests
-  roots: ["./src"], // The root directory for running tests
-  transform: {
-    "^.+\\.(js|jsx)$": "babel-jest",
-  },
-  testMatch: ["**/__tests__/**/*.js?(x)", "**/?(*.)+(spec|test).js?(x)"], // File patterns for test files
-  setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"], // Setup file to extend Jest with RTL matchers
-  moduleNameMapper: {
-    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
-    "^src/(.*)$": path.resolve(__dirname, "src/$1"), // Add the moduleNameMapper for your alias
-  },
-  transformIgnorePatterns: ["/node_modules/(?!(lodash-es)/)"],
-};