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> <button class="add-applies-to" i18n-text="appliesAdd"></button>
</li> </li>
</template> </template>
<template data-id="appliesToEverything"> <template data-id="appliesToEverything">
<li class="applies-to-everything" i18n-text="appliesToEverything"> <li class="applies-to-everything" i18n-text="appliesToEverything">
<button class="add-applies-to" i18n-text="appliesSpecify"></button> <button class="add-applies-to" i18n-text="appliesSpecify"></button>
</li> </li>
</template> </template>
<template data-id="section"> <template data-id="section">
<div> <div>
<label i18n-text="sectionCode" class="code-label"></label> <label i18n-text="sectionCode" class="code-label"></label>
@ -106,25 +108,30 @@
<button class="test-regexp" i18n-text="styleRegexpTestButton"></button> <button class="test-regexp" i18n-text="styleRegexpTestButton"></button>
</div> </div>
</template> </template>
<template data-id="find"> <template data-id="find">
<span i18n-text="search">: <input type="text" class="CodeMirror-search-field" spellcheck="false"> <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 class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>
</span> </span>
</template> </template>
<template data-id="replace"> <template data-id="replace">
<span i18n-text="replace">: <input type="text" class="CodeMirror-search-field" spellcheck="false"> <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 class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>
</span> </span>
</template> </template>
<template data-id="replaceAll"> <template data-id="replaceAll">
<span i18n-text="replaceAll">: <input type="text" class="CodeMirror-search-field" spellcheck="false"> <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 class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>
</span> </span>
</template> </template>
<template data-id="replaceWith"> <template data-id="replaceWith">
<span i18n-text="replaceWith">: <input type="text" class="CodeMirror-search-field" spellcheck="false"> <span i18n-text="replaceWith">: <input type="text" class="CodeMirror-search-field" spellcheck="false">
</span> </span>
</template> </template>
<template data-id="replaceConfirm"> <template data-id="replaceConfirm">
<span i18n-text="replace">? <span i18n-text="replace">?
<button i18n-text="confirmYes"></button> <button i18n-text="confirmYes"></button>
@ -132,15 +139,35 @@
<button i18n-text="confirmStop"></button> <button i18n-text="confirmStop"></button>
</span> </span>
</template> </template>
<template data-id="jumpToLine"> <template data-id="jumpToLine">
<span i18n-text="editGotoLine">: <input class="CodeMirror-jump-field" type="text"></span> <span i18n-text="editGotoLine">: <input class="CodeMirror-jump-field" type="text"></span>
</template> </template>
<template data-id="regexpTestPartial"> <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> <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>
<template data-id="resizeGrip"> <template data-id="resizeGrip">
<div class="resize-grip" i18n-title="cm_resizeGripHint"></div> <div class="resize-grip" i18n-title="cm_resizeGripHint"></div>
</template> </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> </head>
<body id="stylus-edit"> <body id="stylus-edit">

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

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