Browse Source

HUE-1314 [shell] Prompt line is not wide enough

Introduced input auto-resize to available space
Enrico Berti 12 năm trước cách đây
mục cha
commit
f6d480d
1 tập tin đã thay đổi với 229 bổ sung215 xóa
  1. 229 215
      apps/shell/src/shell/templates/index.mako

+ 229 - 215
apps/shell/src/shell/templates/index.mako

@@ -39,40 +39,40 @@ ${ commonheader(None, "shell", user, "100px") | n,unicode }
 <div class="container-fluid">
   % if shell_id:
     <style type="text/css" media="screen">
-        body {
-            background-color: #333;
-        }
+      body {
+        background-color: #333;
+      }
 
-        .shell {
-            background-color: #333;
-            color: #EEE;
-            font-family: monospace;
-            font-size: 14px;
-        }
+      .shell {
+        background-color: #333;
+        color: #EEE;
+        font-family: monospace;
+        font-size: 14px;
+      }
 
-        #shellOutput {
-            padding: 0;
-            width: 100%;
-        }
+      #shellOutput {
+        padding: 0;
+        width: 100%;
+      }
 
-        #shellInput {
-            border: none;
-            outline: none;
-            margin: 0;
-            margin-top: 0px;
-            margin-bottom: 10px;
-            padding: 0;
-            padding-top: 8px;
-            box-shadow: none;
-            width: 400px;
-            background-color: #333333;
-            color: #EEE;
-        }
+      #shellInput {
+        border: none;
+        outline: none;
+        margin: 0;
+        margin-top: 0px;
+        margin-bottom: 10px;
+        padding: 0;
+        padding-top: 8px;
+        box-shadow: none;
+        width: 400px;
+        background-color: #333333;
+        color: #EEE;
+      }
 
-        #shellInput:focus {
-            box-shadow: none;
-            border: 0;
-        }
+      #shellInput:focus {
+        box-shadow: none;
+        border: none;
+      }
     </style>
     <div id="shellOutput" class="shell">
         <span id="shellContent"></span>
@@ -93,211 +93,225 @@ ${ commonheader(None, "shell", user, "100px") | n,unicode }
 
 <script type="text/javascript" charset="utf-8">
     $(document).ready(function(){
-        $(".disabled").tooltip({
-          title: '${_("The shell is not present on the Hue host.")}',
-          placement: 'bottom'
-        });
+      $(".disabled").tooltip({
+        title: '${_("The shell is not present on the Hue host.")}',
+        placement: 'bottom'
+      });
 
-        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
-        for (var i=0;i<hashes.length;i++){
-            if (hashes[i].indexOf("keyName")>-1){
-                $("."+hashes[i].split("=")[1]).addClass("selected");
-            }
+      var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+      for (var i = 0; i < hashes.length; i++) {
+        if (hashes[i].indexOf("keyName") > -1) {
+          $("." + hashes[i].split("=")[1]).addClass("selected");
+        }
+      }
+
+      var hueInstanceID = function () {
+        var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
+        var lastIndex = chars.length - 1;
+        var stringLength = 128;
+        var randomString = "";
+        for (var i = 0; i < stringLength; i++) {
+          var randomIndex = Math.floor(Math.random() * lastIndex);
+          randomString += chars.substring(randomIndex, randomIndex + 1);
         }
+        return randomString;
+      }();
 
-        var hueInstanceID = function() {
-            var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
-            var lastIndex = chars.length - 1;
-            var stringLength = 128;
-            var randomString = "";
-            for (var i = 0; i < stringLength; i++) {
-                var randomIndex = Math.floor(Math.random()*lastIndex);
-                randomString += chars.substring(randomIndex, randomIndex+1);
+      var history = (function () {
+        var previousCommands = [];
+        var currentCommandIndex = 0;
+        var temporaryCommand = "";
+
+        return {
+          recordCommand: function (command) {
+            if (command) {
+              previousCommands.push(command);
+              currentCommandIndex = previousCommands.length;
+              temporaryCommand = "";
+            }
+          },
+          getPreviousCommand: function () {
+            var command = "";
+            if (currentCommandIndex > 0) {
+              currentCommandIndex--;
+              command = previousCommands[currentCommandIndex];
+            }
+            else {
+              if (previousCommands.length > 0) {
+                command = previousCommands[0];
+              }
+            }
+            return command;
+          },
+          getNextCommand: function () {
+            var command = "";
+            if (currentCommandIndex < previousCommands.length - 1) {
+              currentCommandIndex++;
+              command = previousCommands[currentCommandIndex];
             }
-            return randomString;
-        }();
+            else {
+              currentCommandIndex = previousCommands.length;
+              command = temporaryCommand;
+            }
+            return command;
+          },
+          updateTemporaryCommand: function (partial) {
+            temporaryCommand = partial;
+          }
+        };
+      })();
 
-        var history = (function() {
-            var previousCommands = [];
-            var currentCommandIndex = 0;
-            var temporaryCommand = "";
+      function setShellInput(command) {
+        if (command != null) {
+          $("#shellInput").val(command);
+        }
+      };
 
-            return {
-                recordCommand: function(command) {
-                    if (command) {
-                        previousCommands.push(command);
-                        currentCommandIndex = previousCommands.length;
-                        temporaryCommand = "";
-                    }
-                },
-                getPreviousCommand: function() {
-                    var command = "";
-                    if (currentCommandIndex > 0){
-                        currentCommandIndex--;
-                        command = previousCommands[currentCommandIndex];
-                    }
-                    else {
-                        if (previousCommands.length > 0){
-                            command = previousCommands[0];
+      if ($("#shell_id").length) {
+        var shell = {};
+        shell.id = $("#shell_id").text();
+        shell.get = function (offset) {
+          var _shell = this;
+          $.ajax({
+            type: "POST",
+            url: "/shell/retrieve_output",
+            data: {
+              numPairs: 1,
+              offset1: offset,
+              shellId1: _shell.id
+            },
+            beforeSend: function (xhr) {
+              xhr.setRequestHeader("X-Request", "JSON");
+              xhr.setRequestHeader("Hue-Instance-ID", hueInstanceID);
+            },
+            success: function (data, status, xhr) {
+              if (status == "success") {
+                if (data.periodicResponse) {
+                  shell.get(offset);
+                }
+                else {
+                  var output = data[_shell.id].output;
+                  output = output.replace(/&/g, '&amp;')
+                          .replace(/</g, '&lt;')
+                          .replace(/>/g, '&gt;')
+                          .replace(/"/g, '&quot;')
+                          .replace(/\n/g, '<br/>');
+                  $("#shellContent").append(output);
+                  if (output.indexOf("Disconnected!") > -1) {
+                    window.setTimeout(function () {
+                      $.ajax({
+                        type: "POST",
+                        url: "/shell/kill_shell",
+                        data: {
+                          shellId: _shell.id
+                        },
+                        beforeSend: function (xhr) {
+                          xhr.setRequestHeader("X-Request", "JSON");
+                        },
+                        success: function (data, status, xhr) {
+                          location.href = "/shell/";
                         }
-                    }
-                    return command;
-                },
-                getNextCommand: function() {
-                    var command = "";
-                    if (currentCommandIndex < previousCommands.length - 1) {
-                        currentCommandIndex++;
-                        command = previousCommands[currentCommandIndex];
-                    }
-                    else {
-                        currentCommandIndex = previousCommands.length;
-                        command = temporaryCommand;
-                    }
-                    return command;
-                },
-                updateTemporaryCommand: function(partial){
-                    temporaryCommand = partial;
+                      });
+                    }, 500);
+                  }
+                  resizeShellInput();
+                  focusShellInput();
+                  $("html, body").animate({ scrollTop: $(document).height() }, "fast");
+                  _shell.get(data[_shell.id].nextOffset);
                 }
-            };
-        })();
-
-        function setShellInput(command) {
-            if (command != null) {
-                $("#shellInput").val(command);
+              }
             }
+          });
         };
-
-        if ($("#shell_id").length){
-            var shell = {};
-            shell.id = $("#shell_id").text();
-            shell.get = function(offset){
-                var _shell = this;
-                $.ajax({
-                    type: "POST",
-                    url: "/shell/retrieve_output",
-                    data: {
-                        numPairs: 1,
-                        offset1: offset,
-                        shellId1: _shell.id
-                    },
-                    beforeSend: function(xhr){
-                        xhr.setRequestHeader("X-Request", "JSON");
-                        xhr.setRequestHeader("Hue-Instance-ID", hueInstanceID);
-                    },
-                    success: function(data, status, xhr){
-                        if (status == "success"){
-                            if (data.periodicResponse){
-                                shell.get(offset);
-                            }
-                            else {
-                                var output = data[_shell.id].output;
-                                output = output.replace(/&/g, '&amp;')
-                                        .replace(/</g, '&lt;')
-                                        .replace(/>/g, '&gt;')
-                                        .replace(/"/g, '&quot;')
-                                        .replace(/\n/g, '<br/>');
-                                $("#shellContent").append(output);
-                                if (output.indexOf("Disconnected!")>-1){
-                                    window.setTimeout(function(){
-                                        $.ajax({
-                                            type: "POST",
-                                            url: "/shell/kill_shell",
-                                            data: {
-                                                shellId: _shell.id
-                                            },
-                                            beforeSend: function(xhr){
-                                                xhr.setRequestHeader("X-Request", "JSON");
-                                            },
-                                            success: function(data, status, xhr){
-                                                location.href = "/shell/";
-                                            }
-                                        });
-                                    },500);
-                                }
-                                focusShellInput();
-                                $("html, body").animate({ scrollTop: $(document).height() }, "fast");
-                                _shell.get(data[_shell.id].nextOffset);
-                            }
-                        }
-                    }
-                });
-            };
-            shell.send = function(command){
-                var _shell = this;
-                $.ajax({
-                    type: "POST",
-                    url: "/shell/process_command",
-                    data: {
-                        lineToSend: command,
+        shell.send = function (command) {
+          var _shell = this;
+          $.ajax({
+            type: "POST",
+            url: "/shell/process_command",
+            data: {
+              lineToSend: command,
+              shellId: _shell.id
+            },
+            beforeSend: function (xhr) {
+              xhr.setRequestHeader("X-Request", "JSON");
+            },
+            success: function (data, status, xhr) {
+              if (status == "success") {
+                if (command == "quit") {
+                  window.setTimeout(function () {
+                    $.ajax({
+                      type: "POST",
+                      url: "/shell/kill_shell",
+                      data: {
                         shellId: _shell.id
-                    },
-                    beforeSend: function(xhr){
+                      },
+                      beforeSend: function (xhr) {
                         xhr.setRequestHeader("X-Request", "JSON");
-                    },
-                    success: function(data, status, xhr){
-                        if (status == "success"){
-                            if (command == "quit"){
-                                window.setTimeout(function(){
-                                    $.ajax({
-                                        type: "POST",
-                                        url: "/shell/kill_shell",
-                                        data: {
-                                            shellId: _shell.id
-                                        },
-                                        beforeSend: function(xhr){
-                                            xhr.setRequestHeader("X-Request", "JSON");
-                                        },
-                                        success: function(data, status, xhr){
-                                            location.href = "/shell/";
-                                        }
-                                    });
-                                },500);
-                            }
-                        }
-                    }
-                });
-            };
+                      },
+                      success: function (data, status, xhr) {
+                        location.href = "/shell/";
+                      }
+                    });
+                  }, 500);
+                }
+              }
+            }
+          });
+        };
 
-            shell.get(0);
+        shell.get(0);
 
-            $("#shellInput").val("");
+        $("#shellInput").val("");
 
-            $("#shellInput").focus();
+        $("#shellInput").focus();
 
-            $("#shellInput").keydown(function(e){
-                var input = null;
-                var key = e.keyCode ? e.keyCode : e.which
-                if (key == 13){
-                    shell.send($(this).val());
-                    history.recordCommand($(this).val());
-                    input = ""
-                } else if (key == 38){
-                    input = history.getPreviousCommand();
-                    e.preventDefault();
-                } else if (key == 40){
-                    input = history.getNextCommand();
-                    e.preventDefault();
-                }
-                setShellInput(input);
-            });
+        $("#shellInput").keydown(function (e) {
+          var input = null;
+          var key = e.keyCode ? e.keyCode : e.which
+          if (key == 13) {
+            shell.send($(this).val());
+            history.recordCommand($(this).val());
+            input = ""
+          } else if (key == 38) {
+            input = history.getPreviousCommand();
+            e.preventDefault();
+          } else if (key == 40) {
+            input = history.getNextCommand();
+            e.preventDefault();
+          }
+          setShellInput(input);
+        });
 
-            $("#shellInput").keyup(function(e){
-                var key = e.keyCode ? e.keyCode : e.which
-                if ((key > 46 && key < 91) || (key > 95 && key < 112) || (key > 185)) {
-                    history.updateTemporaryCommand($(this).val());
-                }
-            });
+        $("#shellInput").keyup(function (e) {
+          var key = e.keyCode ? e.keyCode : e.which
+          if ((key > 46 && key < 91) || (key > 95 && key < 112) || (key > 185)) {
+            history.updateTemporaryCommand($(this).val());
+          }
+        });
 
-            $(document).keypress(function(e){
-                focusShellInput();
-            });
-        }
+        $(document).keypress(function (e) {
+          focusShellInput();
+        });
+      }
 
-        function focusShellInput() {
-            if (!$("#shellInput").is(":focus")) {
-                $("#shellInput").focus();
-            }
+      function focusShellInput() {
+        if (!$("#shellInput").is(":focus")) {
+          $("#shellInput").focus();
         }
+      }
+
+      var _resizeTimeout = -1;
+      $(window).on("resize", function () {
+        window.clearTimeout(_resizeTimeout);
+        _resizeTimeout = window.setTimeout(function () {
+          resizeShellInput();
+        }, 300);
+      })
+
+      function resizeShellInput() {
+        $("#shellInput").width(20); // force resize to get position of the input
+        $("#shellInput").width($(document).width() - $("#shellInput").position().left - 40)
+      }
     });
 </script>
 </div>