ext-searchbox.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514
  1. ace.define("ace/ext/searchbox",["require","exports","module","ace/lib/dom","ace/lib/lang","ace/lib/event","ace/keyboard/hash_handler","ace/lib/keys"], function(require, exports, module) {
  2. "use strict";
  3. var dom = require("../lib/dom");
  4. var lang = require("../lib/lang");
  5. var event = require("../lib/event");
  6. var searchboxCss = "\
  7. .ace_search {\
  8. background-color: #ddd;\
  9. color: #666;\
  10. border: 1px solid #cbcbcb;\
  11. border-top: 0 none;\
  12. overflow: hidden;\
  13. margin: 0;\
  14. padding: 4px 6px 0 4px;\
  15. position: absolute;\
  16. top: 0;\
  17. z-index: 99;\
  18. white-space: normal;\
  19. }\
  20. .ace_search.left {\
  21. border-left: 0 none;\
  22. border-radius: 0px 0px 5px 0px;\
  23. left: 0;\
  24. }\
  25. .ace_search.right {\
  26. border-radius: 0px 0px 0px 5px;\
  27. border-right: 0 none;\
  28. right: 0;\
  29. }\
  30. .ace_search_form, .ace_replace_form {\
  31. margin: 0 20px 4px 0;\
  32. overflow: hidden;\
  33. line-height: 1.9;\
  34. }\
  35. .ace_replace_form {\
  36. margin-right: 0;\
  37. }\
  38. .ace_search_form.ace_nomatch {\
  39. outline: 1px solid red;\
  40. }\
  41. .ace_search_field {\
  42. border-radius: 3px 0 0 3px;\
  43. background-color: white;\
  44. color: black;\
  45. border: 1px solid #cbcbcb;\
  46. border-right: 0 none;\
  47. outline: 0;\
  48. padding: 0;\
  49. font-size: inherit;\
  50. margin: 0;\
  51. line-height: inherit;\
  52. padding: 0 6px;\
  53. min-width: 17em;\
  54. vertical-align: top;\
  55. min-height: 1.8em;\
  56. box-sizing: content-box;\
  57. }\
  58. .ace_searchbtn {\
  59. border: 1px solid #cbcbcb;\
  60. line-height: inherit;\
  61. display: inline-block;\
  62. padding: 0 6px;\
  63. background: #fff;\
  64. border-right: 0 none;\
  65. border-left: 1px solid #dcdcdc;\
  66. cursor: pointer;\
  67. margin: 0;\
  68. position: relative;\
  69. color: #666;\
  70. }\
  71. .ace_searchbtn:last-child {\
  72. border-radius: 0 3px 3px 0;\
  73. border-right: 1px solid #cbcbcb;\
  74. }\
  75. .ace_searchbtn:disabled {\
  76. background: none;\
  77. cursor: default;\
  78. }\
  79. .ace_searchbtn:hover {\
  80. background-color: #eef1f6;\
  81. }\
  82. .ace_searchbtn.prev, .ace_searchbtn.next {\
  83. padding: 0px 0.7em\
  84. }\
  85. .ace_searchbtn.prev:after, .ace_searchbtn.next:after {\
  86. content: \"\";\
  87. border: solid 2px #888;\
  88. width: 0.5em;\
  89. height: 0.5em;\
  90. border-width: 2px 0 0 2px;\
  91. display:inline-block;\
  92. transform: rotate(-45deg);\
  93. }\
  94. .ace_searchbtn.next:after {\
  95. border-width: 0 2px 2px 0 ;\
  96. }\
  97. .ace_searchbtn_close {\
  98. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAcCAYAAABRVo5BAAAAZ0lEQVR42u2SUQrAMAhDvazn8OjZBilCkYVVxiis8H4CT0VrAJb4WHT3C5xU2a2IQZXJjiQIRMdkEoJ5Q2yMqpfDIo+XY4k6h+YXOyKqTIj5REaxloNAd0xiKmAtsTHqW8sR2W5f7gCu5nWFUpVjZwAAAABJRU5ErkJggg==) no-repeat 50% 0;\
  99. border-radius: 50%;\
  100. border: 0 none;\
  101. color: #656565;\
  102. cursor: pointer;\
  103. font: 16px/16px Arial;\
  104. padding: 0;\
  105. height: 14px;\
  106. width: 14px;\
  107. top: 9px;\
  108. right: 7px;\
  109. position: absolute;\
  110. }\
  111. .ace_searchbtn_close:hover {\
  112. background-color: #656565;\
  113. background-position: 50% 100%;\
  114. color: white;\
  115. }\
  116. .ace_button {\
  117. margin-left: 2px;\
  118. cursor: pointer;\
  119. -webkit-user-select: none;\
  120. -moz-user-select: none;\
  121. -o-user-select: none;\
  122. -ms-user-select: none;\
  123. user-select: none;\
  124. overflow: hidden;\
  125. opacity: 0.7;\
  126. border: 1px solid rgba(100,100,100,0.23);\
  127. padding: 1px;\
  128. box-sizing: border-box!important;\
  129. color: black;\
  130. }\
  131. .ace_button:hover {\
  132. background-color: #eee;\
  133. opacity:1;\
  134. }\
  135. .ace_button:active {\
  136. background-color: #ddd;\
  137. }\
  138. .ace_button.checked {\
  139. border-color: #3399ff;\
  140. opacity:1;\
  141. }\
  142. .ace_search_options{\
  143. margin-bottom: 3px;\
  144. text-align: right;\
  145. -webkit-user-select: none;\
  146. -moz-user-select: none;\
  147. -o-user-select: none;\
  148. -ms-user-select: none;\
  149. user-select: none;\
  150. clear: both;\
  151. }\
  152. .ace_search_counter {\
  153. float: left;\
  154. font-family: arial;\
  155. padding: 0 8px;\
  156. }";
  157. var HashHandler = require("../keyboard/hash_handler").HashHandler;
  158. var keyUtil = require("../lib/keys");
  159. var MAX_COUNT = 999;
  160. dom.importCssString(searchboxCss, "ace_searchbox");
  161. var SearchBox = function(editor, range, showReplaceForm) {
  162. var div = dom.createElement("div");
  163. dom.buildDom(["div", {class:"ace_search right"},
  164. ["span", {action: "hide", class: "ace_searchbtn_close"}],
  165. ["div", {class: "ace_search_form"},
  166. ["input", {class: "ace_search_field", placeholder: "Search for", spellcheck: "false"}],
  167. ["span", {action: "findPrev", class: "ace_searchbtn prev"}, "\u200b"],
  168. ["span", {action: "findNext", class: "ace_searchbtn next"}, "\u200b"],
  169. ["span", {action: "findAll", class: "ace_searchbtn", title: "Alt-Enter"}, "All"]
  170. ],
  171. ["div", {class: "ace_replace_form"},
  172. ["input", {class: "ace_search_field", placeholder: "Replace with", spellcheck: "false"}],
  173. ["span", {action: "replaceAndFindNext", class: "ace_searchbtn"}, "Replace"],
  174. ["span", {action: "replaceAll", class: "ace_searchbtn"}, "All"]
  175. ],
  176. ["div", {class: "ace_search_options"},
  177. ["span", {action: "toggleReplace", class: "ace_button", title: "Toggle Replace mode",
  178. style: "float:left;margin-top:-2px;padding:0 5px;"}, "+"],
  179. ["span", {class: "ace_search_counter"}],
  180. ["span", {action: "toggleRegexpMode", class: "ace_button", title: "RegExp Search"}, ".*"],
  181. ["span", {action: "toggleCaseSensitive", class: "ace_button", title: "CaseSensitive Search"}, "Aa"],
  182. ["span", {action: "toggleWholeWords", class: "ace_button", title: "Whole Word Search"}, "\\b"],
  183. ["span", {action: "searchInSelection", class: "ace_button", title: "Search In Selection"}, "S"]
  184. ]
  185. ], div);
  186. this.element = div.firstChild;
  187. this.setSession = this.setSession.bind(this);
  188. this.$init();
  189. this.setEditor(editor);
  190. dom.importCssString(searchboxCss, "ace_searchbox", editor.container);
  191. };
  192. (function() {
  193. this.setEditor = function(editor) {
  194. editor.searchBox = this;
  195. editor.renderer.scroller.appendChild(this.element);
  196. this.editor = editor;
  197. };
  198. this.setSession = function(e) {
  199. this.searchRange = null;
  200. this.$syncOptions(true);
  201. };
  202. this.$initElements = function(sb) {
  203. this.searchBox = sb.querySelector(".ace_search_form");
  204. this.replaceBox = sb.querySelector(".ace_replace_form");
  205. this.searchOption = sb.querySelector("[action=searchInSelection]");
  206. this.replaceOption = sb.querySelector("[action=toggleReplace]");
  207. this.regExpOption = sb.querySelector("[action=toggleRegexpMode]");
  208. this.caseSensitiveOption = sb.querySelector("[action=toggleCaseSensitive]");
  209. this.wholeWordOption = sb.querySelector("[action=toggleWholeWords]");
  210. this.searchInput = this.searchBox.querySelector(".ace_search_field");
  211. this.replaceInput = this.replaceBox.querySelector(".ace_search_field");
  212. this.searchCounter = sb.querySelector(".ace_search_counter");
  213. };
  214. this.$init = function() {
  215. var sb = this.element;
  216. this.$initElements(sb);
  217. var _this = this;
  218. event.addListener(sb, "mousedown", function(e) {
  219. setTimeout(function(){
  220. _this.activeInput.focus();
  221. }, 0);
  222. event.stopPropagation(e);
  223. });
  224. event.addListener(sb, "click", function(e) {
  225. var t = e.target || e.srcElement;
  226. var action = t.getAttribute("action");
  227. if (action && _this[action])
  228. _this[action]();
  229. else if (_this.$searchBarKb.commands[action])
  230. _this.$searchBarKb.commands[action].exec(_this);
  231. event.stopPropagation(e);
  232. });
  233. event.addCommandKeyListener(sb, function(e, hashId, keyCode) {
  234. var keyString = keyUtil.keyCodeToString(keyCode);
  235. var command = _this.$searchBarKb.findKeyCommand(hashId, keyString);
  236. if (command && command.exec) {
  237. command.exec(_this);
  238. event.stopEvent(e);
  239. }
  240. });
  241. this.$onChange = lang.delayedCall(function() {
  242. _this.find(false, false);
  243. });
  244. event.addListener(this.searchInput, "input", function() {
  245. _this.$onChange.schedule(20);
  246. });
  247. event.addListener(this.searchInput, "focus", function() {
  248. _this.activeInput = _this.searchInput;
  249. _this.searchInput.value && _this.highlight();
  250. });
  251. event.addListener(this.replaceInput, "focus", function() {
  252. _this.activeInput = _this.replaceInput;
  253. _this.searchInput.value && _this.highlight();
  254. });
  255. };
  256. this.$closeSearchBarKb = new HashHandler([{
  257. bindKey: "Esc",
  258. name: "closeSearchBar",
  259. exec: function(editor) {
  260. editor.searchBox.hide();
  261. }
  262. }]);
  263. this.$searchBarKb = new HashHandler();
  264. this.$searchBarKb.bindKeys({
  265. "Ctrl-f|Command-f": function(sb) {
  266. var isReplace = sb.isReplace = !sb.isReplace;
  267. sb.replaceBox.style.display = isReplace ? "" : "none";
  268. sb.replaceOption.checked = false;
  269. sb.$syncOptions();
  270. sb.searchInput.focus();
  271. },
  272. "Ctrl-H|Command-Option-F": function(sb) {
  273. if (sb.editor.getReadOnly())
  274. return;
  275. sb.replaceOption.checked = true;
  276. sb.$syncOptions();
  277. sb.replaceInput.focus();
  278. },
  279. "Ctrl-G|Command-G": function(sb) {
  280. sb.findNext();
  281. },
  282. "Ctrl-Shift-G|Command-Shift-G": function(sb) {
  283. sb.findPrev();
  284. },
  285. "esc": function(sb) {
  286. setTimeout(function() { sb.hide();});
  287. },
  288. "Return": function(sb) {
  289. if (sb.activeInput == sb.replaceInput)
  290. sb.replace();
  291. sb.findNext();
  292. },
  293. "Shift-Return": function(sb) {
  294. if (sb.activeInput == sb.replaceInput)
  295. sb.replace();
  296. sb.findPrev();
  297. },
  298. "Alt-Return": function(sb) {
  299. if (sb.activeInput == sb.replaceInput)
  300. sb.replaceAll();
  301. sb.findAll();
  302. },
  303. "Tab": function(sb) {
  304. (sb.activeInput == sb.replaceInput ? sb.searchInput : sb.replaceInput).focus();
  305. }
  306. });
  307. this.$searchBarKb.addCommands([{
  308. name: "toggleRegexpMode",
  309. bindKey: {win: "Alt-R|Alt-/", mac: "Ctrl-Alt-R|Ctrl-Alt-/"},
  310. exec: function(sb) {
  311. sb.regExpOption.checked = !sb.regExpOption.checked;
  312. sb.$syncOptions();
  313. }
  314. }, {
  315. name: "toggleCaseSensitive",
  316. bindKey: {win: "Alt-C|Alt-I", mac: "Ctrl-Alt-R|Ctrl-Alt-I"},
  317. exec: function(sb) {
  318. sb.caseSensitiveOption.checked = !sb.caseSensitiveOption.checked;
  319. sb.$syncOptions();
  320. }
  321. }, {
  322. name: "toggleWholeWords",
  323. bindKey: {win: "Alt-B|Alt-W", mac: "Ctrl-Alt-B|Ctrl-Alt-W"},
  324. exec: function(sb) {
  325. sb.wholeWordOption.checked = !sb.wholeWordOption.checked;
  326. sb.$syncOptions();
  327. }
  328. }, {
  329. name: "toggleReplace",
  330. exec: function(sb) {
  331. sb.replaceOption.checked = !sb.replaceOption.checked;
  332. sb.$syncOptions();
  333. }
  334. }, {
  335. name: "searchInSelection",
  336. exec: function(sb) {
  337. sb.searchOption.checked = !sb.searchRange;
  338. sb.setSearchRange(sb.searchOption.checked && sb.editor.getSelectionRange());
  339. sb.$syncOptions();
  340. }
  341. }]);
  342. this.setSearchRange = function(range) {
  343. this.searchRange = range;
  344. if (range) {
  345. this.searchRangeMarker = this.editor.session.addMarker(range, "ace_active-line");
  346. } else if (this.searchRangeMarker) {
  347. this.editor.session.removeMarker(this.searchRangeMarker);
  348. this.searchRangeMarker = null;
  349. }
  350. };
  351. this.$syncOptions = function(preventScroll) {
  352. dom.setCssClass(this.replaceOption, "checked", this.searchRange);
  353. dom.setCssClass(this.searchOption, "checked", this.searchOption.checked);
  354. this.replaceOption.textContent = this.replaceOption.checked ? "-" : "+";
  355. dom.setCssClass(this.regExpOption, "checked", this.regExpOption.checked);
  356. dom.setCssClass(this.wholeWordOption, "checked", this.wholeWordOption.checked);
  357. dom.setCssClass(this.caseSensitiveOption, "checked", this.caseSensitiveOption.checked);
  358. var readOnly = this.editor.getReadOnly();
  359. this.replaceOption.style.display = readOnly ? "none" : "";
  360. this.replaceBox.style.display = this.replaceOption.checked && !readOnly ? "" : "none";
  361. this.find(false, false, preventScroll);
  362. };
  363. this.highlight = function(re) {
  364. this.editor.session.highlight(re || this.editor.$search.$options.re);
  365. this.editor.renderer.updateBackMarkers();
  366. };
  367. this.find = function(skipCurrent, backwards, preventScroll) {
  368. var range = this.editor.find(this.searchInput.value, {
  369. skipCurrent: skipCurrent,
  370. backwards: backwards,
  371. wrap: true,
  372. regExp: this.regExpOption.checked,
  373. caseSensitive: this.caseSensitiveOption.checked,
  374. wholeWord: this.wholeWordOption.checked,
  375. preventScroll: preventScroll,
  376. range: this.searchRange
  377. });
  378. var noMatch = !range && this.searchInput.value;
  379. dom.setCssClass(this.searchBox, "ace_nomatch", noMatch);
  380. this.editor._emit("findSearchBox", { match: !noMatch });
  381. this.highlight();
  382. this.updateCounter();
  383. };
  384. this.updateCounter = function() {
  385. var editor = this.editor;
  386. var regex = editor.$search.$options.re;
  387. var all = 0;
  388. var before = 0;
  389. if (regex) {
  390. var value = this.searchRange
  391. ? editor.session.getTextRange(this.searchRange)
  392. : editor.getValue();
  393. var offset = editor.session.doc.positionToIndex(editor.selection.anchor);
  394. if (this.searchRange)
  395. offset -= editor.session.doc.positionToIndex(this.searchRange.start);
  396. var last = regex.lastIndex = 0;
  397. var m;
  398. while ((m = regex.exec(value))) {
  399. all++;
  400. last = m.index;
  401. if (last <= offset)
  402. before++;
  403. if (all > MAX_COUNT)
  404. break;
  405. if (!m[0]) {
  406. regex.lastIndex = last += 1;
  407. if (last >= value.length)
  408. break;
  409. }
  410. }
  411. }
  412. this.searchCounter.textContent = before + " of " + (all > MAX_COUNT ? MAX_COUNT + "+" : all);
  413. };
  414. this.findNext = function() {
  415. this.find(true, false);
  416. };
  417. this.findPrev = function() {
  418. this.find(true, true);
  419. };
  420. this.findAll = function(){
  421. var range = this.editor.findAll(this.searchInput.value, {
  422. regExp: this.regExpOption.checked,
  423. caseSensitive: this.caseSensitiveOption.checked,
  424. wholeWord: this.wholeWordOption.checked
  425. });
  426. var noMatch = !range && this.searchInput.value;
  427. dom.setCssClass(this.searchBox, "ace_nomatch", noMatch);
  428. this.editor._emit("findSearchBox", { match: !noMatch });
  429. this.highlight();
  430. this.hide();
  431. };
  432. this.replace = function() {
  433. if (!this.editor.getReadOnly())
  434. this.editor.replace(this.replaceInput.value);
  435. };
  436. this.replaceAndFindNext = function() {
  437. if (!this.editor.getReadOnly()) {
  438. this.editor.replace(this.replaceInput.value);
  439. this.findNext();
  440. }
  441. };
  442. this.replaceAll = function() {
  443. if (!this.editor.getReadOnly())
  444. this.editor.replaceAll(this.replaceInput.value);
  445. };
  446. this.hide = function() {
  447. this.active = false;
  448. this.setSearchRange(null);
  449. this.editor.off("changeSession", this.setSession);
  450. this.element.style.display = "none";
  451. this.editor.keyBinding.removeKeyboardHandler(this.$closeSearchBarKb);
  452. this.editor.focus();
  453. };
  454. this.show = function(value, isReplace) {
  455. this.active = true;
  456. this.editor.on("changeSession", this.setSession);
  457. this.element.style.display = "";
  458. this.replaceOption.checked = isReplace;
  459. if (value)
  460. this.searchInput.value = value;
  461. this.searchInput.focus();
  462. this.searchInput.select();
  463. this.editor.keyBinding.addKeyboardHandler(this.$closeSearchBarKb);
  464. this.$syncOptions(true);
  465. };
  466. this.isFocused = function() {
  467. var el = document.activeElement;
  468. return el == this.searchInput || el == this.replaceInput;
  469. };
  470. }).call(SearchBox.prototype);
  471. exports.SearchBox = SearchBox;
  472. exports.Search = function(editor, isReplace) {
  473. var sb = editor.searchBox || new SearchBox(editor);
  474. sb.show(editor.session.getTextRange(), isReplace);
  475. };
  476. }); (function() {
  477. ace.require(["ace/ext/searchbox"], function(m) {
  478. if (typeof module == "object" && typeof exports == "object" && module) {
  479. module.exports = m;
  480. }
  481. });
  482. })();