open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Editor: press a hotkey in keymap help table to filter it

Browse Source 
Add localizable placeholders to inputboxes
This commit is contained in:
tophf 2015-05-13 20:26:53 +03:00
parent 913d13b01a
commit 7f5580a661
2 changed files with 42 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
_locales/en/messages.json
View File

@ -161,6 +161,14 @@
"message": "Help",
"description": "Alternate text for help buttons"
},
"helpKeyMapHotkey": {
"message": "Press a hotkey",
"description": "Placeholder text of inputbox in keymap help popup on the edit style page. Must be very short"
},
"helpKeyMapCommand": {
"message": "Type a command name",
"description": "Placeholder text of inputbox in keymap help popup on the edit style page. Must be very short"
},
"installUpdate": {
"message": "Install update",
"description": "Label for the button to install an update for a single style"

43
edit.js
View File

@ -907,27 +907,50 @@ function showKeyMapHelp() {
.sort(function(a, b) { return a.cmd < b.cmd || (a.cmd == b.cmd && a.key < b.key) ? -1 : 1 });
showHelp(t("cm_keyMap") + ": " + prefs.getPref("editor.keyMap"),
'<table class="keymap-list">' +
"<thead><tr><th><input></th><th><input></th></tr></thead>" +
'<thead><tr><th><input placeholder="' + t("helpKeyMapHotkey") + '" type="search"></th>' +
'<th><input placeholder="' + t("helpKeyMapCommand") + '" type="search"></th></tr></thead>' +
"<tbody>" + keyMapSorted.map(function(value) {
return "<tr><td>" + value.key + "</td><td>" + value.cmd + "</td></tr>";
}).join("") +
"</tbody>" +
"</table>");
document.querySelector("#help-popup table").addEventListener("input", function(event) {
var table = document.querySelector("#help-popup table");
table.addEventListener("input", filterTable);
var inputs = table.querySelectorAll("input");
inputs[0].addEventListener("keydown", hotkeyHandler);
inputs[1].focus();
function hotkeyHandler(event) {
var keyName = CodeMirror.keyName(event);
if (keyName == "Esc" || keyName == "Tab" || keyName == "Shift-Tab") {
return;
}
event.preventDefault();
event.stopPropagation();
// normalize order of modifiers,
// for modifier-only keys ("Ctrl-Shift") a dummy main key has to be temporarily added
var keyMap = {};
keyMap[keyName.replace(/(Shift|Ctrl|Alt|Cmd)$/, "$&-dummy")] = "";
var normalizedKey = Object.keys(CodeMirror.normalizeKeyMap(keyMap))[0];
this.value = normalizedKey.replace("-dummy", "");
filterTable(event);
}
function filterTable(event) {
var input = event.target;
var query = stringAsRegExp(input.value, "gi");
var col = input.parentNode.cellIndex;
this.tBodies[0].childNodes.forEach(function(row) {
inputs[1 - col].value = "";
table.tBodies[0].childNodes.forEach(function(row) {
var cell = row.children[col];
if (query.test(cell.textContent)) {
row.style.display = "";
cell.innerHTML = cell.textContent.replace(query, "<mark>$&</mark>");
} else {
row.style.display = "none";
row.style.display = query.test(cell.textContent) ? "" : "none";
// clear highlight from the other column
cell = row.children[1 - col];
cell.innerHTML = cell.textContent;
});
}
});
});
function mergeKeyMaps(merged) {
[].slice.call(arguments, 1).forEach(function(keyMap) {
if (typeof keyMap == "string") {