Refactor options page logic

pages/options/options.js

@@ -23,120 +23,147 @@ var options = {};
  * Private Methods
  */
 
-options._getOptionElement = function (optionKey) {
-    return document.querySelector(`[data-option=${optionKey}]`);
-};
+options._renderContents = function () {
 
-function _normalizeDomain (domain) {
+    document.body.setAttribute('dir', options._scriptDirection);
+    helpers.insertI18nContentIntoDocument(document);
 
-    domain = domain.toLowerCase().trim();
+    options._determineOptionDetails()
+        .then(options._renderOptionsPanel);
+};
 
-    if (domain.startsWith(Address.WWW_PREFIX)) {
-        domain = domain.slice(Address.WWW_PREFIX_LENGTH);
-    }
+options._renderOptionsPanel = function () {
 
-    return domain;
-}
+    let whitelistedDomains, domainWhitelist, elements;
 
-/**
- * Initializations
- */
+    whitelistedDomains = options._optionValues.whitelistedDomains;
+    domainWhitelist = '';
 
-document.addEventListener('DOMContentLoaded', function () {
+    elements = options._optionElements;
 
-    let scriptDirection, languageSupported, optionElements;
+    Object.keys(whitelistedDomains).forEach(function (domain) {
+        domainWhitelist = `${domainWhitelist}${domain};`;
+    });
 
-    scriptDirection = helpers.determineScriptDirection(navigator.language);
-    document.body.setAttribute('dir', scriptDirection);
+    domainWhitelist = domainWhitelist.slice(0, -1);
+    domainWhitelist = domainWhitelist.replace(Whitelist.TRIM_EXPRESSION, '');
 
-    languageSupported = helpers.languageIsFullySupported(navigator.language);
+    elements.showIconBadge.checked = options._optionValues.showIconBadge;
+    elements.blockMissing.checked = options._optionValues.blockMissing;
+    elements.disablePrefetch.checked = options._optionValues.disablePrefetch;
+    elements.stripMetadata.checked = options._optionValues.stripMetadata;
+    elements.whitelistedDomains.value = domainWhitelist;
 
-    if (languageSupported === false) {
+    options._registerOptionChangedEventListeners(elements);
 
-        let localeNoticeElement = document.getElementById('notice-locale');
-        localeNoticeElement.setAttribute('class', 'notice');
+    if (options._languageSupported === false) {
+        options._renderLocaleNotice();
     }
+};
 
-    helpers.insertI18nContentIntoDocument(document);
+options._renderLocaleNotice = function () {
+
+    let localeNoticeElement = document.getElementById('notice-locale');
+    localeNoticeElement.setAttribute('class', 'notice');
+};
 
-    optionElements = {
-        'showIconBadge': options._getOptionElement(Setting.SHOW_ICON_BADGE),
-        'blockMissing': options._getOptionElement(Setting.BLOCK_MISSING),
-        'disablePrefetch': options._getOptionElement(Setting.DISABLE_PREFETCH),
-        'stripMetadata': options._getOptionElement(Setting.STRIP_METADATA),
-        'whitelistedDomains': options._getOptionElement(Setting.WHITELISTED_DOMAINS)
-    };
+options._registerOptionChangedEventListeners = function (elements) {
 
-    chrome.storage.local.get(Object.keys(optionElements), function (items) {
+    elements.showIconBadge.addEventListener('change', options._onOptionChanged);
+    elements.blockMissing.addEventListener('change', options._onOptionChanged);
+    elements.disablePrefetch.addEventListener('change', options._onOptionChanged);
+    elements.stripMetadata.addEventListener('change', options._onOptionChanged);
+    elements.whitelistedDomains.addEventListener('keyup', options._onOptionChanged);
+};
 
-        let whitelistedDomains, domainWhitelist;
+options._determineOptionDetails = function () {
 
-        whitelistedDomains = items.whitelistedDomains;
-        domainWhitelist = '';
+    return new Promise((resolve) => {
 
-        Object.keys(whitelistedDomains).forEach(function (domain) {
-            domainWhitelist = `${domainWhitelist}${domain};`;
-        });
+        let optionElements = {
+            'showIconBadge': options._getOptionElement(Setting.SHOW_ICON_BADGE),
+            'blockMissing': options._getOptionElement(Setting.BLOCK_MISSING),
+            'disablePrefetch': options._getOptionElement(Setting.DISABLE_PREFETCH),
+            'stripMetadata': options._getOptionElement(Setting.STRIP_METADATA),
+            'whitelistedDomains': options._getOptionElement(Setting.WHITELISTED_DOMAINS)
+        };
+
+        chrome.storage.local.get(Object.keys(optionElements), function (items) {
 
-        domainWhitelist = domainWhitelist.slice(0, -1);
-        domainWhitelist = domainWhitelist.replace(Whitelist.TRIM_EXPRESSION, '');
+            options._optionElements = optionElements;
+            options._optionValues = items;
 
-        optionElements.showIconBadge.checked = items.showIconBadge;
-        optionElements.blockMissing.checked = items.blockMissing;
-        optionElements.disablePrefetch.checked = items.disablePrefetch;
-        optionElements.stripMetadata.checked = items.stripMetadata;
-        optionElements.whitelistedDomains.value = domainWhitelist;
+            resolve();
+        });
     });
+};
 
-    let optionChangedHandler = function ({target}) {
+options._getOptionElement = function (optionKey) {
+    return document.querySelector(`[data-option=${optionKey}]`);
+};
 
-        let optionKey, optionType, optionValue;
+/**
+ * Event Handlers
+ */
 
-        optionKey = target.getAttribute('data-option');
-        optionType = target.getAttribute('type');
+options._onDocumentLoaded = function () {
 
-        switch (optionType) {
-        case 'checkbox':
-            optionValue = target.checked;
-            break;
-        default:
-            optionValue = target.value;
-        }
+    let language = navigator.language;
 
-        if (optionKey === Setting.DISABLE_PREFETCH) {
+    options._languageSupported = helpers.languageIsFullySupported(language);
+    options._scriptDirection = helpers.determineScriptDirection(language);
 
-            if (optionValue === false) {
+    options._renderContents();
+};
 
-                // Restore default values of related preference values.
-                chrome.privacy.network.networkPredictionEnabled.clear({});
+options._onOptionChanged = function ({target}) {
 
-            } else {
+    let optionKey, optionType, optionValue;
 
-                chrome.privacy.network.networkPredictionEnabled.set({
-                    'value': false
-                });
-            }
-        }
+    optionKey = target.getAttribute('data-option');
+    optionType = target.getAttribute('type');
 
-        if (optionKey === Setting.WHITELISTED_DOMAINS) {
+    switch (optionType) {
+    case 'checkbox':
+        optionValue = target.checked;
+        break;
+    default:
+        optionValue = target.value;
+    }
 
-            let domainWhitelist = optionValue;
+    if (optionKey === Setting.DISABLE_PREFETCH) {
 
-            optionValue = {};
+        if (optionValue === false) {
 
-            domainWhitelist.split(Whitelist.VALUE_SEPARATOR).forEach(function (domain) {
-                optionValue[_normalizeDomain(domain)] = true;
+            // Restore default values of related preference values.
+            chrome.privacy.network.networkPredictionEnabled.clear({});
+
+        } else {
+
+            chrome.privacy.network.networkPredictionEnabled.set({
+                'value': false
             });
         }
+    }
+
+    if (optionKey === Setting.WHITELISTED_DOMAINS) {
+
+        let domainWhitelist = optionValue;
 
-        chrome.storage.local.set({
-            [optionKey]: optionValue
+        optionValue = {};
+
+        domainWhitelist.split(Whitelist.VALUE_SEPARATOR).forEach(function (domain) {
+            optionValue[helpers.normalizeDomain(domain)] = true;
         });
-    };
-
-    optionElements.showIconBadge.addEventListener('change', optionChangedHandler);
-    optionElements.blockMissing.addEventListener('change', optionChangedHandler);
-    optionElements.disablePrefetch.addEventListener('change', optionChangedHandler);
-    optionElements.stripMetadata.addEventListener('change', optionChangedHandler);
-    optionElements.whitelistedDomains.addEventListener('keyup', optionChangedHandler);
-});
+    }
+
+    chrome.storage.local.set({
+        [optionKey]: optionValue
+    });
+};
+
+/**
+ * Initializations
+ */
+
+document.addEventListener('DOMContentLoaded', options._onDocumentLoaded);