codemirror-show-hint.js 6.7 KB

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