ext-searchbox.js 16 KB

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