From 09488c49873290acf818060d76f3fafaa5532262 Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Wed, 3 May 2017 11:02:44 -0700 Subject: [PATCH] Disabled state for share butotns --- scripts/system/html/css/SnapshotReview.css | 4 ++ scripts/system/html/img/loader.gif | Bin 0 -> 21466 bytes scripts/system/html/js/SnapshotReview.js | 67 +++++++++++++++++---- 3 files changed, 58 insertions(+), 13 deletions(-) create mode 100644 scripts/system/html/img/loader.gif 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 0000000000000000000000000000000000000000..c464703c848bb5b00f67d5105653f6681385c2b8 GIT binary patch literal 21466 zcmeI4_fyk%7{|kuB|`*}p)5i6h#*ry_LRN1Ajnii?mW-JRjDUEMQ9lj3JA7L!O#$i zfDj|dQcyqy!%&8tavTQ;;z}>U&~H`Rp4O5(p4VTHUtW2Cp7-bZd@ZdlbaaCxQIe=7 z6cr{WCT3=478Vv(R#rAPHgS%y}g5j!+`?_9335)6;+YYJUDwGBPrcxu}Gcz-@v$Jz^bMy1_3kwS`U%p&i zTwGdOdiCnn^78WQ*RS8adGnUWJ38;zfI^{2QMet-| z7o|*lkNZ8^lZY6#COU{C>-&)s`Cr>6NC7n5Q=G?h+=g*%{O-=oJ zW4}~YDj5heGc&WYva++YFI~EnpPye;R8(ACTv1U`RaJ$<;c9DZSMTZnPbOk7D@V3^3S4QP8EK4R55l0WXEIE@ zD7LNv*)aZG`|q_WHA*520bThlr+L{#7eYHRERij@tsTSc^4N`j5cir3Y0sc|Cy3kP zD+YcK?(^^*YY7CxjT<-W>gww2>l+$A_LM}T8rs}URr1aqs(@{6pHUB)pvd?fps|{u zt09Wa(ed%|XV0EZPfyRz&d$$MO+*IgN_PGm6IY=sc?xCt_u-f(r4mnhf8587-<@!A zB2dV;PeoSGn{_Ce$NK7M8)kybIcK>`!X(d-oB5rGqg+?M!6|7&QNi#Yj27pxSt(k9 zm?~wNS&xYe?MPJ9r-kDOB{Kt!KZGP0`G1~i87(A{fRSM2#+x$1$hD?S$VhrdB1T#` zwSMzcEA&2V8OaE}4^%oEr-5a(Y(z9VQ0YLWvk@;v7)?neFhIfp2?OMM-+LedBf&^8 z5{#rT4nU;?l@6@(&~^i0m1hO&MI>zLY?!4wMw=g@(pd$zbT;OmE2Ali1O`YLAYp)n z0TKqtl~q>Qn_Hi^Adr!3?F2xj1C;M1&00000008{g`~jd&y@&t+ literal 0 HcmV?d00001 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";