From c336c080c584dc02faab8be8e868707b77a70e42 Mon Sep 17 00:00:00 2001
From: Nicolas Stepien <mayhemydg@gmail.com>
Date: Mon, 27 Jun 2011 19:09:36 +0200
Subject: [PATCH] Change $.hide & $.show by using the hidden attribute.

---
 4chan_x.user.js | 23 +++++++++++------------
 script.coffee   | 27 +++++++++++++--------------
 2 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/4chan_x.user.js b/4chan_x.user.js
index 8ce8f4b93..e8ed00593 100644
--- a/4chan_x.user.js
+++ b/4chan_x.user.js
@@ -354,10 +354,10 @@
       return root.parentNode.replaceChild(el, root);
     },
     hide: function(el) {
-      return el.style.display = 'none';
+      return el.hidden = true;
     },
     show: function(el) {
-      return el.style.display = '';
+      return el.hidden = false;
     },
     addClass: function(el, className) {
       return el.className += ' ' + className;
@@ -984,7 +984,7 @@
     threads: [],
     getThread: function(full) {
       var bottom, i, rect, thread, _len, _ref;
-      nav.threads = $$('div.thread:not([style])');
+      nav.threads = $$('div.thread:not([hidden])');
       _ref = nav.threads;
       for (i = 0, _len = _ref.length; i < _len; i++) {
         thread = _ref[i];
@@ -1054,7 +1054,7 @@
       var arr, checked, description, dialog, hiddenNum, hiddenThreads, hidingul, html, input, key, li, link, main, obj, overlay, ul, _i, _j, _k, _len, _len2, _len3, _ref, _ref2, _ref3, _ref4;
       hiddenThreads = $.getValue("hiddenThreads/" + g.BOARD + "/", {});
       hiddenNum = Object.keys(g.hiddenReplies).length + Object.keys(hiddenThreads).length;
-      html = "      <div class='reply dialog'>        <div id=optionsbar>          <div id=floaty>            <a name=main>main</a> | <a name=flavors>sauce</a> | <a name=time>time</a> | <a name=keybinds>keybinds</a>          </div>          <div id=credits>            <a href=http://chat.now.im/x/aeos>support throd</a> |            <a href=https://github.com/aeosynth/4chan-x/issues>github</a> |            <a href=http://userscripts.org/scripts/show/51412>uso</a> |            <a href=https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=2DBVZBUAM4DHC&lc=US&item_name=Aeosynth&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted>donate</a>          </div>        </div>        <hr>        <div id=content>          <div id=main>          </div>          <textarea style='display: none;' name=flavors id=flavors>" + ($.config('flavors')) + "</textarea>          <div style='display: none;' id=time>            <div><input type=text name=time value='" + ($.config('time')) + "'> <span id=timePreview></span></div>            <table>              <caption>Format specifiers <a href=http://en.wikipedia.org/wiki/Date_%28Unix%29#Formatting>(source)</a></caption>              <tbody>                <tr><th>Specifier</th><th>Description</th><th>Values/Example</th></tr>                <tr><td>%a</td><td>weekday, abbreviated</td><td>Sat</td></tr>                <tr><td>%A</td><td>weekday, full</td><td>Saturday</td></tr>                <tr><td>%b</td><td>month, abbreviated</td><td>Jun</td></tr>                <tr><td>%B</td><td>month, full length</td><td>June</td></tr>                <tr><td>%d</td><td>day of the month, zero padded</td><td>03</td></tr>                <tr><td>%H</td><td>hour (24 hour clock) zero padded</td><td>13</td></tr>                <tr><td>%I (uppercase i)</td><td>hour (12 hour clock) zero padded</td><td>02</td></tr>                <tr><td>%m</td><td>month, zero padded</td><td>06</td></tr>                <tr><td>%M</td><td>minutes, zero padded</td><td>54</td></tr>                <tr><td>%p</td><td>upper case AM or PM</td><td>PM</td></tr>                <tr><td>%P</td><td>lower case am or pm</td><td>pm</td></tr>                <tr><td>%y</td><td>two digit year</td><td>00-99</td></tr>              </tbody>            </table>          </div>          <div style='display: none;' id=keybinds>            <table>              <tbody>                <tr><th>Actions</th><th>Keybinds</th></tr>                <tr><td>Close Options or QR</td><td><input type=text name=close></td></tr>                <tr><td>Quick spoiler</td><td><input type=text name=spoiler></td></tr>                <tr><td>Open QR with post number inserted</td><td><input type=text name=openQR></td></tr>                <tr><td>Open QR without post number inserted</td><td><input type=text name=openEmptyQR></td></tr>                <tr><td>Submit post</td><td><input type=text name=submit></td></tr>                <tr><td>Select next reply</td><td><input type=text name=nextReply ></td></tr>                <tr><td>Select previous reply</td><td><input type=text name=previousReply></td></tr>                <tr><td>See next thread</td><td><input type=text name=nextThread></td></tr>                <tr><td>See previous thread</td><td><input type=text name=previousThread></td></tr>                <tr><td>Jump to the next page</td><td><input type=text name=nextPage></td></tr>                <tr><td>Jump to the previous page</td><td><input type=text name=previousPage></td></tr>                <tr><td>Jump to page 0</td><td><input type=text name=zero></td></tr>                <tr><td>Open thread in current tab</td><td><input type=text name=openThread></td></tr>                <tr><td>Open thread in new tab</td><td><input type=text name=openThreadTab></td></tr>                <tr><td>Expand thread</td><td><input type=text name=expandThread></td></tr>                <tr><td>Watch thread</td><td><input type=text name=watch></td></tr>                <tr><td>Hide thread</td><td><input type=text name=hide></td></tr>                <tr><td>Expand selected image</td><td><input type=text name=expandImages></td></tr>                <tr><td>Expand all images</td><td><input type=text name=expandAllImages></td></tr>                <tr><td>Update now</td><td><input type=text name=update></td></tr>              </tbody>            </table>          </div>        </div>      </div>    ";
+      html = "      <div class='reply dialog'>        <div id=optionsbar>          <div id=floaty>            <a name=main>main</a> | <a name=flavors>sauce</a> | <a name=time>time</a> | <a name=keybinds>keybinds</a>          </div>          <div id=credits>            <a href=http://chat.now.im/x/aeos>support throd</a> |            <a href=https://github.com/aeosynth/4chan-x/issues>github</a> |            <a href=http://userscripts.org/scripts/show/51412>uso</a> |            <a href=https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=2DBVZBUAM4DHC&lc=US&item_name=Aeosynth&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted>donate</a>          </div>        </div>        <hr>        <div id=content>          <div id=main>          </div>          <textarea name=flavors id=flavors hidden>" + ($.config('flavors')) + "</textarea>          <div id=time hidden>            <div><input type=text name=time value='" + ($.config('time')) + "'> <span id=timePreview></span></div>            <table>              <caption>Format specifiers <a href=http://en.wikipedia.org/wiki/Date_%28Unix%29#Formatting>(source)</a></caption>              <tbody>                <tr><th>Specifier</th><th>Description</th><th>Values/Example</th></tr>                <tr><td>%a</td><td>weekday, abbreviated</td><td>Sat</td></tr>                <tr><td>%A</td><td>weekday, full</td><td>Saturday</td></tr>                <tr><td>%b</td><td>month, abbreviated</td><td>Jun</td></tr>                <tr><td>%B</td><td>month, full length</td><td>June</td></tr>                <tr><td>%d</td><td>day of the month, zero padded</td><td>03</td></tr>                <tr><td>%H</td><td>hour (24 hour clock) zero padded</td><td>13</td></tr>                <tr><td>%I (uppercase i)</td><td>hour (12 hour clock) zero padded</td><td>02</td></tr>                <tr><td>%m</td><td>month, zero padded</td><td>06</td></tr>                <tr><td>%M</td><td>minutes, zero padded</td><td>54</td></tr>                <tr><td>%p</td><td>upper case AM or PM</td><td>PM</td></tr>                <tr><td>%P</td><td>lower case am or pm</td><td>pm</td></tr>                <tr><td>%y</td><td>two digit year</td><td>00-99</td></tr>              </tbody>            </table>          </div>          <div id=keybinds hidden>            <table>              <tbody>                <tr><th>Actions</th><th>Keybinds</th></tr>                <tr><td>Close Options or QR</td><td><input type=text name=close></td></tr>                <tr><td>Quick spoiler</td><td><input type=text name=spoiler></td></tr>                <tr><td>Open QR with post number inserted</td><td><input type=text name=openQR></td></tr>                <tr><td>Open QR without post number inserted</td><td><input type=text name=openEmptyQR></td></tr>                <tr><td>Submit post</td><td><input type=text name=submit></td></tr>                <tr><td>Select next reply</td><td><input type=text name=nextReply ></td></tr>                <tr><td>Select previous reply</td><td><input type=text name=previousReply></td></tr>                <tr><td>See next thread</td><td><input type=text name=nextThread></td></tr>                <tr><td>See previous thread</td><td><input type=text name=previousThread></td></tr>                <tr><td>Jump to the next page</td><td><input type=text name=nextPage></td></tr>                <tr><td>Jump to the previous page</td><td><input type=text name=previousPage></td></tr>                <tr><td>Jump to page 0</td><td><input type=text name=zero></td></tr>                <tr><td>Open thread in current tab</td><td><input type=text name=openThread></td></tr>                <tr><td>Open thread in new tab</td><td><input type=text name=openThreadTab></td></tr>                <tr><td>Expand thread</td><td><input type=text name=expandThread></td></tr>                <tr><td>Watch thread</td><td><input type=text name=watch></td></tr>                <tr><td>Hide thread</td><td><input type=text name=hide></td></tr>                <tr><td>Expand selected image</td><td><input type=text name=expandImages></td></tr>                <tr><td>Expand all images</td><td><input type=text name=expandAllImages></td></tr>                <tr><td>Update now</td><td><input type=text name=update></td></tr>              </tbody>            </table>          </div>        </div>      </div>    ";
       dialog = $.el('div', {
         id: 'options',
         innerHTML: html
@@ -1104,11 +1104,10 @@
         $.bind(input, 'keydown', options.cb.keybind);
       }
       /*
-          https://bugzilla.mozilla.org/show_bug.cgi?id=579776
-          position:fixed and position:absolute shouldn't turn display:-moz-box into display:block
+          Two parent divs are necessary to center on all browsers.
       
-          to harmonize, position:fixed and display:-moz-box have to be set on different elements -
-          #overlay and #options, respectively.
+          Only one when Firefox and Opera will support flexboxes correctly.
+          https://bugzilla.mozilla.org/show_bug.cgi?id=579776
           */
       overlay = $.el('div', {
         id: 'overlay'
@@ -1513,7 +1512,7 @@
       }
     },
     toggle: function(thread) {
-      if (thread.className.indexOf('stub') !== -1 || thread.style.display === 'none') {
+      if (thread.className.indexOf('stub') !== -1 || thread.hidden) {
         return threadHiding.show(thread);
       } else {
         return threadHiding.hide(thread);
@@ -2559,14 +2558,14 @@
           _results = [];
           for (_i = 0, _len = thumbs.length; _i < _len; _i++) {
             thumb = thumbs[_i];
-            _results.push(!thumb.style.display ? imgExpand.expand(thumb) : void 0);
+            _results.push(!thumb.hidden ? imgExpand.expand(thumb) : void 0);
           }
           return _results;
         } else {
           _results2 = [];
           for (_j = 0, _len2 = thumbs.length; _j < _len2; _j++) {
             thumb = thumbs[_j];
-            _results2.push(thumb.style.display ? imgExpand.contract(thumb) : void 0);
+            _results2.push(thumb.hidden ? imgExpand.contract(thumb) : void 0);
           }
           return _results2;
         }
@@ -2592,7 +2591,7 @@
     toggle: function(a) {
       var thumb;
       thumb = a.firstChild;
-      if (thumb.style.display) {
+      if (thumb.hidden) {
         return imgExpand.contract(thumb);
       } else {
         return imgExpand.expand(thumb);
diff --git a/script.coffee b/script.coffee
index f1282f8b4..d9eebf3d3 100644
--- a/script.coffee
+++ b/script.coffee
@@ -235,9 +235,9 @@ $.extend $,
   replace: (root, el) ->
     root.parentNode.replaceChild el, root
   hide: (el) ->
-    el.style.display = 'none'
+    el.hidden = true
   show: (el) ->
-    el.style.display = ''
+    el.hidden = false
   addClass: (el, className) ->
     el.className += ' ' + className
   removeClass: (el, className) ->
@@ -717,7 +717,7 @@ nav =
   threads: []
 
   getThread: (full) ->
-    nav.threads = $$ 'div.thread:not([style])'
+    nav.threads = $$ 'div.thread:not([hidden])'
     for thread, i in nav.threads
       rect = thread.getBoundingClientRect()
       {bottom} = rect
@@ -795,8 +795,8 @@ options =
         <div id=content>
           <div id=main>
           </div>
-          <textarea style='display: none;' name=flavors id=flavors>#{$.config 'flavors'}</textarea>
-          <div style='display: none;' id=time>
+          <textarea name=flavors id=flavors hidden>#{$.config 'flavors'}</textarea>
+          <div id=time hidden>
             <div><input type=text name=time value='#{$.config 'time'}'> <span id=timePreview></span></div>
             <table>
               <caption>Format specifiers <a href=http://en.wikipedia.org/wiki/Date_%28Unix%29#Formatting>(source)</a></caption>
@@ -817,7 +817,7 @@ options =
               </tbody>
             </table>
           </div>
-          <div style='display: none;' id=keybinds>
+          <div id=keybinds hidden>
             <table>
               <tbody>
                 <tr><th>Actions</th><th>Keybinds</th></tr>
@@ -876,11 +876,10 @@ options =
       $.bind input, 'keydown', options.cb.keybind
 
     ###
-    https://bugzilla.mozilla.org/show_bug.cgi?id=579776
-    position:fixed and position:absolute shouldn't turn display:-moz-box into display:block
+    Two parent divs are necessary to center on all browsers.
 
-    to harmonize, position:fixed and display:-moz-box have to be set on different elements -
-    #overlay and #options, respectively.
+    Only one when Firefox and Opera will support flexboxes correctly.
+    https://bugzilla.mozilla.org/show_bug.cgi?id=579776
     ###
     overlay = $.el 'div', id: 'overlay'
     $.append overlay, dialog
@@ -1222,7 +1221,7 @@ threadHiding =
       threadHiding.show thread
 
   toggle: (thread) ->
-    if thread.className.indexOf('stub') != -1 or thread.style.display is 'none'
+    if thread.className.indexOf('stub') != -1 or thread.hidden
       threadHiding.show thread
     else
       threadHiding.hide thread
@@ -1926,11 +1925,11 @@ imgExpand =
       imgExpand.on = @checked
       if imgExpand.on #expand
         for thumb in thumbs
-          unless thumb.style.display #thumbnail hidden, image already expanded
+          unless thumb.hidden #thumbnail hidden, image already expanded
             imgExpand.expand thumb
       else #contract
         for thumb in thumbs
-          if thumb.style.display #thumbnail hidden - unhide it
+          if thumb.hidden #thumbnail hidden - unhide it
             imgExpand.contract thumb
     typeChange: (e) ->
       switch @value
@@ -1946,7 +1945,7 @@ imgExpand =
 
   toggle: (a) ->
     thumb = a.firstChild
-    if thumb.style.display
+    if thumb.hidden
       imgExpand.contract thumb
     else
       imgExpand.expand thumb