integrate settingsapi

plugin/customizer.js

@@ -20,7 +20,7 @@
 var internal = {
 
     print: function (str) {
-        console.log(`%c[Customizer]%c ` + str, 'font-weight:bold;color:#0cc', '');
+        console.log(`%c[Customizer]%c ` + str, 'font-weight:bold;color:#c8f', '');
     }
 
 }

plugin/settings.js

@@ -19,24 +19,19 @@
 
 exports = {
 
-    replacements: {
+    manifest: {
-        '{section:H.SectionTypes.DIVIDER},{section:"logout",': '{section:H.SectionTypes.DIVIDER},{section:"ENDPWN",label:"Cλnergy Settings",element:window.BlankSettingsElement,color:"#c8f"},{section:H.SectionTypes.DIVIDER},{section:"logout",'
+        author: "Cynosphere, dr1ft",
+        name: "Settings Page + Settings API",
+        description: "Hijacking the settings pages.",
+        replacements: [
+            {signature:'/function z\\(\\){return\\[{(.+)}]}/',payload:'window.$settingsapi={sections:[{$1}]};function z(){return window.$settingsapi.sections;}'}
+        ]
     },
 
     init: function () {
 
         delete endpwn.settings.init;
 
-        var currentSection = '';
-
-        $api.events.listen('ENDPWN_PSEUDO_IPC', msg => {
-            $api.localStorage.set('customizer_signature', JSON.parse(msg.data).signature);
-            console.log(currentSection);
-            renderSettings(currentSection);
-        });
-
-        window.BlankSettingsElement = $api.util.findConstructor('FormSection', 'FormSection').FormSection;
-
         var buttons = $api.util.findFuncExports('button-', 'colorBlack');
         var checkboxes = $api.util.findFuncExports('checkboxEnabled');
         var misc = $api.util.findFuncExports('statusRed-', 'inputDefault');
@@ -46,134 +41,224 @@ exports = {
         var panels = wc.findFunc('flexChild-')[0].exports;
         var panels2 = $api.util.findFuncExports('errorMessage-', 'inputWrapper');
 
-        function createVerticalPanel() {
+        let sections = window.$settingsapi.sections;
-            return createElement("div")
-                .withClass(panels2.vertical, 'epButtonPanel')
-        }
 
-        function createHorizontalPanel() {
+        window.$settingsapi = {
-            return createElement("div")
+            sections: sections,
-                .withClass(panels.horizontal, 'epButtonPanel')
+            ourSections: [],
-        }
+            _callbacks: {},
+            _panels: {},
+            addSection: function(name,label,color=null,callback){
+                let data = {};
 
-        function createButton(name) {
+                data.section = name || `SAPI_${Math.floor(Math.random()*10000)}`;
-            return createElement('button')
+                data.label = label;
-                .withContents(name)
+                data.color = color;
-                .withClass(
+                data.element = $api.util.findConstructor('FormSection', 'FormSection').FormSection;
-                    buttons.button,
-                    buttons.lookFilled,
-                    buttons.colorBrand,
-                    buttons.sizeSmall,
-                    buttons.grow,
-                    'epMargin'
-                );
-        }
 
-        function createWarnButton(name) {
+                $settingsapi.ourSections.push(data);
-            return createElement('button')
+                $settingsapi.sections.splice($settingsapi.sections.length-4,0,data);
-                .withContents(name)
+                $settingsapi._callbacks[name] = callback;
-                .withClass(
+            },
-                    buttons.button,
+            addDivider: function(){
-                    buttons.lookOutlined,
+                $settingsapi.ourSections.push({section:"DIVIDER"});
-                    buttons.colorYellow,
+                $settingsapi.sections.splice($settingsapi.sections.length-4,0,{section:"DIVIDER"});
-                    buttons.sizeSmall,
+            },
-                    buttons.grow,
+            addHeader: function(label){
-                    'epMargin'
+                $settingsapi.ourSections.push({section:"HEADER",label:label});
-                );
+                $settingsapi.sections.splice($settingsapi.sections.length-4,0,{section:"HEADER",label:label});
-        }
+            },
+            exportSections: function(){
+                let out = "";
 
-        function createDangerButton(name) {
+                for(i in $settingsapi._sections){
-            return createElement('button')
+                    out = out + convertToText($settingsapi._sections[i]);
-                .withContents(name)
+                }
-                .withClass(
-                    buttons.button,
-                    buttons.lookOutlined,
-                    buttons.colorRed,
-                    buttons.sizeSmall,
-                    buttons.grow,
-                    'epMargin'
-                );
-        }
 
-        function createH2(text) {
+                return out;
-            //h2-2gWE-o title-3sZWYQ size16-14cGz5 height20-mO2eIN weightSemiBold-NJexzi defaultColor-1_ajX0 defaultMarginh2-2LTaUL marginBottom20-32qID7
+            },
-            return createElement("h2")
+            //All of these allow us to use Discord's elements.
-                .withClass(
+            elements: {
-                    headers.h2,
+                createVerticalPanel: function() {
-                    headers.title,
+                    return createElement("div")
-                    headers.size16,
+                        .withClass(panels2.vertical, 'epButtonPanel')
-                    headers.height20,
+                },
-                    headers.weightSemiBold,
+                createHorizontalPanel: function() {
-                    headers.defaultColor,
+                    return createElement("div")
-                    'epMargin'
+                        .withClass(panels.horizontal, 'epButtonPanel')
-                )
+                },
-                .withText(text);
+                createButton: function(name) {
-        }
+                    return createElement('button')
-
+                        .withContents(name)
-        function createH5(text) {
-            return createElement("h5")
-                .withClass(
-                    headers.h5,
-                    headers.title,
-                    headers.size12,
-                    headers.height16,
-                    headers.weightSemiBold
-                )
-                .withText(text);
-        }
-
-        function createInput(v) {
-            return createElement("input")
-                .withClass(
-                    misc.inputDefault,
-                    misc.input,
-                    misc.size16,
-                    'epMargin'
-                )
-                .modify(x => x.value = v)
-        }
-
-        //<input class="checkboxEnabled-CtinEn checkbox-2tyjJg" type="checkbox">
-        //switchEnabled-V2WDBB switch-3wwwcV valueUnchecked-2lU_20 value-2hFrkk sizeDefault-2YlOZr size-3rFEHg themeDefault-24hCdX
-        //switchEnabled-V2WDBB switch-3wwwcV valueChecked-m-4IJZ value-2hFrkk sizeDefault-2YlOZr size-3rFEHg themeDefault-24hCdX
-        function updateSwitch(s, w) {
-            if (s.checked) {
-                w.classList.remove(checkboxes.valueUnchecked.split(' ')[0]);
-                w.classList.add(checkboxes.valueChecked.split(' ')[0])
-            }
-            else {
-                w.classList.remove(checkboxes.valueChecked.split(' ')[0]);
-                w.classList.add(checkboxes.valueUnchecked.split(' ')[0])
-            }
-        }
-        function createSwitch(c, i) {
-            if (c === undefined) c = () => { };
-            if (i === undefined) i = false;
-            var s, w = createElement('div')
-                .withClass(
-                    checkboxes.switch,
-                    checkboxes.switchEnabled,
-                    checkboxes.size,
-                    checkboxes.sizeDefault,
-                    checkboxes.themeDefault
-                )
-                .withChildren(
-                    s = createElement("input")
                         .withClass(
-                            checkboxes.checkbox,
+                            buttons.button,
-                            checkboxes.checkboxEnabled
+                            buttons.lookFilled,
+                            buttons.colorBrand,
+                            buttons.sizeSmall,
+                            buttons.grow,
+                            'epMargin'
+                        );
+                },
+                createWarnButton: function(name) {
+                    return createElement('button')
+                        .withContents(name)
+                        .withClass(
+                            buttons.button,
+                            buttons.lookOutlined,
+                            buttons.colorYellow,
+                            buttons.sizeSmall,
+                            buttons.grow,
+                            'epMargin'
+                        );
+                },
+                createDangerButton: function(name) {
+                    return createElement('button')
+                        .withContents(name)
+                        .withClass(
+                            buttons.button,
+                            buttons.lookOutlined,
+                            buttons.colorRed,
+                            buttons.sizeSmall,
+                            buttons.grow,
+                            'epMargin'
+                        );
+                },
+                createH2: function(text) {
+                    return createElement("h2")
+                        .withClass(
+                            headers.h2,
+                            headers.title,
+                            headers.size16,
+                            headers.height20,
+                            headers.weightSemiBold,
+                            headers.defaultColor,
+                            'epMargin'
                         )
-                        .modify(x => x.type = 'checkbox')
+                        .withText(text);
-                        .modify(x => x.checked = i)
+                },
-                        .modify(x => x.onchange = () => {
+                createH5: function(text) {
-                            updateSwitch(s, w);
+                    return createElement("h5")
-                            c(s.checked);
+                        .withClass(
-                        })
+                            headers.h5,
-                )
+                            headers.title,
-            updateSwitch(s, w);
+                            headers.size12,
-            return w;
+                            headers.height16,
+                            headers.weightSemiBold
+                        )
+                        .withText(text);
+                },
+                createInput: function(v, p) {
+                    return createElement("input")
+                        .withClass(
+                            misc.inputDefault,
+                            misc.input,
+                            misc.size16,
+                            'epMargin'
+                        )
+                        .modify(x => x.value = v ? v : "")
+                        .modify(x => x.placeholder = p ? p : "")
+                },
+                updateSwitch: function(s, w) {
+                    if (s.checked) {
+                        w.classList.remove(checkboxes.valueUnchecked.split(' ')[0]);
+                        w.classList.add(checkboxes.valueChecked.split(' ')[0])
+                    }
+                    else {
+                        w.classList.remove(checkboxes.valueChecked.split(' ')[0]);
+                        w.classList.add(checkboxes.valueUnchecked.split(' ')[0])
+                    }
+                },
+                createSwitch: function(c, i) {
+                    if (c === undefined) c = () => { };
+                    if (i === undefined) i = false;
+                    var s, w = createElement('div')
+                        .withClass(
+                            checkboxes.switch,
+                            checkboxes.switchEnabled,
+                            checkboxes.size,
+                            checkboxes.sizeDefault,
+                            checkboxes.themeDefault
+                        )
+                        .withChildren(
+                            s = createElement("input")
+                                .withClass(
+                                    checkboxes.checkbox,
+                                    checkboxes.checkboxEnabled
+                                )
+                                .modify(x => x.type = 'checkbox')
+                                .modify(x => x.checked = i)
+                                .modify(x => x.onchange = () => {
+                                    $settingsapi.elements.updateSwitch(s, w);
+                                    c(s.checked);
+                                })
+                        )
+                    $settingsapi.elements.updateSwitch(s, w);
+                    return w;
+                },
+                internal:{
+                    panels:panels,
+                    panels2:panels2,
+                    buttons:buttons,
+                    checkboxes:checkboxes,
+                    misc:misc,
+                    misc2:misc2,
+                    headers:headers
+                }
+            }
         }
 
+        //Example settings tab
+        /*$settingsapi.addDivider();
+        $settingsapi.addHeader("Element Testing");
+        $settingsapi.addSection("TESTING","Element Test Page",null,function(pnl){
+            let em = $settingsapi.elements;
+            em.createH2("Hello World! Heading 2").appendTo(pnl);
+            em.createH5("Hello World! Heading 5").appendTo(pnl);
+            em.createButton("Button!").appendTo(pnl);
+            em.createWarnButton("Warning Button!").appendTo(pnl);
+            em.createDangerButton("Danger Button!").appendTo(pnl);
+            em.createInput("","Input Box!").appendTo(pnl);
+            em.createSwitch().appendTo(pnl);
+
+            let v = em.createVerticalPanel().appendTo(pnl);
+            let h = em.createHorizontalPanel().appendTo(pnl);
+
+            em.createH2("Vertical Panel!").appendTo(v);
+            em.createButton("Beep Boop").appendTo(v);
+
+            em.createH2("Horizontal Panel!").appendTo(h);
+            em.createButton("Boop Beep").appendTo(h);
+        });*/
+
+        function setupSettings(e){
+            for(let i in $settingsapi._panels){
+                $settingsapi._panels[i].remove();
+            }
+
+            for(let i in $settingsapi.ourSections){
+                let data = $settingsapi.ourSections[i];
+                if(e.section == data.section){
+                    var pane = $(".content-column.default");
+                    if (!pane) return;
+
+                    $settingsapi._panels[data.section] = createElement('div')
+                    .withClass('flex-vertical')
+                    .appendTo(pane);
+
+                    $settingsapi._callbacks[data.section]($settingsapi._panels[data.section]);
+                }
+            }
+        }
+
+        $api.events.hook("USER_SETTINGS_MODAL_SET_SECTION",setupSettings);
+        $api.events.hook("USER_SETTINGS_MODAL_INIT",e=>setTimeout(_=>setupSettings(e),200));
+
+        $api.events.listen('ENDPWN_PSEUDO_IPC', msg => {
+            $api.localStorage.set('customizer_signature', JSON.parse(msg.data).signature);
+            console.log(currentSection);
+            renderSettings(currentSection);
+        });
+
         function authorizeCustomizer() {
             var endpoint = $api.internal.constants.API_HOST;
             var url = `https://${endpoint}/oauth2/authorize?client_id=436715820970803203&redirect_uri=https%3A%2F%2Fendpwn.cathoderay.tube%2Fauth%2Fdiscord%2Fintegratedcallback&response_type=code&scope=identify`;
@@ -217,82 +302,64 @@ exports = {
 
         }
 
-        function renderSettings(e) {
+        function renderSettings(pane) {
-
+            var needAuth = !$api.localStorage.get('customizer_signature');
-            currentSection = e;
-            if ($("#ep_settings")) $("#ep_settings").remove();
-
-            if (e.section == "ENDPWN") {
-
-                var pane = $(".content-column.default");
-                if (!pane) return;
-
-                var needAuth = !$api.localStorage.get('customizer_signature');
-
-                var content = createElement('div')
-                    .withId('ep_settings')
-                    .withClass('flex-vertical')
-                    .withChildren(
-                        createElement("div")
-                            .withClass('epSettingsHeader')
-                            .withText('Cλnergy Settings'),
-                )
-                    .appendTo(pane);
-
-                if (!$api.localStorage.get('customizer_signature')) {
-
-                    createHorizontalPanel()
-                        .withChildren(
-                            createButton("Authorize EndPwn Customizer")
-                                .modify(x => x.onclick = authorizeCustomizer)
-                        )
-                        .appendTo(content);
-
-                }
-                else {
-
-                    var discrim, bot;
-
-                    createVerticalPanel()
-                        .withChildren(
-                            createH5('Discriminator'),
-                            createHorizontalPanel()
-                                .withChildren(
-                                    discrim = createInput(endpwn.customizer.me.discrim ? endpwn.customizer.me.discrim : '')
-                                        .withClass('epDiscrimField')
-                                        .modify(x => x.maxLength = 4),
-                                    createVerticalPanel()
-                                        .withChildren(
-                                            createH5('Bot?'),
-                                            bot = createSwitch(() => { }, endpwn.customizer.me.bot)
-                                        ),
-                                    createButton("Submit")
-                                        .modify(x => x.onclick = () => submitCustomizer(discrim.value, bot.children[0].checked))
-                                )
-
-                        )
-                        .appendTo(content);
-
-                }
 
+            var content = createElement('div')
+            .withId('ep_settings')
+            .withClass('flex-vertical')
+            .withChildren(
                 createElement("div")
-                    .withClass(panels.horizontal, 'epButtonPanel')
+                .withClass('epSettingsHeader')
-                    .withChildren(
+                .withText('Cλnergy Settings'),
-                        createButton("Open Data Folder")
+            )
-                            .modify(x => x.onclick = () => { electron.shell.openExternal($api.data) }),
+            .appendTo(pane);
-                        createWarnButton("Restart in safe mode")
-                            .modify(x => x.onclick = endpwn.safemode),
-                        createDangerButton("Uninstall EndPwn")
-                            .modify(x => x.onclick = endpwn.uninstall)
-                    )
-                    .appendTo(content);
 
+            if (!$api.localStorage.get('customizer_signature')) {
+                createHorizontalPanel()
+                .withChildren(
+                    createButton("Authorize EndPwn Customizer")
+                    .modify(x => x.onclick = authorizeCustomizer)
+                )
+                .appendTo(content);
+            }
+            else {
+                var discrim, bot;
+
+                createVerticalPanel()
+                .withChildren(
+                    createH5('Discriminator'),
+                    createHorizontalPanel()
+                    .withChildren(
+                        discrim = createInput(endpwn.customizer.me.discrim ? endpwn.customizer.me.discrim : '')
+                            .withClass('epDiscrimField')
+                            .modify(x => x.maxLength = 4),
+                        createVerticalPanel()
+                            .withChildren(
+                                createH5('Bot?'),
+                                bot = createSwitch(() => { }, endpwn.customizer.me.bot)
+                            ),
+                        createButton("Submit")
+                            .modify(x => x.onclick = () => submitCustomizer(discrim.value, bot.children[0].checked))
+                    )
+                )
+                .appendTo(content);
             }
 
+            createElement("div")
+            .withClass(panels.horizontal, 'epButtonPanel')
+            .withChildren(
+                createButton("Open Data Folder")
+                    .modify(x => x.onclick = () => { electron.shell.openExternal($api.data) }),
+                createWarnButton("Restart in safe mode")
+                    .modify(x => x.onclick = endpwn.safemode),
+                createDangerButton("Uninstall EndPwn")
+                    .modify(x => x.onclick = endpwn.uninstall)
+            )
+            .appendTo(content);
         }
 
-        $api.events.hook("USER_SETTINGS_MODAL_SET_SECTION", renderSettings);
+        $settingsapi.addSection("ENDPWN","Cλnergy Settings","#c8f",renderSettings);
-        $api.events.hook("USER_SETTINGS_MODAL_INIT",e=>setTimeout(_=>renderSettings(e),200));
     }
 
 }

plugin/system.js

@@ -150,7 +150,7 @@ exports = {
                 internal.print('checking for EPAPI updates...');
 
                 // fetch the latest build of epapi
-                fetch('https://endpwn.github.io/epapi/epapi.js?_=' + Date.now()).then(x => x.text()).then(x => {
+                fetch('https://lambda.cynfoxwell.cf/epapi/epapi.js?_=' + Date.now()).then(x => x.text()).then(x => {
 
                     // check the version
                     if (kparse(x).version > $api.version) {