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

package/dist/ci360.utils.js

@@ -0,0 +1,250 @@
+'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;
+
+var _ci = require('./ci360.constants');
+
+//TODO [deprecated]: remove filename, amount in the upcoming versions
+var get360ViewProps = function get360ViewProps(image) {
+  return {
+    folder: attr(image, 'folder') || attr(image, 'data-folder') || '/',
+    filenameX: attr(image, 'filename') || attr(image, 'data-filename') || attr(image, 'filename-x') || attr(image, 'data-filename-x') || 'image-{index}.jpg',
+    filenameY: attr(image, 'filename-y') || attr(image, 'data-filename-y') || 'image-y-{index}.jpg',
+    imageList: attr(image, 'image-list') || attr(image, 'data-image-list') || null,
+    indexZeroBase: parseInt(attr(image, 'index-zero-base') || attr(image, 'data-index-zero-base') || 0, 10),
+    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'),
+    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,
+    playOnce: isTrue(image, 'play-once'),
+    disablePointerZoom: isTrue(image, 'disable-pointer-zoom'),
+    disablePinchZoom: isTrue(image, 'disable-pinch-zoom'),
+    onMouseLeave: attr(image, 'on-mouse-leave') || attr(image, 'data-on-mouse-leave'),
+    toStartPointerZoom: attr(image, 'to-start-pointer-zoom') || attr(image, 'data-to-start-pointer-zoom') || _ci.TO_START_POINTER_ZOOM.SCROLL_TO_START,
+    pointerZoomFactor: parseInt(attr(image, 'pointer-zoom-factor') || attr(image, 'data-pointer-zoom-factor') || 2, 10),
+    pinchZoomFactor: parseInt(attr(image, 'pinch-zoom-factor') || attr(image, 'data-pinch-zoom-factor') || 2, 10),
+    maxScale: parseFloat(attr(image, 'max-scale') || attr(image, 'data-max-scale') || 100, 10),
+    autoplayReverse: isTrue(image, 'autoplay-reverse'),
+    bottomCircle: isTrue(image, 'bottom-circle'),
+    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'),
+    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',
+    ciFilters: attr(image, 'filters') || attr(image, 'data-filters'),
+    ciTransformation: attr(image, 'transformation') || attr(image, 'data-transformation'),
+    lazyload: isTrue(image, 'lazyload'),
+    lazySelector: attr(image, 'lazyload-selector') || attr(image, 'data-lazyload-selector') || 'lazyload',
+    spinReverse: isTrue(image, 'spin-reverse'),
+    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'
+  };
+};
+
+var isTrue = function isTrue(image, type) {
+  var imgProp = attr(image, type);
+  var imgDataProp = attr(image, 'data-' + type);
+
+  return imgProp !== null && imgProp !== 'false' || imgDataProp !== null && imgDataProp !== 'false';
+};
+
+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;
+
+    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;
+};
+
+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;

package/dist/index.js

@@ -0,0 +1,57 @@
+'use strict';
+
+require('core-js/features/array/for-each');
+
+require('core-js/features/array/filter');
+
+require('core-js/features/array/includes');
+
+var _ci = require('./ci360.service');
+
+var _ci2 = _interopRequireDefault(_ci);
+
+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));
+  });
+
+  window.CI360._viewers = viewers;
+}
+
+function destroy() {
+  if (isNoViewers()) return;
+
+  window.CI360._viewers.forEach(function (viewer) {
+    viewer.destroy();
+  });
+
+  window.CI360._viewers = [];
+}
+
+function getActiveIndexByID(id) {
+  if (isNoViewers()) return;
+
+  var currentViewer = window.CI360._viewers.filter(function (viewer) {
+    return viewer.id === id;
+  })[0];
+
+  return currentViewer && currentViewer.activeImage - 1;
+}
+
+function isNoViewers() {
+  return !(window.CI360._viewers && window.CI360._viewers.length > 0);
+}
+
+window.CI360 = window.CI360 || {};
+window.CI360.init = init;
+window.CI360.destroy = destroy;
+window.CI360.getActiveIndexByID = getActiveIndexByID;
+
+if (!window.CI360.notInitOnLoad) {
+  init();
+}

package/dist/static/css/style.css

@@ -0,0 +1,121 @@
+.cloudimage-360-icons-container {
+  position: absolute;
+  display: flex;
+  top: 5px;
+  right: 5px;
+  width: 30px;
+  height: 95%;
+  flex-direction: column;
+  align-items: center;
+  z-index: 101;
+}
+
+.cloudimage-360-magnifier-icon {
+  width: 25px;
+  height: 25px;
+  margin-bottom: 5px;
+  cursor: pointer;
+  background: url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg') 50% 50% / cover no-repeat;
+}
+
+.cloudimage-360-fullscreen-icon {
+  width: 25px;
+  height: 25px;
+  margin-bottom: 5px;
+  cursor: pointer;
+  background: url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/full_screen.svg') 50% 50% / cover no-repeat;
+}
+
+.cloudimage-360-reset-zoom-icon {
+  display: none;
+  width: 30px;
+  height: 30px;
+  margin-top: auto;
+  cursor: pointer;
+  background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/ic-resize.svg?vh=248986') 50% 50% / cover no-repeat;
+}
+
+.cloudimage-360-close-fullscreen-icon {
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+  background: url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/cross.svg') 50% 50% / cover no-repeat;
+}
+
+.cloudimage-360-loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 0%;
+  height: 8px;
+  background-color: rgb(165,175,184);
+  z-index: 100;
+}
+
+.cloudimage-360-box-shadow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99;
+}
+
+.cloudimage-360-view-360-icon {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100px;
+  height: 100px;
+  margin: auto;
+  background-color: rgba(255,255,255,0.8);
+  border-radius: 50%;
+  box-shadow: rgb(255, 255, 255, 0.5) 0px 0px 4px;
+  transition: 0.5s all;
+  color: rgb(80,80,80);
+  text-align: center;
+  line-height: 100px;
+  z-index: 2;
+}
+
+.cloudimage-360-view-360-circle {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 80%;
+  height: auto;
+  margin: auto;
+  transition: 0.5s all;
+  z-index: 2;
+}
+
+.cloudimage-360-fullscreen-modal {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  background-color: #FFF;
+}
+
+.cloudimage-360-img-magnifier-glass {
+  background-color: #FFF;
+  background-repeat: no-repeat;
+  position: absolute;
+  border: 3px solid #000;
+  border-radius: 50%;
+  cursor: wait;
+  line-height: 200px;
+  text-align: center;
+  z-index: 1000;
+  width: 250px;
+  height: 250px;
+  top: -75px;
+  right: -85px;
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "js-cloudimage-360-view",
+  "version": "3.0.0-beta.0",
+  "main": "dist/index.js",
+  "description": "",
+  "author": "scaleflex",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scaleflex/js-cloudimage-360-view"
+  },
+  "homepage": "#readme",
+  "keywords": [
+    "image",
+    "images",
+    "cloudimage",
+    "360",
+    "photo",
+    "product",
+    "view",
+    "viewer",
+    "360 product view"
+  ],
+  "scripts": {
+    "start-demo": "webpack-dev-server --mode development --config config/webpack-demo.config.js",
+    "clean-build": "rd /s /q build",
+    "build": "npm run clean-build && webpack --mode production --config config/webpack-build.config.js",
+    "clean-dist": "rimraf dist",
+    "dist": "npm run clean-dist && babel src -d dist --copy-files",
+    "clean-demo": "rm -rf examples/dist",
+    "build-demo": "npm run clean-demo && webpack --mode production  --config config/webpack-demo.config.js",
+    "deploy-demo": "gh-pages -d examples/dist",
+    "publish-demo": "npm run build-demo && npm run deploy-demo"
+  },
+  "dependencies": {
+    "core-js": "^3.0.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-array-includes": "^2.0.3",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-minify": "^0.5.0",
+    "babel-preset-stage-2": "^6.24.1",
+    "css-loader": "^2.1.1",
+    "gh-pages": "^2.0.1",
+    "highlight.js": "^10.4.1",
+    "html-webpack-plugin": "^3.2.0",
+    "mkdirp": "^1.0.4",
+    "mobile-detect": "^1.4.3",
+    "rimraf": "^3.0.2",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.2.1"
+  }
+}