var isHotspotClick = false; var marzipanomap; var marzipanoRadar = null, infoPopupWindowId = ''; var HspotIndex = 1; var pageName = window.location.href; //var allowPanoClick = false; var isMouseMove = false, isPanoView = false; var MarzipanoSkinDetail = {}; var view; var autorotate, hotspotId; var Marzipano = window.Marzipano; var mobile1 = new Object(); // Create viewer. var startYaw = $('#hdn_startYaw').val(), startPitch = $('#hdn_startPitch').val(), startFov = $('#hdn_startFov').val(); if ((toureSkinType == 2 && startFov == "0") || cameratype == 2 || cameratype == 3) { startFov = $('#hdn_maxFov').val(); } var initialView = { yaw: startYaw, pitch: startPitch, fov: startFov }; var controls, VRredirectURL; $(document).ready(function () { if (/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { mobile1.matches = 1; } // For iPad else if (/iPad/i.test(navigator.userAgent)) { mobile1.matches = 2; } // For desktop else { mobile1.matches = 3; } //if (isMarzipanoAllowed() == "True" && isPanoPublished() == 'True') { if (isMarzipanoAllowed() == "True") { VRredirectURL = location.href + "&isVrDisplay=true";// "PreviewTour.aspx?panoguid=" + returnQueryString("panoguid") + "&tourid=" + $("#hdTourid").val() + "&isVrDisplay=true"; if (pageName.toLowerCase().indexOf('tour.aspx') > -1) { isPanoView = false } else { isPanoView = true; } if (typeof isVRView == 'undefined') { displayMarzipanoView(); } else { displayVrView(); } //======================================================= controls = viewer.controls(); var viewInElement = document.querySelector('#viewIn'); var viewOutElement = document.querySelector('#viewOut'); if (viewInElement != null) { controls.registerMethod('inElement', new Marzipano.ElementPressControlMethod(viewInElement, 'zoom', -velocity, friction), true); } if (viewOutElement != null) { controls.registerMethod('outElement', new Marzipano.ElementPressControlMethod(viewOutElement, 'zoom', velocity, friction), true); } var viewInNewTourElement = document.querySelector('#viewInNewTour'); var viewOutNewTourElement = document.querySelector('#viewOutNewTour'); if (viewInNewTourElement != null) { controls.registerMethod('inElement', new Marzipano.ElementPressControlMethod(viewInNewTourElement, 'zoom', -velocity, friction), true); } if (viewOutNewTourElement != null) { controls.registerMethod('outElement', new Marzipano.ElementPressControlMethod(viewOutNewTourElement, 'zoom', velocity, friction), true); } //========================================================= var viewerElement = document.getElementById('pano'); if (viewer != null) { viewer.addEventListener('viewChange', function () { addSniperHotSpot(); //resetRightLevelPosition(); updateCompass(); }); } if (isMapAllowed != false) { window.addEventListener('load', initMarzipanoMap); //google.maps.event.addDomListener(window, 'load', initMarzipanoMap); } if (viewSnipper() == false && skinid() != 92 && skinid() != 102) { toggleAutorotate(); } if (!mql.matches || navigator.userAgent.match(/iPad/i) != null) { $('#DIV_VRTogglesTour2').hide(); } else { $('#DIV_VRTogglesTour2').show(); } if (mql.matches == true) { $('#fullscreenToggles').hide(); } else { $("#viewIn").css('visibility', 'visible'); $("#viewOut").css('visibility', 'visible'); } if (window.location != window.parent.location && $('#div_Marzipano').width() <= 500) { window.setTimeout(function () { if (jsonHotSpot.length > 0) { $('.bx-viewport').hide(); } }, 500); } $("#marzimapPopUp").on("shown.bs.modal", function () { google.maps.event.trigger(marzipanomap, "resize"); var latlng = new google.maps.LatLng(panolatitude(), panolongitude()); marzipanomap.setCenter(latlng); }); } if ($("#hdShowWatermark").val() == "1") { $('#pano').append('
'); } }); function updateMarzipanoRadar() { if ((!activeNodeLatLng) || (!pano) || (!marzipanomap)) return; var d2r = Math.PI / 180; var r2d = 180 / Math.PI; var fov = (view.fov() * 180) / 3.14159; var panDiff = $('#hdn_panNorth').val(); var pan = ((-1) * (view.yaw() * 180) / 3.14159) - panDiff; var zoom = marzipanomap.getZoom(); if (((panolatitude() != 0) || (panolongitude() != 0))) { if (zoom < 6) zoom = 6; // avoid large radar beams on world map if ((fov == lastFov) && (pan == lastPan) && (zoom == lastZoom) && (panolatitude() == activeNodeLatLng.lat()) && (panolongitude() == activeNodeLatLng.lng())) return; // nothing to do lastPan = pan; lastFov = fov; lastZoom = zoom; activeNodeLatLng = new google.maps.LatLng(panolatitude(), panolongitude()); var rLat = 4.0 * r2d / Math.pow(2, zoom); // beam size var rLng = rLat / Math.cos(activeNodeLatLng.lat() * d2r); // generate radar fan for fov var radar_poly = new Array(); radar_poly.push(activeNodeLatLng); var segments = 5; for (i = -segments; i <= segments; i++) { var angle = (fov / (2 * segments)) * i; var x = -rLng * Math.sin((pan + angle) * d2r) + activeNodeLatLng.lng(); var y = rLat * Math.cos((pan + angle) * d2r) + activeNodeLatLng.lat(); radar_poly.push(new google.maps.LatLng(y, x)); } // clear old radar if (marzipanoRadar) { marzipanoRadar.setMap(null); marzipanoRadar = null; } // show radar marzipanoRadar = new google.maps.Polygon({ paths: radar_poly, strokeColor: "#000000", strokeOpacity: 0.8, strokeWeight: 1, fillColor: "#000000", fillOpacity: 0.35 }); marzipanoRadar.setMap(marzipanomap); } else { // clear radar if (marzipanoRadar) { activeNodeLatLng = new google.maps.LatLng(0, 0); marzipanoRadar.setMap(null); marzipanoRadar = null; } } } if (window.matchMedia) { var setMode = function () { if (mql.matches) { document.body.classList.remove('desktop'); document.body.classList.add('mobile'); } else { document.body.classList.remove('mobile'); document.body.classList.add('desktop'); } }; var mql = new Object();// matchMedia("(max-width: 500px), (max-height: 500px)"); if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { mql.matches = true; } else { const ua = window.navigator.userAgent.toLowerCase(); if (ua.indexOf('macintosh') > -1 && ('ontouchend' in document)) { mql.matches = true; } else { mql.matches = false; } } setMode(); //mql.addListener(setMode); } else { document.body.classList.add('desktop'); } // Detect whether we are on a touch device. document.body.classList.add('no-touch'); window.addEventListener('touchstart', function () { document.body.classList.remove('no-touch'); document.body.classList.add('touch'); }); if ($('#hdMarzipanoSkinDetail').val() != '') { //var screenfull = window.screenfull; MarzipanoSkinDetail = $.parseJSON($('#hdMarzipanoSkinDetail').val()); 'use strict'; infoPopupWindowId = MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.infoPopupWindowId; //if (MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.subscriptiontype == 2) { // infoPopupWindowId = 'info_popUpFreemium'; //} var subscriptiontype = MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.subscriptiontype; var showInfoButton = MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.showInfoButton; var showzoombutton = MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.showzoombutton; var showsharebutton = MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.showsharebutton; var showcopyright = MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.showcopyright; //============= info button will not be visible for online users =========== //if (showInfoButton == true && subscriptiontype != 2 && subscriptiontype != 3 && subscriptiontype != 4 && subscriptiontype != 5) { if (showInfoButton == true) { $('#aInfoWindow').show(); } if ($('#hdn_panNorth').val() == '0' && pageName.toLowerCase().indexOf('downloadpanobankimages.aspx') == -1) { $('.compass').css("visibility", "hidden"); } if (showzoombutton == true) { $('#div_ViewIn').show(); $('#div_ViewOut').show(); } else { $('#div_ViewIn').hide(); $('#div_ViewOut').hide(); } if (showsharebutton == true) { $('#social-media').show(); } else { $('#social-media').hide(); } var showHotspotTitleBorder = MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.showHotspotTitleBorder; var scene; var viewer; var imagesPath = $('#hdmarzipanoimgUrl').val();// GetMarzipanoImageBasePath() + "/" + $.trim(MarzipanoSkinDetail.data.marzipanoPanoImagesList[0].countrycode) + "/" + $.trim(MarzipanoSkinDetail.data.marzipanoPanoImagesList[0].panobankguid) + "/" + MarzipanoSkinDetail.data.marzipanoPanoImagesList[0].marzipanoImageName + "_{f}.jpg";//"panoimages/test" + "_" + "{f}.jpg"; var previewImagesPath = $('#hdmarzipanoimgUrl').val().replace('{f}', 'preview'); var source = Marzipano.ImageUrlSource.fromString( imagesPath, { cubeMapPreviewUrl: previewImagesPath, cubeMapPreviewFaceOrder: 'fdrblu' } ); var geometry; if (MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.hasSingleImage == true) { if ($('#hdnPreviewSingleImageUrl').val() != "") { source = new Marzipano.ImageUrlSource(function (tile) { if (tile.z === 0) { return { url: $('#hdnPreviewSingleImageUrl').val() }; } else { return { url: imagesPath }; } }); } geometry = new Marzipano.EquirectGeometry([{ width: 256 }, { width: 4000 }]); } else { geometry = new Marzipano.CubeGeometry([{ tileSize: 256, size: 256, fallbackOnly: true }, { size: 1024, tileSize: 1024 }]); } var limiter; if (MarzipanoSkinDetail.data.marzipanoPanoImagesList[0].isrestrictview == true) { limiter = Marzipano.util.compose ( Marzipano.RectilinearView.limit.vfov($('#hdn_minFov').val(), $('#hdn_maxFov').val()), Marzipano.RectilinearView.limit.hfov($('#hdn_minFov').val(), Math.PI / 2), Marzipano.RectilinearView.limit.pitch($('#hdn_minFov').val(), Math.PI / 2) ); } else if (checkIframRequest() == true) { limiter = Marzipano.util.compose ( Marzipano.RectilinearView.limit.vfov($('#hdn_minFov').val(), $('#hdn_maxFov').val()), Marzipano.RectilinearView.limit.hfov($('#hdn_minFov').val(), $('#hdn_maxFov').val()), Marzipano.RectilinearView.limit.pitch($('#hdn_minFov').val(), $('#hdn_minFov').val()) ); } else { limiter = Marzipano.util.compose ( Marzipano.RectilinearView.limit.vfov($('#hdn_minFov').val(), $('#hdn_maxFov').val()), Marzipano.RectilinearView.limit.hfov($('#hdn_minFov').val(), $('#hdn_maxFov').val()), Marzipano.RectilinearView.limit.pitch(-Math.PI / 2, Math.PI / 2) ); } var settings = { "mouseViewMode": "drag", "autorotateEnabled": false, "fullscreenButton": true, "viewControlButtons": false }; var fullscreenToggleElement = document.querySelector('#fullscreenToggles'); if (fullscreenToggleElement != null) { fullscreenToggleElement.addEventListener('click', toggleFullscreen); } var fullscreenToggleElementTour2 = document.querySelector('#fullscreenTogglesTour2'); if (fullscreenToggleElementTour2 != null) { fullscreenToggleElementTour2.addEventListener('click', toggleFullscreen); } $('#div_Marzipano').bind('drag', function () { $('.line').css({ 'width': '0px', 'height': '0px', 'background-color': '' }); screenfull.toggle(this); }) // DOM elements for view controls. //var viewUpElement = document.querySelector('#viewUp'); //var viewDownElement = document.querySelector('#viewDown'); //var viewLeftElement = document.querySelector('#viewLeft'); //var viewRightElement = document.querySelector('#viewRight'); // Dynamic parameters for controls. var velocity = 0.7; var friction = 3; // Associate view controls with elements. //controls.registerMethod('upElement', new Marzipano.ElementPressControlMethod(viewUpElement, 'y', -velocity, friction), true); //controls.registerMethod('downElement', new Marzipano.ElementPressControlMethod(viewDownElement, 'y', velocity, friction), true); //controls.registerMethod('leftElement', new Marzipano.ElementPressControlMethod(viewLeftElement, 'x', -velocity, friction), true); //controls.registerMethod('rightElement', new Marzipano.ElementPressControlMethod(viewRightElement, 'x', velocity, friction), true); $("#viewMap").click(function () { $('#marzimapPopUp').modal("show"); }); $('#pano').mousedown(function (e) { isMouseMove = true; if (isPreview == false && MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.allowdrawline == true) { if (editMode.get() == "hide") { var parentOffset = $(this).parent().offset(); //var pressPosition = { x: e.clientX, y: e.clientY } var pressPosition = { x: e.pageX - parentOffset.left, y: e.pageY - parentOffset.top } var obj = view.screenToCoordinates(pressPosition); var position = { yaw: obj.yaw, pitch: obj.pitch, fov: view.fov() }; hotSpotCount += 1; addLineSpotOnPosition(position); var lineHeight = $('#txtWidth').val() == "" ? 5 : $('#txtWidth').val() == "0" ? 5 : $('#txtWidth').val(); var lineColor = $('#hdn_rowcolor').val(); var lineStyle = $('input[name=lineType]:checked').val(); if (hotSpotCount > 1) { //arrHotSpot.push({ 'point1': point1.id, 'point2': point2.id, 'lineId': lineId, 'point1Yaw': point1.yaw, 'point1Pitch': point1.pitch, 'point1Fov': point1.fov, 'point2Yaw': point2.yaw, 'point2Pitch': point2.pitch, 'point2Fov': point2.fov, 'lineHeight': lineHeight, 'lineBackColor': lineColor, 'lineStyle': lineStyle, isLineDraw: true }); var newLinePointArr = []; newLinePointArr.push({ point1Yaw: point1.yaw, point1Pitch: point1.pitch, point1Fov: point1.fov }); newLinePointArr = addLineHotSpotArray($('#' + point1.id).offset(), $('#' + point2.id).offset(), newLinePointArr); var point3 = { yaw: newLinePointArr[parseInt(newLinePointArr.length / 2)].point1Yaw, pitch: newLinePointArr[parseInt(newLinePointArr.length / 2)].point1Pitch, fov: newLinePointArr[parseInt(newLinePointArr.length / 2)].point1Fov, }; addNewLinePoint(point3, HspotIndex, lineId, 2); newLinePointArr.push({ point1Yaw: point2.yaw, point1Pitch: point2.pitch, point1Fov: point2.fov }); //linepointspots = linepointspots.concat(newLinePointArr); arrHotSpot.push({ 'point1': point1.id, 'point2': point2.id, 'lineId': lineId, 'point1Yaw': point1.yaw, 'point1Pitch': point1.pitch, 'point1Fov': point1.fov, 'point2Yaw': point2.yaw, 'point2Pitch': point2.pitch, 'point2Fov': point2.fov, 'point3Yaw': point3.yaw, 'point3Pitch': point3.pitch, 'point3Fov': point3.fov, 'lineHeight': lineHeight, 'lineBackColor': lineColor, 'lineStyle': lineStyle, isLineDraw: true }); drawSingleLine(point1, point2, lineId, lineHeight, lineColor, lineStyle, arrHotSpot.length - 1); isMouseMove = false; //drawLine(); } } else if (editMode.get() != 'hide') { $('.circle').remove() } } }); //=============== Color Picker if (window.location.href.toLowerCase().indexOf('dynamicdroneviewbank.aspx') > -1 || window.location.href.toLowerCase().indexOf('droneviewpoi.aspx') > -1 || window.location.href.toLowerCase().indexOf('createdroneview.aspx') > -1) { $('#colorSelector').ColorPicker({ color: '#0000ff', onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; }, onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; }, onChange: function (hsb, hex, rgb) { $('#divLineColor').css('backgroundColor', '#' + hex); $('#hdn_rowcolor').val('#' + hex); } }); } 'use strict'; (function () { function EditMode() { var self = this; this.shiftPressed = false; this.ctrlPressed = false; window.addEventListener('keydown', function (e) { var previousEditMode = self.get(); if (e.keyCode === 16) { self.shiftPressed = true; } if (e.keyCode === 17) { self.ctrlPressed = true; } if (self.get() !== previousEditMode) { self.emit('changed'); } }); window.addEventListener('keyup', function (e) { var previousEditMode = self.get(); if (e.keyCode === 16) { self.shiftPressed = false; } if (e.keyCode === 17) { self.ctrlPressed = false; } if (self.get() !== previousEditMode) { self.emit('changed'); } }); window.addEventListener('blur', function () { var previousEditMode = self.get(); self.shiftPressed = false; self.ctrlPressed = false; if (self.get() !== previousEditMode) { self.emit('changed'); } }); } Marzipano.dependencies.eventEmitter(EditMode); EditMode.prototype.get = function () { if (this.shiftPressed) { return 'hide'; } else if (this.ctrlPressed) { return 'show'; } else { return false; } } window.editMode = new EditMode(); })(); //$(document).ready(function () { // if (skinid() != 52) { // $("#info_popUp").click(function () { // $("#info_popUp").hide(); // }); // } // else { $('.infocloseIcon').hide(); } // $("#info_popUpFast").click(function () { // $("#info_popUpFast").hide(); // }); //}); var autorotateToggleElement = document.querySelector('#autorotateToggles'); if (viewSnipper() != true) { if (pageName.toLowerCase().indexOf("tour.aspx") > -1) { if (toureSkinType == 2) { autorotateToggleElement = document.querySelector('#autorotateTogglesTour2'); } } // Set up autorotate, if enabled. if (MarzipanoSkinDetail.data.marzipanoPanoImagesList[0].isrestrictview == true) { autorotate = Marzipano.autorotate({ yawSpeed: 0.03, targetPitch: null }); } else { autorotate = Marzipano.autorotate({ yawSpeed: 0.03, targetPitch: null, targetFov: Math.PI / 2 }); } if (settings.autorotateEnabled) { autorotateToggleElement.classList.add('enabled'); } if (autorotateToggleElement != null) { autorotateToggleElement.addEventListener('click', toggleAutorotate); } } if (allowPanoClick == true) { if (autorotateToggleElement != undefined) { var panoQuery = document.querySelector('#pano'); if (panoQuery != null) { if (mql.matches) { panoQuery.addEventListener('touchstart', function () { autorotateToggleElement.classList.remove('enabled'); stopAutorotate(); }); } else { panoQuery.addEventListener('click', function () { autorotateToggleElement.classList.remove('enabled'); stopAutorotate(); }); $('#pano').dblclick(function (e) { autorotateToggleElement.classList.add('enabled'); startAutorotate(); }) } } } } $('#pano').mouseup(function (e) { isMouseMove = false; if (isPreview == false && MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.allowdrawline == true) { if (editMode.get() != 'hide' && hotSpotCount > 0) { //arrPoly.push({ arrHotSpot: arrHotSpot }); hotSpotCount = 0; //arrHotSpot = []; //drawLine(); } else if (editMode.get() != 'hide') { drawLine(); } } }); } // Display scene. function displayMarzipanoView() { if (typeof viewer != 'undefined') { viewer.destroy(); } viewer = new Marzipano.Viewer(document.getElementById('pano'), { stage: { preserveDrawingBuffer: true } }); view = new Marzipano.RectilinearView(initialView, limiter); scene = viewer.createScene({ source: source, geometry: geometry, view: view, pinFirstLevel: true }); scene.switchTo(); //loadDetail(); } function toggleFullscreen() { $('#div_Marzipano').trigger('drag'); } var viewerElement = document.getElementById('pano'); //============== hotspot region starts hear ============ var point1 = {}; var point2 = {}; var lineId = null; var arrPoly = []; var arrHotSpot = []; var linepointspots = []; var hotSpotCount = 0; var editMode = window.editMode; function getImageUrl(ImageName) { var imagedetail = {}; if (ImageName.lastIndexOf('2D') > 0) { ImageName = ImageName.replace('2D', ''); } $.each(MarzipanoSkinDetail.data.hotSpotImagesList, function (index, HotSpotImageData) { if (HotSpotImageData.name == ImageName) { imagedetail.imageSrc = SkinBaseUrl() + "images/" + HotSpotImageData.imageName; imagedetail.imageHeight = HotSpotImageData.imageHeight; imagedetail.imageWidth = HotSpotImageData.imageWidth; imagedetail.imageName = HotSpotImageData.name; return false; } }) return imagedetail; } function closeVideo() { $('#videoContainer_iframe').attr('src', ''); $('#videoContainer1').hide(); } function close2DTour() { $('#2DContainer_iframe').attr('src', ''); $('#div2DContainer').hide(); } function popUpVideo(video, hptspotId) { if (video.toLowerCase().indexOf('twodtour.aspx') > -1) {//This is to adjust the iframe width and height. $('#2DContainer_iframe').attr('src', video); $('#div2DContainer').show(); if (mobile1.matches == 1) { window.setTimeout(function () { const $elem = $("#div2DContainer"); var hei = $('#2DContainer_iframe').contents().find('body').height() + 15; $elem[0].style.setProperty('height', hei + 'px', 'important'); }, 1000); } } else { $('#videoContainer_iframe').attr('src', video); $('#videoContainer1').show();//css('style', 'position: absolute; left: 50%; top: 50%; transform-origin: 50% 50% 0px; z-index:99999; transition: none; visibility:inherit;'); $('#videoContainer_iframe').removeClass('tourinvideo'); } if (video.indexOf('fastout') > -1) {//to add fake class to get whether tour or vr-photo is added in video hotspot $('#videoContainer_iframe').addClass('tourinvideo'); } autorotateToggleElement.classList.remove('enabled'); stopAutorotate(); return false; } function popUp2DTour(url) { $('#2DContainer_iframe').attr('src', url); $('#div2DContainer').show();//css('style', 'position: absolute; left: 50%; top: 50%; transform-origin: 50% 50% 0px; z-index:99999; transition: none; visibility:inherit;'); if (mobile1.matches == 1) { window.setTimeout(function () { const $elem = $("#div2DContainer"); var hei = $('#2DContainer_iframe').contents().find('body').height() + 15; $elem[0].style.setProperty('height', hei + 'px', 'important'); }, 1000); } autorotateToggleElement.classList.remove('enabled'); stopAutorotate(); return false; } function popUpComments(commentsImageName, text, hptspotId) { $('.commentsdiv').remove(); var commentsDivId = "comments_" + hotspotId; $("div").remove('#' + commentsDivId); //var Wrapper = "