codemirror-show-hint.js 6.7 KB

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