Fix select ricing.

css/layout.css

@@ -1405,21 +1405,25 @@ a:only-of-type > .remove {
 #appchanx-settings h3,
 .section-keybinds,
 .section-mascots,
-.section-main,
+.section-script,
 .style {
   text-align: center;
 }
 .section-keybinds table,
-.section-main fieldset,
+.section-script fieldset,
 .section-style fieldset {
   text-align: left;
 }
 .section-keybinds table {
   margin: auto;
 }
-#appchanx-settings ul {
+#appchanx-settings fieldset {
   padding: 0;
   #{if _conf["Rounded Edges"] then "border-radius: 3px;" else ""}
+  vertical-align: top;
+  #{if _conf["Single Column Mode"] then "margin: 0 auto 6px;" else "margin: 0 3px 6px;\n display: inline-block;"}
+  padding: 0;
+  border: 0;
 }
 .section-container {
   overflow: auto;
@@ -1452,17 +1456,17 @@ a:only-of-type > .remove {
 #appchanx-settings h3 {
   margin: 0;
 }
-.section-main fieldset > div,
+.section-script fieldset > div,
 .section-style fieldset > div,
 .section-rice fieldset > div {
   overflow: visible;
   padding: 0 5px 0 7px;
 }
 #appchanx-settings tr:nth-of-type(2n+1),
-.section-main fieldset > div:nth-of-type(2n+1),
+.section-script fieldset > div:nth-of-type(2n+1),
 .section-rice fieldset > div:nth-of-type(2n+1),
 .section-style fieldset > div:nth-of-type(2n+1),
-.section-keybinds fieldset > div:nth-of-type(2n+1),
+.section-keybinds tr:nth-of-type(2n+1),
 #selectrice li:nth-of-type(2n+1) {
   background-color: rgba(0, 0, 0, 0.05);
 }
@@ -1483,21 +1487,14 @@ article li {
 .rice + .optionlabel {
   padding-left: 0;
 }
-.section-style fieldset,
+.section-script fieldset > div,
-.section-main fieldset {
-  vertical-align: top;
-  #{if _conf["Single Column Mode"] then "margin: 0 auto 6px;" else "margin: 0 3px 6px;\n display: inline-block;"}
-  padding: 0;
-  border: 0;
-}
-.section-main fieldset > div,
 .styleoption {
   text-align: left;
 }
 .section-style fieldset > div {
   width: 370px;
 }
-.section-main fieldset {
+.section-script fieldset {
   width: 200px;
 }
 .suboptions,

src/appchan.coffee

@@ -525,55 +525,60 @@ Rice =
       name: 'Rice Checkboxes'
       cb:   @node
     
-  checkclick: ->
+  cb: 
-    @check.click()
+    check: ->
+      @check.click()
 
-  selectclick: ->
+    option: (e) ->
+      e.stopPropagation()
+      select = Rice.input
+      container = select.nextElementSibling
+      container.firstChild.textContent = @textContent
+      select.value = @getAttribute 'data-value'
+      ev = document.createEvent 'HTMLEvents'
+      ev.initEvent "change", true, true
+      $.event select, ev
+      Rice.cleanup()
+
+  selectclick: (e) ->
     e.stopPropagation()
-    unless {ul} = Rice
+
+    {ul} = Rice
+
+    unless ul
       Rice.ul = ul = $.el 'ul',
         id: "selectrice"
       $.add d.body, ul 
 
     if ul.children.length > 0
-      return Rice.rmOption() 
+      return Rice.cleanup() 
       
     rect = @getBoundingClientRect()
     {clientHeight} = d.documentElement
     {style} = ul
 
     style.cssText = "width: #{rect.width}px; left: #{rect.left}px;" + (if clientHeight - rect.bottom < 200 then "bottom: #{clientHeight - rect.top}px" else "top: #{rect.bottom}px") 
-    Rice.select = @previousSibling
+    Rice.input = select = @previousSibling
     nodes = []
     
-    for option in Rice.select.options
+    for option in select.options
       li = $.el 'li',
         textContent: option.textContent
       li.setAttribute 'data-value', option.value
 
-      $.on li, 'click', (e) ->
+      $.on li, 'click', Rice.cb.option
-        e.stopPropagation()
-        select = Rice.select
-        container = select.nextElementSibling
-        container.firstChild.textContent = @textContent
-        input.value = @getAttribute 'data-value'
-        ev = document.createEvent 'HTMLEvents'
-        ev.initEvent "change", true, true
-        $.event input, ev
-        Rice.remSelect()
       nodes.push li
     $.add ul, nodes
 
     $.on ul, 'click scroll blur', (e) ->
       e.stopPropagation()
 
-    $.on d, 'click scroll blur resize', Rice.remSelect
+    $.on d, 'click scroll blur resize', Rice.cleanup
-    $.add @, ul
 
-  remSelect: ->
+  cleanup: ->
-    $.off d, 'click scroll blur resize', Rice.remSelect
+    $.off d, 'click scroll blur resize', Rice.cleanup
-    $.rm Rice.ul
+    for child in [Rice.ul.children...]
-    delete Rice.ul
+      $.rm child
 
   nodes: (source) ->
     source or= d.body
@@ -599,15 +604,14 @@ Rice =
     div.check = input
     $.after input, div
     if div.parentElement.tagName.toLowerCase() != 'label'
-      $.on div, 'click', Rice.checkclick
+      $.on div, 'click', Rice.cb.check
 
   select: (input) ->
     $.addClass input, 'riced'
     div = $.el 'div',
       className: 'selectrice'
       innerHTML: "<div>#{input.options[input.selectedIndex].textContent or null}</div>"
-    $.on div, "click", (e) ->
+    $.on div, "click", Rice.selectclick
-      Rice.selectclick
 
     $.after input, div
 

src/settings.coffee

@@ -579,7 +579,6 @@ Settings =
           className: 'styleoption'
 
         if type
-          inputtype = 'value'
 
           if type is 'text'
 
@@ -595,23 +594,25 @@ Settings =
             div.innerHTML = html
             input = $ "select", div
 
+          input.cb = 'value'
+
         else
-          inputtype = 'checked'
 
           div.innerHTML = "<div class=option><label><input type=checkbox name='#{key}'>#{key}</label></div><span style='display:none;'>#{description}</span>"
           input = $ 'input', div
+          input.cb = 'checked'
 
-        Settings.sandbox input, key, value, inputtype
+        Settings.sandbox input, key, value, input.cb
 
         $.on $('.option', div), 'mouseover', Settings.mouseover
 
         $.on input, 'change', ->
-          $.cb[inputtype].call @
+          $.cb[@cb].call @
           Style.addStyle()
 
-        Rice.nodes fs
         $.add fs, div
 
+      Rice.nodes fs
       nodes.push fs
 
     $.add section, nodes