File: /home/artinside/www/lhh/themes/en/assets/include/rs-plugin/js/addons/revolution.addon.panorama.js
/*
* @author ThemePunch <info@themepunch.com>
* @link http://www.themepunch.com/
* @copyright 2017 ThemePunch
*/
;(function() {
var $,
engine,
requestFrame = window.requestAnimationFrame;
window.RsAddonPanorama = function(_$, slider) {
if(!engine) {
engine = webGL();
if(!engine) {
slider.addClass('pano-no-webgl');
return;
}
}
if(!_$ || !slider || typeof THREE === 'undefined' || !requestFrame) return;
if(!slider.find('li[data-panorama]').length) return;
$ = _$;
$.event.special.rsPanoramaDestroyed = {remove: function(evt) {evt.handler();}};
return new Panorama(slider);
};
function Panorama(slider) {
this.slider = slider;
this.slides = [];
this.panos = slider.find('li[data-panorama]').each(function(i) {
if(i === 0) this.setAttribute('data-fstransition', 'notransition');
this.setAttribute('data-transition', 'fade');
});
slider.one('revolution.slide.onloaded', this.onLoaded.bind(this))
.one('rsPanoramaDestroyed', this.destroy.bind(this));
}
Panorama.prototype = {
onLoaded: function() {
this.slider.one('revolution.slide.onchange', this.onReady.bind(this));
jQuery(window).on('blur.rsaddonpanorama', this.onBlur.bind(this));
},
onReady: function(e, data) {
this.resize();
var $this = this;
this.panos.each(function(i) {
$this.slides[i] = new PanoramaSlide($(this), $this.slider, $this.width, $this.height);
});
this.slider.on('revolution.slide.afterdraw', this.resize.bind(this))
.on('revolution.slide.onbeforeswap', this.beforeSwap.bind(this))
.on('revolution.slide.onafterswap', this.afterSwap.bind(this))
.on('layeraction', this.layerAction.bind(this));
var slide = $.data(data.currentslide[0], 'rsaddonpanorama');
if(slide) slide.onReset();
this.panos = null;
},
beforeSwap: function(e, data) {
var slide = $.data(data.currentslide[0], 'rsaddonpanorama');
if(slide && slide.controls) slide.removeEvents();
slide = $.data(data.nextslide[0], 'rsaddonpanorama');
if(slide) slide.onReset();
},
afterSwap: function(e, data) {
this.currentSlide = $.data(data.currentslide[0], 'rsaddonpanorama');
if(!data.prevslide.length) return;
var slide = $.data(data.prevslide[0], 'rsaddonpanorama');
if(slide) slide.paused = true;
},
resize: function() {
this.width = this.slider.width();
this.height = this.slider.height();
var i = this.slides.length,
slide;
while(i--) {
slide = this.slides[i];
slide.resize(this.width, this.height);
}
},
onBlur: function() {
var i = this.slides.length,
slide;
while(i--) {
slide = this.slides[i];
slide.clear();
slide.canvas.trigger('mouseup').trigger('mouseleave').trigger('touchend');
}
},
layerAction: function(e, data) {
data = data.event;
var action = data.action;
if(action && action.search('panorama') !== -1 && this.currentSlide) {
var perc = data.hasOwnProperty('percentage') ? data.percentage * 0.01 : false;
this.currentSlide.action(action.replace('panorama_', ''), perc);
}
},
destroy: function() {
if(this.slides) {
while(this.slides.length) {
this.slides[0].destroy();
this.slides.shift();
}
}
for(var prop in this) if(this.hasOwnProperty(prop)) delete this[prop];
}
};
function PanoramaSlide(slide, slider, width, height) {
var options = JSON.parse(slide.attr('data-panorama'));
this.x = 0;
this.y = 0;
this.zoomVal = 1;
this.width = width;
this.height = height;
this.slide = slide;
this.slider = slider;
this.distX = false;
this.distY = false;
this.image = options.image;
this.controls = options.controls;
this.drag = this.controls === 'drag';
this.thrw = this.controls === 'throw';
this.move = this.drag || this.thrw;
this.mouse = this.controls === 'mouse';
this.click = this.controls === 'click';
this.autoplay = options.autoplay == 'true';
this.zoom = options.mousewheelZoom == 'true';
this.smoothZoom = options.smoothZoom == 'true';
var direction = options.autoplayDirection === 'forward' ? 1 : -1;
this.autoplaySpeed = parseInt(options.autoplaySpeed, 10) * 0.001;
this.speed = this.autoplaySpeed * direction;
this.throwSpeed = parseInt(options.throwSpeed, 10) * 0.001;
this.zoomMax = 2 - (parseInt(options.zoomMax, 10) * 0.01);
this.zoomMin = 2 - (parseInt(options.zoomMin, 10) * 0.01);
this.fov = parseInt(options.cameraFov, 10);
this.onStart = this.start.bind(this);
this.onZoom = this.zooming.bind(this);
this.inZoom = this.zoomIn.bind(this);
this.outZoom = this.zoomOut.bind(this);
this.onRender = this.render.bind(this);
this.onMouse = this.mouseEvent.bind(this);
this.onImgChange = this.imgChange.bind(this);
this.fireAction = this.onAction.bind(this);
this.renderer = new THREE[engine]();
this.renderer.setSize(width, height);
this.camera = new THREE.PerspectiveCamera(this.fov, width / height, 1, parseInt(options.cameraFar, 10));
this.camera.target = new THREE.Vector3(0, 0, 0);
var sphere = new THREE.SphereGeometry(parseInt(options.sphereRadius, 10), parseInt(options.sphereWsegments, 10), parseInt(options.sphereHsegments, 10));
this.texture = new THREE.TextureLoader();
this.texture.minFilter = THREE.LinearFilter;
sphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));
this.material = new THREE.MeshBasicMaterial();
this.scene = new THREE.Scene();
this.scene.add(new THREE.Mesh(sphere, this.material));
$.data(slide[0], 'rsaddonpanorama', this);
this.canvas = $(this.renderer.domElement).addClass('rsaddon-panorama').appendTo(slide.find('.slotholder'));
slide.on('mouseleave', this.onLeave.bind(this)).find('.tp-withaction').each(setActions);
}
PanoramaSlide.prototype = {
start: function() {
if(!this.imgLoaded) this.imgLoaded = true;
if(!this.currentSlide) return;
if(this.newImage) {
this.x = 0;
this.y = 0;
this.zoomVal = 1;
this.camera.fov = this.fov;
this.camera.updateProjectionMatrix();
this.newImage = false;
}
this.controller = false;
this.paused = false;
// this.slider.removeClass('rsaddon-panorama-loading');
requestFrame(this.onRender);
this.addEvents();
this.running = true;
this.slider.addClass('rsaddon-pano');
},
render: function() {
if(this.paused || !this.camera) return;
this.y = Math.max(-85, Math.min(85, this.y));
if(this.distX !== false || this.distY !== false) {
if(this.distX !== false) {
this.x += (this.distX - this.x) * 0.05;
if(Math.abs(this.distX - this.x) < 1) {
this.distX = false;
clearInterval(this.actionTimer);
}
}
else if(this.distY !== false) {
this.y += (this.distY - this.y) * 0.05;
if(Math.abs(this.distY - this.y) < 1) {
this.distY = false;
clearInterval(this.actionTimer);
}
}
}
else if(!this.controller) {
if(this.autoplay) this.x += this.speed;
}
else if(!this.move) {
var xx = (this.mouseX - this.left) / this.width,
yy = (this.mouseY - this.top) / this.height;
xx = xx <= 0.5 ? (1 - (xx * 2)) * -180 : ((xx - 0.5) * 2) * 180;
yy = yy <= 0.5 ? (1 - (yy * 2)) * 85 : ((yy - 0.5) * 2) * -85;
yy = Math.max(-85, Math.min(85, yy));
this.x += (xx - this.x) * 0.05;
this.y += (yy - this.y) * 0.05;
if((this.click || this.mouse) && Math.abs(xx - this.x) < 1 && Math.abs(yy - this.y) < 1) this.controller = false;
}
else if(this.thrw) {
if(this.mousedown) {
this.vx = this.x - this.oldX;
this.vy = this.y - this.oldY;
this.oldX = this.x;
this.oldY = this.y;
}
else {
var vx = Math.abs(this.vx),
vy = Math.abs(this.vy);
if(vx > 0.01) this.x += this.vx;
if(vy > 0.01) this.y += this.vy;
this.vx *= this.throwSpeed;
this.vy *= this.throwSpeed;
if(vx <= 0.01 && vy <= 0.01) this.controller = false;
}
}
var x = THREE.Math.degToRad(this.x),
y = THREE.Math.degToRad(90 - this.y);
this.camera.target.x = Math.sin(y) * Math.cos(x);
this.camera.target.z = Math.sin(y) * Math.sin(x);
this.camera.target.y = Math.cos(y);
this.camera.lookAt(this.camera.target);
if(this.smoothZoom) {
this.camera.fov += ((this.fov * this.zoomVal) - this.camera.fov) * 0.05;
this.camera.updateProjectionMatrix();
}
this.renderer.render(this.scene, this.camera);
requestFrame(this.onRender);
},
onLeave: function() {
clearInterval(this.actionTimer);
clearInterval(this.zoomTimer);
},
clear: function() {
clearInterval(this.actionTimer);
clearInterval(this.zoomTimer);
this.distX = false;
this.distY = false;
},
onAction: function() {
this.action(this.actionType, this.actionPerc);
},
action: function(tpe, perc) {
var actionType,
dist;
switch(tpe) {
case 'left':
this.distX = this.x + (-180 * perc);
break;
case 'right':
this.distX = this.x + (180 * perc);
break;
case 'up':
dist = this.y + (85 * perc);
this.distY = Math.max(-85, Math.min(85, dist));
break;
case 'down':
dist = this.y + (-85 * perc);
this.distY = Math.max(-85, Math.min(85, dist));
break;
case 'leftstart':
actionType = 'left';
break;
case 'rightstart':
actionType = 'right';
break;
case 'upstart':
actionType = 'up';
break;
case 'downstart':
actionType = 'down';
break;
case 'leftend':
case 'rightend':
case 'upend':
case 'downend':
clearInterval(this.actionTimer);
break;
case 'zoomin':
clearInterval(this.zoomTimer);
this.zooming('gestureend', 0.5);
break;
case 'zoomout':
clearInterval(this.zoomTimer);
this.zooming('gestureend', 1.5);
break;
case 'zoominstart':
clearInterval(this.zoomTimer);
this.inZoom();
this.zoomTimer = setInterval(this.inZoom, 100);
break;
case 'zoomoutstart':
clearInterval(this.zoomTimer);
this.outZoom();
this.zoomTimer = setInterval(this.outZoom, 100);
break;
case 'zoominend':
case 'zoomoutend':
clearInterval(this.zoomTimer);
break;
}
if(actionType) {
this.clear();
this.actionPerc = perc;
this.actionType = actionType;
this.fireAction();
this.actionTimer = setInterval(this.fireAction, 100);
}
},
zooming: function(e, scale) {
var tpe;
this.prevZoom = this.zoomVal;
if(e !== 'gestureend') {
tpe = e.type;
scale = e.scale;
}
else {
tpe = e;
}
if(tpe !== 'gestureend') {
if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) this.zoomVal -= 0.05;
else this.zoomVal += 0.05;
}
else {
if(scale < 1) this.zoomVal -= 0.05;
else this.zoomVal += 0.05;
}
this.zoomVal = Math.max(this.zoomMax, Math.min(this.zoomMin, this.zoomVal));
if(this.zoomVal === this.zoomMax || this.zoomVal === this.zoomMin) clearInterval(this.zoomTimer);
if(!this.smoothZoom) {
this.camera.fov = this.fov * this.zoomVal;
this.camera.updateProjectionMatrix();
}
return false;
},
zoomIn: function() {
this.zooming('gestureend', 0.5);
},
zoomOut: function() {
this.zooming('gestureend', 1.5);
},
imgChange: function() {
this.timer = setTimeout(this.onStart, 500);
},
update: function(prop, val, callback) {
clearTimeout(this.timer);
this.removeEvents();
this.paused = true;
switch(prop) {
case 'image':
// this.slider.addClass('rsaddon-panorama-loading');
this.newImage = true;
this.material.map = this.texture.load(val, this.onImgChange);
break;
case 'controls':
this.controls = val;
if(val !== 'none') {
this.drag = val === 'drag';
this.thrw = val === 'throw';
this.mouse = val === 'mouse';
this.click = val === 'click';
this.move = this.drag || this.thrw;
}
else {
this.x = 0;
this.y = 0;
}
break;
case 'autoplay':
this.autoplay = val == 'true';
break;
case 'direction':
var direction = val === 'forward' ? 1 : -1;
this.speed = this.autoplaySpeed * direction;
break;
case 'zoom':
if(val == 'false') {
delete this.zoom;
this.zoomVal = 1;
this.camera.fov = this.fov;
this.camera.updateProjectionMatrix();
}
else {
this.zoom = true;
}
break;
case 'smooth':
this.smoothZoom = val == 'true';
break;
}
if(prop !== 'image') this.timer = setTimeout(this.onStart, 500);
},
resize: function(width, height) {
this.width = width;
this.height = height;
this.renderer.setSize(width, height);
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
},
onReset: function() {
this.paused = true;
this.currentSlide = true;
this.x = 0;
this.y = 0;
this.distX = false;
this.distY = false;
this.zoomVal = 1;
this.camera.fov = this.fov;
this.camera.updateProjectionMatrix();
if(!this.imgLoaded) this.material.map = this.texture.load(this.image, this.onStart);
else this.start();
},
enterMouse: function(e, triggered) {
if(this.move) this.canvas.removeClass('rsaddon-panorama-drag').addClass('rsaddon-panorama-dragging');
this.clear();
this.controller = true;
this.mousedown = true;
var offset = this.slider.offset();
this.left = offset.left;
this.top = offset.top;
if(!triggered) {
var touch = e.originalEvent.touches;
if(touch) e = touch[0];
this.startX = e.pageX - this.left;
this.startY = e.pageY - this.top;
this.prevX = this.x;
this.prevY = this.y;
this.oldX = this.x;
this.oldY = this.y;
this.canvas.on('mousemove.rsaddonpanorama touchmove.rsaddonpanorama', this.onMouse);
}
},
mouseEvent: function(e) {
this.onLeave();
if(e.type.search(/move|click/) !== -1) {
if(this.move) {
if(!this.controller || !this.mousedown) return;
}
else if(!this.controller) {
this.enterMouse(e, true);
}
var touch = e.originalEvent.touches;
if(touch) e = touch[0];
if(!this.move) {
this.mouseX = e.pageX;
this.mouseY = e.pageY;
}
else {
this.x = this.prevX + ((this.startX - (e.pageX - this.left)) * 0.1);
this.y = this.prevY + (((e.pageY - this.top) - this.startY) * 0.1);
}
}
else if(e.type.search(/down|enter|start/) !== -1) {
this.enterMouse(e);
}
else {
this.canvas.off('mousemove.rsaddonpanorama touchmove.rsaddonpanorama');
if(this.drag) this.controller = false;
this.mousedown = false;
if(this.move) this.canvas.removeClass('rsaddon-panorama-dragging').addClass('rsaddon-panorama-drag');
}
},
addEvents: function() {
switch(this.controls) {
case 'drag':
case 'throw':
this.canvas.on(
'mousedown.rsaddonpanorama ' +
'mouseup.rsaddonpanorama ' +
'mouseleave.rsaddonpanorama ' +
'touchstart.rsaddonpanorama ' +
'touchend.rsaddonpanorama ' +
'touchcancel.rsaddonpanorama',
this.onMouse);
break;
case 'click':
this.slide.on('click.rsaddonpanorama', this.onMouse);
break;
case 'mouse':
this.slide.on('mousemove.rsaddonpanorama touchmove.rsaddonpanorama', this.onMouse);
break;
}
if(this.zoom) this.slider.on('mousewheel.rsaddonpanorama DOMMouseScroll.rsaddonpanorama gestureend.rsaddonpanorama', this.onZoom);
if(this.controls !== 'none') {
if(this.move) this.canvas.addClass('rsaddon-panorama-drag');
else if(this.click) this.slide.addClass('rsaddon-panorama-click');
}
},
removeEvents: function() {
this.clear();
this.mousedown = false;
this.controller = false;
this.currentSlide = false;
switch(this.controls) {
case 'drag':
case 'throw':
this.canvas.off('.rsaddonpanorama');
break;
case 'mouse':
case 'click':
this.slide.off('.rsaddonpanorama');
break;
}
this.slider.off('.rsaddonpanorama');
this.slide.removeClass('rsaddon-panorama-click');
this.canvas.removeClass('rsaddon-panorama-drag rsaddon-panorama-dragging');
},
destroy: function() {
for(var prop in this) if(this.hasOwnProperty(prop)) delete this[prop];
}
};
function stopBubble(e) {
e.stopPropagation();
}
function setActions() {
var $this = jQuery(this),
actions = $this.data().actions;
if($this.hasClass('rspanoaction') || !Array.isArray(actions)) return;
var i = actions.length,
action;
while(i--) {
action = actions[i];
if(action.action.search('panorama') !== -1) $this.addClass('rspanoaction').on('mousedown click mousemove touchmove', stopBubble);
}
}
function webGL() {
var canvas;
try {
canvas = document.createElement('canvas');
canvas = !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
if(canvas) canvas = 'WebGLRenderer';
}
catch(e) {}
if(!canvas) {
canvas = window.CanvasRenderingContext2D;
if(canvas) canvas = 'CanvasRenderer';
}
return canvas;
}
})();