js-cloudimage-360-view 4.0.0 → 4.1.1

package/package.json

@@ -1,15 +1,29 @@
 {
   "name": "js-cloudimage-360-view",
-  "version": "4.0.0",
+  "version": "4.1.1",
   "main": "dist/js-cloudimage-360-view.min.js",
+  "types": "src/types/ci360.d.ts",
+  "files": [
+    "dist/js-cloudimage-360-view.min.js",
+    "dist/react",
+    "src/types",
+    "src/react/types.d.ts"
+  ],
   "exports": {
     ".": {
+      "types": "./src/types/ci360.d.ts",
       "import": "./dist/js-cloudimage-360-view.min.js",
       "require": "./dist/js-cloudimage-360-view.min.js"
+    },
+    "./css": "./dist/react/style.css",
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.cjs"
     }
   },
-  "style": "dist/js-cloudimage-360-view.min.css",
-  "module": "dist/js-cloudimage-360-view.es.js",
+  "style": "dist/react/style.css",
+  "module": "dist/js-cloudimage-360-view.min.js",
   "description": "",
   "author": "scaleflex",
   "license": "MIT",
@@ -30,40 +44,64 @@
     "360 product view"
   ],
   "scripts": {
-    "dev": "vite serve demo",
+    "dev": "vite serve demo --host",
+    "dev:react": "npm --prefix demo/react-demo run dev",
     "clean:build": "rm -rf dist",
     "build:bundle": "npm run clean:build && vite build",
+    "build:react": "vite build --config vite-react.config.js && cp src/react/types.d.ts dist/react/index.d.ts",
+    "build": "npm run build:bundle && npm run build:react",
     "deploy:bundle": "npm run build:bundle && node bin/deploy-bundle",
     "clean:dist": "rm -rf dist",
     "clean:demo": "rm -rf demo/dist",
     "build:npm": "npm run clean:demo && vite --config vite-npm.config.js build",
-    "build:demo": "npm run clean:demo && vite --config vite-demo.config.js build",
+    "build:demo": "vite --config vite-demo.config.js build && npm --prefix demo/react-demo run build",
     "deploy:demo": "gh-pages -d dist",
-    "publish": "npm run build:demo && npm run deploy:demo"
+    "publish": "npm run build:demo && npm run deploy:demo",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.2",
-    "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1"
   },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@babel/cli": "^7.16.7",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.3.0",
     "@babel/core": "^7.16.7",
     "@babel/plugin-transform-runtime": "^7.16.5",
     "@babel/preset-env": "^7.16.5",
     "@eslint/js": "^9.12.0",
+    "@vitest/coverage-v8": "^4.0.17",
+    "autoprefixer": "^10.4.23",
     "babel-loader": "^8.2.3",
     "babel-plugin-array-includes": "^2.0.3",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-es2015": "^6.24.1",
     "babel-preset-minify": "^0.5.0",
-    "babel-preset-stage-0": "^6.24.1",
     "css-loader": "^2.1.1",
     "dotenv": "^16.0.3",
     "eslint": "^9.12.0",
     "form-data": "^4.0.0",
     "gh-pages": "^2.0.1",
     "highlight.js": "^10.4.1",
+    "isomorphic-fetch": "^3.0.0",
+    "jsdom": "^27.4.0",
     "mini-css-extract-plugin": "^0.9.0",
     "mobile-detect": "^1.4.3",
     "prettier": "3.3.3",
@@ -72,6 +110,7 @@
     "vite-plugin-dts": "^4.3.0",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-lib-inject-css": "^2.1.1",
+    "vitest": "^4.0.17",
     "webpack": "^5.95.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.13.3"

package/src/react/types.d.ts

@@ -0,0 +1,228 @@
+import { CSSProperties, RefObject, ForwardRefExoticComponent, RefAttributes } from 'react';
+
+/**
+ * Autoplay behavior options
+ */
+export type AutoplayBehavior = 'spin-x' | 'spin-y' | 'spin-xy' | 'spin-yx';
+
+/**
+ * Theme options for the viewer
+ */
+export type Theme = 'light' | 'dark';
+
+/**
+ * Hotspot orientation
+ */
+export type HotspotOrientation = 'x' | 'y';
+
+/**
+ * Hotspot position
+ */
+export interface HotspotPosition {
+  x: number;
+  y: number;
+}
+
+/**
+ * Hotspot configuration
+ */
+export interface Hotspot {
+  id: string;
+  label?: string;
+  orientation?: HotspotOrientation;
+  containerSize?: [number, number];
+  positions: Record<number, HotspotPosition>;
+  content?: string;
+  className?: string;
+}
+
+/**
+ * Hint configuration
+ */
+export interface Hint {
+  text: string;
+  icon?: 'drag' | 'scroll' | 'pinch' | 'keys';
+}
+
+/**
+ * Spin event data
+ */
+export interface SpinEventData {
+  viewerId: string;
+  direction: 'left' | 'right' | 'up' | 'down';
+  activeImageX: number;
+  activeImageY: number;
+  amountX: number;
+  amountY: number;
+}
+
+/**
+ * Load event data
+ */
+export interface LoadEventData {
+  viewerId: string;
+  imagesX: number;
+  imagesY: number;
+}
+
+/**
+ * Zoom event data
+ */
+export interface ZoomEventData {
+  viewerId: string;
+  zoomLevel: number;
+}
+
+/**
+ * Error event data
+ */
+export interface ErrorEventData {
+  viewerId: string;
+  error: { message: string; url?: string };
+  errorCount: number;
+  totalImages: number;
+  errors: Array<{ message: string; url?: string }>;
+}
+
+/**
+ * Base event data (common to all events)
+ */
+export interface BaseEventData {
+  viewerId: string;
+}
+
+/**
+ * CI360 Configuration options
+ */
+export interface CI360Config {
+  folder?: string;
+  apiVersion?: string;
+  filenameX?: string;
+  filenameY?: string | null;
+  imageListX?: string | string[] | null;
+  imageListY?: string | string[] | null;
+  indexZeroBase?: number;
+  amountX?: number;
+  amountY?: number;
+  draggable?: boolean;
+  swipeable?: boolean;
+  keys?: boolean;
+  keysReverse?: boolean;
+  autoplay?: boolean;
+  autoplayBehavior?: AutoplayBehavior;
+  playOnce?: boolean;
+  speed?: number;
+  autoplayReverse?: boolean;
+  dragSpeed?: number;
+  dragReverse?: boolean;
+  stopAtEdges?: boolean;
+  inertia?: boolean;
+  fullscreen?: boolean;
+  magnifier?: number | null;
+  pointerZoom?: number;
+  pinchZoom?: boolean;
+  bottomCircle?: boolean;
+  bottomCircleOffset?: number;
+  initialIconShown?: boolean;
+  hide360Logo?: boolean;
+  logoSrc?: string;
+  imageInfo?: boolean;
+  hints?: boolean | Hint[];
+  theme?: Theme;
+  ciToken?: string | null;
+  ciFilters?: string | null;
+  ciTransformation?: string | null;
+  lazyload?: boolean;
+  hotspots?: Hotspot[] | null;
+  hotspotTimelineOnClick?: boolean;
+  onReady?: (data: BaseEventData) => void;
+  onLoad?: (data: LoadEventData) => void;
+  onSpin?: (data: SpinEventData) => void;
+  onAutoplayStart?: (data: BaseEventData) => void;
+  onAutoplayStop?: (data: BaseEventData) => void;
+  onFullscreenOpen?: (data: BaseEventData) => void;
+  onFullscreenClose?: (data: BaseEventData) => void;
+  onZoomIn?: (data: ZoomEventData) => void;
+  onZoomOut?: (data: BaseEventData) => void;
+  onDragStart?: (data: BaseEventData) => void;
+  onDragEnd?: (data: BaseEventData) => void;
+  onError?: (data: ErrorEventData) => void;
+}
+
+/**
+ * CI360 Viewer Instance methods available from the native viewer
+ */
+export interface CI360ViewerInstance {
+  moveLeft: (stopAtEdges?: boolean, steps?: number) => void;
+  moveRight: (stopAtEdges?: boolean, steps?: number) => void;
+  moveTop: (stopAtEdges?: boolean, steps?: number) => void;
+  moveBottom: (stopAtEdges?: boolean, steps?: number) => void;
+  play: () => void;
+  stopAutoplay: () => void;
+  toggleZoom: (event?: MouseEvent) => void;
+  removeZoom: () => void;
+  animateToFrame: (frame: number, hotspotId?: string) => void;
+  destroy: () => void;
+  update: (config: Partial<CI360Config>) => void;
+  isReady: boolean;
+  activeImageX: number;
+  activeImageY: number;
+  amountX: number;
+  amountY: number;
+  isZoomed: boolean;
+  viewerConfig: CI360Config;
+}
+
+/**
+ * Props for the CI360Viewer React component
+ */
+export interface CI360ViewerProps extends CI360Config {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * Ref methods exposed by CI360Viewer component
+ */
+export interface CI360ViewerRef {
+  moveLeft: (steps?: number) => void;
+  moveRight: (steps?: number) => void;
+  moveTop: (steps?: number) => void;
+  moveBottom: (steps?: number) => void;
+  play: () => void;
+  stop: () => void;
+  zoomIn: () => void;
+  zoomOut: () => void;
+  goToFrame: (frame: number, hotspotId?: string) => void;
+  getViewer: () => CI360ViewerInstance | null;
+}
+
+/**
+ * Return type for useCI360 hook
+ */
+export interface UseCI360Return {
+  viewer: CI360ViewerInstance | null;
+  isReady: boolean;
+}
+
+/**
+ * Options for useCI360 hook
+ */
+export interface UseCI360Options extends CI360Config {
+  autoInit?: boolean;
+}
+
+/**
+ * CI360Viewer React Component
+ */
+export declare const CI360Viewer: ForwardRefExoticComponent<CI360ViewerProps & RefAttributes<CI360ViewerRef>>;
+export default CI360Viewer;
+
+/**
+ * useCI360 Hook for advanced control
+ */
+export declare function useCI360(
+  containerRef: RefObject<HTMLDivElement | null>,
+  config: UseCI360Options
+): UseCI360Return;

package/src/types/ci360.d.ts

@@ -0,0 +1,66 @@
+declare module CI360 {
+  export interface CI360ViewerConfig {
+    folder?: string; // Default: '/'
+    apiVersion?: string; // Default: 'v7'
+    filenameX?: string; // Default: 'image-{index}.jpg'
+    filenameY?: string | null; // Default: null
+    imageListX?: string | null; // Default: null
+    imageListY?: string | null; // Default: null
+    indexZeroBase?: number; // Default: 0
+    amountX?: number; // Default: 0
+    amountY?: number; // Default: 0
+    draggable?: boolean; // Default: true
+    swipeable?: boolean; // Default: true
+    keys?: boolean; // Default: false
+    keysReverse?: boolean; // Default: false
+    bottomCircleOffset?: number; // Default: 5
+    autoplay?: boolean; // Default: false
+    autoplayBehavior?: string; // Default: AUTOPLAY_BEHAVIOR.SPIN_X
+    playOnce?: boolean; // Default: false
+    speed?: number; // Default: 80
+    autoplayReverse?: boolean; // Default: false
+    fullscreen?: boolean; // Default: false
+    magnifier?: number | null; // Default: null
+    ciToken?: string | null; // Default: null
+    ciFilters?: string | null; // Default: null
+    ciTransformation?: string | null; // Default: null
+    lazyload?: boolean; // Default: true
+    dragSpeed?: number; // Default: 150
+    stopAtEdges?: boolean; // Default: false
+    pointerZoom?: number; // Default: 0
+    imageInfo?: boolean; // Changed from string to boolean; Default: false
+    initialIconShown?: boolean; // Default: true
+    bottomCircle?: boolean; // Default: true
+    hotspots?: any; // Default: null (type adjusted as needed)
+    dragReverse?: boolean; // Default: false
+    hide360Logo?: boolean; // Default: false (not documented)
+    logoSrc?: string; // Default: Scaleflex 360 logo URL
+  }
+
+  // Define the CI360Viewer class with the config type and constructor
+  export default class CI360Viewer {
+    constructor(container: HTMLElement | string, config?: CI360ViewerConfig, fullscreen?: boolean);
+    destroy(): void;
+    update(config: CI360ViewerConfig): void;
+    viewerConfig: CI360ViewerConfig;
+  }
+
+  // Define the CI360 class
+  export class CI360 {
+    views: Map<string, CI360Viewer>;
+    instances: CI360Viewer[];
+    initAll: (className?: string) => void;
+    getInstances: () => CI360Viewer[];
+    init: (
+      container: HTMLElement | string,
+      config?: CI360ViewerConfig,
+      fullscreen?: boolean
+    ) => CI360Viewer | undefined;
+    getViewById: (id: string) => CI360Viewer | undefined;
+    getViews: () => CI360Viewer[];
+    updateView: (id: string, config: CI360ViewerConfig) => CI360Viewer | undefined;
+    destroy: (id: string) => void;
+    destroyAll: () => void;
+    constructor();
+  }
+}

package/.prettierrc

@@ -1,9 +0,0 @@
-{
-  "semi": true,
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "tabWidth": 2,
-  "useTabs": false,
-  "printWidth": 110,
-  "arrowParens": "always"
-}

package/dist/js-cloudimage-360-view.min.css

@@ -1 +0,0 @@
-@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cloudimage-360{width:100%;position:relative}.cloudimage-360-inner-box{width:100%;height:100%;position:relative}.cloudimage-360-icons-container{position:absolute;display:flex;top:15px;right:10px;height:100%;flex-direction:column;align-items:center;z-index:100;gap:8px}.cloudimage-360-transition-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff;opacity:0;transition:all 1s ease-out;z-index:10}.cloudimage-360-button{width:30px;height:30px;cursor:pointer;transition:transform .15s ease-out,background-color .15s ease-out;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#f0f0f0;color:#4a4a4a;box-shadow:0 2px 4px #0000001a;padding:6px}.cloudimage-360-button:hover{transform:scale(1.05);background-color:#e7e6e6}.cloudimage-360-button svg{width:18px;height:18px;fill:#4a4a4a;transition:fill .15s ease-out}.cloudimage-360-button:hover svg{fill:#2c2c2c}.cloudimage-initial-icon{position:absolute;top:0;bottom:0;left:0;right:0;width:100px;height:100px;margin:auto;background:linear-gradient(135deg,#ffffff80,#c8c8c880);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:50%;border:1px solid rgba(255,255,255,.5);box-shadow:0 8px 12px #0003,0 4px 6px #0000001a;transition:.2s all,transform .2s;color:#4b4b4b;text-align:center;z-index:2;line-height:100px;-webkit-user-select:none;user-select:none}.cloudimage-initial-icon:hover{background-color:#c8c8c833}.cloudimage-loading-spinner{width:30px;height:30px;transform:translate(-50%,-50%);border:3px solid #fff;position:absolute;top:15px;left:15px;border-bottom-color:#a3a3a3;border-radius:50%;display:inline-block;box-sizing:border-box;opacity:0;animation:rotation .7s linear infinite}.cloudimage-360-view-360-circle{position:absolute;left:0;bottom:0;width:100%;height:auto;margin:auto;pointer-events:none;-webkit-user-select:none;user-select:none;transition:.2s all;z-index:2}.cloudimage-360-fullscreen-modal{position:fixed;top:0;bottom:0;left:0;right:0;width:100%;height:100%;z-index:999;background-color:#fff}.cloudimage-360-img-magnifier-glass{background-color:#fff;background-image:radial-gradient(circle at center,#fffc,#f0f0f0e6);background-repeat:no-repeat;position:absolute;border:2px solid rgba(0,0,0,.3);border-radius:50%;line-height:200px;text-align:center;z-index:1000;width:250px;height:250px;top:-75px;right:-85px;box-shadow:0 8px 16px #0006,0 4px 8px #0003;transition:box-shadow .2s ease;overflow:hidden;pointer-events:none}.cloudimage-360-hotspot-container{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:20}.cloudimage-360-popper{opacity:1;transition:opacity .2s ease-in-out}.cloudimage-360-hotspot{display:inline-block;position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-50%,-50%);background:#0af;border:1px solid #fff;border-radius:50%;height:18px;width:18px;box-shadow:0 0 #0af9,0 2px 6px #0003;opacity:0;animation:pulse 2s infinite;transition:transform .2s ease,box-shadow .2s ease}.cloudimage-360-hotspot.visible{opacity:1}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #0af9,0 0 0 10px #0af6,0 0 0 20px #0af3}50%{transform:scale(1.1);box-shadow:0 0 0 10px #0af0,0 0 0 20px #00aaff1a,0 0 0 30px #0af0}to{transform:scale(1);box-shadow:0 0 #0af0,0 0 0 10px #0af0,0 0 0 20px #0af0}}.cloudimage-360-hotspot:hover{transform:scale(1.2);box-shadow:0 0 0 5px #00aaff80,0 4px 12px #0000004d}.cloudimage-360-popper{background-color:#ffffffe6;color:#333;padding:10px 15px;border-radius:6px;box-shadow:0 4px 16px #0003;font-size:14px;max-width:220px;z-index:9999;text-align:center;transition:opacity .2s ease,translate .2s ease;opacity:0;translate:0 -10px}.cloudimage-360-popper[data-show]{opacity:1;translate:0}