Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-04-17 23:09:11 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Super amped about this. Only need to add disabled state?

Browse source
This commit is contained in:
Zach Fox 2017-05-02 16:38:16 -07:00
parent 5d38cd543d
commit 68fa8e06ef
2 changed files with 63 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
scripts/system/html/css/SnapshotReview.css
View file

@ -170,12 +170,6 @@ input[type=button].naked:active {
height: 40px;
display: inline-block;
}
.blastToConnections {
background-image: url(../img/fb_logo.png);
}
.shareWithEveryone {
background: #DDDDDD url(../img/shareToFeed.png) no-repeat scroll center;
}
.shareControlsHelp {
height: 25px;
line-height: 25px;
@ -193,22 +187,32 @@ input[type=button].naked:active {
*/
/*
// START styling of uploading message
// START styling of confirmation message
*/
.uploadingMessage {
.confirmationMessageContainer {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.45);
text-align: center;
background-color: rgba(0, 0, 0, 0.8);
left: 0;
top: 0;
pointer-events: none;
color: white;
font-weight: bold;
font-size: 16px;
}
.uploadingMessage > img {
.confirmationMessage {
width: 130px;
height: 130px;
margin: 50px auto 0 auto;
}
.confirmationMessage > img {
width: 72px;
height: 72px;
display: block;
margin: 60px auto 10px auto;
margin: 0 auto;
padding: 10px 0 0 0;
}
/*
// END styling of uploading message

55
scripts/system/html/js/SnapshotReview.js
View file

@ -140,9 +140,9 @@ function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled
'</div>' +
'<div class="shareButtons" id="' + shareButtonsDivID + '" style="visibility:hidden">';
if (canBlast) {
shareBarInnerHTML += '<div class="shareButton blastToConnections' + (hifiButtonDisabled ? ' disabled' : 'enabled') + '" id="' + blastToConnectionsButtonID + '" onmouseover="shareButtonHovered(\'blast\', ' + parentID + ')" onclick="blastToConnections(' + parentID + ', ' + isGif + ')"><img src="img/blast_icon.svg"></div>';
shareBarInnerHTML += '<div class="shareButton blastToConnections" id="' + blastToConnectionsButtonID + '" onmouseover="shareButtonHovered(\'blast\', ' + parentID + ')" onclick="' + (blastButtonDisabled ? '' : 'blastToConnections(' + parentID + ', ' + isGif + ')') + '"><img src="img/blast_icon.svg"></div>';
}
shareBarInnerHTML += '<div class="shareButton shareWithEveryone' + (hifiButtonDisabled ? ' disabled' : 'enabled') + '" id="' + shareWithEveryoneButtonID + '" onmouseover="shareButtonHovered(\'hifi\', ' + parentID + ')" onclick="shareWithEveryone(' + parentID + ', ' + isGif + ')"><img src="img/hifi_icon.svg"></div>' +
shareBarInnerHTML += '<div class="shareButton shareWithEveryone" id="' + shareWithEveryoneButtonID + '" onmouseover="shareButtonHovered(\'hifi\', ' + parentID + ')" onclick="' + (hifiButtonDisabled ? '' : 'shareWithEveryone(' + parentID + ', ' + isGif + ')') + '"><img src="img/hifi_icon.svg"></div>' +
'<a class="shareButton facebookButton" id="' + facebookButtonID + '" onmouseover="shareButtonHovered(\'facebook\', ' + parentID + ')" onclick="shareButtonClicked(\'facebook\', ' + parentID + ')"><img src="img/fb_icon.svg"></a>' +
'<a class="shareButton twitterButton" id="' + twitterButtonID + '" onmouseover="shareButtonHovered(\'twitter\', ' + parentID + ')" onclick="shareButtonClicked(\'twitter\', ' + parentID + ')"><img src="img/twitter_icon.svg"></a>' +
'</div>';
@ -205,6 +205,45 @@ function addImage(image_data, isGifLoading, canShare, isShowingPreviousImages, b
updateShareInfo(id, image_data.story_id);
}
}
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,
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 <= 0.05) {
confirmationMessageContainer.remove();
}
opacity -= 0.05;
confirmationMessageContainer.style.opacity = opacity;
}, 50);
}
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
@ -278,7 +317,7 @@ 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").disabled = true;
document.getElementById(selectedID + "blastToConnectionsButton").onclick = function () { };
var storyID = document.getElementById(selectedID).getAttribute("data-story-id");
@ -289,6 +328,7 @@ function blastToConnections(selectedID, isGif) {
story_id: storyID,
isGif: isGif
}));
showConfirmationMessage(selectedID, 'blast');
} else {
showUploadingMessage(selectedID, 'blast');
}
@ -298,7 +338,7 @@ 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").disabled = true;
document.getElementById(selectedID + "shareWithEveryoneButton").onclick = function () { };
var storyID = document.getElementById(selectedID).getAttribute("data-story-id");
@ -309,6 +349,7 @@ function shareWithEveryone(selectedID, isGif) {
story_id: storyID,
isGif: isGif
}));
showConfirmationMessage(selectedID, 'hifi');
} else {
showUploadingMessage(selectedID, 'hifi');
}
@ -384,7 +425,7 @@ function handleCaptureSetting(setting) {
window.onload = function () {
// Uncomment the line below to test functionality in a browser.
// See definition of "testInBrowser()" to modify tests.
testInBrowser(1);
//testInBrowser(2);
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) {
@ -492,7 +533,7 @@ function testInBrowser(test) {
} 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 }, false, true, 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, true, false, false, true);
showUploadingMessage("p0", 'facebook');
showUploadingMessage("p1", 'twitter');
showConfirmationMessage("p0", 'blast');
showConfirmationMessage("p1", 'hifi');
}
}