Add the Settings dialog.

Add the Main settings section.
Add an API to add custom settings section. Close #604.

css/style.css

@@ -52,12 +52,16 @@ a[href="javascript:;"] {
 }
 
 /* fixed, z-index */
+#overlay,
 #qp, #ihover,
 #updater, #thread-stats,
 #navlinks, #header,
 #qr, #watcher {
   position: fixed;
 }
+#overlay {
+  z-index: 999;
+}
 #notifications {
   z-index: 80;
 }
@@ -177,6 +181,77 @@ a[href="javascript:;"] {
   overflow: auto;
 }
 
+/* Settings */
+#overlay {
+  background-color: rgba(0, 0, 0, .5);
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+  align-items: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+#settings {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  box-shadow: 0 0 15px rgba(0, 0, 0, .15);
+  height: 600px;
+  min-height: 0;
+  max-height: 100%;
+  width: 900px;
+  min-width: 0;
+  max-width: 100%;
+  padding: 3px;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-flow: column nowrap;
+  flex-flow: column nowrap;
+}
+#settings > nav {
+  display: -webkit-flex;
+  display: flex;
+  padding: 2px 2px 0;
+}
+#settings > nav a {
+  text-decoration: underline;
+}
+.sections-list {
+  -webkit-flex: 1;
+  flex: 1;
+}
+.section-container {
+  -webkit-flex: 1;
+  flex: 1;
+  position: relative;
+}
+.section-container > section {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+}
+.section-main ul {
+  list-style: none;
+  margin: 0;
+  padding: 8px;
+}
+.section-main li {
+  padding-left: 10px;
+}
+.section-main label {
+  text-decoration: underline;
+}
+.unscroll {
+  overflow: hidden;
+}
+
 /* Thread Updater */
 #updater:not(:hover) {
   background: none;

src/config.coffee

@@ -46,7 +46,7 @@ Config =
       'Auto Hide QR':                 [false, 'Automatically hide the quick reply when posting.']
       'Remember Subject':             [false, 'Remember the subject field, instead of resetting after posting.']
       'Remember Spoiler':             [false, 'Remember the spoiler state, instead of resetting after posting.']
-      'Hide Original Post Form':      [true,  'Replace the normal post form with a shortcut to open the QR.']
+      'Hide Original Post Form':      [true,  'Hide the normal post form.']
     Quoting:
       'Quote Backlinks':              [true,  'Add quote backlinks.']
       'OP Backlinks':                 [false, 'Add backlinks to the OP.']

src/features.coffee

@@ -142,14 +142,123 @@ Settings =
       order: 111
       open: -> Conf['Enable 4chan\'s extension']
 
+    $.on d, 'AddSettingsSection', Settings.addSection
+
+    unless $.get 'previousversion'
+      $.set 'previousversion', '<%= version %>'
+      $.on d, '4chanXInitFinished', Settings.open
+
+    Settings.addSection 'Main',     Settings.main
+    Settings.addSection 'Filter',   Settings.filter
+    Settings.addSection 'Sauce',    Settings.sauce
+    Settings.addSection 'Rice',     Settings.rice
+    Settings.addSection 'Keybinds', Settings.keybinds
+
     return if Conf['Enable 4chan\'s extension']
     settings = JSON.parse(localStorage.getItem '4chan-settings') or {}
     return if settings.disableAll
     settings.disableAll = true
     localStorage.setItem '4chan-settings', JSON.stringify settings
+
   open: ->
+    return if Settings.dialog
     $.event 'CloseMenu'
-    # Here be settings
+
+    html = """
+      <div id=settings class=dialog>
+        <nav>
+          <div class=sections-list></div>
+          <div class=credits>
+            <a href='<%= meta.page %>' target=_blank><%= meta.name %></a> |
+            <a href='<%= meta.repo %>blob/<%= meta.mainBranch %>/changelog' target=_blank><%= version %></a> |
+            <a href='<%= meta.repo %>issues' target=_blank>Issues</a>
+          </div>
+        </nav>
+        <hr>
+        <div class=section-container><section></section></div>
+      </div>
+    """
+
+    Settings.dialog = dialog = $.el 'div',
+      id: 'overlay'
+      innerHTML: html
+
+    links = []
+    for section in Settings.sections
+      link = $.el 'a',
+        textContent: section.title
+        href: 'javascript:;'
+      $.on link, 'click', Settings.openSection.bind section
+      links.push link, $.tn ' | '
+    links.pop()
+    links[0].click()
+    $.add $('.sections-list', dialog), links
+
+    $.on dialog, 'click', Settings.close
+    $.on dialog.firstElementChild, 'click', (e) -> e.stopPropagation()
+
+    d.body.style.width = "#{d.body.clientWidth}px"
+    $.addClass d.body, 'unscroll'
+    $.add d.body, dialog
+  close: ->
+    return unless Settings.dialog
+    d.body.style.removeProperty 'width'
+    $.rmClass d.body, 'unscroll'
+    $.rm Settings.dialog
+    delete Settings.dialog
+
+  sections: []
+  addSection: (title, open) ->
+    if typeof title isnt 'string'
+      {title, open} = title.detail
+    Settings.sections.push {title, open}
+  openSection: ->
+    section = $ 'section', Settings.dialog
+    section.innerHTML = null
+    section.className = null
+    $.addClass section, "section-#{@title.toLowerCase().replace /\s+/g, '-'}"
+    @open section, g
+
+  main: (section) ->
+    for key, obj of Config.main
+      ul = $.el 'ul',
+        textContent: key
+      for key, arr of obj
+        checked = if $.get(key, Conf[key]) then 'checked' else ''
+        description = arr[1]
+        li = $.el 'li',
+          innerHTML: "<label><input type=checkbox name=\"#{key}\" #{checked}>#{key}</label><span class=description>: #{description}</span>"
+        $.on $('input', li), 'click', $.cb.checked
+        $.add ul, li
+      $.add section, ul
+
+    hiddenNum = 0
+    for ID, thread of ThreadHiding.getHiddenThreads().threads
+      hiddenNum++
+    for ID, thread of ReplyHiding.getHiddenPosts().threads
+      for ID, post of thread
+        $.log post
+        hiddenNum++
+    li = $.el 'li',
+      innerHTML: "<button>Hidden: #{hiddenNum}</button> <span class=description>: Clear manually hidden threads and posts on /#{g.BOARD}/."
+    $.on $('button', li), 'click', ->
+      @textContent = 'Hidden: 0'
+      $.delete "hiddenThreads.#{g.BOARD}"
+      $.delete "hiddenPosts.#{g.BOARD}"
+    $.after $('input[name="Stubs"]', section).parentNode.parentNode, li
+
+  filter: (section) ->
+    # XXX TODO
+
+  sauce: (section) ->
+    # XXX TODO
+
+  rice: (section) ->
+    # XXX TODO
+
+  keybinds: (section) ->
+    # XXX TODO
+
 
 Fourchan =
   init: ->
@@ -456,8 +565,8 @@ Filter =
           re
       $.set type, save
 
-      # Open the options and display & focus the relevant filter textarea.
+      # Open the settings and display & focus the relevant filter textarea.
-      # Options.dialog()
+      Settings.open()
       # select = $ 'select[name=filter]', $.id 'options'
       # select.value = type
       # $.event select, new Event 'change'
@@ -1093,7 +1202,7 @@ Keybinds =
         Settings.open()
       when Conf['Close']
         if $.id 'settings'
-          Options.close()
+          Settings.close()
         else if (notifications = $$ '.notification').length
           for notification in notifications
             $('.close', notification).click()