gallery: add hotkey list button

copyparty/web/baguettebox.js

@@ -22,7 +22,7 @@ window.baguetteBox = (function () {
             afterHide: null,
             onChange: null,
         },
-        overlay, slider, btnPrev, btnNext, btnVmode, btnClose,
+        overlay, slider, btnPrev, btnNext, btnHelp, btnVmode, btnClose,
         currentGallery = [],
         currentIndex = 0,
         isOverlayVisible = false,
@@ -174,8 +174,9 @@ window.baguetteBox = (function () {
                 '<button id="bbox-prev" class="bbox-btn" type="button" aria-label="Previous">&lt;</button>' +
                 '<button id="bbox-next" class="bbox-btn" type="button" aria-label="Next">&gt;</button>' +
                 '<div id="bbox-btns">' +
+                '<button id="bbox-help" type="button">?</button>' +
                 '<button id="bbox-vmode" type="button" tt="a"></button>' +
-                '<button id="bbox-close" type="button" aria-label="Close">&times;</button>' +
+                '<button id="bbox-close" type="button" aria-label="Close">X</button>' +
                 '</div></div>'
             );
             overlay = ctr.firstChild;
@@ -185,11 +186,45 @@ window.baguetteBox = (function () {
         slider = ebi('bbox-slider');
         btnPrev = ebi('bbox-prev');
         btnNext = ebi('bbox-next');
+        btnHelp = ebi('bbox-help');
         btnVmode = ebi('bbox-vmode');
         btnClose = ebi('bbox-close');
         bindEvents();
     }
 
+    function halp() {
+        if (ebi('bbox-halp'))
+            return;
+
+        var list = [
+            ['<b># hotkey</b>', '<b># operation</b>'],
+            ['escape', 'close'],
+            ['left, J', 'previous file'],
+            ['right, L', 'next file'],
+            ['home', 'first file'],
+            ['end', 'last file'],
+            ['space, P, K', 'video: play / pause'],
+            ['U', 'video: seek 10sec back'],
+            ['P', 'video: seek 10sec ahead'],
+            ['M', 'video: toggle mute'],
+            ['R', 'video: toggle loop'],
+            ['C', 'video: toggle auto-next'],
+            ['F', 'video: toggle fullscreen'],
+        ],
+            d = mknod('table'),
+            html = ['<tbody>'];
+
+        for (var a = 0; a < list.length; a++)
+            html.push('<tr><td>' + list[a][0] + '</td><td>' + list[a][1] + '</td></tr>');
+
+        d.innerHTML = html.join('\n') + '</tbody>';
+        d.setAttribute('id', 'bbox-halp');
+        d.onclick = function () {
+            overlay.removeChild(d);
+        };
+        overlay.appendChild(d);
+    }
+
     function keyDownHandler(e) {
         if (e.ctrlKey || e.altKey || e.metaKey || e.isComposing)
             return;
@@ -310,6 +345,7 @@ window.baguetteBox = (function () {
         bind(btnNext, 'click', showNextImage);
         bind(btnClose, 'click', hideOverlay);
         bind(btnVmode, 'click', tglVmode);
+        bind(btnHelp, 'click', halp);
         bind(slider, 'contextmenu', contextmenuHandler);
         bind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent);
         bind(overlay, 'touchmove', touchmoveHandler, passiveEvent);
@@ -323,6 +359,7 @@ window.baguetteBox = (function () {
         unbind(btnNext, 'click', showNextImage);
         unbind(btnClose, 'click', hideOverlay);
         unbind(btnVmode, 'click', tglVmode);
+        unbind(btnHelp, 'click', halp);
         unbind(slider, 'contextmenu', contextmenuHandler);
         unbind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent);
         unbind(overlay, 'touchmove', touchmoveHandler, passiveEvent);
@@ -435,6 +472,10 @@ window.baguetteBox = (function () {
             if (options.bodyClass && document.body.classList)
                 document.body.classList.remove(options.bodyClass);
 
+            var h = ebi('bbox-halp');
+            if (h)
+                h.parentNode.removeChild(h);
+
             if (options.afterHide)
                 options.afterHide();
 

copyparty/web/browser.css

@@ -1249,8 +1249,7 @@ html.light #bbox-overlay figcaption a {
 .bbox-btn {
 	position: fixed;
 }
-.bbox-btn,
+#bbox-overlay button {
-#bbox-btns>button {
 	cursor: pointer;
 	outline: none;
 	padding: 0 .3em;
@@ -1258,20 +1257,18 @@ html.light #bbox-overlay figcaption a {
 	border: 0;
 	border-radius: 15%;
 	background: rgba(50, 50, 50, 0.5);
-	color: #ddd;
+	color: rgba(255,255,255,0.7);
-	font: 1.6em sans-serif;
 	transition: background-color .3s ease;
-	line-height: 1em;
+	transition: color .3s ease;
+	font-size: 1.4em;
+	line-height: 1.4em;
 	vertical-align: top;
 }
-.bbox-btn:focus,
+#bbox-overlay button:focus,
-.bbox-btn:hover {
+#bbox-overlay button:hover {
+	color: rgba(255,255,255,0.9);
 	background: rgba(50, 50, 50, 0.9);
 }
-button#bbox-vmode {
-	font-size: 1em;
-	line-height: 1.6em;
-}
 #bbox-next {
 	right: 1%;
 }
@@ -1283,6 +1280,21 @@ button#bbox-vmode {
 	right: 2%;
 	position: fixed;
 }
+#bbox-halp {
+	color: #fff;
+	background: #333;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 20;
+	padding: .4em;
+}
+#bbox-halp td {
+	padding: .2em .5em;
+}
+#bbox-halp td:first-child {
+	text-align: right;
+}
 .bbox-spinner {
 	width: 40px;
 	height: 40px;