Merge branch 'fix-drag-speed-on-mobile'

src/ci360.service.js

@@ -38,6 +38,7 @@ import {
   loop,
   generateZoomInSteps,
   generateZoomOutSteps,
+  isSrcPropsChanged,
   } from './utils';
 
   class CI360Viewer {
@@ -299,13 +300,18 @@ import {
   touchMove(event) {
     if (!this.isClicked || !this.imagesLoaded) return;
 
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
     const nextPositions = { x: event.touches[0].clientX, y: event.touches[0].clientY };
 
     this.movingDirection = getMovingDirection(
       this.isStartSpin,
       this.allowSpinY,
       this.intialPositions,
-      nextPositions
+      nextPositions,
+      this.movingDirection
     );
 
     this.onMoveHandler(event);
@@ -970,6 +976,25 @@ import {
     window.clearTimeout(this.loopTimeoutId);
   }
 
+  updatePlugin(forceUpdate) {
+    const container = this.container;
+
+    const imageProps = get360ViewProps(container);
+    const srcPropsChanged = isSrcPropsChanged(this, imageProps);
+
+    const reloadPlugin = srcPropsChanged || forceUpdate;
+
+    container.style.position = 'relative';
+    container.style.width = '100%';
+    container.style.cursor = 'default';
+    container.setAttribute('draggable', 'false');
+
+    if (reloadPlugin) container.innerHTML = '';
+
+    this.stop();
+    this.init(container, !reloadPlugin, reloadPlugin);
+  }
+
   destroy() {
     stop();
 
@@ -1167,7 +1192,7 @@ import {
     if ( (swipeable) && (!this.disableDrag) ) {
       this.container.addEventListener('touchstart', this.touchStart.bind(this), { passive: true });
       this.container.addEventListener('touchend', this.touchEnd.bind(this));
-      this.container.addEventListener('touchmove', this.touchMove.bind(this), { passive: true });
+      this.container.addEventListener('touchmove', this.touchMove.bind(this));
     }
 
     if (keys) {
@@ -1178,9 +1203,9 @@ import {
     document.addEventListener('keydown', this.keyDownGeneral.bind(this));
   }
 
-  init(container) {
+  init(container, update = false, reload = false) {
     let {
-      folder, apiVersion,filenameX, filenameY, imageListX, imageListY, indexZeroBase, amountX, amountY, imageOffset, draggable = true, swipeable = true, keys, keysReverse, bottomCircle, bottomCircleOffset, boxShadow,
+      folder, apiVersion,filenameX, filenameY, imageListX, imageListY, indexZeroBase, amountX, amountY, draggable = true, swipeable = true, keys, keysReverse, bottomCircle, bottomCircleOffset, boxShadow,
       autoplay, autoplayBehavior, playOnce, speed, autoplayReverse, disableDrag = true, fullscreen, magnifier, ciToken, ciFilters, ciTransformation, lazyload, lazySelector, spinReverse, dragSpeed, stopAtEdges, controlReverse, hide360Logo, logoSrc, containerWidth, containerHeight, pointerZoom
     } = get360ViewProps(container);
 
@@ -1199,7 +1224,6 @@ import {
     this.activeImageX = autoplayReverse ? this.amountX : 1;
     this.activeImageY = autoplayReverse ? this.amountY : 1;
     this.spinY = (autoplayBehavior === AUTOPLAY_BEHAVIOR.SPIN_YX) ? true : false;
-    this.imageOffset = imageOffset;
     this.bottomCircle = bottomCircle;
     this.bottomCircleOffset = bottomCircleOffset;
     this.boxShadow = boxShadow;
@@ -1228,6 +1252,18 @@ import {
     this.pointerZoom = pointerZoom > 1 ? Math.min(pointerZoom, 3) : 0;
     this.keysReverse = keysReverse;
 
+    if (reload) {
+      new CI360Viewer(this.container);
+
+      return;
+    }
+
+    if (update) {
+      this.onAllImagesLoaded();
+
+      return;
+    }
+
     this.innerBox = createInnerBox(this.container);
     this.iconsContainer = createIconsContainer(this.innerBox);
     this.canvas = createCanvas(this.innerBox);

src/ci360.utils.js

@@ -17,7 +17,6 @@ const get360ViewProps = (image) => ({
   || 36, 10),
   amountY: parseInt(attr(image, 'amount-y') ||
   attr(image, 'data-amount-y') || 0, 10),
-  imageOffset: parseInt(attr(image, 'image-offset') || attr(image, 'data-image-offset')),
   speed: parseInt(attr(image, 'speed') || attr(image, 'data-speed') || 80, 10),
   dragSpeed: parseInt(attr(image, 'drag-speed') || attr(image, 'data-drag-speed') || 150, 10),
   keys: isTrue(image, 'keys'),

src/constants/image-src-props.js

@@ -0,0 +1,12 @@
+export const IMAGE_SRC_PROPS = [
+  'folder',
+  'filenameX',
+  'filenameY',
+  'apiVersion',
+  'imageListX',
+  'imageListY',
+  'indexZeroBase',
+  'amountX',
+  'amountY',
+  'lazySelector',
+]

src/index.js

@@ -33,6 +33,20 @@ function getActiveIndexByID(id, oriantation) {
   return currentViewer && (currentViewer.activeImageX - 1);
 }
 
+function update(id = null, forceUpdate = false) {
+  if (id) {
+    try{
+      const view = window.CI360._viewers.filter(viewer => viewer.id === id)[0];
+
+      return view.updatePlugin(forceUpdate);
+    } catch {
+      console.error(`Cloudimage-360: there is no view with such id '${id}'`)
+    }
+  }
+
+  return window.CI360._viewers.forEach(viewer => { viewer.updatePlugin(forceUpdate); });
+}
+
 function isNoViewers() {
   return !(window.CI360._viewers && window.CI360._viewers.length > 0);
 }
@@ -41,6 +55,7 @@ window.CI360 = window.CI360 || {};
 window.CI360.init = init;
 window.CI360.destroy = destroy;
 window.CI360.getActiveIndexByID = getActiveIndexByID;
+window.CI360.update = update;
 
 if (!window.CI360.notInitOnLoad) {
   init();

src/utils/image-src/is-src-props-changed.js

@@ -0,0 +1,15 @@
+import { IMAGE_SRC_PROPS } from "../../constants/image-src-props";
+
+export const isSrcPropsChanged = (currentProps, changedProps) => (
+  Object.keys(changedProps)
+    .reduce((acc, current) => {
+      const isPropChanged = currentProps[current] !== changedProps[current];
+      const isSrcProp = IMAGE_SRC_PROPS.includes(current);
+
+      if (isSrcProp && isPropChanged) {
+        acc = true;
+      }
+
+      return acc;
+    }, false)
+);

src/utils/index.js

@@ -22,3 +22,4 @@ export { createHotspots } from './hotspot/elements/create-hotspots';
 export { generateHotspotsConfigs } from './hotspot/generate-hotspots-configs';
 export { isMouseOnHotspot } from './hotspot/is-mouse-on-hotspot';
 export { hideHotspotsIcons } from './hotspot/hide-hotspots-icons';
+export { isSrcPropsChanged } from './image-src/is-src-props-changed';

src/utils/spin-y/get-moving-direction.js

@@ -1,7 +1,7 @@
 import { ORIENTATIONS } from '../../constants/orientations';
 
 export const getMovingDirection = (isStartSpin, allowSpinY, prevPosition, nextPositions, currentMovingDirection) => {
-  let movingDirection;
+  let movingDirection = ORIENTATIONS.CENTER;
 
   if (isStartSpin) return currentMovingDirection;