Add some tooltips.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3816 ed5197a5-7fde-0310-b194-c3ffbd925b24

core/client.js

@@ -15,12 +15,7 @@ var kErrorColor = "#dc322f";
 var kStatusColor = "#fff";
 
 window.addEventListener("keydown", function(event) {
-	if (event.keyCode == 69 && event.altKey) {
+	if (event.keyCode == 83 && (event.altKey || event.ctrlKey)) {
-		if (!editing()) {
-			edit();
-			event.preventDefault();
-		}
-	} else 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);
 });

core/index.html

@@ -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>

core/style.css

@@ -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;
+}