From 786cde781d2acee052a3e958c82b85b3c8acb585 Mon Sep 17 00:00:00 2001 From: tophf Date: Wed, 22 Nov 2017 03:12:05 +0300 Subject: [PATCH] pull out colorpicker-helper.js --- edit.html | 1 + edit/colorpicker-helper.js | 106 +++++++++++++++++++++++++++++++++++++ edit/edit.js | 105 +----------------------------------- edit/source-editor.js | 3 +- 4 files changed, 109 insertions(+), 106 deletions(-) create mode 100644 edit/colorpicker-helper.js diff --git a/edit.html b/edit.html index 772fd162..c5462681 100644 --- a/edit.html +++ b/edit.html @@ -26,6 +26,7 @@ + diff --git a/edit/colorpicker-helper.js b/edit/colorpicker-helper.js new file mode 100644 index 00000000..66f51e17 --- /dev/null +++ b/edit/colorpicker-helper.js @@ -0,0 +1,106 @@ +/* global CodeMirror loadScript editors */ +'use strict'; + +window.initColorpicker = () => { + onDOMready().then(() => { + $('#colorpicker-settings').onclick = configureColorpicker; + }); + const scripts = [ + '/vendor-overwrites/colorpicker/colorpicker.css', + '/vendor-overwrites/colorpicker/colorpicker.js', + '/vendor-overwrites/colorpicker/colorview.js', + ]; + prefs.subscribe(['editor.colorpicker.hotkey'], registerHotkey); + prefs.subscribe(['editor.colorpicker'], colorpickerOnDemand); + return prefs.get('editor.colorpicker') && colorpickerOnDemand(null, true); + + function colorpickerOnDemand(id, enabled) { + return loadScript(enabled && scripts) + .then(() => setColorpickerOption(id, enabled)); + } + + function setColorpickerOption(id, enabled) { + const defaults = CodeMirror.defaults; + const keyName = prefs.get('editor.colorpicker.hotkey'); + delete defaults.extraKeys[keyName]; + defaults.colorpicker = enabled; + if (enabled) { + if (keyName) { + CodeMirror.commands.colorpicker = invokeColorpicker; + defaults.extraKeys[keyName] = 'colorpicker'; + } + defaults.colorpicker = { + forceUpdate: editors.length > 0, + tooltip: t('colorpickerTooltip'), + popupOptions: { + tooltipForSwitcher: t('colorpickerSwitchFormatTooltip'), + hexUppercase: prefs.get('editor.colorpicker.hexUppercase'), + hideDelay: 5000, + embedderCallback: state => { + ['hexUppercase', 'color'] + .filter(name => state[name] !== prefs.get('editor.colorpicker.' + name)) + .forEach(name => prefs.set('editor.colorpicker.' + name, state[name])); + }, + }, + }; + } + // on page load runs before CodeMirror.setOption is defined + editors.forEach(cm => cm.setOption('colorpicker', defaults.colorpicker)); + } + + function registerHotkey(id, hotkey) { + const extraKeys = CodeMirror.defaults.extraKeys; + for (const key in extraKeys) { + if (extraKeys[key] === 'colorpicker') { + delete extraKeys[key]; + break; + } + } + if (hotkey) { + extraKeys[hotkey] = 'colorpicker'; + } + } + + function invokeColorpicker(cm) { + cm.state.colorpicker.openPopup(prefs.get('editor.colorpicker.color')); + } + + function configureColorpicker() { + const input = $element({ + tag: 'input', + type: 'search', + spellcheck: false, + value: prefs.get('editor.colorpicker.hotkey'), + onkeydown(event) { + const key = CodeMirror.keyName(event); + // ignore: [Shift?] characters, modifiers-only, [Shift?] Esc, Enter, [Shift?] Tab + if (/^(Enter|(Shift-)?(Esc|Tab))$/.test(key)) { + return; + } else if (/^((Shift-)?[!-~]|(Shift-?|Ctrl-?|Alt-?|Cmd-?)*)$/.test(key)) { + this.setCustomValidity('Not allowed'); + } else { + this.setCustomValidity(''); + prefs.set('editor.colorpicker.hotkey', key); + } + event.preventDefault(); + event.stopPropagation(); + this.value = key; + }, + oninput() { + // fired on pressing "x" to clear the field + prefs.set('editor.colorpicker.hotkey', ''); + }, + onpaste(event) { + event.preventDefault(); + } + }); + const popup = showHelp(t('helpKeyMapHotkey'), input); + if (this instanceof Element) { + const bounds = this.getBoundingClientRect(); + popup.style.left = bounds.right + 10 + 'px'; + popup.style.top = bounds.top - popup.clientHeight / 2 + 'px'; + popup.style.right = 'auto'; + } + input.focus(); + } +}; diff --git a/edit/edit.js b/edit/edit.js index 577d4c93..db17aae2 100644 --- a/edit/edit.js +++ b/edit/edit.js @@ -9,7 +9,7 @@ onDOMready() .then(() => Promise.all([ - onColorpickerReady(), + window.initColorpicker(), ])) .then(init); @@ -1457,7 +1457,6 @@ function initHooks() { $('#sections-help').addEventListener('click', showSectionHelp, false); $('#keyMap-help').addEventListener('click', showKeyMapHelp, false); $('#cancel-button').addEventListener('click', goBackToManage); - $('#colorpicker-settings').addEventListener('click', configureColorpicker); setupOptionsExpand(); initLint(); @@ -2072,105 +2071,3 @@ function setGlobalProgress(done, total) { progressElement.remove(); } } - -function onColorpickerReady() { - const scripts = [ - '/vendor-overwrites/colorpicker/colorpicker.css', - '/vendor-overwrites/colorpicker/colorpicker.js', - '/vendor-overwrites/colorpicker/colorview.js', - ]; - prefs.subscribe(['editor.colorpicker.hotkey'], registerHotkey); - prefs.subscribe(['editor.colorpicker'], colorpickerOnDemand); - return prefs.get('editor.colorpicker') && colorpickerOnDemand(null, true); - - function colorpickerOnDemand(id, enabled) { - return loadScript(enabled && scripts) - .then(() => setColorpickerOption(id, enabled)); - } - - function setColorpickerOption(id, enabled) { - const defaults = CodeMirror.defaults; - const keyName = prefs.get('editor.colorpicker.hotkey'); - delete defaults.extraKeys[keyName]; - defaults.colorpicker = enabled; - if (enabled) { - if (keyName) { - CodeMirror.commands.colorpicker = invokeColorpicker; - defaults.extraKeys[keyName] = 'colorpicker'; - } - defaults.colorpicker = { - forceUpdate: editors.length > 0, - tooltip: t('colorpickerTooltip'), - popupOptions: { - tooltipForSwitcher: t('colorpickerSwitchFormatTooltip'), - hexUppercase: prefs.get('editor.colorpicker.hexUppercase'), - hideDelay: 5000, - embedderCallback: state => { - ['hexUppercase', 'color'] - .filter(name => state[name] !== prefs.get('editor.colorpicker.' + name)) - .forEach(name => prefs.set('editor.colorpicker.' + name, state[name])); - }, - }, - }; - } - // on page load runs before CodeMirror.setOption is defined - editors.forEach(cm => cm.setOption('colorpicker', defaults.colorpicker)); - } - - function registerHotkey(id, hotkey) { - const extraKeys = CodeMirror.defaults.extraKeys; - for (const key in extraKeys) { - if (extraKeys[key] === 'colorpicker') { - delete extraKeys[key]; - break; - } - } - if (hotkey) { - extraKeys[hotkey] = 'colorpicker'; - } - } - - function invokeColorpicker(cm) { - cm.state.colorpicker.openPopup(prefs.get('editor.colorpicker.color')); - } -} - -function configureColorpicker() { - const input = $element({ - tag: 'input', - type: 'search', - spellcheck: false, - value: prefs.get('editor.colorpicker.hotkey'), - onkeydown(event) { - const key = CodeMirror.keyName(event); - // ignore: [Shift?] characters, modifiers-only, [Shift?] Esc, Enter, [Shift?] Tab - if (/^(Enter|(Shift-)?(Esc|Tab))$/.test(key)) { - this.setCustomValidity(''); - return; - } else if (/^((Shift-)?[!-~]|(Shift-?|Ctrl-?|Alt-?|Cmd-?)*)$/.test(key)) { - this.setCustomValidity('Not allowed'); - } else { - this.setCustomValidity(''); - prefs.set('editor.colorpicker.hotkey', key); - } - event.preventDefault(); - event.stopPropagation(); - this.value = key; - }, - oninput() { - // fired on pressing "x" to clear the field - prefs.set('editor.colorpicker.hotkey', ''); - }, - onpaste(event) { - event.preventDefault(); - } - }); - const popup = showHelp(t('helpKeyMapHotkey'), input); - if (this instanceof Element) { - const bounds = this.getBoundingClientRect(); - popup.style.left = bounds.right + 10 + 'px'; - popup.style.top = bounds.top - popup.clientHeight / 2 + 'px'; - popup.style.right = 'auto'; - } - input.focus(); -} diff --git a/edit/source-editor.js b/edit/source-editor.js index 20a26be4..7ad3d326 100644 --- a/edit/source-editor.js +++ b/edit/source-editor.js @@ -1,4 +1,4 @@ -/* global CodeMirror dirtyReporter initLint beautify showKeyMapHelp configureColorpicker */ +/* global CodeMirror dirtyReporter initLint beautify showKeyMapHelp */ /* global showToggleStyleHelp goBackToManage updateLintReportIfEnabled */ /* global hotkeyRerouter setupAutocomplete setupOptionsExpand */ /* global editors linterConfig updateLinter regExpTester mozParser */ @@ -145,7 +145,6 @@ ${section} $('#save-button').onclick = save; $('#beautify').onclick = beautify; $('#keyMap-help').onclick = showKeyMapHelp; - $('#colorpicker-settings').addEventListener('click', configureColorpicker); $('#toggle-style-help').onclick = showToggleStyleHelp; $('#cancel-button').onclick = goBackToManage;