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

de-htmlize showKeymapHelp

Browse Source
This commit is contained in:
tophf 2017-12-03 00:20:42 +03:00
parent 0e61de2920
commit a5f31162f6
2 changed files with 44 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
edit.html
View File

@ -85,11 +85,13 @@
<button class="add-applies-to" i18n-text="appliesAdd"></button>
</li>
</template>
<template data-id="appliesToEverything">
<li class="applies-to-everything" i18n-text="appliesToEverything">
<button class="add-applies-to" i18n-text="appliesSpecify"></button>
</li>
</template>
<template data-id="section">
<div>
<label i18n-text="sectionCode" class="code-label"></label>
@ -106,25 +108,30 @@
<button class="test-regexp" i18n-text="styleRegexpTestButton"></button>
</div>
</template>
<template data-id="find">
<span i18n-text="search">: <input type="text" class="CodeMirror-search-field" spellcheck="false">
<span class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>
</span>
</template>
<template data-id="replace">
<span i18n-text="replace">: <input type="text" class="CodeMirror-search-field" spellcheck="false">
<span class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>
</span>
</template>
<template data-id="replaceAll">
<span i18n-text="replaceAll">: <input type="text" class="CodeMirror-search-field" spellcheck="false">
<span class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>
</span>
</template>
<template data-id="replaceWith">
<span i18n-text="replaceWith">: <input type="text" class="CodeMirror-search-field" spellcheck="false">
</span>
</template>
<template data-id="replaceConfirm">
<span i18n-text="replace">?
<button i18n-text="confirmYes"></button>
@ -132,15 +139,35 @@
<button i18n-text="confirmStop"></button>
</span>
</template>
<template data-id="jumpToLine">
<span i18n-text="editGotoLine">: <input class="CodeMirror-jump-field" type="text"></span>
</template>
<template data-id="regexpTestPartial">
<a target="_blank" href="https://github.com/stylish-userstyles/stylish/wiki/Applying-styles-to-specific-sites#advanced-matching-with-regular-expressions"><svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></a>
</template>
<template data-id="resizeGrip">
<div class="resize-grip" i18n-title="cm_resizeGripHint"></div>
</template>
<template data-id="keymapHelp">
<table class="keymap-list">
<thead>
<tr>
<th><input i18n-placeholder="helpKeyMapHotkey" type="search" class="can-close-on-esc"></th>
<th><input i18n-placeholder="helpKeyMapCommand" type="search" class="can-close-on-esc"></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</template>
</head>
<body id="stylus-edit">

31
edit/show-keymap-help.js
View File

@ -8,26 +8,29 @@ onDOMready().then(() => {
function showKeyMapHelp() {
const keyMap = mergeKeyMaps({}, prefs.get('editor.keyMap'), CodeMirror.defaults.extraKeys);
const keyMapSorted = Object.keys(keyMap)
.map(key => ({key: key, cmd: keyMap[key]}))
.map(key => ({key, cmd: keyMap[key]}))
.concat([{key: 'Shift-Ctrl-Wheel', cmd: 'scrollWindow'}])
.sort((a, b) => (a.cmd < b.cmd || (a.cmd === b.cmd && a.key < b.key) ? -1 : 1));
showHelp(t('cm_keyMap') + ': ' + prefs.get('editor.keyMap'),
'<table class="keymap-list">' +
'<thead><tr><th><input placeholder="' + t('helpKeyMapHotkey') + '" type="search"></th>' +
'<th><input placeholder="' + t('helpKeyMapCommand') + '" type="search"></th></tr></thead>' +
'<tbody>' + keyMapSorted.map(value =>
'<tr><td>' + value.key + '</td><td>' + value.cmd + '</td></tr>'
).join('') +
'</tbody>' +
'</table>');
const table = template.keymapHelp.cloneNode(true);
const tBody = table.tBodies[0];
const row = tBody.rows[0];
const cellA = row.children[0];
const cellB = row.children[1];
tBody.textContent = '';
for (const {key, cmd} of keyMapSorted) {
cellA.textContent = key;
cellB.textContent = cmd;
tBody.appendChild(row.cloneNode(true));
}
const table = $('#help-popup table');
table.addEventListener('input', filterTable);
showHelp(t('cm_keyMap') + ': ' + prefs.get('editor.keyMap'), table);
const inputs = $$('input', table);
inputs[0].addEventListener('keydown', hotkeyHandler);
inputs[1].focus();
table.oninput = filterTable;
function hotkeyHandler(event) {
const keyName = CodeMirror.keyName(event);
if (keyName === 'Esc' || keyName === 'Tab' || keyName === 'Shift-Tab') {
@ -48,7 +51,7 @@ function showKeyMapHelp() {
const input = event.target;
const col = input.parentNode.cellIndex;
inputs[1 - col].value = '';
table.tBodies[0].childNodes.forEach(row => {
for (const row of tBody.rows) {
const cell = row.children[col];
const text = cell.textContent;
const query = stringAsRegExp(input.value, 'gi');
@ -76,7 +79,7 @@ function showKeyMapHelp() {
const text = otherCell.textContent;
otherCell.textContent = text;
}
});
}
}
function mergeKeyMaps(merged, ...more) {
more.forEach(keyMap => {