Socket
Socket
Sign inDemoInstall

js-cloudimage-360-view

Package Overview
Dependencies
1
Maintainers
3
Versions
47
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 2.6.0 to 2.7.0

dist/ci360.constants.js
dist/static/css/style.css

17

CHANGELOG.md

@@ -29,2 +29,19 @@ # Changelog

## 2.7.0 - 2020-11-04
### Added
- play once then stops auto-play
- spin in y-direction
- zoom with mouse wheel
- zoom with fingers on mobile
- possibilty to change icons styles
### Fixed
- hide scrollbar in fullscreen mode
- auto-play not working on mobile
- error on init the plugin inside a modal
- removed chrome waringing about non-passive events
### Changed
- migrate CDN URL to V7
## 2.6.0 - 2020-09-03

@@ -31,0 +48,0 @@

1314

dist/ci360.service.js

@@ -7,2 +7,4 @@ 'use strict';

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

@@ -12,2 +14,6 @@

var _ci2 = require('./ci360.constants');
require('./static/css/style.css');
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

@@ -18,15 +24,22 @@

var CI360Viewer = function () {
function CI360Viewer(container, fullScreen, ratio) {
function CI360Viewer(container, fullscreen, ratio) {
_classCallCheck(this, CI360Viewer);
this.container = container;
this.activeImage = 1;
this.movementStart = 0;
this.movementStart = { x: 0, y: 0 };
this.isStartSpin = false;
this.movingDirection = _ci2.ORIENTATIONS.CENTER;
this.isClicked = false;
this.loadedImages = 0;
this.loadedImagesX = 0;
this.loadedImagesY = 0;
this.imagesLoaded = false;
this.reversed = false;
this.fullScreenView = !!fullScreen;
this.fullscreenView = !!fullscreen;
this.ratio = ratio;
this.images = [];
this.imagesX = [];
this.imagesY = [];
this.resizedImagesX = [];
this.resizedImagesY = [];
this.originalImagesX = [];
this.originalImagesY = [];
this.devicePixelRatio = Math.round(window.devicePixelRatio || 1);

@@ -36,19 +49,26 @@ this.isMobile = !!('ontouchstart' in window || navigator.msMaxTouchPoints);

this.init(container);
this.clickedToZoom = false;
this.isMagnifyOpen = false;
this.startPointerZoom = false;
this.zoomIntensity = 0;
this.mouseTracked = false;
this.intialPositions = { x: 0, y: 0 };
this.pointerCurrentPosition = { x: 0, y: 0 };
this.startPinchZoom = false;
this.prevDistanceBetweenFingers = 0;
}
_createClass(CI360Viewer, [{
key: 'mousedown',
value: function mousedown(event) {
key: 'mouseDown',
value: function mouseDown(event) {
event.preventDefault();
var pageX = event.pageX,
pageY = event.pageY;
if (!this.imagesLoaded) return;
if (this.glass) {
this.closeMagnifier();
}
this.hideInitialIcons();
if (this.view360Icon) {
this.remove360ViewIcon();
}
if (this.autoplay || this.loopTimeoutId) {

@@ -59,16 +79,19 @@ this.stop();

this.movementStart = event.pageX;
this.intialPositions = { x: pageX, y: pageY };
this.movementStart = { x: pageX, y: pageY };
this.isClicked = true;
this.clickedToZoom = true;
this.container.style.cursor = 'grabbing';
}
}, {
key: 'mouseup',
value: function mouseup() {
if (!this.imagesLoaded) return;
key: 'mouseUp',
value: function mouseUp() {
if (!this.imagesLoaded || !this.isClicked) return;
this.movementStart = 0;
this.movementStart = { x: 0, y: 0 };
this.isStartSpin = false;
this.isClicked = false;
this.container.style.cursor = 'grab';
if (this.bottomCircle) {
if (this.bottomCircle && !this.zoomIntensity) {
this.show360ViewCircleIcon();

@@ -78,21 +101,61 @@ }

}, {
key: 'mousemove',
value: function mousemove(event) {
if (!this.isClicked || !this.imagesLoaded) return;
key: 'mouseMove',
value: function mouseMove(event) {
if (!this.imagesLoaded) return;
this.onMove(event.pageX);
var pageX = event.pageX,
pageY = event.pageY;
if (this.mouseTracked) {
this.setCursorPosition(event);
}
if (this.isClicked) {
var nextPositions = { x: pageX, y: pageY };
this.updateMovingDirection(this.intialPositions, nextPositions);
this.onMoveHandler(event);
} else if (this.zoomIntensity) {
this.update();
}
}
}, {
key: 'touchstart',
value: function touchstart(event) {
if (!this.imagesLoaded) return;
key: 'updateMovingDirection',
value: function updateMovingDirection(prevPosition, nextPositions) {
if (this.isStartSpin) return;
if (this.glass) {
this.closeMagnifier();
}
var differenceInPositionX = Math.abs(prevPosition.x - nextPositions.x);
var differenceInPositionY = Math.abs(prevPosition.y - nextPositions.y);
var sensitivity = 10;
if (this.view360Icon) {
this.remove360ViewIcon();
if (differenceInPositionX > sensitivity) this.movingDirection = _ci2.ORIENTATIONS.X;
if (differenceInPositionY > sensitivity && this.allowSpinY) this.movingDirection = _ci2.ORIENTATIONS.Y;
}
}, {
key: 'mouseScroll',
value: function mouseScroll(event) {
if (this.disablePointerZoom || this.isMagnifyOpen) return;
var isClickedToZoom = this.toStartPointerZoom === _ci2.TO_START_POINTER_ZOOM.CLICK_TO_START && this.clickedToZoom;
var isScrolledToZoom = this.toStartPointerZoom === _ci2.TO_START_POINTER_ZOOM.SCROLL_TO_START;
if (isClickedToZoom || isScrolledToZoom) {
this.initMouseScrollZoom(event);
}
}
}, {
key: 'touchStart',
value: function touchStart(event) {
if (!this.imagesLoaded) return;
var isPinchZoom = !this.disablePinchZoom && (0, _ci.isTwoFingers)(event) && !this.isMagnifyOpen;
if (isPinchZoom) {
this.initAndSetPinchZoom(event);
};
this.hideInitialIcons();
if (this.autoplay || this.loopTimeoutId) {

@@ -103,11 +166,15 @@ this.stop();

this.movementStart = event.touches[0].clientX;
this.intialPositions = { x: event.touches[0].clientX, y: event.touches[0].clientY };
this.movementStart = { x: event.touches[0].clientX, y: event.touches[0].clientY };
this.isClicked = true;
}
}, {
key: 'touchend',
value: function touchend() {
key: 'touchEnd',
value: function touchEnd() {
if (!this.imagesLoaded) return;
this.movementStart = 0;
if (this.zoomIntensity) this.resetZoom();
this.movementStart = { x: 0, y: 0 };
this.isStartSpin = false;
this.isClicked = false;

@@ -118,11 +185,18 @@

}, {
key: 'touchmove',
value: function touchmove(event) {
key: 'touchMove',
value: function touchMove(event) {
if (!this.isClicked || !this.imagesLoaded) return;
this.onMove(event.touches[0].clientX);
if (!this.disablePinchZoom && (0, _ci.isTwoFingers)(event)) {
this.fingersPinchZoom(event);
} else {
var nextPositions = { x: event.touches[0].clientX, y: event.touches[0].clientY };
this.updateMovingDirection(this.intialPositions, nextPositions);
this.onMoveHandler(event);
}
}
}, {
key: 'keydownGeneral',
value: function keydownGeneral() {
key: 'keyDownGeneral',
value: function keyDownGeneral() {
if (!this.imagesLoaded) return;

@@ -135,4 +209,160 @@

}, {
key: 'keydown',
value: function keydown(event) {
key: 'hideInitialIcons',
value: function hideInitialIcons() {
if (this.glass) {
this.closeMagnifier();
}
if (this.view360Icon) {
this.remove360ViewIcon();
}
}
}, {
key: 'initMouseScrollZoom',
value: function initMouseScrollZoom(event) {
if (this.bottomCircle) this.hide360ViewCircleIcon();
this.hideInitialIcons();
this.mouseTracked = true;
this.setCursorPosition(event);
this.mouseScrollZoom(event);
}
}, {
key: 'setCursorPosition',
value: function setCursorPosition(event) {
this.mousePositions = {
x: event.clientX,
y: event.clientY
};
}
}, {
key: 'getCursorPositionInCanvas',
value: function getCursorPositionInCanvas() {
var canvasRect = this.canvas.getBoundingClientRect();
this.pointerCurrentPosition = {
x: this.mousePositions.x - canvasRect.left,
y: this.mousePositions.y - canvasRect.top
};
return this.pointerCurrentPosition;
}
}, {
key: 'mouseScrollZoom',
value: function mouseScrollZoom(event) {
event.preventDefault();
if (this.autoplay || this.loopTimeoutId) {
this.stop();
this.autoplay = false;
}
var zoomFactor = (0, _ci.normalizeZoomFactor)(event, this.pointerZoomFactor);
var maxIntensity = (0, _ci.getMaxZoomIntensity)(this.canvas.width, this.maxScale);
this.startPointerZoom = true;
this.zoomIntensity += event.deltaY * zoomFactor;
this.zoomIntensity = Math.min(Math.max(0, this.zoomIntensity), maxIntensity);
if (this.zoomIntensity) {
if (this.resetZoomIcon) this.showResetZoomIcon();
} else {
if (this.resetZoomIcon) this.hideResetZoomIcon();
if (this.bottomCircle) this.show360ViewCircleIcon();
this.startPointerZoom = false;
this.mouseTracked = false;
}
this.update();
}
}, {
key: 'initAndSetPinchZoom',
value: function initAndSetPinchZoom(event) {
if (this.bottomCircle) this.hide360ViewCircleIcon();
var _getFingersPosition = this.getFingersPosition(event),
_getFingersPosition2 = _slicedToArray(_getFingersPosition, 2),
fingerOnePosition = _getFingersPosition2[0],
fingerTwoPosition = _getFingersPosition2[1];
this.prevDistanceBetweenFingers = this.getDistanceBetweenFingers(fingerOnePosition, fingerTwoPosition);
}
}, {
key: 'getDistanceBetweenFingers',
value: function getDistanceBetweenFingers(fingerOne, fingerTwo) {
var xPosition = fingerTwo.x - fingerOne.x;
var yPosition = fingerTwo.y - fingerOne.y;
return Math.sqrt(Math.pow(xPosition, 2) + Math.pow(yPosition, 2));
}
}, {
key: 'updateAveragePositionBetweenFingers',
value: function updateAveragePositionBetweenFingers(fingerOne, fingerTwo) {
var containerRect = this.canvas.getBoundingClientRect();
var offSetX = containerRect.left;
var offSetY = containerRect.top;
this.pointerCurrentPosition.x = (fingerOne.x + fingerTwo.x) / 2 - offSetX;
this.pointerCurrentPosition.y = (fingerOne.y + fingerTwo.y) / 2 - offSetY;
}
}, {
key: 'getFingersPosition',
value: function getFingersPosition(event) {
var p1 = event.targetTouches[0];
var p2 = event.targetTouches[1];
var fingerOnePosition = { x: p1.clientX, y: p1.clientY };
var fingerTwoPosition = { x: p2.clientX, y: p2.clientY };
return [fingerOnePosition, fingerTwoPosition];
}
}, {
key: 'fingersPinchZoom',
value: function fingersPinchZoom(event) {
var _getFingersPosition3 = this.getFingersPosition(event),
_getFingersPosition4 = _slicedToArray(_getFingersPosition3, 2),
fingerOnePosition = _getFingersPosition4[0],
fingerTwoPosition = _getFingersPosition4[1];
var currentDistanceBetweenFingers = this.getDistanceBetweenFingers(fingerOnePosition, fingerTwoPosition);
var zoomFactor = this.pinchZoomFactor * 30;
var zoomSensitivity = 1.5;
var isZoomIn = currentDistanceBetweenFingers > this.prevDistanceBetweenFingers + zoomSensitivity;
var isZoomOut = currentDistanceBetweenFingers + zoomSensitivity < this.prevDistanceBetweenFingers;
var maxIntensity = (0, _ci.getMaxZoomIntensity)(this.canvas.width, this.maxScale);
this.startPinchZoom = true;
this.updateAveragePositionBetweenFingers(fingerOnePosition, fingerTwoPosition);
if (isZoomIn && this.zoomIntensity <= maxIntensity) {
this.zoomIntensity += zoomFactor;
} else if (isZoomOut && this.zoomIntensity >= zoomFactor) {
this.zoomIntensity -= zoomFactor;
}
this.update();
this.prevDistanceBetweenFingers = currentDistanceBetweenFingers;
}
}, {
key: 'resetZoom',
value: function resetZoom() {
this.startPointerZoom = false;
this.startPinchZoom = false;
this.mouseTracked = false;
this.clickedToZoom = false;
if (this.resetZoomIcon) this.hideResetZoomIcon();
if (this.zoomIntensity) {
this.zoomIntensity = 0;
this.update();
}
}
}, {
key: 'keyDown',
value: function keyDown(event) {
if (!this.imagesLoaded) return;

@@ -146,5 +376,5 @@

if (37 === event.keyCode) {
if (this.reversed) this.prev();else this.next();
if (this.reversed) this.left();else this.right();
} else if (39 === event.keyCode) {
if (this.reversed) this.next();else this.prev();
if (this.reversed) this.right();else this.left();
}

@@ -172,4 +402,4 @@

}, {
key: 'keyup',
value: function keyup(event) {
key: 'keyUp',
value: function keyUp(event) {
if (!this.imagesLoaded) return;

@@ -187,33 +417,77 @@

}, {
key: 'onMove',
value: function onMove(pageX) {
if (pageX - this.movementStart >= this.speedFactor) {
var itemsSkippedRight = Math.floor((pageX - this.movementStart) / this.speedFactor) || 1;
key: 'onMoveHandler',
value: function onMoveHandler(event) {
var currentPositionX = this.isMobile ? event.touches[0].clientX : event.pageX;
var currentPositionY = this.isMobile ? event.touches[0].clientY : event.pageY;
this.movementStart = pageX;
var isMoveRight = currentPositionX - this.movementStart.x >= this.speedFactor;
var isMoveLeft = this.movementStart.x - currentPositionX >= this.speedFactor;
var isMoveTop = this.movementStart.y - currentPositionY >= this.speedFactor;
var isMoveBottom = currentPositionY - this.movementStart.y >= this.speedFactor;
if (this.spinReverse) {
this.moveActiveIndexDown(itemsSkippedRight);
} else {
this.moveActiveIndexUp(itemsSkippedRight);
}
if (this.bottomCircle) this.hide360ViewCircleIcon();
if (this.bottomCircle) this.hide360ViewCircleIcon();
this.update();
} else if (this.movementStart - pageX >= this.speedFactor) {
var itemsSkippedLeft = Math.floor((this.movementStart - pageX) / this.speedFactor) || 1;
if (isMoveRight && this.movingDirection === _ci2.ORIENTATIONS.X) {
this.moveRight(currentPositionX);
this.movementStart = pageX;
this.isStartSpin = true;
} else if (isMoveLeft && this.movingDirection === _ci2.ORIENTATIONS.X) {
this.moveLeft(currentPositionX);
if (this.spinReverse) {
this.moveActiveIndexUp(itemsSkippedLeft);
} else {
this.moveActiveIndexDown(itemsSkippedLeft);
}
this.isStartSpin = true;
} else if (isMoveTop && this.movingDirection === _ci2.ORIENTATIONS.Y) {
this.moveTop(currentPositionY);
if (this.bottomCircle) this.hide360ViewCircleIcon();
this.update();
this.isStartSpin = true;
} else if (isMoveBottom && this.movingDirection === _ci2.ORIENTATIONS.Y) {
this.moveBottom(currentPositionY);
this.isStartSpin = true;
}
}
}, {
key: 'moveRight',
value: function moveRight(currentPositionX) {
var itemsSkippedRight = Math.floor((currentPositionX - this.movementStart.x) / this.speedFactor) || 1;
this.spinReverse ? this.moveActiveIndexDown(itemsSkippedRight) : this.moveActiveIndexUp(itemsSkippedRight);
this.movementStart.x = currentPositionX;
this.activeImageY = 1;
this.update();
}
}, {
key: 'moveLeft',
value: function moveLeft(currentPositionX) {
var itemsSkippedLeft = Math.floor((this.movementStart.x - currentPositionX) / this.speedFactor) || 1;
this.spinReverse ? this.moveActiveIndexUp(itemsSkippedLeft) : this.moveActiveIndexDown(itemsSkippedLeft);
this.activeImageY = 1;
this.movementStart.x = currentPositionX;
this.update();
}
}, {
key: 'moveTop',
value: function moveTop(currentPositionY) {
var itemsSkippedTop = Math.floor((this.movementStart.y - currentPositionY) / this.speedFactor) || 1;
this.spinReverse ? this.moveActiveYIndexUp(itemsSkippedTop) : this.moveActiveYIndexDown(itemsSkippedTop);
this.activeImageX = 1;
this.movementStart.y = currentPositionY;
this.update();
}
}, {
key: 'moveBottom',
value: function moveBottom(currentPositionY) {
var itemsSkippedBottom = Math.floor((currentPositionY - this.movementStart.y) / this.speedFactor) || 1;
this.spinReverse ? this.moveActiveYIndexDown(itemsSkippedBottom) : this.moveActiveYIndexUp(itemsSkippedBottom);
this.activeImageX = 1;
this.movementStart.y = currentPositionY;
this.update();
}
}, {
key: 'moveActiveIndexUp',

@@ -224,21 +498,21 @@ value: function moveActiveIndexUp(itemsSkipped) {

if (this.stopAtEdges) {
if (this.activeImage + itemsSkipped >= this.amount) {
this.activeImage = this.amount;
var isReachedTheEdge = this.activeImageX + itemsSkipped >= this.amountX;
if (isReverse ? this.prevElem : this.nextElem) {
(0, _ci.addClass)(isReverse ? this.prevElem : this.nextElem, 'not-active');
if (isReachedTheEdge) {
this.activeImageX = this.amountX;
if (isReverse ? this.prevElem : this.rightElem) {
(0, _ci.addClass)(isReverse ? this.leftElem : this.leftElem, 'not-active');
}
} else {
this.activeImage += itemsSkipped;
this.activeImageX += itemsSkipped;
if (this.nextElem) {
(0, _ci.removeClass)(this.nextElem, 'not-active');
}
if (this.rightElem) (0, _ci.removeClass)(this.rightElem, 'not-active');
if (this.prevElem) {
(0, _ci.removeClass)(this.prevElem, 'not-active');
}
if (this.leftElem) (0, _ci.removeClass)(this.leftElem, 'not-active');
}
} else {
this.activeImage = (this.activeImage + itemsSkipped) % this.amount || this.amount;
this.activeImageX = (this.activeImageX + itemsSkipped) % this.amountX || this.amountX;
if (this.activeImageX === this.amountX && this.allowSpinY) this.spinY = true;
}

@@ -252,23 +526,79 @@ }

if (this.stopAtEdges) {
if (this.activeImage - itemsSkipped <= 1) {
this.activeImage = 1;
var isReachedTheEdge = this.activeImageX - itemsSkipped <= 1;
if (isReverse ? this.nextElem : this.prevElem) {
(0, _ci.addClass)(isReverse ? this.nextElem : this.prevElem, 'not-active');
if (isReachedTheEdge) {
this.activeImageX = 1;
if (isReverse ? this.rightElem : this.leftElem) {
(0, _ci.addClass)(isReverse ? this.rightElem : this.leftElem, 'not-active');
}
} else {
this.activeImage -= itemsSkipped;
this.activeImageX -= itemsSkipped;
if (this.prevElem) {
(0, _ci.removeClass)(this.prevElem, 'not-active');
if (this.leftElem) (0, _ci.removeClass)(this.leftElem, 'not-active');
if (this.rightElem) (0, _ci.removeClass)(this.rightElem, 'not-active');
}
} else {
if (this.activeImageX - itemsSkipped < 1) {
this.activeImageX = this.amountX + (this.activeImageX - itemsSkipped);
this.spinY = true;
} else {
this.activeImageX -= itemsSkipped;
}
}
}
}, {
key: 'moveActiveYIndexUp',
value: function moveActiveYIndexUp(itemsSkipped) {
var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;
if (this.stopAtEdges) {
var isReachedTheEdge = this.activeImageY + itemsSkipped >= this.amountY;
if (isReachedTheEdge) {
this.activeImageY = this.amountY;
if (isReverse ? this.bottomElem : this.topElem) {
(0, _ci.addClass)(isReverse ? this.bottomElem : this.topElem, 'not-active');
}
if (this.nextElem) {
(0, _ci.removeClass)(this.nextElem, 'not-active');
} else {
this.activeImageY += itemsSkipped;
if (this.topElem) (0, _ci.removeClass)(this.topElem, 'not-active');
if (this.bottomElem) (0, _ci.removeClass)(this.bottomElem, 'not-active');
}
} else {
this.activeImageY = (this.activeImageY + itemsSkipped) % this.amountY || this.amountY;
if (this.activeImageY === this.amountY) this.spinY = false;
}
}
}, {
key: 'moveActiveYIndexDown',
value: function moveActiveYIndexDown(itemsSkipped) {
var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;
if (this.stopAtEdges) {
var isReachedTheEdge = this.activeImageY - itemsSkipped <= 1;
if (isReachedTheEdge) {
this.activeImageY = 1;
if (isReverse ? this.topElem : this.bottomElem) {
(0, _ci.addClass)(isReverse ? this.topElem : this.bottomElem, 'not-active');
}
} else {
this.activeImageY -= itemsSkipped;
if (this.bottomElem) (0, _ci.removeClass)(this.bottomElem, 'not-active');
if (this.topElem) (0, _ci.removeClass)(this.topElem, 'not-active');
}
} else {
if (this.activeImage - itemsSkipped < 1) {
this.activeImage = this.amount + (this.activeImage - itemsSkipped);
if (this.activeImageY - itemsSkipped < 1) {
this.activeImageY = this.amountY + (this.activeImageY - itemsSkipped);
this.spinY = false;
} else {
this.activeImage -= itemsSkipped;
this.activeImageY -= itemsSkipped;
}

@@ -280,7 +610,34 @@ }

value: function loop(reversed) {
reversed ? this.prev() : this.next();
switch (this.autoplayBehavior) {
case _ci2.AUTOPLAY_BEHAVIOR.SPIN_Y:
reversed ? this.bottom() : this.top();
break;
case _ci2.AUTOPLAY_BEHAVIOR.SPIN_XY:
if (this.spinY) {
reversed ? this.bottom() : this.top();
} else {
reversed ? this.left() : this.right();
}
break;
case _ci2.AUTOPLAY_BEHAVIOR.SPIN_YX:
if (this.spinY) {
reversed ? this.bottom() : this.top();
} else {
reversed ? this.left() : this.right();
}
break;
case _ci2.AUTOPLAY_BEHAVIOR.SPIN_X:
default:
reversed ? this.left() : this.right();
}
}
}, {
key: 'next',
value: function next() {
key: 'right',
value: function right() {
this.movingDirection = _ci2.ORIENTATIONS.X;
this.activeImageY = this.reversed ? this.amountY : 1;
this.moveActiveIndexUp(1);

@@ -290,4 +647,7 @@ this.update();

}, {
key: 'prev',
value: function prev() {
key: 'left',
value: function left() {
this.movingDirection = _ci2.ORIENTATIONS.X;
this.activeImageY = this.reversed ? this.amountY : 1;
this.moveActiveIndexDown(1);

@@ -297,5 +657,112 @@ this.update();

}, {
key: 'top',
value: function top() {
this.movingDirection = _ci2.ORIENTATIONS.Y;
this.activeImageX = this.reversed ? this.amountX : 1;
this.moveActiveYIndexUp(1);
this.update();
}
}, {
key: 'bottom',
value: function bottom() {
this.movingDirection = _ci2.ORIENTATIONS.Y;
this.activeImageX = this.reversed ? this.amountX : 1;
this.moveActiveYIndexDown(1);
this.update();
}
}, {
key: 'onLoadResizedImages',
value: function onLoadResizedImages(orientation, event) {
this.incrementLoadedImages(orientation);
var totalAmount = this.amountX + this.amountY;
var totalLoadedImages = this.loadedImagesX + this.loadedImagesY;
if (totalLoadedImages === totalAmount) {
this.replaceImages(orientation);
this.update();
}
}
}, {
key: 'replaceImages',
value: function replaceImages(orientation) {
if (orientation === _ci2.ORIENTATIONS.Y) {
this.imagesY = this.resizedImagesY;
} else {
this.imagesX = this.resizedImagesX;
}
}
}, {
key: 'requestNewImages',
value: function requestNewImages(src, amount, orientation) {
var _this = this;
if (orientation === _ci2.ORIENTATIONS.Y) {
this.resizedImagesY = [];
this.loadedImagesY = 0;
} else {
this.resizedImagesX = [];
this.loadedImagesX = 0;
}
[].concat(_toConsumableArray(new Array(amount))).map(function (_item, index) {
var nextZeroFilledIndex = (0, _ci.pad)(index + 1, _this.indexZeroBase);
var resultSrc = src.replace('{index}', nextZeroFilledIndex);
_this.addUpdatedSizeImage(resultSrc, orientation, _this.lazyload, _this.lazySelector, index);
});
}
}, {
key: 'addUpdatedSizeImage',
value: function addUpdatedSizeImage(resultSrc, orientation, lazyload, lazySelector, index) {
var image = new Image();
if (lazyload && !this.fullscreenView) {
image.setAttribute('data-src', resultSrc);
image.className = image.className.length ? image.className + (' ' + lazySelector) : lazySelector;
if (index === 0) {
this.lazyloadInitImage = image;
image.style.position = 'absolute';
image.style.top = '0';
image.style.left = '0';
this.innerBox.appendChild(image);
}
} else {
image.src = resultSrc;
}
image.onload = this.onLoadResizedImages.bind(this, orientation);
image.onerror = this.onLoadResizedImages.bind(this, orientation);
if (orientation === _ci2.ORIENTATIONS.Y) {
this.resizedImagesY.push(image);
} else {
this.resizedImagesX.push(image);
}
}
}, {
key: 'requestResizedImages',
value: function requestResizedImages() {
var srcX = this.getSrc(this.responsive, this.container, this.folder, this.filenameX, this.ciParams);
this.requestNewImages(srcX, this.amountX, _ci2.ORIENTATIONS.X);
if (this.allowSpinY) {
var srcY = this.getSrc(this.responsive, this.container, this.folder, this.filenameY, this.ciParams);
this.requestNewImages(srcY, this.amountY, _ci2.ORIENTATIONS.Y);
}
}
}, {
key: 'update',
value: function update() {
var image = this.images[this.activeImage - 1];
var image = this.imagesX[this.activeImageX - 1];
if (this.movingDirection === _ci2.ORIENTATIONS.Y) {
image = this.imagesY[this.activeImageY - 1];
}
var ctx = this.canvas.getContext("2d");

@@ -305,3 +772,3 @@

if (this.fullScreenView) {
if (this.fullscreenView) {
this.canvas.width = window.innerWidth * this.devicePixelRatio;

@@ -325,6 +792,34 @@ this.canvas.style.width = window.innerWidth + 'px';

ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
if (this.startPointerZoom || this.startPinchZoom) {
this.updateImageScale(ctx);
} else {
ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
}
}
}
}, {
key: 'updateImageScale',
value: function updateImageScale(ctx) {
var image = this.originalImagesX[this.activeImageX - 1];
if (this.movingDirection === _ci2.ORIENTATIONS.Y) {
image = this.originalImagesY[this.activeImageY - 1];
}
var position = this.pointerCurrentPosition;
if (this.startPointerZoom) position = this.getCursorPositionInCanvas();
var imageWidth = this.canvas.width / this.devicePixelRatio;
var imageHeight = this.canvas.height / this.devicePixelRatio;
var width = this.canvas.width + this.zoomIntensity * (this.canvas.width / this.canvas.height);
var height = this.canvas.height + this.zoomIntensity;
var pointX = 0 - position.x / imageWidth * (width - this.canvas.width);
var pointY = 0 - position.y / imageHeight * (height - this.canvas.height);
ctx.drawImage(image, pointX, pointY, width, height);
}
}, {
key: 'updatePercentageInLoader',

@@ -344,7 +839,10 @@ value: function updatePercentageInLoader(percentage) {

this.imagesLoaded = true;
this.container.style.cursor = 'grab';
if (this.disableDrag) this.container.style.cursor = 'default';
this.removeLoader();
if (!this.fullScreenView) {
this.speedFactor = Math.floor(this.dragSpeed / 150 * 36 / this.amount * 25 * this.container.offsetWidth / 1500) || 1;
if (!this.fullscreenView) {
this.speedFactor = Math.floor(this.dragSpeed / 150 * 36 / this.amountX * 25 * this.container.offsetWidth / 1500) || 1;
} else {

@@ -358,5 +856,9 @@ var containerRatio = this.container.offsetHeight / this.container.offsetWidth;

this.speedFactor = Math.floor(this.dragSpeed / 150 * 36 / this.amount * 25 * imageOffsetWidth / 1500) || 1;
this.speedFactor = Math.floor(this.dragSpeed / 150 * 36 / this.amountX * 25 * imageOffsetWidth / 1500) || 1;
}
if (this.imageOffset) {
this.activeImageX = this.imageOffset;
};
if (this.autoplay) {

@@ -376,3 +878,3 @@ this.play();

value: function onFirstImageLoaded(event) {
var _this = this;
var _this2 = this;

@@ -383,3 +885,3 @@ if (!this.hide360Logo) {

if (this.fullScreenView) {
if (this.fullscreenView) {
this.canvas.width = window.innerWidth * this.devicePixelRatio;

@@ -398,18 +900,38 @@ this.canvas.style.width = window.innerWidth + 'px';

this.offset = { x: offsetX, y: offsetY };
ctx.drawImage(event.target, offsetX, offsetY, width, height);
} else {
this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
this.canvas.style.width = this.container.offsetWidth + 'px';
this.canvas.height = this.container.offsetWidth * this.devicePixelRatio / event.target.width * event.target.height;
this.canvas.style.height = this.container.offsetWidth / event.target.width * event.target.height + 'px';
var _ctx = this.canvas.getContext("2d");
var imagePreview = event.target;
_ctx.drawImage(event.target, 0, 0, this.canvas.width, this.canvas.height);
if (this.imageOffset) {
imagePreview = this.imagesX[this.imageOffset];
}
if (this.container.offsetWidth === 0) {
var modalRef = this.container.parentElement;
this.canvas.width = parseInt(modalRef.style.width) * this.devicePixelRatio;
this.canvas.style.width = modalRef.style.width;
this.canvas.height = parseInt(modalRef.style.height) * this.devicePixelRatio / event.target.width * event.target.height;
this.canvas.style.height = parseInt(modalRef.style.width) / event.target.width * event.target.height + 'px';
}
if (this.container.offsetWidth > 0) {
this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
this.canvas.style.width = this.container.offsetWidth + 'px';
this.canvas.height = this.container.offsetWidth * this.devicePixelRatio / event.target.width * event.target.height;
this.canvas.style.height = this.container.offsetWidth / event.target.width * event.target.height + 'px';
}
_ctx.drawImage(imagePreview, 0, 0, this.canvas.width, this.canvas.height);
}
if (this.lazyload && !this.fullScreenView) {
this.images.forEach(function (image, index) {
if (this.lazyload && !this.fullscreenView) {
this.imagesX.forEach(function (image, index) {
if (index === 0) {
_this.innerBox.removeChild(_this.lazyloadInitImage);
_this2.innerBox.removeChild(_this2.lazyloadInitImage);
return;

@@ -430,44 +952,65 @@ }

if (this.magnifier && !this.fullScreenView) {
if (this.fullscreenView) {
this.addCloseFullscreenView();
}
if (this.magnifier && !this.fullscreenView || this.magnifyInFullscreen) {
this.addMagnifier();
}
if (this.boxShadow && !this.fullScreenView) {
if (this.boxShadow && !this.fullscreenView) {
this.addBoxShadow();
}
if (this.bottomCircle && !this.fullScreenView) {
if (this.bottomCircle && !this.fullscreenView) {
this.add360ViewCircleIcon();
}
if (this.fullScreen && !this.fullScreenView) {
this.addFullScreenIcon();
} else if (this.fullScreenView) {
this.addCloseFullScreenView();
if (this.fullscreen && !this.fullscreenView) {
this.addFullscreenIcon();
}
if (!this.isMobile && !this.fullscreenView && !this.disablePointerZoom) {
this.addResetZoomIcon();
}
}
}, {
key: 'incrementLoadedImages',
value: function incrementLoadedImages(orientation) {
if (orientation === _ci2.ORIENTATIONS.Y) {
this.loadedImagesY += 1;
} else {
this.loadedImagesX += 1;
}
}
}, {
key: 'onImageLoad',
value: function onImageLoad(index, event) {
var percentage = Math.round(this.loadedImages / this.amount * 100);
value: function onImageLoad(index, orientation, event) {
this.incrementLoadedImages(orientation);
this.loadedImages += 1;
var totalAmount = this.amountX + this.amountY;
var totalLoadedImages = this.loadedImagesX + this.loadedImagesY;
var percentage = Math.round(totalLoadedImages / totalAmount * 100);
this.updatePercentageInLoader(percentage);
if (this.loadedImages === this.amount) {
this.onAllImagesLoaded(event);
} else if (index === 0) {
if (index === 0 && orientation !== _ci2.ORIENTATIONS.Y) {
this.onFirstImageLoaded(event);
}
if (totalLoadedImages === totalAmount) {
this.onAllImagesLoaded(event);
}
}
}, {
key: 'addCloseFullScreenView',
value: function addCloseFullScreenView() {
var closeFullScreenIcon = document.createElement('div');
key: 'addCloseFullscreenView',
value: function addCloseFullscreenView(event) {
var closeFullscreenIcon = document.createElement('div');
closeFullscreenIcon.className = 'cloudimage-360-close-fullscreen-icon';
closeFullscreenIcon.onclick = this.setFullscreenEvents.bind(this, event);
(0, _ci.setCloseFullScreenViewStyles)(closeFullScreenIcon);
window.onkeyup = this.setFullscreenEvents.bind(this, event);
closeFullScreenIcon.onclick = this.closeFullScreenModal.bind(this);
this.innerBox.appendChild(closeFullScreenIcon);
this.iconsContainer.appendChild(closeFullscreenIcon);
}

@@ -479,4 +1022,3 @@ }, {

(0, _ci.set360ViewIconStyles)(view360Icon);
view360Icon.className = 'cloudimage-360-view-360-icon';
view360Icon.innerText = '0%';

@@ -488,13 +1030,30 @@

}, {
key: 'addFullScreenIcon',
value: function addFullScreenIcon() {
var fullScreenIcon = document.createElement('div');
key: 'addFullscreenIcon',
value: function addFullscreenIcon() {
var fullscreenIcon = document.createElement('div');
(0, _ci.setFullScreenIconStyles)(fullScreenIcon);
fullscreenIcon.className = 'cloudimage-360-fullscreen-icon';
fullscreenIcon.onclick = this.openFullscreenModal.bind(this);
fullScreenIcon.onclick = this.openFullScreenModal.bind(this);
this.fullscreenIcon = fullscreenIcon;
this.innerBox.appendChild(fullScreenIcon);
this.iconsContainer.appendChild(fullscreenIcon);
}
}, {
key: 'hideFullscreenIcon',
value: function hideFullscreenIcon() {
if (!this.fullscreenIcon) return;
this.fullscreenIcon.style.opacity = '0.4';
this.fullscreenIcon.style.pointerEvents = 'none';
}
}, {
key: 'showFullscreenIcon',
value: function showFullscreenIcon() {
if (!this.fullscreenIcon) return;
this.fullscreenIcon.style.opacity = '1';
this.fullscreenIcon.style.pointerEvents = 'auto';
}
}, {
key: 'addMagnifier',

@@ -504,15 +1063,35 @@ value: function addMagnifier() {

(0, _ci.setMagnifyIconStyles)(magnifyIcon, this.fullScreen);
magnifyIcon.className = 'cloudimage-360-magnifier-icon';
magnifyIcon.onclick = this.magnify.bind(this);
this.innerBox.appendChild(magnifyIcon);
this.magnifierIcon = magnifyIcon;
this.iconsContainer.appendChild(magnifyIcon);
}
}, {
key: 'disableMagnifierIcon',
value: function disableMagnifierIcon() {
if (!this.magnifierIcon) return;
this.magnifierIcon.style.opacity = '0.4';
this.magnifierIcon.style.pointerEvents = 'none';
}
}, {
key: 'enableMagnifierIcon',
value: function enableMagnifierIcon() {
if (!this.magnifierIcon) return;
this.magnifierIcon.style.opacity = '1';
this.magnifierIcon.style.pointerEvents = 'auto';
}
}, {
key: 'getOriginalSrc',
value: function getOriginalSrc() {
var currentImage = this.images[this.activeImage - 1];
var lastIndex = currentImage.src.lastIndexOf('//');
var currentImage = this.originalImagesX[this.activeImageX - 1];
return lastIndex > 10 ? currentImage.src.slice(lastIndex) : currentImage.src;
if (this.movingDirection === _ci2.ORIENTATIONS.Y) {
currentImage = this.originalImagesY[this.activeImageY - 1];
};
return currentImage.src;
}

@@ -522,11 +1101,12 @@ }, {

value: function magnify() {
var _this2 = this;
var _this3 = this;
var image = new Image();
var src = this.getOriginalSrc();
this.isMagnifyOpen = true;
image.src = src;
image.onload = function () {
if (_this2.glass) {
_this2.glass.style.cursor = 'none';
if (_this3.glass) {
_this3.glass.style.cursor = 'none';
}

@@ -537,3 +1117,4 @@ };

this.container.style.overflow = 'hidden';
(0, _ci.magnify)(this.container, src, this.glass, this.magnifier || 3);
(0, _ci.magnify)(this.container, this.offset, src, this.glass, this.magnifier || 3);
}

@@ -548,27 +1129,44 @@ }, {

this.glass = null;
this.isMagnifyOpen = false;
}
}, {
key: 'openFullScreenModal',
value: function openFullScreenModal() {
var fullScreenModal = document.createElement('div');
key: 'openFullscreenModal',
value: function openFullscreenModal() {
var fullscreenModal = document.createElement('div');
(0, _ci.setFullScreenModalStyles)(fullScreenModal);
fullscreenModal.className = 'cloudimage-360-fullscreen-modal';
var fullScreenContainer = this.container.cloneNode();
var image = this.images[0];
var fullscreenContainer = this.container.cloneNode();
var image = this.imagesX[0];
var ratio = image.height / image.width;
fullScreenContainer.style.height = '100%';
fullScreenContainer.style.maxHeight = '100%';
fullscreenContainer.style.height = '100%';
fullscreenContainer.style.maxHeight = '100%';
fullScreenModal.appendChild(fullScreenContainer);
fullscreenModal.appendChild(fullscreenContainer);
window.document.body.appendChild(fullScreenModal);
window.document.body.style.overflow = 'hidden';
window.document.body.appendChild(fullscreenModal);
new CI360Viewer(fullScreenContainer, true, ratio);
new CI360Viewer(fullscreenContainer, true, ratio);
}
}, {
key: 'closeFullScreenModal',
value: function closeFullScreenModal() {
key: 'setFullscreenEvents',
value: function setFullscreenEvents(_, event) {
if (event.type === 'click') return this.closeFullscreenModal();
if (event.key === 'Escape') return this.closeFullscreenModalOnEsc();
}
}, {
key: 'closeFullscreenModalOnEsc',
value: function closeFullscreenModalOnEsc() {
if (this.container.parentNode.parentNode === document.body) {
this.closeFullscreenModal();
};
}
}, {
key: 'closeFullscreenModal',
value: function closeFullscreenModal() {
document.body.removeChild(this.container.parentNode);
window.document.body.style.overflow = 'visible';
}

@@ -580,4 +1178,7 @@ }, {

(0, _ci.set360ViewCircleIconStyles)(view360CircleIcon, this.bottomCircleOffset);
view360CircleIcon.src = 'https://scaleflex.ultrafast.io/https://scaleflex.api.airstore.io/v1/get/_/2236d56f-914a-5a8b-a3ae-f7bde1c50000/360.svg';
view360CircleIcon.style.bottom = this.bottomCircleOffset + '%';
view360CircleIcon.className = 'cloudimage-360-view-360-circle';
this.view360CircleIcon = view360CircleIcon;

@@ -609,8 +1210,37 @@ this.innerBox.appendChild(view360CircleIcon);

}, {
key: 'addResetZoomIcon',
value: function addResetZoomIcon() {
var resetZoomIcon = document.createElement('div');
resetZoomIcon.className = 'cloudimage-360-reset-zoom-icon';
this.resetZoomIcon = resetZoomIcon;
resetZoomIcon.onmouseenter = this.resetZoom.bind(this);
this.iconsContainer.appendChild(resetZoomIcon);
}
}, {
key: 'hideResetZoomIcon',
value: function hideResetZoomIcon() {
if (!this.resetZoomIcon) return;
if (this.magnifierIcon) this.enableMagnifierIcon();
if (this.fullscreenIcon) this.showFullscreenIcon();
this.resetZoomIcon.style.display = 'none';
}
}, {
key: 'showResetZoomIcon',
value: function showResetZoomIcon() {
if (!this.resetZoomIcon) return;
if (this.magnifierIcon) this.disableMagnifierIcon();
if (this.fullscreenIcon) this.hideFullscreenIcon();
this.resetZoomIcon.style.display = 'block';
}
}, {
key: 'addLoader',
value: function addLoader() {
var loader = document.createElement('div');
loader.className = 'cloudimage-360-loader';
(0, _ci.setLoaderStyles)(loader);
this.loader = loader;

@@ -624,3 +1254,4 @@ this.innerBox.appendChild(loader);

(0, _ci.setBoxShadowStyles)(boxShadow, this.boxShadow);
boxShadow.className = 'cloudimage-360-box-shadow';
boxShadow.style.boxShadow = this.boxShadow;

@@ -646,5 +1277,31 @@ this.innerBox.appendChild(boxShadow);

}, {
key: 'isCompletedCyle',
value: function isCompletedCyle() {
switch (this.autoplayBehavior) {
case _ci2.AUTOPLAY_BEHAVIOR.SPIN_XY:
case _ci2.AUTOPLAY_BEHAVIOR.SPIN_Y:
{
var isReachedTheEdge = this.reversed ? this.activeImageY === 1 : this.activeImageY === this.amountY;
if (isReachedTheEdge) return true;
return false;
}
case _ci2.AUTOPLAY_BEHAVIOR.SPIN_X:
case _ci2.AUTOPLAY_BEHAVIOR.SPIN_YX:
default:
{
var _isReachedTheEdge = this.reversed ? this.activeImageX === 1 : this.activeImageX === this.amountX;
if (_isReachedTheEdge) return true;
return false;
}
}
}
}, {
key: 'play',
value: function play() {
var _this3 = this;
var _this4 = this;

@@ -655,3 +1312,9 @@ if (this.bottomCircle) this.hide360ViewCircleIcon();

this.loopTimeoutId = window.setInterval(function () {
_this3.loop(_this3.reversed);
_this4.loop(_this4.reversed);
var isPlayedOnce = _this4.isCompletedCyle();
if (_this4.playOnce && isPlayedOnce) {
window.clearTimeout(_this4.loopTimeoutId);
}
}, this.autoplaySpeed);

@@ -662,3 +1325,3 @@ }

value: function stop() {
if (this.bottomCircle) this.show360ViewCircleIcon();
if (this.bottomCircle && !this.zoomIntensity) this.show360ViewCircleIcon();
window.clearTimeout(this.loopTimeoutId);

@@ -669,6 +1332,5 @@ }

value: function getSrc(responsive, container, folder, filename, _ref) {
var ciSize = _ref.ciSize,
ciToken = _ref.ciToken,
ciOperation = _ref.ciOperation,
ciFilters = _ref.ciFilters;
var ciToken = _ref.ciToken,
ciFilters = _ref.ciFilters,
ciTransformation = _ref.ciTransformation;

@@ -680,3 +1342,3 @@ var src = '' + folder + filename;

if (this.fullScreenView) {
if (this.fullscreenView) {
var containerRatio = container.offsetHeight / container.offsetWidth;

@@ -689,5 +1351,5 @@

var ciSizeNext = (0, _ci.getSizeAccordingToPixelRatio)(ciSize || (0, _ci.getResponsiveWidthOfContainer)(imageOffsetWidth));
var ciSizeNext = (0, _ci.getSizeAccordingToPixelRatio)((0, _ci.getResponsiveWidthOfContainer)(imageOffsetWidth));
src = 'https://' + ciToken + '.cloudimg.io/' + ciOperation + '/' + ciSizeNext + '/' + ciFilters + '/' + src;
src = 'https://' + ciToken + '.cloudimg.io/v7/' + src + '?' + (ciTransformation ? ciTransformation : 'width=' + ciSizeNext) + (ciFilters ? '&f=' + ciFilters : '');
}

@@ -699,5 +1361,13 @@

key: 'preloadImages',
value: function preloadImages(amount, src, lazyload, lazySelector, container, responsive, ciParams) {
var _this4 = this;
value: function preloadImages(amount, src) {
var orientation = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _ci2.ORIENTATIONS.X;
var lazyload = arguments[3];
var lazySelector = arguments[4];
var container = arguments[5];
var _this5 = this;
var responsive = arguments[6];
var ciParams = arguments[7];
if (this.imageList) {

@@ -707,8 +1377,10 @@ try {

this.amount = images.length;
this.amountX = images.length;
images.forEach(function (src, index) {
var folder = /(http(s?)):\/\//gi.test(src) ? '' : _this4.folder;
var resultSrc = _this4.getSrc(responsive, container, folder, src, ciParams);
var folder = /(http(s?)):\/\//gi.test(src) ? '' : _this5.folder;
var resultSrc = _this5.getSrc(responsive, container, folder, src, ciParams);
var lastIndex = resultSrc.lastIndexOf('//');
var originalSrc = resultSrc.slice(lastIndex);
_this4.addImage(resultSrc, lazyload, lazySelector, index);
_this5.addImage(resultSrc, originalSrc, orientation, lazyload, lazySelector, index);
});

@@ -720,5 +1392,7 @@ } catch (error) {

[].concat(_toConsumableArray(new Array(amount))).map(function (_item, index) {
var nextZeroFilledIndex = (0, _ci.pad)(index + 1, _this4.indexZeroBase);
var nextZeroFilledIndex = (0, _ci.pad)(index + 1, _this5.indexZeroBase);
var resultSrc = src.replace('{index}', nextZeroFilledIndex);
_this4.addImage(resultSrc, lazyload, lazySelector, index);
var originalSrc = resultSrc.replace(_ci2.ORGINAL_SIZE_REGEX, '').replace(_ci2.AND_SYMBOL_REGEX, '?');
_this5.addImage(resultSrc, originalSrc, orientation, lazyload, lazySelector, index);
});

@@ -729,6 +1403,7 @@ }

key: 'addImage',
value: function addImage(resultSrc, lazyload, lazySelector, index) {
value: function addImage(resultSrc, originalSrc, orientation, lazyload, lazySelector, index) {
var image = new Image();
var originalImage = new Image();
if (lazyload && !this.fullScreenView) {
if (lazyload && !this.fullscreenView) {
image.setAttribute('data-src', resultSrc);

@@ -746,7 +1421,15 @@ image.className = image.className.length ? image.className + (' ' + lazySelector) : lazySelector;

image.src = resultSrc;
originalImage.src = originalSrc;
}
image.onload = this.onImageLoad.bind(this, index);
image.onerror = this.onImageLoad.bind(this, index);
this.images.push(image);
image.onload = this.onImageLoad.bind(this, index, orientation);
image.onerror = this.onImageLoad.bind(this, index, orientation);
if (orientation === _ci2.ORIENTATIONS.Y) {
this.imagesY.push(image);
this.originalImagesY.push(originalImage);
} else {
this.imagesX.push(image);
this.originalImagesX.push(originalImage);
}
}

@@ -760,3 +1443,3 @@ }, {

var newElement = oldElement.cloneNode(true);
var innerBox = newElement.querySelector('.cloudimage-inner-box');
var innerBox = newElement.querySelector('.cloudimage-360-inner-box');

@@ -775,54 +1458,104 @@ newElement.className = newElement.className.replace(' initialized', '');

value: function initControls() {
var _this5 = this;
var _this6 = this;
var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;
var prev = this.container.querySelector('.cloudimage-360-prev');
var next = this.container.querySelector('.cloudimage-360-next');
// TODO [deprecated]: remove .cloud-360-left, .cloud-360-right in the upcoming versions
var left = this.container.querySelector('.cloudimage-360-left') || this.container.querySelector('.cloudimage-360-prev');
var right = this.container.querySelector('.cloudimage-360-right') || this.container.querySelector('.cloudimage-360-next');
if (!prev && !next) return;
var top = this.container.querySelector('.cloudimage-360-top');
var bottom = this.container.querySelector('.cloudimage-360-bottom');
if (!left && !right && !top && !bottom) return;
var onLeftStart = function onLeftStart(event) {
event.stopPropagation();
_this5.onSpin();
_this5.prev();
_this5.loopTimeoutId = window.setInterval(_this5.prev.bind(_this5), _this5.autoplaySpeed);
_this6.onSpin();
_this6.left();
_this6.loopTimeoutId = window.setInterval(_this6.left.bind(_this6), _this6.autoplaySpeed);
};
var onRightStart = function onRightStart(event) {
event.stopPropagation();
_this5.onSpin();
_this5.next();
_this5.loopTimeoutId = window.setInterval(_this5.next.bind(_this5), _this5.autoplaySpeed);
_this6.onSpin();
_this6.right();
_this6.loopTimeoutId = window.setInterval(_this6.right.bind(_this6), _this6.autoplaySpeed);
};
var onTopStart = function onTopStart(event) {
event.stopPropagation();
_this6.onSpin();
_this6.top();
_this6.loopTimeoutId = window.setInterval(_this6.top.bind(_this6), _this6.autoplaySpeed);
};
var onBottomStart = function onBottomStart(event) {
event.stopPropagation();
_this6.onSpin();
_this6.bottom();
_this6.loopTimeoutId = window.setInterval(_this6.bottom.bind(_this6), _this6.autoplaySpeed);
};
var onLeftEnd = function onLeftEnd() {
_this5.onFinishSpin();
window.clearTimeout(_this5.loopTimeoutId);
_this6.onFinishSpin();
window.clearTimeout(_this6.loopTimeoutId);
};
var onRightEnd = function onRightEnd() {
_this5.onFinishSpin();
window.clearTimeout(_this5.loopTimeoutId);
_this6.onFinishSpin();
window.clearTimeout(_this6.loopTimeoutId);
};
if (prev) {
prev.style.display = 'block';
prev.addEventListener('mousedown', isReverse ? onRightStart : onLeftStart);
prev.addEventListener('touchstart', isReverse ? onRightStart : onLeftStart);
prev.addEventListener('mouseup', isReverse ? onRightEnd : onLeftEnd);
prev.addEventListener('touchend', isReverse ? onRightEnd : onLeftEnd);
var onTopEnd = function onTopEnd() {
_this6.onFinishSpin();
window.clearTimeout(_this6.loopTimeoutId);
};
this.prevElem = prev;
var onBottomEnd = function onBottomEnd() {
_this6.onFinishSpin();
window.clearTimeout(_this6.loopTimeoutId);
};
if (left) {
left.style.display = 'block';
left.addEventListener('mousedown', isReverse ? onRightStart : onLeftStart);
left.addEventListener('touchstart', isReverse ? onRightStart : onLeftStart, { passive: true });
left.addEventListener('mouseup', isReverse ? onRightEnd : onLeftEnd);
left.addEventListener('touchend', isReverse ? onRightEnd : onLeftEnd);
this.leftElem = left;
}
if (next) {
next.style.display = 'block';
next.addEventListener('mousedown', isReverse ? onLeftStart : onRightStart);
next.addEventListener('touchstart', isReverse ? onLeftStart : onRightStart);
next.addEventListener('mouseup', isReverse ? onLeftEnd : onRightEnd);
next.addEventListener('touchend', isReverse ? onLeftEnd : onRightEnd);
if (right) {
right.style.display = 'block';
right.addEventListener('mousedown', isReverse ? onLeftStart : onRightStart);
right.addEventListener('touchstart', isReverse ? onLeftStart : onRightStart, { passive: true });
right.addEventListener('mouseup', isReverse ? onLeftEnd : onRightEnd);
right.addEventListener('touchend', isReverse ? onLeftEnd : onRightEnd);
this.nextElem = next;
this.rightElem = right;
}
if (isReverse ? next : prev) {
if (top) {
top.style.display = 'block';
top.addEventListener('mousedown', isReverse ? onBottomStart : onTopStart);
top.addEventListener('touchstart', isReverse ? onBottomStart : onTopStart);
top.addEventListener('mouseup', isReverse ? onBottomEnd : onTopEnd);
top.addEventListener('touchend', isReverse ? onBottomEnd : onTopEnd);
this.topElem = top;
}
if (bottom) {
bottom.style.display = 'block';
bottom.addEventListener('mousedown', isReverse ? onTopStart : onBottomStart);
bottom.addEventListener('touchstart', isReverse ? onTopStart : onBottomStart);
bottom.addEventListener('mouseup', isReverse ? onTopEnd : onBottomEnd);
bottom.addEventListener('touchend', isReverse ? onTopEnd : onBottomEnd);
this.bottomElem = bottom;
}
if (isReverse ? right : left) {
if (this.stopAtEdges) {
(0, _ci.addClass)(isReverse ? next : prev, 'not-active');
(0, _ci.addClass)(isReverse ? right : left, 'not-active');
}

@@ -835,6 +1568,14 @@ }

this.innerBox = document.createElement('div');
this.innerBox.className = 'cloudimage-inner-box';
this.innerBox.className = 'cloudimage-360-inner-box';
this.container.appendChild(this.innerBox);
}
}, {
key: 'addIconsContainer',
value: function addIconsContainer() {
this.iconsContainer = document.createElement('div');
this.iconsContainer.className = 'cloudimage-360-icons-container';
this.innerBox.appendChild(this.iconsContainer);
}
}, {
key: 'addCanvas',

@@ -856,19 +1597,29 @@ value: function addCanvas() {

value: function attachEvents(draggable, swipeable, keys) {
if (draggable) {
this.container.addEventListener('mousedown', this.mousedown.bind(this));
this.container.addEventListener('mouseup', this.mouseup.bind(this));
this.container.addEventListener('mousemove', this.mousemove.bind(this));
var _this7 = this;
window.addEventListener('resize', (0, _ci.debounce)(function () {
_this7.requestResizedImages();
}, 300));
if (draggable && !this.disableDrag) {
this.container.addEventListener('mousedown', this.mouseDown.bind(this));
this.container.addEventListener('mousemove', this.mouseMove.bind(this));
document.addEventListener('mouseup', this.mouseUp.bind(this));
}
if (swipeable) {
this.container.addEventListener('touchstart', this.touchstart.bind(this), { passive: true });
this.container.addEventListener('touchend', this.touchend.bind(this), { passive: true });
this.container.addEventListener('touchmove', this.touchmove.bind(this));
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 });
}
if (!this.disablePointerZoom && !this.fullscreenView) {
this.container.addEventListener('wheel', this.mouseScroll.bind(this));
}
if (keys) {
document.addEventListener('keydown', this.keydown.bind(this));
document.addEventListener('keyup', this.keyup.bind(this));
document.addEventListener('keydown', this.keyDown.bind(this));
document.addEventListener('keyup', this.keyUp.bind(this));
} else {
document.addEventListener('keydown', this.keydownGeneral.bind(this));
document.addEventListener('keydown', this.keyDownGeneral.bind(this));
}

@@ -886,2 +1637,22 @@ }

}, {
key: 'setMouseLeaveActions',
value: function setMouseLeaveActions(actions) {
var _this8 = this;
var mouseLeaveActions = actions.split(',');
mouseLeaveActions.forEach(function (action) {
return _this8.applyMouseLeaveAction(action);
});
}
}, {
key: 'applyMouseLeaveAction',
value: function applyMouseLeaveAction(action) {
switch (action) {
case _ci2.MOUSE_LEAVE_ACTIONS.RESET_ZOOM:
this.container.addEventListener('mouseleave', this.resetZoom.bind(this));
break;
}
}
}, {
key: 'init',

@@ -891,6 +1662,9 @@ value: function init(container) {

folder = _get360ViewProps.folder,
filename = _get360ViewProps.filename,
filenameX = _get360ViewProps.filenameX,
filenameY = _get360ViewProps.filenameY,
imageList = _get360ViewProps.imageList,
indexZeroBase = _get360ViewProps.indexZeroBase,
amount = _get360ViewProps.amount,
amountX = _get360ViewProps.amountX,
amountY = _get360ViewProps.amountY,
imageOffset = _get360ViewProps.imageOffset,
_get360ViewProps$drag = _get360ViewProps.draggable,

@@ -905,12 +1679,25 @@ draggable = _get360ViewProps$drag === undefined ? true : _get360ViewProps$drag,

autoplay = _get360ViewProps.autoplay,
autoplayBehavior = _get360ViewProps.autoplayBehavior,
playOnce = _get360ViewProps.playOnce,
pointerZoomFactor = _get360ViewProps.pointerZoomFactor,
pinchZoomFactor = _get360ViewProps.pinchZoomFactor,
maxScale = _get360ViewProps.maxScale,
toStartPointerZoom = _get360ViewProps.toStartPointerZoom,
onMouseLeave = _get360ViewProps.onMouseLeave,
_get360ViewProps$disa = _get360ViewProps.disablePointerZoom,
disablePointerZoom = _get360ViewProps$disa === undefined ? true : _get360ViewProps$disa,
_get360ViewProps$disa2 = _get360ViewProps.disablePinchZoom,
disablePinchZoom = _get360ViewProps$disa2 === undefined ? true : _get360ViewProps$disa2,
speed = _get360ViewProps.speed,
autoplayReverse = _get360ViewProps.autoplayReverse,
fullScreen = _get360ViewProps.fullScreen,
_get360ViewProps$disa3 = _get360ViewProps.disableDrag,
disableDrag = _get360ViewProps$disa3 === undefined ? true : _get360ViewProps$disa3,
fullscreen = _get360ViewProps.fullscreen,
magnifier = _get360ViewProps.magnifier,
magnifyInFullscreen = _get360ViewProps.magnifyInFullscreen,
ratio = _get360ViewProps.ratio,
responsive = _get360ViewProps.responsive,
ciToken = _get360ViewProps.ciToken,
ciSize = _get360ViewProps.ciSize,
ciOperation = _get360ViewProps.ciOperation,
ciFilters = _get360ViewProps.ciFilters,
ciTransformation = _get360ViewProps.ciTransformation,
lazyload = _get360ViewProps.lazyload,

@@ -925,21 +1712,39 @@ lazySelector = _get360ViewProps.lazySelector,

var ciParams = { ciSize: ciSize, ciToken: ciToken, ciOperation: ciOperation, ciFilters: ciFilters };
var ciParams = { ciToken: ciToken, ciFilters: ciFilters, ciTransformation: ciTransformation };
this.addInnerBox();
this.addIconsContainer();
this.addLoader();
this.folder = folder;
this.filename = filename;
this.filenameX = filenameX;
this.filenameY = filenameY;
this.imageList = imageList;
this.indexZeroBase = indexZeroBase;
this.amount = amount;
this.amountX = amountX;
this.amountY = amountY;
this.allowSpinY = !!amountY && !!filenameY;
this.activeImageX = autoplayReverse ? amountX : 1;
this.activeImageY = autoplayReverse ? amountY : 1;
this.spinY = autoplayBehavior === _ci2.AUTOPLAY_BEHAVIOR.SPIN_YX ? true : false;
this.imageOffset = imageOffset;
this.bottomCircle = bottomCircle;
this.bottomCircleOffset = bottomCircleOffset;
this.boxShadow = boxShadow;
this.autoplay = autoplay && !this.isMobile;
this.autoplay = autoplay;
this.autoplayBehavior = autoplayBehavior;
this.playOnce = playOnce;
this.toStartPointerZoom = toStartPointerZoom, this.disablePointerZoom = disablePointerZoom;
this.disablePinchZoom = disablePinchZoom;
this.pointerZoomFactor = pointerZoomFactor;
this.pinchZoomFactor = pinchZoomFactor;
this.maxScale = maxScale;
this.speed = speed;
this.reversed = autoplayReverse;
this.fullScreen = fullScreen;
this.disableDrag = disableDrag;
this.fullscreen = fullscreen;
this.magnifier = !this.isMobile && magnifier ? magnifier : false;
this.magnifyInFullscreen = magnifyInFullscreen;
this.lazyload = lazyload;
this.lazySelector = lazySelector;
this.ratio = ratio;

@@ -949,6 +1754,8 @@ this.spinReverse = spinReverse;

this.dragSpeed = dragSpeed;
this.autoplaySpeed = this.speed * 36 / this.amount;
this.autoplaySpeed = this.speed * 36 / this.amountX;
this.stopAtEdges = stopAtEdges;
this.hide360Logo = hide360Logo;
this.logoSrc = logoSrc;
this.responsive = responsive;
this.ciParams = ciParams;

@@ -959,7 +1766,14 @@ this.applyStylesToContainer();

var src = this.getSrc(responsive, container, folder, filename, ciParams);
var srcX = this.getSrc(responsive, container, folder, filenameX, ciParams);
var srcY = this.getSrc(responsive, container, folder, filenameY, ciParams);
this.preloadImages(amount, src, lazyload, lazySelector, container, responsive, ciParams);
this.preloadImages(amountX, srcX, _ci2.ORIENTATIONS.X, lazyload, lazySelector, container, responsive, ciParams);
if (amountY) {
this.preloadImages(amountY, srcY, _ci2.ORIENTATIONS.Y, lazyload, lazySelector, container, responsive, ciParams);
}
this.attachEvents(draggable, swipeable, keys);
if (onMouseLeave) this.setMouseLeaveActions(onMouseLeave);
}

@@ -966,0 +1780,0 @@ }]);

221

dist/ci360.utils.js

@@ -6,9 +6,17 @@ 'use strict';

});
exports.debounce = exports.normalizeZoomFactor = exports.getMaxZoomIntensity = exports.isTwoFingers = exports.pad = exports.removeClass = exports.addClass = exports.contain = exports.getSizeAccordingToPixelRatio = exports.getResponsiveWidthOfContainer = exports.magnify = exports.setView360Icon = exports.get360ViewProps = undefined;
var _ci = require('./ci360.constants');
//TODO [deprecated]: remove filename, amount in the upcoming versions
var get360ViewProps = function get360ViewProps(image) {
return {
folder: attr(image, 'folder') || attr(image, 'data-folder') || '/',
filename: attr(image, 'filename') || attr(image, 'data-filename') || 'image-{index}.jpg',
filenameX: attr(image, 'filename') || attr(image, 'data-filename') || attr(image, 'filename-x') || attr(image, 'data-filename-x') || 'image-{index}.jpg',
filenameY: attr(image, 'filename-y') || attr(image, 'data-filename-y') || 'image-y-{index}.jpg',
imageList: attr(image, 'image-list') || attr(image, 'data-image-list') || null,
indexZeroBase: parseInt(attr(image, 'index-zero-base') || attr(image, 'data-index-zero-base') || 0, 10),
amount: parseInt(attr(image, 'amount') || attr(image, 'data-amount') || 36, 10),
amountX: parseInt(attr(image, 'amount') || attr(image, 'data-amount') || attr(image, 'amount-x') || attr(image, 'data-amount-x') || 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),

@@ -19,6 +27,17 @@ dragSpeed: parseInt(attr(image, 'drag-speed') || attr(image, 'data-drag-speed') || 150, 10),

autoplay: isTrue(image, 'autoplay'),
autoplayBehavior: attr(image, 'autoplay-behavior') || attr(image, 'data-autoplay-behavior') || _ci.AUTOPLAY_BEHAVIOR.SPIN_X,
playOnce: isTrue(image, 'play-once'),
disablePointerZoom: isTrue(image, 'disable-pointer-zoom'),
disablePinchZoom: isTrue(image, 'disable-pinch-zoom'),
onMouseLeave: attr(image, 'on-mouse-leave') || attr(image, 'data-on-mouse-leave'),
toStartPointerZoom: attr(image, 'to-start-pointer-zoom') || attr(image, 'data-to-start-pointer-zoom') || _ci.TO_START_POINTER_ZOOM.SCROLL_TO_START,
pointerZoomFactor: parseInt(attr(image, 'pointer-zoom-factor') || attr(image, 'data-pointer-zoom-factor') || 2, 10),
pinchZoomFactor: parseInt(attr(image, 'pinch-zoom-factor') || attr(image, 'data-pinch-zoom-factor') || 2, 10),
maxScale: parseFloat(attr(image, 'max-scale') || attr(image, 'data-max-scale') || 100, 10),
autoplayReverse: isTrue(image, 'autoplay-reverse'),
bottomCircle: isTrue(image, 'bottom-circle'),
fullScreen: isTrue(image, 'full-screen'),
disableDrag: isTrue(image, 'disable-drag'),
fullscreen: isTrue(image, 'fullscreen') || isTrue(image, 'full-screen'),
magnifier: (attr(image, 'magnifier') !== null || attr(image, 'data-magnifier') !== null) && parseInt(attr(image, 'magnifier') || attr(image, 'data-magnifier'), 10),
magnifyInFullscreen: isTrue(image, 'magnify-in-fullscreen') || isTrue(image, 'magnifier-in-fullscreen'),
bottomCircleOffset: parseInt(attr(image, 'bottom-circle-offset') || attr(image, 'data-bottom-circle-offset') || 5, 10),

@@ -28,5 +47,4 @@ ratio: parseFloat(attr(image, 'ratio') || attr(image, 'data-ratio') || 0) || false,

ciToken: attr(image, 'responsive') || attr(image, 'data-responsive') || 'demo',
ciSize: attr(image, 'size') || attr(image, 'data-size'),
ciOperation: attr(image, 'operation') || attr(image, 'data-operation') || 'width',
ciFilters: attr(image, 'filters') || attr(image, 'data-filters') || 'q35',
ciFilters: attr(image, 'filters') || attr(image, 'data-filters'),
ciTransformation: attr(image, 'transformation') || attr(image, 'data-transformation'),
lazyload: isTrue(image, 'lazyload'),

@@ -53,21 +71,2 @@ lazySelector: attr(image, 'lazyload-selector') || attr(image, 'data-lazyload-selector') || 'lazyload',

var set360ViewIconStyles = function set360ViewIconStyles(view360Icon) {
view360Icon.style.position = 'absolute';
view360Icon.style.top = '0';
view360Icon.style.bottom = '0';
view360Icon.style.left = '0';
view360Icon.style.right = '0';
view360Icon.style.width = '100px';
view360Icon.style.height = '100px';
view360Icon.style.margin = 'auto';
view360Icon.style.backgroundColor = 'rgba(255,255,255,0.8)';
view360Icon.style.borderRadius = '50%';
view360Icon.style.boxShadow = 'rgb(255, 255, 255, 0.5) 0px 0px 4px';
view360Icon.style.transition = '0.5s all';
view360Icon.style.color = 'rgb(80,80,80)';
view360Icon.style.textAlign = 'center';
view360Icon.style.lineHeight = '100px';
view360Icon.style.zIndex = '2';
};
var setView360Icon = function setView360Icon(view360Icon, logoSrc) {

@@ -77,108 +76,25 @@ view360Icon.style.background = 'rgba(255,255,255,0.8) url(\'' + logoSrc + '\') 50% 50% / contain no-repeat';

var set360ViewCircleIconStyles = function set360ViewCircleIconStyles(view360CircleIcon, bottomCircleOffset) {
view360CircleIcon.src = 'https://scaleflex.ultrafast.io/https://scaleflex.api.airstore.io/v1/get/_/2236d56f-914a-5a8b-a3ae-f7bde1c50000/360.svg';
view360CircleIcon.style.position = 'absolute';
view360CircleIcon.style.top = 'auto';
view360CircleIcon.style.bottom = bottomCircleOffset + '%';
view360CircleIcon.style.left = '0';
view360CircleIcon.style.right = '0';
view360CircleIcon.style.width = '80%';
view360CircleIcon.style.height = 'auto';
view360CircleIcon.style.margin = 'auto';
view360CircleIcon.style.transition = '0.5s all';
view360CircleIcon.style.zIndex = '2';
};
var magnify = function magnify(container) {
var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var src = arguments[2];
var glass = arguments[3];
var zoom = arguments[4];
var setLoaderStyles = function setLoaderStyles(loader) {
loader.className = 'cloudimage-360-loader';
loader.style.position = 'absolute';
loader.style.zIndex = '100';
loader.style.top = '0';
loader.style.left = '0';
loader.style.right = '0';
loader.style.width = '0%';
loader.style.height = '8px';
loader.style.background = 'rgb(165,175,184)';
};
var setBoxShadowStyles = function setBoxShadowStyles(boxShadow, boxShadowValue) {
boxShadow.className = 'cloudimage-360-box-shadow';
boxShadow.style.position = 'absolute';
boxShadow.style.zIndex = '99';
boxShadow.style.top = '0';
boxShadow.style.left = '0';
boxShadow.style.right = '0';
boxShadow.style.bottom = '0';
boxShadow.style.boxShadow = boxShadowValue;
};
var setMagnifyIconStyles = function setMagnifyIconStyles(magnifyIcon, fullScreen) {
magnifyIcon.style.position = 'absolute';
magnifyIcon.style.top = fullScreen ? '35px' : '5px';
magnifyIcon.style.right = '5px';
magnifyIcon.style.width = '25px';
magnifyIcon.style.height = '25px';
magnifyIcon.style.zIndex = '101';
magnifyIcon.style.cursor = 'pointer';
magnifyIcon.style.background = 'url(\'https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg\') 50% 50% / cover no-repeat';
};
var setFullScreenModalStyles = function setFullScreenModalStyles(fullScreenModal) {
fullScreenModal.style.position = 'fixed';
fullScreenModal.style.top = '0';
fullScreenModal.style.bottom = '0';
fullScreenModal.style.left = '0';
fullScreenModal.style.right = '0';
fullScreenModal.style.width = '100%';
fullScreenModal.style.height = '100%';
fullScreenModal.style.zIndex = '999';
fullScreenModal.style.background = '#fff';
};
var setFullScreenIconStyles = function setFullScreenIconStyles(fullScreenIcon) {
fullScreenIcon.style.position = 'absolute';
fullScreenIcon.style.top = '5px';
fullScreenIcon.style.right = '5px';
fullScreenIcon.style.width = '25px';
fullScreenIcon.style.height = '25px';
fullScreenIcon.style.zIndex = '101';
fullScreenIcon.style.cursor = 'pointer';
fullScreenIcon.style.background = 'url(\'https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/full_screen.svg\') 50% 50% / cover no-repeat';
};
var setCloseFullScreenViewStyles = function setCloseFullScreenViewStyles(closeFullScreenIcon) {
closeFullScreenIcon.style.position = 'absolute';
closeFullScreenIcon.style.top = '5px';
closeFullScreenIcon.style.right = '5px';
closeFullScreenIcon.style.width = '25px';
closeFullScreenIcon.style.height = '25px';
closeFullScreenIcon.style.zIndex = '101';
closeFullScreenIcon.style.cursor = 'pointer';
closeFullScreenIcon.style.background = 'url(\'https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/cross.svg\') 50% 50% / cover no-repeat';
};
var magnify = function magnify(container, src, glass, zoom) {
var w = void 0,
h = void 0,
bw = void 0;
glass.setAttribute("class", "img-magnifier-glass");
var _offset$x = offset.x,
offsetX = _offset$x === undefined ? 0 : _offset$x,
_offset$y = offset.y,
offsetY = _offset$y === undefined ? 0 : _offset$y;
var backgroundSizeX = (container.offsetWidth - offsetX * 2) * zoom;
var backgroundSizeY = (container.offsetHeight - offsetY * 2) * zoom;
glass.setAttribute("class", "cloudimage-360-img-magnifier-glass");
container.prepend(glass);
glass.style.backgroundColor = '#fff';
glass.style.backgroundImage = "url('" + src + "')";
glass.style.backgroundRepeat = "no-repeat";
glass.style.backgroundSize = container.offsetWidth * zoom + "px " + container.offsetHeight * zoom + "px";
glass.style.position = 'absolute';
glass.style.border = '3px solid #000';
glass.style.borderRadius = '50%';
glass.style.cursor = 'wait';
glass.style.lineHeight = '200px';
glass.style.textAlign = 'center';
glass.style.zIndex = '1000';
glass.style.backgroundSize = backgroundSizeX + 'px ' + backgroundSizeY + 'px';
glass.style.width = '250px';
glass.style.height = '250px';
glass.style.top = '-75px';
glass.style.right = '-85px';
bw = 3;

@@ -191,4 +107,4 @@ w = glass.offsetWidth / 2;

glass.addEventListener("touchmove", moveMagnifier);
container.addEventListener("touchmove", moveMagnifier);
glass.addEventListener("touchmove", moveMagnifier, { passive: true });
container.addEventListener("touchmove", moveMagnifier, { passive: true });

@@ -200,4 +116,2 @@ function moveMagnifier(e) {

e.preventDefault();
pos = getCursorPos(e);

@@ -226,3 +140,7 @@ x = pos.x;

glass.style.backgroundPosition = "-" + (x * zoom - w + bw) + "px -" + (y * zoom - h + bw) + "px";
var backgroundPosX = (x - offsetX) * zoom - w + bw;
var backgroundPosY = (y - offsetY) * zoom - h + bw;
glass.style.backgroundPosition = '-' + backgroundPosX + 'px -' + backgroundPosY + 'px';
}

@@ -293,2 +211,20 @@

var isTwoFingers = function isTwoFingers(event) {
return event.targetTouches.length === 2;
};
var getMaxZoomIntensity = function getMaxZoomIntensity(width, maxScale) {
var maxWidth = maxScale * width;
var maxIntensity = maxWidth - width;
return maxIntensity;
};
var normalizeZoomFactor = function normalizeZoomFactor(event, pointerZoomFactor) {
var scrollEvent = Math.abs(event.deltaY);
var zoomFactor = scrollEvent < 125 ? -pointerZoomFactor * 10 : -pointerZoomFactor;
return zoomFactor;
};
var contain = fit(true);

@@ -312,13 +248,20 @@

var debounce = function debounce(func, timeout) {
var timer = void 0;
return function () {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
clearTimeout(timer);
timer = setTimeout(function () {
func.apply(undefined, args);
}, timeout);
};
};
exports.get360ViewProps = get360ViewProps;
exports.set360ViewIconStyles = set360ViewIconStyles;
exports.set360ViewCircleIconStyles = set360ViewCircleIconStyles;
exports.setLoaderStyles = setLoaderStyles;
exports.setBoxShadowStyles = setBoxShadowStyles;
exports.setView360Icon = setView360Icon;
exports.magnify = magnify;
exports.setMagnifyIconStyles = setMagnifyIconStyles;
exports.setFullScreenModalStyles = setFullScreenModalStyles;
exports.setFullScreenIconStyles = setFullScreenIconStyles;
exports.setCloseFullScreenViewStyles = setCloseFullScreenViewStyles;
exports.getResponsiveWidthOfContainer = getResponsiveWidthOfContainer;

@@ -329,2 +272,6 @@ exports.getSizeAccordingToPixelRatio = getSizeAccordingToPixelRatio;

exports.removeClass = removeClass;
exports.pad = pad;
exports.pad = pad;
exports.isTwoFingers = isTwoFingers;
exports.getMaxZoomIntensity = getMaxZoomIntensity;
exports.normalizeZoomFactor = normalizeZoomFactor;
exports.debounce = debounce;

10

package.json
{
"name": "js-cloudimage-360-view",
"version": "2.6.0",
"version": "2.7.0",
"main": "dist/index.js",

@@ -26,7 +26,7 @@ "description": "",

"start-demo": "webpack-dev-server --mode development --config config/webpack-demo.config.js",
"clean-build": "rm -rf build",
"clean-build": "del build",
"build": "npm run clean-build && webpack --mode production --config config/webpack-build.config.js",
"clean-dist": "rm -rf dist",
"clean-dist": "del dist",
"dist": "npm run clean-dist && babel src -d dist --copy-files",
"clean-demo": "rm -rf examples/dist",
"clean-demo": "del examples/dist",
"build-demo": "npm run clean-demo && webpack --mode production --config config/webpack-demo.config.js",

@@ -50,3 +50,3 @@ "deploy-demo": "gh-pages -d examples/dist",

"gh-pages": "^2.0.1",
"highlight.js": "^9.15.6",
"highlight.js": "^10.4.1",
"html-webpack-plugin": "^3.2.0",

@@ -53,0 +53,0 @@ "mobile-detect": "^1.4.3",

130

README.md

@@ -1,2 +0,2 @@

[![Release](https://img.shields.io/badge/release-v2.6.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
[![Release](https://img.shields.io/badge/release-v2.7.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
[![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)

@@ -12,3 +12,3 @@ [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

alt="The Lounge"
src="https://demo.cloudimg.io/height/350/n/https://scaleflex.airstore.io/filerobot/filerobot-cloudimage.png?sanitize=true">
src="https://demo.cloudimg.io/v7/https://scaleflex.airstore.io/filerobot/filerobot-cloudimage.png?sanitize=true">
</p>

@@ -51,2 +51,3 @@

* [Methods](#methods)
* [Customize Icons](#customize-icons)
* [Configuration](#configuration)

@@ -73,3 +74,3 @@ * [Controls](#controls)

```javascript
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.6.0/js-cloudimage-360-view.min.js"></script>
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.7.0/js-cloudimage-360-view.min.js"></script>
```

@@ -85,3 +86,3 @@

class="cloudimage-360"
data-folder="https://scaleflex.cloudimg.io/crop/1920x700/n/https://scaleflex.airstore.io/demo/360-car/"
data-folder="https://scaleflex.airstore.io/demo/360-car/"
data-filename="iris-{index}.jpeg"

@@ -134,3 +135,22 @@ data-amount="36"

```
## <a name="customize-icons"></a> Customize icons
You can customize the icons by adding the following classes:
### Example CSS
```css
.cloudimage-360 .fullscreen-icon {
background: url(https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/full_screen.svg) 50% 50% / cover no-repeat;
}
.cloudimage-360 .magnify-icon {
background: url(https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg) 50% 50% / cover no-repeat;
}
.cloudimage-360 .close-fullscreen-icon {
background: url(https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/cross.svg) 50% 50% / cover no-repeat;
}
.cloudimage-360 .reset-zoom-icon {
background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/ic-resize.svg?vh=248986) 50% 50% / cover no-repeat;
}
```
## <a name="configuration"></a> Config

@@ -156,2 +176,8 @@

### data-filename-y (or filename-y)
###### Type: **String** | Default: **image-y-{index}.jpg** | _optional_
The filename pattern for Y-axis images. Must include {index}, which the library will replace with a number between 1 and [data-amount-y](#data-amount-y).
### <a name="data-amount"></a> data-amount (or amount)

@@ -163,2 +189,8 @@

### <a name="data-amount-y"></a> data-amount-y (or amount-y)
###### Type: **Number** | Default: **0** | _optional_
Amount of images to load in Y-axis for 360 view.
### data-keys (or keys)

@@ -176,2 +208,10 @@

### data-autoplay-behavior (or autoplay-behavior)
###### Type: **String** | Default: **spin-x** | _optional_
Changing autoplay behavior
Available behaviors (spin-x, spin-y, spin-xy, spin-yx)
### data-full-screen (or full-screen)

@@ -189,2 +229,8 @@

### data-magnifier-in-fullscreen (or magnifier-in-fullscreen)
###### Type: **bool** | Default: **false** | _optional_
enable magnifier in fullscreen modal.
### data-ratio (or ratio)

@@ -291,3 +337,47 @@

Only 360 view images close to the client's viewport will be loaded, hence accelerating the page loading time. If set to true, an additional script must be included, see [Lazy loading](#lazy-loading)
### data-disable-pointer-zoom (or disable-pointer-zoom)
###### Type: **bool** | Default: **false** | _optional_
Disable pointer zoom on desktop
### data-disable-pinch-zoom (or disable-pinch-zoom)
###### Type: **bool** | Default: **false** | _optional_
Disable pinch zoom on mobile
### data-to-start-pointer-zoom (or to-start-pointer-zoom)
###### Type: **string** | Default: **scroll** | _optional_
Events to start pointer zoom
Available events (scroll, click)
### data-on-mouse-leave (or on-mouse-leave)
###### Type: **string** | Default: **none** | _optional_
Functions called after mouse leave the container
Available functions (resetZoom)
Multiple functions can be applied, separated by "," (comma)
### data-pointer-zoom-factor (or pointer-zoom-factor)
###### Type: **Number** | Default: **2** | _optional_
Pointer zoom scaling factor
### data-pinch-zoom-factor (or pinch-zoom-factor)
###### Type: **Number** | Default: **2** | _optional_
Pinch zoom scaling factor
### data-max-scale (or max-scale)
###### Type: **Number** | Default: **none** | _optional_
Maximum scale that images can be resize to it with pointer or pinch zoom
### data-lazyload-selector (or lazyload-selector)

@@ -299,5 +389,6 @@

## <a name="controls"></a> Controls
You can add controls by adding elements with the following classes: **cloudimage-360-prev**, **cloudimage-360-next**
You can add controls by adding elements with the following classes: **cloudimage-360-prev**, **cloudimage-360-next**, **cloudimage-360-top**, **cloudimage-360-bottom**

@@ -356,2 +447,4 @@ ### Example CSS

<button class="cloudimage-360-next"></button>
<button class="cloudimage-360-top"></button>
<button class="cloudimage-360-bottom"></button>
</div>

@@ -381,11 +474,30 @@ ```

### data-transformation (or transformation)
###### Type: **String** | Default: **none** | _optional_
Applies Cloudimage resize operations to your image, e.g. width, height, crop, face crop, rotate, prevent enlargement...
Multiple transformation operations can be applied to your image, separated by "```&```" (Ampersand).
example:
```html
data-transformation="w=400&h=200&func=fit"
```
[Full documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/image-resizing)
### data-filters (or filters)
###### Type: **String** | Default: **q35** | _optional_
###### Type: **String** | Default: **none** | _optional_
Applies default Cloudimage filters to your image, e.g. fcontrast, fpixelate, fgaussian, backtransparent,
rotation... Multiple filters can be applied, separated by "```.```" (dot).
Applies Cloudimage filters to your image, e.g. brightness, contrast, greyscale, blur, Sharpen...
Multiple filters can be applied, separated by "```,```" (comma).
example:
[Full documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation/en/filters/)
```html
data-filters="bright:15,contrast:30"
```
[Full documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/image-filters)
## <a name="lazy-loading"/> Lazy Loading

@@ -392,0 +504,0 @@ 

LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc