Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

-1 div required to center properly (options & firstrun)

Browse Source
This commit is contained in:
Nicolas Stepien 2011-10-31 18:54:20 +01:00
parent 6e0dadd5ec
commit d0da46ab82
2 changed files with 182 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
4chan_x.user.js
View File

@ -1221,84 +1221,83 @@
var arr, back, checked, description, dialog, hiddenNum, hiddenThreads, input, key, li, obj, overlay, ta, time, ul, _i, _j, _len, _len2, _ref, _ref2, _ref3; var arr, back, checked, description, dialog, hiddenNum, hiddenThreads, input, key, li, obj, overlay, ta, time, ul, _i, _j, _len, _len2, _ref, _ref2, _ref3;
dialog = $.el('div', { dialog = $.el('div', {
id: 'options', id: 'options',
className: 'reply dialog',
innerHTML: '\ innerHTML: '\
<div class="reply dialog">\ <div id=optionsbar>\
<div id=optionsbar>\ <div id=credits>\
<div id=credits>\ <a target=_blank href=http://aeosynth.github.com/4chan-x/>4chan X</a>\
<a target=_blank href=http://aeosynth.github.com/4chan-x/>4chan X</a>\ | <a target=_blank href=https://github.com/aeosynth/4chan-x/issues>Issues</a>\
| <a target=_blank href=https://github.com/aeosynth/4chan-x/issues>Issues</a>\ | <a target=_blank 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>\
| <a target=_blank 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>\
<label for=main_tab>Main</label>\
| <label for=filter_tab>Filter</label>\
| <label for=flavors_tab>Sauce</label>\
| <label for=rice_tab>Rice</label>\
| <label for=keybinds_tab>Keybinds</label>\
</div>\
</div>\ </div>\
<hr>\ <div>\
<div id=content>\ <label for=main_tab>Main</label>\
<input type=radio name=tab hidden id=main_tab checked>\ | <label for=filter_tab>Filter</label>\
<div id=main></div>\ | <label for=flavors_tab>Sauce</label>\
<input type=radio name=tab hidden id=flavors_tab>\ | <label for=rice_tab>Rice</label>\
<textarea name=flavors id=flavors></textarea>\ | <label for=keybinds_tab>Keybinds</label>\
<input type=radio name=tab hidden id=filter_tab>\ </div>\
<div id=filter>\ </div>\
Use <a href=https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions>regular expressions</a>, one per line.<br>\ <hr>\
For example, <code>/weeaboo/i</code> will filter posts containing `weeaboo` case-insensitive.\ <div id=content>\
<p>Name:<br><textarea name=name></textarea></p>\ <input type=radio name=tab hidden id=main_tab checked>\
<p>Tripcode:<br><textarea name=trip></textarea></p>\ <div id=main></div>\
<p>E-mail:<br><textarea name=mail></textarea></p>\ <input type=radio name=tab hidden id=flavors_tab>\
<p>Subject:<br><textarea name=sub></textarea></p>\ <textarea name=flavors id=flavors></textarea>\
<p>Comment:<br><textarea name=com></textarea></p>\ <input type=radio name=tab hidden id=filter_tab>\
<p>Filename:<br><textarea name=file></textarea></p>\ <div id=filter>\
<p>Image MD5:<br><textarea name=md5></textarea></p>\ Use <a href=https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions>regular expressions</a>, one per line.<br>\
</div>\ For example, <code>/weeaboo/i</code> will filter posts containing `weeaboo` case-insensitive.\
<input type=radio name=tab hidden id=rice_tab>\ <p>Name:<br><textarea name=name></textarea></p>\
<div id=rice>\ <p>Tripcode:<br><textarea name=trip></textarea></p>\
<ul>\ <p>E-mail:<br><textarea name=mail></textarea></p>\
Backlink formatting\ <p>Subject:<br><textarea name=sub></textarea></p>\
<li><input type=text name=backlink> : <span id=backlinkPreview></span></li>\ <p>Comment:<br><textarea name=com></textarea></p>\
</ul>\ <p>Filename:<br><textarea name=file></textarea></p>\
<ul>\ <p>Image MD5:<br><textarea name=md5></textarea></p>\
Time formatting\ </div>\
<li><input type=text name=time> : <span id=timePreview></span></li>\ <input type=radio name=tab hidden id=rice_tab>\
<li>Supported <a href=http://en.wikipedia.org/wiki/Date_%28Unix%29#Formatting>format specifiers</a>:</li>\ <div id=rice>\
<li>Day: %a, %A, %d, %e</li>\ <ul>\
<li>Month: %m, %b, %B</li>\ Backlink formatting\
<li>Year: %y</li>\ <li><input type=text name=backlink> : <span id=backlinkPreview></span></li>\
<li>Hour: %k, %H, %l (lowercase L), %I (uppercase i), %p, %P</li>\ </ul>\
<li>Minutes: %M</li>\ <ul>\
</ul>\ Time formatting\
</div>\ <li><input type=text name=time> : <span id=timePreview></span></li>\
<input type=radio name=tab hidden id=keybinds_tab>\ <li>Supported <a href=http://en.wikipedia.org/wiki/Date_%28Unix%29#Formatting>format specifiers</a>:</li>\
<div id=keybinds>\ <li>Day: %a, %A, %d, %e</li>\
<table><tbody>\ <li>Month: %m, %b, %B</li>\
<tr><th>Actions</th><th>Keybinds</th></tr>\ <li>Year: %y</li>\
<tr><td>Close Options or QR</td><td><input name=close></td></tr>\ <li>Hour: %k, %H, %l (lowercase L), %I (uppercase i), %p, %P</li>\
<tr><td>Quick spoiler</td><td><input name=spoiler></td></tr>\ <li>Minutes: %M</li>\
<tr><td>Open QR with post number inserted</td><td><input name=openQR></td></tr>\ </ul>\
<tr><td>Open QR without post number inserted</td><td><input name=openEmptyQR></td></tr>\ </div>\
<tr><td>Submit post</td><td><input name=submit></td></tr>\ <input type=radio name=tab hidden id=keybinds_tab>\
<tr><td>Select next reply</td><td><input name=nextReply ></td></tr>\ <div id=keybinds>\
<tr><td>Select previous reply</td><td><input name=previousReply></td></tr>\ <table><tbody>\
<tr><td>See next thread</td><td><input name=nextThread></td></tr>\ <tr><th>Actions</th><th>Keybinds</th></tr>\
<tr><td>See previous thread</td><td><input name=previousThread></td></tr>\ <tr><td>Close Options or QR</td><td><input name=close></td></tr>\
<tr><td>Jump to the next page</td><td><input name=nextPage></td></tr>\ <tr><td>Quick spoiler</td><td><input name=spoiler></td></tr>\
<tr><td>Jump to the previous page</td><td><input name=previousPage></td></tr>\ <tr><td>Open QR with post number inserted</td><td><input name=openQR></td></tr>\
<tr><td>Jump to page 0</td><td><input name=zero></td></tr>\ <tr><td>Open QR without post number inserted</td><td><input name=openEmptyQR></td></tr>\
<tr><td>Open thread in current tab</td><td><input name=openThread></td></tr>\ <tr><td>Submit post</td><td><input name=submit></td></tr>\
<tr><td>Open thread in new tab</td><td><input name=openThreadTab></td></tr>\ <tr><td>Select next reply</td><td><input name=nextReply ></td></tr>\
<tr><td>Expand thread</td><td><input name=expandThread></td></tr>\ <tr><td>Select previous reply</td><td><input name=previousReply></td></tr>\
<tr><td>Watch thread</td><td><input name=watch></td></tr>\ <tr><td>See next thread</td><td><input name=nextThread></td></tr>\
<tr><td>Hide thread</td><td><input name=hide></td></tr>\ <tr><td>See previous thread</td><td><input name=previousThread></td></tr>\
<tr><td>Expand selected image</td><td><input name=expandImages></td></tr>\ <tr><td>Jump to the next page</td><td><input name=nextPage></td></tr>\
<tr><td>Expand all images</td><td><input name=expandAllImages></td></tr>\ <tr><td>Jump to the previous page</td><td><input name=previousPage></td></tr>\
<tr><td>Update now</td><td><input name=update></td></tr>\ <tr><td>Jump to page 0</td><td><input name=zero></td></tr>\
<tr><td>Reset the unread count to 0</td><td><input name=unreadCountTo0></td></tr>\ <tr><td>Open thread in current tab</td><td><input name=openThread></td></tr>\
</tbody></table>\ <tr><td>Open thread in new tab</td><td><input name=openThreadTab></td></tr>\
</div>\ <tr><td>Expand thread</td><td><input name=expandThread></td></tr>\
<tr><td>Watch thread</td><td><input name=watch></td></tr>\
<tr><td>Hide thread</td><td><input name=hide></td></tr>\
<tr><td>Expand selected image</td><td><input name=expandImages></td></tr>\
<tr><td>Expand all images</td><td><input name=expandAllImages></td></tr>\
<tr><td>Update now</td><td><input name=update></td></tr>\
<tr><td>Reset the unread count to 0</td><td><input name=unreadCountTo0></td></tr>\
</tbody></table>\
</div>\ </div>\
</div>' </div>'
}); });
@ -1344,19 +1343,13 @@
input.value = conf[input.name]; input.value = conf[input.name];
$.bind(input, 'keydown', options.keybind); $.bind(input, 'keydown', options.keybind);
} }
/*
Two parent divs are necessary to center on all browsers.
Only one when Firefox and Opera will support flexboxes correctly.
https://bugzilla.mozilla.org/show_bug.cgi?id=579776
*/
overlay = $.el('div', { overlay = $.el('div', {
id: 'overlay' id: 'overlay'
}); });
$.bind(overlay, 'click', function() { $.bind(overlay, 'click', function() {
return $.rm(overlay); return $.rm(overlay);
}); });
$.bind(dialog.firstElementChild, 'click', function(e) { $.bind(dialog, 'click', function(e) {
return e.stopPropagation(); return e.stopPropagation();
}); });
$.add(overlay, dialog); $.add(overlay, dialog);
@ -3002,7 +2995,12 @@
dialog = $.el('div', { dialog = $.el('div', {
id: 'overlay', id: 'overlay',
className: 'firstrun', className: 'firstrun',
innerHTML: " <div id=options> <div class='reply dialog'> <p>Click the <strong>4chan X</strong> buttons for options; they are at the top and bottom of the page.</p> <p>Updater options are in the updater dialog in replies at the bottom-right corner of the window.</p> <p>If you don't see the buttons, try disabling your userstyles.</p> </div> </div>" innerHTML: '\
<div id=options class="reply dialog">\
<p>Click the <strong>4chan X</strong> buttons for options; they are at the top and bottom of the page.</p>\
<p>Updater options are in the updater dialog in replies at the bottom-right corner of the window.</p>\
<p>If you don\'t see the buttons, try disabling your userstyles.</p>\
</div>'
}); });
$.add(d.body, dialog); $.add(d.body, dialog);
return $.bind(window, 'click', firstRun.close); return $.bind(window, 'click', firstRun.close);
@ -3253,21 +3251,25 @@
}\ }\
\ \
#overlay {\ #overlay {\
display: table;\
position: fixed;\ position: fixed;\
top: 0;\ top: 0;\
left: 0;\ left: 0;\
height: 100%;\ height: 100%;\
width: 100%;\ width: 100%;\
text-align: center;\
background: rgba(0,0,0,.5);\ background: rgba(0,0,0,.5);\
}\ }\
#options {\ #overlay::before {\
display: table-cell;\ content: "";\
display: inline-block;\
height: 100%;\
vertical-align: middle;\ vertical-align: middle;\
}\ }\
#options .dialog {\ #options {\
margin: auto;\ display: inline-block;\
padding: 5px;\ padding: 5px;\
text-align: left;\
vertical-align: middle;\
width: 500px;\ width: 500px;\
}\ }\
#credits {\ #credits {\

188
script.coffee
View File

@ -865,84 +865,82 @@ options =
$.replace home, a $.replace home, a
dialog: -> dialog: ->
dialog = $.el 'div', id: 'options', innerHTML: ' dialog = $.el 'div', id: 'options', className: 'reply dialog', innerHTML: '
<div class="reply dialog"> <div id=optionsbar>
<div id=optionsbar> <div id=credits>
<div id=credits> <a target=_blank href=http://aeosynth.github.com/4chan-x/>4chan X</a>
<a target=_blank href=http://aeosynth.github.com/4chan-x/>4chan X</a> | <a target=_blank href=https://github.com/aeosynth/4chan-x/issues>Issues</a>
| <a target=_blank href=https://github.com/aeosynth/4chan-x/issues>Issues</a> | <a target=_blank 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>
| <a target=_blank 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>
<label for=main_tab>Main</label>
| <label for=filter_tab>Filter</label>
| <label for=flavors_tab>Sauce</label>
| <label for=rice_tab>Rice</label>
| <label for=keybinds_tab>Keybinds</label>
</div>
</div> </div>
<hr> <div>
<div id=content> <label for=main_tab>Main</label>
<input type=radio name=tab hidden id=main_tab checked> | <label for=filter_tab>Filter</label>
<div id=main></div> | <label for=flavors_tab>Sauce</label>
<input type=radio name=tab hidden id=flavors_tab> | <label for=rice_tab>Rice</label>
<textarea name=flavors id=flavors></textarea> | <label for=keybinds_tab>Keybinds</label>
<input type=radio name=tab hidden id=filter_tab> </div>
<div id=filter> </div>
Use <a href=https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions>regular expressions</a>, one per line.<br> <hr>
For example, <code>/weeaboo/i</code> will filter posts containing `weeaboo` case-insensitive. <div id=content>
<p>Name:<br><textarea name=name></textarea></p> <input type=radio name=tab hidden id=main_tab checked>
<p>Tripcode:<br><textarea name=trip></textarea></p> <div id=main></div>
<p>E-mail:<br><textarea name=mail></textarea></p> <input type=radio name=tab hidden id=flavors_tab>
<p>Subject:<br><textarea name=sub></textarea></p> <textarea name=flavors id=flavors></textarea>
<p>Comment:<br><textarea name=com></textarea></p> <input type=radio name=tab hidden id=filter_tab>
<p>Filename:<br><textarea name=file></textarea></p> <div id=filter>
<p>Image MD5:<br><textarea name=md5></textarea></p> Use <a href=https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions>regular expressions</a>, one per line.<br>
</div> For example, <code>/weeaboo/i</code> will filter posts containing `weeaboo` case-insensitive.
<input type=radio name=tab hidden id=rice_tab> <p>Name:<br><textarea name=name></textarea></p>
<div id=rice> <p>Tripcode:<br><textarea name=trip></textarea></p>
<ul> <p>E-mail:<br><textarea name=mail></textarea></p>
Backlink formatting <p>Subject:<br><textarea name=sub></textarea></p>
<li><input type=text name=backlink> : <span id=backlinkPreview></span></li> <p>Comment:<br><textarea name=com></textarea></p>
</ul> <p>Filename:<br><textarea name=file></textarea></p>
<ul> <p>Image MD5:<br><textarea name=md5></textarea></p>
Time formatting </div>
<li><input type=text name=time> : <span id=timePreview></span></li> <input type=radio name=tab hidden id=rice_tab>
<li>Supported <a href=http://en.wikipedia.org/wiki/Date_%28Unix%29#Formatting>format specifiers</a>:</li> <div id=rice>
<li>Day: %a, %A, %d, %e</li> <ul>
<li>Month: %m, %b, %B</li> Backlink formatting
<li>Year: %y</li> <li><input type=text name=backlink> : <span id=backlinkPreview></span></li>
<li>Hour: %k, %H, %l (lowercase L), %I (uppercase i), %p, %P</li> </ul>
<li>Minutes: %M</li> <ul>
</ul> Time formatting
</div> <li><input type=text name=time> : <span id=timePreview></span></li>
<input type=radio name=tab hidden id=keybinds_tab> <li>Supported <a href=http://en.wikipedia.org/wiki/Date_%28Unix%29#Formatting>format specifiers</a>:</li>
<div id=keybinds> <li>Day: %a, %A, %d, %e</li>
<table><tbody> <li>Month: %m, %b, %B</li>
<tr><th>Actions</th><th>Keybinds</th></tr> <li>Year: %y</li>
<tr><td>Close Options or QR</td><td><input name=close></td></tr> <li>Hour: %k, %H, %l (lowercase L), %I (uppercase i), %p, %P</li>
<tr><td>Quick spoiler</td><td><input name=spoiler></td></tr> <li>Minutes: %M</li>
<tr><td>Open QR with post number inserted</td><td><input name=openQR></td></tr> </ul>
<tr><td>Open QR without post number inserted</td><td><input name=openEmptyQR></td></tr> </div>
<tr><td>Submit post</td><td><input name=submit></td></tr> <input type=radio name=tab hidden id=keybinds_tab>
<tr><td>Select next reply</td><td><input name=nextReply ></td></tr> <div id=keybinds>
<tr><td>Select previous reply</td><td><input name=previousReply></td></tr> <table><tbody>
<tr><td>See next thread</td><td><input name=nextThread></td></tr> <tr><th>Actions</th><th>Keybinds</th></tr>
<tr><td>See previous thread</td><td><input name=previousThread></td></tr> <tr><td>Close Options or QR</td><td><input name=close></td></tr>
<tr><td>Jump to the next page</td><td><input name=nextPage></td></tr> <tr><td>Quick spoiler</td><td><input name=spoiler></td></tr>
<tr><td>Jump to the previous page</td><td><input name=previousPage></td></tr> <tr><td>Open QR with post number inserted</td><td><input name=openQR></td></tr>
<tr><td>Jump to page 0</td><td><input name=zero></td></tr> <tr><td>Open QR without post number inserted</td><td><input name=openEmptyQR></td></tr>
<tr><td>Open thread in current tab</td><td><input name=openThread></td></tr> <tr><td>Submit post</td><td><input name=submit></td></tr>
<tr><td>Open thread in new tab</td><td><input name=openThreadTab></td></tr> <tr><td>Select next reply</td><td><input name=nextReply ></td></tr>
<tr><td>Expand thread</td><td><input name=expandThread></td></tr> <tr><td>Select previous reply</td><td><input name=previousReply></td></tr>
<tr><td>Watch thread</td><td><input name=watch></td></tr> <tr><td>See next thread</td><td><input name=nextThread></td></tr>
<tr><td>Hide thread</td><td><input name=hide></td></tr> <tr><td>See previous thread</td><td><input name=previousThread></td></tr>
<tr><td>Expand selected image</td><td><input name=expandImages></td></tr> <tr><td>Jump to the next page</td><td><input name=nextPage></td></tr>
<tr><td>Expand all images</td><td><input name=expandAllImages></td></tr> <tr><td>Jump to the previous page</td><td><input name=previousPage></td></tr>
<tr><td>Update now</td><td><input name=update></td></tr> <tr><td>Jump to page 0</td><td><input name=zero></td></tr>
<tr><td>Reset the unread count to 0</td><td><input name=unreadCountTo0></td></tr> <tr><td>Open thread in current tab</td><td><input name=openThread></td></tr>
</tbody></table> <tr><td>Open thread in new tab</td><td><input name=openThreadTab></td></tr>
</div> <tr><td>Expand thread</td><td><input name=expandThread></td></tr>
<tr><td>Watch thread</td><td><input name=watch></td></tr>
<tr><td>Hide thread</td><td><input name=hide></td></tr>
<tr><td>Expand selected image</td><td><input name=expandImages></td></tr>
<tr><td>Expand all images</td><td><input name=expandAllImages></td></tr>
<tr><td>Update now</td><td><input name=update></td></tr>
<tr><td>Reset the unread count to 0</td><td><input name=unreadCountTo0></td></tr>
</tbody></table>
</div> </div>
</div>' </div>'
@ -983,15 +981,9 @@ options =
input.value = conf[input.name] input.value = conf[input.name]
$.bind input, 'keydown', options.keybind $.bind input, 'keydown', options.keybind
###
Two parent divs are necessary to center on all browsers.
Only one when Firefox and Opera will support flexboxes correctly.
https://bugzilla.mozilla.org/show_bug.cgi?id=579776
###
overlay = $.el 'div', id: 'overlay' overlay = $.el 'div', id: 'overlay'
$.bind overlay, 'click', -> $.rm overlay $.bind overlay, 'click', -> $.rm overlay
$.bind dialog.firstElementChild, 'click', (e) -> e.stopPropagation() $.bind dialog, 'click', (e) -> e.stopPropagation()
$.add overlay, dialog $.add overlay, dialog
$.add d.body, overlay $.add d.body, overlay
@ -2258,14 +2250,12 @@ firstRun =
dialog = $.el 'div', dialog = $.el 'div',
id: 'overlay' id: 'overlay'
className: 'firstrun' className: 'firstrun'
innerHTML: " innerHTML: '
<div id=options> <div id=options class="reply dialog">
<div class='reply dialog'> <p>Click the <strong>4chan X</strong> buttons for options; they are at the top and bottom of the page.</p>
<p>Click the <strong>4chan X</strong> buttons for options; they are at the top and bottom of the page.</p> <p>Updater options are in the updater dialog in replies at the bottom-right corner of the window.</p>
<p>Updater options are in the updater dialog in replies at the bottom-right corner of the window.</p> <p>If you don\'t see the buttons, try disabling your userstyles.</p>
<p>If you don't see the buttons, try disabling your userstyles.</p> </div>'
</div>
</div>"
$.add d.body, dialog $.add d.body, dialog
$.bind window, 'click', firstRun.close $.bind window, 'click', firstRun.close
@ -2506,21 +2496,25 @@ Main =
} }
#overlay { #overlay {
display: table;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
text-align: center;
background: rgba(0,0,0,.5); background: rgba(0,0,0,.5);
} }
#options { #overlay::before {
display: table-cell; content: "";
display: inline-block;
height: 100%;
vertical-align: middle; vertical-align: middle;
} }
#options .dialog { #options {
margin: auto; display: inline-block;
padding: 5px; padding: 5px;
text-align: left;
vertical-align: middle;
width: 500px; width: 500px;
} }
#credits { #credits {