mirror of
https://github.com/JulianGro/overte.git
synced 2025-04-14 08:26:34 +02:00
814 lines
38 KiB
JavaScript
814 lines
38 KiB
JavaScript
/*jslint browser:true */
|
|
/*jslint maxlen: 180*/
|
|
"use strict";
|
|
//
|
|
// SnapshotReview.js
|
|
// scripts/system/html/js/
|
|
//
|
|
// Created by Howard Stearns 8/22/2016
|
|
// Copyright 2016 High Fidelity, Inc.
|
|
//
|
|
// Distributed under the Apache License, Version 2.0.
|
|
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
|
//
|
|
|
|
var paths = [];
|
|
var idCounter = 0;
|
|
var imageCount = 0;
|
|
var blastShareText = "Blast to my Connections",
|
|
blastAlreadySharedText = "Already Blasted to Connections",
|
|
hifiShareText = "Share to Snaps Feed",
|
|
hifiAlreadySharedText = "Already Shared to Snaps Feed",
|
|
facebookShareText = "Share to Facebook",
|
|
twitterShareText = "Share to Twitter",
|
|
shareButtonLabelTextActive = "SHARE:",
|
|
shareButtonLabelTextInactive = "SHARE";
|
|
|
|
function fileExtensionMatches(filePath, extension) {
|
|
return filePath.split('.').pop().toLowerCase() === extension;
|
|
}
|
|
|
|
function showSetupInstructions() {
|
|
var snapshotImagesDiv = document.getElementById("snapshot-images");
|
|
snapshotImagesDiv.className = "snapshotInstructions";
|
|
snapshotImagesDiv.innerHTML = '<img class="centeredImage" src="./img/snapshotIcon.png" alt="Snapshot Instructions" width="64" height="64"/>' +
|
|
'<br/>' +
|
|
'<p>Take and share snaps and GIFs with people in High Fidelity, Facebook, and Twitter.</p>' +
|
|
"<h4>Setup Instructions</h4>" +
|
|
"<p>Before you can begin taking snaps, please choose where you'd like to save snaps on your computer:</p>" +
|
|
'<br/>' +
|
|
'<div style="text-align:center;">' +
|
|
'<input class="blueButton" style="margin-left:auto;margin-right:auto;width:130px;" type="button" value="CHOOSE" onclick="chooseSnapshotLocation()" />' +
|
|
'</div>';
|
|
document.getElementById("snap-button").disabled = true;
|
|
}
|
|
function showSetupComplete() {
|
|
var snapshotImagesDiv = document.getElementById("snapshot-images");
|
|
snapshotImagesDiv.className = "snapshotInstructions";
|
|
snapshotImagesDiv.innerHTML = '<img class="centeredImage" src="./img/snapshotIcon.png" alt="Snapshot Instructions" width="64" height="64"/>' +
|
|
'<br/>' +
|
|
'<div style="text-align:center;font-weight:bold;">' +
|
|
'<p>Snapshot location set.</p>' +
|
|
'<p>Press the big red button to take a snap!</p>' +
|
|
'</div>';
|
|
document.getElementById("snap-button").disabled = false;
|
|
}
|
|
function showSnapshotInstructions() {
|
|
var snapshotImagesDiv = document.getElementById("snapshot-images");
|
|
snapshotImagesDiv.className = "snapshotInstructions";
|
|
snapshotImagesDiv.innerHTML = '<img class="centeredImage" src="./img/snapshotIcon.png" alt="Snapshot Instructions" width="64" height="64"/>' +
|
|
'<br/>' +
|
|
'<p>Take and share snaps and GIFs with people in High Fidelity, Facebook, and Twitter.</p>' +
|
|
'<br/>' +
|
|
'<div style="text-align:center;font-weight:bold;">' +
|
|
'<p>Press the big red button to take a snap!</p>' +
|
|
'</div>';
|
|
}
|
|
function chooseSnapshotLocation() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "snapshot",
|
|
action: "chooseSnapshotLocation"
|
|
}));
|
|
}
|
|
function login() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "snapshot",
|
|
action: "login"
|
|
}));
|
|
}
|
|
function clearImages() {
|
|
var snapshotImagesDiv = document.getElementById("snapshot-images");
|
|
snapshotImagesDiv.classList.remove("snapshotInstructions");
|
|
while (snapshotImagesDiv.hasChildNodes()) {
|
|
snapshotImagesDiv.removeChild(snapshotImagesDiv.lastChild);
|
|
}
|
|
paths = [];
|
|
imageCount = 0;
|
|
idCounter = 0;
|
|
}
|
|
|
|
function selectImageWithHelpText(selectedID, isSelected) {
|
|
if (selectedID.id) {
|
|
selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
|
|
}
|
|
var imageContainer = document.getElementById(selectedID),
|
|
image = document.getElementById(selectedID + 'img'),
|
|
shareBar = document.getElementById(selectedID + "shareBar"),
|
|
helpTextDiv = document.getElementById(selectedID + "helpTextDiv"),
|
|
showShareButtonsButtonDiv = document.getElementById(selectedID + "showShareButtonsButtonDiv"),
|
|
itr,
|
|
containers = document.getElementsByClassName("shareControls");
|
|
|
|
if (isSelected) {
|
|
showShareButtonsButtonDiv.onclick = function () { selectImageWithHelpText(selectedID, false); };
|
|
showShareButtonsButtonDiv.classList.remove("inactive");
|
|
showShareButtonsButtonDiv.classList.add("active");
|
|
|
|
image.onclick = function () { selectImageWithHelpText(selectedID, false); };
|
|
imageContainer.style.outline = "4px solid #00b4ef";
|
|
imageContainer.style.outlineOffset = "-4px";
|
|
|
|
shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.45)";
|
|
shareBar.style.pointerEvents = "initial";
|
|
|
|
helpTextDiv.style.visibility = "visible";
|
|
|
|
for (itr = 0; itr < containers.length; itr += 1) {
|
|
var parentID = containers[itr].id.slice(0, 2);
|
|
if (parentID !== selectedID) {
|
|
selectImageWithHelpText(parentID, false);
|
|
}
|
|
}
|
|
} else {
|
|
showShareButtonsButtonDiv.onclick = function () { selectImageWithHelpText(selectedID, true); };
|
|
showShareButtonsButtonDiv.classList.remove("active");
|
|
showShareButtonsButtonDiv.classList.add("inactive");
|
|
|
|
image.onclick = function () { selectImageWithHelpText(selectedID, true); };
|
|
imageContainer.style.outline = "none";
|
|
|
|
shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.0)";
|
|
shareBar.style.pointerEvents = "none";
|
|
|
|
helpTextDiv.style.visibility = "hidden";
|
|
}
|
|
}
|
|
function selectImageToShare(selectedID, isSelected) {
|
|
if (selectedID.id) {
|
|
selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
|
|
}
|
|
var imageContainer = document.getElementById(selectedID),
|
|
image = document.getElementById(selectedID + 'img'),
|
|
shareBar = document.getElementById(selectedID + "shareBar"),
|
|
showShareButtonsDots = document.getElementById(selectedID + "showShareButtonsDots"),
|
|
showShareButtonsLabel = document.getElementById(selectedID + "showShareButtonsLabel"),
|
|
shareButtonsDiv = document.getElementById(selectedID + "shareButtonsDiv"),
|
|
shareBarHelp = document.getElementById(selectedID + "shareBarHelp"),
|
|
showShareButtonsButtonDiv = document.getElementById(selectedID + "showShareButtonsButtonDiv"),
|
|
itr,
|
|
containers = document.getElementsByClassName("shareControls");
|
|
|
|
if (isSelected) {
|
|
showShareButtonsButtonDiv.onclick = function () { selectImageToShare(selectedID, false); };
|
|
showShareButtonsButtonDiv.classList.remove("inactive");
|
|
showShareButtonsButtonDiv.classList.add("active");
|
|
|
|
image.onclick = function () { selectImageToShare(selectedID, false); };
|
|
imageContainer.style.outline = "4px solid #00b4ef";
|
|
imageContainer.style.outlineOffset = "-4px";
|
|
|
|
shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.45)";
|
|
shareBar.style.pointerEvents = "initial";
|
|
|
|
showShareButtonsDots.style.visibility = "hidden";
|
|
showShareButtonsLabel.innerHTML = shareButtonLabelTextActive;
|
|
|
|
shareButtonsDiv.style.visibility = "visible";
|
|
shareBarHelp.style.visibility = "visible";
|
|
|
|
for (itr = 0; itr < containers.length; itr += 1) {
|
|
var parentID = containers[itr].id.slice(0, 2);
|
|
if (parentID !== selectedID) {
|
|
selectImageToShare(parentID, false);
|
|
}
|
|
}
|
|
} else {
|
|
showShareButtonsButtonDiv.onclick = function () { selectImageToShare(selectedID, true); };
|
|
showShareButtonsButtonDiv.classList.remove("active");
|
|
showShareButtonsButtonDiv.classList.add("inactive");
|
|
|
|
image.onclick = function () { selectImageToShare(selectedID, true); };
|
|
imageContainer.style.outline = "none";
|
|
|
|
shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.0)";
|
|
shareBar.style.pointerEvents = "none";
|
|
|
|
showShareButtonsDots.style.visibility = "visible";
|
|
showShareButtonsLabel.innerHTML = shareButtonLabelTextInactive;
|
|
|
|
shareButtonsDiv.style.visibility = "hidden";
|
|
shareBarHelp.style.visibility = "hidden";
|
|
}
|
|
}
|
|
function createShareBar(parentID, isLoggedIn, canShare, isGif, blastButtonDisabled, hifiButtonDisabled, canBlast) {
|
|
var shareBar = document.createElement("div"),
|
|
shareBarHelpID = parentID + "shareBarHelp",
|
|
shareButtonsDivID = parentID + "shareButtonsDiv",
|
|
showShareButtonsButtonDivID = parentID + "showShareButtonsButtonDiv",
|
|
showShareButtonsDotsID = parentID + "showShareButtonsDots",
|
|
showShareButtonsLabelID = parentID + "showShareButtonsLabel",
|
|
blastToConnectionsButtonID = parentID + "blastToConnectionsButton",
|
|
shareWithEveryoneButtonID = parentID + "shareWithEveryoneButton",
|
|
facebookButtonID = parentID + "facebookButton",
|
|
twitterButtonID = parentID + "twitterButton",
|
|
shareBarInnerHTML = '';
|
|
|
|
shareBar.id = parentID + "shareBar";
|
|
shareBar.className = "shareControls";
|
|
|
|
if (isLoggedIn) {
|
|
if (canShare) {
|
|
shareBarInnerHTML = '<div class="shareControlsHelp" id="' + shareBarHelpID + '" style="visibility:hidden;' + ((canBlast && blastButtonDisabled || !canBlast && hifiButtonDisabled) ? "background-color:#000;opacity:0.5;" : "") + '"></div>' +
|
|
'<div class="showShareButtonsButtonDiv inactive" id="' + showShareButtonsButtonDivID + '" onclick="selectImageToShare(' + parentID + ', true)">' +
|
|
'<label id="' + showShareButtonsLabelID + '">' + shareButtonLabelTextInactive + '</label>' +
|
|
'<span id="' + showShareButtonsDotsID + '" class="showShareButtonDots">' +
|
|
'' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="shareButtons" id="' + shareButtonsDivID + '" style="visibility:hidden">';
|
|
if (canBlast) {
|
|
shareBarInnerHTML += '<div class="shareButton blastToConnections' + (blastButtonDisabled ? ' disabled' : '') + '" id="' + blastToConnectionsButtonID + '" onmouseover="shareButtonHovered(\'blast\', ' + parentID + ', true)" onclick="' + (blastButtonDisabled ? '' : 'blastToConnections(' + parentID + ', ' + isGif + ')') + '"><img src="img/blast_icon.svg"></div>';
|
|
}
|
|
shareBarInnerHTML += '<div class="shareButton shareWithEveryone' + (hifiButtonDisabled ? ' disabled' : '') + '" id="' + shareWithEveryoneButtonID + '" onmouseover="shareButtonHovered(\'hifi\', ' + parentID + ', true)" onclick="' + (hifiButtonDisabled ? '' : 'shareWithEveryone(' + parentID + ', ' + isGif + ')') + '"><img src="img/hifi_icon.svg" style="width:35px;height:35px;margin:2px 0 0 2px;"></div>' +
|
|
'<a class="shareButton facebookButton" id="' + facebookButtonID + '" onmouseover="shareButtonHovered(\'facebook\', ' + parentID + ', true)" onclick="shareButtonClicked(\'facebook\', ' + parentID + ')"><img src="img/fb_icon.svg"></a>' +
|
|
'<a class="shareButton twitterButton" id="' + twitterButtonID + '" onmouseover="shareButtonHovered(\'twitter\', ' + parentID + ', true)" onclick="shareButtonClicked(\'twitter\', ' + parentID + ')"><img src="img/twitter_icon.svg"></a>' +
|
|
'</div>';
|
|
|
|
// Add onclick handler to parent DIV's img to toggle share buttons
|
|
document.getElementById(parentID + 'img').onclick = function () { selectImageToShare(parentID, true); };
|
|
} else {
|
|
shareBarInnerHTML = '<div class="showShareButtonsButtonDiv inactive" id="' + showShareButtonsButtonDivID + '" onclick="selectImageToShare(' + parentID + ', true)">' +
|
|
'<label id="' + showShareButtonsLabelID + '">' + shareButtonLabelTextInactive + '</label>' +
|
|
'<span class="showShareButtonDots">' +
|
|
'' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="helpTextDiv" id="' + parentID + 'helpTextDiv' + '" style="visibility:hidden;text-align:left;">' +
|
|
'This snap was taken in an unshareable domain.' +
|
|
'</div>';
|
|
// Add onclick handler to parent DIV's img to toggle share buttons
|
|
document.getElementById(parentID + 'img').onclick = function () { selectImageWithHelpText(parentID, true); };
|
|
}
|
|
} else {
|
|
shareBarInnerHTML = '<div class="showShareButtonsButtonDiv inactive" id="' + showShareButtonsButtonDivID + '" onclick="selectImageToShare(' + parentID + ', true)">' +
|
|
'<label id="' + showShareButtonsLabelID + '">' + shareButtonLabelTextInactive + '</label>' +
|
|
'<span class="showShareButtonDots">' +
|
|
'' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="helpTextDiv" id="' + parentID + 'helpTextDiv' + '" style="visibility:hidden;text-align:right;">' +
|
|
'Please log in to share snaps' + '<input class="grayButton" style="margin-left:20px;width:95px;height:30px;" type="button" value="LOG IN" onclick="login()" />' +
|
|
'</div>';
|
|
// Add onclick handler to parent DIV's img to toggle share buttons
|
|
document.getElementById(parentID + 'img').onclick = function () { selectImageWithHelpText(parentID, true); };
|
|
}
|
|
|
|
shareBar.innerHTML = shareBarInnerHTML;
|
|
|
|
return shareBar;
|
|
}
|
|
function appendShareBar(divID, isLoggedIn, canShare, isGif, blastButtonDisabled, hifiButtonDisabled, canBlast) {
|
|
if (divID.id) {
|
|
divID = divID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID
|
|
}
|
|
document.getElementById(divID).appendChild(createShareBar(divID, isLoggedIn, canShare, isGif, blastButtonDisabled, hifiButtonDisabled, canBlast));
|
|
if (divID === "p0") {
|
|
if (isLoggedIn) {
|
|
if (canShare) {
|
|
selectImageToShare(divID, true);
|
|
} else {
|
|
selectImageWithHelpText(divID, true);
|
|
}
|
|
} else {
|
|
selectImageWithHelpText(divID, true);
|
|
}
|
|
}
|
|
if (isLoggedIn && canShare) {
|
|
if (canBlast) {
|
|
shareButtonHovered('blast', divID, false);
|
|
} else {
|
|
shareButtonHovered('hifi', divID, false);
|
|
}
|
|
}
|
|
}
|
|
function shareForUrl(selectedID) {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "snapshot",
|
|
action: "shareSnapshotForUrl",
|
|
data: paths[parseInt(selectedID.substring(1), 10)]
|
|
}));
|
|
}
|
|
function addImage(image_data, isLoggedIn, canShare, isGifLoading, isShowingPreviousImages, blastButtonDisabled, hifiButtonDisabled, canBlast) {
|
|
if (!image_data.localPath) {
|
|
return;
|
|
}
|
|
var imageContainer = document.createElement("DIV"),
|
|
img = document.createElement("IMG"),
|
|
isGif = fileExtensionMatches(image_data.localPath, "gif"),
|
|
id = "p" + (isGif ? "1" : "0");
|
|
imageContainer.id = id;
|
|
imageContainer.style.width = "95%";
|
|
imageContainer.style.height = "240px";
|
|
imageContainer.style.margin = "5px auto";
|
|
imageContainer.style.display = "flex";
|
|
imageContainer.style.justifyContent = "center";
|
|
imageContainer.style.alignItems = "center";
|
|
imageContainer.style.position = "relative";
|
|
img.id = id + "img";
|
|
img.src = image_data.localPath;
|
|
imageContainer.appendChild(img);
|
|
document.getElementById("snapshot-images").appendChild(imageContainer);
|
|
paths.push(image_data.localPath);
|
|
img.onload = function () {
|
|
if (isGif) {
|
|
imageContainer.innerHTML += '<span class="gifLabel">GIF</span>';
|
|
}
|
|
if (!isGifLoading) {
|
|
appendShareBar(id, isLoggedIn, canShare, isGif, blastButtonDisabled, hifiButtonDisabled, canBlast);
|
|
}
|
|
if ((!isShowingPreviousImages && ((isGif && !isGifLoading) || !isGif)) || (isShowingPreviousImages && !image_data.story_id)) {
|
|
shareForUrl(id);
|
|
}
|
|
if (isShowingPreviousImages && isLoggedIn && image_data.story_id) {
|
|
updateShareInfo(id, image_data.story_id);
|
|
}
|
|
if (isShowingPreviousImages) {
|
|
requestPrintButtonUpdate();
|
|
}
|
|
};
|
|
img.onerror = function () {
|
|
img.onload = null;
|
|
img.src = image_data.errorPath;
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "snapshot",
|
|
action: "alertSnapshotLoadFailed"
|
|
}));
|
|
};
|
|
}
|
|
function showConfirmationMessage(selectedID, destination) {
|
|
if (selectedID.id) {
|
|
selectedID = selectedID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID
|
|
}
|
|
|
|
var opacity = 2.0,
|
|
fadeRate = 0.05,
|
|
timeBetweenFadesMS = 50,
|
|
confirmationMessageContainer = document.createElement("div"),
|
|
confirmationMessage = document.createElement("div");
|
|
confirmationMessageContainer.className = "confirmationMessageContainer";
|
|
|
|
confirmationMessage.className = "confirmationMessage";
|
|
|
|
var socialIcon = document.createElement("img");
|
|
switch (destination) {
|
|
case 'blast':
|
|
socialIcon.src = "img/blast_icon.svg";
|
|
confirmationMessage.appendChild(socialIcon);
|
|
confirmationMessage.innerHTML += '<span>Blast Sent!</span>';
|
|
confirmationMessage.style.backgroundColor = "#EA4C5F";
|
|
break;
|
|
case 'hifi':
|
|
socialIcon.src = "img/hifi_icon.svg";
|
|
confirmationMessage.appendChild(socialIcon);
|
|
confirmationMessage.innerHTML += '<span>Snap Shared!</span>';
|
|
confirmationMessage.style.backgroundColor = "#1FC6A6";
|
|
break;
|
|
}
|
|
|
|
confirmationMessageContainer.appendChild(confirmationMessage);
|
|
document.getElementById(selectedID).appendChild(confirmationMessageContainer);
|
|
|
|
setInterval(function () {
|
|
if (opacity <= fadeRate) {
|
|
confirmationMessageContainer.remove();
|
|
}
|
|
opacity -= fadeRate;
|
|
confirmationMessageContainer.style.opacity = opacity;
|
|
}, timeBetweenFadesMS);
|
|
}
|
|
function showUploadingMessage(selectedID, destination) {
|
|
if (selectedID.id) {
|
|
selectedID = selectedID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID
|
|
}
|
|
|
|
var shareBarHelp = document.getElementById(selectedID + "shareBarHelp");
|
|
|
|
shareBarHelp.innerHTML = '<img style="display:inline;width:25px;height:25px;" src="./img/loader.gif"></img><span style="position:relative;margin-left:5px;bottom:7px;">Preparing to Share</span>';
|
|
shareBarHelp.classList.add("uploading");
|
|
shareBarHelp.setAttribute("data-destination", destination);
|
|
}
|
|
function hideUploadingMessageAndMaybeShare(selectedID, storyID) {
|
|
if (selectedID.id) {
|
|
selectedID = selectedID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID
|
|
}
|
|
|
|
var shareBarHelp = document.getElementById(selectedID + "shareBarHelp"),
|
|
shareBarHelpDestination = shareBarHelp.getAttribute("data-destination");
|
|
|
|
shareBarHelp.classList.remove("uploading");
|
|
if (shareBarHelpDestination) {
|
|
switch (shareBarHelpDestination) {
|
|
case 'blast':
|
|
blastToConnections(selectedID, selectedID === "p1");
|
|
shareBarHelp.innerHTML = blastAlreadySharedText;
|
|
break;
|
|
case 'hifi':
|
|
shareWithEveryone(selectedID, selectedID === "p1");
|
|
shareBarHelp.innerHTML = hifiAlreadySharedText;
|
|
break;
|
|
case 'facebook':
|
|
var facebookButton = document.getElementById(selectedID + "facebookButton");
|
|
window.open(facebookButton.getAttribute("href"), "_blank");
|
|
shareBarHelp.innerHTML = facebookShareText;
|
|
// This emitWebEvent() call isn't necessary in the "hifi" and "blast" cases
|
|
// because the "removeFromStoryIDsToMaybeDelete()" call happens
|
|
// in snapshot.js when sharing with that method.
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "snapshot",
|
|
action: "removeFromStoryIDsToMaybeDelete",
|
|
story_id: storyID
|
|
}));
|
|
break;
|
|
case 'twitter':
|
|
var twitterButton = document.getElementById(selectedID + "twitterButton");
|
|
window.open(twitterButton.getAttribute("href"), "_blank");
|
|
shareBarHelp.innerHTML = twitterShareText;
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "snapshot",
|
|
action: "removeFromStoryIDsToMaybeDelete",
|
|
story_id: storyID
|
|
}));
|
|
break;
|
|
}
|
|
|
|
shareBarHelp.setAttribute("data-destination", "");
|
|
}
|
|
}
|
|
function updateShareInfo(containerID, storyID) {
|
|
if (containerID.id) {
|
|
containerID = containerID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID
|
|
}
|
|
var shareBar = document.getElementById(containerID + "shareBar"),
|
|
parentDiv = document.getElementById(containerID),
|
|
shareURL = "https://highfidelity.com/user_stories/" + storyID,
|
|
facebookButton = document.getElementById(containerID + "facebookButton"),
|
|
twitterButton = document.getElementById(containerID + "twitterButton");
|
|
|
|
parentDiv.setAttribute('data-story-id', storyID);
|
|
|
|
facebookButton.setAttribute("target", "_blank");
|
|
facebookButton.setAttribute("href", 'https://www.facebook.com/dialog/feed?app_id=1585088821786423&link=' + shareURL);
|
|
|
|
twitterButton.setAttribute("target", "_blank");
|
|
twitterButton.setAttribute("href", 'https://twitter.com/intent/tweet?text=I%20just%20took%20a%20snapshot!&url=' + shareURL + '&via=highfidelityVR&hashtags=VR,HiFi');
|
|
|
|
hideUploadingMessageAndMaybeShare(containerID, storyID);
|
|
}
|
|
function blastToConnections(selectedID, isGif) {
|
|
if (selectedID.id) {
|
|
selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
|
|
}
|
|
|
|
var blastToConnectionsButton = document.getElementById(selectedID + "blastToConnectionsButton"),
|
|
shareBar = document.getElementById(selectedID + "shareBar"),
|
|
shareBarHelp = document.getElementById(selectedID + "shareBarHelp");
|
|
blastToConnectionsButton.onclick = function () { };
|
|
|
|
var storyID = document.getElementById(selectedID).getAttribute("data-story-id");
|
|
|
|
if (storyID) {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "snapshot",
|
|
action: "blastToConnections",
|
|
story_id: storyID,
|
|
isGif: isGif
|
|
}));
|
|
showConfirmationMessage(selectedID, 'blast');
|
|
blastToConnectionsButton.classList.add("disabled");
|
|
blastToConnectionsButton.style.backgroundColor = "#000000";
|
|
blastToConnectionsButton.style.opacity = "0.5";
|
|
shareBarHelp.style.backgroundColor = "#000000";
|
|
shareBarHelp.style.opacity = "0.5";
|
|
} else {
|
|
showUploadingMessage(selectedID, 'blast');
|
|
}
|
|
}
|
|
function shareWithEveryone(selectedID, isGif) {
|
|
if (selectedID.id) {
|
|
selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
|
|
}
|
|
|
|
var shareWithEveryoneButton = document.getElementById(selectedID + "shareWithEveryoneButton"),
|
|
shareBar = document.getElementById(selectedID + "shareBar"),
|
|
shareBarHelp = document.getElementById(selectedID + "shareBarHelp");
|
|
shareWithEveryoneButton.onclick = function () { };
|
|
|
|
var storyID = document.getElementById(selectedID).getAttribute("data-story-id");
|
|
|
|
if (storyID) {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "snapshot",
|
|
action: "shareSnapshotWithEveryone",
|
|
story_id: storyID,
|
|
isGif: isGif
|
|
}));
|
|
showConfirmationMessage(selectedID, 'hifi');
|
|
shareWithEveryoneButton.classList.add("disabled");
|
|
shareWithEveryoneButton.style.backgroundColor = "#000000";
|
|
shareWithEveryoneButton.style.opacity = "0.5";
|
|
shareBarHelp.style.backgroundColor = "#000000";
|
|
shareBarHelp.style.opacity = "0.5";
|
|
} else {
|
|
showUploadingMessage(selectedID, 'hifi');
|
|
}
|
|
}
|
|
function shareButtonHovered(destination, selectedID, shouldAlsoModifyOther) {
|
|
if (selectedID.id) {
|
|
selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
|
|
}
|
|
var shareBarHelp = document.getElementById(selectedID + "shareBarHelp"),
|
|
shareButtonsDiv = document.getElementById(selectedID + "shareButtonsDiv").childNodes,
|
|
itr;
|
|
|
|
if (!shareBarHelp.classList.contains("uploading")) {
|
|
for (itr = 0; itr < shareButtonsDiv.length; itr += 1) {
|
|
shareButtonsDiv[itr].style.backgroundColor = "rgba(0, 0, 0, 0)";
|
|
}
|
|
shareBarHelp.style.opacity = "1.0";
|
|
switch (destination) {
|
|
case 'blast':
|
|
var blastToConnectionsButton = document.getElementById(selectedID + "blastToConnectionsButton");
|
|
if (!blastToConnectionsButton.classList.contains("disabled")) {
|
|
shareBarHelp.style.backgroundColor = "#EA4C5F";
|
|
shareBarHelp.style.opacity = "1.0";
|
|
blastToConnectionsButton.style.backgroundColor = "#EA4C5F";
|
|
blastToConnectionsButton.style.opacity = "1.0";
|
|
shareBarHelp.innerHTML = blastShareText;
|
|
} else {
|
|
shareBarHelp.style.backgroundColor = "#000000";
|
|
shareBarHelp.style.opacity = "0.5";
|
|
blastToConnectionsButton.style.backgroundColor = "#000000";
|
|
blastToConnectionsButton.style.opacity = "0.5";
|
|
shareBarHelp.innerHTML = blastAlreadySharedText;
|
|
}
|
|
break;
|
|
case 'hifi':
|
|
var shareWithEveryoneButton = document.getElementById(selectedID + "shareWithEveryoneButton");
|
|
if (!shareWithEveryoneButton.classList.contains("disabled")) {
|
|
shareBarHelp.style.backgroundColor = "#1FC6A6";
|
|
shareBarHelp.style.opacity = "1.0";
|
|
shareWithEveryoneButton.style.backgroundColor = "#1FC6A6";
|
|
shareWithEveryoneButton.style.opacity = "1.0";
|
|
shareBarHelp.innerHTML = hifiShareText;
|
|
} else {
|
|
shareBarHelp.style.backgroundColor = "#000000";
|
|
shareBarHelp.style.opacity = "0.5";
|
|
shareWithEveryoneButton.style.backgroundColor = "#000000";
|
|
shareWithEveryoneButton.style.opacity = "0.5";
|
|
shareBarHelp.innerHTML = hifiAlreadySharedText;
|
|
}
|
|
break;
|
|
case 'facebook':
|
|
shareBarHelp.style.backgroundColor = "#3C58A0";
|
|
shareBarHelp.innerHTML = facebookShareText;
|
|
document.getElementById(selectedID + "facebookButton").style.backgroundColor = "#3C58A0";
|
|
break;
|
|
case 'twitter':
|
|
shareBarHelp.style.backgroundColor = "#00B4EE";
|
|
shareBarHelp.innerHTML = twitterShareText;
|
|
document.getElementById(selectedID + "twitterButton").style.backgroundColor = "#00B4EE";
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (shouldAlsoModifyOther && imageCount > 1) {
|
|
if (selectedID === "p0" && !document.getElementById("p1").classList.contains("processingGif")) {
|
|
shareButtonHovered(destination, "p1", false);
|
|
} else if (selectedID === "p1") {
|
|
shareButtonHovered(destination, "p0", false);
|
|
}
|
|
}
|
|
}
|
|
function shareButtonClicked(destination, selectedID) {
|
|
if (selectedID.id) {
|
|
selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
|
|
}
|
|
var storyID = document.getElementById(selectedID).getAttribute("data-story-id");
|
|
|
|
if (!storyID) {
|
|
showUploadingMessage(selectedID, destination);
|
|
} else {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "snapshot",
|
|
action: "removeFromStoryIDsToMaybeDelete",
|
|
story_id: storyID
|
|
}));
|
|
}
|
|
}
|
|
|
|
function handleCaptureSetting(setting) {
|
|
var stillAndGif = document.getElementById('stillAndGif'),
|
|
stillOnly = document.getElementById('stillOnly');
|
|
|
|
stillAndGif.checked = setting;
|
|
stillOnly.checked = !setting;
|
|
|
|
stillAndGif.onclick = function () {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "snapshot",
|
|
action: "captureStillAndGif"
|
|
}));
|
|
};
|
|
|
|
stillOnly.onclick = function () {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "snapshot",
|
|
action: "captureStillOnly"
|
|
}));
|
|
};
|
|
|
|
}
|
|
window.onload = function () {
|
|
// Uncomment the line below to test functionality in a browser.
|
|
// See definition of "testInBrowser()" to modify tests.
|
|
//testInBrowser(4);
|
|
openEventBridge(function () {
|
|
// Set up a handler for receiving the data, and tell the .js we are ready to receive it.
|
|
EventBridge.scriptEventReceived.connect(function (message) {
|
|
|
|
message = JSON.parse(message);
|
|
|
|
if (message.type !== "snapshot") {
|
|
return;
|
|
}
|
|
|
|
var messageOptions = message.options;
|
|
|
|
switch (message.action) {
|
|
case 'showSetupInstructions':
|
|
showSetupInstructions();
|
|
break;
|
|
case 'snapshotLocationChosen':
|
|
clearImages();
|
|
showSetupComplete();
|
|
break;
|
|
case 'clearPreviousImages':
|
|
clearImages();
|
|
break;
|
|
case 'showPreviousImages':
|
|
clearImages();
|
|
imageCount = message.image_data.length;
|
|
if (imageCount > 0) {
|
|
message.image_data.forEach(function (element, idx) {
|
|
addImage(element, messageOptions.isLoggedIn, message.canShare, false, true, message.image_data[idx].blastButtonDisabled, message.image_data[idx].hifiButtonDisabled, messageOptions.canBlast);
|
|
});
|
|
} else {
|
|
showSnapshotInstructions();
|
|
}
|
|
break;
|
|
case 'addImages':
|
|
// The last element of the message contents list contains a bunch of options,
|
|
// including whether or not we can share stuff
|
|
// The other elements of the list contain image paths.
|
|
if (messageOptions.containsGif === true) {
|
|
if (messageOptions.processingGif === true) {
|
|
imageCount = message.image_data.length + 1; // "+1" for the GIF that'll finish processing soon
|
|
message.image_data.push({ localPath: messageOptions.loadingGifPath });
|
|
message.image_data.forEach(function (element, idx) {
|
|
addImage(element, messageOptions.isLoggedIn, idx === 0 && messageOptions.canShare, idx === 1, false, false, false, true);
|
|
});
|
|
document.getElementById("p1").classList.add("processingGif");
|
|
document.getElementById("snap-button").disabled = true;
|
|
} else {
|
|
var gifPath = message.image_data[0].localPath,
|
|
p1img = document.getElementById('p1img');
|
|
p1img.src = gifPath;
|
|
|
|
paths[1] = gifPath;
|
|
shareForUrl("p1");
|
|
appendShareBar("p1", messageOptions.isLoggedIn, messageOptions.canShare, true, false, false, messageOptions.canBlast);
|
|
document.getElementById("p1").classList.remove("processingGif");
|
|
document.getElementById("snap-button").disabled = false;
|
|
}
|
|
} else {
|
|
imageCount = message.image_data.length;
|
|
message.image_data.forEach(function (element) {
|
|
addImage(element, messageOptions.isLoggedIn, messageOptions.canShare, false, false, false, false, true);
|
|
});
|
|
document.getElementById("snap-button").disabled = false;
|
|
}
|
|
break;
|
|
case 'captureSettings':
|
|
handleCaptureSetting(message.setting);
|
|
break;
|
|
case 'setPrintButtonEnabled':
|
|
setPrintButtonEnabled();
|
|
break;
|
|
case 'setPrintButtonLoading':
|
|
setPrintButtonLoading();
|
|
break;
|
|
case 'setPrintButtonDisabled':
|
|
setPrintButtonDisabled();
|
|
break;
|
|
case 'snapshotUploadComplete':
|
|
var isGif = fileExtensionMatches(message.image_url, "gif");
|
|
updateShareInfo(isGif ? "p1" : "p0", message.story_id);
|
|
if (isPrintProcessing()) {
|
|
setPrintButtonEnabled();
|
|
}
|
|
break;
|
|
default:
|
|
console.log("Unknown message action received in SnapshotReview.js.");
|
|
break;
|
|
}
|
|
});
|
|
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "snapshot",
|
|
action: "ready"
|
|
}));
|
|
});;
|
|
};
|
|
function snapshotSettings() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "snapshot",
|
|
action: "openSettings"
|
|
}));
|
|
}
|
|
function takeSnapshot() {
|
|
document.getElementById("snap-button").disabled = true;
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "snapshot",
|
|
action: "takeSnapshot"
|
|
}));
|
|
}
|
|
|
|
function isPrintDisabled() {
|
|
var printElement = document.getElementById('print-icon');
|
|
|
|
return printElement.classList.contains("print-icon") &&
|
|
printElement.classList.contains("print-icon-default") &&
|
|
document.getElementById('print-button').disabled;
|
|
}
|
|
function isPrintProcessing() {
|
|
var printElement = document.getElementById('print-icon');
|
|
|
|
return printElement.classList.contains("print-icon") &&
|
|
printElement.classList.contains("print-icon-loading") &&
|
|
document.getElementById('print-button').disabled;
|
|
}
|
|
function isPrintEnabled() {
|
|
var printElement = document.getElementById('print-icon');
|
|
|
|
return printElement.classList.contains("print-icon") &&
|
|
printElement.classList.contains("print-icon-default") &&
|
|
!document.getElementById('print-button').disabled;
|
|
}
|
|
|
|
function setPrintButtonLoading() {
|
|
document.getElementById('print-icon').className = "print-icon print-icon-loading";
|
|
document.getElementById('print-button').disabled = true;
|
|
}
|
|
function setPrintButtonDisabled() {
|
|
document.getElementById('print-icon').className = "print-icon print-icon-default";
|
|
document.getElementById('print-button').disabled = true;
|
|
}
|
|
function setPrintButtonEnabled() {
|
|
document.getElementById('print-button').disabled = false;
|
|
document.getElementById('print-icon').className = "print-icon print-icon-default";
|
|
}
|
|
|
|
function requestPrintButtonUpdate() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "snapshot",
|
|
action: "requestPrintButtonUpdate"
|
|
}));
|
|
}
|
|
|
|
function printToPolaroid() {
|
|
if (isPrintEnabled()) {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "snapshot",
|
|
action: "printToPolaroid"
|
|
}));
|
|
} else {
|
|
setPrintButtonLoading();
|
|
}
|
|
}
|
|
|
|
function testInBrowser(test) {
|
|
if (test === 0) {
|
|
showSetupInstructions();
|
|
} else if (test === 1) {
|
|
imageCount = 2;
|
|
//addImage({ localPath: 'http://lorempixel.com/553/255' });
|
|
addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg', story_id: 1338 }, true, true, false, true, false, false, true);
|
|
addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, true, true, false, true, false, false, true);
|
|
} else if (test === 2) {
|
|
addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg', story_id: 1338 }, true, true, false, true, false, false, true);
|
|
addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, true, true, false, true, false, false, true);
|
|
showConfirmationMessage("p0", 'blast');
|
|
showConfirmationMessage("p1", 'hifi');
|
|
} else if (test === 3) {
|
|
imageCount = 2;
|
|
//addImage({ localPath: 'http://lorempixel.com/553/255' });
|
|
addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg', story_id: 1338 }, true, true, false, true, false, false, true);
|
|
addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, true, true, false, true, false, false, true);
|
|
showUploadingMessage("p0", 'hifi');
|
|
} else if (test === 4) {
|
|
imageCount = 2;
|
|
//addImage({ localPath: 'http://lorempixel.com/553/255' });
|
|
addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg', story_id: 1338 }, false, true, false, true, false, false, true);
|
|
addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, false, true, false, true, false, false, true);
|
|
}
|
|
}
|