Socket
Socket
Sign inDemoInstall

js-cloudimage-360-view

Package Overview
Dependencies
3
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.7.2-beta.3 to 2.7.2-beta.4

21

dist/ci360.constants.js

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

'use strict';
"use strict";

@@ -6,2 +6,3 @@ Object.defineProperty(exports, "__esModule", {

});
exports.falsyValues = exports.TO_START_POINTER_ZOOM = exports.ORIENTATIONS = exports.ORGINAL_SIZE_REGEX = exports.MOUSE_LEAVE_ACTIONS = exports.AUTOPLAY_BEHAVIOR = exports.AND_SYMBOL_REGEX = void 0;
var TO_START_POINTER_ZOOM = {

@@ -11,7 +12,7 @@ SCROLL_TO_START: 'scroll',

};
exports.TO_START_POINTER_ZOOM = TO_START_POINTER_ZOOM;
var MOUSE_LEAVE_ACTIONS = {
RESET_ZOOM: 'resetZoom'
};
exports.MOUSE_LEAVE_ACTIONS = MOUSE_LEAVE_ACTIONS;
var ORIENTATIONS = {

@@ -22,3 +23,3 @@ X: 'x-axis',

};
exports.ORIENTATIONS = ORIENTATIONS;
var AUTOPLAY_BEHAVIOR = {

@@ -30,14 +31,8 @@ SPIN_X: 'spin-x',

};
exports.AUTOPLAY_BEHAVIOR = AUTOPLAY_BEHAVIOR;
var ORGINAL_SIZE_REGEX = /width=\d+|w=\d+|h=\d+|&width=\d+|&w=\d+|&h=\d+|func=\w+|\?$/g;
exports.ORGINAL_SIZE_REGEX = ORGINAL_SIZE_REGEX;
var AND_SYMBOL_REGEX = /\?&/g;
exports.AND_SYMBOL_REGEX = AND_SYMBOL_REGEX;
var falsyValues = [false, 0, null, undefined, 'false', "0", 'null', 'undefined'];
exports.TO_START_POINTER_ZOOM = TO_START_POINTER_ZOOM;
exports.MOUSE_LEAVE_ACTIONS = MOUSE_LEAVE_ACTIONS;
exports.ORIENTATIONS = ORIENTATIONS;
exports.AUTOPLAY_BEHAVIOR = AUTOPLAY_BEHAVIOR;
exports.ORGINAL_SIZE_REGEX = ORGINAL_SIZE_REGEX;
exports.AND_SYMBOL_REGEX = AND_SYMBOL_REGEX;
exports.falsyValues = falsyValues;

1920

dist/ci360.service.js

@@ -1,27 +0,36 @@

'use strict';
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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; }; }();
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _ci = require('./ci360.utils');
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _ci2 = require('./ci360.constants');
var _ci = require("./ci360.utils");
require('./static/css/style.css');
var _ci2 = require("./ci360.constants");
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); } }
require("./static/css/style.css");
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var _jsCloudimage360ViewUtils = require("js-cloudimage-360-view-utils");
var CI360Viewer = function () {
function CI360Viewer(container, fullscreen, ratio) {
_classCallCheck(this, CI360Viewer);
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var CI360Viewer = /*#__PURE__*/function () {
function CI360Viewer(container, fullscreen) {
(0, _classCallCheck2.default)(this, CI360Viewer);
this.container = container;
this.movementStart = { x: 0, y: 0 };
this.movementStart = {
x: 0,
y: 0
};
this.isStartSpin = false;

@@ -35,9 +44,8 @@ this.movingDirection = _ci2.ORIENTATIONS.CENTER;

this.fullscreenView = !!fullscreen;
this.ratio = ratio;
this.imagesX = [];
this.imagesY = [];
this.originalImagesX = [];
this.originalImagesY = [];
this.resizedImagesX = [];
this.resizedImagesY = [];
this.originalImagesX = [];
this.originalImagesY = [];
this.devicePixelRatio = Math.round(window.devicePixelRatio || 1);

@@ -47,3 +55,2 @@ this.isMobile = !!('ontouchstart' in window || navigator.msMaxTouchPoints);

this.init(container);
this.clickedToZoom = false;
this.isMagnifyOpen = false;

@@ -54,19 +61,20 @@ this.isDragged = false;

this.mouseTracked = false;
this.intialPositions = { x: 0, y: 0 };
this.pointerCurrentPosition = { x: 0, y: 0 };
this.startPinchZoom = false;
this.prevDistanceBetweenFingers = 0;
this.intialPositions = {
x: 0,
y: 0
};
this.pointerCurrentPosition = {
x: 0,
y: 0
};
this.isStartedLoadOriginalImages = false;
}
_createClass(CI360Viewer, [{
key: 'mouseDown',
(0, _createClass2.default)(CI360Viewer, [{
key: "mouseDown",
value: function mouseDown(event) {
if (!this.imagesLoaded) return;
event.preventDefault();
var pageX = event.pageX,
pageY = event.pageY;
if (!this.imagesLoaded) return;
this.hideInitialIcons();

@@ -77,6 +85,13 @@

this.autoplay = false;
this.isZoomReady = true;
}
this.intialPositions = { x: pageX, y: pageY };
this.movementStart = { x: pageX, y: pageY };
this.intialPositions = {
x: pageX,
y: pageY
};
this.movementStart = {
x: pageX,
y: pageY
};
this.isClicked = true;

@@ -86,100 +101,177 @@ this.isDragged = false;

}, {
key: 'mouseUp',
key: "mouseUp",
value: function mouseUp() {
var _this = this;
if (!this.imagesLoaded || !this.isClicked) return;
this.movementStart = { x: 0, y: 0 };
this.movementStart = {
x: 0,
y: 0
};
this.isStartSpin = false;
this.isClicked = false;
if (!this.clickedToZoom) {
if (this.bottomCircle && !this.mouseTracked) {
this.show360ViewCircleIcon();
}
if (this.pointerZoom && !this.fullscreenView) {
setTimeout(function () {
_this.isZoomReady = true;
}, 50);
if (this.mouseTracked) {
this.container.style.cursor = 'zoom-out';
} else {
this.container.style.cursor = 'zoom-in';
}
} else {
this.container.style.cursor = 'grab';
} else {
this.container.style.cursor = 'nesw-resize';
}
}
}, {
key: "mouseClick",
value: function mouseClick(event) {
if (!this.pointerZoom || this.fullscreenView) return;
this.setCursorPosition(event);
this.hideInitialIcons();
if (this.bottomCircle && !this.zoomIntensity) {
this.show360ViewCircleIcon();
if (!this.isStartedLoadOriginalImages && !this.isDragged && this.isZoomReady) {
this.prepareOriginalImages(event);
}
if (this.isAllOriginalImagesLoaded && !this.isDragged && this.isZoomReady) {
this.togglePointerZoom(event);
}
;
}
}, {
key: 'mouseMove',
key: "mouseMove",
value: function mouseMove(event) {
if (!this.imagesLoaded) return;
var pageX = event.pageX,
pageY = event.pageY;
if (this.mouseTracked) {
this.setCursorPosition(event);
if (!this.isClicked) {
this.update();
}
}
if (this.isClicked) {
var nextPositions = { x: pageX, y: pageY };
var nextPositions = {
x: pageX,
y: pageY
};
this.container.style.cursor = 'grabbing';
this.updateMovingDirection(this.intialPositions, nextPositions);
this.isDragged = true;
this.movingDirection = (0, _jsCloudimage360ViewUtils.getMovingDirection)(this.isStartSpin, this.allowSpinY, this.intialPositions, nextPositions, this.movingDirection);
this.onMoveHandler(event);
}
}
}, {
key: "mouseLeave",
value: function mouseLeave() {
if (!this.imagesLoaded) return;
this.isDragged = true;
} else if (this.zoomIntensity) {
this.update();
if (this.pointerZoom && this.mouseTracked) {
this.togglePointerZoom();
}
}
}, {
key: 'updateMovingDirection',
value: function updateMovingDirection(prevPosition, nextPositions) {
if (this.isStartSpin) return;
key: "togglePointerZoom",
value: function togglePointerZoom() {
var _this2 = this;
var differenceInPositionX = Math.abs(prevPosition.x - nextPositions.x);
var differenceInPositionY = Math.abs(prevPosition.y - nextPositions.y);
var sensitivity = 10;
if (this.autoplay || this.loopTimeoutId) {
this.stop();
this.autoplay = false;
}
if (differenceInPositionX > sensitivity) this.movingDirection = _ci2.ORIENTATIONS.X;
if (this.mouseTracked) {
var zoomSteps = (0, _jsCloudimage360ViewUtils.generateZoomOutSteps)(this.pointerZoom);
this.container.style.cursor = 'zoom-in';
zoomSteps.forEach(function (step, index) {
setTimeout(function () {
_this2.zoomIntensity = step;
if (differenceInPositionY > sensitivity && this.allowSpinY) this.movingDirection = _ci2.ORIENTATIONS.Y;
_this2.update();
var isReachedIntialScale = index === zoomSteps.length - 1;
if (isReachedIntialScale) {
_this2.mouseTracked = false;
_this2.update();
}
;
}, (_this2.pointerZoom - step) * 200);
});
} else {
if (this.bottomCircle) this.hide360ViewCircleIcon();
var _zoomSteps = (0, _jsCloudimage360ViewUtils.generateZoomInSteps)(this.pointerZoom);
_zoomSteps.forEach(function (step) {
setTimeout(function () {
_this2.zoomIntensity = step;
_this2.update();
}, step * 200);
});
this.mouseTracked = true;
this.container.style.cursor = 'zoom-out';
}
}
}, {
key: 'mouseClick',
value: function mouseClick(event) {
if (!this.isDragged && this.clickedToZoom) {
this.resetZoom();
} else if (!this.isDragged) {
this.clickedToZoom = true;
this.container.style.cursor = 'nesw-resize';
key: "onOriginalImageLoad",
value: function onOriginalImageLoad(orientation, event, image, index) {
if (orientation === _ci2.ORIENTATIONS.Y) {
this.originalImagesY[index] = image;
} else {
this.originalImagesX[index] = image;
}
}
}, {
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;
var loadedOriginalXImages = this.originalImagesX.filter(function (image) {
return !!image;
});
var loadedOriginalYImages = this.originalImagesY.filter(function (image) {
return !!image;
});
var totalAmount = this.amountX + this.amountY;
var totalLoadedImages = loadedOriginalXImages.length + loadedOriginalYImages.length;
var isAllImagesLoaded = loadedOriginalXImages.length + loadedOriginalYImages.length === this.amountX + this.amountY;
var percentage = Math.round(totalLoadedImages / totalAmount * 100);
this.updatePercentageInLoader(percentage);
if (isClickedToZoom || isScrolledToZoom) {
this.container.style.cursor = 'nesw-resize';
this.initMouseScrollZoom(event);
if (isAllImagesLoaded) {
this.removeLoader();
this.togglePointerZoom(event);
this.mouseTracked = true;
this.isAllOriginalImagesLoaded = true;
}
}
}, {
key: 'closeZoomHandler',
value: function closeZoomHandler() {
this.container.style.cursor = 'grab';
this.clickedToZoom = false;
this.resetZoom();
key: "prepareOriginalImages",
value: function prepareOriginalImages(event) {
var srcX = (0, _jsCloudimage360ViewUtils.generateImagesPath)(this.srcXConfig);
this.isStartedLoadOriginalImages = true;
this.loader = (0, _jsCloudimage360ViewUtils.createLoader)(this.innerBox);
this.container.style.cursor = 'wait';
(0, _jsCloudimage360ViewUtils.preloadOriginalImages)(this.srcXConfig, srcX, this.onOriginalImageLoad.bind(this, _ci2.ORIENTATIONS.X, event));
if (this.allowSpinY) {
var srcY = (0, _jsCloudimage360ViewUtils.generateImagesPath)(this.srcYConfig);
(0, _jsCloudimage360ViewUtils.preloadOriginalImages)(this.srcXConfig, srcY, this.onOriginalImageLoad.bind(this, _ci2.ORIENTATIONS.Y, event));
}
}
}, {
key: 'touchStart',
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();

@@ -192,35 +284,37 @@

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.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',
key: "touchEnd",
value: function touchEnd() {
if (!this.imagesLoaded) return;
if (this.zoomIntensity) this.resetZoom();
this.movementStart = { x: 0, y: 0 };
if (this.bottomCircle) this.show360ViewCircleIcon();
this.movementStart = {
x: 0,
y: 0
};
this.isStartSpin = false;
this.isClicked = false;
if (this.bottomCircle) this.show360ViewCircleIcon();
}
}, {
key: 'touchMove',
key: "touchMove",
value: function touchMove(event) {
if (!this.isClicked || !this.imagesLoaded) return;
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);
}
var nextPositions = {
x: event.touches[0].clientX,
y: event.touches[0].clientY
};
this.movingDirection = (0, _jsCloudimage360ViewUtils.getMovingDirection)(this.isStartSpin, this.allowSpinY, this.intialPositions, nextPositions);
this.onMoveHandler(event);
}
}, {
key: 'keyDownGeneral',
key: "keyDownGeneral",
value: function keyDownGeneral(event) {

@@ -235,4 +329,4 @@ if (!this.imagesLoaded) return;

//ESC
if (this.clickedToZoom) {
this.closeZoomHandler();
if (this.mouseTracked) {
this.togglePointerZoom();
}

@@ -242,3 +336,3 @@ }

}, {
key: 'hideInitialIcons',
key: "hideInitialIcons",
value: function hideInitialIcons() {

@@ -254,13 +348,3 @@ if (this.glass) {

}, {
key: 'initMouseScrollZoom',
value: function initMouseScrollZoom(event) {
if (this.bottomCircle) this.hide360ViewCircleIcon();
this.hideInitialIcons();
this.mouseTracked = true;
this.setCursorPosition(event);
this.mouseScrollZoom(event);
}
}, {
key: 'setCursorPosition',
key: "setCursorPosition",
value: function setCursorPosition(event) {

@@ -273,6 +357,5 @@ this.mousePositions = {

}, {
key: 'getCursorPositionInCanvas',
key: "getCursorPositionInCanvas",
value: function getCursorPositionInCanvas() {
var canvasRect = this.canvas.getBoundingClientRect();
this.pointerCurrentPosition = {

@@ -282,143 +365,43 @@ x: this.mousePositions.x - canvasRect.left,

};
return this.pointerCurrentPosition;
}
}, {
key: 'mouseScrollZoom',
value: function mouseScrollZoom(event) {
event.preventDefault();
key: "keyDown",
value: function keyDown(event) {
if (!this.imagesLoaded) return;
if (this.autoplay || this.loopTimeoutId) {
this.stop();
this.autoplay = false;
if (this.glass) {
this.closeMagnifier();
}
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;
if (event.keyCode === 37) {
// left
this.keysReverse ? this.left() : this.right();
this.onSpin();
}
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;
if (event.keyCode === 39) {
// right
this.keysReverse ? this.right() : this.left();
this.onSpin();
}
this.update();
this.prevDistanceBetweenFingers = currentDistanceBetweenFingers;
}
}, {
key: 'resetZoom',
value: function resetZoom() {
this.startPointerZoom = false;
this.startPinchZoom = false;
this.mouseTracked = false;
this.clickedToZoom = false;
if (this.allowSpinY) {
event.preventDefault();
this.container.style.cursor = 'grab';
if (event.keyCode === 38) {
// up
this.keysReverse ? this.top() : this.bottom();
this.onSpin();
}
if (this.resetZoomIcon) this.hideResetZoomIcon();
if (this.zoomIntensity) {
this.zoomIntensity = 0;
this.update();
}
}
}, {
key: 'keyDown',
value: function keyDown(event) {
if (!this.imagesLoaded) return;
if (this.glass) {
this.closeMagnifier();
}
if ([37, 39].indexOf(event.keyCode) !== -1) {
if (37 === event.keyCode) {
if (this.reversed) this.left();else this.right();
} else if (39 === event.keyCode) {
if (this.reversed) this.right();else this.left();
if (event.keyCode === 40) {
// down
this.keysReverse ? this.bottom() : this.top();
this.onSpin();
}
this.onSpin();
}
}
}, {
key: 'onSpin',
key: "onSpin",
value: function onSpin() {

@@ -439,3 +422,3 @@ if (this.bottomCircle) {

}, {
key: 'keyUp',
key: "keyUp",
value: function keyUp(event) {

@@ -449,3 +432,3 @@ if (!this.imagesLoaded) return;

}, {
key: 'onFinishSpin',
key: "onFinishSpin",
value: function onFinishSpin() {

@@ -455,78 +438,3 @@ if (this.bottomCircle) this.show360ViewCircleIcon();

}, {
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;
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.bottomCircle) this.hide360ViewCircleIcon();
if (isMoveRight && this.movingDirection === _ci2.ORIENTATIONS.X) {
this.moveRight(currentPositionX);
this.isStartSpin = true;
} else if (isMoveLeft && this.movingDirection === _ci2.ORIENTATIONS.X) {
this.moveLeft(currentPositionX);
this.isStartSpin = true;
} else if (isMoveTop && this.movingDirection === _ci2.ORIENTATIONS.Y) {
this.moveTop(currentPositionY);
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',
key: "moveActiveIndexUp",
value: function moveActiveIndexUp(itemsSkipped) {

@@ -541,15 +449,12 @@ var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;

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

@@ -559,3 +464,3 @@ }

}, {
key: 'moveActiveIndexDown',
key: "moveActiveIndexDown",
value: function moveActiveIndexDown(itemsSkipped) {

@@ -571,10 +476,8 @@ var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;

if (isReverse ? this.rightElem : this.leftElem) {
(0, _ci.addClass)(isReverse ? this.rightElem : this.leftElem, 'not-active');
(0, _jsCloudimage360ViewUtils.addClass)(isReverse ? this.rightElem : this.leftElem, 'not-active');
}
} else {
this.activeImageX -= itemsSkipped;
if (this.leftElem) (0, _ci.removeClass)(this.leftElem, 'not-active');
if (this.rightElem) (0, _ci.removeClass)(this.rightElem, 'not-active');
if (this.leftElem) (0, _jsCloudimage360ViewUtils.removeClass)(this.leftElem, 'not-active');
if (this.rightElem) (0, _jsCloudimage360ViewUtils.removeClass)(this.rightElem, 'not-active');
}

@@ -591,3 +494,3 @@ } else {

}, {
key: 'moveActiveYIndexUp',
key: "moveActiveYIndexUp",
value: function moveActiveYIndexUp(itemsSkipped) {

@@ -603,14 +506,11 @@ var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;

if (isReverse ? this.bottomElem : this.topElem) {
(0, _ci.addClass)(isReverse ? this.bottomElem : this.topElem, 'not-active');
(0, _jsCloudimage360ViewUtils.addClass)(isReverse ? this.bottomElem : this.topElem, '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');
if (this.topElem) (0, _jsCloudimage360ViewUtils.removeClass)(this.topElem, 'not-active');
if (this.bottomElem) (0, _jsCloudimage360ViewUtils.removeClass)(this.bottomElem, 'not-active');
}
} else {
this.activeImageY = (this.activeImageY + itemsSkipped) % this.amountY || this.amountY;
if (this.activeImageY === this.amountY) this.spinY = false;

@@ -620,3 +520,3 @@ }

}, {
key: 'moveActiveYIndexDown',
key: "moveActiveYIndexDown",
value: function moveActiveYIndexDown(itemsSkipped) {

@@ -632,9 +532,8 @@ var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;

if (isReverse ? this.topElem : this.bottomElem) {
(0, _ci.addClass)(isReverse ? this.topElem : this.bottomElem, 'not-active');
(0, _jsCloudimage360ViewUtils.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');
if (this.bottomElem) (0, _jsCloudimage360ViewUtils.removeClass)(this.bottomElem, 'not-active');
if (this.topElem) (0, _jsCloudimage360ViewUtils.removeClass)(this.topElem, 'not-active');
}

@@ -651,54 +550,83 @@ } else {

}, {
key: 'loop',
value: function loop(reversed) {
switch (this.autoplayBehavior) {
case _ci2.AUTOPLAY_BEHAVIOR.SPIN_Y:
reversed ? this.bottom() : this.top();
break;
key: "moveRight",
value: function moveRight(currentPositionX) {
var itemsSkippedRight = (0, _jsCloudimage360ViewUtils.getItemSkipped)(currentPositionX, this.movementStart.x, this.speedFactor);
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 = (0, _jsCloudimage360ViewUtils.getItemSkipped)(this.movementStart.x, currentPositionX, this.speedFactor);
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 = (0, _jsCloudimage360ViewUtils.getItemSkipped)(this.movementStart.y, currentPositionY, this.speedFactor);
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 = (0, _jsCloudimage360ViewUtils.getItemSkipped)(currentPositionY, this.movementStart.y, this.speedFactor);
this.spinReverse ? this.moveActiveYIndexDown(itemsSkippedBottom) : this.moveActiveYIndexUp(itemsSkippedBottom);
this.activeImageX = 1;
this.movementStart.y = currentPositionY;
this.update();
}
}, {
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;
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.bottomCircle) this.hide360ViewCircleIcon();
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();
if (isMoveRight && this.movingDirection === _ci2.ORIENTATIONS.X) {
this.moveRight(currentPositionX);
this.isStartSpin = true;
} else if (isMoveLeft && this.movingDirection === _ci2.ORIENTATIONS.X) {
this.moveLeft(currentPositionX);
this.isStartSpin = true;
} else if (isMoveTop && this.movingDirection === _ci2.ORIENTATIONS.Y) {
this.moveTop(currentPositionY);
this.isStartSpin = true;
} else if (isMoveBottom && this.movingDirection === _ci2.ORIENTATIONS.Y) {
this.moveBottom(currentPositionY);
this.isStartSpin = true;
}
}
}, {
key: 'right',
value: function right() {
key: "left",
value: function left() {
this.movingDirection = _ci2.ORIENTATIONS.X;
this.activeImageY = this.reversed ? this.amountY : 1;
this.moveActiveIndexUp(1);
this.moveActiveIndexDown(1);
this.update();
}
}, {
key: 'left',
value: function left() {
key: "right",
value: function right() {
this.movingDirection = _ci2.ORIENTATIONS.X;
this.activeImageY = this.reversed ? this.amountY : 1;
this.moveActiveIndexDown(1);
this.moveActiveIndexUp(1);
this.update();
}
}, {
key: 'top',
key: "top",
value: function top() {
this.movingDirection = _ci2.ORIENTATIONS.Y;
this.activeImageX = this.reversed ? this.amountX : 1;
this.moveActiveYIndexUp(1);

@@ -708,7 +636,6 @@ this.update();

}, {
key: 'bottom',
key: "bottom",
value: function bottom() {
this.movingDirection = _ci2.ORIENTATIONS.Y;
this.activeImageX = this.reversed ? this.amountX : 1;
this.moveActiveYIndexDown(1);

@@ -718,41 +645,32 @@ this.update();

}, {
key: 'getContainerResponsiveWidth',
value: function getContainerResponsiveWidth() {
var parentEl = this.container.parentNode || {};
if (this.containerWidth) {
if (parentEl.offsetWidth < this.containerWidth) {
return parentEl.offsetWidth;
}
return this.containerWidth;
}
return parentEl.offsetWidth;
key: "loop",
value: function loop(reversed) {
var loopTriggers = {
left: this.left.bind(this),
right: this.right.bind(this),
top: this.top.bind(this),
bottom: this.bottom.bind(this)
};
(0, _jsCloudimage360ViewUtils.loop)(this.autoplayBehavior, this.spinY, reversed, loopTriggers);
}
}, {
key: 'getContainerResponsiveHeight',
value: function getContainerResponsiveHeight(width) {
if (this.containerHeight) {
if (width < this.containerHeight) {
return width;
}
return this.containerHeight;
}
return this.container.offsetWidth;
}
}, {
key: 'updateContainerSize',
key: "updateContainerSize",
value: function updateContainerSize(image) {
var parentEl = this.container.parentNode || {};
var imageAspectRatio = image.width / image.height;
var isProvidedHeightLessThanWidth = this.containerHeight < this.containerWidth;
var containerWidth = this.getContainerResponsiveWidth();
var containerHeight = this.getContainerResponsiveHeight(containerWidth);
var containerWidth = (0, _jsCloudimage360ViewUtils.getContainerResponsiveWidth)(parentEl, this.containerWidth);
var containerHeight = (0, _jsCloudimage360ViewUtils.getContainerResponsiveHeight)(this.container, containerWidth, this.containerHeight);
if (this.fullscreenView) {
this.container.width = window.innerWidth * this.devicePixelRatio;
this.container.style.width = window.innerWidth + 'px';
this.container.height = window.innerHeight * this.devicePixelRatio;
this.container.style.height = window.innerHeight + 'px';
return;
}
if (this.containerWidth && this.containerHeight) {
this.container.style.width = containerWidth + 'px';
this.container.style.height = containerHeight / imageAspectRatio + 'px';
return;

@@ -763,3 +681,2 @@ }

this.container.style.height = containerHeight / imageAspectRatio + 'px';
return;

@@ -777,91 +694,43 @@ }

}, {
key: 'onLoadResizedImages',
value: function onLoadResizedImages(orientation, event) {
this.incrementLoadedImages(orientation);
var totalAmount = this.amountX + this.amountY;
var totalLoadedImages = this.loadedImagesX + this.loadedImagesY;
if (this.loadedImagesX === 1 && orientation !== _ci2.ORIENTATIONS.Y) {
this.updateContainerSize(event.target);
}
if (totalLoadedImages === totalAmount) {
this.replaceImages(orientation);
this.update();
}
}
}, {
key: 'replaceImages',
value: function replaceImages(orientation) {
key: "onResizedImageLoad",
value: function onResizedImageLoad(orientation, image, index) {
if (orientation === _ci2.ORIENTATIONS.Y) {
this.imagesY = this.resizedImagesY;
this.resizedImagesY[index] = image;
} else {
this.imagesX = this.resizedImagesX;
this.resizedImagesX[index] = image;
}
}
}, {
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);
var loadedResizedXImages = this.resizedImagesX.filter(function (image) {
return !!image;
});
}
}, {
key: 'addUpdatedSizeImage',
value: function addUpdatedSizeImage(resultSrc, orientation, lazyload, lazySelector, index) {
var image = new Image();
var loadedResizedYImages = this.resizedImagesY.filter(function (image) {
return !!image;
});
var isAllImagesLoaded = loadedResizedXImages.length + loadedResizedYImages.length === this.amountX + this.amountY;
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;
if (isAllImagesLoaded) {
this.imagesX = this.resizedImagesX;
this.imagesY = this.resizedImagesY;
this.update();
}
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',
key: "requestResizedImages",
value: function requestResizedImages() {
var srcX = this.getSrc(this.container, this.folder, this.apiVersion, this.filenameX, this.ciParams);
var responsive = this.ciParams.ciToken;
var firstImage = this.imagesX[0];
this.updateContainerSize(firstImage);
this.update();
this.speedFactor = (0, _jsCloudimage360ViewUtils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
var srcX = (0, _jsCloudimage360ViewUtils.generateImagesPath)(this.srcXConfig);
if (!responsive || this.container.offsetWidth < firstImage.width * 1.5) return;
(0, _jsCloudimage360ViewUtils.preloadImages)(this.srcXConfig, srcX, this.onResizedImageLoad.bind(this, _ci2.ORIENTATIONS.X), true);
this.requestNewImages(srcX, this.amountX, _ci2.ORIENTATIONS.X);
if (this.allowSpinY) {
var srcY = this.getSrc(this.container, this.folder, this.apiVersion, this.filenameY, this.ciParams);
this.requestNewImages(srcY, this.amountY, _ci2.ORIENTATIONS.Y);
var srcY = (0, _jsCloudimage360ViewUtils.generateImagesPath)(this.srcYConfig);
(0, _jsCloudimage360ViewUtils.preloadImages)(this.srcYConfig, srcY, this.onResizedImageLoad.bind(this, _ci2.ORIENTATIONS.Y), true);
}
}
}, {
key: 'update',
key: "update",
value: function update() {

@@ -875,26 +744,18 @@ var image = this.imagesX[this.activeImageX - 1];

var ctx = this.canvas.getContext("2d");
ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
this.canvas.style.width = this.container.offsetWidth + 'px';
this.canvas.height = this.container.offsetHeight * this.devicePixelRatio;
this.canvas.style.height = this.container.offsetHeight + 'px';
if (this.fullscreenView) {
this.canvas.width = window.innerWidth * this.devicePixelRatio;
this.canvas.style.width = window.innerWidth + 'px';
this.canvas.height = window.innerHeight * this.devicePixelRatio;
this.canvas.style.height = window.innerHeight + 'px';
var _contain = (0, _ci.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
var _contain = (0, _jsCloudimage360ViewUtils.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
width = _contain.width,
height = _contain.height,
offsetX = _contain.offsetX,
offsetY = _contain.offsetY,
width = _contain.width,
height = _contain.height;
offsetY = _contain.offsetY;
ctx.drawImage(image, 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.offsetHeight * this.devicePixelRatio;
this.canvas.style.height = this.container.offsetHeight + 'px';
if (this.startPointerZoom || this.startPinchZoom) {
if (this.mouseTracked) {
this.updateImageScale(ctx);

@@ -907,3 +768,3 @@ } else {

}, {
key: 'updateImageScale',
key: "updateImageScale",
value: function updateImageScale(ctx) {

@@ -916,19 +777,13 @@ var image = this.originalImagesX[this.activeImageX - 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 position = this.getCursorPositionInCanvas();
var imageWidth = this.canvas.width;
var imageHeight = this.canvas.height;
var width = this.canvas.width * this.zoomIntensity;
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',
key: "updatePercentageInLoader",
value: function updatePercentageInLoader(percentage) {

@@ -944,50 +799,7 @@ if (this.loader) {

}, {
key: 'onAllImagesLoaded',
value: function onAllImagesLoaded() {
this.imagesLoaded = true;
key: "onFirstImageLoaded",
value: function onFirstImageLoaded(image) {
if (!this.hide360Logo && !this.lazyload) this.add360ViewIcon();
var ctx = this.canvas.getContext("2d");
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.amountX * 25 * this.container.offsetWidth / 1500) || 1;
} else {
var containerRatio = this.container.offsetHeight / this.container.offsetWidth;
var imageOffsetWidth = this.container.offsetWidth;
if (this.ratio > containerRatio) {
imageOffsetWidth = this.container.offsetHeight / this.ratio;
}
this.speedFactor = Math.floor(this.dragSpeed / 150 * 36 / this.amountX * 25 * imageOffsetWidth / 1500) || 1;
}
if (this.imageOffset) {
this.activeImageX = this.imageOffset;
};
if (this.autoplay) {
this.play();
}
if (this.view360Icon) {
this.view360Icon.innerText = '';
(0, _ci.setView360Icon)(this.view360Icon, this.logoSrc);
}
this.initControls();
}
}, {
key: 'onFirstImageLoaded',
value: function onFirstImageLoaded(event) {
var _this2 = this;
this.updateContainerSize(event.target);
if (!this.hide360Logo) {
this.add360ViewIcon();
}
if (this.fullscreenView) {

@@ -999,5 +811,3 @@ this.canvas.width = window.innerWidth * this.devicePixelRatio;

var ctx = this.canvas.getContext("2d");
var _contain2 = (0, _ci.contain)(this.canvas.width, this.canvas.height, event.target.width, event.target.height),
var _contain2 = (0, _jsCloudimage360ViewUtils.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
offsetX = _contain2.offsetX,

@@ -1008,49 +818,15 @@ offsetY = _contain2.offsetY,

this.offset = { x: offsetX, y: offsetY };
ctx.drawImage(event.target, offsetX, offsetY, width, height);
this.offset = {
x: offsetX,
y: offsetY
};
ctx.drawImage(image, offsetX, offsetY, width, height);
} else {
var _ctx = this.canvas.getContext("2d");
var imagePreview = event.target;
if (this.imageOffset) {
imagePreview = this.imagesX[this.imageOffset];
}
if (this.container.offsetWidth === 0) {
var modalRef = this.container.parentNode || {};
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.offsetHeight * this.devicePixelRatio;
this.canvas.style.height = this.container.offsetHeight + 'px';
}
_ctx.drawImage(imagePreview, 0, 0, this.canvas.width, this.canvas.height);
this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
this.canvas.style.width = this.container.offsetWidth + 'px';
this.canvas.height = this.container.offsetHeight * this.devicePixelRatio;
this.canvas.style.height = this.container.offsetHeight + 'px';
ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
}
if (this.lazyload && !this.fullscreenView) {
this.imagesX.forEach(function (image, index) {
if (index === 0) {
_this2.innerBox.removeChild(_this2.lazyloadInitImage);
return;
}
var dataSrc = image.getAttribute('data-src');
if (dataSrc) {
image.src = image.getAttribute('data-src');
}
});
}
if (this.fullscreenView) {

@@ -1060,3 +836,3 @@ this.addCloseFullscreenView();

if (this.magnifier && !this.fullscreenView || this.magnifyInFullscreen) {
if (this.magnifier) {
this.addMagnifier();

@@ -1066,3 +842,3 @@ }

if (this.boxShadow && !this.fullscreenView) {
this.addBoxShadow();
(0, _jsCloudimage360ViewUtils.createBoxShadow)(this.boxShadow, this.innerBox);
}

@@ -1077,136 +853,43 @@

}
if (!this.isMobile && !this.fullscreenView && !this.disablePointerZoom) {
this.addResetZoomIcon();
}
}
}, {
key: 'incrementLoadedImages',
value: function incrementLoadedImages(orientation) {
if (orientation === _ci2.ORIENTATIONS.Y) {
this.loadedImagesY += 1;
key: "onAllImagesLoaded",
value: function onAllImagesLoaded() {
this.removeLoader();
this.imagesLoaded = true;
if (this.autoplay && this.pointerZoom) {
this.container.style.cursor = 'zoom-in';
} else {
this.loadedImagesX += 1;
this.container.style.cursor = 'grab';
}
}
}, {
key: 'onImageLoad',
value: function onImageLoad(index, orientation, event) {
this.incrementLoadedImages(orientation);
var totalAmount = this.amountX + this.amountY;
var totalLoadedImages = this.loadedImagesX + this.loadedImagesY;
this.speedFactor = (0, _jsCloudimage360ViewUtils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
var percentage = Math.round(totalLoadedImages / totalAmount * 100);
if (this.autoplay) {
this.play();
}
this.updatePercentageInLoader(percentage);
if (index === 0 && orientation !== _ci2.ORIENTATIONS.Y) {
this.onFirstImageLoaded(event);
if (this.disableDrag) {
this.container.style.cursor = 'default';
}
if (totalLoadedImages === totalAmount) {
this.onAllImagesLoaded(event);
if (this.view360Icon) {
this.view360Icon.innerText = '';
(0, _ci.setView360Icon)(this.view360Icon, this.logoSrc);
}
}
}, {
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);
window.onkeyup = this.setFullscreenEvents.bind(this, event);
this.iconsContainer.appendChild(closeFullscreenIcon);
this.initControls();
}
}, {
key: 'add360ViewIcon',
value: function add360ViewIcon() {
var view360Icon = document.createElement('div');
view360Icon.className = 'cloudimage-360-view-360-icon';
view360Icon.innerText = '0%';
this.view360Icon = view360Icon;
this.innerBox.appendChild(view360Icon);
}
}, {
key: 'addFullscreenIcon',
value: function addFullscreenIcon() {
var fullscreenIcon = document.createElement('div');
fullscreenIcon.className = 'cloudimage-360-fullscreen-icon';
fullscreenIcon.onclick = this.openFullscreenModal.bind(this);
this.fullscreenIcon = fullscreenIcon;
this.iconsContainer.appendChild(fullscreenIcon);
}
}, {
key: 'hideFullscreenIcon',
value: function hideFullscreenIcon() {
if (!this.fullscreenIcon) return;
this.fullscreenIcon.style.display = 'none';
this.fullscreenIcon.style.pointerEvents = 'none';
}
}, {
key: 'showFullscreenIcon',
value: function showFullscreenIcon() {
if (!this.fullscreenIcon) return;
this.fullscreenIcon.style.display = 'block';
this.fullscreenIcon.style.pointerEvents = 'auto';
}
}, {
key: 'addMagnifier',
value: function addMagnifier() {
var magnifyIcon = document.createElement('div');
magnifyIcon.className = 'cloudimage-360-magnifier-icon';
magnifyIcon.onclick = this.magnify.bind(this);
this.magnifierIcon = magnifyIcon;
this.iconsContainer.appendChild(magnifyIcon);
}
}, {
key: 'disableMagnifierIcon',
value: function disableMagnifierIcon() {
if (!this.magnifierIcon) return;
this.magnifierIcon.style.display = 'none';
this.magnifierIcon.style.pointerEvents = 'none';
}
}, {
key: 'enableMagnifierIcon',
value: function enableMagnifierIcon() {
if (!this.magnifierIcon) return;
this.magnifierIcon.style.display = 'block';
this.magnifierIcon.style.pointerEvents = 'auto';
}
}, {
key: 'getOriginalSrc',
value: function getOriginalSrc() {
var currentImage = this.originalImagesX[this.activeImageX - 1];
if (this.movingDirection === _ci2.ORIENTATIONS.Y) {
currentImage = this.originalImagesY[this.activeImageY - 1];
};
return currentImage.src;
}
}, {
key: 'magnify',
value: function magnify() {
key: "magnify",
value: function magnify(event) {
var _this3 = this;
var image = new Image();
var src = this.getOriginalSrc();
event.stopPropagation();
if (this.mouseTracked) this.togglePointerZoom();
var currentOriginalImage = (0, _jsCloudimage360ViewUtils.getCurrentOriginalImage)(this.movingDirection, this.imagesX, this.imagesY, this.activeImageX, this.activeImageY);
this.isMagnifyOpen = true;
image.src = src;
image.onload = function () {
currentOriginalImage.onload = function () {
if (_this3.glass) {

@@ -1219,10 +902,8 @@ _this3.glass.style.cursor = 'none';

this.container.style.overflow = 'hidden';
(0, _ci.magnify)(this.container, this.offset, src, this.glass, this.magnifier || 3);
(0, _jsCloudimage360ViewUtils.magnify)(this.container, this.offset, currentOriginalImage, this.glass, this.magnifier || 3);
}
}, {
key: 'closeMagnifier',
key: "closeMagnifier",
value: function closeMagnifier() {
if (!this.glass) return;
this.container.style.overflow = 'visible';

@@ -1234,170 +915,25 @@ this.container.removeChild(this.glass);

}, {
key: 'openFullscreenModal',
value: function openFullscreenModal() {
var fullscreenModal = document.createElement('div');
fullscreenModal.className = 'cloudimage-360-fullscreen-modal';
var fullscreenContainer = this.container.cloneNode();
var image = this.imagesX[0];
var ratio = image.height / image.width;
fullscreenContainer.style.height = '100%';
fullscreenContainer.style.maxHeight = '100%';
fullscreenModal.appendChild(fullscreenContainer);
window.document.body.style.overflow = 'hidden';
window.document.body.appendChild(fullscreenModal);
new CI360Viewer(fullscreenContainer, true, ratio);
key: "openFullscreenModal",
value: function openFullscreenModal(event) {
event.stopPropagation();
if (this.mouseTracked) this.togglePointerZoom();
var fullscreenContainer = (0, _jsCloudimage360ViewUtils.createFullscreenModal)(this.container);
new CI360Viewer(fullscreenContainer, true);
}
}, {
key: 'setFullscreenEvents',
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 (event.type === 'click') return this.closeFullscreenModal(event);
if (this.container.parentNode.parentNode === document.body) {
this.closeFullscreenModal();
};
if (event.key === 'Escape' && this.container.parentNode.parentNode === document.body) {
this.closeFullscreenModalOnEsc(event);
}
}
}, {
key: 'closeFullscreenModal',
value: function closeFullscreenModal() {
document.body.removeChild(this.container.parentNode);
window.document.body.style.overflow = 'visible';
key: "closeFullscreenModalOnEsc",
value: function closeFullscreenModalOnEsc(event) {
this.closeFullscreenModal(event);
}
}, {
key: 'add360ViewCircleIcon',
value: function add360ViewCircleIcon() {
var view360CircleIcon = new Image();
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;
this.innerBox.appendChild(view360CircleIcon);
}
}, {
key: 'hide360ViewCircleIcon',
value: function hide360ViewCircleIcon() {
if (!this.view360CircleIcon) return;
this.view360CircleIcon.style.opacity = '0';
}
}, {
key: 'show360ViewCircleIcon',
value: function show360ViewCircleIcon() {
if (!this.view360CircleIcon) return;
this.view360CircleIcon.style.opacity = '1';
}
}, {
key: 'remove360ViewCircleIcon',
value: function remove360ViewCircleIcon() {
if (!this.view360CircleIcon) return;
this.innerBox.removeChild(this.view360CircleIcon);
this.view360CircleIcon = null;
}
}, {
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';
this.loader = loader;
this.innerBox.appendChild(loader);
}
}, {
key: 'addBoxShadow',
value: function addBoxShadow() {
var boxShadow = document.createElement('div');
boxShadow.className = 'cloudimage-360-box-shadow';
boxShadow.style.boxShadow = this.boxShadow;
this.innerBox.appendChild(boxShadow);
}
}, {
key: 'removeLoader',
value: function removeLoader() {
if (!this.loader) return;
this.innerBox.removeChild(this.loader);
this.loader = null;
}
}, {
key: 'remove360ViewIcon',
value: function remove360ViewIcon() {
if (!this.view360Icon) return;
this.innerBox.removeChild(this.view360Icon);
this.view360Icon = null;
}
}, {
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',
key: "play",
value: function play() {

@@ -1408,7 +944,6 @@ var _this4 = this;

this.remove360ViewIcon();
this.loopTimeoutId = window.setInterval(function () {
_this4.loop(_this4.reversed);
var isPlayedOnce = _this4.isCompletedCyle();
var isPlayedOnce = (0, _jsCloudimage360ViewUtils.isCompletedOneCycle)(_this4.autoplayBehavior, _this4.activeImageX, _this4.activeImageY, _this4.amountX, _this4.amountY, _this4.reversed);

@@ -1426,120 +961,14 @@ if (_this4.playOnce && isPlayedOnce) {

}, {
key: 'stop',
key: "stop",
value: function stop() {
if (this.bottomCircle && !this.zoomIntensity) this.show360ViewCircleIcon();
if (this.bottomCircle) this.show360ViewCircleIcon();
window.clearTimeout(this.loopTimeoutId);
}
}, {
key: 'getSrc',
value: function getSrc(container, folder, apiVersion, filename) {
var ciParams = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
var ciToken = ciParams.ciToken,
ciFilters = ciParams.ciFilters,
ciTransformation = ciParams.ciTransformation;
var src = '' + folder + filename;
if (ciToken) {
var imageOffsetWidth = container.offsetWidth;
var vesrion = _ci2.falsyValues.indexOf(apiVersion) !== -1 ? null : apiVersion;
var finalApiVersion = vesrion ? vesrion + '/' : '';
if (this.fullscreenView) {
var containerRatio = container.offsetHeight / container.offsetWidth;
if (this.ratio > containerRatio) {
imageOffsetWidth = container.offsetHeight / this.ratio;
}
}
var ciSizeNext = (0, _ci.getSizeAccordingToPixelRatio)((0, _ci.getResponsiveWidthOfContainer)(imageOffsetWidth));
src = 'https://' + ciToken + '.cloudimg.io/' + finalApiVersion + src + '?' + (ciTransformation ? ciTransformation : 'width=' + ciSizeNext) + (ciFilters ? '&f=' + ciFilters : '');
}
return src;
}
}, {
key: 'preloadImages',
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 ciParams = arguments[6];
var _this5 = this;
var apiVersion = arguments[7];
var filename = arguments[8];
if (this.imageList) {
try {
var images = JSON.parse(this.imageList);
this.amountX = images.length;
images.forEach(function (src, index) {
var folder = /(http(s?)):\/\//gi.test(src) ? '' : _this5.folder;
var resultSrc = _this5.getSrc(container, folder, apiVersion, filename, ciParams);
var lastIndex = resultSrc.lastIndexOf('//');
var originalSrc = resultSrc.slice(lastIndex);
_this5.addImage(resultSrc, originalSrc, orientation, lazyload, lazySelector, index);
});
} catch (error) {
console.error('Wrong format in image-list attribute: ' + error.message);
}
} else {
[].concat(_toConsumableArray(new Array(amount))).map(function (_item, index) {
var nextZeroFilledIndex = (0, _ci.pad)(index + 1, _this5.indexZeroBase);
var resultSrc = src.replace('{index}', nextZeroFilledIndex);
var originalSrc = resultSrc.replace(_ci2.ORGINAL_SIZE_REGEX, '').replace(_ci2.AND_SYMBOL_REGEX, '?');
_this5.addImage(resultSrc, originalSrc, orientation, lazyload, lazySelector, index);
});
}
}
}, {
key: 'addImage',
value: function addImage(resultSrc, originalSrc, orientation, lazyload, lazySelector, index) {
var image = new Image();
var originalImage = 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;
originalImage.src = originalSrc;
}
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);
}
}
}, {
key: 'destroy',
key: "destroy",
value: function destroy() {
stop();
var oldElement = this.container;
var newElement = oldElement.cloneNode(true);
var innerBox = newElement.querySelector('.cloudimage-360-inner-box');
newElement.className = newElement.className.replace(' initialized', '');

@@ -1555,27 +984,126 @@ newElement.style.position = 'relative';

}, {
key: 'initControls',
key: "addCloseFullscreenView",
value: function addCloseFullscreenView(event) {
var closeFullscreenIcon = (0, _jsCloudimage360ViewUtils.createCloseFullscreenIcon)();
closeFullscreenIcon.onclick = this.setFullscreenEvents.bind(this, event);
window.onkeyup = this.setFullscreenEvents.bind(this, event);
this.iconsContainer.appendChild(closeFullscreenIcon);
}
}, {
key: "add360ViewIcon",
value: function add360ViewIcon() {
this.view360Icon = (0, _jsCloudimage360ViewUtils.create360ViewIcon)();
this.innerBox.appendChild(this.view360Icon);
}
}, {
key: "addFullscreenIcon",
value: function addFullscreenIcon() {
this.fullscreenIcon = (0, _jsCloudimage360ViewUtils.createFullscreenIcon)();
this.fullscreenIcon.onclick = this.openFullscreenModal.bind(this);
this.iconsContainer.appendChild(this.fullscreenIcon);
}
}, {
key: "showFullscreenIcon",
value: function showFullscreenIcon() {
if (!this.fullscreenIcon) return;
this.fullscreenIcon.style.display = 'block';
this.fullscreenIcon.style.pointerEvents = 'auto';
}
}, {
key: "hideFullscreenIcon",
value: function hideFullscreenIcon() {
if (!this.fullscreenIcon) return;
this.fullscreenIcon.style.display = 'none';
this.fullscreenIcon.style.pointerEvents = 'none';
}
}, {
key: "addMagnifier",
value: function addMagnifier() {
this.magnifierIcon = (0, _jsCloudimage360ViewUtils.createMagnifierIcon)();
this.magnifierIcon.onclick = this.magnify.bind(this);
this.iconsContainer.appendChild(this.magnifierIcon);
}
}, {
key: "enableMagnifierIcon",
value: function enableMagnifierIcon() {
if (!this.magnifierIcon) return;
this.magnifierIcon.style.display = 'block';
this.magnifierIcon.style.pointerEvents = 'auto';
}
}, {
key: "disableMagnifierIcon",
value: function disableMagnifierIcon() {
if (!this.magnifierIcon) return;
this.magnifierIcon.style.display = 'none';
this.magnifierIcon.style.pointerEvents = 'none';
}
}, {
key: "closeFullscreenModal",
value: function closeFullscreenModal(event) {
event.stopPropagation();
document.body.removeChild(this.container.parentNode);
window.document.body.style.overflow = 'visible';
}
}, {
key: "add360ViewCircleIcon",
value: function add360ViewCircleIcon() {
this.view360CircleIcon = (0, _jsCloudimage360ViewUtils.create360ViewCircleIcon)(this.bottomCircleOffset);
this.innerBox.appendChild(this.view360CircleIcon);
}
}, {
key: "show360ViewCircleIcon",
value: function show360ViewCircleIcon() {
if (!this.view360CircleIcon) return;
this.view360CircleIcon.style.opacity = '1';
}
}, {
key: "hide360ViewCircleIcon",
value: function hide360ViewCircleIcon() {
if (!this.view360CircleIcon) return;
this.view360CircleIcon.style.opacity = '0';
}
}, {
key: "remove360ViewCircleIcon",
value: function remove360ViewCircleIcon() {
if (!this.view360CircleIcon) return;
this.innerBox.removeChild(this.view360CircleIcon);
this.view360CircleIcon = null;
}
}, {
key: "removeLoader",
value: function removeLoader() {
if (!this.loader) return;
this.innerBox.removeChild(this.loader);
this.loader = null;
}
}, {
key: "remove360ViewIcon",
value: function remove360ViewIcon() {
if (!this.view360Icon) return;
this.innerBox.removeChild(this.view360Icon);
this.view360Icon = null;
}
}, {
key: "initControls",
value: function initControls() {
var _this6 = this;
var _this5 = this;
var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;
// 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');
var onLeftStart = function onLeftStart(event) {
event.stopPropagation();
var top = this.container.querySelector('.cloudimage-360-top');
var bottom = this.container.querySelector('.cloudimage-360-bottom');
_this5.onSpin();
if (!left && !right && !top && !bottom) return;
_this5.left();
var onLeftStart = function onLeftStart(event) {
event.stopPropagation();
_this6.onSpin();
_this6.left();
_this6.loopTimeoutId = window.setInterval(_this6.left.bind(_this6), _this6.autoplaySpeed);
_this5.loopTimeoutId = window.setInterval(_this5.left.bind(_this5), _this5.autoplaySpeed);
};
var onRightStart = function onRightStart(event) {
event.stopPropagation();
_this6.onSpin();
_this6.right();
_this6.loopTimeoutId = window.setInterval(_this6.right.bind(_this6), _this6.autoplaySpeed);
_this5.onSpin();
_this5.right();
_this5.loopTimeoutId = window.setInterval(_this5.right.bind(_this5), _this5.autoplaySpeed);
};

@@ -1585,5 +1113,8 @@

event.stopPropagation();
_this6.onSpin();
_this6.top();
_this6.loopTimeoutId = window.setInterval(_this6.top.bind(_this6), _this6.autoplaySpeed);
_this5.onSpin();
_this5.top();
_this5.loopTimeoutId = window.setInterval(_this5.top.bind(_this5), _this5.autoplaySpeed);
};

@@ -1593,109 +1124,45 @@

event.stopPropagation();
_this6.onSpin();
_this6.bottom();
_this6.loopTimeoutId = window.setInterval(_this6.bottom.bind(_this6), _this6.autoplaySpeed);
};
var onLeftEnd = function onLeftEnd() {
_this6.onFinishSpin();
window.clearTimeout(_this6.loopTimeoutId);
};
_this5.onSpin();
var onRightEnd = function onRightEnd() {
_this6.onFinishSpin();
window.clearTimeout(_this6.loopTimeoutId);
_this5.bottom();
_this5.loopTimeoutId = window.setInterval(_this5.bottom.bind(_this5), _this5.autoplaySpeed);
};
var onTopEnd = function onTopEnd() {
_this6.onFinishSpin();
window.clearTimeout(_this6.loopTimeoutId);
var onEventEnd = function onEventEnd() {
_this5.onFinishSpin();
window.clearTimeout(_this5.loopTimeoutId);
};
var onBottomEnd = function onBottomEnd() {
_this6.onFinishSpin();
window.clearTimeout(_this6.loopTimeoutId);
var controlsConfig = {
container: this.container,
controlReverse: this.controlReverse,
spinReverse: this.spinReverse,
stopAtEdges: this.stopAtEdges
};
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 (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.rightElem = right;
}
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 ? right : left, 'not-active');
}
}
var controlsTriggers = {
onLeftStart: onLeftStart,
onRightStart: onRightStart,
onTopStart: onTopStart,
onBottomStart: onBottomStart,
onEventEnd: onEventEnd
};
var controlsElements = (0, _jsCloudimage360ViewUtils.initControls)(controlsConfig, controlsTriggers);
this.topElem = controlsElements.top || {};
this.bottomElem = controlsElements.bottom || {};
this.leftElem = controlsElements.left || {};
this.rightElem = controlsElements.right || {};
}
}, {
key: 'addInnerBox',
value: function addInnerBox() {
this.innerBox = document.createElement('div');
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',
value: function addCanvas() {
this.canvas = document.createElement('canvas');
this.canvas.style.width = '100%';
this.canvas.style.fontSize = '0';
this.innerBox.appendChild(this.canvas);
}
}, {
key: 'attachEvents',
key: "attachEvents",
value: function attachEvents(draggable, swipeable, keys) {
var _this7 = this;
window.addEventListener('resize', this.requestResizedImages.bind(this));
window.addEventListener('resize', (0, _ci.debounce)(function () {
_this7.requestResizedImages();
}, 80));
if (draggable && !this.disableDrag) {
this.container.addEventListener('click', this.mouseClick.bind(this));
this.container.addEventListener('mousedown', this.mouseDown.bind(this));
this.container.addEventListener('mousemove', this.mouseMove.bind(this));
this.container.addEventListener('mouseleave', this.mouseLeave.bind(this));
document.addEventListener('mouseup', this.mouseUp.bind(this));

@@ -1705,51 +1172,23 @@ }

if (swipeable && !this.disableDrag) {
this.container.addEventListener('touchstart', this.touchStart.bind(this), { passive: true });
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), {
passive: true
});
}
if (!this.disablePointerZoom && !this.fullscreenView) {
this.container.addEventListener('click', this.mouseClick.bind(this));
this.container.addEventListener('wheel', this.mouseScroll.bind(this));
}
if (keys) {
document.addEventListener('keydown', this.keyDown.bind(this));
document.addEventListener('keyup', this.keyUp.bind(this));
} else {
document.addEventListener('keydown', this.keyDownGeneral.bind(this));
}
}
}, {
key: 'applyStylesToContainer',
value: function applyStylesToContainer() {
this.container.style.position = 'relative';
this.container.style.width = '100%';
this.container.style.cursor = 'wait';
this.container.setAttribute('draggable', 'false');
this.container.className = this.container.className + ' initialized';
}
}, {
key: 'setMouseLeaveActions',
value: function setMouseLeaveActions(actions) {
var _this8 = this;
var mouseLeaveActions = actions.split(',');
mouseLeaveActions.forEach(function (action) {
return _this8.applyMouseLeaveAction(action);
});
document.addEventListener('keydown', this.keyDownGeneral.bind(this));
}
}, {
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',
key: "init",
value: function init(container) {
var _this6 = this;
var _get360ViewProps = (0, _ci.get360ViewProps)(container),

@@ -1760,3 +1199,4 @@ folder = _get360ViewProps.folder,

filenameY = _get360ViewProps.filenameY,
imageList = _get360ViewProps.imageList,
imageListX = _get360ViewProps.imageListX,
imageListY = _get360ViewProps.imageListY,
indexZeroBase = _get360ViewProps.indexZeroBase,

@@ -1767,6 +1207,7 @@ amountX = _get360ViewProps.amountX,

_get360ViewProps$drag = _get360ViewProps.draggable,
draggable = _get360ViewProps$drag === undefined ? true : _get360ViewProps$drag,
draggable = _get360ViewProps$drag === void 0 ? true : _get360ViewProps$drag,
_get360ViewProps$swip = _get360ViewProps.swipeable,
swipeable = _get360ViewProps$swip === undefined ? true : _get360ViewProps$swip,
swipeable = _get360ViewProps$swip === void 0 ? true : _get360ViewProps$swip,
keys = _get360ViewProps.keys,
keysReverse = _get360ViewProps.keysReverse,
bottomCircle = _get360ViewProps.bottomCircle,

@@ -1778,19 +1219,8 @@ bottomCircleOffset = _get360ViewProps.bottomCircleOffset,

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,
_get360ViewProps$disa3 = _get360ViewProps.disableDrag,
disableDrag = _get360ViewProps$disa3 === undefined ? true : _get360ViewProps$disa3,
_get360ViewProps$disa = _get360ViewProps.disableDrag,
disableDrag = _get360ViewProps$disa === void 0 ? true : _get360ViewProps$disa,
fullscreen = _get360ViewProps.fullscreen,
magnifier = _get360ViewProps.magnifier,
magnifyInFullscreen = _get360ViewProps.magnifyInFullscreen,
ratio = _get360ViewProps.ratio,
ciToken = _get360ViewProps.ciToken,

@@ -1808,10 +1238,10 @@ ciFilters = _get360ViewProps.ciFilters,

containerWidth = _get360ViewProps.containerWidth,
containerHeight = _get360ViewProps.containerHeight;
containerHeight = _get360ViewProps.containerHeight,
pointerZoom = _get360ViewProps.pointerZoom;
var ciParams = { ciToken: ciToken, ciFilters: ciFilters, ciTransformation: ciTransformation };
this.addInnerBox();
this.addIconsContainer();
this.addLoader();
var ciParams = {
ciToken: ciToken,
ciFilters: ciFilters,
ciTransformation: ciTransformation
};
this.folder = folder;

@@ -1821,9 +1251,10 @@ this.apiVersion = apiVersion;

this.filenameY = filenameY;
this.imageList = imageList;
this.imageListX = imageListX;
this.imageListY = imageListY;
this.indexZeroBase = indexZeroBase;
this.amountX = amountX;
this.amountY = amountY;
this.allowSpinY = !!amountY && !!filenameY;
this.activeImageX = autoplayReverse ? amountX : 1;
this.activeImageY = autoplayReverse ? amountY : 1;
this.amountX = imageListX ? JSON.parse(imageListX).length : amountX;
this.amountY = imageListY ? JSON.parse(imageListY).length : amountY;
this.allowSpinY = !!this.amountY;
this.activeImageX = autoplayReverse ? this.amountX : 1;
this.activeImageY = autoplayReverse ? this.amountY : 1;
this.spinY = autoplayBehavior === _ci2.AUTOPLAY_BEHAVIOR.SPIN_YX ? true : false;

@@ -1837,7 +1268,2 @@ this.imageOffset = imageOffset;

this.playOnce = playOnce;
this.toStartPointerZoom = toStartPointerZoom, this.disablePointerZoom = disablePointerZoom;
this.disablePinchZoom = disablePinchZoom;
this.pointerZoomFactor = pointerZoomFactor;
this.pinchZoomFactor = pinchZoomFactor;
this.maxScale = maxScale;
this.speed = speed;

@@ -1848,6 +1274,5 @@ this.reversed = autoplayReverse;

this.magnifier = !this.isMobile && magnifier ? magnifier : false;
this.magnifyInFullscreen = magnifyInFullscreen;
this.lazyload = lazyload;
this.lazyloadX = lazyload;
this.lazyloadY = lazyload;
this.lazySelector = lazySelector;
this.ratio = ratio;
this.spinReverse = spinReverse;

@@ -1864,25 +1289,104 @@ this.controlReverse = controlReverse;

this.containerHeight = containerHeight;
this.pointerZoom = pointerZoom;
this.keysReverse = keysReverse;
this.innerBox = (0, _jsCloudimage360ViewUtils.createInnerBox)(this.container);
this.iconsContainer = (0, _jsCloudimage360ViewUtils.createIconsContainer)(this.innerBox);
this.canvas = (0, _jsCloudimage360ViewUtils.createCanvas)(this.innerBox);
this.loader = (0, _jsCloudimage360ViewUtils.createLoader)(this.innerBox);
(0, _jsCloudimage360ViewUtils.applyStylesToContainer)(this.container);
this.srcXConfig = {
folder: folder,
filename: filenameX,
imageList: imageListX,
container: container,
innerBox: this.innerBox,
apiVersion: apiVersion,
ciParams: ciParams,
lazyload: lazyload,
lazySelector: lazySelector,
amount: this.amountX,
indexZeroBase: indexZeroBase,
fullscreen: this.fullscreenView
};
this.srcYConfig = _objectSpread(_objectSpread({}, this.srcXConfig), {}, {
filename: filenameY,
orientation: _ci2.ORIENTATIONS.Y,
imageList: imageListY,
amount: this.amountY
});
var srcX = (0, _jsCloudimage360ViewUtils.generateImagesPath)(this.srcXConfig);
var srcY = (0, _jsCloudimage360ViewUtils.generateImagesPath)(this.srcYConfig);
this.applyStylesToContainer();
var initLazyload = function initLazyload(image, orientation) {
var lazyloadXConfig = _objectSpread(_objectSpread({}, _this6.srcXConfig), {}, {
lazyload: false
});
this.addCanvas();
var lazyloadYConfig = _objectSpread(_objectSpread({}, _this6.srcYConfig), {}, {
lazyload: false
});
var srcX = this.getSrc(container, folder, apiVersion, filenameX, ciParams);
var srcY = this.getSrc(container, folder, apiVersion, filenameY, ciParams);
if (orientation === _ci2.ORIENTATIONS.Y) {
_this6.lazyloadY = false;
(0, _jsCloudimage360ViewUtils.preloadImages)(lazyloadXConfig, srcX, onImageLoad.bind(_this6, _ci2.ORIENTATIONS.X));
} else {
_this6.lazyloadX = false;
_this6.lazyloadInitImageX = image;
(0, _jsCloudimage360ViewUtils.preloadImages)(lazyloadYConfig, srcY, onImageLoad.bind(_this6, _ci2.ORIENTATIONS.Y));
}
};
this.preloadImages(amountX, srcX, _ci2.ORIENTATIONS.X, lazyload, lazySelector, container, ciParams, apiVersion, filenameX);
var onImageLoad = function onImageLoad(orientation, image, index) {
if (orientation !== _ci2.ORIENTATIONS.Y) {
_this6.imagesX[index] = image;
} else {
_this6.imagesY[index] = image;
}
if (amountY) {
this.preloadImages(amountY, srcY, _ci2.ORIENTATIONS.Y, lazyload, lazySelector, container, ciParams, apiVersion, filenameY);
var loadedXImages = _this6.imagesX.filter(function (image) {
return !!image;
});
var loadedYImages = _this6.imagesY.filter(function (image) {
return !!image;
});
var totalAmount = _this6.amountX + _this6.amountY;
var totalLoadedImages = _this6.imagesX.length + _this6.imagesY.length;
var isFirstImageLoaded = index === 0 && orientation !== _ci2.ORIENTATIONS.Y;
var isAllImagesLoaded = loadedXImages.length + loadedYImages.length === _this6.amountX + _this6.amountY;
var percentage = Math.round(totalLoadedImages / totalAmount * 100);
_this6.updatePercentageInLoader(percentage);
if (_this6.lazyloadX || _this6.lazyloadY) return initLazyload(image, orientation);
if (isFirstImageLoaded) {
_this6.updateContainerSize(image);
_this6.onFirstImageLoaded(image);
}
if (isAllImagesLoaded) {
_this6.onAllImagesLoaded();
if (lazyload) {
_this6.innerBox.removeChild(_this6.lazyloadInitImageX);
}
}
};
(0, _jsCloudimage360ViewUtils.preloadImages)(this.srcXConfig, srcX, onImageLoad.bind(this, _ci2.ORIENTATIONS.X));
if (this.allowSpinY) {
(0, _jsCloudimage360ViewUtils.preloadImages)(this.srcYConfig, srcY, onImageLoad.bind(this, _ci2.ORIENTATIONS.Y));
}
this.attachEvents(draggable, swipeable, keys);
if (onMouseLeave) this.setMouseLeaveActions(onMouseLeave);
}
}]);
return CI360Viewer;
}();
exports.default = CI360Viewer;
var _default = CI360Viewer;
exports.default = _default;

215

dist/ci360.utils.js

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

'use strict';
"use strict";

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {

});
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;
exports.setView360Icon = exports.get360ViewProps = exports.debounce = void 0;
var _ci = require('./ci360.constants');
var _ci = require("./ci360.constants");
var _this = void 0;
//TODO [deprecated]: remove filename, amount in the upcoming versions

@@ -18,3 +20,4 @@ var get360ViewProps = function get360ViewProps(image) {

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,
imageListX: attr(image, 'image-list-x') || attr(image, 'data-image-list-x') || null,
imageListY: attr(image, 'image-list-y') || attr(image, 'data-image-list-y') || null,
indexZeroBase: parseInt(attr(image, 'index-zero-base') || attr(image, 'data-index-zero-base') || 0, 10),

@@ -27,2 +30,3 @@ amountX: parseInt(attr(image, 'amount') || attr(image, 'data-amount') || attr(image, 'amount-x') || attr(image, 'data-amount-x') || 36, 10),

keys: isTrue(image, 'keys'),
keysReverse: isTrue(image, 'keys-reverse'),
boxShadow: attr(image, 'box-shadow') || attr(image, 'data-box-shadow'),

@@ -32,10 +36,4 @@ autoplay: isTrue(image, 'autoplay'),

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.CLICK_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'),
pointerZoom: parseFloat(attr(image, 'pointer-zoom') || attr(image, 'data-pointer-zoom') || 0, 10),
bottomCircle: isTrue(image, 'bottom-circle'),

@@ -45,5 +43,3 @@ disableDrag: isTrue(image, 'disable-drag'),

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),
ratio: parseFloat(attr(image, 'ratio') || attr(image, 'data-ratio') || 0) || false,
ciToken: attr(image, 'responsive') || attr(image, 'data-responsive'),

@@ -64,6 +60,7 @@ ciFilters: attr(image, 'filters') || attr(image, 'data-filters'),

exports.get360ViewProps = get360ViewProps;
var isTrue = function isTrue(image, type) {
var imgProp = attr(image, type);
var imgDataProp = attr(image, 'data-' + type);
var imgDataProp = attr(image, "data-".concat(type));
return imgProp !== null && imgProp !== 'false' || imgDataProp !== null && imgDataProp !== 'false';

@@ -77,176 +74,11 @@ };

var setView360Icon = function setView360Icon(view360Icon, logoSrc) {
view360Icon.style.background = 'rgba(255,255,255,0.8) url(\'' + logoSrc + '\') 50% 50% / contain no-repeat';
view360Icon.style.background = "rgba(255,255,255,0.8) url('".concat(logoSrc, "') 50% 50% / contain no-repeat");
};
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];
exports.setView360Icon = setView360Icon;
var w = void 0,
h = void 0,
bw = void 0;
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.backgroundImage = "url('" + src + "')";
glass.style.backgroundSize = backgroundSizeX + 'px ' + backgroundSizeY + 'px';
bw = 3;
w = glass.offsetWidth / 2;
h = glass.offsetHeight / 2;
glass.addEventListener("mousemove", moveMagnifier);
container.addEventListener("mousemove", moveMagnifier);
glass.addEventListener("touchmove", moveMagnifier, { passive: true });
container.addEventListener("touchmove", moveMagnifier, { passive: true });
function moveMagnifier(e) {
var pos = void 0,
x = void 0,
y = void 0;
pos = getCursorPos(e);
x = pos.x;
y = pos.y;
if (x > container.offsetWidth - w / zoom) {
x = container.offsetWidth - w / zoom;
}
if (x < w / zoom) {
x = w / zoom;
}
if (y > container.offsetHeight - h / zoom) {
y = container.offsetHeight - h / zoom;
}
if (y < h / zoom) {
y = h / zoom;
}
glass.style.left = x - w + "px";
glass.style.top = y - h + "px";
var backgroundPosX = (x - offsetX) * zoom - w + bw;
var backgroundPosY = (y - offsetY) * zoom - h + bw;
glass.style.backgroundPosition = '-' + backgroundPosX + 'px -' + backgroundPosY + 'px';
}
function getCursorPos(e) {
var a = void 0,
x = 0,
y = 0;
e = e || window.event;
a = container.getBoundingClientRect();
x = e.pageX - a.left;
y = e.pageY - a.top;
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return { x: x, y: y };
}
};
var getSizeLimit = function getSizeLimit(currentSize) {
if (currentSize <= 25) return '25';
if (currentSize <= 50) return '50';
return (Math.ceil(currentSize / 100) * 100).toString();
};
var getSizeAccordingToPixelRatio = function getSizeAccordingToPixelRatio(size) {
var splittedSizes = size.toString().split('x');
var result = [];
[].forEach.call(splittedSizes, function (size) {
result.push(size * Math.round(window.devicePixelRatio || 1));
});
return result.join('x');
};
var getResponsiveWidthOfContainer = function getResponsiveWidthOfContainer(width) {
return getSizeLimit(width);
};
var fit = function fit(contains) {
return function (parentWidth, parentHeight, childWidth, childHeight) {
var scale = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
var offsetX = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0.5;
var offsetY = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0.5;
var childRatio = childWidth / childHeight;
var parentRatio = parentWidth / parentHeight;
var width = parentWidth * scale;
var height = parentHeight * scale;
if (contains ? childRatio > parentRatio : childRatio < parentRatio) {
height = width / childRatio;
} else {
width = height * childRatio;
}
return {
width: width,
height: height,
offsetX: (parentWidth - width) * offsetX,
offsetY: (parentHeight - height) * offsetY
};
};
};
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);
var addClass = function addClass(el, className) {
if (el.classList) el.classList.add(className);else el.className += ' ' + className;
};
var removeClass = function removeClass(el, className) {
if (el.classList) el.classList.remove(className);else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
};
var pad = function pad(n) {
var width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n;
};
var debounce = function debounce(func, timeout) {
var timer = void 0;
var timer;
return function () {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];

@@ -256,5 +88,4 @@ }

clearTimeout(timer);
timer = setTimeout(function () {
func.apply(undefined, args);
func.apply(_this, args);
}, timeout);

@@ -264,14 +95,2 @@ };

exports.get360ViewProps = get360ViewProps;
exports.setView360Icon = setView360Icon;
exports.magnify = magnify;
exports.getResponsiveWidthOfContainer = getResponsiveWidthOfContainer;
exports.getSizeAccordingToPixelRatio = getSizeAccordingToPixelRatio;
exports.contain = contain;
exports.addClass = addClass;
exports.removeClass = removeClass;
exports.pad = pad;
exports.isTwoFingers = isTwoFingers;
exports.getMaxZoomIntensity = getMaxZoomIntensity;
exports.normalizeZoomFactor = normalizeZoomFactor;
exports.debounce = debounce;

18

dist/index.js

@@ -1,23 +0,19 @@

'use strict';
"use strict";
require('core-js/features/array/for-each');
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
require('core-js/features/array/filter');
require("core-js/features/array/for-each");
require('core-js/features/array/includes');
require("core-js/features/array/filter");
var _ci = require('./ci360.service');
require("core-js/features/array/includes");
var _ci2 = _interopRequireDefault(_ci);
var _ci = _interopRequireDefault(require("./ci360.service"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function init() {
var viewers = [];
var view360Array = document.querySelectorAll('.cloudimage-360:not(.initialized)');
[].slice.call(view360Array).forEach(function (container) {
viewers.push(new _ci2.default(container));
viewers.push(new _ci.default(container));
});
window.CI360._viewers = viewers;

@@ -24,0 +20,0 @@ }

18

package.json
{
"name": "js-cloudimage-360-view",
"version": "2.7.2-beta.3",
"version": "2.7.2-beta.4",
"main": "dist/index.js",

@@ -36,9 +36,11 @@ "description": "",

"dependencies": {
"core-js": "^3.0.0"
"core-js": "^3.0.0",
"js-cloudimage-360-view-utils": "^1.0.0"
},
"devDependencies": {
"@babel/core": "^7.16.5",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"@babel/cli": "^7.16.7",
"@babel/core": "^7.16.7",
"@babel/plugin-transform-runtime": "^7.16.5",
"@babel/preset-env": "^7.16.5",
"babel-loader": "^8.2.3",
"babel-plugin-array-includes": "^2.0.3",

@@ -48,3 +50,3 @@ "babel-preset-env": "^1.7.0",

"babel-preset-minify": "^0.5.0",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^2.1.1",

@@ -56,3 +58,3 @@ "gh-pages": "^2.0.1",

"style-loader": "^0.23.1",
"webpack": "^4.29.6",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.0",

@@ -59,0 +61,0 @@ "webpack-dev-server": "^3.2.1"

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