mirror of
https://github.com/overte-org/overte.git
synced 2025-08-03 23:43:30 +02:00
218 lines
7.1 KiB
HTML
218 lines
7.1 KiB
HTML
<html>
|
|
<head>
|
|
<title>Share</title>
|
|
<link rel="stylesheet" type="text/css" href="css/edit-style.css">
|
|
<style type="text/css">
|
|
|
|
.snapshot-container {
|
|
width: 100%;
|
|
padding-top: 3px;
|
|
}
|
|
|
|
.snapshot-column-left {
|
|
width: 320px;
|
|
position: absolute;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.snapshot-column-right {
|
|
margin-left: 342px;
|
|
}
|
|
|
|
.snapshot-column-right > div > img {
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.snapshot-column-left {
|
|
position: initial;
|
|
width: 100%;
|
|
}
|
|
.snapshot-column-right {
|
|
margin-left: 0;
|
|
width: 100%;
|
|
}
|
|
.snapshot-column-right > div > img {
|
|
margin-top: 32px !important;
|
|
}
|
|
}
|
|
|
|
.snapshot-column-right > div {
|
|
position: relative;
|
|
padding: 2px;
|
|
}
|
|
|
|
.snapshot-column-right > div > img {
|
|
border: 2px solid #575757;
|
|
margin: -2px;
|
|
}
|
|
|
|
hr {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
margin: 21px 0;
|
|
}
|
|
|
|
.snapsection {
|
|
text-align: center;
|
|
}
|
|
|
|
.title {
|
|
text-transform: uppercase;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.prompt {
|
|
font-family: Raleway-SemiBold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#share, #close {
|
|
margin-top: 21px;
|
|
}
|
|
|
|
.setting {
|
|
display: inline-table;
|
|
height: 28px;
|
|
}
|
|
|
|
.setting label {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
font-family: Raleway-SemiBold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.setting + .setting {
|
|
margin-left: 18px;
|
|
}
|
|
|
|
input[type=button].naked {
|
|
font-size: 40px;
|
|
line-height: 40px;
|
|
width: 30px;
|
|
padding: 0;
|
|
margin: 0 0 -6px 0;
|
|
position: relative;
|
|
top: -6px;
|
|
left: -8px;
|
|
background: none;
|
|
}
|
|
|
|
input[type=button].naked:hover {
|
|
color: #00b4ef;
|
|
background: none;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
|
|
<script type="text/javascript" src="js/eventBridgeLoader.js"></script>
|
|
<script>
|
|
var paths = [], idCounter = 0, useCheckboxes;
|
|
function addImage(data) {
|
|
var div = document.createElement("DIV"),
|
|
input = document.createElement("INPUT"),
|
|
label = document.createElement("LABEL"),
|
|
img = document.createElement("IMG"),
|
|
id = "p" + idCounter++;
|
|
function toggle() { data.share = input.checked; }
|
|
img.src = data.localPath;
|
|
div.appendChild(img);
|
|
data.share = true;
|
|
if (useCheckboxes) { // I'd rather use css, but the included stylesheet is quite particular.
|
|
// Our stylesheet(?) requires input.id to match label.for. Otherwise input doesn't display the check state.
|
|
label.setAttribute('for', id); // cannot do label.for =
|
|
input.id = id;
|
|
input.type = "checkbox";
|
|
input.checked = true;
|
|
input.addEventListener('change', toggle);
|
|
div.class = "property checkbox";
|
|
div.appendChild(input);
|
|
div.appendChild(label);
|
|
}
|
|
document.getElementById("snapshot-images").appendChild(div);
|
|
paths.push(data);
|
|
|
|
}
|
|
function handleShareButtons(shareMsg) {
|
|
var openFeed = document.getElementById('openFeed');
|
|
openFeed.checked = shareMsg.openFeedAfterShare;
|
|
openFeed.onchange = function () { EventBridge.emitWebEvent(openFeed.checked ? 'setOpenFeedTrue' : 'setOpenFeedFalse'); };
|
|
if (!shareMsg.canShare) {
|
|
// this means you may or may not be logged in, but can't share
|
|
// because you are not in a public place.
|
|
document.getElementById("sharing").innerHTML = "<p class='prompt'>Snapshots can be shared when they're taken in shareable places.";
|
|
} else if (!shareMsg.isLoggedIn) {
|
|
// this means you are in a public place, but can't share because
|
|
// you need to login. Soon we will just bring up the share dialog
|
|
// in this case (and maybe set a boolean here to inform the html)
|
|
document.getElementById("sharing").innerHTML = "<p class='prompt'>Snapshots can be shared when you're logged in.";
|
|
}
|
|
}
|
|
window.onload = function () {
|
|
// Something like the following will allow testing in a browser.
|
|
//addImage({localPath: 'c:/Users/howar/OneDrive/Pictures/hifi-snap-by--on-2016-07-27_12-58-43.jpg'});
|
|
//addImage({localPath: 'http://lorempixel.com/1512/1680'});
|
|
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) {
|
|
// last element of list contains a bool for whether or not we can share stuff
|
|
var shareMsg = message.pop();
|
|
handleShareButtons(shareMsg);
|
|
|
|
// rest are image paths which we add
|
|
useCheckboxes = message.length > 1;
|
|
message.forEach(addImage);
|
|
});
|
|
EventBridge.emitWebEvent('ready');
|
|
});
|
|
|
|
};
|
|
// beware of bug: Cannot send objects at top level. (Nested in arrays is fine.)
|
|
shareSelected = function () {
|
|
EventBridge.emitWebEvent(paths);
|
|
};
|
|
doNotShare = function () {
|
|
EventBridge.emitWebEvent([]);
|
|
};
|
|
snapshotSettings = function () {
|
|
EventBridge.emitWebEvent("openSettings");
|
|
};
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="snapshot-container">
|
|
<div class="snapshot-column-left">
|
|
<div class="snapsection">
|
|
<label class="title">Snapshot successfully saved!</label>
|
|
</div>
|
|
<hr />
|
|
<div class="snapsection">
|
|
<div id="sharing">
|
|
<div class="prompt">Would you like to share your pic in the Snapshots feed?</div>
|
|
<div>
|
|
<input type="button" class="blue" id="share" value="Share in Feed" onclick="shareSelected()"/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<input type="button" class="black" id="close" value="Don't Share" onclick="doNotShare()"/>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="snapsection">
|
|
<span class="setting">
|
|
<input type="button" class="glyph naked" id="snapshotSettings" value="@" onclick="snapshotSettings()" />
|
|
<label for="snapshotSettings">Snapshot settings</label>
|
|
</span>
|
|
<span class="setting checkbox">
|
|
<input id="openFeed" type="checkbox" checked/>
|
|
<label for="openFeed">Open feed after</label>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div id="snapshot-images" class="snapshot-column-right"/>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|