Add some tooltips.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3816 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2022-02-03 23:57:47 +00:00
parent 7733cb2604
commit 91339dc8a7
3 changed files with 66 additions and 11 deletions

View File

@ -15,12 +15,7 @@ var kErrorColor = "#dc322f";
var kStatusColor = "#fff";
window.addEventListener("keydown", function(event) {
if (event.keyCode == 69 && event.altKey) {
if (!editing()) {
edit();
event.preventDefault();
}
} else if (event.keyCode == 83 && (event.altKey || event.ctrlKey)) {
if (event.keyCode == 83 && (event.altKey || event.ctrlKey)) {
if (editing()) {
save();
event.preventDefault();
@ -74,11 +69,23 @@ function editing() {
return document.getElementById("editPane").style.display != 'none';
}
function toggleEdit() {
if (editing()) {
closeEditor();
} else {
edit();
}
}
function edit() {
if (editing()) {
return;
}
if (gSplit) {
gSplit.destroy();
gSplit = undefined;
}
gSplit = Split(['#editPane', '#viewPane'], {minSize: 0});
ensureLoaded([
@ -277,10 +284,6 @@ function load(path) {
function closeStats() {
document.getElementById("statsPane").style.display = 'none';
if (gSplit) {
gSplit.destroy();
gSplit = undefined;
}
}
function closeEditor() {
@ -822,6 +825,30 @@ window.addEventListener("load", function() {
window.addEventListener("message", message, false);
window.addEventListener("online", connectSocket);
document.getElementById("name").value = window.location.pathname;
for (let tag of document.getElementsByTagName('a')) {
if (tag.accessKey) {
tag.classList.add('tooltip_parent');
var tooltip = document.createElement('div');
tooltip.classList.add('tooltip');
if (tag.dataset.tip) {
var description = document.createElement('div');
description.innerText = tag.dataset.tip;
tooltip.appendChild(description);
}
var parts = tag.accessKeyLabel.split('+');
for (var i = 0; i < parts.length; i++)
{
var key = parts[i];
var kbd = document.createElement('kbd');
kbd.innerText = key;
tooltip.appendChild(kbd);
if (i < parts.length - 1) {
tooltip.appendChild(document.createTextNode('+'));
}
}
tag.appendChild(tooltip);
}
}
enableDragDrop();
connectSocket(window.location.pathname);
});

View File

@ -13,7 +13,7 @@
<span id="title">Tilde Friends</span>
<a href="/">home</a>
<a href="/~core/apps/">apps</a>
<a href="#" onclick="event.preventDefault(); edit()">edit</a>
<a accesskey="e" data-tip="Toggle the app editor." href="#" onclick="event.preventDefault(); toggleEdit()">edit</a>
<a href="#" onclick="event.preventDefault(); trace()">trace</a>
<a href="#" onclick="event.preventDefault(); stats()">stats</a>
<span id="status"></span>

View File

@ -180,3 +180,31 @@ a:active {
#files > li.dirty::after {
content: '*';
}
.tooltip {
position: absolute;
z-index: 1;
display: none;
border: 1px solid black;
padding: 4px;
color: black;
background: white;
}
.tooltip_parent:hover .tooltip {
display: inline-block;
}
kbd {
background-color: #eee;
border-radius: 3px;
border: 1px solid #b4b4b4;
box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
color: #333;
display: inline-block;
font-size: .85em;
font-weight: 700;
line-height: 1;
padding: 2px 4px;
white-space: nowrap;
}