jyapayne/ace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tweak searchbox

Browse source
This commit is contained in:
nightwing 2012-12-12 00:05:59 +04:00
commit b1f9b95755
4 changed files with 307 additions and 319 deletions
Download patch file Download diff file Expand all files Collapse all files

20
lib/ace/commands/default_commands.js
View file

@ -32,8 +32,8 @@ define(function(require, exports, module) {
"use strict";
var lang = require("../lib/lang");
var config = require("../config");
var SearchBox = require("ace/ext/searchbox");
function bindKey(win, mac) {
return {
win: win,
@ -95,7 +95,7 @@ exports.commands = [{
name: "find",
bindKey: bindKey("Ctrl-F", "Command-F"),
exec: function(editor) {
SearchBox.SearchBox(editor, editor.getSelectionRange());
config.loadModule("ace/ext/searchbox", function(e) {e.Search(editor)});
},
readOnly: true
}, {
@ -343,21 +343,9 @@ exports.commands = [{
multiSelectAction: "forEach"
}, {
name: "replace",
bindKey: bindKey("Ctrl-R", "Command-Option-F"),
bindKey: bindKey("Ctrl-H", "Command-Option-F"),
exec: function(editor) {
SearchBox.SearchBox(editor, editor.getSelectionRange(), true);
}
}, {
name: "replaceall",
bindKey: bindKey("Ctrl-Shift-R", "Command-Shift-Option-F"),
exec: function(editor) {
var needle = prompt("Find:");
if (!needle)
return;
var replacement = prompt("Replacement:");
if (!replacement)
return;
editor.replaceAll(replacement, {needle: needle});
config.loadModule("ace/ext/searchbox", function(e) {e.Search(editor, true)});
}
}, {
name: "undo",

115
lib/ace/css/editor.css
View file

@ -366,118 +366,3 @@
.ace_italic {
font-style: italic;
}
/* ------------------------------------------------------------------------------------------
* Editor Search Form
* --------------------------------------------------------------------------------------- */
.ace_search {
background-color: #ddd;
border: 1px solid #cbcbcb;
border-top: 0 none;
max-width: 297px;
overflow: hidden;
padding: 4px;
padding-right: 6px;
padding-bottom: 0;
position: absolute;
top: 0px;
z-index: 99;
}
.ace_search.left {
border-left: 0 none;
border-radius: 0px 0px 5px 0px;
left: 0;
}
.ace_search.right {
border-radius: 0px 0px 0px 5px;
border-right: 0 none;
right: 0;
}
.ace_search_form {
border-radius: 3px;
border: 1px solid #cbcbcb;
float: left;
margin-bottom: 4px;
overflow: hidden;
}
.ace_search label {
float: left;
color: #656565;
}
.ace_search input {
background-color: white;
border-right: 1px solid #cbcbcb;
border: 0 none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
float: left;
height: 22px;
outline: 0;
padding: 0 7px;
width: 214px;
}
.ace_searchbtn,
.ace_replacebtn {
background: #fff;
border: 0 none;
border-left: 1px solid #dcdcdc;
cursor: pointer;
display: block;
float: left;
height: 22px;
margin: 0;
padding: 0;
position: relative;
}
.ace_searchbtn:last-child,
.ace_replacebtn:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.ace_searchbtn:disabled {
background: none;
cursor: default;
}
.ace_searchbtn {
background-position: 50% 50%;
background-repeat: no-repeat;
width: 27px;
}
.ace_searchbtn.prev {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADFJREFUeNpiSU1NZUAC/6E0I0yACYskCpsJiySKIiY0SUZk40FyTEgCjGgKwTRAgAEAQJUIPCE+qfkAAAAASUVORK5CYII=);
}
.ace_searchbtn.next {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADRJREFUeNpiTE1NZQCC/0DMyIAKwGJMUAYDEo3M/s+EpvM/mkKwCQxYjIeLMaELoLMBAgwAU7UJObTKsvAAAAAASUVORK5CYII=);
}
.ace_searchbtn_close {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAcCAYAAABRVo5BAAAAZ0lEQVR42u2SUQrAMAhDvazn8OjZBilCkYVVxiis8H4CT0VrAJb4WHT3C5xU2a2IQZXJjiQIRMdkEoJ5Q2yMqpfDIo+XY4k6h+YXOyKqTIj5REaxloNAd0xiKmAtsTHqW8sR2W5f7gCu5nWFUpVjZwAAAABJRU5ErkJggg==) no-repeat 50% 0;
border-radius: 50%;
border: 0 none;
color: #656565;
cursor: pointer;
display: block;
float: right;
font-family: Arial;
font-size: 16px;
height: 14px;
line-height: 16px;
margin: 5px 1px 9px 5px;
padding: 0;
text-align: center;
width: 14px;
}
.ace_searchbtn_close:hover {
background-color: #656565;
background-position: 50% 100%;
color: white;
}
.ace_replacebtn.prev {
width: 54px
}
.ace_replacebtn.next {
width: 27px
}

115
lib/ace/ext/searchbox.css Normal file
View file

@ -0,0 +1,115 @@
/* ------------------------------------------------------------------------------------------
* Editor Search Form
* --------------------------------------------------------------------------------------- */
.ace_search {
background-color: #ddd;
border: 1px solid #cbcbcb;
border-top: 0 none;
max-width: 297px;
overflow: hidden;
padding: 4px;
padding-right: 6px;
padding-bottom: 0;
position: absolute;
top: 0px;
z-index: 99;
}
.ace_search.left {
border-left: 0 none;
border-radius: 0px 0px 5px 0px;
left: 0;
}
.ace_search.right {
border-radius: 0px 0px 0px 5px;
border-right: 0 none;
right: 0;
}
.ace_search_form, .ace_replace_form {
border-radius: 3px;
border: 1px solid #cbcbcb;
float: left;
margin-bottom: 4px;
overflow: hidden;
}
.ace_search label {
float: left;
color: #656565;
}
.ace_search input {
background-color: white;
border-right: 1px solid #cbcbcb;
border: 0 none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
float: left;
height: 22px;
outline: 0;
padding: 0 7px;
width: 214px;
}
.ace_searchbtn,
.ace_replacebtn {
background: #fff;
border: 0 none;
border-left: 1px solid #dcdcdc;
cursor: pointer;
display: block;
float: left;
height: 22px;
margin: 0;
padding: 0;
position: relative;
}
.ace_searchbtn:last-child,
.ace_replacebtn:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.ace_searchbtn:disabled {
background: none;
cursor: default;
}
.ace_searchbtn {
background-position: 50% 50%;
background-repeat: no-repeat;
width: 27px;
}
.ace_searchbtn.prev {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADFJREFUeNpiSU1NZUAC/6E0I0yACYskCpsJiySKIiY0SUZk40FyTEgCjGgKwTRAgAEAQJUIPCE+qfkAAAAASUVORK5CYII=);
}
.ace_searchbtn.next {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADRJREFUeNpiTE1NZQCC/0DMyIAKwGJMUAYDEo3M/s+EpvM/mkKwCQxYjIeLMaELoLMBAgwAU7UJObTKsvAAAAAASUVORK5CYII=);
}
.ace_searchbtn_close {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAcCAYAAABRVo5BAAAAZ0lEQVR42u2SUQrAMAhDvazn8OjZBilCkYVVxiis8H4CT0VrAJb4WHT3C5xU2a2IQZXJjiQIRMdkEoJ5Q2yMqpfDIo+XY4k6h+YXOyKqTIj5REaxloNAd0xiKmAtsTHqW8sR2W5f7gCu5nWFUpVjZwAAAABJRU5ErkJggg==) no-repeat 50% 0;
border-radius: 50%;
border: 0 none;
color: #656565;
cursor: pointer;
display: block;
float: right;
font-family: Arial;
font-size: 16px;
height: 14px;
line-height: 16px;
margin: 5px 1px 9px 5px;
padding: 0;
text-align: center;
width: 14px;
}
.ace_searchbtn_close:hover {
background-color: #656565;
background-position: 50% 100%;
color: white;
}
.ace_replacebtn.prev {
width: 54px
}
.ace_replacebtn.next {
width: 27px
}

376
lib/ace/ext/searchbox.js
View file

@ -31,219 +31,219 @@
define(function(require, exports, module) {
"use strict";
var dom = require("ace/lib/dom");
var event = require("ace/lib/event");
var Range = require("ace/range").Range;
exports.SearchBox = function (editor, range, showReplaceForm) {
var _self = this;
var sb = null;//search box
var n = null;//needle
var r = null;//replace
var p = null;//parent DOM node
var dom = require("../lib/dom");
var lang = require("../lib/lang");
var event = require("../lib/event");
var searchboxCss = require("../requirejs/text!./searchbox.css");
var HashHandler = require("../keyboard/hash_handler").HashHandler;
var keyUtil = require("../lib/keys");
var needle = editor.session.getTextRange(range);
dom.importCssString(searchboxCss, "ace_searchbox");
var html = '<div class="ace_search right">\
<button action="hide" class="ace_searchbtn_close"></button>\
<div class="ace_search_form">\
<input type="text" class="ace_search_field" placeholder="Search for" spellcheck="false">\
<button action="findNext" class="ace_searchbtn next"></button>\
<button action="findPrev" class="ace_searchbtn prev"></button>\
</div>\
<div class="ace_replace_form">\
<input type="text" class="ace_search_field" placeholder="Replace with" spellcheck="false">\
<button action="replace" class="ace_replacebtn">Replace</button>\
<button action="replaceAll" class="ace_replacebtn">All</button>\
</div>\
</div>'.replace(/>\s+/g, ">");
var SearchBox = function(editor, range, showReplaceForm) {
var div = dom.createElement("div");
div.innerHTML = html;
this.element = div.firstChild;
this.$init();
this.setEditor(editor);
};
(function() {
this.setEditor = function(editor) {
editor.searchBox = this;
editor.container.appendChild(this.element);
this.editor = editor;
};
this.$init = function() {
var sb = this.element;
p = editor.container.parentNode;
sb = p.querySelector(".ace_search"); //the complete form
this.searchBox = sb.querySelector(".ace_search_form");
this.replaceBox = sb.querySelector(".ace_replace_form");
this.searchInput = this.searchBox.querySelector(".ace_search_field");
this.replaceInput = this.replaceBox.querySelector(".ace_search_field");
if(!sb) {
//Create the elements
sb = document.createElement("div");
sb.setAttribute("class", "ace_search right");
p.appendChild( sb );
var _this = this;
event.addListener(sb, "mousedown", function(e) {
setTimeout(function(){
_this.activeInput.focus();
}, 0);
event.stopPropagation(e);
});
event.addListener(sb, "click", function(e) {
var t = e.target;
var action = t.getAttribute("action");
if (action && _this[action])
_this[action]();
event.stopPropagation(e);
});
var c = document.createElement("button"); //cancel btn
c.setAttribute("type","button");
c.setAttribute("class","ace_searchbtn_close");
sb.appendChild( c );
c.onclick = _self.hide;
var sf = document.createElement("div"); //search form
sf.setAttribute("id", "ace_search_form");
sf.setAttribute("class", "ace_search_form");
sb.appendChild( sf );
n = document.createElement("input"); //needle
n.setAttribute("class", "ace_search_field");
n.setAttribute("id", "ace_search_field");
n.setAttribute("placeholder", "Search for");
n.setAttribute("type", "text");
sf.appendChild( n );
var sp = document.createElement("button");
sp.setAttribute("type","button");
sp.setAttribute("class","ace_searchbtn prev");
sf.appendChild( sp );
sp.onclick = _self.findPrev;
var sn = document.createElement("button");
sn.setAttribute("type","button");
sn.setAttribute("class","ace_searchbtn next");
sf.appendChild( sn );
sn.onclick = _self.findNext;
var rf = document.createElement("div"); //replace form
rf.setAttribute("id", "ace_replace_form");
rf.setAttribute("class", "ace_search_form");
rf.setAttribute("style", "display: none");
sb.appendChild( rf);
r = document.createElement("input"); //needle
r.setAttribute("class", "ace_search_field");
r.setAttribute("id", "ace_replace_field");
r.setAttribute("placeholder", "Replace with");
r.setAttribute("type", "text");
rf.appendChild( r );
var rr = document.createElement("button");
rr.setAttribute("type","button");
rr.setAttribute("class","ace_replacebtn prev");
rr.innerHTML = "Replace";
rf.appendChild( rr );
rr.onclick = _self.replace;
var ra = document.createElement("button");
ra.setAttribute("type","button");
ra.setAttribute("class","ace_replacebtn next");
ra.innerHTML = "All";
rf.appendChild( ra );
ra.onclick = _self.replaceAll;
} else {
sb.removeAttribute("style");
n = sb.querySelector("#ace_search_field");
r = sb.querySelector("#ace_replace_field");
}
console.log( "showReplaceForm", showReplaceForm );
if( showReplaceForm ) {
p.querySelector("#ace_replace_form").removeAttribute("style");
}
if( needle )
n.value = needle;
//set initial focus and select text in input
n.focus();
n.select();
//keybinging outsite of the searchbox
_self.$searchKeybingin = {
handleKeyboard: function(data, hashId, keyString, keyCode) {
console.log("MERGE");
if (keyString == "esc")
return {command: this.command};
},
command: {
exec: function(editor) {
_self.hide();
}
event.addCommandKeyListener(sb, function(e, hashId, keyCode) {
var keyString = keyUtil.keyCodeToString(keyCode);
var command = _this.$searchBarKb.findKeyCommand(hashId, keyString);
if (command && command.exec) {
command.exec(_this);
event.stopEvent(e);
}
};
editor.keyBinding.addKeyboardHandler(this.$searchKeybingin);
});
n.onkeydown = searchonkeydown;
r.onkeydown = searchonkeydown;
function searchonkeydown(e) {
this.$onChange = lang.delayedCall(function() {
_this.find(false, false);
});
var cmdKey = e.metaKey || e.ctrlKey;
console.log(cmdKey);
if( cmdKey ) {
if( e.which == 70 ) { //f key
var rf = p.querySelector("#ace_replace_form");
if( e.altKey && rf.hasAttribute("style") ) {
p.querySelector("#ace_replace_form").removeAttribute("style");
} else {
_self.hide();
}
return false;
}
}
if( e.which === 9 ) { //tab
if( e.target == n ) {
r.focus();
r.select();
} else {
n.focus();
n.select();
}
return false;
}
}
n.onpaste = function(e) {
//I do this because the onpaste event is fired before the value of the input actually changes
setTimeout(function() {
e.target.onkeyup();
}, 100);
}
n.onkeyup = function(e){
console.log("KEYUP", e);
if(!e) {
e = {};
e.which = 0;
}
if( e.which === 27 ) { //esc key
_self.hide();
} else if( e.which === 13 ) { //enter key
_self.findNext( );
} else {
editor.moveCursorTo( range.start.row, range.start.column );
_self.findNext();
}
};
r.onkeyup = function(e){
if( e.which === 27 ) { //esc key
_self.hide();
} else if( e.which === 13 ) { //enter key
editor.moveCursorTo( range.start.row, range.start.column );
_self.replace();
}
};
event.addListener(this.searchInput, "input", function() {
_this.$onChange.schedule(20);
});
event.addListener(this.searchInput, "focus", function() {
_this.activeInput = _this.searchInput;
});
event.addListener(this.replaceInput, "focus", function() {
_this.activeInput = _this.replaceInput;
});
};
this.findPrev = function() {
editor.find(n.value, {
backwards: true,
//keybinging outsite of the searchbox
this.$closeSearchBarKb = new HashHandler([{
bindKey: "Esc",
name: "closeSearchBar",
exec: function(editor) {
editor.searchBox.hide();
}
}]);
//keybinging outsite of the searchbox
this.$searchBarKb = new HashHandler();
this.$searchBarKb.bindKeys({
"Ctrl-f|Command-f|Ctrl-H|Command-Option-F": function(sb) {
var isReplace = sb.isReplace = !sb.isReplace;
sb.replaceBox.style.display = isReplace ? "" : "none";
sb[isReplace ? "replaceInput" : "searchInput"].focus();
},
"esc": function(sb) {
setTimeout(function() { sb.hide();});
},
"Return": function(sb) {
if (sb.activeInput == sb.replaceInput)
sb.replace();
sb.findNext();
},
"Shift-Return": function(sb) {
if (sb.activeInput == sb.replaceInput)
sb.replace();
sb.findPrev();
},
"Tab": function(sb) {
(sb.activeInput == sb.replaceInput ? sb.searchInput : sb.replaceInput).focus();
}
});
this.find = function(skipCurrent, backwards) {
this.editor.find(this.searchInput.value, {
skipCurrent: skipCurrent,
backwards: backwards,
wrap: true
});
this.editor.session.highlight(this.editor.$search.$options.re);
};
this.findNext = function() {
editor.find(n.value, {
backwards: false,
wrap: true
});
this.find(true, false);
};
this.findPrev = function() {
this.find(true, true);
};
this.replace = function() {
editor.replace( r.value );
_self.findNext();
this.editor.replace(this.replaceInput.value);
this.findNext();
};
this.replaceAll = function() {
editor.replaceAll( r.value );
this.editor.replaceAll(this.replaceInput.value);
};
this.hide = function () {
n.value = "";
r.value = "";
sb.setAttribute("style", "display: none");
sb.querySelector("#ace_replace_form").setAttribute("style", "display: none");
editor.keyBinding.removeKeyboardHandler(this.$searchKeybingin);
editor.focus();
this.element.style.display = "none";
this.editor.keyBinding.removeKeyboardHandler(this.$searchKeybingin);
this.editor.focus();
};
this.show = function(value, isReplace) {
this.element.style.display = "";
this.replaceBox.style.display = isReplace ? "" : "none";
this.isReplace = isReplace;
if (value)
this.searchInput.value = value;
this.searchInput.focus();
this.searchInput.select();
this.editor.keyBinding.addKeyboardHandler(this.$closeSearchBarKb);
};
_self.$init();
}).call(SearchBox.prototype);
exports.SearchBox = SearchBox;
exports.Search = function(editor, isReplace) {
var sb = editor.searchBox || new SearchBox(editor);
sb.show(editor.session.getTextRange(), isReplace);
};
exports.ISearch = function(session, options) {
this.$changeListener = this.$changeListener.bind(this);
this.startRange = session.selection.toOrientedRange();
this.options = options || {};
};
(function(){
this.setSession = function(session) {
if (this.session) {
this.session.removeListener(this.$changeListener);
}
this.session = session;
this.session.addListener(this.$changeListener);
};
this.setSearchString = function() {
};
this.getValue = function() {
if (this.value == null)
this.value = this.session.getValue();
return this.value;
};
this.$changeListener = function() {
this.value = null;
};
this.find = function() {
};
this.$edgeBefore = function() {
this.cursor = this.startRange[this.options.backwards ? "start" : "end"];
};
this.$edgeAfter = function() {
};
this.next = function(dir) {
};
}).call(exports.ISearch.prototype);
});
@ -251,7 +251,7 @@ exports.SearchBox = function (editor, range, showReplaceForm) {
* TODO
* --------------------------------------------------------------------------------------- */
/*
- move search form to the left if it masks current word
- move search form to the left if it masks current word
- includ all options that search has. ex: regex
- searchbox.searchbox is not that pretty. we should have just searchbox
- disable prev button if it makes sence