Change profile.js into a class (#566)

* Update how settings profile is stored and accessed

* Convert profiles.js into a class

* Rename members of ProfileController

ext/bg/js/settings/main.js

@@ -16,6 +16,7 @@
  */
 
 /* global
+ * ProfileController
  * SettingsBackup
  * SettingsController
  * ankiInitialize
@@ -25,15 +26,28 @@
  * appearanceInitialize
  * audioSettingsInitialize
  * dictSettingsInitialize
- * getOptionsContext
  * onAnkiOptionsChanged
  * onDictionaryOptionsChanged
- * profileOptionsSetup
  * storageInfoInitialize
  * utilBackend
  * utilBackgroundIsolate
  */
 
+let profileIndex = 0;
+
+function getOptionsContext() {
+    return {index: getProfileIndex()};
+}
+
+function getProfileIndex() {
+    return profileIndex;
+}
+
+function setProfileIndex(value) {
+    profileIndex = value;
+}
+
+
 function getOptionsMutable(optionsContext) {
     return utilBackend().getOptions(
         utilBackgroundIsolate(optionsContext)
@@ -302,7 +316,7 @@ async function onReady() {
     formSetupEventListeners();
     appearanceInitialize();
     await audioSettingsInitialize();
-    await profileOptionsSetup();
+    await (new ProfileController()).prepare();
     await dictSettingsInitialize();
     ankiInitialize();
     ankiTemplatesInitialize();

ext/bg/js/settings/profiles.js

@@ -20,45 +20,44 @@
  * api
  * conditionsClearCaches
  * getOptionsFullMutable
+ * getProfileIndex
  * onOptionsUpdated
  * profileConditionsDescriptor
  * profileConditionsDescriptorPromise
+ * setProfileIndex
  * settingsSaveOptions
  * utilBackgroundIsolate
  */
 
-let currentProfileIndex = 0;
+class ProfileController {
-let profileConditionsContainer = null;
+    constructor() {
+        this._conditionsContainer = null;
+    }
 
-function getOptionsContext() {
+    async prepare() {
-    return {
-        index: currentProfileIndex
-    };
-}
-
-
-async function profileOptionsSetup() {
         const optionsFull = await getOptionsFullMutable();
-    currentProfileIndex = optionsFull.profileCurrent;
+        setProfileIndex(optionsFull.profileCurrent);
 
-    profileOptionsSetupEventListeners();
+        this._setupEventListeners();
-    await profileOptionsUpdateTarget(optionsFull);
+        await this._updateTarget(optionsFull);
-}
+    }
 
-function profileOptionsSetupEventListeners() {
+    // Private
-    $('#profile-target').change(onTargetProfileChanged);
-    $('#profile-name').change(onProfileNameChanged);
-    $('#profile-add').click(onProfileAdd);
-    $('#profile-remove').click(onProfileRemove);
-    $('#profile-remove-confirm').click(onProfileRemoveConfirm);
-    $('#profile-copy').click(onProfileCopy);
-    $('#profile-copy-confirm').click(onProfileCopyConfirm);
-    $('#profile-move-up').click(() => onProfileMove(-1));
-    $('#profile-move-down').click(() => onProfileMove(1));
-    $('.profile-form').find('input, select, textarea').not('.profile-form-manual').change(onProfileOptionsChanged);
-}
 
-function tryGetIntegerValue(selector, min, max) {
+    _setupEventListeners() {
+        $('#profile-target').change(this._onTargetProfileChanged.bind(this));
+        $('#profile-name').change(this._onNameChanged.bind(this));
+        $('#profile-add').click(this._onAdd.bind(this));
+        $('#profile-remove').click(this._onRemove.bind(this));
+        $('#profile-remove-confirm').click(this._onRemoveConfirm.bind(this));
+        $('#profile-copy').click(this._onCopy.bind(this));
+        $('#profile-copy-confirm').click(this._onCopyConfirm.bind(this));
+        $('#profile-move-up').click(() => this._onMove(-1));
+        $('#profile-move-down').click(() => this._onMove(1));
+        $('.profile-form').find('input, select, textarea').not('.profile-form-manual').change(this._onInputChanged.bind(this));
+    }
+
+    _tryGetIntegerValue(selector, min, max) {
         const value = parseInt($(selector).val(), 10);
         return (
             typeof value === 'number' &&
@@ -67,26 +66,28 @@ function tryGetIntegerValue(selector, min, max) {
             value >= min &&
             value < max
         ) ? value : null;
-}
+    }
 
-async function profileFormRead(optionsFull) {
+    async _formRead(optionsFull) {
+        const currentProfileIndex = getProfileIndex();
         const profile = optionsFull.profiles[currentProfileIndex];
 
         // Current profile
-    const index = tryGetIntegerValue('#profile-active', 0, optionsFull.profiles.length);
+        const index = this._tryGetIntegerValue('#profile-active', 0, optionsFull.profiles.length);
         if (index !== null) {
             optionsFull.profileCurrent = index;
         }
 
         // Profile name
         profile.name = $('#profile-name').val();
-}
+    }
 
-async function profileFormWrite(optionsFull) {
+    async _formWrite(optionsFull) {
+        const currentProfileIndex = getProfileIndex();
         const profile = optionsFull.profiles[currentProfileIndex];
 
-    profileOptionsPopulateSelect($('#profile-active'), optionsFull.profiles, optionsFull.profileCurrent, null);
+        this._populateSelect($('#profile-active'), optionsFull.profiles, optionsFull.profileCurrent, null);
-    profileOptionsPopulateSelect($('#profile-target'), optionsFull.profiles, currentProfileIndex, null);
+        this._populateSelect($('#profile-target'), optionsFull.profiles, currentProfileIndex, null);
         $('#profile-remove').prop('disabled', optionsFull.profiles.length <= 1);
         $('#profile-copy').prop('disabled', optionsFull.profiles.length <= 1);
         $('#profile-move-up').prop('disabled', currentProfileIndex <= 0);
@@ -94,26 +95,26 @@ async function profileFormWrite(optionsFull) {
 
         $('#profile-name').val(profile.name);
 
-    if (profileConditionsContainer !== null) {
+        if (this._conditionsContainer !== null) {
-        profileConditionsContainer.cleanup();
+            this._conditionsContainer.cleanup();
         }
 
         await profileConditionsDescriptorPromise;
-    profileConditionsContainer = new ConditionsUI.Container(
+        this._conditionsContainer = new ConditionsUI.Container(
             profileConditionsDescriptor,
             'popupLevel',
             profile.conditionGroups,
             $('#profile-condition-groups'),
             $('#profile-add-condition-group')
         );
-    profileConditionsContainer.save = () => {
+        this._conditionsContainer.save = () => {
             settingsSaveOptions();
             conditionsClearCaches(profileConditionsDescriptor);
         };
-    profileConditionsContainer.isolate = utilBackgroundIsolate;
+        this._conditionsContainer.isolate = utilBackgroundIsolate;
-}
+    }
 
-function profileOptionsPopulateSelect(select, profiles, currentValue, ignoreIndices) {
+    _populateSelect(select, profiles, currentValue, ignoreIndices) {
         select.empty();
 
 
@@ -126,14 +127,14 @@ function profileOptionsPopulateSelect(select, profiles, currentValue, ignoreIndi
         }
 
         select.val(`${currentValue}`);
-}
+    }
 
-async function profileOptionsUpdateTarget(optionsFull) {
+    async _updateTarget(optionsFull) {
-    await profileFormWrite(optionsFull);
+        await this._formWrite(optionsFull);
         await onOptionsUpdated({source: null});
-}
+    }
 
-function profileOptionsCreateCopyName(name, profiles, maxUniqueAttempts) {
+    _createCopyName(name, profiles, maxUniqueAttempts) {
         let space, index, prefix, suffix;
         const match = /^([\w\W]*\(Copy)((\s+)(\d+))?(\)\s*)$/.exec(name);
         if (match === null) {
@@ -166,49 +167,51 @@ function profileOptionsCreateCopyName(name, profiles, maxUniqueAttempts) {
                 ++index;
             }
         }
-}
+    }
 
-async function onProfileOptionsChanged(e) {
+    async _onInputChanged(e) {
         if (!e.originalEvent && !e.isTrigger) {
             return;
         }
 
         const optionsFull = await getOptionsFullMutable();
-    await profileFormRead(optionsFull);
+        await this._formRead(optionsFull);
         await settingsSaveOptions();
-}
+    }
 
-async function onTargetProfileChanged() {
+    async _onTargetProfileChanged() {
         const optionsFull = await getOptionsFullMutable();
-    const index = tryGetIntegerValue('#profile-target', 0, optionsFull.profiles.length);
+        const currentProfileIndex = getProfileIndex();
+        const index = this._tryGetIntegerValue('#profile-target', 0, optionsFull.profiles.length);
         if (index === null || currentProfileIndex === index) {
             return;
         }
 
-    currentProfileIndex = index;
+        setProfileIndex(index);
 
-    await profileOptionsUpdateTarget(optionsFull);
+        await this._updateTarget(optionsFull);
 
         yomichan.trigger('modifyingProfileChange');
-}
+    }
 
-async function onProfileAdd() {
+    async _onAdd() {
         const optionsFull = await getOptionsFullMutable();
+        const currentProfileIndex = getProfileIndex();
         const profile = utilBackgroundIsolate(optionsFull.profiles[currentProfileIndex]);
-    profile.name = profileOptionsCreateCopyName(profile.name, optionsFull.profiles, 100);
+        profile.name = this._createCopyName(profile.name, optionsFull.profiles, 100);
         optionsFull.profiles.push(profile);
 
-    currentProfileIndex = optionsFull.profiles.length - 1;
+        setProfileIndex(optionsFull.profiles.length - 1);
 
-    await profileOptionsUpdateTarget(optionsFull);
+        await this._updateTarget(optionsFull);
         await settingsSaveOptions();
 
         yomichan.trigger('modifyingProfileChange');
-}
+    }
 
-async function onProfileRemove(e) {
+    async _onRemove(e) {
         if (e.shiftKey) {
-        return await onProfileRemoveConfirm();
+            return await this._onRemoveConfirm();
         }
 
         const optionsFull = await api.optionsGetFull();
@@ -216,13 +219,14 @@ async function onProfileRemove(e) {
             return;
         }
 
+        const currentProfileIndex = getProfileIndex();
         const profile = optionsFull.profiles[currentProfileIndex];
 
         $('#profile-remove-modal-profile-name').text(profile.name);
         $('#profile-remove-modal').modal('show');
-}
+    }
 
-async function onProfileRemoveConfirm() {
+    async _onRemoveConfirm() {
         $('#profile-remove-modal').modal('hide');
 
         const optionsFull = await getOptionsFullMutable();
@@ -230,28 +234,31 @@ async function onProfileRemoveConfirm() {
             return;
         }
 
+        const currentProfileIndex = getProfileIndex();
         optionsFull.profiles.splice(currentProfileIndex, 1);
 
         if (currentProfileIndex >= optionsFull.profiles.length) {
-        --currentProfileIndex;
+            setProfileIndex(optionsFull.profiles.length - 1);
         }
 
         if (optionsFull.profileCurrent >= optionsFull.profiles.length) {
             optionsFull.profileCurrent = optionsFull.profiles.length - 1;
         }
 
-    await profileOptionsUpdateTarget(optionsFull);
+        await this._updateTarget(optionsFull);
         await settingsSaveOptions();
 
         yomichan.trigger('modifyingProfileChange');
-}
+    }
 
-function onProfileNameChanged() {
+    _onNameChanged() {
+        const currentProfileIndex = getProfileIndex();
         $('#profile-active, #profile-target').find(`[value="${currentProfileIndex}"]`).text(this.value);
-}
+    }
 
-async function onProfileMove(offset) {
+    async _onMove(offset) {
         const optionsFull = await getOptionsFullMutable();
+        const currentProfileIndex = getProfileIndex();
         const index = currentProfileIndex + offset;
         if (index < 0 || index >= optionsFull.profiles.length) {
             return;
@@ -265,29 +272,31 @@ async function onProfileMove(offset) {
             optionsFull.profileCurrent = index;
         }
 
-    currentProfileIndex = index;
+        setProfileIndex(index);
 
-    await profileOptionsUpdateTarget(optionsFull);
+        await this._updateTarget(optionsFull);
         await settingsSaveOptions();
 
         yomichan.trigger('modifyingProfileChange');
-}
+    }
 
-async function onProfileCopy() {
+    async _onCopy() {
         const optionsFull = await api.optionsGetFull();
         if (optionsFull.profiles.length <= 1) {
             return;
         }
 
-    profileOptionsPopulateSelect($('#profile-copy-source'), optionsFull.profiles, currentProfileIndex === 0 ? 1 : 0, [currentProfileIndex]);
+        const currentProfileIndex = getProfileIndex();
+        this._populateSelect($('#profile-copy-source'), optionsFull.profiles, currentProfileIndex === 0 ? 1 : 0, [currentProfileIndex]);
         $('#profile-copy-modal').modal('show');
-}
+    }
 
-async function onProfileCopyConfirm() {
+    async _onCopyConfirm() {
         $('#profile-copy-modal').modal('hide');
 
         const optionsFull = await getOptionsFullMutable();
-    const index = tryGetIntegerValue('#profile-copy-source', 0, optionsFull.profiles.length);
+        const index = this._tryGetIntegerValue('#profile-copy-source', 0, optionsFull.profiles.length);
+        const currentProfileIndex = getProfileIndex();
         if (index === null || index === currentProfileIndex) {
             return;
         }
@@ -295,6 +304,7 @@ async function onProfileCopyConfirm() {
         const profileOptions = utilBackgroundIsolate(optionsFull.profiles[index].options);
         optionsFull.profiles[currentProfileIndex].options = profileOptions;
 
-    await profileOptionsUpdateTarget(optionsFull);
+        await this._updateTarget(optionsFull);
         await settingsSaveOptions();
+    }
 }