diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css index b03b748082..e327ab75e9 100644 --- a/scripts/system/html/css/SnapshotReview.css +++ b/scripts/system/html/css/SnapshotReview.css @@ -170,6 +170,10 @@ input[type=button].naked:active { height: 40px; display: inline-block; } +.shareButton.disabled { + background-color: #000000; + opacity: 0.5; +} .shareControlsHelp { height: 25px; line-height: 25px; diff --git a/scripts/system/html/img/loader.gif b/scripts/system/html/img/loader.gif new file mode 100644 index 0000000000..c464703c84 Binary files /dev/null and b/scripts/system/html/img/loader.gif differ diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js index 99364169f1..e3417893dd 100644 --- a/scripts/system/html/js/SnapshotReview.js +++ b/scripts/system/html/js/SnapshotReview.js @@ -16,7 +16,9 @@ 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"; function showSetupInstructions() { @@ -140,16 +142,16 @@ function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled '' + ''; shareBar.innerHTML = shareBarInnerHTML; - shareBar.innerHTML += '
'; + shareBar.innerHTML += ''; // Add onclick handler to parent DIV's img to toggle share buttons document.getElementById(parentID + 'img').onclick = function () { selectImageToShare(parentID, true); }; @@ -273,11 +275,11 @@ function hideUploadingMessageAndShare(selectedID, storyID) { switch (shareBarHelpDestination) { case 'blast': blastToConnections(selectedID, selectedID === "p1"); - shareBarHelp.innerHTML = blastShareText; + shareBarHelp.innerHTML = blastAlreadySharedText; break; case 'hifi': shareWithEveryone(selectedID, selectedID === "p1"); - shareBarHelp.innerHTML = hifiShareText; + shareBarHelp.innerHTML = hifiAlreadySharedText; break; case 'facebook': var facebookButton = document.getElementById(selectedID + "facebookButton"); @@ -325,7 +327,15 @@ function blastToConnections(selectedID, isGif) { selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID } - document.getElementById(selectedID + "blastToConnectionsButton").onclick = function () { }; + var blastToConnectionsButton = document.getElementById(selectedID + "blastToConnectionsButton"), + shareBar = document.getElementById(selectedID + "shareBar"), + shareBarHelp = document.getElementById(selectedID + "shareBarHelp"); + blastToConnectionsButton.onclick = function () { }; + blastToConnectionsButton.classList.add("disabled"); + blastToConnectionsButton.style.backgroundColor = "#000000"; + blastToConnectionsButton.style.opacity = "0.5"; + shareBarHelp.style.backgroundColor = "#000000"; + shareBarHelp.style.opacity = "0.5"; var storyID = document.getElementById(selectedID).getAttribute("data-story-id"); @@ -346,7 +356,15 @@ function shareWithEveryone(selectedID, isGif) { selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID } - document.getElementById(selectedID + "shareWithEveryoneButton").onclick = function () { }; + var shareWithEveryoneButton = document.getElementById(selectedID + "shareWithEveryoneButton"), + shareBar = document.getElementById(selectedID + "shareBar"), + shareBarHelp = document.getElementById(selectedID + "shareBarHelp"); + shareWithEveryoneButton.onclick = function () { }; + shareWithEveryoneButton.classList.add("disabled"); + shareWithEveryoneButton.style.backgroundColor = "#000000"; + shareWithEveryoneButton.style.opacity = "0.5"; + shareBarHelp.style.backgroundColor = "#000000"; + shareBarHelp.style.opacity = "0.5"; var storyID = document.getElementById(selectedID).getAttribute("data-story-id"); @@ -373,17 +391,40 @@ function shareButtonHovered(destination, selectedID) { 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': - shareBarHelp.style.backgroundColor = "#EA4C5F"; - shareBarHelp.innerHTML = blastShareText; - document.getElementById(selectedID + "blastToConnectionsButton").style.backgroundColor = "#EA4C5F"; + 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': - shareBarHelp.style.backgroundColor = "#1FC6A6"; - shareBarHelp.innerHTML = hifiShareText; - document.getElementById(selectedID + "shareWithEveryoneButton").style.backgroundColor = "#1FC6A6"; + 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";