jquery.hdfsautocomplete.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. // Licensed to Cloudera, Inc. under one
  2. // or more contributor license agreements. See the NOTICE file
  3. // distributed with this work for additional information
  4. // regarding copyright ownership. Cloudera, Inc. licenses this file
  5. // to you under the Apache License, Version 2.0 (the
  6. // "License"); you may not use this file except in compliance
  7. // with the License. You may obtain a copy of the License at
  8. //
  9. // http://www.apache.org/licenses/LICENSE-2.0
  10. //
  11. // Unless required by applicable law or agreed to in writing, software
  12. // distributed under the License is distributed on an "AS IS" BASIS,
  13. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. // See the License for the specific language governing permissions and
  15. // limitations under the License.
  16. /*
  17. * jHue HDFS autocomplete plugin
  18. * augment a textbox into an HDFS autocomplete
  19. */
  20. (function ($, window, document, undefined) {
  21. var pluginName = "jHueHdfsAutocomplete",
  22. defaults = {
  23. home: "/",
  24. onEnter: function () {
  25. },
  26. onBlur: function () {
  27. }
  28. };
  29. function Plugin(element, options) {
  30. this.element = element;
  31. this.options = $.extend({}, defaults, options);
  32. this._defaults = defaults;
  33. this._name = pluginName;
  34. this.init();
  35. }
  36. Plugin.prototype.init = function () {
  37. var _this = this;
  38. var _el = $(_this.element);
  39. // creates autocomplete popover
  40. if ($("#jHueHdfsAutocomplete").length == 0) {
  41. $("<div>").attr("id", "jHueHdfsAutocomplete").addClass("popover")
  42. .addClass("bottom").attr("style", "position:absolute;display:none;max-width:1000px;z-index:33000")
  43. .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>')
  44. .appendTo($(document));
  45. }
  46. function setHueBreadcrumbCaretAtEnd(element) {
  47. var elemLength = element.value.length;
  48. if (document.selection) {
  49. element.focus();
  50. var _oSel = document.selection.createRange();
  51. _oSel.moveStart('character', -elemLength);
  52. _oSel.moveStart('character', elemLength);
  53. _oSel.moveEnd('character', 0);
  54. _oSel.select();
  55. }
  56. else if (element.selectionStart || element.selectionStart == '0') {
  57. element.selectionStart = elemLength;
  58. element.selectionEnd = elemLength;
  59. element.focus();
  60. }
  61. }
  62. _el.focus(function () {
  63. $(document.body).on("contextmenu", function (e) {
  64. e.preventDefault(); // prevents native menu on FF for Mac from being shown
  65. });
  66. setHueBreadcrumbCaretAtEnd(_this.element);
  67. });
  68. _el.keydown(function (e) {
  69. if (e.keyCode == 9) {
  70. e.preventDefault();
  71. showHdfsAutocomplete(function () {
  72. var path = _el.val();
  73. if (path.indexOf("/") > -1) {
  74. path = path.substr(path.lastIndexOf("/") + 1);
  75. }
  76. guessHdfsPath(path);
  77. });
  78. }
  79. });
  80. var _hdfsAutocompleteSelectedIndex = -1;
  81. _el.keyup(function (e) {
  82. if (e.keyCode == 38) {
  83. if (_hdfsAutocompleteSelectedIndex <= 0) {
  84. _hdfsAutocompleteSelectedIndex = $("#jHueHdfsAutocomplete ul li").length - 1;
  85. }
  86. else {
  87. _hdfsAutocompleteSelectedIndex--;
  88. }
  89. }
  90. if (e.keyCode == 40) {
  91. if (_hdfsAutocompleteSelectedIndex == $("#jHueHdfsAutocomplete ul li").length - 1) {
  92. _hdfsAutocompleteSelectedIndex = 0;
  93. }
  94. else {
  95. _hdfsAutocompleteSelectedIndex++;
  96. }
  97. }
  98. if (e.keyCode == 38 || e.keyCode == 40) {
  99. $("#jHueHdfsAutocomplete ul li").removeClass("active");
  100. $("#jHueHdfsAutocomplete ul li").eq(_hdfsAutocompleteSelectedIndex).addClass("active");
  101. $("#jHueHdfsAutocomplete .popover-content").scrollTop($("#jHueHdfsAutocomplete ul li").eq(_hdfsAutocompleteSelectedIndex).prevAll().length * $("#jHueHdfsAutocomplete ul li").eq(_hdfsAutocompleteSelectedIndex).outerHeight());
  102. }
  103. if ((e.keyCode == 32 && e.ctrlKey) || e.keyCode == 191) {
  104. showHdfsAutocomplete();
  105. }
  106. if (e.keyCode == 13) {
  107. $("#jHueHdfsAutocomplete").hide();
  108. if (_hdfsAutocompleteSelectedIndex > -1) {
  109. $("#jHueHdfsAutocomplete ul li").eq(_hdfsAutocompleteSelectedIndex).click();
  110. }
  111. else {
  112. _this.options.onEnter($(this));
  113. }
  114. _hdfsAutocompleteSelectedIndex = -1;
  115. }
  116. });
  117. var _pauseBlur = false;
  118. _el.blur(function () {
  119. if (!_pauseBlur) {
  120. $(document.body).off("contextmenu");
  121. $("#jHueHdfsAutocomplete").hide();
  122. _this.options.onBlur();
  123. }
  124. });
  125. var BASE_PATH = "/filebrowser/view";
  126. var _currentFiles = [];
  127. function showHdfsAutocomplete(callback) {
  128. var path = _el.val();
  129. var autocompleteUrl = BASE_PATH;
  130. if (path.indexOf("/") == 0) {
  131. autocompleteUrl += path.substr(0, path.lastIndexOf("/"));
  132. }
  133. else if (path.indexOf("/") > 0) {
  134. autocompleteUrl += _this.options.home + path.substr(0, path.lastIndexOf("/"));
  135. }
  136. else {
  137. autocompleteUrl += _this.options.home;
  138. }
  139. $.getJSON(autocompleteUrl + "?pagesize=1000&format=json", function (data) {
  140. _currentFiles = [];
  141. if (data.error == null) {
  142. $(data.files).each(function (cnt, item) {
  143. if (item.name != ".") {
  144. var ico = "fa-file-o";
  145. if (item.type == "dir") {
  146. ico = "fa-folder";
  147. }
  148. _currentFiles.push('<li class="hdfsAutocompleteItem" data-value="' + item.name + '"><i class="fa ' + ico + '"></i> ' + item.name + '</li>');
  149. }
  150. });
  151. window.setTimeout(function () {
  152. $("#jHueHdfsAutocomplete").css("top", _el.position().top + _el.outerHeight()).css("left", _el.position().left).width(_el.width());
  153. $("#jHueHdfsAutocomplete").find("ul").empty().html(_currentFiles.join(""));
  154. $("#jHueHdfsAutocomplete").find("li").on("click", function (e) {
  155. e.preventDefault();
  156. var item = $(this).text().trim();
  157. var path = autocompleteUrl.substring(BASE_PATH.length);
  158. if (item == "..") { // one folder up
  159. _el.val(path.substring(0, path.lastIndexOf("/")));
  160. }
  161. else {
  162. _el.val(path + "/" + item);
  163. }
  164. if ($(this).html().indexOf("folder") > -1) {
  165. _el.val(_el.val() + "/");
  166. showHdfsAutocomplete();
  167. }
  168. else {
  169. _this.options.onEnter(_el);
  170. }
  171. });
  172. $("#jHueHdfsAutocomplete").show();
  173. setHueBreadcrumbCaretAtEnd(_this.element);
  174. if ("undefined" != typeof callback) {
  175. callback();
  176. }
  177. }, 100); // timeout for IE8
  178. }
  179. });
  180. }
  181. $(document).on("mouseenter", ".hdfsAutocompleteItem", function () {
  182. _pauseBlur = true;
  183. });
  184. $(document).on("mouseout", ".hdfsAutocompleteItem", function () {
  185. _pauseBlur = false;
  186. })
  187. function guessHdfsPath(lastChars) {
  188. var possibleMatches = [];
  189. for (var i = 0; i < _currentFiles.length; i++) {
  190. if (($(_currentFiles[i]).text().trim().indexOf(lastChars) == 0 || lastChars == "") && $(_currentFiles[i]).text().trim() != "..") {
  191. possibleMatches.push(_currentFiles[i]);
  192. }
  193. }
  194. if (possibleMatches.length == 1) {
  195. _el.val(_el.val() + $(possibleMatches[0]).text().trim().substr(lastChars.length));
  196. if ($(possibleMatches[0]).html().indexOf("folder") > -1) {
  197. _el.val(_el.val() + "/");
  198. showHdfsAutocomplete();
  199. }
  200. }
  201. else if (possibleMatches.length > 1) {
  202. // finds the longest common prefix
  203. var possibleMatchesPlain = [];
  204. for (var z = 0; z < possibleMatches.length; z++) {
  205. possibleMatchesPlain.push($(possibleMatches[z]).text().trim());
  206. }
  207. var arr = possibleMatchesPlain.slice(0).sort(),
  208. word1 = arr[0], word2 = arr[arr.length - 1],
  209. j = 0;
  210. while (word1.charAt(j) == word2.charAt(j))++j;
  211. var match = word1.substring(0, j);
  212. _el.val(_el.val() + match.substr(lastChars.length));
  213. }
  214. }
  215. };
  216. Plugin.prototype.setOptions = function (options) {
  217. this.options = $.extend({}, defaults, options);
  218. };
  219. $.fn[pluginName] = function (options) {
  220. return this.each(function () {
  221. if (!$.data(this, 'plugin_' + pluginName)) {
  222. $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
  223. }
  224. });
  225. }
  226. $[pluginName] = function (options) {
  227. if (typeof console != "undefined") {
  228. console.warn("$(elem).jHueHdfsAutocomplete() is a preferred call method.");
  229. }
  230. $(options.element).jHueHdfsAutocomplete(options);
  231. };
  232. })(jQuery, window, document);