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

group similar items in keymap option selector

Browse Source
This commit is contained in:
tophf 2017-12-17 22:04:30 +03:00
parent 70d935d1a0
commit 1f45618954
1 changed files with 44 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
edit/codemirror-editing-hooks.js
View File

@ -47,7 +47,8 @@ onDOMscriptReady('/codemirror.js').then(() => {
// N.B. the event listener should be registered before setupLivePrefs() // N.B. the event listener should be registered before setupLivePrefs()
$('#options').addEventListener('change', onOptionElementChanged); $('#options').addEventListener('change', onOptionElementChanged);
buildOptionsElements(); buildThemeElement();
buildKeymapElement();
setupLivePrefs(); setupLivePrefs();
rerouteHotkeys(true); rerouteHotkeys(true);
@ -264,31 +265,60 @@ onDOMscriptReady('/codemirror.js').then(() => {
CodeMirror.setOption(option, value); CodeMirror.setOption(option, value);
} }
function buildOptionsElements() { function buildThemeElement() {
// no need to escape the period in the id const themeElement = $('#editor.theme');
const themeControl = $('#editor.theme');
const themeList = localStorage.codeMirrorThemes; const themeList = localStorage.codeMirrorThemes;
const optionsFromArray = (options) => {
const fragment = document.createDocumentFragment();
options.forEach(opt => fragment.appendChild($create('option', opt)));
themeElement.appendChild(fragment);
};
if (themeList) { if (themeList) {
optionsFromArray(themeControl, themeList.split(/\s+/)); optionsFromArray(themeList.split(/\s+/));
} else { } else {
// Chrome is starting up and shows our edit.html, but the background page isn't loaded yet // Chrome is starting up and shows our edit.html, but the background page isn't loaded yet
const theme = prefs.get('editor.theme'); const theme = prefs.get('editor.theme');
optionsFromArray(themeControl, [theme === 'default' ? t('defaultTheme') : theme]); optionsFromArray([theme === 'default' ? t('defaultTheme') : theme]);
getCodeMirrorThemes().then(() => { getCodeMirrorThemes().then(() => {
const themes = (localStorage.codeMirrorThemes || '').split(/\s+/); const themes = (localStorage.codeMirrorThemes || '').split(/\s+/);
optionsFromArray(themeControl, themes); optionsFromArray(themes);
themeControl.selectedIndex = Math.max(0, themes.indexOf(theme)); themeElement.selectedIndex = Math.max(0, themes.indexOf(theme));
}); });
} }
optionsFromArray($('#editor.keyMap'), Object.keys(CodeMirror.keyMap).sort());
} }
function optionsFromArray(parent, options) { function buildKeymapElement() {
// move 'pc' or 'mac' prefix to the end of the displayed label
const maps = Object.keys(CodeMirror.keyMap)
.map(name => ({
value: name,
name: name.replace(/^(pc|mac)(.+)/, (s, arch, baseName) =>
baseName.toLowerCase() + '-' + (arch === 'mac' ? 'Mac' : 'PC')),
}))
.sort((a, b) => a.name < b.name && -1 || a.name > b.name && 1);
const fragment = document.createDocumentFragment(); const fragment = document.createDocumentFragment();
for (const opt of options) { let bin = fragment;
fragment.appendChild($create('option', opt)); let groupName;
} // group suffixed maps in <optgroup>
parent.appendChild(fragment); maps.forEach(({value, name}, i) => {
groupName = !name.includes('-') ? name : groupName;
const groupWithNext = maps[i + 1] && maps[i + 1].name.startsWith(groupName);
if (groupWithNext) {
if (bin === fragment) {
bin = fragment.appendChild($create('optgroup', {label: name.split('-')[0]}));
}
}
const el = bin.appendChild($create('option', {value}, name));
if (value === prefs.defaults['editor.keyMap']) {
el.dataset.default = '';
el.title = t('defaultTheme');
}
!groupWithNext && (bin = fragment);
});
$('#editor.keyMap').appendChild(fragment);
} }
///////////////////// /////////////////////