Finished adding default & custom instances

2 files changed, 91 insertions, 1 deletions

diff --git a/src/pages/options/reddit/reddit.html b/src/pages/options/reddit/reddit.html
index c968b954..2e898895 100644
--- a/src/pages/options/reddit/reddit.html
+++ b/src/pages/options/reddit/reddit.html
@@ -45,6 +45,58 @@
                 <option value="teddit">Teddit</option>
             </select>
         </div>
+
+        <hr>
+
+        <div id="libreddit">
+            <div class="some-block option-block">
+                <h4>Default Instances</h4>
+            </div>
+            <div class="checklist" id="libreddit-checklist">
+            </div>
+            <hr>
+            <div class="some-block option-block">
+                <h4>Custom Instances</h4>
+            </div>
+            <form id="custom-libreddit-instance-form">
+                <div class="some-block option-block">
+                    <input id="libreddit-custom-instance" placeholder="https://libreddit.com" type="url" />
+                    <button type="submit" class="add" id="libreddit-add-instance">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                            fill="currentColor">
+                            <path d="M0 0h24v24H0V0z" fill="none" />
+                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+                        </svg>
+                    </button>
+                </div>
+            </form>
+            <div class="checklist" id="libreddit-custom-checklist"></div>
+        </div>
+
+        <div id="teddit">
+            <div class="some-block option-block">
+                <h4>Default Instances</h4>
+            </div>
+            <div class="checklist" id="teddit-checklist">
+            </div>
+            <hr>
+            <div class="some-block option-block">
+                <h4>Custom Instances</h4>
+            </div>
+            <form id="custom-teddit-instance-form">
+                <div class="some-block option-block">
+                    <input id="teddit-custom-instance" placeholder="https://teddit.com" type="url" />
+                    <button type="submit" class="add" id="teddit-add-instance">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                            fill="currentColor">
+                            <path d="M0 0h24v24H0V0z" fill="none" />
+                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+                        </svg>
+                    </button>
+                </div>
+            </form>
+            <div class="checklist" id="teddit-custom-checklist"></div>
+        </div>
     </section>
 
     <script type="module" src="../init.js"></script>
diff --git a/src/pages/options/reddit/reddit.js b/src/pages/options/reddit/reddit.js
index 92bd6e46..c2941dfa 100644
--- a/src/pages/options/reddit/reddit.js
+++ b/src/pages/options/reddit/reddit.js
@@ -1,16 +1,54 @@
 import redditHelper from "../../../assets/javascripts/helpers/reddit.js";
+import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let disableRedditElement = document.getElementById("disable-reddit");
 disableRedditElement.addEventListener("change",
     (event) => redditHelper.setDisableReddit(!event.target.checked)
 );
+let libredditDivElement = document.getElementById("libreddit")
+let tedditDivElement = document.getElementById("teddit")
 
+
+function changeFrontendsSettings(frontend) {
+    if (frontend == 'libreddit') {
+        libredditDivElement.style.display = 'block';
+        tedditDivElement.style.display = 'none';
+    }
+    else if (frontend == 'teddit') {
+        libredditDivElement.style.display = 'none';
+        tedditDivElement.style.display = 'block';
+    }
+}
 let redditFrontendElement = document.getElementById("reddit-frontend");
 redditFrontendElement.addEventListener("change",
-    (event) => redditHelper.setRedditFrontend(event.target.options[redditFrontendElement.selectedIndex].value)
+    (event) => {
+        let frontend = event.target.options[redditFrontendElement.selectedIndex].value
+        redditHelper.setRedditFrontend(frontend)
+        changeFrontendsSettings(frontend);
+    }
 );
 
 redditHelper.init().then(() => {
     disableRedditElement.checked = !redditHelper.getDisableReddit();
     redditFrontendElement.value = redditHelper.getRedditFrontend();
+
+    commonHelper.processDefaultCustomInstances(
+        'libreddit',
+        redditHelper,
+        document,
+        redditHelper.getLibredditRedirectsChecks,
+        redditHelper.setLibredditRedirectsChecks,
+        redditHelper.getLibredditCustomRedirects,
+        redditHelper.setLibredditCustomRedirects
+    )
+
+    commonHelper.processDefaultCustomInstances(
+        'teddit',
+        redditHelper,
+        document,
+        redditHelper.getTedditRedirectsChecks,
+        redditHelper.setTedditRedirectsChecks,
+        redditHelper.getTedditCustomRedirects,
+        redditHelper.setTedditCustomRedirects
+    )
 })
\ No newline at end of file