mirror of
https://github.com/overte-org/overte.git
synced 2025-07-23 01:46:23 +02:00
78 lines
2.9 KiB
HTML
78 lines
2.9 KiB
HTML
<html>
|
|
<head>
|
|
<title>Share</title>
|
|
<link rel="stylesheet" type="text/css" href="edit-style.css">
|
|
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
|
|
<script type="text/javascript" src="eventBridgeLoader.js"></script>
|
|
<script>
|
|
var paths = [], idCounter = 0;
|
|
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;
|
|
label.appendChild(img);
|
|
// 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 = data.share = true;
|
|
input.addEventListener('change', toggle);
|
|
div.class = "property checkbox";
|
|
div.appendChild(input);
|
|
div.appendChild(label);
|
|
document.getElementById("images").appendChild(div);
|
|
paths.push(data);
|
|
|
|
}
|
|
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'});
|
|
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.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([]);
|
|
};
|
|
</script>
|
|
<style type="text/css">
|
|
div.columns div:first-child { width: 300px; }
|
|
div.columns div { float: left; }
|
|
div.clear { clear: both; }
|
|
img { width: 400; }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="columns">
|
|
<div>
|
|
<div class="section-header">
|
|
<label>Snapshots sucessfully saved!</label>
|
|
</div>
|
|
<div class="sub-section-header">
|
|
<label>Would you like to share?</label>
|
|
</div>
|
|
<div class="sub-section-header">
|
|
<input type="button" id="share" value="SHARE IN FEED" onclick="shareSelected()"/>
|
|
</div>
|
|
<div class="sub-section-header">
|
|
<input type="button" class="red" id="close" value="DON'T SHARE" onclick="doNotShare()"/>
|
|
</div>
|
|
</div>
|
|
<div id="images" class="image-column"/>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</body>
|
|
</html>
|