More or less improve the mascot section code.

src/General/Settings.coffee

@@ -722,9 +722,6 @@ Settings =
     if typeof mode isnt 'string'
       mode = 'default'
 
-    parentdiv = $.el "div",
-      id: "mascotContainer"
-
     suboptions = $.el "div",
       className: "suboptions"
 
@@ -738,64 +735,52 @@ Settings =
 
     if mode is 'default'
       # Create a keyed Unordered List Element and hide option for each mascot category.
+      nodes = {}
       for name in MascotTools.categories
+        nodes[name] = []
         categories[name] = $.el "div",
           className: "mascots"
           id: name
+          innerHTML: "<h3 class=mascotHeader>#{name}</h3>"
 
         if Conf["Hidden Categories"].contains name
           categories[name].hidden = true
 
-        header = $.el "h3",
-          className: "mascotHeader"
-          textContent: name
-
         menu.push option = $.el "label",
           name: name
           innerHTML: "<input name='#{name}' type=checkbox #{if Conf["Hidden Categories"].contains(name) then 'checked' else ''}>#{name}"
 
-        $.on $('input', option), 'change', Settings.cb.mascotCategory
-
-        $.add categories[name], header
-        $.add suboptions, categories[name]
+        $.on $('input', option), 'change', cb.category
 
       for name in keys
 
         continue if Conf["Deleted Mascots"].contains name
         mascot = Mascots[name]
         mascotEl = $.el 'div',
-          className: 'mascot'
+          className: if Conf[g.MASCOTSTRING].contains name then 'mascot enabled' else 'mascot'
           id: name
-          innerHTML: "
-<div class='mascotname'>#{name.replace /_/g, " "}</div>
-<div class='mascotcontainer'><div class='mAlign #{mascot.category}'><img class=mascotimg src='#{if Array.isArray(mascot.image) then (if Style.lightTheme then mascot.image[1] else mascot.image[0]) else mascot.image}'></div></div>
-<div class='mascotoptions'><a class=edit name='#{name}' href='javascript:;'>Edit</a><a class=delete name='#{name}' href='javascript:;'>Delete</a><a class=export name='#{name}' href='javascript:;'>Export</a></div>"
-
-        if Conf[g.MASCOTSTRING].contains name
-          $.addClass mascotEl, 'enabled'
+          innerHTML: "<%= grunt.file.read('src/General/html/Settings/Mascot.html') %>"
 
         $.on $('.edit',   mascotEl), 'click', cb.edit
         $.on $('.delete', mascotEl), 'click', cb.delete
         $.on $('.export', mascotEl), 'click', cb.export
-        $.on mascotEl,               'click', cb.select
+
+        $.on mascotEl, 'click', cb.select
 
         if MascotTools.categories.contains mascot.category
-          $.add categories[mascot.category], mascotEl
+          nodes[mascot.category].push mascotEl
         else
-          $.add categories[MascotTools.categories[0]], mascotEl
+          nodes[MascotTools.categories[0]].push mascotEl
+
+      for name in MascotTools.categories
+        $.add categories[name], nodes[name]
+        $.add suboptions, categories[name]
 
       $.add $('div', mascotHide), menu
 
       batchmascots = $.el 'div',
         id: "mascots_batch"
-        innerHTML: "
-<a href=\"javascript:;\" id=clear>Clear All</a> /
-<a href=\"javascript:;\" id=selectAll>Select All</a> /
-<a href=\"javascript:;\" id=createNew>Add Mascot</a> /
-<a href=\"javascript:;\" id=importMascot>Import Mascot</a><input id=importMascotButton type=file hidden> /
-<a href=\"javascript:;\" id=undelete>Undelete Mascots</a> /
-<a href=\"http://appchan.booru.org/\" target=_blank>Get More Mascots!</a>
-  "
+        innerHTML: """<%= grunt.file.read('src/General/html/Settings/Batch-Mascot.html') %>"""
 
       $.on $('#clear', batchmascots), 'click', ->
         enabledMascots = JSON.parse(JSON.stringify(Conf[g.MASCOTSTRING]))
@@ -830,9 +815,9 @@ Settings =
         Settings.openSection.apply mascots, ['restore']
 
     else
+      nodes = []
       categories = $.el "div",
         className: "mascots"
-        id: name
 
       for name in keys
         continue unless Conf["Deleted Mascots"].contains name
@@ -845,9 +830,11 @@ Settings =
 <div class='container #{mascot.category}'><img class=mascotimg src='#{if Array.isArray(mascot.image) then (if Style.lightTheme then mascot.image[1] else mascot.image[0]) else mascot.image}'></div>
 "
 
-        $.on mascotEl, 'click', Settings.cb.mascot.restore
+        $.on mascotEl, 'click', cb.restore
 
-        $.add categories, mascotEl
+        nodes.push mascotEl
+
+      $.add categories, nodes
 
       $.add suboptions, categories
 
@@ -861,11 +848,10 @@ Settings =
           hyphenatedTitle: 'mascots'
         Settings.openSection.apply mascots
 
-    $.add parentdiv, [suboptions, batchmascots, mascotHide]
+    for node in [suboptions, batchmascots, mascotHide]
+      Rice.nodes node
 
-    Rice.nodes parentdiv
-
-    $.add section, parentdiv
+    $.add section, [suboptions, batchmascots, mascotHide]
 
   cb:
     mascot:

src/General/css/layout.css

@@ -1600,9 +1600,7 @@ article li {
 .section-script fieldset {
   width: 200px;
 }
-.suboptions,
-#mascotcontent,
-#themecontent {
+.suboptions {
   overflow: auto;
   position: absolute;
   top: 0;
@@ -1615,9 +1613,6 @@ article li {
   vertical-align: middle;
   display: table-cell;
 }
-#themecontent {
-  top: 1.7em;
-}
 #save,
 .stylesettings {
   position: absolute;
@@ -1747,9 +1742,6 @@ opacity: 0;
   right: 11px;
   opacity: 1;
 }
-#themeContainer {
-  margin-bottom: 3px;
-}
 #addthemes {
   position: absolute;
   left: 10px;

src/General/html/Settings/Batch-Mascot.html

@@ -0,0 +1,11 @@
+ <a href=\"javascript:;\" id=clear>Clear All</a>
+ /
+ <a href=\"javascript:;\" id=selectAll>Select All</a>
+ /
+ <a href=\"javascript:;\" id=createNew>Add Mascot</a>
+ /
+ <a href=\"javascript:;\" id=importMascot>Import Mascot</a><input id=importMascotButton type=file hidden>
+ /
+ <a href=\"javascript:;\" id=undelete>Undelete Mascots</a>
+ /
+ <a href=\"http://appchan.booru.org/\" target=_blank>Get More Mascots!</a>

src/General/html/Settings/Mascot.html

@@ -0,0 +1,3 @@
+<div class='mascotname'>#{name.replace /_/g, " "}</div>
+<div class='mascotcontainer'><div class='mAlign #{mascot.category}'><img class=mascotimg src='#{if Array.isArray(mascot.image) then (if Style.lightTheme then mascot.image[1] else mascot.image[0]) else mascot.image}'></div></div>
+<div class='mascotoptions'><a class=edit name='#{name}' href='javascript:;'>Edit</a><a class=delete name='#{name}' href='javascript:;'>Delete</a><a class=export name='#{name}' href='javascript:;'>Export</a></div>

src/Theming/Mascots.coffee

@@ -189,6 +189,7 @@ MascotTools =
   <a href='javascript:;'>Close</a>
 </div>
 "
+    nodes = []
     for name, item of layout
 
       switch item[2]
@@ -270,7 +271,8 @@ MascotTools =
             MascotTools.addMascot editMascot
             Style.addStyle()
 
-      $.add $("#mascotcontent", dialog), div
+      nodes.push div
+    $.add $("#mascotcontent", dialog), nodes
 
     $.on $('#save > a', dialog), 'click', ->
       MascotTools.save editMascot