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