Browse Source

HUE-1800 [fb] Autocomplete edited path

Added terminal-like and visual autocomplete to FB
Enrico Berti 12 years ago
parent
commit
1a4262b8d2

+ 38 - 11
apps/filebrowser/src/filebrowser/templates/listdir_components.mako

@@ -33,6 +33,7 @@ from django.utils.translation import ugettext as _
 </%def>
 </%def>
 
 
 <%def name="_table(files, path, current_request_path, view)">
 <%def name="_table(files, path, current_request_path, view)">
+    <script src="/static/js/jquery.hdfsautocomplete.js" type="text/javascript" charset="utf-8"></script>
     <script src="/static/ext/js/knockout-min.js" type="text/javascript" charset="utf-8"></script>
     <script src="/static/ext/js/knockout-min.js" type="text/javascript" charset="utf-8"></script>
     <script src="/static/ext/js/datatables-paging-0.1.js" type="text/javascript" charset="utf-8"></script>
     <script src="/static/ext/js/datatables-paging-0.1.js" type="text/javascript" charset="utf-8"></script>
     <style type="text/css">
     <style type="text/css">
@@ -108,6 +109,21 @@ from django.utils.translation import ugettext as _
       .scrollable {
       .scrollable {
         margin-bottom: 80px;
         margin-bottom: 80px;
       }
       }
+
+      #jHueHdfsAutocomplete ul li {
+        cursor: pointer;
+      }
+
+      #jHueHdfsAutocomplete ul li:hover,  #jHueHdfsAutocomplete ul li.active {
+        color: #FFFFFF;
+        background: #338BB8;
+      }
+
+      #jHueHdfsAutocomplete .popover-content {
+        max-height: 200px;
+        overflow-y: auto;
+      }
+
     </style>
     </style>
 
 
     <table class="table table-condensed datatables tablescroller-disable">
     <table class="table table-condensed datatables tablescroller-disable">
@@ -488,6 +504,18 @@ from django.utils.translation import ugettext as _
 
 
     <div id="submit-wf-modal" class="modal hide"></div>
     <div id="submit-wf-modal" class="modal hide"></div>
 
 
+    <div id="jHueHdfsAutocomplete" class="popover bottom" style="position:absolute;display:none;max-width:1000px;z-index:33000">
+      <div class="arrow"></div>
+      <div class="popover-inner">
+        <h3 class="popover-title"></h3>
+        <div class="popover-content">
+          <p>
+            <ul class="unstyled"></ul>
+          </p>
+        </div>
+      </div>
+    </div>
+
     <script type="text/javascript" charset="utf-8">
     <script type="text/javascript" charset="utf-8">
     // ajax modal windows
     // ajax modal windows
     function openChownWindow(path, user, group, next) {
     function openChownWindow(path, user, group, next) {
@@ -749,28 +777,27 @@ from django.utils.translation import ugettext as _
         $("#hueBreadcrumbText").show().focus();
         $("#hueBreadcrumbText").show().focus();
       });
       });
 
 
-      $("#hueBreadcrumbText").keyup(function (e) {
-        if (e.keyCode == 13) {
-          var _el = $(this);
-          viewModel.targetPath("${url('filebrowser.views.view', path=urlencode('/'))}" + stripHashes(_el.val().substring(1)));
+      $("#hueBreadcrumbText").jHueHdfsAutocomplete({
+        home: "/user/${ user }/",
+        onEnter: function (el) {
+          viewModel.targetPath("${url('filebrowser.views.view', path=urlencode('/'))}" + stripHashes(el.val().substring(1)));
           viewModel.getStats(function (data) {
           viewModel.getStats(function (data) {
             if (data.type != null && data.type == "file") {
             if (data.type != null && data.type == "file") {
               location.href = data.url;
               location.href = data.url;
               return false;
               return false;
             }
             }
             else {
             else {
-              window.location.hash = stripHashes(_el.val());
+              window.location.hash = stripHashes(el.val());
             }
             }
           });
           });
+        },
+        onBlur: function() {
+          $("#hueBreadcrumbText").hide();
+          $(".hueBreadcrumb").show();
+          $("#editBreadcrumb").show();
         }
         }
       });
       });
 
 
-      $("#hueBreadcrumbText").blur(function () {
-        $(this).hide();
-        $(".hueBreadcrumb").show();
-        $("#editBreadcrumb").show();
-      });
-
       $.ajaxSetup({
       $.ajaxSetup({
         error:function (x, e) {
         error:function (x, e) {
           if (x.status == 500) {
           if (x.status == 500) {

+ 253 - 0
desktop/core/static/js/jquery.hdfsautocomplete.js

@@ -0,0 +1,253 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+/*
+ * jHue HDFS autocomplete plugin
+ * augment a textbox into an HDFS autocomplete
+ */
+
+(function ($, window, document, undefined) {
+  var pluginName = "jHueHdfsAutocomplete",
+      defaults = {
+        home: "/",
+        onEnter: function () {
+        },
+        onBlur: function () {
+        }
+      };
+
+  function Plugin(element, options) {
+    this.element = element;
+    this.options = $.extend({}, defaults, options);
+    this._defaults = defaults;
+    this._name = pluginName;
+    this.init();
+  }
+
+  Plugin.prototype.init = function () {
+    var _this = this;
+    var _el = $(_this.element);
+
+    // creates autocomplete popover
+    if ($("#jHueHdfsAutocomplete").length == 0) {
+      $("<div>").attr("id", "jHueHdfsAutocomplete").addClass("popover")
+          .addClass("bottom").attr("style", "position:absolute;display:none;max-width:1000px;z-index:33000")
+          .html('<div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p><ul class="unstyled"></ul></p></div></div>')
+          .appendTo($(document));
+    }
+
+    function setHueBreadcrumbCaretAtEnd(element) {
+      var elemLength = element.value.length;
+      if (document.selection) {
+        element.focus();
+        var _oSel = document.selection.createRange();
+        _oSel.moveStart('character', -elemLength);
+        _oSel.moveStart('character', elemLength);
+        _oSel.moveEnd('character', 0);
+        _oSel.select();
+      }
+      else if (element.selectionStart || element.selectionStart == '0') {
+        element.selectionStart = elemLength;
+        element.selectionEnd = elemLength;
+        element.focus();
+      }
+    }
+
+
+    _el.focus(function () {
+      $(document.body).on("contextmenu", function (e) {
+        e.preventDefault(); // prevents native menu on FF for Mac from being shown
+      });
+      setHueBreadcrumbCaretAtEnd(_this.element);
+    });
+
+    _el.keydown(function (e) {
+      if (e.keyCode == 9) {
+        e.preventDefault();
+        showHdfsAutocomplete(function () {
+          var path = _el.val();
+          if (path.indexOf("/") > -1) {
+            path = path.substr(path.lastIndexOf("/") + 1);
+          }
+          guessHdfsPath(path);
+        });
+      }
+    });
+
+    var _hdfsAutocompleteSelectedIndex = -1;
+    _el.keyup(function (e) {
+      if (e.keyCode == 38) {
+        if (_hdfsAutocompleteSelectedIndex <= 0) {
+          _hdfsAutocompleteSelectedIndex = $("#jHueHdfsAutocomplete ul li").length - 1;
+        }
+        else {
+          _hdfsAutocompleteSelectedIndex--;
+        }
+      }
+      if (e.keyCode == 40) {
+        if (_hdfsAutocompleteSelectedIndex == $("#jHueHdfsAutocomplete ul li").length - 1) {
+          _hdfsAutocompleteSelectedIndex = 0;
+        }
+        else {
+          _hdfsAutocompleteSelectedIndex++;
+        }
+      }
+      if (e.keyCode == 38 || e.keyCode == 40) {
+        $("#jHueHdfsAutocomplete ul li").removeClass("active");
+        $("#jHueHdfsAutocomplete ul li").eq(_hdfsAutocompleteSelectedIndex).addClass("active");
+        $("#jHueHdfsAutocomplete .popover-content").scrollTop($("#jHueHdfsAutocomplete ul li").eq(_hdfsAutocompleteSelectedIndex).prevAll().length * $("#jHueHdfsAutocomplete ul li").eq(_hdfsAutocompleteSelectedIndex).outerHeight());
+      }
+      if ((e.keyCode == 32 && e.ctrlKey) || e.keyCode == 191) {
+        showHdfsAutocomplete();
+      }
+      if (e.keyCode == 13) {
+        $("#jHueHdfsAutocomplete").hide();
+        if (_hdfsAutocompleteSelectedIndex > -1) {
+          $("#jHueHdfsAutocomplete ul li").eq(_hdfsAutocompleteSelectedIndex).click();
+        }
+        else {
+          _this.options.onEnter($(this));
+        }
+        _hdfsAutocompleteSelectedIndex = -1;
+      }
+    });
+
+    var _pauseBlur = false;
+
+    _el.blur(function () {
+      if (!_pauseBlur) {
+        $(document.body).off("contextmenu");
+        $("#jHueHdfsAutocomplete").hide();
+        _this.options.onBlur();
+      }
+    });
+
+    var BASE_PATH = "/filebrowser/view";
+    var _currentFiles = [];
+
+    function showHdfsAutocomplete(callback) {
+      var path = _el.val();
+      var autocompleteUrl = BASE_PATH;
+      if (path.indexOf("/") == 0) {
+        autocompleteUrl += path.substr(0, path.lastIndexOf("/"));
+      }
+      else if (path.indexOf("/") > 0) {
+        autocompleteUrl += _this.options.home + path.substr(0, path.lastIndexOf("/"));
+      }
+      else {
+        autocompleteUrl += _this.options.home;
+      }
+      $.getJSON(autocompleteUrl + "?pagesize=1000&format=json", function (data) {
+        _currentFiles = [];
+        if (data.error == null) {
+          $(data.files).each(function (cnt, item) {
+            if (item.name != ".") {
+              var ico = "fa-file-o";
+              if (item.type == "dir") {
+                ico = "fa-folder";
+              }
+              _currentFiles.push('<li class="hdfsAutocompleteItem" data-value="' + item.name + '"><i class="fa ' + ico + '"></i> ' + item.name + '</li>');
+            }
+          });
+          window.setTimeout(function () {
+            $("#jHueHdfsAutocomplete").css("top", _el.position().top + _el.outerHeight()).css("left", _el.position().left).width(_el.width());
+            $("#jHueHdfsAutocomplete").find("ul").empty().html(_currentFiles.join(""));
+            $("#jHueHdfsAutocomplete").find("li").on("click", function (e) {
+              e.preventDefault();
+              var item = $(this).text().trim();
+              var path = autocompleteUrl.substring(BASE_PATH.length);
+              if (item == "..") { // one folder up
+                _el.val(path.substring(0, path.lastIndexOf("/")));
+              }
+              else {
+                _el.val(path + "/" + item);
+              }
+              if ($(this).html().indexOf("folder") > -1) {
+                _el.val(_el.val() + "/");
+                showHdfsAutocomplete();
+              }
+              else {
+                _this.options.onEnter(_el);
+              }
+            });
+            $("#jHueHdfsAutocomplete").show();
+            setHueBreadcrumbCaretAtEnd(_this.element);
+            if ("undefined" != typeof callback) {
+              callback();
+            }
+          }, 100);  // timeout for IE8
+        }
+      });
+    }
+
+    $(document).on("mouseenter", ".hdfsAutocompleteItem", function () {
+      _pauseBlur = true;
+    });
+
+    $(document).on("mouseout", ".hdfsAutocompleteItem", function () {
+      _pauseBlur = false;
+    })
+
+    function guessHdfsPath(lastChars) {
+      var possibleMatches = [];
+      for (var i = 0; i < _currentFiles.length; i++) {
+        if (($(_currentFiles[i]).text().trim().indexOf(lastChars) == 0 || lastChars == "") && $(_currentFiles[i]).text().trim() != "..") {
+          possibleMatches.push(_currentFiles[i]);
+        }
+      }
+      if (possibleMatches.length == 1) {
+        _el.val(_el.val() + $(possibleMatches[0]).text().trim().substr(lastChars.length));
+        if ($(possibleMatches[0]).html().indexOf("folder") > -1) {
+          _el.val(_el.val() + "/");
+          showHdfsAutocomplete();
+        }
+      }
+      else if (possibleMatches.length > 1) {
+        // finds the longest common prefix
+        var possibleMatchesPlain = [];
+        for (var z = 0; z < possibleMatches.length; z++) {
+          possibleMatchesPlain.push($(possibleMatches[z]).text().trim());
+        }
+        var arr = possibleMatchesPlain.slice(0).sort(),
+            word1 = arr[0], word2 = arr[arr.length - 1],
+            j = 0;
+        while (word1.charAt(j) == word2.charAt(j))++j;
+        var match = word1.substring(0, j);
+        _el.val(_el.val() + match.substr(lastChars.length));
+      }
+    }
+  };
+
+  Plugin.prototype.setOptions = function (options) {
+    this.options = $.extend({}, defaults, options);
+  };
+
+
+  $.fn[pluginName] = function (options) {
+    return this.each(function () {
+      if (!$.data(this, 'plugin_' + pluginName)) {
+        $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
+      }
+    });
+  }
+
+  $[pluginName] = function (options) {
+    if (typeof console != "undefined") {
+      console.warn("$(elem).jHueHdfsAutocomplete() is a preferred call method.");
+    }
+    $(options.element).jHueHdfsAutocomplete(options);
+  };
+
+})(jQuery, window, document);