Impovement of UI extension

js/mods_extension.js

@@ -0,0 +1,283 @@
+if (typeof modsExtension === 'undefined') {
+    window.modsExtension = []
+
+    // UI elements, modified from original `inp` types, because I have no js knowledge to hook stuff
+    modsExtension.createToggle = function (_obj, _callbackName) {
+        let uiElement = {};
+
+        uiElement.obj = _obj;
+        uiElement.callbackName = _callbackName;
+        uiElement.value = _obj.getAttribute('data-current');
+        uiElement.name = _obj.id;
+        uiElement.type = _obj.getAttribute('data-type');
+
+        var self = uiElement;
+
+        uiElement.mouseDown = function (_e) {
+            self.value = self.value == "True" ? "False" : "True";
+            self.updateState();
+        }
+
+        uiElement.updateState = function () {
+            self.obj.classList.remove("checked");
+            if (self.value == "True") {
+                self.obj.classList.add("checked");
+            }
+
+            engine.call(self.callbackName, self.name, self.value);
+        }
+
+        _obj.addEventListener('mousedown', uiElement.mouseDown);
+
+        uiElement.getValue = function () {
+            return self.value;
+        }
+
+        uiElement.updateValue = function (value) {
+            self.value = value;
+
+            self.obj.classList.remove("checked");
+            if (self.value == "True") {
+                self.obj.classList.add("checked");
+            }
+        }
+
+        uiElement.updateValue(uiElement.value);
+
+        return {
+            name: uiElement.name,
+            value: uiElement.getValue,
+            updateValue: uiElement.updateValue
+        }
+    };
+
+    modsExtension.createSlider = function (_obj, _callbackName) {
+        let uiElement = {};
+
+        uiElement.obj = _obj;
+        uiElement.callbackName = _callbackName;
+        uiElement.minValue = parseFloat(_obj.getAttribute('data-min'));
+        uiElement.maxValue = parseFloat(_obj.getAttribute('data-max'));
+        uiElement.percent = 0;
+        uiElement.value = parseFloat(_obj.getAttribute('data-current'));
+        uiElement.dragActive = false;
+        uiElement.name = _obj.id;
+        uiElement.type = _obj.getAttribute('data-type');
+        uiElement.stepSize = _obj.getAttribute('data-stepSize') || 0;
+        uiElement.format = _obj.getAttribute('data-format') || '{value}';
+
+        var self = uiElement;
+
+        if (uiElement.stepSize != 0)
+            uiElement.value = Math.round(uiElement.value / uiElement.stepSize) * uiElement.stepSize;
+        else
+            uiElement.value = Math.round(uiElement.value);
+
+        uiElement.valueLabelBackground = document.createElement('div');
+        uiElement.valueLabelBackground.className = 'valueLabel background';
+        uiElement.valueLabelBackground.innerHTML = uiElement.format.replace('{value}', uiElement.value);
+        uiElement.obj.appendChild(uiElement.valueLabelBackground);
+
+        uiElement.valueBar = document.createElement('div');
+        uiElement.valueBar.className = 'valueBar';
+        uiElement.valueBar.setAttribute('style', 'width: ' + (((uiElement.value - uiElement.minValue) / (uiElement.maxValue - uiElement.minValue)) * 100) + '%;');
+        uiElement.obj.appendChild(uiElement.valueBar);
+
+        uiElement.valueLabelForeground = document.createElement('div');
+        uiElement.valueLabelForeground.className = 'valueLabel foreground';
+        uiElement.valueLabelForeground.innerHTML = uiElement.format.replace('{value}', uiElement.value);
+        uiElement.valueLabelForeground.setAttribute('style', 'width: ' + (1.0 / ((uiElement.value - uiElement.minValue) / (uiElement.maxValue - uiElement.minValue)) * 100) + '%;');
+        uiElement.valueBar.appendChild(uiElement.valueLabelForeground);
+
+        uiElement.mouseDown = function (_e) {
+            self.dragActive = true;
+            self.mouseMove(_e, false);
+        }
+
+        uiElement.mouseMove = function (_e, _write) {
+            if (self.dragActive) {
+                var rect = _obj.getBoundingClientRect();
+                var start = rect.left;
+                var end = rect.right;
+                self.percent = Math.min(Math.max((_e.clientX - start) / rect.width, 0), 1);
+                var value = self.percent;
+                value *= (self.maxValue - self.minValue);
+                value += self.minValue;
+                if (self.stepSize != 0) {
+                    value = Math.round(value / self.stepSize);
+                    self.value = value * self.stepSize;
+                    self.percent = (self.value - self.minValue) / (self.maxValue - self.minValue);
+                }
+                else
+                    self.value = Math.round(value);
+
+                self.valueBar.setAttribute('style', 'width: ' + (self.percent * 100) + '%;');
+                self.valueLabelForeground.setAttribute('style', 'width: ' + (1.0 / self.percent * 100) + '%;');
+                self.valueLabelBackground.innerHTML = self.valueLabelForeground.innerHTML = self.format.replace('{value}', self.value);
+
+                engine.call(self.callbackName, self.name, "" + self.value);
+                self.displayImperial();
+            }
+        }
+
+        uiElement.mouseUp = function (_e) {
+            self.mouseMove(_e, true);
+            self.dragActive = false;
+        }
+
+        _obj.addEventListener('mousedown', uiElement.mouseDown);
+        document.addEventListener('mousemove', uiElement.mouseMove);
+        document.addEventListener('mouseup', uiElement.mouseUp);
+
+        uiElement.getValue = function () {
+            return self.value;
+        }
+
+        uiElement.updateValue = function (value) {
+            if (self.stepSize != 0)
+                self.value = Math.round(value * self.stepSize) / self.stepSize;
+            else
+                self.value = Math.round(value);
+            self.percent = (self.value - self.minValue) / (self.maxValue - self.minValue);
+            self.valueBar.setAttribute('style', 'width: ' + (self.percent * 100) + '%;');
+            self.valueLabelForeground.setAttribute('style', 'width: ' + (1.0 / self.percent * 100) + '%;');
+            self.valueLabelBackground.innerHTML = self.valueLabelForeground.innerHTML = self.format.replace('{value}', self.value);
+            self.displayImperial();
+        }
+
+        uiElement.displayImperial = function () {
+            var displays = document.querySelectorAll('.imperialDisplay');
+            for (var i = 0; i < displays.length; i++) {
+                var binding = displays[i].getAttribute('data-binding');
+                if (binding == self.name) {
+                    var realFeet = ((self.value * 0.393700) / 12);
+                    var feet = Math.floor(realFeet);
+                    var inches = Math.floor((realFeet - feet) * 12);
+                    displays[i].innerHTML = feet + "&apos;" + inches + '&apos;&apos;';
+                }
+            }
+        }
+
+        return {
+            name: uiElement.name,
+            value: uiElement.getValue,
+            updateValue: uiElement.updateValue
+        }
+    };
+
+    modsExtension.createDropdown = function (_obj, _callbackName) {
+        let uiElement = {};
+
+        uiElement.obj = _obj;
+        uiElement.callbackName = _callbackName;
+        uiElement.value = _obj.getAttribute('data-current');
+        uiElement.options = _obj.getAttribute('data-options').split(',');
+        uiElement.name = _obj.id;
+        uiElement.opened = false;
+        uiElement.keyValue = [];
+        uiElement.type = _obj.getAttribute('data-type');
+
+        uiElement.optionElements = [];
+
+        var self = uiElement;
+
+        uiElement.SelectValue = function (_e) {
+            self.value = _e.target.getAttribute('data-key');
+            self.valueElement.innerHTML = _e.target.getAttribute('data-value');
+            self.globalClose();
+
+            engine.call(self.callbackName, self.name, self.value);
+        }
+
+        uiElement.openClick = function (_e) {
+            if (self.obj.classList.contains('open')) {
+                self.obj.classList.remove('open');
+                self.list.setAttribute('style', 'display: none;');
+            } else {
+                self.obj.classList.add('open');
+                self.list.setAttribute('style', 'display: block;');
+                self.opened = true;
+                window.setTimeout(function () { self.opened = false; }, 10);
+            }
+        }
+
+        uiElement.globalClose = function (_e) {
+            if (self.opened) return;
+            self.obj.classList.remove('open');
+            self.list.setAttribute('style', 'display: none;');
+        }
+
+        uiElement.list = document.createElement('div');
+        uiElement.list.className = 'valueList';
+
+        uiElement.updateOptions = function () {
+            self.list.innerHTML = "";
+            for (var i = 0; i < self.options.length; i++) {
+                self.optionElements[i] = document.createElement('div');
+                self.optionElements[i].className = 'listValue';
+                var valuePair = Array.isArray(self.options[i]) ? self.options[i] : self.options[i].split(':');
+                var key = "";
+                var value = "";
+                if (valuePair.length == 1) {
+                    key = valuePair[0];
+                    value = valuePair[0];
+                } else {
+                    key = valuePair[0];
+                    value = valuePair[1];
+                }
+                self.keyValue[key] = value;
+                self.optionElements[i].innerHTML = value;
+                self.optionElements[i].setAttribute('data-value', value);
+                self.optionElements[i].setAttribute('data-key', key);
+                self.list.appendChild(self.optionElements[i]);
+                self.optionElements[i].addEventListener('mousedown', self.SelectValue);
+            }
+
+            self.valueElement.innerHTML = self.keyValue[self.value];
+        }
+
+        uiElement.valueElement = document.createElement('div');
+        uiElement.valueElement.className = 'dropdown-value';
+
+        uiElement.updateOptions();
+
+        uiElement.obj.appendChild(uiElement.valueElement);
+        uiElement.obj.appendChild(uiElement.list);
+        uiElement.valueElement.addEventListener('mousedown', uiElement.openClick);
+        document.addEventListener('mousedown', uiElement.globalClose);
+
+        uiElement.getValue = function () {
+            return self.value;
+        }
+
+        uiElement.updateValue = function (value) {
+            self.value = value;
+            self.valueElement.innerHTML = self.keyValue[value];
+        }
+
+        uiElement.setOptions = function (options) {
+            self.options = options;
+        }
+
+        return {
+            name: uiElement.name,
+            value: uiElement.getValue,
+            updateValue: uiElement.updateValue,
+            updateOptions: uiElement.updateOptions,
+            setOptions: uiElement.setOptions
+        }
+    };
+
+    modsExtension.settings = []
+    modsExtension.settings.data = []; // [category] -> [entry]
+    modsExtension.addSetting = function (_category, _entry, _obj) {
+        if (modsExtension.settings.data[_category] === undefined)
+            modsExtension.settings.data[_category] = []
+        modsExtension.settings.data[_category][_entry] = _obj
+    };
+    modsExtension.updateSetting = function (_category, _entry, _value) {
+        if ((modsExtension.settings.data[_category] !== undefined) && (modsExtension.settings.data[_category][_entry] !== undefined))
+            modsExtension.settings.data[_category][_entry].updateValue(_value);
+    };
+    engine.on('updateModSetting', modsExtension.updateSetting);
+}

js/ui_elements.js

@@ -1,267 +0,0 @@
-// Modified from original `inp` types, because I have no js knowledge to hook stuff
-
-if (typeof inp_toggle_mod === 'undefined') {
-    window.inp_toggle_mod = function (_obj, _callbackName) {
-        this.obj = _obj;
-        this.callbackName = _callbackName;
-        this.value = _obj.getAttribute('data-current');
-        this.name = _obj.id;
-        this.type = _obj.getAttribute('data-type');
-
-        var self = this;
-
-        this.mouseDown = function (_e) {
-            self.value = self.value == "True" ? "False" : "True";
-            self.updateState();
-        }
-
-        this.updateState = function () {
-            self.obj.classList.remove("checked");
-            if (self.value == "True") {
-                self.obj.classList.add("checked");
-            }
-
-            engine.call(self.callbackName, self.name, self.value);
-        }
-
-        _obj.addEventListener('mousedown', this.mouseDown);
-
-        this.getValue = function () {
-            return self.value;
-        }
-
-        this.updateValue = function (value) {
-            self.value = value;
-
-            self.obj.classList.remove("checked");
-            if (self.value == "True") {
-                self.obj.classList.add("checked");
-            }
-        }
-
-        this.updateValue(this.value);
-
-        return {
-            name: this.name,
-            value: this.getValue,
-            updateValue: this.updateValue
-        }
-    };
-}
-
-if (typeof inp_slider_mod === 'undefined') {
-    window.inp_slider_mod = function (_obj, _callbackName) {
-        this.obj = _obj;
-        this.callbackName = _callbackName;
-        this.minValue = parseFloat(_obj.getAttribute('data-min'));
-        this.maxValue = parseFloat(_obj.getAttribute('data-max'));
-        this.percent = 0;
-        this.value = parseFloat(_obj.getAttribute('data-current'));
-        this.dragActive = false;
-        this.name = _obj.id;
-        this.type = _obj.getAttribute('data-type');
-        this.stepSize = _obj.getAttribute('data-stepSize') || 0;
-        this.format = _obj.getAttribute('data-format') || '{value}';
-
-        var self = this;
-
-        if (this.stepSize != 0)
-            this.value = Math.round(this.value / this.stepSize) * this.stepSize;
-        else
-            this.value = Math.round(this.value);
-
-        this.valueLabelBackground = document.createElement('div');
-        this.valueLabelBackground.className = 'valueLabel background';
-        this.valueLabelBackground.innerHTML = this.format.replace('{value}', this.value);
-        this.obj.appendChild(this.valueLabelBackground);
-
-        this.valueBar = document.createElement('div');
-        this.valueBar.className = 'valueBar';
-        this.valueBar.setAttribute('style', 'width: ' + (((this.value - this.minValue) / (this.maxValue - this.minValue)) * 100) + '%;');
-        this.obj.appendChild(this.valueBar);
-
-        this.valueLabelForeground = document.createElement('div');
-        this.valueLabelForeground.className = 'valueLabel foreground';
-        this.valueLabelForeground.innerHTML = this.format.replace('{value}', this.value);
-        this.valueLabelForeground.setAttribute('style', 'width: ' + (1.0 / ((this.value - this.minValue) / (this.maxValue - this.minValue)) * 100) + '%;');
-        this.valueBar.appendChild(this.valueLabelForeground);
-
-        this.mouseDown = function (_e) {
-            self.dragActive = true;
-            self.mouseMove(_e, false);
-        }
-
-        this.mouseMove = function (_e, _write) {
-            if (self.dragActive) {
-                var rect = _obj.getBoundingClientRect();
-                var start = rect.left;
-                var end = rect.right;
-                self.percent = Math.min(Math.max((_e.clientX - start) / rect.width, 0), 1);
-                var value = self.percent;
-                value *= (self.maxValue - self.minValue);
-                value += self.minValue;
-                if (self.stepSize != 0) {
-                    value = Math.round(value / self.stepSize);
-                    self.value = value * self.stepSize;
-                    self.percent = (self.value - self.minValue) / (self.maxValue - self.minValue);
-                }
-                else
-                    self.value = Math.round(value);
-
-                self.valueBar.setAttribute('style', 'width: ' + (self.percent * 100) + '%;');
-                self.valueLabelForeground.setAttribute('style', 'width: ' + (1.0 / self.percent * 100) + '%;');
-                self.valueLabelBackground.innerHTML = self.valueLabelForeground.innerHTML = self.format.replace('{value}', self.value);
-
-                engine.call(self.callbackName, self.name, "" + self.value);
-                self.displayImperial();
-            }
-        }
-
-        this.mouseUp = function (_e) {
-            self.mouseMove(_e, true);
-            self.dragActive = false;
-        }
-
-        _obj.addEventListener('mousedown', this.mouseDown);
-        document.addEventListener('mousemove', this.mouseMove);
-        document.addEventListener('mouseup', this.mouseUp);
-
-        this.getValue = function () {
-            return self.value;
-        }
-
-        this.updateValue = function (value) {
-            if (self.stepSize != 0)
-                self.value = Math.round(value * self.stepSize) / self.stepSize;
-            else
-                self.value = Math.round(value);
-            self.percent = (self.value - self.minValue) / (self.maxValue - self.minValue);
-            self.valueBar.setAttribute('style', 'width: ' + (self.percent * 100) + '%;');
-            self.valueLabelForeground.setAttribute('style', 'width: ' + (1.0 / self.percent * 100) + '%;');
-            self.valueLabelBackground.innerHTML = self.valueLabelForeground.innerHTML = self.format.replace('{value}', self.value);
-            self.displayImperial();
-        }
-
-        this.displayImperial = function () {
-            var displays = document.querySelectorAll('.imperialDisplay');
-            for (var i = 0; i < displays.length; i++) {
-                var binding = displays[i].getAttribute('data-binding');
-                if (binding == self.name) {
-                    var realFeet = ((self.value * 0.393700) / 12);
-                    var feet = Math.floor(realFeet);
-                    var inches = Math.floor((realFeet - feet) * 12);
-                    displays[i].innerHTML = feet + "&apos;" + inches + '&apos;&apos;';
-                }
-            }
-        }
-
-        return {
-            name: this.name,
-            value: this.getValue,
-            updateValue: this.updateValue
-        }
-    };
-}
-
-if (typeof inp_dropdown_mod === 'undefined') {
-    window.inp_dropdown_mod = function (_obj, _callbackName) {
-        this.obj = _obj;
-        this.callbackName = _callbackName;
-        this.value = _obj.getAttribute('data-current');
-        this.options = _obj.getAttribute('data-options').split(',');
-        this.name = _obj.id;
-        this.opened = false;
-        this.keyValue = [];
-        this.type = _obj.getAttribute('data-type');
-
-        this.optionElements = [];
-
-        var self = this;
-
-        this.SelectValue = function (_e) {
-            self.value = _e.target.getAttribute('data-key');
-            self.valueElement.innerHTML = _e.target.getAttribute('data-value');
-            self.globalClose();
-
-            engine.call(self.callbackName, self.name, self.value);
-        }
-
-        this.openClick = function (_e) {
-            if (self.obj.classList.contains('open')) {
-                self.obj.classList.remove('open');
-                self.list.setAttribute('style', 'display: none;');
-            } else {
-                self.obj.classList.add('open');
-                self.list.setAttribute('style', 'display: block;');
-                self.opened = true;
-                window.setTimeout(function () { self.opened = false; }, 10);
-            }
-        }
-
-        this.globalClose = function (_e) {
-            if (self.opened) return;
-            self.obj.classList.remove('open');
-            self.list.setAttribute('style', 'display: none;');
-        }
-
-        this.list = document.createElement('div');
-        this.list.className = 'valueList';
-
-        this.updateOptions = function () {
-            self.list.innerHTML = "";
-            for (var i = 0; i < self.options.length; i++) {
-                self.optionElements[i] = document.createElement('div');
-                self.optionElements[i].className = 'listValue';
-                var valuePair = Array.isArray(self.options[i]) ? self.options[i] : self.options[i].split(':');
-                var key = "";
-                var value = "";
-                if (valuePair.length == 1) {
-                    key = valuePair[0];
-                    value = valuePair[0];
-                } else {
-                    key = valuePair[0];
-                    value = valuePair[1];
-                }
-                self.keyValue[key] = value;
-                self.optionElements[i].innerHTML = value;
-                self.optionElements[i].setAttribute('data-value', value);
-                self.optionElements[i].setAttribute('data-key', key);
-                self.list.appendChild(self.optionElements[i]);
-                self.optionElements[i].addEventListener('mousedown', self.SelectValue);
-            }
-
-            self.valueElement.innerHTML = self.keyValue[self.value];
-        }
-
-        this.valueElement = document.createElement('div');
-        this.valueElement.className = 'dropdown-value';
-
-        this.updateOptions();
-
-        this.obj.appendChild(this.valueElement);
-        this.obj.appendChild(this.list);
-        this.valueElement.addEventListener('mousedown', this.openClick);
-        document.addEventListener('mousedown', this.globalClose);
-
-        this.getValue = function () {
-            return self.value;
-        }
-
-        this.updateValue = function (value) {
-            self.value = value;
-            self.valueElement.innerHTML = self.keyValue[value];
-        }
-
-        this.setOptions = function (options) {
-            self.options = options;
-        }
-
-        return {
-            name: this.name,
-            value: this.getValue,
-            updateValue: this.updateValue,
-            updateOptions: this.updateOptions,
-            setOptions: this.setOptions
-        }
-    };
-}

ml_amt/Settings.cs

@@ -73,15 +73,15 @@ namespace ml_amt
 
             ViewManager.Instance.gameMenuView.Listener.ReadyForBindings += () =>
             {
-                ViewManager.Instance.gameMenuView.View.BindCall("MelonMod_AMT_Call_InpSlider", new Action<string, string>(OnSliderUpdate));
+                ViewManager.Instance.gameMenuView.View.BindCall("OnSliderUpdate_" + ms_category.Identifier, new Action<string, string>(OnSliderUpdate));
-                ViewManager.Instance.gameMenuView.View.BindCall("MelonMod_AMT_Call_InpToggle", new Action<string, string>(OnToggleUpdate));
+                ViewManager.Instance.gameMenuView.View.BindCall("OnToggleUpdate_" + ms_category.Identifier, new Action<string, string>(OnToggleUpdate));
             };
             ViewManager.Instance.gameMenuView.Listener.FinishLoad += (_) =>
             {
-                ViewManager.Instance.gameMenuView.View.ExecuteScript(Scripts.GetEmbeddedScript("ui_elements.js"));
+                ViewManager.Instance.gameMenuView.View.ExecuteScript(Scripts.GetEmbeddedScript("mods_extension.js"));
-                ViewManager.Instance.gameMenuView.View.ExecuteScript(Scripts.GetEmbeddedScript("ui_menu.js"));
+                ViewManager.Instance.gameMenuView.View.ExecuteScript(Scripts.GetEmbeddedScript("mod_menu.js"));
                 foreach(var l_entry in ms_entries)
-                    ViewManager.Instance.gameMenuView.View.TriggerEvent("updateModSettingAMT", l_entry.DisplayName, l_entry.GetValueAsString());
+                    ViewManager.Instance.gameMenuView.View.TriggerEvent("updateModSetting", ms_category.Identifier, l_entry.DisplayName, l_entry.GetValueAsString());
             };
         }
 

ml_amt/ml_amt.csproj

@@ -26,15 +26,15 @@
 
   <ItemGroup>
     <None Remove="AvatarMotionTweaker.json" />
-    <None Remove="resources\ui_menu.js" />
+    <None Remove="resources\mod_menu.js" />
   </ItemGroup>
 
   <ItemGroup>
-    <EmbeddedResource Include="resources\ui_menu.js" />
+    <EmbeddedResource Include="resources\mod_menu.js" />
   </ItemGroup>
 
   <ItemGroup>
-    <EmbeddedResource Include="..\js\ui_elements.js" Link="resources\ui_elements.js" />
+    <EmbeddedResource Include="..\js\mods_extension.js" Link="resources\mods_extension.js" />
   </ItemGroup>
 
   <ItemGroup>

ml_amt/resources/mod_menu.js

@@ -1,16 +1,4 @@
-// Add settings
+// Add own menu
-var g_modSettingsAMT = [];
-
-engine.on('updateModSettingAMT', function (_name, _value) {
-    for (var i = 0; i < g_modSettingsAMT.length; i++) {
-        if (g_modSettingsAMT[i].name == _name) {
-            g_modSettingsAMT[i].updateValue(_value);
-            break;
-        }
-    }
-});
-
-// Add own menu
 {
     let l_block = document.createElement('div');
     l_block.innerHTML = `
@@ -70,15 +58,11 @@ engine.on('updateModSettingAMT', function (_name, _value) {
     `;
     document.getElementById('settings-ik').appendChild(l_block);
 
-    // Update sliders in new menu block
+    // Toggles
-    let l_sliders = l_block.querySelectorAll('.inp_slider');
+    for (let l_toggle of l_block.querySelectorAll('.inp_toggle'))
-    for (var i = 0; i < l_sliders.length; i++) {
+        modsExtension.addSetting('AMT', l_toggle.id, modsExtension.createToggle(l_toggle, 'OnToggleUpdate_AMT'));
-        g_modSettingsAMT[g_modSettingsAMT.length] = new inp_slider_mod(l_sliders[i], 'MelonMod_AMT_Call_InpSlider');
-    }
 
-    // Update toggles in new menu block
+    // Sliders
-    let l_toggles = l_block.querySelectorAll('.inp_toggle');
+    for (let l_slider of l_block.querySelectorAll('.inp_slider'))
-    for (var i = 0; i < l_toggles.length; i++) {
+        modsExtension.addSetting('AMT', l_slider.id, modsExtension.createSlider(l_slider, 'OnSliderUpdate_AMT'));
-        g_modSettingsAMT[g_modSettingsAMT.length] = new inp_toggle_mod(l_toggles[i], 'MelonMod_AMT_Call_InpToggle');
-    }
 }

ml_lme/Settings.cs

@@ -115,16 +115,16 @@ namespace ml_lme
 
             ViewManager.Instance.gameMenuView.Listener.ReadyForBindings += () =>
             {
-                ViewManager.Instance.gameMenuView.View.BindCall("MelonMod_LME_Call_InpToggle", new Action<string, string>(OnToggleUpdate));
+                ViewManager.Instance.gameMenuView.View.BindCall("OnToggleUpdate_" + ms_category.Identifier, new Action<string, string>(OnToggleUpdate));
-                ViewManager.Instance.gameMenuView.View.BindCall("MelonMod_LME_Call_InpSlider", new Action<string, string>(OnSliderUpdate));
+                ViewManager.Instance.gameMenuView.View.BindCall("OnSliderUpdate_" + ms_category.Identifier, new Action<string, string>(OnSliderUpdate));
-                ViewManager.Instance.gameMenuView.View.BindCall("MelonMod_LME_Call_InpDropdown", new Action<string, string>(OnDropdownUpdate));
+                ViewManager.Instance.gameMenuView.View.BindCall("OnDropdownUpdate_" + ms_category.Identifier, new Action<string, string>(OnDropdownUpdate));
             };
             ViewManager.Instance.gameMenuView.Listener.FinishLoad += (_) =>
             {
-                ViewManager.Instance.gameMenuView.View.ExecuteScript(Scripts.GetEmbeddedScript("ui_elements.js"));
+                ViewManager.Instance.gameMenuView.View.ExecuteScript(Scripts.GetEmbeddedScript("mods_extension.js"));
-                ViewManager.Instance.gameMenuView.View.ExecuteScript(Scripts.GetEmbeddedScript("ui_menu.js"));
+                ViewManager.Instance.gameMenuView.View.ExecuteScript(Scripts.GetEmbeddedScript("mod_menu.js"));
                 foreach(var l_entry in ms_entries)
-                    ViewManager.Instance.gameMenuView.View.TriggerEvent("updateModSettingLME", l_entry.DisplayName, l_entry.GetValueAsString());
+                    ViewManager.Instance.gameMenuView.View.TriggerEvent("updateModSetting", ms_category.Identifier, l_entry.DisplayName, l_entry.GetValueAsString());
             };
         }
 

ml_lme/ml_lme.csproj

@@ -25,13 +25,13 @@
     <None Remove="LeapMotionExtension.json" />
     <None Remove="resources\leapmotion_controller.asset" />
     <None Remove="resources\leapmotion_hands.asset" />
-    <None Remove="resources\ui_menu.js" />
+    <None Remove="resources\mod_menu.js" />
   </ItemGroup>
   
   <ItemGroup>
     <EmbeddedResource Include="resources\leapmotion_controller.asset" />
     <EmbeddedResource Include="resources\leapmotion_hands.asset" />
-    <EmbeddedResource Include="resources\ui_menu.js" />
+    <EmbeddedResource Include="resources\mod_menu.js" />
     <EmbeddedResource Include="vendor\LeapSDK\lib\x64\LeapC.dll">
       <Link>resources/LeapC.dll</Link>
     </EmbeddedResource>
@@ -93,7 +93,7 @@
   </ItemGroup>
   
   <ItemGroup>
-    <EmbeddedResource Include="..\js\ui_elements.js" Link="resources\ui_elements.js" />
+    <EmbeddedResource Include="..\js\mods_extension.js" Link="resources\mods_extension.js" />
   </ItemGroup>
 
   <Target Name="PostBuild" AfterTargets="PostBuildEvent">

ml_lme/resources/mod_menu.js

@@ -1,17 +1,4 @@
-// Add settings
+{
-var g_modSettingsLME = [];
-
-engine.on('updateModSettingLME', function (_name, _value) {
-    for (var i = 0; i < g_modSettingsLME.length; i++) {
-        if (g_modSettingsLME[i].name == _name) {
-            g_modSettingsLME[i].updateValue(_value);
-            break;
-        }
-    }
-});
-
-// Add own menu
-{
     let l_block = document.createElement('div');
     l_block.innerHTML = `
         <div class ="settings-subcategory">
@@ -161,21 +148,15 @@ engine.on('updateModSettingLME', function (_name, _value) {
     `;
     document.getElementById('settings-implementation').appendChild(l_block);
 
-    // Update toggles in new menu block
+    // Toggles
-    let l_toggles = l_block.querySelectorAll('.inp_toggle');
+    for (let l_toggle of l_block.querySelectorAll('.inp_toggle'))
-    for (var i = 0; i < l_toggles.length; i++) {
+        modsExtension.addSetting('LME', l_toggle.id, modsExtension.createToggle(l_toggle, 'OnToggleUpdate_LME'));
-        g_modSettingsLME[g_modSettingsLME.length] = new inp_toggle_mod(l_toggles[i], 'MelonMod_LME_Call_InpToggle');
-    }
 
-    // Update sliders in new menu block
+    // Sliders
-    let l_sliders = l_block.querySelectorAll('.inp_slider');
+    for (let l_slider of l_block.querySelectorAll('.inp_slider'))
-    for (var i = 0; i < l_sliders.length; i++) {
+        modsExtension.addSetting('LME', l_slider.id, modsExtension.createSlider(l_slider, 'OnSliderUpdate_LME'));
-        g_modSettingsLME[g_modSettingsLME.length] = new inp_slider_mod(l_sliders[i], 'MelonMod_LME_Call_InpSlider');
-    }
 
-    //Update dropdowns in new menu block
+    // Dropdowns
-    let l_dropdowns = l_block.querySelectorAll('.inp_dropdown');
+    for (let l_dropdown of l_block.querySelectorAll('.inp_dropdown'))
-    for (var i = 0; i < l_dropdowns.length; i++) {
+        modsExtension.addSetting('LME', l_dropdown.id, modsExtension.createDropdown(l_dropdown, 'OnDropdownUpdate_LME'));
-        g_modSettingsLME[g_modSettingsLME.length] = new inp_dropdown_mod(l_dropdowns[i], 'MelonMod_LME_Call_InpDropdown');
-    }
 }

ml_pam/Settings.cs

@@ -47,15 +47,15 @@ namespace ml_pam
 
             ViewManager.Instance.gameMenuView.Listener.ReadyForBindings += () =>
             {
-                ViewManager.Instance.gameMenuView.View.BindCall("MelonMod_PAM_Call_InpToggle", new Action<string, string>(OnToggleUpdate));
+                ViewManager.Instance.gameMenuView.View.BindCall("OnToggleUpdate_" + ms_category.Identifier, new Action<string, string>(OnToggleUpdate));
-                ViewManager.Instance.gameMenuView.View.BindCall("MelonMod_PAM_Call_InpSlider", new Action<string, string>(OnSliderUpdate));
+                ViewManager.Instance.gameMenuView.View.BindCall("OnSliderUpdate_" + ms_category.Identifier, new Action<string, string>(OnSliderUpdate));
             };
             ViewManager.Instance.gameMenuView.Listener.FinishLoad += (_) =>
             {
-                ViewManager.Instance.gameMenuView.View.ExecuteScript(Scripts.GetEmbeddedScript("ui_elements.js"));
+                ViewManager.Instance.gameMenuView.View.ExecuteScript(Scripts.GetEmbeddedScript("mods_extension.js"));
-                ViewManager.Instance.gameMenuView.View.ExecuteScript(Scripts.GetEmbeddedScript("ui_menu.js"));
+                ViewManager.Instance.gameMenuView.View.ExecuteScript(Scripts.GetEmbeddedScript("mod_menu.js"));
                 foreach(var l_entry in ms_entries)
-                    ViewManager.Instance.gameMenuView.View.TriggerEvent("updateModSettingPAM", l_entry.DisplayName, l_entry.GetValueAsString());
+                    ViewManager.Instance.gameMenuView.View.TriggerEvent("updateModSetting", ms_category.Identifier, l_entry.DisplayName, l_entry.GetValueAsString());
             };
         }
 

ml_pam/ml_pam.csproj

@@ -17,15 +17,15 @@
 
   <ItemGroup>
     <None Remove="PickupArmMovement.json" />
-    <None Remove="resources\ui_menu.js" />
+    <None Remove="resources\mod_menu.js" />
   </ItemGroup>
 
   <ItemGroup>
-    <EmbeddedResource Include="resources\ui_menu.js" />
+    <EmbeddedResource Include="resources\mod_menu.js" />
   </ItemGroup>
 
   <ItemGroup>
-    <EmbeddedResource Include="..\js\ui_elements.js" Link="resources\ui_elements.js" />
+    <EmbeddedResource Include="..\js\mods_extension.js" Link="resources\mods_extension.js" />
   </ItemGroup>
 
   <ItemGroup>

ml_pam/resources/mod_menu.js

@@ -1,17 +1,4 @@
-// Add settings
+{
-var g_modSettingsPAM = [];
-
-engine.on('updateModSettingPAM', function (_name, _value) {
-    for (var i = 0; i < g_modSettingsPAM.length; i++) {
-        if (g_modSettingsPAM[i].name == _name) {
-            g_modSettingsPAM[i].updateValue(_value);
-            break;
-        }
-    }
-});
-
-// Add own menu
-{
     let l_block = document.createElement('div');
     l_block.innerHTML = `
         <div class ="settings-subcategory">
@@ -35,15 +22,11 @@ engine.on('updateModSettingPAM', function (_name, _value) {
     `;
     document.getElementById('settings-interaction').appendChild(l_block);
 
-    // Update toggles in new menu block
+    // Toggles
-    let l_toggles = l_block.querySelectorAll('.inp_toggle');
+    for (let l_toggle of l_block.querySelectorAll('.inp_toggle'))
-    for (var i = 0; i < l_toggles.length; i++) {
+        modsExtension.addSetting('PAM', l_toggle.id, modsExtension.createToggle(l_toggle, 'OnToggleUpdate_PAM'));
-        g_modSettingsPAM[g_modSettingsPAM.length] = new inp_toggle_mod(l_toggles[i], 'MelonMod_PAM_Call_InpToggle');
-    }
 
-    // Update sliders in new menu block
+    // Sliders
-    let l_sliders = l_block.querySelectorAll('.inp_slider');
+    for (let l_slider of l_block.querySelectorAll('.inp_slider'))
-    for (var i = 0; i < l_sliders.length; i++) {
+        modsExtension.addSetting('PAM', l_slider.id, modsExtension.createSlider(l_slider, 'OnSliderUpdate_PAM'));
-        g_modSettingsPAM[g_modSettingsPAM.length] = new inp_slider_mod(l_sliders[i], 'MelonMod_PAM_Call_InpSlider');
-    }
 }

ml_vei/Main.cs

@@ -27,16 +27,23 @@ namespace ml_vei
                     float l_mag = ((!__instance.HasEmoteOverride) ? __instance.Primary2DAxis : __instance.EmoteOverride).magnitude;
                     if(__instance.ViveDirectionPressed && (l_mag >= CVRInputManager.VrViveGestureDeadZone))
                     {
-                        if(__instance.Grip > 0.5f)
+                        if(Settings.GripTrigger)
                         {
-                            __instance.GestureRaw = -1f;
+                            switch(Settings.AxisPriority)
-                            __instance.Gesture = -1f;
+                            {
+                                case Settings.PriorityAxis.Grip:
+                                    __instance.GestureRaw = ((__instance.Grip > 0.5f) ? -1f : __instance.Trigger);
+                                    break;
+
+                                case Settings.PriorityAxis.Trigger:
+                                    __instance.GestureRaw = (!UnityEngine.Mathf.Approximately(__instance.Trigger, 0f) ? __instance.Trigger : ((__instance.Grip > 0.5f) ? -1f : 0f));
+                                    break;
+                            }
                         }
                         else
-                        {
+                            __instance.GestureRaw = 0f;
-                            __instance.GestureRaw = __instance.Trigger;
+
-                            __instance.Gesture = __instance.Trigger;
+                        __instance.Gesture = __instance.GestureRaw;
-                        }
                     }
                 }
             }

ml_vei/Settings.cs

@@ -6,17 +6,29 @@ namespace ml_vei
 {
     static class Settings
     {
-        public enum ModSetting
+        enum ModSetting
         {
-            Gestures = 0
+            Gestures = 0,
+            GripTrigger,
+            AxisPriority
+        }
+
+        public enum PriorityAxis
+        {
+            Grip = 0,
+            Trigger
         }
 
         public static bool Gestures { get; private set; } = true;
+        public static bool GripTrigger { get; private set; } = true;
+        public static PriorityAxis AxisPriority { get; private set; } = PriorityAxis.Grip;
 
         static MelonLoader.MelonPreferences_Category ms_category = null;
         static List<MelonLoader.MelonPreferences_Entry> ms_entries = null;
 
         static public event Action<bool> GesturesChange;
+        static public event Action<bool> GripTriggerChange;
+        static public event Action<PriorityAxis> AxisPriorityChange;
 
         internal static void Init()
         {
@@ -25,9 +37,13 @@ namespace ml_vei
             ms_entries = new List<MelonLoader.MelonPreferences_Entry>()
             {
                 ms_category.CreateEntry(ModSetting.Gestures.ToString(), Gestures),
+                ms_category.CreateEntry(ModSetting.GripTrigger.ToString(), GripTrigger),
+                ms_category.CreateEntry(ModSetting.AxisPriority.ToString(), (int)AxisPriority),
             };
 
-            Load();
+            Gestures = (bool)ms_entries[(int)ModSetting.Gestures].BoxedValue;
+            GripTrigger = (bool)ms_entries[(int)ModSetting.GripTrigger].BoxedValue;
+            AxisPriority = (PriorityAxis)(int)ms_entries[(int)ModSetting.AxisPriority].BoxedValue;
 
             MelonLoader.MelonCoroutines.Start(WaitMainMenuUi());
         }
@@ -43,22 +59,18 @@ namespace ml_vei
 
             ViewManager.Instance.gameMenuView.Listener.ReadyForBindings += () =>
             {
-                ViewManager.Instance.gameMenuView.View.BindCall("MelonMod_VEI_Call_InpToggle", new Action<string, string>(OnToggleUpdate));
+                ViewManager.Instance.gameMenuView.View.BindCall("OnToggleUpdate_" + ms_category.Identifier, new Action<string, string>(OnToggleUpdate));
+                ViewManager.Instance.gameMenuView.View.BindCall("OnDropdownUpdate_" + ms_category.Identifier, new Action<string, string>(OnDropdownUpdate));
             };
             ViewManager.Instance.gameMenuView.Listener.FinishLoad += (_) =>
             {
-                ViewManager.Instance.gameMenuView.View.ExecuteScript(Scripts.GetEmbeddedScript("ui_elements.js"));
+                ViewManager.Instance.gameMenuView.View.ExecuteScript(Scripts.GetEmbeddedScript("mods_extension.js"));
-                ViewManager.Instance.gameMenuView.View.ExecuteScript(Scripts.GetEmbeddedScript("ui_menu.js"));
+                ViewManager.Instance.gameMenuView.View.ExecuteScript(Scripts.GetEmbeddedScript("mod_menu.js"));
                 foreach(var l_entry in ms_entries)
-                    ViewManager.Instance.gameMenuView.View.TriggerEvent("updateModSettingVEI", l_entry.DisplayName, l_entry.GetValueAsString());
+                    ViewManager.Instance.gameMenuView.View.TriggerEvent("updateModSetting", ms_category.Identifier, l_entry.DisplayName, l_entry.GetValueAsString());
             };
         }
 
-        static void Load()
-        {
-            Gestures = (bool)ms_entries[(int)ModSetting.Gestures].BoxedValue;
-        }
-
         static void OnToggleUpdate(string p_name, string p_value)
         {
             if(Enum.TryParse(p_name, out ModSetting l_setting))
@@ -71,10 +83,34 @@ namespace ml_vei
                         GesturesChange?.Invoke(Gestures);
                     }
                     break;
+
+                    case ModSetting.GripTrigger:
+                    {
+                        GripTrigger = bool.Parse(p_value);
+                        GripTriggerChange?.Invoke(GripTrigger);
+                    } break;
                 }
 
                 ms_entries[(int)l_setting].BoxedValue = bool.Parse(p_value);
             }
         }
+
+        static void OnDropdownUpdate(string p_name, string p_value)
+        {
+            if(Enum.TryParse(p_name, out ModSetting l_setting))
+            {
+                switch(l_setting)
+                {
+                    case ModSetting.AxisPriority:
+                    {
+                        AxisPriority = (PriorityAxis)int.Parse(p_value);
+                        AxisPriorityChange?.Invoke(AxisPriority);
+                    }
+                    break;
+                }
+
+                ms_entries[(int)l_setting].BoxedValue = int.Parse(p_value);
+            }
+        }
     }
 }

ml_vei/ml_vei.csproj

@@ -12,7 +12,7 @@
 
   <ItemGroup>
     <None Remove="PlayerRagdollMod.json" />
-    <None Remove="resources\ui_menu.js" />
+    <None Remove="resources\mod_menu.js" />
   </ItemGroup>
 
   <ItemGroup>
@@ -53,8 +53,11 @@
   </ItemGroup>
 
   <ItemGroup>
-    <EmbeddedResource Include="..\js\ui_elements.js" Link="resources\ui_elements.js" />
+    <EmbeddedResource Include="resources\mod_menu.js" />
-    <EmbeddedResource Include="resources\ui_menu.js" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <EmbeddedResource Include="..\js\mods_extension.js" Link="resources\mods_extension.js" />
   </ItemGroup>
 
   <Target Name="PostBuild" AfterTargets="PostBuildEvent">

ml_vei/resources/mod_menu.js

@@ -0,0 +1,39 @@
+{
+    let l_block = document.createElement('div');
+    l_block.innerHTML = `
+        <div class ="settings-subcategory">
+            <div class ="subcategory-name">Vive Extended Input</div>
+            <div class ="subcategory-description"></div>
+        </div>
+
+        <div class ="row-wrapper">
+            <div class ="option-caption">Disable gestures while moving: </div>
+            <div class ="option-input">
+                <div id="Gestures" class ="inp_toggle no-scroll" data-current="true"></div>
+            </div>
+        </div>
+
+        <div class ="row-wrapper">
+            <div class ="option-caption">Apply grip/trigger while moving: </div>
+            <div class ="option-input">
+                <div id="GripTrigger" class ="inp_toggle no-scroll" data-current="true"></div>
+            </div>
+        </div>
+
+        <div class ="row-wrapper">
+            <div class ="option-caption">Axis priority: </div>
+            <div class ="option-input">
+                <div id="AxisPriority" class ="inp_dropdown no-scroll" data-options="0:Grip,1:Trigger" data-current="0"></div>
+            </div>
+        </div>
+    `;
+    document.getElementById('settings-input').appendChild(l_block);
+
+    // Toggles
+    for (let l_toggle of l_block.querySelectorAll('.inp_toggle'))
+        modsExtension.addSetting('VEI', l_toggle.id, modsExtension.createToggle(l_toggle, 'OnToggleUpdate_VEI'));
+
+    // Dropdowns
+    for (let l_dropdown of l_block.querySelectorAll('.inp_dropdown'))
+        modsExtension.addSetting('VEI', l_dropdown.id, modsExtension.createDropdown(l_dropdown, 'OnDropdownUpdate_VEI'));
+}

ml_vei/resources/ui_menu.js

@@ -1,36 +0,0 @@
-// Add settings
-var g_modSettingsVEI = [];
-
-engine.on('updateModSettingVEI', function (_name, _value) {
-    for (var i = 0; i < g_modSettingsVEI.length; i++) {
-        if (g_modSettingsVEI[i].name == _name) {
-            g_modSettingsVEI[i].updateValue(_value);
-            break;
-        }
-    }
-});
-
-// Add own menu
-{
-    let l_block = document.createElement('div');
-    l_block.innerHTML = `
-        <div class ="settings-subcategory">
-            <div class ="subcategory-name">Vive Extended Input</div>
-            <div class ="subcategory-description"></div>
-        </div>
-
-        <div class ="row-wrapper">
-            <div class ="option-caption">Disable gestures while moving: </div>
-            <div class ="option-input">
-                <div id="Gestures" class ="inp_toggle no-scroll" data-current="true"></div>
-            </div>
-        </div>
-    `;
-    document.getElementById('settings-input').appendChild(l_block);
-
-    // Update toggles in new menu block
-    let l_toggles = l_block.querySelectorAll('.inp_toggle');
-    for (var i = 0; i < l_toggles.length; i++) {
-        g_modSettingsVEI[g_modSettingsVEI.length] = new inp_toggle_mod(l_toggles[i], 'MelonMod_VEI_Call_InpToggle');
-    }
-}