Merge pull request #204 from schrej/feature/terminal-only-scroll-at-b…

…ottom Only auto-scroll terminal on new output when at the bottom
pterodactyl · Dec 11, 2016 · c3abb32 · c3abb32
2 parents 0472706 + d844c41
commit c3abb32
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 42 deletions.
diff --git a/public/js/jquery.terminal-0.11.23.min.js b/public/js/jquery.terminal-0.11.23.min.js
diff --git a/public/js/jquery.terminal-0.11.6.min.js b/public/js/jquery.terminal-0.11.6.min.js
diff --git a/public/themes/default/css/pterodactyl.css b/public/themes/default/css/pterodactyl.css
@@ -286,6 +286,24 @@ li.btn.btn-default.pill:active,li.btn.btn-default.pill:focus,li.btn.btn-default.
     opacity: 1;
 }
 
+#consoleNotify {
+    position: absolute;
+    bottom: 0;
+    margin-right: 17px;
+    margin-bottom: 2px;
+    z-index: 10;
+    background: white;
+    right: 0;
+    opacity: .6;
+    padding: 5px 7px;
+    border-radius: 5px;
+    cursor: pointer; 
+}
+
+#consoleNotify:hover {
+    opacity: .9;
+}
+
 .hasFileHover {
     border: 2px dashed #0087F7;
     border-radius: 5px;

diff --git a/resources/views/server/index.blade.php b/resources/views/server/index.blade.php
@@ -27,7 +27,7 @@
     @parent
     {!! Theme::css('css/jquery.terminal.css') !!}
     {!! Theme::js('js/jquery.mousewheel-min.js') !!}
-    {!! Theme::js('js/jquery.terminal-0.11.6.min.js') !!}
+    {!! Theme::js('js/jquery.terminal-0.11.23.min.js') !!}
     {!! Theme::js('js/unix_formatting.js') !!}
     {!! Theme::js('js/vendor/chartjs/chart.min.js') !!}
     {!! Theme::js('js/vendor/jquery/jquery-dateFormat.min.js') !!}
@@ -50,6 +50,9 @@
                             <div class="alert alert-info hidden" id="consoleThrottled">
                                 The console is currently being throttled due to the speed at which data is being sent. Messages are being queued and will appear as the queue is worked through.
                             </div>
+                            <div id="consoleNotify" class="hidden">
+                                <i class="fa fa-bell"></i>
+                            </div>
                             <div id="terminal">
                             </div>
                         </div>
@@ -193,10 +196,30 @@
         height: 400,
         exit: false,
         prompt: '{{ $server->username }}:~$ ',
+        scrollOnEcho: false,
+        scrollBottomOffset: 5,
         onBlur: function (terminal) {
             return false;
         }
     });
+    
+    const $consoleNotify = $('#consoleNotify');
+    $consoleNotify.on('click', function () {
+        terminal.scroll_to_bottom();
+        $consoleNotify.removeClass('hidden');
+    });
+    
+    terminal.on('scroll', function() {
+        if (terminal.is_bottom()) {
+            $consoleNotify.addClass('hidden');
+        }
+    })
+    
+    function terminalNotifyOutput() {
+        if (!terminal.is_bottom()) {
+            $consoleNotify.removeClass('hidden');
+        }
+    }
 
     var ctc = $('#chart_cpu');
     var timeLabels = [];
@@ -326,10 +349,13 @@ function pushOutputQueue()
             $('#consoleThrottled').addClass('hidden');
         }
 
-        for (var i = 0; i < {{ env('CONSOLE_PUSH_COUNT', 10) }} && outputQueue.length > 0; i++)
-        {
-            terminal.echo(outputQueue[0]);
-            outputQueue.shift();
+        if (outputQueue.length > 0) {
+          for (var i = 0; i < {{ env('CONSOLE_PUSH_COUNT', 10) }} && outputQueue.length > 0; i++)
+          {
+              terminal.echo(outputQueue[0]);
+              outputQueue.shift();
+          }
+          terminalNotifyOutput();
         }
     }
 
@@ -347,8 +373,10 @@ function pushOutputQueue()
                 timeout: 10000
             }).done(function(data) {
                 terminal.echo(data);
+                terminalNotifyOutput();
             }).fail(function() {
                 terminal.error('Unable to load initial server log, try reloading the page.');
+                terminalNotifyOutput();
             });
         }
         updateServerPowerControls(data.status);