'
].join("");
}
// Bind events to axure login speech bubble (watermark, login, errors, click outside)
function bindAxureLoginContainerEvent() {
var $container = $("#accountLoginContainer");
$container.find('input[name="email"]').addClass("watermark").val(emailHint).focus(function () {
if ($(this).val() === emailHint) {
$(this).removeClass("watermark").val("");
}
}).blur(function () {
if ($(this).val() === "") {
$(this).addClass("watermark").val(emailHint);
}
$container.find('.errorMessage').text('');
$container.find('.errorMessage').hide();
}).keyup(function (event) {
if (event.keyCode == 13) {
$container.find('.feedbackGreenBtn').click();
}
});
$container.find('input[name="password"]').addClass("watermark").val(passHint).focus(function () {
if ($(this).val() === passHint) {
$(this).removeClass("watermark").val("");
//$(this).removeClass("watermark").val("").attr("type", "password");
// Note: this might be an issue since jquery doesn't like it. Test in IE
$(this)[0].setAttribute('type', 'password');
}
}).blur(function () {
if ($(this).val() === "") {
$(this).val(passHint).addClass("watermark");
//$(this).val(passHint).addClass("watermark").removeAttr("type");
// Note: this might be an issue since jquery doesn't like it. Test in IE
$(this)[0].setAttribute('type', 'text');
}
$container.find('.errorMessage').text('');
$container.find('.errorMessage').hide();
}).keyup(function (event) {
if (event.keyCode == 13) {
$container.find('.feedbackGreenBtn_Player').click();
}
});
// Login Submit Event
$container.find('.feedbackGreenBtn_Player').click(function (e) {
var email = $container.find('.axureEmail').val();
var password = $container.find('.axurePassword').val();
$axure.player.axureLogin(email, password, function (response) {
// Success
// Clear out fields
$container.find('.axureEmail').val(emailHint).addClass("watermark");
$container.find('.axurePassword').val(passHint).addClass("watermark");
$container.find('.axurePassword')[0].setAttribute('type', 'text');
closePopup();
}, function (response) {
// Failure
$container.find('.errorMessage').text(response != null && response.message ? response.message : "There was an error connecting to the server, please try again later.");
$container.find('.errorMessage').show();
}, function (response) {
// SAML User
$container.find('.errorMessage').empty();
$container.find('.errorMessage').append("Please refresh this page after logging in via your identity provider.");
$container.find('.errorMessage').show();
window.open(response.redirecturl, '_blank');
$container.find('.errorMessage').find('.refreshLink').click(function () {
location.reload(true);
});
});
});
};
function initializeSignIn() {
if (typeof PREVIEW_INFO === 'undefined' && $axure.player.settings.isAxshare) {
(function finishInit() {
if (window.$axshare == null || $axshare.auth == null || $axshare.login == null) {
setTimeout(finishInit, 50);
} else {
// Call to set readOnlyMode, readOnlyMessage, and isSubinstance (readOnlyMode/Message currently only used for feedback9)
$.ajax({
type: 'GET',
url: feedbackServiceUrl + '/GetShareStatus',
data: {},
success: function (response) {
//readOnlyMode = response.readOnlyMode;
//readOnlyMessage = response.readOnlyMessage;
isSubInstance = response.isSubInstance;
if (isSubInstance) $('#accountLoginContainer').find("#playerSignUpLink").hide();
// For now, calling methods to set these values in feedback on start (could later make a general method to retrieve these values from player)
if (typeof feedback !== 'undefined') {
feedback.setReadOnlyModeAndMessage(response.readOnlyMode, response.readOnlyMessage);
feedback.setIsSubInstance(isSubInstance);
}
},
dataType: 'jsonp'
});
// Login container
$("#accountLoginContainer").append(buildAccountLoginPopup());
bindAxureLoginContainerEvent();
// Attempt to auth and acquire account information, then update top panel
$axure.player.axureAuth();
}
})();
}
}
function overflowIsHidden(node) {
var style = getComputedStyle(node);
return style.overflow === 'hidden' || style.overflowX === 'hidden' || style.overflowY === 'hidden';
}
function findNearestScrollableParent(firstNode) {
var node = firstNode;
var scrollable = null;
while (!scrollable && node) {
if (node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight) {
if (!overflowIsHidden(node) || $(node).css('-webkit-overflow-scrolling') === 'touch') {
scrollable = node;
}
}
node = node.parentNode;
}
return scrollable;
}
function getScrollOwner(target) {
var owner = findNearestScrollableParent(target);
if (!owner || owner === document.documentElement || owner === document.body || $(owner).parents('#topPanel').length || owner == document.getElementById('forwardSlash')) {
return null;
}
return owner;
}
function removeElasticScrollFromIframe() {
var $iframe = $($('#mainPanel').find('iframe')[0].contentWindow);
$iframe[0].document.body.addEventListener('touchmove', function (event) {
if (!getScrollOwner(event.target)) {
event.preventDefault();
}
}, { passive: false });
}
$(document).ready(function () {
(function finishPlayerInit() {
if ($axure.player.settings.isAxshare) {
$axure.page.bind('load.start', contentDocument_onload);
if ($axure.player.settings.loadFeedbackPlugin) {
$axure.utils.loadJS('/Scripts/plugins/feedback/feedback9.js');
/******* DEBUG: Allows for debugging/viewing feedback9.js in browser inspect mode ******/
//var hdr = document.createElement('script');
//hdr.type = "text/javascript"
//hdr.src = '/Scripts/plugins/feedback/feedback9.js';
//document.head.appendChild(hdr);
}
}
initializeEvents();
initializeMainFrame();
$('.leftPanel').width(0);
$('#maximizePanelContainer').hide();
if ($axure.player.settings.startCollapsed) {
collapse();
$('.leftPanel').width(0);
var maxPanelWidth = $('#maximizePanel').width();
setTimeout(function() {
$('#maximizePanel').animate({
left:'-' + maxPanelWidth + 'px'
}, 300);
}, 2000);
}
if (MOBILE_DEVICE) {
$('body').removeClass('hashover');
if (SAFARI) {
// Stop pinch zoom (stopping all gestures for now)
// Gesturestart is only supported in Safari
document.addEventListener("gesturestart", function (e) {
e.preventDefault();
});
}
if (IOS) {
// Attempt at removing elastic scroll while in mobile menu
var touching = false;
var pageYStart = 0;
var pageYOffset = 0;
document.body.addEventListener('touchend', function (event) {
if (getScrollOwner(event.target)) {
touching = false;
}
}, { passive: false });
document.body.addEventListener('touchmove', function (event) {
var owner = getScrollOwner(event.target)
if (!owner) {
event.preventDefault();
} else {
if ($(owner).scrollTop() == 0) {
if (touching) {
if (event.pageY >= pageYStart) {
event.preventDefault();
}
}
}
if ($(owner).scrollTop() + $(owner).height() == owner.scrollHeight) {
if (touching) {
if (event.pageY <= pageYStart) {
event.preventDefault();
}
}
}
}
}, { passive: false });
document.body.addEventListener('touchstart', function (event) {
var owner = getScrollOwner(event.target);
if (owner) {
if ($(owner).scrollTop() == 0) {
touching = true;
pageYStart = event.pageY;
pageYOffset = event.pageY;
}
if ($(owner).scrollTop() + $(owner).height() == owner.scrollHeight) {
touching = true;
pageYStart = event.pageY;
pageYOffset = event.pageY;
}
}
}, { passive: false });
removeElasticScrollFromIframe();
$('html').css('-webkit-tap-highlight-color', 'transparent');
// Stop iOS from automatically scaling parts of the mobile player
// Could stop automatic scaling on Ipads as well that we actually want, but for now, seems fine
$('body').css('-webkit-text-size-adjust', '100%');
// Prepare for Iphone X hacks
// Link for dimensions: https://kapeli.com/cheat_sheets/iOS_Design.docset/Contents/Resources/Documents/index
var ratio = window.devicePixelRatio || 1;
// Regular iphoneX
if (IOS && window.screen.width * ratio == 1125 && window.screen.height * ratio === 2436) {
iphoneX = true;
}
// Iphone XS Max and Iphone XR
if (IOS && window.screen.width == 414 && window.screen.height === 896) {
iphoneX = true;
}
window.addEventListener("orientationchange", function () {
var viewport = document.querySelector("meta[name=viewport]");
//so iOS doesn't zoom when switching back to portrait
if (iphoneX) {
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover');
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, viewport-fit=cover');
} else {
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0');
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0');
}
$axure.player.resizeContent();
}, false);
$axure.page.bind('load.start', function () {
$axure.player.resizeContent();
});
}
// Always append both mobile browser menu and native menu, as app might not have returned value signifying native at this point
appendNativePrototypeControlFrame();
appendMobileBrowserControlFrame();
appendProjectOptions();
}
initializeLogo();
initializePreview();
$axure.player.resizeContent(true);
// Has timeout to keep waiting to build sign in controls while axAccount is still loading
initializeSignIn();
})();
});
function appendProjectOptions() {
var toAppend = '';
toAppend += '
';
toAppend += '
PROJECT OPTIONS
';
toAppend += '
';
toAppend += '
Hotspots
';
toAppend += '
';
toAppend += ' ';
toAppend += ' Show Hotspots
';
toAppend += '
Scale
';
toAppend += ' ';
toAppend += '
Adaptive Views
';
toAppend += ' '
toAppend += '
'
toAppend += '
';
$('#mHideSidebar').prepend(toAppend);
$(('#projectOptionsHost')).click(function (e) { e.stopPropagation(); });
if (isMobileMode()) $axure.player.resizeContent();
}
function appendMobileBrowserControlFrame() {
var toAppend = "";
toAppend += '
';
toAppend += '
';
toAppend += '
';
toAppend += '
';
toAppend += '
';
toAppend += '
';
toAppend += '
';
$('#mobileControlFrameContainer').append(toAppend);
$('#closeBackground').click(collapse);
// iOS will do incorrect click position / content bounds calculation which results in scroll getting reset to (0, 0)
if (IOS) $('#mobileControlFrameContainer').on($axure.eventNames.mouseDownName, function (e) { e.stopPropagation(); });
}
function appendNativePrototypeControlFrame() {
var toAppend = "";
toAppend += '
';
toAppend += '
';
toAppend += '
';
toAppend += '
';
toAppend += '
';
toAppend += ' ';
toAppend += '
Exit
';
toAppend += '
';
toAppend += '
';
toAppend += '
';
toAppend += '
';
toAppend += '
';
toAppend += ' ';
toAppend += '
';
toAppend += '
Return to Prototype
';
toAppend += '
';
toAppend += '
';
toAppend += '
';
toAppend += '
';
toAppend += ' ';
toAppend += '
Refresh
';
toAppend += '
';
toAppend += '
';
toAppend += '
';
toAppend += '
';
toAppend += '
';
$('#mobileControlFrameContainer').append(toAppend);
var barHeight = IOS ? (iphoneX ? '82px' : '72px') : '60px';
var returnIconDisplacement = IOS ? '-15px': '-20px';
var iconTopMargin = IOS ? '14px': '7px';
var returnTextTopMargin = IOS ? '9px': '7px';
document.getElementById('nativeAppControlFrame').style.height = barHeight;
document.getElementById('nativeMenuBlueBackground').style.height = barHeight;
document.getElementById('return').style.top = returnIconDisplacement;
document.getElementById('returnText').style.marginTop = returnTextTopMargin;
document.getElementById('refreshIcon').style.marginTop = iconTopMargin;
document.getElementById('exitIcon').style.marginTop = iconTopMargin;
addAppButtonClickListener("exit");
addAppButtonClickListener("refresh");
$('#returnBackground').click(collapse);
$('#nativeAppControlFrame').on('touchmove', function (e) {
e.stopPropagation();
}, false);
}
function addAppButtonClickListener(id) {
var func = function () { IOS ? window.webkit.messageHandlers.prototypeMenuButtonClick.postMessage(id) : ShareApp.PrototypeMenuButtonClick(id); };
document.getElementById(id).addEventListener("click", func, false);
}
function toggleSitemap() {
$axure.player.showPlugin(1);
}
function closePopup() {
var $container = $('.popup');
var isLeftPanel = $container.hasClass('leftPanel');
$container.removeClass('popup');
$('#overflowMenuButton').removeClass('selected');
$('#interfaceAdaptiveViewsContainer').removeClass('selected');
$container.hide();
$('div.splitterMask').unbind($axure.eventNames.mouseDownName, closePopup);
$('div.splitterMask').remove();
}
$axure.player.closePopup = closePopup;
function showPopup($container) {
if ($('#browserOutOfDateNotification').is(":visible")) return;
$container.addClass('popup');
$container.show();
$('').insertAfter($container);
$('div.splitterMask').bind($axure.eventNames.mouseDownName, closePopup);
}
$axure.player.showPopup = showPopup;
function toggleAdaptiveViewsPopup() {
if (($('#interfaceAdaptiveViewsListContainer').hasClass('popup'))) {
closePopup();
} else {
$('#interfaceAdaptiveViewsContainer').addClass('selected');
showPopup($('#interfaceAdaptiveViewsListContainer'));
}
}
function toggleOverflowMenuPopup() {
if (($('#overflowMenuContainer').hasClass('popup'))) {
closePopup();
} else {
$('#overflowMenuButton').addClass('selected');
showPopup($('#overflowMenuContainer'));
}
}
var startSplitX;
var startSplitWidth;
function startLeftSplit() {
startSplitX = window.event.pageX;
startSplitWidth = lastLeftPanelWidth;
var $left = $('#lsplitbar');
$left.addClass('active');
$('').insertAfter($left);
$(document).bind($axure.eventNames.mouseMoveName, doLeftSplitMove).bind($axure.eventNames.mouseUpName, endLeftSplitMove);
}
function startRightSplit() {
startSplitX = window.event.pageX;
startSplitWidth = lastRightPanelWidth;
var $left = $('#rsplitbar');
$left.addClass('active');
$('').insertAfter($left);
$(document).bind($axure.eventNames.mouseMoveName, doRightSplitMove).bind($axure.eventNames.mouseUpName, endRightSplitMove);
}
function doLeftSplitMove() {
var currentX = window.event.pageX;
var newWidth = Math.min(startSplitWidth + currentX - startSplitX, $(window).width() - $('.rightPanel').width(), $(window).width() - lastRightPanelWidthDefault);
lastLeftPanelWidth = Math.max(lastLeftPanelWidthDefault, newWidth);
$('.leftPanel').width(lastLeftPanelWidth ? lastLeftPanelWidth : lastLeftPanelWidthDefault);
$('#lsplitbar').css('left', $('.leftPanel').width() - 4);
$axure.player.updateClippingBoundsWidth();
$axure.player.refreshViewPort();
}
function doRightSplitMove() {
var currentX = window.event.pageX;
var newWidth = Math.min(startSplitWidth - currentX + startSplitX, $(window).width() - $('.leftPanel').width(), $(window).width() - lastLeftPanelWidthDefault);
lastRightPanelWidth = Math.max(lastRightPanelWidthDefault, newWidth);
$('.rightPanel').width(lastRightPanelWidth ? lastRightPanelWidth : lastRightPanelWidthDefault);
$('#rsplitbar').css('left', $(window).width() - $('.rightPanel').width());
$axure.player.updateClippingBoundsWidth();
$axure.player.refreshViewPort();
}
function endLeftSplitMove() {
$('div.splitterMask').remove();
var $left = $('#lsplitbar');
$left.removeClass('active');
$(document).unbind($axure.eventNames.mouseMoveName, doLeftSplitMove).unbind($axure.eventNames.mouseUpName, endLeftSplitMove);
setAdaptiveView()
}
function endRightSplitMove() {
$('div.splitterMask').remove();
var $left = $('#rsplitbar');
$left.removeClass('active');
$(document).unbind($axure.eventNames.mouseMoveName, doRightSplitMove).unbind($axure.eventNames.mouseUpName, endRightSplitMove);
setAdaptiveView()
}
var startMX;
var startMLeft;
var startMElement;
var maxMLeft;
var getMaxMLeft = function () {
if ($('.rightPanel.mobileMode').length == 0) return $('.leftPanel.mobileMode').last().position().left + 100;
return $('.rightPanel.mobileMode').last().position().left + 100;
}
function startM(e) {
// Android touch event does not define pageX directly
if(window.event.pageX) {
startMX = window.event.pageX;
} else {
startMX = window.event.touches[0].pageX;
}
startMElement = window.event.target.id;
var $m = $('#mHideSidebar');
startMLeft = Number($m.css('left').replace('px', ''));
$(document).bind($axure.eventNames.mouseMoveName, doMMove).bind($axure.eventNames.mouseUpName, endMMove);
// Must stop propagation on iOS; otherwise scroll position of content will be reset to (0, 0)
// (likely due to position of click being calculated as out of bounds for outerContainer -- iOS is not adding scroll offset to bounds)
if (IOS) { e.stopPropagation() };
}
function doMMove() {
var $m = $('#mHideSidebar');
if(window.event.pageX) {
currentX = window.event.pageX;
} else {
currentX = window.event.touches[0].pageX;
}
var deltaX = currentX - startMX;
if (Math.abs(deltaX) > 0 && $('.splitterMask').length == 0) {
$('').insertAfter($m);
}
var newLeft = startMLeft + deltaX;
newLeft = Math.min(0, newLeft);
newLeft = Math.max(-getMaxMLeft(), newLeft);
$m.css('left', newLeft + 'px');
}
function endMMove(e) {
$('div.splitterMask').remove();
$(document).unbind($axure.eventNames.mouseMoveName, doMMove).unbind($axure.eventNames.mouseUpName, endMMove);
e.stopPropagation();
var $m = $('#mHideSidebar');
if(window.event.pageX) {
currentX = window.event.pageX;
} else {
currentX = window.event.changedTouches[0].pageX;
}
var deltaX = currentX - startMX;
if (deltaX != 0 || startMElement != 'mHideSidebar') {
adjustM(currentX < startMX ? 'left' : 'right', true);
}
}
function adjustM(direction, animate) {
var $m = $('#mHideSidebar');
var duration = animate ? 100 : 0;
var newLeft = Number($m.css('left').replace('px', ''));
if (!$m.is(':visible') || newLeft > -100) {
$m.animate({ 'left': '-60px' }, duration);
} else if (newLeft < -getMaxMLeft() + 100) {
$m.animate({ 'left': (-getMaxMLeft() + 125) + 'px' }, duration);
} else if (direction == 'left') {
var handled = false;
var $panels = $('.rightPanel.mobileMode, .leftPanel.mobileMode');
$panels.each(function () {
var panelX = $(this).position().left;
if (panelX > -newLeft) {
$m.animate({ 'left': (-panelX + 25) + 'px' }, duration);
handled = true;
return false;
}
});
if (!handled) {
$m.animate({ 'left': (-$panels.last().position().left + 25) + 'px' }, duration);
}
} else if (direction == 'right') {
var handled = false;
var $panels = $('.rightPanel.mobileMode, .leftPanel.mobileMode');
$($panels.get().reverse()).each(function () {
var panelRight = $(this).position().left + $(this).width();
if (panelRight < -newLeft + $(window).width()) {
$m.animate({ 'left': (-$(this).position().left + 25) + 'px' }, duration);
handled = true;
return false;
}
});
if (!handled) {
$m.animate({ 'left': '-60px' }, duration);
}
}
}
function repositionPinsOnScaleChange(data) {
var $pins = $('#existingPinsOverlay').children();
for (var i = 0; i < $pins.length; i++) {
// calculate new position of pin
const left = parseFloat($($pins[i]).attr('data-x'));
const top = parseFloat($($pins[i]).attr('data-y'));
const width = $($pins[i]).width();
const height = $($pins[i]).height();
// Get current scale of mainPanelContainer
// MainPanelContainer scaled without setContentScale message
var scale = $('#mainPanelContainer').css('transform');;
scale = (scale == "none") ? 1 : Number(scale.substring(scale.indexOf('(') + 1, scale.indexOf(',')));
const scaledLeft = (left * scale) - (width / 2);
const scaledTop = (top * scale) - (height / 2);
$($pins[i]).css('left', scaledLeft + 'px');
$($pins[i]).css('top', scaledTop + 'px');
}
// Distance from left of project content to origin (used for pins positioning when on a centered page in Scale to Fit mode)
if (typeof data.contentOriginOffset !== "undefined") contentLeftOfOriginOffset = data.contentOriginOffset;
}
function messageCenter_message(message, data) {
if (message == 'expandFrame') expand();
else if (message == 'getCollapseFrameOnLoad' && $axure.player.settings.startCollapsed && !MOBILE_DEVICE) $axure.messageCenter.postMessage('collapseFrameOnLoad');
else if (message == 'tripleClick') {
if ($axure.player.isMobileMode() || MOBILE_DEVICE) expand();
} else if (message == 'setContentScale') {
if (data.clipToView) {
var scaleVal = $('.vpScaleOption').find('.selectedRadioButton').parent().attr('val');
if (scaleVal == '2' || (!MOBILE_DEVICE && scaleVal == '0')) {
var scaleN = newScaleN = $('#mainPanel').width() / data.viewportWidth;
var hScaleN = ($('#mainPanel').height()) / data.viewportHeight;
if (hScaleN < scaleN) scaleN = newScaleN = hScaleN;
if(scaleVal == '0') scaleN = Math.min(1, scaleN);
var scale = 'scale(' + scaleN + ')';
$('#mainPanelContainer').css({
'transform': scale,
'transform-origin': ''
});
}
} else {
if (data.scaleN != 1) {
var scale = 'scale(' + data.scaleN + ')';
var width = 100 / data.scaleN + '%';
var height = Number($('#mainPanelContainer').css('height').replace('px', '')) / data.scaleN + 'px';
$('#mainPanelContainer').css({
'transform': scale,
'transform-origin': '0px 0px',
'width': width,
'height': height
});
//$('#clipFrameScroll').css('height' , height + 'px');
//$('#mainFrame').css('height' , height + 'px');
$('#clipFrameScroll').height(height);
$('#mainFrame').height(height);
}
}
repositionPinsOnScaleChange(data);
repositionClippingBoundsScroll();
// Fix for edge not redrawing content after scale change
if ($axure.browser.isEdge) {
newHeight = window.innerHeight - ((!isMobileMode() && $('#topPanel').is(':visible')) ? $('#topPanel').height() : 0);
newWidth = $(window).width();
$('#outerContainer').height(newHeight).width(newWidth);
$('#mainPanel').height(newHeight);
$('#clippingBounds').height(newHeight);
}
}
}
function getInitialUrl() {
var shortId = getHashStringVar(PAGE_ID_NAME);
var foundById = [];
if (shortId.length > 0) {
getPageUrlsById(shortId, foundById, undefined);
if (foundById.length == 1) return foundById[0];
}
var pageName = getHashStringVar(PAGE_URL_NAME);
if (pageName.length > 0) return pageName + ".html";
else {
if (foundById.length > 0) return foundById[0];
var url = getFirstPageUrl($axure.document.sitemap.rootNodes);
return (url ? url : "about:blank");
}
}
var getPageUrlsById = $axure.player.getPageUrlsById = function (packageId, foundById, nodes) {
if (!nodes) nodes = $axure.document.sitemap.rootNodes;
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if (node.id == packageId) foundById.push(node.url);
var hasChildren = (node.children && node.children.length > 0);
if (hasChildren) {
getPageUrlsById(packageId, foundById, node.children);
}
}
}
var getPageIdByUrl = $axure.player.getPageIdByUrl = function(url, nodes) {
if (!nodes) nodes = $axure.document.sitemap.rootNodes;
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if (node.url == url) return node.id;
else {
var hasChildren = (node.children && node.children.length > 0);
if (hasChildren) {
var id = getPageIdByUrl(url, node.children);
if (id) return id;
}
}
}
return null;
}
function getFirstPageUrl(nodes) {
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if (node.url) return node.url;
else {
var hasChildren = (node.children && node.children.length > 0);
if (hasChildren) {
var url = getFirstPageUrl(node.children);
if (url) return url;
}
}
}
return null;
}
function closePlayer() {
if ($axure.page.location) window.location.href = $axure.page.location;
else {
var pageFile = getInitialUrl();
var currentLocation = window.location.toString();
window.location.href = currentLocation.substr(0, currentLocation.lastIndexOf("/") + 1) + pageFile;
}
}
function replaceHash(newHash) {
var currentLocWithoutHash = window.location.toString().split('#')[0];
//We use replace so that every hash change doesn't get appended to the history stack.
//We use replaceState in browsers that support it, else replace the location
if (typeof window.history.replaceState != 'undefined') {
try {
//Chrome 45 (Version 45.0.2454.85 m) started throwing an error here when generated locally (this only happens with sitemap open) which broke all interactions.
//try catch breaks the url adjusting nicely when the sitemap is open, but all interactions and forward and back buttons work.
//Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///C:/Users/Ian/Documents/Axure/HTML/Untitled/start.html#p=home' cannot be created in a document with origin 'null'.
window.history.replaceState(null, null, currentLocWithoutHash + newHash);
} catch (ex) { }
} else {
window.location.replace(currentLocWithoutHash + newHash);
}
}
function collapse() {
if (IOS) {
$('body').off('touchstart');
$('body').off('touchend');
}
if ($axure.player.isMobileMode()) {
$('#mHideSidebar').hide();
$('#nativeAppControlFrame').hide();
$('#mobileBrowserControlFrame').hide();
} else {
$axure.player.deleteVarFromCurrentUrlHash('g');
$axure.player.setVarInCurrentUrlHash('c', 1);
if (!MOBILE_DEVICE) $('#maximizePanelContainer').show();
lastLeftPanelWidth = $('.leftPanel').width();
lastRightPanelWidth = $('.rightPanel').width();
$('.leftPanel').hide();
$('.rightPanel').hide();
$('#topPanel').hide();
$('.splitbar').hide();
$('#mainPanel').width($(window).width());
$('#clippingBounds').width($(window).width());
$('#clippingBounds').css('left', '0px');
$(window).resize();
$(document).trigger('sidebarCollapse');
$('#maximizeButton').addClass('rotated');
}
}
// This will return true if prototype is opened from version of app after update with code that sets this value
// (won't be able to distinguish between browser and outdated app)
var isShareApp = function () { return /ShareApp/.test(navigator.userAgent); }
function expand() {
if ($axure.player.isMobileMode()) {
$('#mHideSidebar').show();
$('#mobileControlFrameContainer').show();
isShareApp() ? $('#nativeAppControlFrame').show() : $('#mobileBrowserControlFrame').show();
} else {
$minimizeContainer = $('#interfaceControlFrameMinimizeContainer');
$minimizeContainer.removeClass('collapseHovered');
$axure.player.deleteVarFromCurrentUrlHash('c');
$('#maximizeButton').removeClass('rotated');
$('#maximizePanelContainer').hide();
$axure.player.restorePlugins();
$('#topPanel').show();
$(window).resize();
$(document).trigger('sidebarExpanded');
}
}
function mainFrame_onload() {
if ($axure.page.pageName) document.title = $axure.page.pageName;
}
function getQueryString(query) {
var qstring = self.location.href.split("?");
if (qstring.length < 2) return "";
return GetParameter(qstring, query);
}
function GetParameter(qstring, query) {
var prms = qstring[1].split("&");
var frmelements = new Array();
var currprmeter, querystr = "";
for (var i = 0; i < prms.length; i++) {
currprmeter = prms[i].split("=");
frmelements[i] = new Array();
frmelements[i][0] = currprmeter[0];
frmelements[i][1] = currprmeter[1];
}
for (j = 0; j < frmelements.length; j++) {
if (frmelements[j][0].toLowerCase() == query.toLowerCase()) {
querystr = frmelements[j][1];
break;
}
}
return querystr;
}
function setHashStringVar(currentHash, varName, varVal) {
var varWithEqual = varName + '=';
var poundVarWithEqual = varVal === '' ? '' : '#' + varName + '=' + varVal;
var ampVarWithEqual = varVal === '' ? '' : '&' + varName + '=' + varVal;
var hashToSet = '';
var pageIndex = currentHash.indexOf('#' + varWithEqual);
if (pageIndex == -1) pageIndex = currentHash.indexOf('&' + varWithEqual);
if (pageIndex != -1) {
var newHash = currentHash.substring(0, pageIndex);
newHash = newHash == '' ? poundVarWithEqual : newHash + ampVarWithEqual;
var ampIndex = currentHash.indexOf('&', pageIndex + 1);
if (ampIndex != -1) {
newHash = newHash == '' ? '#' + currentHash.substring(ampIndex + 1) : newHash + currentHash.substring(ampIndex);
}
hashToSet = newHash;
} else if (currentHash.indexOf('#') != -1) {
hashToSet = currentHash + ampVarWithEqual;
} else {
hashToSet = poundVarWithEqual;
}
if (hashToSet != '' || varVal == '') {
return hashToSet;
}
return null;
}
$axure.player.setVarInCurrentUrlHash = function(varName, varVal) {
var newHash = setHashStringVar(window.location.hash, varName, varVal);
if (newHash != null) {
replaceHash(newHash);
}
}
function deleteHashStringVar(currentHash, varName) {
var varWithEqual = varName + '=';
var pageIndex = currentHash.indexOf('#' + varWithEqual);
if (pageIndex == -1) pageIndex = currentHash.indexOf('&' + varWithEqual);
if (pageIndex != -1) {
var newHash = currentHash.substring(0, pageIndex);
var ampIndex = currentHash.indexOf('&', pageIndex + 1);
//IF begin of string....if none blank, ELSE # instead of & and rest
//IF in string....prefix + if none blank, ELSE &-rest
if (newHash == '') { //beginning of string
newHash = ampIndex != -1 ? '#' + currentHash.substring(ampIndex + 1) : '';
} else { //somewhere in the middle
newHash = newHash + (ampIndex != -1 ? currentHash.substring(ampIndex) : '');
}
return newHash;
}
return null;
}
$axure.player.deleteVarFromCurrentUrlHash = function(varName) {
var newHash = deleteHashStringVar(window.location.hash, varName);
if (newHash != null) {
replaceHash(newHash);
}
}
function setUpController() {
//$axure.utils = _axUtils;
var _page = {};
$axure.page = _page;
$axure.utils.makeBindable(_page, ['load']);
var _player = function () {
};
$axure.player = _player;
//-----------------------------------------
//Global Var array, getLinkUrl function and setGlobalVar listener are
//for use in setting global vars in page url string when clicking a
//page in the sitemap
//-----------------------------------------
var _globalVars = {};
//-----------------------------------------
//Used by getLinkUrl below to check if local server is running
//in order to send back the global variables as a query string
//in the page url
//-----------------------------------------
var _shouldSendVarsToServer = function () {
//If exception occurs (due to page in content frame being from a different domain, etc)
//then run the check without the url (which will end up checking against sitemap url)
try {
var mainFrame = document.getElementById("mainFrame");
return $axure.shouldSendVarsToServer(mainFrame.contentWindow.location.href);
} catch (e) {
return $axure.shouldSendVarsToServer();
}
};
var _getLinkUrl = function (baseUrl) {
var toAdd = '';
for (var globalVarName in _globalVars) {
var val = _globalVars[globalVarName];
if (val != null) {
if (toAdd.length > 0) toAdd += '&';
toAdd += globalVarName + '=' + encodeURIComponent(val);
}
}
return toAdd.length > 0 ? baseUrl + (_shouldSendVarsToServer() ? '?' : '#') + toAdd + "&CSUM=1" : baseUrl;
};
$axure.getLinkUrlWithVars = _getLinkUrl;
$axure.messageCenter.addMessageListener(function (message, data) {
if (message == 'setGlobalVar') {
_globalVars[data.globalVarName] = data.globalVarValue;
}
});
$axure.messageCenter.addStateListener('page.data', function (key, value) {
for (var subKey in value) {
_page[subKey] = value[subKey];
}
$axure.page.triggerEvent('load');
});
// ---------------------------------------------
// Navigates the main frame (setting the currently visible page). If the link is relative,
// this method should test if it is actually a axure rp page being loaded and properly set
// up all the controller for the page if it is
// ---------------------------------------------
_page.navigate = function (url, includeVariables) {
var mainFrame = document.getElementById("mainFrame");
//var mainFrame = window.parent.mainFrame;
// if this is a relative url...
var urlToLoad;
if (url.indexOf(':') < 0 || url[0] == '/') {
var winHref = window.location.href;
var page = winHref.substring(0, winHref.lastIndexOf('/') + 1) + url;
urlToLoad = page;
} else {
urlToLoad = url;
}
if (!includeVariables) {
mainFrame.contentWindow.location.href = urlToLoad;
return;
}
var urlWithVars = $axure.getLinkUrlWithVars(urlToLoad);
var currentData = $axure.messageCenter.getState('page.data');
var currentUrl = currentData && currentData.location;
if (currentUrl && currentUrl.indexOf('#') != -1) currentUrl = currentUrl.substring(0, currentUrl.indexOf('#'))
// this is so we can make sure the current frame reloads if the variables have changed
// by default, if the location is the same but the hash code is different, the browser will not
// trigger a reload
mainFrame.contentWindow.location.href =
currentUrl && urlToLoad.toLowerCase() != currentUrl.toLowerCase()
? urlWithVars
: 'resources/reload.html#' + encodeURI(urlWithVars);
};
var pluginIds = [];
var plugins = {};
var currentVisibleHostId = {};
// ---------------------------------------------
// Adds a tool box frame from a url to the interface. This is useful for loading plugins
// settings is an object that supports the following properties:
// - id : the id of the element for the plugin
// - context : the context to create the plugin host for
// - title : the user-visible caption for the plugin
// ---------------------------------------------
_player.createPluginHost = function (settings) {
if (!settings.context || !(settings.context === 'project' || settings.context === 'inspect')) {
//throw ('unknown context type');
return false;
}
if (settings.id == 'feedbackHost')
$('#overflowMenuContainer').prepend('
Show Comments
');
if (!settings.id) throw ('each plugin host needs an id');
if (typeof PREVIEW_INFO === 'undefined') {
// Share-Hosted Prototype
if (settings.id == 'debugHost') { return false; }
if (settings.id == 'handoffHost') { $('#handoffControlFrameHeaderContainer').show(); }
} else {
// Preview Mode
if (settings.id == 'handoffHost') { return false; }
}
pluginIds[pluginIds.length] = settings.id;
plugins[settings.id] = settings;
var hostContainerId = settings.context + 'ControlFrameHostContainer';
hostContainerId = _player.isMobileMode() ? 'mHideSidebar' : 'outerContainer';
var panelClass = 'rightPanel';
var host;
if (settings.context == 'project') {
panelClass = 'leftPanel';
if (_player.isMobileMode() && $('#' + hostContainerId).find('#projectOptionsHost').length > 0) {
host = $('')
.insertAfter('#projectOptionsHost');
} else {
host = $('')
.prependTo('#' + hostContainerId);
}
} else {
if (!$('#separatorContainer').hasClass('hasLeft')) $('#separatorContainer').addClass('hasLeft');
host = $('')
.appendTo('#' + hostContainerId);
}
$(('#' + settings.id)).click(function (e) { e.stopPropagation(); });
var controlContainerId = getControlContainerId(settings.id);
if (!_player.isMobileMode()) host.hide();
else _player.updatePlugins();
// TODO: border radius in ie and edge causes image to be blurry (for now, just remove border-radius)
var style = (IE || $axure.browser.isEdge) ? '" style="border-radius: 0': '';
var headerLink = $('' + (settings.context === 'inspect' ? ('' + ''): ' ') + '');
headerLink.mousedown($axure.utils.curry(interfaceControlHeaderButton_click, settings.id)).wrap('
');
headerLink.parent().appendTo('#' + controlContainerId);
if (_player.isMobileMode()) $axure.player.resizeContent();
$(document).trigger('pluginCreated', [settings.gid]);
};
var getControlContainerId = function (id) {
return plugins[id].context + 'ControlFrameHeader';
}
var getVisiblePlugins = function () {
var ids = '';
for (var id in plugins) {
var context = plugins[id].context;
if (currentVisibleHostId[context] == id) {
ids += plugins[id].gid;
}
}
return ids;
}
_player.pluginVisibleChanged = function(hostId, visible) {
if ($axure.player.isCloud && plugins[hostId]) {
$axure.messageCenter.postMessage('pluginVisibleChanged', { id: hostId, gid: plugins[hostId].gid, visible: visible });
}
}
var interfaceControlHeaderButton_click = function (id) {
if (_player.isAnimating) { return; }
$axure.player.closePopup();
var controlContainerId = getControlContainerId(id);
var context = plugins[id].context;
var clickedPlugin = $('#' + controlContainerId + ' a[pluginId=' + id + ']');
if (currentVisibleHostId[context] == id) {
clickedPlugin.removeClass('selected');
if (id == "sitemapHost") { $('#sitemapControlFrameContainer').removeClass('selected'); }
currentVisibleHostId[context] = -1;
_player.collapseToBar(context, id);
$(document).trigger('pluginShown', [getVisiblePlugins()]);
} else {
$('#' + controlContainerId + ' a').removeClass('selected');
clickedPlugin.addClass('selected');
if (id == "sitemapHost") { $('#sitemapControlFrameContainer').addClass('selected'); }
$('#' + currentVisibleHostId[context]).hide();
$axure.player.pluginVisibleChanged(currentVisibleHostId[context], false);
currentVisibleHostId[context] = id;
_player.expandFromBar(id, context);
$(document).trigger('pluginShown', [getVisiblePlugins()]);
}
};
_player.pluginClose = function (id) {
var controlContainerId = getControlContainerId(id);
var context = plugins[id].context;
var clickedPlugin = $('#' + controlContainerId + ' a[pluginId=' + id + ']');
if (!clickedPlugin.hasClass('selected')) { return; }
clickedPlugin.removeClass('selected');
currentVisibleHostId[context] = -1;
_player.collapseToBar(context, id);
$(document).trigger('pluginShown', [getVisiblePlugins()]);
};
_player.showPlugin = function (gid) {
for (var id in plugins) {
if (plugins[id].gid == gid) {
interfaceControlHeaderButton_click(id);
break;
}
}
};
_player.restorePlugins = function () {
var selectedPluginsCount = 0;
for (var id in plugins) {
var clickedPlugin = $('#' + getControlContainerId(id) + ' a[pluginId=' + id + ']');
if (clickedPlugin.hasClass('selected')) selectedPluginsCount++;
}
if ($axure.player.settings.isAxshare && selectedPluginsCount != 0) $('#clippingBoundsScrollContainer').hide();
var selectedPluginsSeen = 0;
for (var id in plugins) {
var controlContainerId = getControlContainerId(id);
var context = plugins[id].context;
var clickedPlugin = $('#' + controlContainerId + ' a[pluginId=' + id + ']');
if (clickedPlugin.hasClass('selected')) {
//_player.showPlugin(id);
// TODO: handoffHost would need center inspect icon highlighted and rightFrameIcon set to visible
//if (id == 'handoffHost') { }
//$('#' + id).show();
selectedPluginsSeen++;
_player.expandFromBar(id, context, selectedPluginsCount == selectedPluginsSeen);
} else {
$('#' + id).hide();
}
}
$(document).trigger('pluginShown', [getVisiblePlugins()]);
};
}
$axure.player.hideAllPlayerControllers = function(isVisible) {
// TOOD: Verify that the containers are set to the right state after re-enabling them
if(isVisible) {
$('#topPanel').css('display', '');
$('#popupContainer').css('display', '');
$('#maximizePanelContainer').css('display', '');
$('#mobileControlFrameContainer').css('display', '');
} else {
$('#topPanel').hide();
$('#popupContainer').hide();
$('#maximizePanelContainer').hide(); // TODO: This needs to have a function where it prevents itself from showing up externally
$('#mobileControlFrameContainer').hide();
}
}
// TODO: General function to add bezels/overlays if applicable
$axure.player.addDeviceFraming = function (project, isEdit) {
// Temporary
var devices = {
iPhone8: 0,
iPhone8Plus: 1,
iPhoneSE: 2,
iPhoneX: 3,
iPad4: 4,
GalaxyS8: 5,
Pixel2: 6,
Pixel2XL: 7,
Mobile: 8,
Tablet9: 9,
Tablet7: 10,
Custom: 11,
Web: 12
};
// TODO: Need to bring over some platform functionality -> function might not be present
if (!$axure.player.settings.isExpo || project.Platform.Device === 12) { return; }
// TODO: Generate html for overlay and bezel containers
// TODO: Determine if preview player or full prototype player to establish where containers will be stored
var currDevice = project.Platform.Device;
var rootPath = '../../Scripts/Expo/StaticContent/resources/images/mobile/';
var framePath, overlayPath;
var $overlayParent = $(window.parent.parent.document).find('#previewPlayerDiv');
$overlayParent = isEdit && $overlayParent.length !== 0 ? $overlayParent : $('#mainPanelContainer');
$overlayParent.css('overflow', 'visible');
// TODO: Import enum of Device types -> import via TS definitions. WILL NEED TO REMEMBER THAT WE NEED TO SYNC SERVER AND CLIENT SIDE
// TODO: Create mapping of required images to device type
// images will be stored in ../../images/mobile
// TODO: Manage resizing
// TODO: Manage pointer clicks
// TODO: Status bar -> Default or via settings
// TODO: Establish img paths
switch (currDevice) {
case devices.iPhone8:
case devices.iPhone8Plus:
framePath = rootPath + 'iphone.svg';
overlayPath = "";
break;
case devices.iPhoneSE:
break;
case devices.iPhoneX:
framePath = "";
overlayPath = "";
break;
case devices.iPad4:
break;
case devices.Pixel2:
break;
case devices.Pixel2XL:
break;
case devices.GalaxyS8:
break;
case devices.Mobile:
case devices.Tablet7:
case devices.Tablet9:
case devices.Custom:
default:
break;
}
// TODO: Append images
// TODO: Position and initial dimensions
// TODO: Add resize handlers (?)
// TODO: Add pointer event handers (?)
if (framePath != undefined) {
$overlayParent.prepend(genFrameContainer());
var $fContainer = $overlayParent.find('#deviceFrameContainer');
var $frame = $fContainer.find('#deviceFrame');
$frame.css('background-image', "url('" + framePath + "')");
$frame.css('height', '');
$frame.css('width', '');
$frame.css('top', '');
$frame.css('left', '');
if(isEdit) {
$fContainer.css('z-index', -1);
}
}
if (overlayPath != undefined) {
// TODO: Update for edit mode
// $overlayParent.append(genOverlayContainer());
var $oContainer = $overlayParent.find('#deviceOverlayContainer');
var $overlay = $oContainer.find('#deviceOverlay');
$overlay.css('background-image', "url('" + overlayPath + "')");
}
}
function genFrameContainer(bezelPath) {
var container = [
'