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,17 +41,53 @@ exports = {
         var panels = wc.findFunc('flexChild-')[0].exports;
         var panels2 = $api.util.findFuncExports('errorMessage-', 'inputWrapper');
 
-        function createVerticalPanel() {
+        let sections = window.$settingsapi.sections;
+
+        window.$settingsapi = {
+            sections: sections,
+            ourSections: [],
+            _callbacks: {},
+            _panels: {},
+            addSection: function(name,label,color=null,callback){
+                let data = {};
+
+                data.section = name || `SAPI_${Math.floor(Math.random()*10000)}`;
+                data.label = label;
+                data.color = color;
+                data.element = $api.util.findConstructor('FormSection', 'FormSection').FormSection;
+
+                $settingsapi.ourSections.push(data);
+                $settingsapi.sections.splice($settingsapi.sections.length-4,0,data);
+                $settingsapi._callbacks[name] = callback;
+            },
+            addDivider: function(){
+                $settingsapi.ourSections.push({section:"DIVIDER"});
+                $settingsapi.sections.splice($settingsapi.sections.length-4,0,{section:"DIVIDER"});
+            },
+            addHeader: function(label){
+                $settingsapi.ourSections.push({section:"HEADER",label:label});
+                $settingsapi.sections.splice($settingsapi.sections.length-4,0,{section:"HEADER",label:label});
+            },
+            exportSections: function(){
+                let out = "";
+
+                for(i in $settingsapi._sections){
+                    out = out + convertToText($settingsapi._sections[i]);
+                }
+
+                return out;
+            },
+            //All of these allow us to use Discord's elements.
+            elements: {
+                createVerticalPanel: function() {
                     return createElement("div")
                         .withClass(panels2.vertical, 'epButtonPanel')
-        }
+                },
-
+                createHorizontalPanel: function() {
-        function createHorizontalPanel() {
                     return createElement("div")
                         .withClass(panels.horizontal, 'epButtonPanel')
-        }
+                },
-
+                createButton: function(name) {
-        function createButton(name) {
                     return createElement('button')
                         .withContents(name)
                         .withClass(
@@ -67,9 +98,8 @@ exports = {
                             buttons.grow,
                             'epMargin'
                         );
-        }
+                },
-
+                createWarnButton: function(name) {
-        function createWarnButton(name) {
                     return createElement('button')
                         .withContents(name)
                         .withClass(
@@ -80,9 +110,8 @@ exports = {
                             buttons.grow,
                             'epMargin'
                         );
-        }
+                },
-
+                createDangerButton: function(name) {
-        function createDangerButton(name) {
                     return createElement('button')
                         .withContents(name)
                         .withClass(
@@ -93,10 +122,8 @@ exports = {
                             buttons.grow,
                             'epMargin'
                         );
-        }
+                },
-
+                createH2: function(text) {
-        function createH2(text) {
-            //h2-2gWE-o title-3sZWYQ size16-14cGz5 height20-mO2eIN weightSemiBold-NJexzi defaultColor-1_ajX0 defaultMarginh2-2LTaUL marginBottom20-32qID7
                     return createElement("h2")
                         .withClass(
                             headers.h2,
@@ -108,9 +135,8 @@ exports = {
                             'epMargin'
                         )
                         .withText(text);
-        }
+                },
-
+                createH5: function(text) {
-        function createH5(text) {
                     return createElement("h5")
                         .withClass(
                             headers.h5,
@@ -120,9 +146,8 @@ exports = {
                             headers.weightSemiBold
                         )
                         .withText(text);
-        }
+                },
-
+                createInput: function(v, p) {
-        function createInput(v) {
                     return createElement("input")
                         .withClass(
                             misc.inputDefault,
@@ -130,13 +155,10 @@ exports = {
                             misc.size16,
                             'epMargin'
                         )
-                .modify(x => x.value = v)
+                        .modify(x => x.value = v ? v : "")
-        }
+                        .modify(x => x.placeholder = p ? p : "")
-
+                },
-        //<input class="checkboxEnabled-CtinEn checkbox-2tyjJg" type="checkbox">
+                updateSwitch: function(s, w) {
-        //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])
@@ -145,8 +167,8 @@ exports = {
                         w.classList.remove(checkboxes.valueChecked.split(' ')[0]);
                         w.classList.add(checkboxes.valueUnchecked.split(' ')[0])
                     }
-        }
+                },
-        function createSwitch(c, i) {
+                createSwitch: function(c, i) {
                     if (c === undefined) c = () => { };
                     if (i === undefined) i = false;
                     var s, w = createElement('div')
@@ -166,13 +188,76 @@ exports = {
                                 .modify(x => x.type = 'checkbox')
                                 .modify(x => x.checked = i)
                                 .modify(x => x.onchange = () => {
-                            updateSwitch(s, w);
+                                    $settingsapi.elements.updateSwitch(s, w);
                                     c(s.checked);
                                 })
                         )
-            updateSwitch(s, w);
+                    $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;
@@ -217,16 +302,7 @@ exports = {
 
         }
 
-        function renderSettings(e) {
+        function renderSettings(pane) {
-
-            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')
@@ -240,17 +316,14 @@ exports = {
             .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()
@@ -269,10 +342,8 @@ exports = {
                         createButton("Submit")
                             .modify(x => x.onclick = () => submitCustomizer(discrim.value, bot.children[0].checked))
                     )
-
                 )
                 .appendTo(content);
-
             }
 
             createElement("div")
@@ -286,13 +357,9 @@ exports = {
                     .modify(x => x.onclick = endpwn.uninstall)
             )
             .appendTo(content);
-
         }
 
-        }
+        $settingsapi.addSection("ENDPWN","Cλnergy Settings","#c8f",renderSettings);
-
-        $api.events.hook("USER_SETTINGS_MODAL_SET_SECTION", 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) {