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..166b9920 100644 --- a/lib/web_console/templates/console.js.erb +++ b/lib/web_console/templates/console.js.erb @@ -374,6 +374,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 = this.getCookie('console_minimized') + if(consoleMinimized === null) { + this.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 +418,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'; + _this.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 +461,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; @@ -493,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. 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