js-cloudimage-360-view 3.0.0-beta.0 → 3.0.1

package/dist/ci360.utils.js

@@ -1,47 +1,42 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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.isTrue = exports.get360ViewProps = exports.debounce = exports.attr = void 0;
 
-var _ci = require('./ci360.constants');
+var _constants = require("./constants");
+
+var _this = void 0;
 
 //TODO [deprecated]: remove filename, amount in the upcoming versions
 var get360ViewProps = function get360ViewProps(image) {
   return {
     folder: attr(image, 'folder') || attr(image, 'data-folder') || '/',
+    apiVersion: attr(image, 'api-version') || attr(image, 'data-api-version') || attr(image, 'apiVersion') || attr(image, 'data-apiVersion') || "v7",
     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,
+    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),
     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),
     dragSpeed: parseInt(attr(image, 'drag-speed') || attr(image, 'data-drag-speed') || 150, 10),
     keys: isTrue(image, 'keys'),
+    keysReverse: isTrue(image, 'keys-reverse'),
     boxShadow: attr(image, 'box-shadow') || attr(image, 'data-box-shadow'),
     autoplay: isTrue(image, 'autoplay'),
-    autoplayBehavior: attr(image, 'autoplay-behavior') || attr(image, 'data-autoplay-behavior') || _ci.AUTOPLAY_BEHAVIOR.SPIN_X,
+    autoplayBehavior: attr(image, 'autoplay-behavior') || attr(image, 'data-autoplay-behavior') || _constants.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'),
+    pointerZoom: parseFloat(attr(image, 'pointer-zoom') || attr(image, 'data-pointer-zoom') || 0, 10),
     bottomCircle: isTrue(image, 'bottom-circle'),
     disableDrag: isTrue(image, 'disable-drag'),
-    fullscreen: isTrue(image, 'fullscreen'),
-    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'),
+    fullscreen: isTrue(image, 'fullscreen') || isTrue(image, 'full-screen'),
+    magnifier: (attr(image, 'magnifier') !== null || attr(image, 'data-magnifier') !== null) && parseFloat(attr(image, 'magnifier') || attr(image, 'data-magnifier'), 10),
     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,
-    responsive: isTrue(image, 'responsive'),
-    ciToken: attr(image, 'responsive') || attr(image, 'data-responsive') || 'demo',
+    ciToken: attr(image, 'responsive') || attr(image, 'data-responsive'),
     ciFilters: attr(image, 'filters') || attr(image, 'data-filters'),
     ciTransformation: attr(image, 'transformation') || attr(image, 'data-transformation'),
     lazyload: isTrue(image, 'lazyload'),
@@ -50,201 +45,46 @@ var get360ViewProps = function get360ViewProps(image) {
     controlReverse: isTrue(image, 'control-reverse'),
     stopAtEdges: isTrue(image, 'stop-at-edges'),
     hide360Logo: isTrue(image, 'hide-360-logo'),
-    logoSrc: attr(image, 'logo-src') || 'https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg'
+    logoSrc: attr(image, 'logo-src') || 'https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg',
+    ratio: attr(image, 'ratio') || attr(image, 'data-ratio'),
+    imageInfo: attr(image, 'info') || attr(image, 'data-info') || isTrue(image, 'info')
   };
 };
 
+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';
 };
 
+exports.isTrue = isTrue;
+
 var attr = function attr(element, attribute) {
   return element.getAttribute(attribute);
 };
 
-var setView360Icon = function setView360Icon(view360Icon, logoSrc) {
-  view360Icon.style.background = 'rgba(255,255,255,0.8) url(\'' + 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];
-
-  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;
+exports.attr = attr;
 
-    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 setView360Icon = function setView360Icon(view360Icon, logoSrc) {
+  view360Icon.style.background = "rgba(255,255,255,0.8) url('".concat(logoSrc, "') 50% 50% / contain no-repeat");
 };
 
-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;
+exports.setView360Icon = setView360Icon;
 
-    if (contains ? childRatio > parentRatio : childRatio < parentRatio) {
-      height = width / childRatio;
-    } else {
-      width = height * childRatio;
+var debounce = function debounce(func, timeout) {
+  var timer;
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
 
-    return {
-      width: width,
-      height: height,
-      offsetX: (parentWidth - width) * offsetX,
-      offsetY: (parentHeight - height) * offsetY
-    };
+    clearTimeout(timer);
+    timer = setTimeout(function () {
+      func.apply(_this, args);
+    }, timeout);
   };
 };
 
-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;
-};
-
-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;

package/dist/constants/auto-play-behavior.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AUTOPLAY_BEHAVIOR = void 0;
+var AUTOPLAY_BEHAVIOR = {
+  SPIN_X: 'spin-x',
+  SPIN_Y: 'spin-y',
+  SPIN_XY: 'spin-xy',
+  SPIN_YX: 'spin-yx'
+};
+exports.AUTOPLAY_BEHAVIOR = AUTOPLAY_BEHAVIOR;

package/dist/constants/falsy-values.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FALSY_VALUES = void 0;
+var FALSY_VALUES = [false, 0, null, undefined, 'false', '0', 'null', 'undefined'];
+exports.FALSY_VALUES = FALSY_VALUES;

package/dist/constants/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AND_SYMBOL_REGEX", {
+  enumerable: true,
+  get: function get() {
+    return _regex.AND_SYMBOL_REGEX;
+  }
+});
+Object.defineProperty(exports, "AUTOPLAY_BEHAVIOR", {
+  enumerable: true,
+  get: function get() {
+    return _autoPlayBehavior.AUTOPLAY_BEHAVIOR;
+  }
+});
+Object.defineProperty(exports, "FALSY_VALUES", {
+  enumerable: true,
+  get: function get() {
+    return _falsyValues.FALSY_VALUES;
+  }
+});
+Object.defineProperty(exports, "ORGINAL_SIZE_REGEX", {
+  enumerable: true,
+  get: function get() {
+    return _regex.ORGINAL_SIZE_REGEX;
+  }
+});
+Object.defineProperty(exports, "ORIENTATIONS", {
+  enumerable: true,
+  get: function get() {
+    return _orientations.ORIENTATIONS;
+  }
+});
+
+var _autoPlayBehavior = require("./auto-play-behavior");
+
+var _falsyValues = require("./falsy-values");
+
+var _orientations = require("./orientations");
+
+var _regex = require("./regex");

package/dist/constants/orientations.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ORIENTATIONS = void 0;
+var ORIENTATIONS = {
+  X: 'x-axis',
+  Y: 'y-axis',
+  CENTER: 'center'
+};
+exports.ORIENTATIONS = ORIENTATIONS;

package/dist/constants/props-require-reload.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PROPS_REQUIRE_RELOAD = void 0;
+var PROPS_REQUIRE_RELOAD = ['folder', //images source
+'filenameX', //images source
+'filenameY', //images source
+'apiVersion', //images source
+'imageListX', //images source
+'imageListY', //images source
+'indexZeroBase', //images source
+'lazySelector', //images source
+'keys', // events
+'stopAtEdges', // events
+'disableDrag', // events
+'controlReverse', // events
+'disableDrag' // events
+];
+exports.PROPS_REQUIRE_RELOAD = PROPS_REQUIRE_RELOAD;

package/dist/constants/regex.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ORGINAL_SIZE_REGEX = exports.AND_SYMBOL_REGEX = void 0;
+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;

package/dist/index.js

@@ -1,25 +1,40 @@
-'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 }; }
+var _ci2 = require("./ci360.utils");
+
+function getContainerWithId(container) {
+  var containerId = container.id;
+
+  if (!containerId) {
+    var uniqueId = Math.floor(Math.random() * 10000);
+    var generatedContainerId = "cloudimage-360-view-".concat(uniqueId);
+    container.id = generatedContainerId;
+  }
+
+  return container;
+}
 
 function init() {
   var viewers = [];
   var view360Array = document.querySelectorAll('.cloudimage-360:not(.initialized)');
+  [].slice.call(view360Array).forEach(function (_container) {
+    var container = getContainerWithId(_container);
+    var isHotspotsEnabled = (0, _ci2.isTrue)(container, 'hotspots');
 
-  [].slice.call(view360Array).forEach(function (container) {
-    viewers.push(new _ci2.default(container));
+    if (!isHotspotsEnabled) {
+      viewers.push(new _ci.default(container));
+    }
   });
-
   window.CI360._viewers = viewers;
 }
 
@@ -33,24 +48,70 @@ function destroy() {
   window.CI360._viewers = [];
 }
 
-function getActiveIndexByID(id) {
+function getActiveIndexByID(id, oriantation) {
   if (isNoViewers()) return;
 
   var currentViewer = window.CI360._viewers.filter(function (viewer) {
     return viewer.id === id;
   })[0];
 
-  return currentViewer && currentViewer.activeImage - 1;
+  if (oriantation === 'y') {
+    return currentViewer && currentViewer.activeImageY - 1;
+  }
+
+  return currentViewer && currentViewer.activeImageX - 1;
+}
+
+function add(id) {
+  var view360Array = Array.from(document.querySelectorAll('.cloudimage-360:not(.initialized)'));
+
+  if (view360Array.length && id) {
+    var newViewContainer = view360Array.filter(function (viewer) {
+      return viewer.id === id;
+    })[0];
+    newViewContainer && window.CI360._viewers.push(new _ci.default(newViewContainer));
+  }
+}
+
+function update() {
+  var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+  if (id) {
+    var view = window.CI360._viewers.filter(function (viewer) {
+      return viewer.id === id;
+    })[0];
+
+    view.updateView(forceUpdate, window.CI360._viewers);
+  } else {
+    window.CI360._viewers.forEach(function (viewer) {
+      viewer.updateView(forceUpdate, window.CI360._viewers);
+    });
+  }
 }
 
 function isNoViewers() {
   return !(window.CI360._viewers && window.CI360._viewers.length > 0);
 }
 
+function addHotspots(instanceId, config) {
+  var view360Array = document.querySelectorAll('.cloudimage-360:not(.initialized)');
+  var container = Array.from(view360Array).find(function (view) {
+    return view.id === instanceId;
+  });
+
+  if (container) {
+    window.CI360._viewers.push(new _ci.default(container, false, config));
+  }
+}
+
 window.CI360 = window.CI360 || {};
 window.CI360.init = init;
 window.CI360.destroy = destroy;
 window.CI360.getActiveIndexByID = getActiveIndexByID;
+window.CI360.update = update;
+window.CI360.add = add;
+window.CI360.addHotspots = addHotspots;
 
 if (!window.CI360.notInitOnLoad) {
   init();