@get-set/gs-zoom 0.0.4 → 0.0.6

package/helpers/uihelpers.ts

@@ -0,0 +1,7 @@
+export const NewGuid = (): string => {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+};

package/package.json

@@ -1,43 +1,74 @@
-{
-  "name": "@get-set/gs-zoom",
-  "version": "0.0.4",
-  "description": "Get-Set Zoom",
-  "main": "index.js",
-  "author": "Get-Set",
-  "license": "ISC",
-  "files": [
-    "index.js",
-    "dist"
-  ],
-  "scripts": {
-    "build": "cp -r src/* dist/",
-    "build:styles": "node-sass src/components/styles/GSZoom.scss -o dist"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0"
-  },
-  "keywords": [
-    "zoom",
-    "plugin",
-    "images",
-    "slider",
-    "slideshow",
-    "magnifier",
-    "fullscreen",
-    "gallery",
-    "react",
-    "react-component"
-  ],
-  "devDependencies": {
-    "@babel/cli": "^7.24.1",
-    "@babel/core": "^7.24.4",
-    "@babel/preset-env": "^7.24.4",
-    "@babel/preset-react": "^7.24.1",
-    "prettier": "2.7.1"
-  },
-  "dependencies": {
-    "@types/prop-types": "^15.7.13",
-    "jsdoc": "^4.0.3",
-    "prop-types": "^15.8.1"
-  }
-}
+{
+  "name": "@get-set/gs-zoom",
+  "version": "0.0.6",
+  "description": "Get-Set Zoom",
+  "author": "Get-Set",
+  "license": "ISC",
+  "main": "dist/components/GSZoom.js",
+  "module": "dist/components/GSZoom.js",
+  "types": "dist/components/GSZoom.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/components/GSZoom.js",
+      "require": "./dist-js/bundle.js"
+    }
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:react",
+    "build:js": "webpack --config webpack.config.js",
+    "build:react": "tsc -p tsconfig.react.json"
+  },
+  "keywords": [
+    "zoom",
+    "plugin",
+    "images",
+    "slider",
+    "slideshow",
+    "magnifier",
+    "fullscreen",
+    "gallery",
+    "react",
+    "react-component"
+  ],
+  "dependencies": {
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0 || ^18.0 || ^19.0",
+    "react-dom": "^16.8.0 || ^17.0 || ^18.0 || ^19.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.24.0",
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/preset-typescript": "^7.24.0",
+    "@types/react": "^18.0.0",
+    "babel-loader": "^9.1.3",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "ts-loader": "^9.5.4",
+    "typescript": "^5.3.0"
+  },
+  "files": [
+    "dist",
+    "dist-js",
+    "components",
+    "constants",
+    "types",
+    "actions",
+    "helpers",
+    "styles"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/styles/GSZoom.scss

@@ -0,0 +1,252 @@
+html.gs-zoom-opened {
+  overflow: hidden !important;
+  touch-action: pan-x pan-y;
+  body {
+    touch-action: pan-x pan-y;
+  }
+}
+.gs-zoom-magnifier-instance {
+  &:hover {
+    cursor: none;
+  }
+}
+.gs-zoom-magnifier {
+  pointer-events: none;
+  position: fixed;
+  z-index: 9999;
+  border: 4px solid #fff;
+  aspect-ratio: 1;
+  overflow: hidden;
+  &[data-type="circle"] {
+    border-radius: 50%;
+  }
+  img {
+    position: absolute;
+    transform-origin: top left;
+    max-width: unset !important;
+  }
+}
+.gs-zoom-container {
+  position: fixed;
+  z-index: 9999999999;
+  width: 100vw;
+  height: 100dvh;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  backdrop-filter: blur(50px);
+
+  .gs-zoom-autoplayline {
+    position: fixed;
+    height: 4px;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    background-color: red;
+  }
+  button {
+    cursor: pointer;
+    outline: none !important;
+  }
+  * {
+    -webkit-user-drag: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  .gs-zoom-header {
+    position: fixed;
+    right: 10px;
+    top: 10px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    z-index: 99;
+
+    .gs-zoom-actions {
+      display: flex;
+      align-items: center;
+      .gs-zoom-action {
+        width: 40px;
+        height: 40px;
+        background-color: rgba(35, 35, 35, 0.65);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+
+        svg {
+          fill: #fff;
+          width: 18px;
+        }
+      }
+    }
+  }
+  .gs-zoom-img-list {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    width: max-content;
+    .gs-zoom-main-img {
+      width: 100vw;
+      height: 100dvh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      overflow: hidden;
+
+      .gs-zoom-img-touch {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 2;
+      }
+
+      .gz-zoom-loading-container {
+        display: none;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+      .gs-zoom-img {
+        max-width: 100%;
+        max-height: 100%;
+        &.gs-zoom-is-adjusting {
+          transition: 0.4s ease-in-out !important;
+        }
+      }
+      &.gz-zoom-is-loading {
+        .gz-zoom-loading-container {
+          display: block;
+        }
+        .gs-zoom-img {
+          visibility: hidden;
+        }
+      }
+      .gs-zoom-info-data {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        padding: 20px 20px 90px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        color: #fff;
+        background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+      }
+    }
+  }
+  .gs-zoom-additionals {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    overflow-x: hidden;
+    padding: 5px 0;
+    display: flex;
+    justify-content: center;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+    transform-origin: bottom;
+    .gs-add-list-container {
+      overflow-x: hidden;
+      max-width: 100%;
+      .gs-add-list {
+        display: flex;
+        gap: 5px;
+        width: max-content;
+        justify-content: center;
+        flex-wrap: nowrap;
+
+        .gs-add-item {
+          width: 80px;
+          aspect-ratio: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: 1px solid #000;
+          opacity: 0.5;
+          transition: 0.2s ease-out;
+          transform: scale(0.8);
+          cursor: pointer;
+          &:hover,
+          &.active {
+            transform: scale(1);
+            opacity: 1;
+          }
+          img {
+            max-width: 100%;
+            max-height: 100%;
+          }
+        }
+      }
+    }
+    &.gs-zoom-hidden {
+      z-index: 1;
+      opacity: 0;
+      .gs-add-list {
+        transform: scale(0.9);
+      }
+    }
+  }
+  &:not(.gs-additional-isdragging) {
+    .gs-zoom-additionals {
+      .gs-add-list-container {
+        .gs-add-list {
+          transition: 0.3s transform ease-in-out;
+        }
+      }
+    }
+  }
+  .gs-zoom-navigations {
+    button {
+      border: none;
+      position: fixed;
+      top: 50%;
+      width: 50px;
+      background-color: rgba(35, 35, 35, 0.65);
+      aspect-ratio: 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 28px;
+      color: #fff;
+      transform: translateY(-50%);
+
+      svg {
+        fill: #fff;
+        width: 18px;
+      }
+    }
+    .gs-zoom-next {
+      right: 10px;
+    }
+    .gs-zoom-prev {
+      left: 10px;
+    }
+  }
+  .gs-zoom-hide-inzoomed {
+    z-index: 3;
+    opacity: 1;
+    transform: scale(1);
+    transition: 0.3s ease-in-out;
+  }
+  &.gs-zoom-is-zoomed {
+    .gs-zoom-hide-inzoomed {
+      z-index: 1;
+      opacity: 0;
+      transform: scale(0.9);
+      &.gs-zoom-additionals {
+        transform: scale(1);
+        .gs-add-list {
+          transform: scale(0.9);
+        }
+      }
+    }
+  }
+}

package/types/global.d.ts

@@ -0,0 +1,33 @@
+import { Ref } from './ref';
+
+declare global {
+  interface Window {
+    GSZoom: any;
+    GSZoomConfigue?: {
+      references: Array<{ key: string; ref: Ref }>;
+      openedZoom: string | undefined;
+      instance: (ref: string) => Ref | undefined;
+    };
+    // drag/touch state — kept on window to match original behaviour
+    initX: number;
+    initX2: number;
+    initY: number;
+    initY2: number;
+    initListX: number;
+    initListY: number;
+    initListTranslateX: number;
+    initListTranslateY: number;
+    initTranslateX: number;
+    initTranslateY: number;
+    initCenterX: number;
+    initCenterY: number;
+    clientX: number;
+    clientX2: number;
+    clientY: number;
+    clientY2: number;
+    touchDistance: number;
+    lastClickTime: number;
+  }
+}
+
+export {};

package/types/params.ts

@@ -0,0 +1,36 @@
+export interface ResponsiveOption {
+  windowSize: number;
+  params: Partial<Params>;
+  magnifier?: Partial<MagnifierParams>;
+}
+
+export interface MagnifierParams {
+  zoom: number;
+  form: 'circle' | 'square';
+  size: number;
+}
+
+export interface Params {
+  reference?: string;
+  arrows?: boolean;
+  navigateWithKeys?: boolean;
+  showAdditionals?: boolean;
+  zoomOnWheel?: boolean;
+  maxZoom?: number;
+  type?: 'lightbox' | 'magnifier';
+  mainImageQueryParameters?: string;
+  additionalImageQueryParameters?: string;
+  disableFullScreen?: boolean;
+  imgLoading?: string;
+  autoplaySpeed?: number;
+  magnifier?: Partial<MagnifierParams>;
+  responsive?: ResponsiveOption[];
+  beforeInit?: () => void;
+  afterInit?: () => void;
+  beforeLightBoxOpen?: () => void;
+  afterLightBoxOpen?: () => void;
+  beforeLightBoxClose?: () => void;
+  afterLightBoxClose?: () => void;
+  afterChange?: () => void;
+  [key: string]: any;
+}

package/types/ref.ts

@@ -0,0 +1,23 @@
+import { Params } from './params';
+
+export interface Ref {
+  list: HTMLImageElement[];
+  currentParams: Params;
+  currentIndex: number;
+  isZoomed?: boolean;
+  inProcess?: boolean;
+  autoplay?: any;
+  autoplayStoped?: boolean;
+  zoomButtonTimeout?: any;
+  $container?: HTMLElement;
+  $imgList?: HTMLElement;
+  $mainImg?: HTMLElement;
+  $imgTouch?: HTMLElement;
+  $img?: HTMLImageElement;
+  $btnAdditionals?: HTMLButtonElement;
+  $btnAutoplay?: HTMLButtonElement;
+  $btnClose?: HTMLButtonElement;
+  $btnZoomIn?: HTMLButtonElement;
+  $btnZoomOut?: HTMLButtonElement;
+  $magnifier?: HTMLElement;
+}

package/dist/components/styles/GSZoom.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["GSZoom.scss","GSZoom.css"],"names":[],"mappings":"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","file":"GSZoom.css"}

package/index.js

@@ -1,3 +0,0 @@
-import GSZoom from './dist/components/GSZoom';
-
-export default GSZoom;