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

FLEX_ERASER.commit

Browse Source
This commit is contained in:
Zixaphir 2013-04-12 19:47:56 -07:00
parent 6eaeb0ee2c
commit 8962659934
6 changed files with 292 additions and 333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
4chan-X.user.js
View File

File diff suppressed because one or more lines are too long

439
css/style.css
View File

@ -5,6 +5,7 @@
display: block; display: block;
padding: 0; padding: 0;
} }
.captcha-img,
.field { .field {
background-color: #FFF; background-color: #FFF;
border: 1px solid #CCC; border: 1px solid #CCC;
@ -12,16 +13,15 @@
box-sizing: border-box; box-sizing: border-box;
color: #333; color: #333;
font: 13px sans-serif; font: 13px sans-serif;
margin: 0;
padding: 2px 4px 3px;
outline: none; outline: none;
transition: color .25s, border-color .25s, -webkit-flex .25s; transition: color .25s, border-color .25s;
transition: color .25s, border-color .25s, flex .25s; transition: color .25s, border-color .25s;
} }
.field::-moz-placeholder, .field::-moz-placeholder,
.field:hover::-moz-placeholder { .field:hover::-moz-placeholder {
color: #AAA !important; color: #AAA !important;
} }
.captch-img:hover,
.field:hover { .field:hover {
border-color: #999; border-color: #999;
} }
@ -34,6 +34,7 @@
} }
.move { .move {
cursor: move; cursor: move;
overflow: hidden;
} }
label, .favicon { label, .favicon {
cursor: pointer; cursor: pointer;
@ -58,15 +59,20 @@ a[href="javascript:;"] {
/* fixed, z-index */ /* fixed, z-index */
#overlay, #overlay,
#fourchanx-settings,
#qp, #ihover, #qp, #ihover,
#updater, #thread-stats, #updater, #thread-stats,
#navlinks, #header, #navlinks, #header,
#watcher,
#qr { #qr {
position: fixed; position: fixed;
} }
#overlay { #fourchanx-settings {
z-index: 999; z-index: 999;
} }
#overlay {
z-index: 900;
}
#notifications { #notifications {
z-index: 70; z-index: 70;
} }
@ -109,8 +115,6 @@ a[href="javascript:;"] {
} }
#header-bar { #header-bar {
border-width: 0; border-width: 0;
display: -webkit-flex;
display: flex;
padding: 3px 4px 4px; padding: 3px 4px 4px;
position: relative; position: relative;
transition: all .1s .05s ease-in-out; transition: all .1s .05s ease-in-out;
@ -127,8 +131,6 @@ a[href="javascript:;"] {
border-bottom: 6px solid; border-bottom: 6px solid;
} }
#board-list { #board-list {
-webkit-flex: 1;
flex: 1;
text-align: center; text-align: center;
} }
#header-bar.autohide:not(:hover) { #header-bar.autohide:not(:hover) {
@ -254,13 +256,6 @@ a[href="javascript:;"] {
/* Settings */ /* Settings */
#overlay { #overlay {
background-color: rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, .5);
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
position: fixed;
top: 0; top: 0;
left: 0; left: 0;
height: 100%; height: 100%;
@ -277,14 +272,14 @@ a[href="javascript:;"] {
min-width: 0; min-width: 0;
max-width: 100%; max-width: 100%;
padding: 3px; padding: 3px;
display: -webkit-flex; top: 50%;
display: flex; left: 50%;
-webkit-flex-direction: column; -moz-transform: translate(-50%, -50%);
flex-direction: column; -webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
} }
#fourchanx-settings > nav { #fourchanx-settings > nav {
display: -webkit-flex;
display: flex;
padding: 2px 2px 0; padding: 2px 2px 0;
} }
#fourchanx-settings > nav a { #fourchanx-settings > nav a {
@ -294,25 +289,31 @@ a[href="javascript:;"] {
text-decoration: none; text-decoration: none;
padding: 2px; padding: 2px;
} }
.section-container {
overflow: auto;
position: absolute;
top: 1.7em;
right: 5px;
bottom: 5px;
left: 5px;
}
.sections-list { .sections-list {
-webkit-flex: 1; padding: 0 3px;
flex: 1; float: left;
}
.credits {
float: right;
} }
.tab-selected { .tab-selected {
font-weight: 700; font-weight: 700;
} }
.section-container { .section-container {
-webkit-flex: 1;
flex: 1;
position: relative;
}
.section-container > section {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto; overflow: auto;
position: absolute;
top: 1.7em;
right: 5px;
bottom: 5px;
left: 5px;
} }
.section-sauce ul, .section-sauce ul,
.section-rice ul { .section-rice ul {
@ -541,186 +542,208 @@ a[href="javascript:;"] {
} }
/* QR */ /* QR */
:root.hide-original-post-form #postForm, #qr {
:root.hide-original-post-form .postingMode, z-index: 20;
:root.hide-original-post-form #togglePostForm, position: fixed;
#qr.autohide:not(:hover) > form { padding: 1px;
display: none; border: 1px solid transparent;
min-width: 248px;
border-radius: 3px 3px 0 0;
} }
#qr select, #dump-button, .remove, .captcha-img { #qrtab {
cursor: pointer; border-radius: 3px 3px 0 0;
} }
#qr > div { .autohide:not(:hover):not(.focus) > form {
min-width: 300px; display: none !important;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
} }
#qr .move { #qrtab {
-webkit-align-self: stretch; margin-bottom: 1px;
align-self: stretch;
-webkit-flex: 1;
flex: 1;
}
#qr select {
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: none;
}
.presto #qr select {
height: 1em;
} }
#qr .close { #qr .close {
float: right;
padding: 0 3px; padding: 0 3px;
} }
#qr > form { #qr .warning {
display: -webkit-flex; min-height: 1.6em;
display: flex; vertical-align: middle;
-webkit-flex-direction: column; padding: 0 1px;
flex-direction: column; border-width: 1px;
border-style: solid;
} }
.persona { .persona {
display: -webkit-flex; width: 248px;
display: flex; max-width: 100%;
} min-width: 100%;
.persona .field {
-webkit-flex: 1;
flex: 1;
}
.persona .field:focus {
-webkit-flex: 3;
flex: 3;
} }
#dump-button { #dump-button {
background: linear-gradient(#EEE, #CCC); width: 10%;
border: 1px solid #CCC;
margin: 0; margin: 0;
padding: 2px 4px 3px;
outline: none;
width: 30px;
} }
#dump-button:hover, #dump-button:focus { .persona input.field {
background: linear-gradient(#FFF, #DDD); width: 29.6%;
margin: 0 0 0 0.4%;
} }
#dump-button:active, .dump #dump-button:not(:hover):not(:focus) { #qr textarea.field {
background: linear-gradient(#CCC, #DDD); height: 14.8em;
min-height: 9em;
} }
.gecko #dump-button { #qr.has-captcha textarea.field {
padding: 0; height: 9em;
} }
#qr:not(.dump) #dump-list-container { input.field.tripped:not(:hover):not(:focus) {
color: transparent !important; text-shadow: none !important;
}
#qr textarea {
resize: both;
}
.captcha-img {
margin: 1px 0 0;
text-align: center;
background-image: #fff;
}
.captcha-input {
width: 100%;
margin: 1px 0 0;
}
.field,
.selectrice,
button,
input:not([type=radio]) {
-moz-box-sizing: border-box;
font-size: 12px;
height: 1.6em;
margin: 1px 0 0;
vertical-align: bottom;
padding: 0 1px;
}
#qr textarea {
min-width: 100%;
}
#qr [type='submit'] {
width: 25%;
}
/* Fake File Input */
#qr-filename,
.has-file #qr-no-file {
display: none; display: none;
} }
#dump-list-container { #qr-no-file,
height: 100px; .has-file #qr-filename {
display: block;
}
#qr-filename-container {
-moz-box-sizing: border-box;
display: inline-block;
position: relative; position: relative;
-webkit-user-select: none; width: 100px;
-moz-user-select: none; min-width: 74.6%;
-o-user-select: none; max-width: 74.6%;
user-select: none; margin-right: 0.4%;
overflow: hidden;
padding: 2px 1px 0;
}
#qr-filerm {
position: absolute;
right: 3px;
top: 2px;
z-index: 2;
}
#qr input[type=file] {
display: none;
}
/* Thread Select / Spoiler Label */
#qr select {
float: right;
}
/* Dumping UI */
.dump #dump-list-container {
display: block;
}
#dump-list-container {
display: none;
position: relative;
overflow-y: hidden;
margin-top: 1px;
} }
#dump-list { #dump-list {
counter-reset: qrpreviews; overflow-x: auto;
top: 0; right: 0; bottom: 0; left: 0; overflow-y: hidden;
overflow: hidden; white-space: pre;
position: absolute; width: 248px;
white-space: nowrap; max-width: 100%;
min-width: 100%;
} }
#dump-list:hover { #dump-list:hover {
bottom: -12px;
overflow-x: auto; overflow-x: auto;
z-index: 1;
}
#dump-list::-webkit-scrollbar {
height: 12px;
}
#dump-list::-webkit-scrollbar-thumb {
border: 1px solid;
} }
.qr-preview { .qr-preview {
background-position: 50% 20%;
background-size: cover;
border: 1px solid #808080;
color: #FFF !important;
font-size: 12px;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; counter-increment: thumbnails;
cursor: move; cursor: move;
display: inline-block; display: inline-block;
height: 92px; width: 92px; height: 90px;
margin: 4px; padding: 2px; width: 90px;
opacity: .6; padding: 2px;
outline: none; opacity: .5;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
text-shadow: 0 1px 1px #000; text-shadow: 0 1px 1px #000;
transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out;
vertical-align: top; vertical-align: top;
white-space: pre;
} }
.qr-preview:hover, .qr-preview:focus { .qr-preview:hover,
.qr-preview:focus {
opacity: .9; opacity: .9;
color: #FFF !important; }
.qr-preview::before {
content: counter(thumbnails);
color: #fff;
position: absolute;
top: 3px;
right: 3px;
text-shadow: 0 0 3px #000, 0 0 8px #000;
} }
.qr-preview#selected { .qr-preview#selected {
opacity: 1; opacity: 1;
} }
.qr-preview::before {
counter-increment: qrpreviews;
content: counter(qrpreviews);
font-weight: 700;
text-shadow: 0 0 3px #000, 0 0 5px #000;
position: absolute;
top: 3px; right: 3px;
}
.qr-preview.drag { .qr-preview.drag {
border-color: red; box-shadow: 0 0 10px rgba(0,0,0,.5);
border-style: dashed;
} }
.qr-preview.over { .qr-preview.over {
border-color: #FFF; border-color: #fff;
border-style: dashed; }
.qr-preview > span {
color: #fff;
} }
.remove { .remove {
color: #E00 !important; background: none;
color: #e00;
font-weight: 700; font-weight: 700;
padding: 3px; padding: 3px;
} }
a:only-of-type > .remove {
display: none;
}
.remove:hover::after { .remove:hover::after {
content: ' Remove'; content: " Remove";
} }
.qr-preview > label { .qr-preview > label {
background: rgba(0, 0, 0, .5); background: rgba(0,0,0,.5);
color: #fff;
right: 0; bottom: 0; left: 0; right: 0; bottom: 0; left: 0;
position: absolute; position: absolute;
text-align: center; text-align: center;
} }
.qr-preview > label > input { .qr-preview > label > input {
margin: 1px 0; margin: 0;
vertical-align: bottom;
} }
#add-post { #add-post {
display: inline-block; cursor: pointer;
font-size: 30px; font-size: 2em;
height: 30px;
width: 30px;
line-height: 1;
text-align: center;
position: absolute; position: absolute;
right: 0; bottom: 0; top: 50%;
z-index: 1; right: 10px;
} -moz-transform: translateY(-50%);
#qr textarea {
min-height: 160px;
min-width: 100%;
display: block;
}
#qr.has-captcha textarea {
min-height: 120px;
} }
.textarea { .textarea {
position: relative; position: relative;
@ -734,69 +757,6 @@ a[href="javascript:;"] {
right: 1px; right: 1px;
pointer-events: none; pointer-events: none;
} }
#char-count.warning {
color: red;
}
.captcha-img {
background: #FFF;
outline: 1px solid #CCC;
outline-offset: -1px;
}
.captcha-img > img {
display: block;
height: 57px;
width: 300px;
}
#file-n-submit > input {
margin: 0;
}
#file-n-submit.has-file #qr-no-file {
visibility: hidden;
}
#file-n-submit:not(.has-file) #qr-filename,
#file-n-submit:not(.has-file) #qr-file-spoiler,
#file-n-submit:not(.has-file) #qr-filerm {
display: none;
}
#file-n-submit {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
}
#qr-no-file, #qr-filename-container {
-webkit-flex: 1;
flex: 1;
}
#qr-filename-container {
cursor: default;
position: relative;
margin-left: 2px;
}
#qr-filename {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#qr-filerm {
padding: 0 2px;
}
#file-n-submit > #qr-file-spoiler {
margin: 0 2px;
}
#file-n-submit input[type='submit'] {
min-width: 40px;
-webkit-order: 1;
order: 1;
}
#qr input[type='file'] {
position: absolute;
visibility: hidden;
}
/* Menu */ /* Menu */
.menu-button { .menu-button {
@ -812,48 +772,39 @@ a[href="javascript:;"] {
vertical-align: middle; vertical-align: middle;
} }
#menu { #menu {
border-bottom: 0; position: fixed;
display: -webkit-flex;
display: flex;
margin: 2px 0;
-webkit-flex-direction: column;
flex-direction: column;
position: absolute;
outline: none; outline: none;
z-index: 22;
} }
.entry { .entry {
border-bottom: 1px solid rgba(0,0,0,.25);
cursor: pointer; cursor: pointer;
display: block;
outline: none; outline: none;
padding: 3px 7px; padding: 3px 7px;
position: relative; position: relative;
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
} }
.entry.has-submenu { .entry:last-child {
padding-right: 20px; border-bottom: 0;
} }
.has-submenu::after { .has-submenu::after {
content: ''; content: "";
border-left: 6px solid; border-left: .5em solid;
border-top: 4px solid transparent; border-top: .3em solid transparent;
border-bottom: 4px solid transparent; border-bottom: .3em solid transparent;
display: inline-block; display: inline-block;
margin: 4px; margin: .3em;
position: absolute; position: absolute;
right: 3px; right: 3px;
} }
.has-submenu:not(.focused) > .submenu {
display: none;
}
.submenu { .submenu {
border-bottom: 0; display: none;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
position: absolute; position: absolute;
margin: -1px 0; left: 100%;
top: -1px;
} }
.entry input { .focused .submenu {
margin: 0; display: block;
} }

4
lib/ui.coffee
View File

@ -7,6 +7,10 @@ UI = do ->
el.style.cssText = localStorage.getItem("#{g.NAMESPACE}#{id}.position") or position el.style.cssText = localStorage.getItem("#{g.NAMESPACE}#{id}.position") or position
move = $ '.move', el move = $ '.move', el
$.on move, 'touchstart mousedown', dragstart $.on move, 'touchstart mousedown', dragstart
for child in move.children
continue unless child.tagName
$.on child, 'touchstart mousedown', (e) ->
e.stopPropagation()
el el
class Menu class Menu

34
src/features.coffee
View File

@ -211,16 +211,6 @@ Settings =
$.prepend $.id('navtopright'), [$.tn(' ['), link, $.tn('] ')] $.prepend $.id('navtopright'), [$.tn(' ['), link, $.tn('] ')]
$.get 'previousversion', null, (item) -> $.get 'previousversion', null, (item) ->
<% if (type === 'userscript') { %>
el = $.el 'span'
el.style.flex = 'test'
if el.style.flex is 'test'
el.innerHTML = """
Firefox is not correctly set up and some <%= meta.name %> features will be displayed incorrectly.<br>
Follow the instructions of the <a href='<%= meta.page %>' target=_blank>install guide</a> to fix it.
"""
new Notification 'warning', el, 30
<% } %>
if previous = item['previousversion'] if previous = item['previousversion']
return if previous is g.VERSION return if previous is g.VERSION
# Avoid conflicts between sync'd newer versions # Avoid conflicts between sync'd newer versions
@ -258,7 +248,6 @@ Settings =
$.event 'CloseMenu' $.event 'CloseMenu'
html = """ html = """
<div id=fourchanx-settings class=dialog>
<nav> <nav>
<div class=sections-list></div> <div class=sections-list></div>
<div class=credits> <div class=credits>
@ -270,11 +259,14 @@ Settings =
</nav> </nav>
<hr> <hr>
<div class=section-container><section></section></div> <div class=section-container><section></section></div>
</div>
""" """
Settings.dialog = overlay = $.el 'div', Settings.overlay = overlay = $.el 'div',
id: 'overlay' id: 'overlay'
Settings.dialog = dialog = $.el 'div',
id: 'fourchanx-settings'
className: 'dialog'
innerHTML: html innerHTML: html
links = [] links = []
@ -287,21 +279,23 @@ Settings =
links.push link, $.tn ' | ' links.push link, $.tn ' | '
sectionToOpen = link if section.title is openSection sectionToOpen = link if section.title is openSection
links.pop() links.pop()
$.add $('.sections-list', overlay), links $.add $('.sections-list', dialog), links
(if sectionToOpen then sectionToOpen else links[0]).click() (if sectionToOpen then sectionToOpen else links[0]).click()
$.on $('.close', overlay), 'click', Settings.close $.on $('.close', dialog), 'click', Settings.close
$.on overlay, 'click', Settings.close $.on overlay, 'click', Settings.close
$.on overlay.firstElementChild, 'click', (e) -> e.stopPropagation()
d.body.style.width = "#{d.body.clientWidth}px" d.body.style.width = "#{d.body.clientWidth}px"
$.addClass d.body, 'unscroll' $.addClass d.body, 'unscroll'
$.add d.body, overlay $.add d.body, [overlay, dialog]
close: -> close: ->
return unless Settings.dialog return unless Settings.dialog
d.body.style.removeProperty 'width' d.body.style.removeProperty 'width'
$.rmClass d.body, 'unscroll' $.rmClass d.body, 'unscroll'
$.rm Settings.overlay
$.rm Settings.dialog $.rm Settings.dialog
delete Settings.overlay
delete Settings.dialog delete Settings.dialog
sections: [] sections: []
@ -1895,7 +1889,7 @@ Keybinds =
if Conf['Bottom header'] if Conf['Bottom header']
topMargin = 0 topMargin = 0
else else
headRect = Header.toggle.getBoundingClientRect() headRect = Header.bar.getBoundingClientRect()
topMargin = headRect.top + headRect.height topMargin = headRect.top + headRect.height
if postEl = $ '.reply.highlight', thread if postEl = $ '.reply.highlight', thread
$.rmClass postEl, 'highlight' $.rmClass postEl, 'highlight'
@ -1963,7 +1957,7 @@ Nav =
if Conf['Bottom header'] if Conf['Bottom header']
topMargin = 0 topMargin = 0
else else
headRect = Header.toggle.getBoundingClientRect() headRect = Header.bar.getBoundingClientRect()
topMargin = headRect.top + headRect.height topMargin = headRect.top + headRect.height
threads = $$ '.thread:not([hidden])' threads = $$ '.thread:not([hidden])'
for thread, i in threads for thread, i in threads

5
src/main.coffee
View File

@ -477,11 +477,6 @@ Main =
Main.callbackNodes Thread, threads Main.callbackNodes Thread, threads
Main.callbackNodes Post, posts Main.callbackNodes Post, posts
if $.hasClass d.body, 'fourchan_x'
alert '4chan X v2 detected: Disable it or v3 will break.'
if /Firefox\/1/.test navigator.userAgent
alert 'Your version of Firefox is incompatible with 4chan X v3. Firefox 20+ is required.'
$.event '4chanXInitFinished' $.event '4chanXInitFinished'
Main.checkUpdate() Main.checkUpdate()

50
src/qr.coffee
View File

@ -313,7 +313,8 @@ QR =
return unless files.length return unless files.length
QR.open() QR.open()
QR.fileInput files QR.fileInput files
openFileInput: -> openFileInput: (e) ->
return if e.keyCode and e.keyCode isnt 32
QR.nodes.fileInput.click() QR.nodes.fileInput.click()
fileInput: (files) -> fileInput: (files) ->
if @ instanceof Element #or files instanceof Event # file input if @ instanceof Element #or files instanceof Event # file input
@ -419,7 +420,7 @@ QR =
lock: (lock=true) -> lock: (lock=true) ->
@isLocked = lock @isLocked = lock
return unless @ is QR.selected return unless @ is QR.selected
for name in ['name', 'email', 'sub', 'com', 'fileButton', 'spoiler'] for name in ['name', 'email', 'sub', 'com', 'spoiler']
QR.nodes[name].disabled = lock QR.nodes[name].disabled = lock
@nodes.rm.style.visibility = @nodes.rm.style.visibility =
QR.nodes.fileRM.style.visibility = if lock then 'hidden' else '' QR.nodes.fileRM.style.visibility = if lock then 'hidden' else ''
@ -604,6 +605,7 @@ QR =
title: 'Verification' title: 'Verification'
autocomplete: 'off' autocomplete: 'off'
spellcheck: false spellcheck: false
tabIndex: 55
@nodes = @nodes =
challenge: $.id 'recaptcha_challenge_field_holder' challenge: $.id 'recaptcha_challenge_field_holder'
img: imgContainer.firstChild img: imgContainer.firstChild
@ -618,6 +620,8 @@ QR =
$.on imgContainer, 'click', @reload.bind @ $.on imgContainer, 'click', @reload.bind @
$.on input, 'keydown', @keydown.bind @ $.on input, 'keydown', @keydown.bind @
$.on input, 'focus', -> $.addClass QR.nodes.el, 'focus'
$.on input, 'blur', -> $.rmClass QR.nodes.el, 'focus'
$.get 'captchas', [], (item) => $.get 'captchas', [], (item) =>
@sync item['captchas'] @sync item['captchas']
$.sync 'captchas', @sync $.sync 'captchas', @sync
@ -695,40 +699,40 @@ QR =
dialog: -> dialog: ->
dialog = UI.dialog 'qr', 'top:0;right:0;', """ dialog = UI.dialog 'qr', 'top:0;right:0;', """
<div> <div class=move>
<input type=checkbox id=autohide title=Auto-hide> <input type=checkbox id=autohide title=Auto-hide>
<a href=javascript:; class=close title=Close>×</a>
<select title='Create a new thread / Reply'> <select title='Create a new thread / Reply'>
<option value=new>New thread</option> <option value=new>New thread</option>
</select> </select>
<span class=move></span>
<a href=javascript:; class=close title=Close>×</a>
</div> </div>
<form> <form>
<div class=persona> <div class=persona>
<input id=dump-button type=button title='Dump list' value=+> <input id=dump-button type=button title='Dump list' value=+ tabindex=0>
<input name=name data-name=name title=Name placeholder=Name class=field size=1> <input name=name data-name=name title=Name placeholder=Name class=field size=1 tabindex=10>
<input name=email data-name=email title=E-mail placeholder=E-mail class=field size=1> <input name=email data-name=email title=E-mail placeholder=E-mail class=field size=1 tabindex=20>
<input name=sub data-name=sub title=Subject placeholder=Subject class=field size=1> <input name=sub data-name=sub title=Subject placeholder=Subject class=field size=1 tabindex=30>
</div>
<div class=textarea>
<textarea data-name=com title=Comment placeholder=Comment class=field tabindex=40></textarea>
<span id=char-count></span>
</div> </div>
<div id=dump-list-container> <div id=dump-list-container>
<div id=dump-list></div> <div id=dump-list></div>
<a id=add-post href=javascript:; title="Add a post">+</a> <a id=add-post href=javascript:; title="Add a post" tabindex=50>+</a>
</div>
<div class=textarea>
<textarea data-name=com title=Comment placeholder=Comment class=field></textarea>
<span id=char-count></span>
</div> </div>
<div id=file-n-submit> <div id=file-n-submit>
<input type=submit> <span id=qr-filename-container class=field tabindex=60>
<input id=qr-file-button type=button value='Choose files'>
<span id=qr-filename-container>
<span id=qr-no-file>No selected file</span> <span id=qr-no-file>No selected file</span>
<span id=qr-filename></span> <span id=qr-filename></span>
<a id=qr-filerm href=javascript:; title='Remove file' tabindex=80>×</a>
</span> </span>
<a id=qr-filerm href=javascript:; title='Remove file'>×</a> <input type=submit tabindex=70>
<input type=checkbox id=qr-file-spoiler title='Spoiler image'>
</div> </div>
<input type=file multiple> <input type=file multiple>
<label id=qr-spoiler-label>
<input type=checkbox id=qr-file-spoiler title='Spoiler image' tabindex=90>Spoiler?
</label>
</form> </form>
""".replace />\s+</g, '><' # get rid of spaces between elements """.replace />\s+</g, '><' # get rid of spaces between elements
@ -748,7 +752,6 @@ QR =
addPost: $ '#add-post', dialog addPost: $ '#add-post', dialog
charCount: $ '#char-count', dialog charCount: $ '#char-count', dialog
fileSubmit: $ '#file-n-submit', dialog fileSubmit: $ '#file-n-submit', dialog
fileButton: $ '#qr-file-button', dialog
filename: $ '#qr-filename', dialog filename: $ '#qr-filename', dialog
fileRM: $ '#qr-filerm', dialog fileRM: $ '#qr-filerm', dialog
spoiler: $ '#qr-file-spoiler', dialog spoiler: $ '#qr-file-spoiler', dialog
@ -794,11 +797,10 @@ QR =
$.add nodes.thread, $.el 'option', $.add nodes.thread, $.el 'option',
value: thread value: thread
textContent: "Thread No.#{thread}" textContent: "Thread No.#{thread}"
$.after nodes.autohide, nodes.thread
QR.resetThreadSelector() QR.resetThreadSelector()
for node in [nodes.fileButton, nodes.filename.parentNode] $.on nodes.filename.parentNode, 'click keyup', QR.openFileInput
$.on node, 'click', QR.openFileInput
$.on nodes.autohide, 'change', QR.toggleHide $.on nodes.autohide, 'change', QR.toggleHide
$.on nodes.close, 'click', QR.close $.on nodes.close, 'click', QR.close
$.on nodes.dumpButton, 'click', -> nodes.el.classList.toggle 'dump' $.on nodes.dumpButton, 'click', -> nodes.el.classList.toggle 'dump'
@ -812,6 +814,8 @@ QR =
# save selected post's data # save selected post's data
for name in ['name', 'email', 'sub', 'com'] for name in ['name', 'email', 'sub', 'com']
$.on nodes[name], 'input', -> QR.selected.save @ $.on nodes[name], 'input', -> QR.selected.save @
$.on nodes[name], 'focus', -> $.addClass nodes.el, 'focus'
$.on nodes[name], 'blur', -> $.rmClass nodes.el, 'focus'
QR.status() QR.status()
QR.cooldown.init() QR.cooldown.init()