mirror of
https://github.com/overte-org/overte.git
synced 2025-06-19 17:00:26 +02:00
fb696bcbac
using desktop mode and right clicking over the tablet + refresh) Remove postMessage in favour of emitWebEvent to communicate between the tabs and the main script.
135 lines
4.6 KiB
HTML
135 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script type="text/javascript" src="../../html/js/jquery-2.1.4.min.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="../../html/css/edit-style.css">
|
|
<style>
|
|
|
|
@font-face {
|
|
font-family: Font-Awesome;
|
|
src: url(../../../../resources/fonts/fontawesome-webfont.ttf),
|
|
url(../../../../fonts/fontawesome-webfont.ttf),
|
|
url(../../../../interface/resources/fonts/fontawesome-webfont.ttf);
|
|
}
|
|
iframe {
|
|
height:100%;
|
|
width:100%;
|
|
position: absolute;
|
|
}
|
|
#tabs {
|
|
background-color: black;
|
|
}
|
|
.tabButton {
|
|
background-color: #000;
|
|
color: white;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
padding: 12px;
|
|
margin: 0px;
|
|
vertical-align: middle;
|
|
display: inline-flex;
|
|
user-select: none;
|
|
}
|
|
.tabIcon {
|
|
width: 24px;
|
|
height: 24px;
|
|
padding-right: 8px;
|
|
}
|
|
.selected {
|
|
background-color: #404040
|
|
}
|
|
#undoButton {
|
|
float: right;
|
|
border: 2px solid white;
|
|
height: 32px;
|
|
width: 32px;
|
|
font-size: 15px;
|
|
margin-top: 10px;
|
|
transform: scale(-1, 1);
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body style="margin:0px;padding:0px;overflow:hidden">
|
|
<div id="tabs">
|
|
<div class="tabButton" onclick="selectTab(0)"><img class="tabIcon" src="../content/tabicons/palette-icon.svg"/>Palette</div>
|
|
<div class="tabButton" onclick="selectTab(1)"><img class="tabIcon" src="../content/tabicons/brush-icon.svg"/>Brushes</div>
|
|
<div class="tabButton" onclick="selectTab(2)"><img class="tabIcon" src="../content/tabicons/hand-icon.svg"/>Hand</div>
|
|
<input type="button" onclick="undo()" id="undoButton" style="font-family: Font-Awesome;" disabled class="grayButton glyph" value=""/>
|
|
</div>
|
|
<div id="content">
|
|
<iframe frameborder="0" lastState="window.location.search" onload="frameLoaded(this)" src="colorsTab.html" id="colorTab" seamless></iframe>
|
|
<iframe frameborder="0" lastState="window.location.search" onload="frameLoaded(this)" src="brushesTab.html" id="brushesTab" seamless style="display: none"></iframe>
|
|
<iframe frameborder="0" lastState="window.location.search" onload="frameLoaded(this)" src="chooseHandTab.html" id="chooseHandTab" seamless style="display: none"></iframe>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
<script type="text/javascript">
|
|
var currentTab = 0;
|
|
var iframesLoaded = 0;
|
|
function selectTab(tabIndex) {
|
|
var tabs = document.getElementById("tabs").children;
|
|
var contentPanels = document.getElementById("content").children;
|
|
tabs[currentTab].classList.remove("selected");
|
|
contentPanels[currentTab].style.display = "none";
|
|
contentPanels[tabIndex].style.display = "block";
|
|
tabs[tabIndex].classList.add("selected");
|
|
currentTab = tabIndex;
|
|
var changeTabEvent = {
|
|
"type" : "changeTab",
|
|
"currentTab": tabIndex
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(changeTabEvent));
|
|
}
|
|
|
|
function frameLoaded(iframe) {
|
|
iframesLoaded++;
|
|
if (iframesLoaded == $("#content").children().length) {
|
|
var appReadyEvent = {
|
|
"type" : "appReady",
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(appReadyEvent));
|
|
}
|
|
}
|
|
|
|
EventBridge.scriptEventReceived.connect(function (message) {
|
|
var event = JSON.parse(message);
|
|
if (event.type == "undoDisable") {
|
|
setUndoState(event.value);
|
|
}
|
|
if (event.type == "changeStrokeColor") {
|
|
document.getElementById("brushesTab").contentWindow.postMessage(message, "*");
|
|
}
|
|
});
|
|
|
|
//restore last opened tab
|
|
selectTab(JSON.parse(decodeURIComponent(window.location.search).substring(1)).currentTab);
|
|
|
|
//Undo related logic
|
|
function setUndoState(disabled) {
|
|
//document.getElementById("message").innerHTML = "message received!";
|
|
if (!disabled) {
|
|
document.getElementById("undoButton").removeAttribute("disabled");
|
|
} else {
|
|
document.getElementById("undoButton").setAttribute("disabled", disabled);
|
|
}
|
|
}
|
|
|
|
function undo() {
|
|
var undoEvent = {"type": "undo"};
|
|
EventBridge.emitWebEvent(JSON.stringify(undoEvent));
|
|
}
|
|
|
|
window.onbeforeunload = function (e) {
|
|
var reloadPageEvent = {
|
|
"type" : "reloadPage",
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(reloadPageEvent));
|
|
};
|
|
|
|
var undoState = JSON.parse(decodeURIComponent(window.location.search).substring(1));
|
|
setUndoState(undoState.undoDisable);
|
|
|
|
</script>
|
|
|