From 3feba64b687700a58c92dad8222ce4c5030e1a74 Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Sat, 5 Feb 2022 16:16:15 +0200 Subject: [PATCH 1/3] fix: drag problem on mobile --- src/ci360.service.js | 9 +++++++-- src/utils/spin-y/get-moving-direction.js | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/ci360.service.js b/src/ci360.service.js index 4c490c7..c075a52 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -299,13 +299,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); @@ -1167,7 +1172,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) { diff --git a/src/utils/spin-y/get-moving-direction.js b/src/utils/spin-y/get-moving-direction.js index ca94137..ed175b2 100644 --- a/src/utils/spin-y/get-moving-direction.js +++ b/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; From 4235ee42b73934361a1a396830a8a0795dd8ff69 Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Tue, 8 Feb 2022 00:23:35 +0200 Subject: [PATCH 2/3] feat: render and reload methods --- src/ci360.service.js | 37 +++++++++++++++++++-- src/ci360.utils.js | 1 - src/constants/image-src-props.js | 12 +++++++ src/index.js | 15 +++++++++ src/utils/image-src/is-src-props-changed.js | 15 +++++++++ src/utils/index.js | 1 + 6 files changed, 77 insertions(+), 4 deletions(-) create mode 100644 src/constants/image-src-props.js create mode 100644 src/utils/image-src/is-src-props-changed.js diff --git a/src/ci360.service.js b/src/ci360.service.js index c075a52..1f0323e 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -38,6 +38,7 @@ import { loop, generateZoomInSteps, generateZoomOutSteps, + isSrcPropsChanged, } from './utils'; class CI360Viewer { @@ -975,6 +976,25 @@ import { window.clearTimeout(this.loopTimeoutId); } + render(forceUpdate) { + const container = this.container; + + const imageProps = get360ViewProps(container); + const propsChanged = isSrcPropsChanged(this, imageProps); + + const reloadPlugin = propsChanged || 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(); @@ -1183,9 +1203,9 @@ import { document.addEventListener('keydown', this.keyDownGeneral.bind(this)); } - init(container) { + init(container, render = 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); @@ -1204,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; @@ -1233,6 +1252,18 @@ import { this.pointerZoom = pointerZoom > 1 ? Math.min(pointerZoom, 3) : 0; this.keysReverse = keysReverse; + if (reload) { + new CI360Viewer(this.container); + + return; + } + + if (render) { + this.onAllImagesLoaded(); + + return; + } + this.innerBox = createInnerBox(this.container); this.iconsContainer = createIconsContainer(this.innerBox); this.canvas = createCanvas(this.innerBox); diff --git a/src/ci360.utils.js b/src/ci360.utils.js index 90f4c3e..7af9d1d 100644 --- a/src/ci360.utils.js +++ b/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'), diff --git a/src/constants/image-src-props.js b/src/constants/image-src-props.js new file mode 100644 index 0000000..3a968f1 --- /dev/null +++ b/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', +] \ No newline at end of file diff --git a/src/index.js b/src/index.js index 12f5c27..e7f5846 100644 --- a/src/index.js +++ b/src/index.js @@ -33,6 +33,20 @@ function getActiveIndexByID(id, oriantation) { return currentViewer && (currentViewer.activeImageX - 1); } +function render(id = null, forceUpdate = false) { + if (id) { + try{ + const view = window.CI360._viewers.filter(viewer => viewer.id === id)[0]; + + return view.render(forceUpdate); + } catch { + console.error(`Cloudimage-360: there is no view with such id '${id}'`) + } + } + + return window.CI360._viewers.forEach(viewer => { viewer.render(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.render = render; if (!window.CI360.notInitOnLoad) { init(); diff --git a/src/utils/image-src/is-src-props-changed.js b/src/utils/image-src/is-src-props-changed.js new file mode 100644 index 0000000..ae684e5 --- /dev/null +++ b/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) +); \ No newline at end of file diff --git a/src/utils/index.js b/src/utils/index.js index 81deafb..31fb681 100644 --- a/src/utils/index.js +++ b/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'; From aa4c754bcc3b1b94c06ea452fff7b61c28ed4eda Mon Sep 17 00:00:00 2001 From: Amr Wagdy Date: Tue, 8 Feb 2022 14:21:11 +0200 Subject: [PATCH 3/3] refactor: code --- src/ci360.service.js | 10 +++++----- src/index.js | 8 ++++---- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/ci360.service.js b/src/ci360.service.js index 1f0323e..3b7d0a7 100644 --- a/src/ci360.service.js +++ b/src/ci360.service.js @@ -976,13 +976,13 @@ import { window.clearTimeout(this.loopTimeoutId); } - render(forceUpdate) { + updatePlugin(forceUpdate) { const container = this.container; const imageProps = get360ViewProps(container); - const propsChanged = isSrcPropsChanged(this, imageProps); + const srcPropsChanged = isSrcPropsChanged(this, imageProps); - const reloadPlugin = propsChanged || forceUpdate; + const reloadPlugin = srcPropsChanged || forceUpdate; container.style.position = 'relative'; container.style.width = '100%'; @@ -1203,7 +1203,7 @@ import { document.addEventListener('keydown', this.keyDownGeneral.bind(this)); } - init(container, render = false, reload = false) { + init(container, update = false, reload = false) { let { 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 @@ -1258,7 +1258,7 @@ import { return; } - if (render) { + if (update) { this.onAllImagesLoaded(); return; diff --git a/src/index.js b/src/index.js index e7f5846..236c7f1 100644 --- a/src/index.js +++ b/src/index.js @@ -33,18 +33,18 @@ function getActiveIndexByID(id, oriantation) { return currentViewer && (currentViewer.activeImageX - 1); } -function render(id = null, forceUpdate = false) { +function update(id = null, forceUpdate = false) { if (id) { try{ const view = window.CI360._viewers.filter(viewer => viewer.id === id)[0]; - return view.render(forceUpdate); + return view.updatePlugin(forceUpdate); } catch { console.error(`Cloudimage-360: there is no view with such id '${id}'`) } } - return window.CI360._viewers.forEach(viewer => { viewer.render(forceUpdate); }); + return window.CI360._viewers.forEach(viewer => { viewer.updatePlugin(forceUpdate); }); } function isNoViewers() { @@ -55,7 +55,7 @@ window.CI360 = window.CI360 || {}; window.CI360.init = init; window.CI360.destroy = destroy; window.CI360.getActiveIndexByID = getActiveIndexByID; -window.CI360.render = render; +window.CI360.update = update; if (!window.CI360.notInitOnLoad) { init();