codemirror-show-hint.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. CodeMirror.registerHelper = function(what, language, hinter) {
  2. // avoids JS errors for the unsupported method
  3. console.error("Hello Hue dev, we are currently using a version of CodeMirror 3 that does not support .registerHelper. Please use the CodeMirror.languageHint = languageHint syntax instead");
  4. }
  5. CodeMirror.showHint = function(cm, getHints, options) {
  6. if (!options) options = {};
  7. var startCh = cm.getCursor().ch, continued = false;
  8. function startHinting() {
  9. // We want a single cursor position.
  10. if (cm.somethingSelected()) return;
  11. if (options.async)
  12. getHints(cm, showHints, options);
  13. else
  14. return showHints(getHints(cm, options));
  15. }
  16. function showHints(data) {
  17. data.list.clean("");
  18. $(".CodeMirror-spinner").remove();
  19. if (!data || !data.list.length) return;
  20. var completions = data.list;
  21. // When there is only one completion, use it directly.
  22. if (!continued && options.completeSingle !== false && completions.length == 1) {
  23. cm.replaceRange(completions[0], data.from, data.to);
  24. return true;
  25. }
  26. // Build the select widget
  27. var hints = document.createElement("ul"), selectedHint = 0;
  28. hints.className = "CodeMirror-hints";
  29. for (var i = 0; i < completions.length; ++i) {
  30. var elt = hints.appendChild(document.createElement("li"));
  31. elt.className = "CodeMirror-hint" + (i ? "" : " CodeMirror-hint-active");
  32. //elt.appendChild(document.createTextNode(completions[i]));
  33. elt.innerHTML = completions[i];
  34. elt.hintId = i;
  35. }
  36. var pos = cm.cursorCoords(options.alignWithWord !== false ? data.from : null);
  37. var left = pos.left, top = pos.bottom, below = true;
  38. hints.style.left = left + "px";
  39. hints.style.top = top + "px";
  40. document.body.appendChild(hints);
  41. // If we're at the edge of the screen, then we want the menu to appear on the left of the cursor.
  42. var winW = window.innerWidth || Math.max(document.body.offsetWidth, document.documentElement.offsetWidth);
  43. var winH = window.innerHeight || Math.max(document.body.offsetHeight, document.documentElement.offsetHeight);
  44. var box = hints.getBoundingClientRect();
  45. var overlapX = box.right - winW, overlapY = box.bottom - winH;
  46. if (overlapX > 0) {
  47. if (box.right - box.left > winW) {
  48. hints.style.width = (winW - 5) + "px";
  49. overlapX -= (box.right - box.left) - winW;
  50. }
  51. hints.style.left = (left = pos.left - overlapX) + "px";
  52. }
  53. if (overlapY > 0) {
  54. var height = box.bottom - box.top;
  55. if (box.top - (pos.bottom - pos.top) - height > 0) {
  56. overlapY = height + (pos.bottom - pos.top);
  57. below = false;
  58. } else if (height > winH) {
  59. hints.style.height = (winH - 5) + "px";
  60. overlapY -= height - winH;
  61. }
  62. hints.style.top = (top = pos.bottom - overlapY) + "px";
  63. }
  64. function changeActive(i) {
  65. i = Math.max(0, Math.min(i, completions.length - 1));
  66. if (selectedHint == i) return;
  67. hints.childNodes[selectedHint].className = "CodeMirror-hint";
  68. var node = hints.childNodes[selectedHint = i];
  69. node.className = "CodeMirror-hint CodeMirror-hint-active";
  70. if (node.offsetTop < hints.scrollTop)
  71. hints.scrollTop = node.offsetTop - 3;
  72. else if (node.offsetTop + node.offsetHeight > hints.scrollTop + hints.clientHeight)
  73. hints.scrollTop = node.offsetTop + node.offsetHeight - hints.clientHeight + 3;
  74. }
  75. function screenAmount() {
  76. return Math.floor(hints.clientHeight / hints.firstChild.offsetHeight) || 1;
  77. }
  78. var ourMap = {
  79. Up: function() {changeActive(selectedHint - 1);},
  80. Down: function() {changeActive(selectedHint + 1);},
  81. PageUp: function() {changeActive(selectedHint - screenAmount());},
  82. PageDown: function() {changeActive(selectedHint + screenAmount());},
  83. Home: function() {changeActive(0);},
  84. End: function() {changeActive(completions.length - 1);},
  85. Enter: pick,
  86. Tab: pick,
  87. Esc: close
  88. };
  89. if (options.customKeys) for (var key in options.customKeys) if (options.customKeys.hasOwnProperty(key)) {
  90. var val = options.customKeys[key];
  91. if (/^(Up|Down|Enter|Esc)$/.test(key)) val = ourMap[val];
  92. ourMap[key] = val;
  93. }
  94. cm.addKeyMap(ourMap);
  95. cm.on("cursorActivity", cursorActivity);
  96. var closingOnBlur;
  97. function onBlur(){ closingOnBlur = setTimeout(close, 100); };
  98. function onFocus(){ clearTimeout(closingOnBlur); };
  99. cm.on("blur", onBlur);
  100. cm.on("focus", onFocus);
  101. var startScroll = cm.getScrollInfo();
  102. function onScroll() {
  103. var curScroll = cm.getScrollInfo(), editor = cm.getWrapperElement().getBoundingClientRect();
  104. var newTop = top + startScroll.top - curScroll.top, point = newTop;
  105. if (!below) point += hints.offsetHeight;
  106. if (point <= editor.top || point >= editor.bottom) return close();
  107. hints.style.top = newTop + "px";
  108. hints.style.left = (left + startScroll.left - curScroll.left) + "px";
  109. }
  110. cm.on("scroll", onScroll);
  111. CodeMirror.on(hints, "dblclick", function(e) {
  112. var t = e.target || e.srcElement;
  113. if (t.hintId != null) {selectedHint = t.hintId; pick();}
  114. setTimeout(function(){cm.focus();}, 20);
  115. });
  116. CodeMirror.on(hints, "click", function(e) {
  117. var t = e.target || e.srcElement;
  118. if (t.hintId != null) {selectedHint = t.hintId; pick();}
  119. setTimeout(function(){cm.focus();}, 20);
  120. });
  121. var done = false, once;
  122. function close() {
  123. if (done) return;
  124. done = true;
  125. clearTimeout(once);
  126. hints.parentNode.removeChild(hints);
  127. cm.removeKeyMap(ourMap);
  128. cm.off("cursorActivity", cursorActivity);
  129. cm.off("blur", onBlur);
  130. cm.off("focus", onFocus);
  131. cm.off("scroll", onScroll);
  132. }
  133. function pick() {
  134. var _insertion = strip(completions[selectedHint]).replace(/(?:(?:^|\n)\s+|\s+(?:$|\n))/g,'').replace(/\s+/g,' ');
  135. if (CodeMirror.isPath){
  136. var _curRange = cm.getRange(data.from, data.to);
  137. if (_curRange.indexOf("/") > -1){
  138. _insertion = _curRange.substring(0, _curRange.lastIndexOf("/") + 1) + _insertion;
  139. }
  140. else {
  141. if (_curRange != ""){
  142. _insertion = "'" + _insertion;
  143. }
  144. }
  145. }
  146. cm.replaceRange(_insertion, data.from, data.to);
  147. if (CodeMirror.onAutocomplete !== "undefined" && CodeMirror.onAutocomplete != null) {
  148. CodeMirror.onAutocomplete(_insertion, data.from, data.to);
  149. }
  150. close();
  151. }
  152. function strip(html){
  153. var tmp = document.createElement("DIV");
  154. tmp.innerHTML = html;
  155. return tmp.textContent||tmp.innerText;
  156. }
  157. var once, lastPos = cm.getCursor(), lastLen = cm.getLine(lastPos.line).length;
  158. function cursorActivity() {
  159. clearTimeout(once);
  160. var pos = cm.getCursor(), len = cm.getLine(pos.line).length;
  161. if (pos.line != lastPos.line || len - pos.ch != lastLen - lastPos.ch ||
  162. pos.ch < startCh || cm.somethingSelected())
  163. close();
  164. else
  165. once = setTimeout(function(){close(); continued = true; startHinting();}, 70);
  166. }
  167. return true;
  168. }
  169. return startHinting();
  170. };