From 1dca15eb2a10de762fd3b26c5c8921bd422810ae Mon Sep 17 00:00:00 2001 From: Ben-Owen-3183 <66678740+Ben-Owen-3183@users.noreply.github.com> Date: Thu, 3 Aug 2023 08:46:53 +0100 Subject: [PATCH 1/4] add minimizable console --- .../templates/_inner_console_markup.html.erb | 1 + lib/web_console/templates/console.js.erb | 52 ++++++++++++++++++- lib/web_console/templates/style.css.erb | 28 +++++++++- 3 files changed, 79 insertions(+), 2 deletions(-) diff --git a/lib/web_console/templates/_inner_console_markup.html.erb b/lib/web_console/templates/_inner_console_markup.html.erb index 51700ea9..0b3af79f 100644 --- a/lib/web_console/templates/_inner_console_markup.html.erb +++ b/lib/web_console/templates/_inner_console_markup.html.erb @@ -1,6 +1,7 @@
+
-
x
diff --git a/lib/web_console/templates/console.js.erb b/lib/web_console/templates/console.js.erb index 6b8021bc..60da3555 100644 --- a/lib/web_console/templates/console.js.erb +++ b/lib/web_console/templates/console.js.erb @@ -1,3 +1,29 @@ +function getCookie(name) { + var cookieValue = null; + var cookies = document.cookie.split(";"); + + for (var i = 0; i < cookies.length; i++) { + var cookie = cookies[i].trim(); + if (cookie.startsWith(name + "=")) { + cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); + break; + } + } + return cookieValue; +} + +function setCookie(name, value, daysToExpire) { + var cookieString = name + "=" + encodeURIComponent(value); + + if (daysToExpire) { + var expirationDate = new Date(); + expirationDate.setDate(expirationDate.getDate() + daysToExpire); + cookieString += "; expires=" + expirationDate.toUTCString(); + } + document.cookie = cookieString; +} + + /** * Constructor for command storage. * It uses localStorage if available. Otherwise fallback to normal JS array. @@ -8,7 +34,6 @@ function CommandStorage() { var hasLocalStorage = typeof window.localStorage !== 'undefined'; var STORAGE_KEY = "web_console_previous_commands"; var MAX_STORAGE = 100; - if (hasLocalStorage) { this.previousCommands = JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; previousCommandOffset = this.previousCommands.length; @@ -374,6 +399,19 @@ REPLConsole.prototype.install = function(container) { addClass(container.getElementsByClassName('button'), 'border-box'); addClass(consoleActions, 'pos-fixed pos-right'); + var minimizedConsole = document.createElement('div') + minimizedConsole.className = 'minimized-console'; + minimizedConsole.innerText = '' + document.body.appendChild(minimizedConsole); + + var consoleMinimized = getCookie('console_minimized') + if(consoleMinimized === null) { + setCookie('console_minimized', 'false', 1); + } + + container.style.display = consoleMinimized === 'true' ? 'none' : 'block'; + minimizedConsole.style.display = consoleMinimized === 'true' ? 'block' : 'none'; + // Make the console resizable. function resizeContainer(ev) { var startY = ev.clientY; @@ -405,6 +443,17 @@ REPLConsole.prototype.install = function(container) { container.parentNode.removeChild(container); } + function minimizeContainer(ev) { + var isMinimized = container.style.display === 'none' + container.style.display = isMinimized ? 'block' : 'none'; + minimizedConsole.style.display = isMinimized ? 'none' : 'block'; + setCookie('console_minimized', isMinimized ? 'false' : 'true', 1); + } + + minimizedConsole.addEventListener('click', function(ev) { + minimizeContainer(ev); + }); + var shifted = false; function shiftConsoleActions() { if (consoleOuter.scrollHeight > consoleOuter.clientHeight) { @@ -437,6 +486,7 @@ REPLConsole.prototype.install = function(container) { findChild(container, 'resizer').addEventListener('mousedown', resizeContainer); findChild(consoleActions, 'close-button').addEventListener('click', closeContainer); + findChild(consoleActions, 'minimize-button').addEventListener('click', minimizeContainer); observer.observe(consoleOuter, { childList: true, subtree: true }); REPLConsole.currentSession = this; diff --git a/lib/web_console/templates/style.css.erb b/lib/web_console/templates/style.css.erb index 4e80780f..bff82f49 100644 --- a/lib/web_console/templates/style.css.erb +++ b/lib/web_console/templates/style.css.erb @@ -36,7 +36,7 @@ padding: 0; margin: 0; background: none repeat scroll 0% 0% #333; - z-index: 9999; + z-index: 2147483647; } .console .console-outer { @@ -141,6 +141,10 @@ background: #966; } +.console .button.minimize-button:hover { + background: #966; +} + .console .clipboard { height: 0px; padding: 0px; @@ -180,3 +184,25 @@ .console.full-screen .close-button { display: none; } + +.console.full-screen .minimize-button { + display: none; +} + +.minimized-console { + position: fixed; + right: 50%; + display: none; + bottom: 0px; + background-color: #333; + border-top-right-radius: 2px; + border-top-left-radius: 2px; + padding: 1px 10px; + font-size: 11px; + color: #fff; + z-index: 2147483647; +} + +.minimized-console:hover { + background: #966; +} \ No newline at end of file From 158cfba4b17a7be2c5e885e9a9ba033d54e88694 Mon Sep 17 00:00:00 2001 From: Ben-Owen-3183 <66678740+Ben-Owen-3183@users.noreply.github.com> Date: Thu, 3 Aug 2023 08:48:59 +0100 Subject: [PATCH 2/4] added white space back --- lib/web_console/templates/console.js.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/web_console/templates/console.js.erb b/lib/web_console/templates/console.js.erb index 60da3555..cd6fc3a3 100644 --- a/lib/web_console/templates/console.js.erb +++ b/lib/web_console/templates/console.js.erb @@ -33,7 +33,7 @@ function CommandStorage() { var previousCommandOffset = 0; var hasLocalStorage = typeof window.localStorage !== 'undefined'; var STORAGE_KEY = "web_console_previous_commands"; - var MAX_STORAGE = 100; + if (hasLocalStorage) { this.previousCommands = JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; previousCommandOffset = this.previousCommands.length; From 420750fb9248602ac41357c9eeacf022a517ff49 Mon Sep 17 00:00:00 2001 From: Ben-Owen-3183 <66678740+Ben-Owen-3183@users.noreply.github.com> Date: Tue, 8 Aug 2023 17:36:59 +0100 Subject: [PATCH 3/4] corrected accidental deletion --- lib/web_console/templates/console.js.erb | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/web_console/templates/console.js.erb b/lib/web_console/templates/console.js.erb index cd6fc3a3..f5eb8875 100644 --- a/lib/web_console/templates/console.js.erb +++ b/lib/web_console/templates/console.js.erb @@ -33,6 +33,7 @@ function CommandStorage() { var previousCommandOffset = 0; var hasLocalStorage = typeof window.localStorage !== 'undefined'; var STORAGE_KEY = "web_console_previous_commands"; + var MAX_STORAGE = 100; if (hasLocalStorage) { this.previousCommands = JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; From b7cdcc5c6b9db36d06f4506f07c316cf17aa925d Mon Sep 17 00:00:00 2001 From: Ben-Owen-3183 <66678740+Ben-Owen-3183@users.noreply.github.com> Date: Wed, 9 Aug 2023 20:16:26 +0100 Subject: [PATCH 4/4] moved get and set cookie methods --- lib/web_console/templates/console.js.erb | 63 +++++++++++++----------- 1 file changed, 34 insertions(+), 29 deletions(-) diff --git a/lib/web_console/templates/console.js.erb b/lib/web_console/templates/console.js.erb index f5eb8875..166b9920 100644 --- a/lib/web_console/templates/console.js.erb +++ b/lib/web_console/templates/console.js.erb @@ -1,29 +1,3 @@ -function getCookie(name) { - var cookieValue = null; - var cookies = document.cookie.split(";"); - - for (var i = 0; i < cookies.length; i++) { - var cookie = cookies[i].trim(); - if (cookie.startsWith(name + "=")) { - cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); - break; - } - } - return cookieValue; -} - -function setCookie(name, value, daysToExpire) { - var cookieString = name + "=" + encodeURIComponent(value); - - if (daysToExpire) { - var expirationDate = new Date(); - expirationDate.setDate(expirationDate.getDate() + daysToExpire); - cookieString += "; expires=" + expirationDate.toUTCString(); - } - document.cookie = cookieString; -} - - /** * Constructor for command storage. * It uses localStorage if available. Otherwise fallback to normal JS array. @@ -405,9 +379,9 @@ REPLConsole.prototype.install = function(container) { minimizedConsole.innerText = '' document.body.appendChild(minimizedConsole); - var consoleMinimized = getCookie('console_minimized') + var consoleMinimized = this.getCookie('console_minimized') if(consoleMinimized === null) { - setCookie('console_minimized', 'false', 1); + this.setCookie('console_minimized', 'false', 1); } container.style.display = consoleMinimized === 'true' ? 'none' : 'block'; @@ -448,7 +422,7 @@ REPLConsole.prototype.install = function(container) { var isMinimized = container.style.display === 'none' container.style.display = isMinimized ? 'block' : 'none'; minimizedConsole.style.display = isMinimized ? 'none' : 'block'; - setCookie('console_minimized', isMinimized ? 'false' : 'true', 1); + _this.setCookie('console_minimized', isMinimized ? 'false' : 'true', 1); } minimizedConsole.addEventListener('click', function(ev) { @@ -544,6 +518,37 @@ REPLConsole.prototype.newPromptBox = function() { this.scrollToBottom(); }; +/** + * Finds the value of cookie with the given name. Returns null if not found. + */ +REPLConsole.prototype.getCookie = function(name) { + var cookieValue = null; + var cookies = document.cookie.split(";"); + + for (var i = 0; i < cookies.length; i++) { + var cookie = cookies[i].trim(); + if (cookie.startsWith(name + "=")) { + cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); + break; + } + } + return cookieValue; +} + +/** + * Sets a cookie with the given name and value. If daysToExpire is not + */ +REPLConsole.prototype.setCookie = function(name, value, daysToExpire) { + var cookieString = name + "=" + encodeURIComponent(value); + + if (daysToExpire) { + var expirationDate = new Date(); + expirationDate.setDate(expirationDate.getDate() + daysToExpire); + cookieString += "; expires=" + expirationDate.toUTCString(); + } + document.cookie = cookieString; +} + /** * Remove the caret from the prompt box, * mainly before adding a new prompt box.