Rethink mascots (again)

CHANGELOG.md

@@ -8,7 +8,6 @@
   * Remove mascot positioning based on post form decorations
   * Remove 4sight support
 
-
 ### v2.1.1
 *2013-06-02*
 

src/General/css/dynamic.css

@@ -55,7 +55,7 @@ a.useremail:last-of-type::before {
 a.useremail:last-of-type::after {
   margin-left: #{parseInt _conf['Emoji Spacing']}px;
 }
-#mascot img {
+#mascot {
   opacity: #{Conf['Mascot Opacity']};
 }
 #{unless _conf["Emoji"] is "disable" then Emoji.css _conf["Emoji Position"] else ""}

src/General/css/layout.css

@@ -1645,69 +1645,61 @@ a:only-of-type > .remove {
 /* Mascot Positions */
 #mascot {
   display: none;
-}
-#mascot img {
   position: fixed;
   z-index: -1;
-  bottom: 18.5em;
+  bottom: 0;
-  cursor: pointer;
   left: 0;
   right: 0;
+  line-height: 0;
+  cursor: pointer;
+}
+.mascot-position-default.post-form-style-fixed #qr #mascot,
+.mascot-position-default.post-form-style-transparent-fade #qr #mascot {
+  position: absolute;
+  bottom: 100%;
+  margin-bottom: -2px;
+}
+.mascot-position-default.post-form-style-fixed.post-form-decorations #qr #mascot,
+.mascot-position-default.post-form-style-transparent-fade.post-form-decorations #qr #mascot {
+  margin-bottom: 1px;
 }
 .mascots #mascot {
   display: block;
 }
-.sidebar-location-left #mascot img {
+.sidebar-location-right.mascot-location-sidebar #mascot,
-  <%= sizing %>transform: scaleX(-1);
+.sidebar-location-left.mascot-location-opposite #mascot {
-}
-.sidebar-location-right.mascot-location-sidebar #mascot img,
-.sidebar-location-left.mascot-location-opposite #mascot img {
   left: auto;
 }
+.sidebar-location-left.mascot-location-sidebar #mascot,
+.sidebar-location-right.mascot-location-opposite #mascot {
+  right: auto;
+}
 .sidebar-location-left.mascot-location-sidebar #mascot img,
 .sidebar-location-right.mascot-location-opposite #mascot img {
-  right: auto;
+  <%= agent %>transform: scaleX(-1);
 }
-.fourchan-ss-navigation.bottom.fixed.posting-disabled #mascot img,
+.fourchan-ss-navigation.bottom.fixed.qr-hidden #mascot,
-.fourchan-ss-navigation.bottom.fixed.mascot-position-bottom #mascot img,
+.fourchan-ss-navigation.bottom.fixed.mascot-position-bottom #mascot,
-.fourchan-ss-navigation.index.pagination-sticky-bottom.mascot-position-bottom #mascot img,
+.fourchan-ss-navigation.index.pagination-sticky-bottom.mascot-position-bottom #mascot,
-.fourchan-ss-navigation.bottom.fixed:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img,
+.fourchan-ss-navigation.bottom.fixed:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot,
-.fourchan-ss-navigation.index.pagination-sticky-bottom:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img {
+.fourchan-ss-navigation.index.pagination-sticky-bottom:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot {
-  bottom: 1.5em;
+  bottom: 1.5em
 }
-.fourchan-ss-navigation.bottom.fixed.post-form-style-fixed #mascot img,
+#qr #mascot {
-.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-fixed #mascot img,
+  z-index: -1;
-.fourchan-ss-navigation.bottom.fixed.post-form-style-transparent-fade #mascot img,
-.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-transparent-fade #mascot img {
-  bottom: 20.1em;
 }
-.post-form-style-fixed.show-post-form-header #mascot img,
+.mascots-overlap-posts #mascot {
-.post-form-style-transparent-fade.show-post-form-header #mascot img {
-  bottom: 20.3em;
-}
-.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-fixed #mascot img,
-.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-fixed #mascot img,
-.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-transparent-fade #mascot img,
-.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-transparent-fade #mascot img {
-  bottom: 21.6em;
-}
-.mascot-position-default:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img,
-.mascot-position-bottom #mascot img,
-.mascot-position-default.posting-disabled #mascot img {
-  bottom: 0;
-}
-.mascots-overlap-posts #mascot img {
   z-index: 3;
 }
-.mascot-position-middle #mascot img {
+.mascot-position-middle #mascot {
   bottom: 50% !important;
   <%= agent %>transform: translateY(50%);
 }
-.mascot-position-top #mascot img {
+.mascot-position-top #mascot {
   bottom: auto !important;
   top: 17px;
 }
-.grayscale-mascots #mascot img {
+.grayscale-mascot #mascot {
   <%= filter %>: url('#grayscale');
 }
 /* Options */
@@ -1965,7 +1957,7 @@ article li {
   opacity: 0;
   <%= agent %>transition: opacity .3s linear;
 }
-.mascot:hover #mascot-options {
+.mascot:hover::after-options {
   opacity: 1;
 }
 #mascot-options {

src/General/css/mascot.css

@@ -15,9 +15,11 @@
     else
       'auto'
   };
+}
+#mascot {
   margin: #{mascot.vOffset or 0}px #{mascot.hOffset or 0}px;
 }
-.sidebar-large #mascot img {
+.sidebar-large #mascot {
   left: #{if mascot.center then 25 else 0}px;
   right: #{if mascot.center then 25 else 0}px;
 }

src/Posting/QuickReply.coffee

@@ -45,7 +45,6 @@ QR =
   initReady: ->
     QR.postingIsEnabled = !!$.id 'postForm'
     unless QR.postingIsEnabled
-      $.addClass doc, 'posting-disabled'
       return 
     
     $.on d, 'QRGetSelectedPost', ({detail: cb}) ->
@@ -102,6 +101,8 @@ QR =
       QR.posts[0].rm()
     QR.cooldown.auto = false
     QR.status()
+    if MascotTools.el
+      $.add d.body, MascotTools.el
 
   focusin: ->
     $.addClass QR.nodes.el, 'has-focus'
@@ -1008,6 +1009,9 @@ QR =
 
     Rice.nodes dialog
 
+    if MascotTools.el and Conf['Mascot Position'] is 'default' and ['fixed', 'transparent fade'].contains Conf['Post Form Style']
+      $.add dialog, MascotTools.el
+
     $.add d.body, dialog
 
     if Conf['Auto Hide QR']

src/Theming/Mascots.coffee

@@ -7,9 +7,16 @@ MascotTools =
       Conf['mascot'] = name
 
     unless @el
-      @el = $ '#mascot img', d.body
+      @el = $.el 'div',
+        id: "mascot"
+        innerHTML: "<img>"
 
-    el = @el
+      $.on @el, 'mousedown', MascotTools.click
+
+      $.asap (-> d.body), =>
+        $.add d.body, @el
+
+    el = @el.firstElementChild
 
     if !Conf['Mascots'] or (Conf['Hide Mascots on Catalog'] and g.VIEW is 'catalog')
       if el then el.src = ""
@@ -28,7 +35,15 @@ MascotTools =
         Conf[g.MASCOTSTRING].remove name
         return MascotTools.init()
 
-    MascotTools.addMascot mascot
+    image =
+      if Array.isArray mascot.image
+        if Style.lightTheme
+          mascot.image[1]
+        else
+          mascot.image[0]
+      else mascot.image
+
+    el.src = image
 
     Style.mascot.textContent = """<%= grunt.file.read('src/General/css/mascot.css') %>"""
 
@@ -47,7 +62,6 @@ MascotTools =
     else
       editMascot = {}
     editMascot.name = key or ''
-    MascotTools.addMascot editMascot
     MascotTools.init editMascot
     layout =
       name: [
@@ -129,7 +143,6 @@ MascotTools =
 
             $.on input, 'blur', ->
               editMascot[@name] = @value
-              MascotTools.addMascot editMascot
               MascotTools.init editMascot
 
             fileInput = $.el 'input',
@@ -233,27 +246,6 @@ MascotTools =
 
     reader.readAsDataURL file
 
-  addMascot: (mascot) ->
-    image =
-      if Array.isArray mascot.image
-        if Style.lightTheme
-          mascot.image[1]
-        else
-          mascot.image[0]
-      else mascot.image
-    if el = @el
-      el.src = image
-    else
-      div = $.el 'div',
-        id: "mascot"
-        innerHTML: "<img src='#{image}'>"
-
-      @el = div.firstElementChild
-
-      $.on @el, 'mousedown', MascotTools.click
-
-      $.add d.body, div
-
   save: (mascot) ->
     {name, image} = mascot
     if !name? or name is ""