pull out colorpicker-helper.js

edit.html

@@ -26,6 +26,7 @@
     <script src="edit/regexp-tester.js"></script>
     <script src="edit/applies-to-line-widget.js"></script>
     <script src="edit/source-editor.js"></script>
+    <script src="edit/colorpicker-helper.js"></script>
     <script src="edit/edit.js"></script>
 
     <script src="vendor/codemirror/lib/codemirror.js"></script>

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();
+  }
+};

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();
-}

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;