From 905f3df565c2d6e76a56e38f4275b78dbe8c74d8 Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Sat, 10 Dec 2016 21:31:43 +0100 Subject: Add hint that the control bar can be moved The control bar can be dragged to the other side, this isn't obvious however. This adds a hint on the opposite side in the form of a silhouette of the control bar. --- app/styles/base.css | 23 +++++++++++++++++++++ app/ui.js | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++ app/webutil.js | 50 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 132 insertions(+) diff --git a/app/styles/base.css b/app/styles/base.css index 8c6c810..34fe320 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -565,6 +565,29 @@ input[type=button]:active, select:active { width: 80px; } +/* ---------------------------------------- + * Silhouettes + * ---------------------------------------- + */ + +/* Outline that shows the form of a target element */ +.noVNC_silhouette { + /* Two colors to make it easier to see no matter the background */ + box-shadow: 0 4px 5px white, 0 -4px 5px skyblue; + transition: visibility 0s linear 0.5s, opacity 0.5s ease-in-out; + position: fixed; + visibility: hidden; + opacity: 0; +} +.noVNC_silhouette.noVNC_active { + visibility: visible; + opacity: 1; + transition-delay: 0s; +} +.noVNC_silhouette.noVNC_flipped { + transform: rotate(180deg); +} + /* ---------------------------------------- * Status Dialog * ---------------------------------------- diff --git a/app/ui.js b/app/ui.js index 4faba53..0c2d2fe 100644 --- a/app/ui.js +++ b/app/ui.js @@ -608,15 +608,70 @@ var UI; if (anchor.classList.contains("noVNC_right")) { WebUtil.writeSetting('controlbar_pos', 'left'); anchor.classList.remove("noVNC_right"); + + UI.updateControlBarHint('right'); } else { WebUtil.writeSetting('controlbar_pos', 'right'); anchor.classList.add("noVNC_right"); + + UI.updateControlBarHint('left'); } // Consider this a movement of the handle UI.controlbarDrag = true; }, + displayControlBarHint: function (show) { + var handleHint = WebUtil.getSilhouette("noVNC_control_bar_handle"); + var controlBarHint = WebUtil.getSilhouette("noVNC_control_bar"); + + if (!show) { + if (handleHint === null || controlBarHint === null) return; + + if (handleHint.classList.contains("noVNC_active")) { + handleHint.classList.remove("noVNC_active"); + } + if (controlBarHint.classList.contains("noVNC_active")) { + controlBarHint.classList.remove("noVNC_active"); + } + return; + } + + if (handleHint === null || controlBarHint === null) { + var handle = + document.getElementById('noVNC_control_bar_handle'); + var controlBar = document.getElementById('noVNC_control_bar'); + + handleHint = WebUtil.createSilhouette(handle); + controlBarHint = WebUtil.createSilhouette(controlBar); + handleHint.classList.add("noVNC_flipped"); + controlBarHint.classList.add("noVNC_flipped"); + } + + UI.updateControlBarHint(); + + handleHint.classList.add("noVNC_active"); + controlBarHint.classList.add("noVNC_active"); + }, + + updateControlBarHint: function (hintSide) { + var handle = document.getElementById('noVNC_control_bar_handle'); + var controlBar = document.getElementById('noVNC_control_bar'); + if (hintSide === undefined) { + // Don't change side if no side was specified + if (WebUtil.readSetting('controlbar_pos') === 'left') { + hintSide = 'right'; + } else { + hintSide = 'left'; + } + } else { + WebUtil.flipSilhouette(handle); + WebUtil.flipSilhouette(controlBar); + } + WebUtil.updateSilhouette(handle, hintSide); + WebUtil.updateSilhouette(controlBar, hintSide); + }, + dragControlbarHandle: function (e) { if (!UI.controlbarGrabbed) return; @@ -690,6 +745,7 @@ var UI; // The transform needs coordinates that are relative to the parent var parentRelativeY = newY - controlbarBounds.top; handle.style.transform = "translateY(" + parentRelativeY + "px)"; + UI.updateControlBarHint (); }, updateControlbarHandle: function () { @@ -712,6 +768,7 @@ var UI; UI.activateControlbar(); } UI.controlbarGrabbed = false; + UI.displayControlBarHint(false); }, controlbarHandleMouseDown: function(e) { @@ -726,6 +783,8 @@ var UI; UI.controlbarGrabbed = true; UI.controlbarDrag = false; + UI.displayControlBarHint(true); + UI.controlbarMouseDownClientY = ptr.clientY; UI.controlbarMouseDownOffsetY = ptr.clientY - bounds.top; e.preventDefault(); diff --git a/app/webutil.js b/app/webutil.js index 90a0a53..99271af 100644 --- a/app/webutil.js +++ b/app/webutil.js @@ -371,6 +371,56 @@ WebUtil.releaseCapture = function () { } }; +// Seperate elements that outline the form of a target element + +WebUtil.createSilhouette = function (target) { + var targetForm = target.getBoundingClientRect(); + var targetStyle = window.getComputedStyle(target); + + var silhouette = document.createElement("div"); + silhouette.id = target.id + "_silhouette"; + silhouette.style.borderRadius = targetStyle.borderRadius; + silhouette.style.width = targetForm.width + "px"; + silhouette.style.height = targetForm.height + "px"; + silhouette.classList.add("noVNC_silhouette"); + + document.body.appendChild(silhouette); + + return silhouette; +}; + +WebUtil.getSilhouette = function (targetId) { + return document.getElementById(targetId + "_silhouette"); +}; + +WebUtil.updateSilhouette = function (target, alignSide) { + var silhouette = WebUtil.getSilhouette(target.id); + + if (silhouette === null) return; + + var form = target.getBoundingClientRect(); + + if (alignSide === 'right') { + silhouette.style.right = form.left + "px"; + silhouette.style.left = "auto"; + } else if (alignSide === 'left') { + silhouette.style.left = window.innerWidth - form.right + "px"; + silhouette.style.right = "auto"; + } + silhouette.style.top = form.top + "px"; +}; + +WebUtil.flipSilhouette = function (target) { + var silhouette = WebUtil.getSilhouette(target.id); + + if (silhouette === null) return; + + if (silhouette.classList.contains("noVNC_flipped")) { + silhouette.classList.remove("noVNC_flipped"); + } else { + silhouette.classList.add("noVNC_flipped"); + } +}; // Dynamically load scripts without using document.write() // Reference: http://unixpapa.com/js/dyna.html -- cgit v1.2.1