1
mirror of https://invent.kde.org/network/falkon.git synced 2024-12-22 19:56:34 +01:00
falkonOfficial/src/lib/data/html/restore.html

323 lines
6.9 KiB
HTML

<html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>%TITLE%</title>
<style>
html {background: #dddddd;font-family: sans-serif;color: #525c66;}
html * {font-size: 100%;line-height: 1.6;}
#box {background: #ffffff;max-width:650px;min-width:400px;overflow:auto;margin: 25px auto 10px auto;padding: 10px 40px;text-align: %LEFT_STR%;direction: %DIRECTION%;}
hr {color: lightgray;width: 100%;}
img.warning {float: %LEFT_STR%;margin-%LEFT_STR%: -20px;margin-top: 15px;}
h1 {font-size: 150%;font-weight: bold;border-bottom: 1px solid #f4f4f4;margin-%LEFT_STR%: 48px;margin-%RIGHT_STR%: 50px;}
h2 {font-size: 100%;font-weight: normal;border-bottom: 1px solid #f4f4f4;margin-%LEFT_STR%: 48px;padding: 5px 0px 10px 2px;margin-%RIGHT_STR%: 50px;}
ul {font-size: 90%;padding-%LEFT_STR%: 48px;margin: 20px 0;max-width:600px;}
li {padding: 5px;}
#recovery-widget
{
margin: 20px 50px;
}
#recovery-widget .button
{
margin-top: 10px;
height: 25px;
}
#restore-session-button
{
font-weight: bold;
margin-left: 5px;
}
#listview
{
width: 500px;
border-spacing: 0;
border: 1px solid #c0c2c4;
cursor: default;
-webkit-user-select: none;
}
#listview tbody,
#listview thead
{
display: block;
}
#listview thead
{
height: 30px;
background: #eff0f1;
padding-left: 5px;
}
#listview th
{
line-height: 30px;
font-weight: normal;
vertical-align: middle;
}
#listview tbody
{
height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
#listview tbody
{
border-top: 1px solid #c0c2c4;
}
#listview tbody td
{
height: 26px;
width: 480px;
max-width: 480px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#listview tbody tr:hover
{
background-color: #baddff;
}
#listview tbody tr.selected
{
color: white;
background-color: #1e90ff;
}
#listview img
{
width: 16px;
height: 16px;
margin-right: 7px;
}
#listview input
{
margin-top: 6px;
margin-left: 8px;
margin-right: 10px;
}
#listview .tab input
{
margin-left: 15px;
}
#listview .window
{
font-weight: bold;
}
#listview span
{
vertical-align: top;
}
</style>
<script type="text/javascript">
var selectedRow = null;
function selectRow(row)
{
if (selectedRow) {
selectedRow.className = selectedRow.className.replace(/\bselected\b/, "");
}
row.className = row.className + " selected";
selectedRow = row;
}
function forEachInput(f)
{
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; ++i) {
f(inputs[i]);
}
}
function toggleWindow(e)
{
var win = e.getAttribute("data-window");
forEachInput(function(input) {
if (input.getAttribute("data-window") == win) {
input.checked = e.checked;
}
});
}
function toggleTab(e)
{
var win = e.getAttribute("data-window");
var winElement = null;
var checked = 0;
var total = 0;
forEachInput(function(input) {
if (input.getAttribute("data-window") != win) {
return;
}
if (!input.hasAttribute("data-tab")) {
winElement = input;
return;
}
if (input.checked) {
++checked;
}
++total;
});
if (checked == total) {
winElement.checked = true;
winElement.indeterminate = false;
} else if (checked > 0) {
winElement.indeterminate = true;
} else {
winElement.checked = false;
winElement.indeterminate = false;
}
}
function startNewSession()
{
document.getElementById("start-new-session-button").disabled = true;
external.recovery.startNewSession();
}
function restoreSession()
{
document.getElementById("restore-session-button").disabled = true;
var excludeWin = [];
var excludeTab = [];
forEachInput(function(input) {
if (input.checked || input.indeterminate || !input.hasAttribute("data-tab")) {
return;
}
excludeWin.unshift(input.getAttribute("data-window"));
excludeTab.unshift(input.getAttribute("data-tab"));
});
external.recovery.restoreSession(excludeWin, excludeTab);
}
function addWindow(winId)
{
var tr = document.createElement("tr");
tr.className = "window";
tr.onclick = function() { selectRow(tr); };
var td = document.createElement("td");
var input = document.createElement("input");
input.type = "checkbox";
input.checked = true;
input.setAttribute("data-window", winId);
input.onclick = function() { toggleWindow(input); };
var span = document.createElement("span");
span.innerText = "%WINDOW% " + (winId + 1);
tr.appendChild(td);
td.appendChild(input);
td.appendChild(span);
document.getElementById("recovery-items").appendChild(tr);
}
function addTab(winId, tab)
{
var tr = document.createElement("tr");
tr.className = "tab";
tr.title = tab.url;
tr.onclick = function() { selectRow(tr); };
var td = document.createElement("td");
var input = document.createElement("input");
input.type = "checkbox";
input.checked = true;
input.setAttribute("data-window", winId);
input.setAttribute("data-tab", tab.tab);
input.onclick = function() { toggleTab(input); };
var img = document.createElement("img");
img.src = tab.icon;
var span = document.createElement("span");
span.innerText = tab.title;
if (tab.pinned) {
span.innerText = "🖈 " + span.innerText;
}
if (tab.current) {
span.style.fontStyle = 'italic';
}
tr.appendChild(td);
td.appendChild(input);
td.appendChild(img);
td.appendChild(span);
document.getElementById("recovery-items").appendChild(tr);
}
function init()
{
var data = external.recovery.restoreData;
for (var i = 0; i < data.length; ++i) {
var win = data[i];
addWindow(win.window);
for (var j = 0; j < win.tabs.length; ++j) {
var tab = win.tabs[j];
addTab(win.window, tab);
}
}
}
</script>
</head>
<body>
<div id="box">
<img class="warning" src="%IMAGE%" width=45>
<h1>%OOPS%</h1>
<h2>%APOLOGIZE%</h2>
<ul>
<li>%TRY-REMOVING%</li>
<li>%START-NEW%</li>
</ul>
<div id="recovery-widget">
<table id="listview">
<thead>
<tr>
<th>%WINDOWS-AND-TABS%</th>
</tr>
</thead>
<tbody id="recovery-items">
</tbody>
</table>
<input class="button" type="button" id="start-new-session-button" value="%BUTTON-START-NEW%" onclick="startNewSession();">
<input class="button" type="button" id="restore-session-button" value=" %BUTTON-RESTORE% " onclick="restoreSession();">
</div>
</div>
</body>
<script type="text/javascript">
// Initialize
if (window.external) {
init();
} else {
document.addEventListener("_qupzilla_external_created", init);
}
</script>
</html>