jquery.hiveautocomplete.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
  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 = "jHueHiveAutocomplete",
  22. defaults = {
  23. serverType: "HIVE",
  24. home: "/",
  25. skipColumns: false,
  26. onEnter: function () {
  27. },
  28. onBlur: function () {
  29. },
  30. onPathChange: function () {
  31. },
  32. smartTooltip: "",
  33. smartTooltipThreshold: 10, // needs 10 up/down or click actions and no tab to activate the smart tooltip
  34. showOnFocus: false
  35. };
  36. function Plugin(element, options) {
  37. this.element = element;
  38. this.options = $.extend({}, defaults, options);
  39. this._defaults = defaults;
  40. this._name = pluginName;
  41. this.init();
  42. }
  43. Plugin.prototype.init = function () {
  44. var _this = this;
  45. var _el = $(_this.element);
  46. // creates autocomplete popover
  47. if ($("#jHueHiveAutocomplete").length == 0) {
  48. $("<div>").attr("id", "jHueHiveAutocomplete").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"><ul class="unstyled"></ul></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. _pauseBlur = false;
  75. });
  76. _el.keydown(function (e) {
  77. if (e.keyCode == 9) {
  78. e.preventDefault();
  79. showHiveAutocomplete(function () {
  80. var path = _el.val();
  81. if (path.indexOf(".") > -1) {
  82. path = path.substr(path.lastIndexOf(".") + 1);
  83. }
  84. guessHivePath(path);
  85. });
  86. }
  87. });
  88. function smartTooltipMaker() {
  89. if (_this.options.smartTooltip != "" && typeof $.totalStorage != "undefined" && $.totalStorage("jHueHiveAutocompleteTooltip") != -1) {
  90. var cnt = 0;
  91. if ($.totalStorage("jHueHiveAutocompleteTooltip") != null) {
  92. cnt = $.totalStorage("jHueHiveAutocompleteTooltip") + 1;
  93. }
  94. $.totalStorage("jHueHiveAutocompleteTooltip", cnt);
  95. if (cnt >= _this.options.smartTooltipThreshold) {
  96. _el.tooltip({
  97. animation: true,
  98. title: _this.options.smartTooltip,
  99. trigger: "manual",
  100. placement: "top"
  101. }).tooltip("show");
  102. window.setTimeout(function () {
  103. _el.tooltip("hide");
  104. }, 10000);
  105. $.totalStorage("jHueHiveAutocompleteTooltip", -1);
  106. }
  107. }
  108. }
  109. $(window).on("scroll", function(){
  110. $("#jHueHiveAutocomplete").css("top", _el.offset().top + _el.outerHeight() - 1).css("left", _el.offset().left).width(_el.outerWidth() - 4);
  111. });
  112. var _hiveAutocompleteSelectedIndex = -1;
  113. var _filterTimeout = -1;
  114. _el.keyup(function (e) {
  115. window.clearTimeout(_filterTimeout);
  116. if ($.inArray(e.keyCode, [17, 38, 40, 13, 32, 191]) == -1) {
  117. _hiveAutocompleteSelectedIndex = -1;
  118. _filterTimeout = window.setTimeout(function () {
  119. var path = _el.val();
  120. if (path.indexOf(".") > -1) {
  121. path = path.substr(path.lastIndexOf(".") + 1);
  122. }
  123. $("#jHueHiveAutocomplete ul li").show();
  124. if (path != ""){
  125. $("#jHueHiveAutocomplete ul li").each(function () {
  126. if ($(this).text().trim().indexOf(path) != 0) {
  127. $(this).hide();
  128. }
  129. });
  130. }
  131. }, 500);
  132. }
  133. if (e.keyCode == 38) {
  134. if (_hiveAutocompleteSelectedIndex <= 0) {
  135. _hiveAutocompleteSelectedIndex = $("#jHueHiveAutocomplete ul li:visible").length - 1;
  136. }
  137. else {
  138. _hiveAutocompleteSelectedIndex--;
  139. }
  140. }
  141. if (e.keyCode == 40) {
  142. if (_hiveAutocompleteSelectedIndex == $("#jHueHiveAutocomplete ul li:visible").length - 1) {
  143. _hiveAutocompleteSelectedIndex = 0;
  144. }
  145. else {
  146. _hiveAutocompleteSelectedIndex++;
  147. }
  148. }
  149. if (e.keyCode == 38 || e.keyCode == 40) {
  150. smartTooltipMaker();
  151. $("#jHueHiveAutocomplete ul li").removeClass("active");
  152. $("#jHueHiveAutocomplete ul li:visible").eq(_hiveAutocompleteSelectedIndex).addClass("active");
  153. $("#jHueHiveAutocomplete .popover-content").scrollTop($("#jHueHiveAutocomplete ul li:visible").eq(_hiveAutocompleteSelectedIndex).prevAll().length * $("#jHueHiveAutocomplete ul li:visible").eq(_hiveAutocompleteSelectedIndex).outerHeight());
  154. }
  155. if ((e.keyCode == 32 && e.ctrlKey) || e.keyCode == 191) {
  156. smartTooltipMaker();
  157. showHiveAutocomplete();
  158. }
  159. if (e.keyCode == 13) {
  160. _pauseBlur = true;
  161. if (_hiveAutocompleteSelectedIndex > -1) {
  162. $("#jHueHiveAutocomplete ul li:visible").eq(_hiveAutocompleteSelectedIndex).click();
  163. }
  164. else {
  165. _this.options.onEnter($(this));
  166. }
  167. $("#jHueHiveAutocomplete").hide();
  168. _hiveAutocompleteSelectedIndex = -1;
  169. }
  170. });
  171. if (_this.options.showOnFocus){
  172. _el.on("focus", function(){
  173. showHiveAutocomplete();
  174. });
  175. }
  176. var _pauseBlur = false;
  177. _el.blur(function () {
  178. if (!_pauseBlur) {
  179. $(document.body).off("contextmenu");
  180. $("#jHueHiveAutocomplete").hide();
  181. _this.options.onBlur();
  182. }
  183. });
  184. var BASE_PATH = "/beeswax/api/autocomplete/";
  185. if (_this.options.serverType == "IMPALA"){
  186. BASE_PATH = "/impala/api/autocomplete/";
  187. }
  188. var _currentFiles = [];
  189. function showHiveAutocomplete(callback) {
  190. var path = _el.val();
  191. var autocompleteUrl = BASE_PATH;
  192. if (path != "" && path.indexOf(".") == -1) {
  193. path = "";
  194. }
  195. if (path != "" && path.lastIndexOf(".") != path.length - 1) {
  196. path = path.substring(0, _el.val().lastIndexOf("."));
  197. }
  198. autocompleteUrl += path.replace(/\./g, "/");
  199. $.getJSON(autocompleteUrl, function (data) {
  200. if (data.error == null) {
  201. _currentFiles = [];
  202. var _ico = "";
  203. var _iterable = [];
  204. var _isSkipColumns = false;
  205. if (data.databases != null){ // it's a db
  206. _iterable = data.databases;
  207. _ico = "fa-database";
  208. }
  209. else if (data.tables != null) { // it's a table
  210. _iterable = data.tables;
  211. _ico = "fa-table";
  212. }
  213. else {
  214. if (! _this.options.skipColumns) {
  215. _iterable = data.columns;
  216. _ico = "fa-columns";
  217. }
  218. else {
  219. _isSkipColumns = true;
  220. }
  221. }
  222. if (! _isSkipColumns){
  223. $(_iterable).each(function (cnt, item) {
  224. _currentFiles.push('<li class="hiveAutocompleteItem" data-value="' + item + '"><i class="fa '+ _ico +'"></i> ' + item + '</li>');
  225. });
  226. $("#jHueHiveAutocomplete").css("top", _el.offset().top + _el.outerHeight() - 1).css("left", _el.offset().left).width(_el.outerWidth() - 4);
  227. $("#jHueHiveAutocomplete").find("ul").empty().html(_currentFiles.join(""));
  228. $("#jHueHiveAutocomplete").find("li").on("click", function (e) {
  229. smartTooltipMaker();
  230. e.preventDefault();
  231. var item = $(this).text().trim();
  232. var path = autocompleteUrl.substring(BASE_PATH.length);
  233. if ($(this).html().indexOf("database") > -1){
  234. _el.val(item + ".");
  235. _this.options.onPathChange(_el.val());
  236. showHiveAutocomplete();
  237. }
  238. if ($(this).html().indexOf("table") > -1){
  239. if (_el.val().indexOf(".") > -1){
  240. if (_el.val().match(/\./gi).length == 1){
  241. _el.val(_el.val().substring(0, _el.val().lastIndexOf(".") + 1) + item);
  242. }
  243. else {
  244. _el.val(_el.val().substring(0, _el.val().indexOf(".") + 1) + item);
  245. }
  246. }
  247. else {
  248. _el.val(_el.val() + item);
  249. }
  250. if (! _this.options.skipColumns){
  251. _el.val(_el.val() + ".");
  252. }
  253. _this.options.onPathChange(_el.val());
  254. if (! _this.options.skipColumns) {
  255. showHiveAutocomplete();
  256. }
  257. else {
  258. _this.options.onEnter(_el);
  259. $("#jHueHiveAutocomplete").hide();
  260. _hiveAutocompleteSelectedIndex = -1;
  261. }
  262. }
  263. if ($(this).html().indexOf("columns") > -1){
  264. if (_el.val().match(/\./gi).length > 1){
  265. _el.val(_el.val().substring(0, _el.val().lastIndexOf(".") + 1) + item);
  266. }
  267. else {
  268. _el.val(_el.val() + "." + item);
  269. }
  270. $("#jHueHiveAutocomplete").hide();
  271. _hiveAutocompleteSelectedIndex = -1;
  272. _this.options.onEnter(_el);
  273. }
  274. });
  275. $("#jHueHiveAutocomplete").show();
  276. window.setTimeout(function(){
  277. setHueBreadcrumbCaretAtEnd(_this.element);
  278. }, 100)
  279. if ("undefined" != typeof callback) {
  280. callback();
  281. }
  282. }
  283. }
  284. });
  285. }
  286. $(document).on("mouseenter", ".hiveAutocompleteItem", function () {
  287. _pauseBlur = true;
  288. });
  289. $(document).on("mouseout", ".hiveAutocompleteItem", function () {
  290. _pauseBlur = false;
  291. })
  292. function guessHivePath(lastChars) {
  293. var possibleMatches = [];
  294. for (var i = 0; i < _currentFiles.length; i++) {
  295. if (($(_currentFiles[i]).text().trim().indexOf(lastChars) == 0 || lastChars == "") && $(_currentFiles[i]).text().trim() != "..") {
  296. possibleMatches.push(_currentFiles[i]);
  297. }
  298. }
  299. if (possibleMatches.length == 1) {
  300. _el.val(_el.val() + $(possibleMatches[0]).text().trim().substr(lastChars.length));
  301. if ($(possibleMatches[0]).html().indexOf("folder") > -1) {
  302. _el.val(_el.val() + "/");
  303. showHiveAutocomplete();
  304. }
  305. }
  306. else if (possibleMatches.length > 1) {
  307. // finds the longest common prefix
  308. var possibleMatchesPlain = [];
  309. for (var z = 0; z < possibleMatches.length; z++) {
  310. possibleMatchesPlain.push($(possibleMatches[z]).text().trim());
  311. }
  312. var arr = possibleMatchesPlain.slice(0).sort(),
  313. word1 = arr[0], word2 = arr[arr.length - 1],
  314. j = 0;
  315. while (word1.charAt(j) == word2.charAt(j))++j;
  316. var match = word1.substring(0, j);
  317. _el.val(_el.val() + match.substr(lastChars.length));
  318. }
  319. }
  320. };
  321. Plugin.prototype.setOptions = function (options) {
  322. this.options = $.extend({}, defaults, options);
  323. };
  324. $.fn[pluginName] = function (options) {
  325. return this.each(function () {
  326. if (!$.data(this, 'plugin_' + pluginName)) {
  327. $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
  328. }
  329. });
  330. }
  331. $[pluginName] = function (options) {
  332. if (typeof console != "undefined") {
  333. console.warn("$(elem).jHueHiveAutocomplete() is a preferred call method.");
  334. }
  335. $(options.element).jHueHiveAutocomplete(options);
  336. };
  337. })(jQuery, window, document);