Implement nested options. #248

src/General/Config.coffee

@@ -5,14 +5,15 @@ Config =
         true
         'Replace the original board index with one supporting searching, sorting, infinite scrolling, and a catalog mode.'
       ]
+      'Use 4chan X Catalog': [
+        false
+        'Link to 4chan X\'s catalog instead of the native 4chan one.'
+        1
+      ]
       'External Catalog': [
         false
         'Link to external catalog instead of the internal one.'
       ]
-      'Use 4chan X Catalog': [
-        false
-        'Link to 4chan X\'s catalog instead of the native 4chan one. Requires "JSON Navigation".'
-      ]
       'Catalog Links': [
         false
         'Add toggle link in header menu to turn Navigation links into links to each board\'s catalog.'
@@ -48,6 +49,7 @@ Config =
       'Relative Date Title': [
         true
         'Show Relative Post Date only when hovering over dates.'
+        1
       ]
       'Comment Expansion': [
         true
@@ -76,6 +78,7 @@ Config =
       'Persistent Custom Board Titles': [
         false
         'Force custom board titles to be persistent, even if moot updates the board titles.'
+        1
       ]
       'Show Updated Notifications': [
         true
@@ -114,14 +117,17 @@ Config =
       'Embedding': [
         true
         'Embed supported services.'
+        1
       ]
       'Auto-embed': [
         false
         'Auto-embed Linkify Embeds.'
+        2
       ]
       'Link Title': [
         true
         'Replace the link of a supported site with its actual title. Currently Supported: YouTube, Vimeo, SoundCloud, and Github gists'
+        1
       ]
 
     'Filtering':
@@ -133,6 +139,11 @@ Config =
         true
         'Self-moderation placebo.'
       ]
+      'Filtered Backlinks': [
+        true
+        'When enabled, shows backlinks to filtered posts with a line-through decoration. Otherwise, hides the backlinks.'
+        1
+      ]
       'Recursive Hiding': [
         true
         'Hide replies of hidden posts, recursively.'
@@ -145,10 +156,6 @@ Config =
         true
         'Add buttons to hide single replies.'
       ]
-      'Filtered Backlinks': [
-        true
-        'When enabled, shows backlinks to filtered posts with a line-through decoration. Otherwise, hides the backlinks.'
-      ]
       'Stubs': [
         true
         'Show stubs of hidden threads / replies.'
@@ -174,10 +181,12 @@ Config =
       'Fullscreen Gallery': [
         false
         'Open gallery in fullscreen mode.'
+        1
       ]
       'PDF in Gallery': [
         false
         'Show PDF files in gallery.'
+        1
       ]
       'Sauce': [
         true
@@ -240,26 +249,32 @@ Config =
       'Report Link': [
         true
         'Add a report link to the menu.'
+        1
       ]
       'Thread Hiding Link': [
         true
         'Add a link to hide entire threads.'
+        1
       ]
       'Reply Hiding Link': [
         true
         'Add a link to hide single replies.'
+        1
       ]
       'Delete Link': [
         true
         'Add post and image deletion links to the menu.'
+        1
       ]
       'Download Link': [
         true
         'Add a download with original filename link to the menu.'
+        1
       ]
       'Archive Link': [
         true
         'Add an archive link to the menu.'
+        1
       ]
 
     'Monitoring':
@@ -271,9 +286,15 @@ Config =
         true
         'Show the unread posts count in the tab title.'
       ]
+      'Quoted Title': [
+        false
+        'Change the page title to reflect you\'ve been quoted.'
+        1
+      ]
       'Hide Unread Count at (0)': [
         false
         'Hide the unread posts count in the tab title when it reaches 0.'
+        1
       ]
       'Unread Favicon': [
         true
@@ -302,14 +323,17 @@ Config =
       'IP Count in Stats': [
         true
         'Display the unique IP count in the thread stats.'
+        1
       ]
       'Page Count in Stats': [
         true
         'Display the page count in the thread stats.'
+        1
       ]
       'Updater and Stats in Header': [
         true,
         'Places the thread updater and thread stats in the header instead of floating them.'
+        1
       ]
       'Thread Watcher': [
         true
@@ -318,6 +342,7 @@ Config =
       'Toggleable Thread Watcher': [
         true
         'Adds a shortcut for the thread watcher, hides the watcher by default, and makes it scroll with the page.'
+        1
       ]
       'Mark New IPs': [
         false
@@ -332,68 +357,84 @@ Config =
       'QR Shortcut': [
         true,
         'Adds a small [QR] link in the header.'
+        1
       ]
       'Persistent QR': [
         true
         'The Quick reply won\'t disappear after posting.'
+        1
       ]
       'Auto Hide QR': [
         true
         'Automatically hide the quick reply when posting.'
+        1
       ]
       'Open Post in New Tab': [
         true
         'Open new threads or replies to a thread from the index in a new tab.'
+        1
       ]
       <% if (type === 'userscript') { %>
       'Remember QR Size': [
         false
         'Remember the size of the Quick reply.'
+        1
       ]
       <% } %>
       'Remember Spoiler': [
         false
         'Remember the spoiler state, instead of resetting after posting.'
+        1
       ]
       'Show New Thread Option in Threads': [
         false
         'Show the option to post a new / different thread from inside a thread.'
+        1
       ]
       'Show Name and Subject': [
         false
         'Show the classic name, email, and subject fields in the QR, even when 4chan doesn\'t use them all.'
+        1
       ]
       'Hide Original Post Form': [
         true
         'Hide the normal post form.'
+        1
       ]
       'Cooldown': [
         true
         'Indicate the remaining time before posting again.'
+        1
       ]
       'Posting Success Notifications': [
         true
         'Show notifications on successful post creation or file uploading.'
+        1
       ]
       'Force Noscript Captcha': [
         false
         'Use the non-Javascript fallback captcha in the QR even if Javascript is enabled.'
+        1
       ]
       'Captcha Warning Notifications': [
         true
         'When disabled, shows a red border on the CAPTCHA input until a key is pressed instead of a notification.'
+        1
       ]
       'Auto-load captcha': [
         false
         'Automatically load the captcha in the QR even if your post is empty.'
+        1
       ]
       'Post on Captcha Completion': [
         false
         'Submit the post immediately when the captcha is completed.'
+        1
       ]
       'Bottom QR Link': [
         true
         'Places a link on the bottom of threads to open the QR.'
+        1
       ]
 
     'Quote Links':
@@ -404,6 +445,7 @@ Config =
       'OP Backlinks': [
         true
         'Add backlinks to the OP.'
+        1
       ]
       'Quote Inlining': [
         true
@@ -412,10 +454,12 @@ Config =
       'Quote Hash Navigation': [
         false
         'Include an extra link after quotes for autoscrolling to quoted posts.'
+        1
       ]
       'Forward Hiding': [
         true
         'Hide original posts of inlined backlinks.'
+        1
       ]
       'Quote Previewing': [
         true
@@ -424,6 +468,7 @@ Config =
       'Quote Highlighting': [
         true
         'Highlight the previewed post.'
+        1
       ]
       'Resurrect Quotes': [
         true
@@ -433,17 +478,15 @@ Config =
         true
         'Add \'(You)\' to quotes linking to your posts.'
       ]
-      'Quoted Title': [
-        false
-        'Change the page title to reflect you\'ve been quoted.'
-      ]
       'Highlight Posts Quoting You': [
         false
         'Highlights any posts that contain a quote to your post.'
+        1
       ]
       'Highlight Own Posts': [
         false
         'Highlights own posts if Mark Quotes of You is enabled.'
+        1
       ]
       'Mark OP Quotes': [
         true

src/General/Settings.coffee

@@ -91,6 +91,7 @@ Settings =
     for key, obj of Config.main
       fs = $.el 'fieldset',
         <%= html('<legend>${key}</legend>') %>
+      containers = [fs]
       for key, arr of obj
         description = arr[1]
         div = $.el 'div'
@@ -100,14 +101,23 @@ Settings =
         ]
         input = $ 'input', div
         $.on input, 'change', $.cb.checked
+        $.on input, 'change', -> @parentNode.parentNode.dataset.checked = @checked
         items[key]  = Conf[key]
         inputs[key] = input
-        $.add fs, div
+        level = arr[2] or 0
+        if containers.length <= level
+          container = $.el 'div', className: 'suboption-list'
+          $.add containers[containers.length-1].lastElementChild, container
+          containers[level] = container
+        else if containers.length > level+1
+          containers.splice level+1, containers.length - (level+1)
+        $.add containers[level], div
       $.add section, fs
 
     $.get items, (items) ->
       for key, val of items
         inputs[key].checked = val
+        inputs[key].parentNode.parentNode.dataset.checked = val
       return
 
     div = $.el 'div',

src/General/css/burichan.css

@@ -1,5 +1,5 @@
 /* General */
-:root.burichan .dialog {
+:root.burichan .dialog, :root.burichan .suboption-list > div:last-of-type {
   background-color: #D6DAF0;
   border-color: #B7C5D9;
 }
@@ -26,7 +26,7 @@
 }
 
 /* Settings */
-:root.burichan #fourchanx-settings fieldset {
+:root.burichan #fourchanx-settings fieldset, :root.burichan .section-main div::before {
   border-color: #B7C5D9;
 }
 

src/General/css/futaba.css

@@ -1,5 +1,5 @@
 /* General */
-:root.futaba .dialog {
+:root.futaba .dialog, :root.futaba .suboption-list > div:last-of-type {
   background-color: #F0E0D6;
   border-color: #D9BFB7;
 }
@@ -26,7 +26,7 @@
 }
 
 /* Settings */
-:root.futaba #fourchanx-settings fieldset {
+:root.futaba #fourchanx-settings fieldset, :root.futaba .section-main div::before {
   border-color: #D9BFB7;
 }
 

src/General/css/photon.css

@@ -1,5 +1,5 @@
 /* General */
-:root.photon .dialog {
+:root.photon .dialog, :root.photon .suboption-list > div:last-of-type {
   background-color: #DDD;
   border-color: #CCC;
 }
@@ -26,7 +26,7 @@
 }
 
 /* Settings */
-:root.photon #fourchanx-settings fieldset {
+:root.photon #fourchanx-settings fieldset, :root.photon .section-main div::before {
   border-color: #CCC;
 }
 

src/General/css/style.css

@@ -428,6 +428,35 @@ audio.controls-added {
 .section-main label {
   text-decoration: underline;
 }
+div[data-checked="false"] > .suboption-list {
+  display: none;
+}
+.suboption-list {
+  position: relative;
+}
+.suboption-list::before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  left: .7em;
+  width: 0;
+  height: 100%;
+  border-left: 1px solid;
+}
+.suboption-list > div {
+  position: relative;
+  padding-left: 1.4em;
+}
+.suboption-list > div::before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  left: .7em;
+  width: .7em;
+  height: .6em;
+  border-left: 1px solid;
+  border-bottom: 1px solid;
+}
 .section-filter ul {
   padding: 0;
 }

src/General/css/tomorrow.css

@@ -1,5 +1,5 @@
 /* General */
-:root.tomorrow .dialog {
+:root.tomorrow .dialog, :root.tomorrow .suboption-list > div:last-of-type {
   background-color: #282A2E;
   border-color: #111;
 }
@@ -23,7 +23,7 @@
 }
 
 /* Settings */
-:root.tomorrow #fourchanx-settings fieldset {
+:root.tomorrow #fourchanx-settings fieldset, :root.tomorrow .section-main div::before {
   border-color: #111;
 }
 

src/General/css/yotsuba-b.css

@@ -1,5 +1,5 @@
 /* General */
-:root.yotsuba-b .dialog {
+:root.yotsuba-b .dialog, :root.yotsuba-b .suboption-list > div:last-of-type {
   background-color: #D6DAF0;
   border-color: #B7C5D9;
 }
@@ -26,7 +26,7 @@
 }
 
 /* Settings */
-:root.yotsuba-b #fourchanx-settings fieldset {
+:root.yotsuba-b #fourchanx-settings fieldset, :root.yotsuba-b .section-main div::before {
   border-color: #B7C5D9;
 }
 

src/General/css/yotsuba.css

@@ -1,5 +1,5 @@
 /* General */
-:root.yotsuba .dialog {
+:root.yotsuba .dialog, :root.yotsuba .suboption-list > div:last-of-type {
   background-color: #F0E0D6;
   border-color: #D9BFB7;
 }
@@ -26,7 +26,7 @@
 }
 
 /* Settings */
-:root.yotsuba #fourchanx-settings fieldset {
+:root.yotsuba #fourchanx-settings fieldset, :root.yotsuba .section-main div::before {
   border-color: #D9BFB7;
 }