瀏覽代碼

HUE-747 [shell] History blows up after 50 commands with Firefox

Changed style to the input form, no it looks really like a shell
Fixed scroll to bottom of the page
Command history now behaves like it should
Enrico Berti 13 年之前
父節點
當前提交
31478998f8
共有 1 個文件被更改,包括 168 次插入160 次删除
  1. 168 160
      apps/shell/src/shell/templates/index.mako

+ 168 - 160
apps/shell/src/shell/templates/index.mako

@@ -42,35 +42,36 @@ ${commonheader(_('Hue Shell'), "shell", user, "100px")}
         body {
             background-color: #333;
         }
+
         .shell {
-            background-color:#333;
-            color:#EEE;
+            background-color: #333;
+            color: #EEE;
             font-family: monospace;
             font-size: 14px;
         }
+
         #shellOutput {
-            /*position:absolute;
-            left:0;
-            top:-20px;*/
-            padding:0;
-            width:100%;
+            padding: 0;
+            width: 100%;
         }
-        #shellInput {
-            border:0;
-            margin:0;
-            margin-top:10px;
-            margin-bottom:10px;
-            padding:0;
-            box-shadow:none;
-
 
+        #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;
-        }
-        #shellContent {
 
+        #shellInput:focus {
+            box-shadow: none;
+            border: 0;
         }
     </style>
     <div id="shellOutput" class="shell">
@@ -91,64 +92,66 @@ ${commonheader(_('Hue Shell'), "shell", user, "100px")}
   % endif
 
 <script type="text/javascript" charset="utf-8">
-	$(document).ready(function(){
-		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");
-			}
-		}
+    $(document).ready(function(){
+        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);
+            }
+            return randomString;
+        }();
 
         var history = (function() {
             var previousCommands = [];
             var currentCommandIndex = 0;
-            // Save the initial input ("enter" key not pressed yet before navigating in the history)
-            var temporaryInput = null;
+            var temporaryCommand = "";
 
             return {
                 recordCommand: function(command) {
                     if (command) {
-                        if (previousCommands[previousCommands.length - 1] != command) {
-                            previousCommands.push(command);
-                            currentCommandIndex = previousCommands.length;
-                            temporaryInput = null;
-                        }
+                        previousCommands.push(command);
+                        currentCommandIndex = previousCommands.length;
+                        temporaryCommand = "";
                     }
                 },
-                getPreviousCommand: function(input) {
-                    if (currentCommandIndex == previousCommands.length) {
-                        temporaryInput = input;
-                    }
-
-                    var command = null;
-                    if (currentCommandIndex > 0) {
+                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 = null;
+                    var command = "";
                     if (currentCommandIndex < previousCommands.length - 1) {
                         currentCommandIndex++;
                         command = previousCommands[currentCommandIndex];
-                    } else {
-                        command = temporaryInput;
+                    }
+                    else {
                         currentCommandIndex = previousCommands.length;
+                        command = temporaryCommand;
                     }
                     return command;
+                },
+                updateTemporaryCommand: function(partial){
+                    temporaryCommand = partial;
                 }
             };
         })();
@@ -159,133 +162,138 @@ ${commonheader(_('Hue Shell'), "shell", user, "100px")}
             }
         };
 
-		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);
-								}
-								var toScroll = -$(document).height();
-								if (jQuery.browser.webkit) {
-								  toScroll = -toScroll;
-								}
-								$("body").animate({scrollTop: toScroll}, "fast");
-								_shell.get(data[_shell.id].nextOffset);
-							}
-						}
-					}
-				});
-			};
-			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){
-											xhr.setRequestHeader("X-Request", "JSON");
-										},
-										success: function(data, status, xhr){
-											location.href = "/shell/";
-										}
-									});
-								},500);
-							}
-						}
-					}
-				});
-			};
+        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,
+                        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){
+                                            xhr.setRequestHeader("X-Request", "JSON");
+                                        },
+                                        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){
-                $(this).width($(document).width()-100-$(this).position().left);
-
                 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($(this).val());
+                    input = history.getPreviousCommand();
                     e.preventDefault();
                 } else if (key == 40){
                     input = history.getNextCommand();
+                    e.preventDefault();
                 }
-
                 setShellInput(input);
             });
 
-            $(document).keypress(function(e){
-                if (! $("#shellInput").is(":focus")) {
-                    $("#shellInput").focus();
+            $("#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();
+            });
+        }
+
+        function focusShellInput() {
+            if (!$("#shellInput").is(":focus")) {
+                $("#shellInput").focus();
+            }
         }
-	});
+    });
 </script>
 </div>