jquery.hdfsautocomplete.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  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. onPathChange: function () {
  29. },
  30. smartTooltip: "",
  31. smartTooltipThreshold: 10, // needs 10 up/down or click actions and no tab to activate the smart tooltip
  32. showOnFocus: false,
  33. skipKeydownEvents: false
  34. };
  35. function Plugin(element, options) {
  36. this.element = element;
  37. this.options = $.extend({}, defaults, options);
  38. this._defaults = defaults;
  39. this._name = pluginName;
  40. this.init();
  41. }
  42. Plugin.prototype.init = function () {
  43. var _this = this;
  44. var _el = $(_this.element);
  45. _el.attr("autocomplete", "off"); // prevents default browser behavior
  46. // creates autocomplete popover
  47. if ($("#jHueHdfsAutocomplete").length == 0) {
  48. $("<div>").attr("id", "jHueHdfsAutocomplete").addClass("jHueAutocomplete popover")
  49. .attr("style", "position:absolute;display:none;max-width:1000px;z-index:33000")
  50. .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>')
  51. .appendTo($("body"));
  52. }
  53. function setHueBreadcrumbCaretAtEnd(element) {
  54. var elemLength = element.value.length;
  55. if (document.selection) {
  56. element.focus();
  57. var _oSel = document.selection.createRange();
  58. _oSel.moveStart('character', -elemLength);
  59. _oSel.moveStart('character', elemLength);
  60. _oSel.moveEnd('character', 0);
  61. _oSel.select();
  62. }
  63. else if (element.selectionStart || element.selectionStart == '0') {
  64. element.selectionStart = elemLength;
  65. element.selectionEnd = elemLength;
  66. element.focus();
  67. }
  68. }
  69. _el.focus(function () {
  70. $(document.body).on("contextmenu", function (e) {
  71. e.preventDefault(); // prevents native menu on FF for Mac from being shown
  72. });
  73. setHueBreadcrumbCaretAtEnd(_this.element);
  74. });
  75. _el.keydown(function (e) {
  76. if (e.keyCode == 9) {
  77. e.preventDefault();
  78. showHdfsAutocomplete(function () {
  79. var path = _el.val();
  80. if (path.indexOf("/") > -1) {
  81. path = path.substr(path.lastIndexOf("/") + 1);
  82. }
  83. guessHdfsPath(path);
  84. });
  85. }
  86. });
  87. function smartTooltipMaker() {
  88. if (_this.options.smartTooltip != "" && typeof $.totalStorage != "undefined" && $.totalStorage("jHueHdfsAutocompleteTooltip") != -1) {
  89. var cnt = 0;
  90. if ($.totalStorage("jHueHdfsAutocompleteTooltip") != null) {
  91. cnt = $.totalStorage("jHueHdfsAutocompleteTooltip") + 1;
  92. }
  93. $.totalStorage("jHueHdfsAutocompleteTooltip", cnt);
  94. if (cnt >= _this.options.smartTooltipThreshold) {
  95. _el.tooltip({
  96. animation: true,
  97. title: _this.options.smartTooltip,
  98. trigger: "manual",
  99. placement: "top"
  100. }).tooltip("show");
  101. window.setTimeout(function () {
  102. _el.tooltip("hide");
  103. }, 10000);
  104. $.totalStorage("jHueHdfsAutocompleteTooltip", -1);
  105. }
  106. }
  107. }
  108. $(window).on("scroll", function(){
  109. $("#jHueHdfsAutocomplete").css("top", _el.offset().top + _el.outerHeight() - 1).css("left", _el.offset().left).width(_el.outerWidth() - 4);
  110. });
  111. if (! _this.options.skipKeydownEvents){
  112. _el.on("keydown", function(e){
  113. if ((e.keyCode==32 && e.ctrlKey) || e.keyCode == 191){
  114. e.preventDefault();
  115. }
  116. });
  117. }
  118. var _hdfsAutocompleteSelectedIndex = -1;
  119. var _filterTimeout = -1;
  120. _el.keyup(function (e) {
  121. window.clearTimeout(_filterTimeout);
  122. if ($.inArray(e.keyCode, [38, 40, 13, 32, 191]) == -1) {
  123. _hdfsAutocompleteSelectedIndex = -1;
  124. _filterTimeout = window.setTimeout(function () {
  125. var path = _el.val();
  126. if (path.indexOf("/") > -1) {
  127. path = path.substr(path.lastIndexOf("/") + 1);
  128. }
  129. $("#jHueHdfsAutocomplete ul li").show();
  130. $("#jHueHdfsAutocomplete ul li").each(function () {
  131. if ($(this).text().trim().indexOf(path) != 0) {
  132. $(this).hide();
  133. }
  134. });
  135. }, 500);
  136. }
  137. if (e.keyCode == 38) {
  138. if (_hdfsAutocompleteSelectedIndex <= 0) {
  139. _hdfsAutocompleteSelectedIndex = $("#jHueHdfsAutocomplete ul li:visible").length - 1;
  140. }
  141. else {
  142. _hdfsAutocompleteSelectedIndex--;
  143. }
  144. }
  145. if (e.keyCode == 40) {
  146. if (_hdfsAutocompleteSelectedIndex == $("#jHueHdfsAutocomplete ul li:visible").length - 1) {
  147. _hdfsAutocompleteSelectedIndex = 0;
  148. }
  149. else {
  150. _hdfsAutocompleteSelectedIndex++;
  151. }
  152. }
  153. if (e.keyCode == 38 || e.keyCode == 40) {
  154. smartTooltipMaker();
  155. $("#jHueHdfsAutocomplete ul li").removeClass("active");
  156. $("#jHueHdfsAutocomplete ul li:visible").eq(_hdfsAutocompleteSelectedIndex).addClass("active");
  157. $("#jHueHdfsAutocomplete .popover-content").scrollTop($("#jHueHdfsAutocomplete ul li:visible").eq(_hdfsAutocompleteSelectedIndex).prevAll().length * $("#jHueHdfsAutocomplete ul li:visible").eq(_hdfsAutocompleteSelectedIndex).outerHeight());
  158. }
  159. if ((e.keyCode == 32 && e.ctrlKey) || e.keyCode == 191) {
  160. smartTooltipMaker();
  161. showHdfsAutocomplete();
  162. }
  163. if (e.keyCode == 13) {
  164. if (_hdfsAutocompleteSelectedIndex > -1) {
  165. $("#jHueHdfsAutocomplete ul li:visible").eq(_hdfsAutocompleteSelectedIndex).click();
  166. }
  167. else {
  168. _this.options.onEnter($(this));
  169. }
  170. $("#jHueHdfsAutocomplete").hide();
  171. _hdfsAutocompleteSelectedIndex = -1;
  172. }
  173. });
  174. if (_this.options.showOnFocus){
  175. _el.on("focus", function(){
  176. showHdfsAutocomplete();
  177. });
  178. }
  179. var _pauseBlur = false;
  180. _el.blur(function () {
  181. if (!_pauseBlur) {
  182. $(document.body).off("contextmenu");
  183. $("#jHueHdfsAutocomplete").hide();
  184. _this.options.onBlur();
  185. }
  186. });
  187. var BASE_PATH = "/filebrowser/view";
  188. var _currentFiles = [];
  189. function showHdfsAutocomplete(callback) {
  190. var path = _el.val();
  191. var autocompleteUrl = BASE_PATH;
  192. if (path.indexOf("/") == 0) {
  193. autocompleteUrl += path.substr(0, path.lastIndexOf("/"));
  194. }
  195. else if (path.indexOf("/") > 0) {
  196. autocompleteUrl += _this.options.home + path.substr(0, path.lastIndexOf("/"));
  197. }
  198. else {
  199. autocompleteUrl += _this.options.home;
  200. }
  201. $.getJSON(autocompleteUrl + "?pagesize=1000&format=json", function (data) {
  202. _currentFiles = [];
  203. if (data.error == null) {
  204. $(data.files).each(function (cnt, item) {
  205. if (item.name != ".") {
  206. var ico = "fa-file-o";
  207. if (item.type == "dir") {
  208. ico = "fa-folder";
  209. }
  210. _currentFiles.push('<li class="hdfsAutocompleteItem" data-value="' + item.name + '"><i class="fa ' + ico + '"></i> ' + item.name + '</li>');
  211. }
  212. });
  213. window.setTimeout(function () {
  214. $("#jHueHdfsAutocomplete").css("top", _el.offset().top + _el.outerHeight() - 1).css("left", _el.offset().left).width(_el.outerWidth() - 4);
  215. $("#jHueHdfsAutocomplete").find("ul").empty().html(_currentFiles.join(""));
  216. $("#jHueHdfsAutocomplete").find("li").on("click", function (e) {
  217. smartTooltipMaker();
  218. e.preventDefault();
  219. var item = $(this).text().trim();
  220. var path = autocompleteUrl.substring(BASE_PATH.length);
  221. if (item == "..") { // one folder up
  222. _el.val(path.substring(0, path.lastIndexOf("/")));
  223. }
  224. else {
  225. _el.val(path + (path.charAt(path.length - 1) == "/" ? "" : "/") + item);
  226. }
  227. if ($(this).html().indexOf("folder") > -1) {
  228. _el.val(_el.val() + "/");
  229. _this.options.onPathChange(_el.val());
  230. showHdfsAutocomplete();
  231. }
  232. else {
  233. _this.options.onEnter(_el);
  234. }
  235. });
  236. $("#jHueHdfsAutocomplete").show();
  237. setHueBreadcrumbCaretAtEnd(_this.element);
  238. if ("undefined" != typeof callback) {
  239. callback();
  240. }
  241. }, 100); // timeout for IE8
  242. }
  243. });
  244. }
  245. $(document).on("mouseenter", ".hdfsAutocompleteItem", function () {
  246. _pauseBlur = true;
  247. });
  248. $(document).on("mouseout", ".hdfsAutocompleteItem", function () {
  249. _pauseBlur = false;
  250. })
  251. function guessHdfsPath(lastChars) {
  252. var possibleMatches = [];
  253. for (var i = 0; i < _currentFiles.length; i++) {
  254. if (($(_currentFiles[i]).text().trim().indexOf(lastChars) == 0 || lastChars == "") && $(_currentFiles[i]).text().trim() != "..") {
  255. possibleMatches.push(_currentFiles[i]);
  256. }
  257. }
  258. if (possibleMatches.length == 1) {
  259. _el.val(_el.val() + $(possibleMatches[0]).text().trim().substr(lastChars.length));
  260. if ($(possibleMatches[0]).html().indexOf("folder") > -1) {
  261. _el.val(_el.val() + "/");
  262. showHdfsAutocomplete();
  263. }
  264. }
  265. else if (possibleMatches.length > 1) {
  266. // finds the longest common prefix
  267. var possibleMatchesPlain = [];
  268. for (var z = 0; z < possibleMatches.length; z++) {
  269. possibleMatchesPlain.push($(possibleMatches[z]).text().trim());
  270. }
  271. var arr = possibleMatchesPlain.slice(0).sort(),
  272. word1 = arr[0], word2 = arr[arr.length - 1],
  273. j = 0;
  274. while (word1.charAt(j) == word2.charAt(j))++j;
  275. var match = word1.substring(0, j);
  276. _el.val(_el.val() + match.substr(lastChars.length));
  277. }
  278. }
  279. };
  280. Plugin.prototype.setOptions = function (options) {
  281. this.options = $.extend({}, defaults, options);
  282. };
  283. $.fn[pluginName] = function (options) {
  284. return this.each(function () {
  285. if (!$.data(this, 'plugin_' + pluginName)) {
  286. $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
  287. }
  288. });
  289. }
  290. $[pluginName] = function (options) {
  291. if (typeof console != "undefined") {
  292. console.warn("$(elem).jHueHdfsAutocomplete() is a preferred call method.");
  293. }
  294. $(options.element).jHueHdfsAutocomplete(options);
  295. };
  296. })(jQuery, window, document);