From e04ed75994cccef8e76d46c4706bb22edb35da7d Mon Sep 17 00:00:00 2001 From: Alejandro Gallardo Escobar Date: Tue, 24 May 2016 16:21:56 +0200 Subject: [PATCH] Added a function to easily made a control which only appear on mouse move --- pandora_console/include/javascript/pandora.js | 53 +++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/pandora_console/include/javascript/pandora.js b/pandora_console/include/javascript/pandora.js index 0835c60095..fe78486a82 100644 --- a/pandora_console/include/javascript/pandora.js +++ b/pandora_console/include/javascript/pandora.js @@ -1008,3 +1008,56 @@ function addTinyMCE(elementID) { if (elementID.length > 0 && !isEmptyObject(tinyMCE)) tinyMCE.EditorManager.execCommand('mceAddControl', true, elementID); } + +/** + * Auto hides an element and shows it + * when the user moves the mouse over the body. + * + * @param element [Element object] Element object to hide. + * @param hideTime [integer] ms of the hide timeout. + * + * @retval void + */ +var autoHideElement = function (element, hideTime) { + hideTime = hideTime || 3000; + var timerRef; + var isHoverElement = false; + + var showElement = function () { + $(element).show(); + } + var hideElement = function () { + $(element).fadeOut(); + } + var startHideTimeout = function (msec) { + showElement(); + timerRef = setTimeout(hideElement, msec); + } + var cancelHideTimeout = function () { + clearTimeout(timerRef); + timerRef = null; + } + + var handleBodyMove = function (event) { + if (isHoverElement) return; + if (timerRef) cancelHideTimeout(); + startHideTimeout(hideTime); + } + var handleElementEnter = function (event) { + isHoverElement = true; + cancelHideTimeout(); + } + var handleElementLeave = function (event) { + isHoverElement = false; + startHideTimeout(hideTime); + } + + // Bind event handlers + $(element) + .mouseenter(handleElementEnter) + .mouseleave(handleElementLeave); + $('body').mousemove(handleBodyMove); + + // Start hide + startHideTimeout(hideTime); +}