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

Strengthen QR

Browse Source 
* keyup and click event on file div (so unnecessary Mayhem button is
  unnecessary).
* TabIndex on all elements so no mistabs.
* Focus Event on every input so QR will not autohide when focused.
* More love <3
This commit is contained in:
Zixaphir 2013-04-11 12:42:30 -07:00
parent d86e7545dd
commit 419f6cff5d
4 changed files with 78 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
appchan-x.user.js
View File

File diff suppressed because one or more lines are too long

3
css/layout.css
View File

@ -1097,7 +1097,7 @@ unless _conf['Post Form Style'] is 'tabbed slideout'
unless _conf['Post Form Style'] is 'float' or _conf['Show Post Form Header']
"#qrtab { display: none; }"
else unless _conf['Post Form Style'] is 'slideout'
".autohide:not(:hover) > form { display: none !important; }"
".autohide:not(:hover):not(.focus) > form { display: none !important; }"
else ""
) + "#qrtab { margin-bottom: 1px; }"
else ""}
@ -1253,6 +1253,7 @@ input:not([type=radio]) {
position: absolute;
right: 3px;
top: 2px;
z-index: 2;
}
/* Thread Select / Spoiler Label */
#qr-thread-select {

4
css/theme.css
View File

@ -129,6 +129,7 @@ textarea {
}
#dump:hover,
#qr-filename-container:hover,
#qr-filename-container:hover,
.selectrice:hover,
#selectrice li:hover,
#selectrice li:nth-of-type(2n+1):hover,
@ -142,12 +143,15 @@ textarea:hover {
#dump:focus,
#selectrice li:focus,
.selectrice:focus,
#qr-filename-container:active,
#qr-filename-container:focus,
input:focus,
textarea:focus,
textarea.field:focus {
background: #{theme["Focused Input Background"]};
border-color: #{theme["Focused Input Border"]};
color: #{theme["Inputs"]};
outline: none;
}
#mouseover,
#post-preview,

68
src/qr.coffee
View File

@ -53,6 +53,7 @@ QR =
persist: ->
QR.open()
QR.hide() if Conf['Auto-Hide QR']
open: ->
if QR.nodes
QR.nodes.el.hidden = false
@ -65,6 +66,7 @@ QR =
Main.handleErrors
message: 'Quick Reply dialog creation crashed.'
error: err
close: ->
if QR.req
QR.abort()
@ -83,9 +85,11 @@ QR =
d.activeElement.blur()
$.addClass QR.nodes.el, 'autohide'
QR.nodes.autohide.checked = true
unhide: ->
$.rmClass QR.nodes.el, 'autohide'
QR.nodes.autohide.checked = false
toggleHide: ->
if @checked
QR.hide()
@ -104,7 +108,9 @@ QR =
QR.captcha.nodes.input.focus()
alert el.textContent if d.hidden
QR.notifications.push new Notification 'warning', el
notifications: []
cleanNotifications: ->
for notification in QR.notifications
notification.close()
@ -292,9 +298,11 @@ QR =
toggle = if e.type is 'dragstart' then $.off else $.on
toggle d, 'dragover', QR.dragOver
toggle d, 'drop', QR.dropFile
dragOver: (e) ->
e.preventDefault()
e.dataTransfer.dropEffect = 'copy' # cursor feedback
dropFile: (e) ->
# Let it only handle files from the desktop.
return unless e.dataTransfer.files.length
@ -302,6 +310,7 @@ QR =
QR.open()
QR.fileInput e.dataTransfer.files
$.addClass QR.nodes.el, 'dump'
paste: (e) ->
files = []
for item in e.clipboardData.items
@ -313,8 +322,12 @@ QR =
return unless files.length
QR.open()
QR.fileInput files
openFileInput: ->
openFileInput: (e) ->
if e.keyCode
return unless e.keyCode is 32
QR.nodes.fileInput.click()
fileInput: (files) ->
if @ instanceof Element #or files instanceof Event # file input
files = [@files...]
@ -350,6 +363,7 @@ QR =
post = new QR.post()
post.setFile file
$.addClass QR.nodes.el, 'dump'
resetThreadSelector: ->
if g.VIEW is 'thread'
QR.nodes.thread.value = g.THREADID
@ -357,6 +371,7 @@ QR =
QR.nodes.thread.value = 'new'
posts: []
post: class
constructor: (select) ->
el = $.el 'a',
@ -406,6 +421,7 @@ QR =
@load() if QR.selected is @ # load persona
@select() if select
@unlock()
rm: ->
$.rm @nodes.el
index = QR.posts.indexOf @
@ -416,6 +432,7 @@ QR =
QR.posts.splice index, 1
return unless window.URL
URL.revokeObjectURL @URL
lock: (lock=true) ->
@isLocked = lock
return unless @ is QR.selected
@ -426,8 +443,10 @@ QR =
(if lock then $.off else $.on) QR.nodes.filename.parentNode, 'click', QR.openFileInput
@nodes.spoiler.disabled = lock
@nodes.el.draggable = !lock
unlock: ->
@lock false
select: ->
if QR.selected
QR.selected.nodes.el.id = null
@ -440,12 +459,14 @@ QR =
rectList = @nodes.el.parentNode.getBoundingClientRect()
@nodes.el.parentNode.scrollLeft += rectEl.left + rectEl.width/2 - rectList.left - rectList.width/2
@load()
load: ->
# Load this post's values.
for name in ['name', 'email', 'sub', 'com']
QR.nodes[name].value = @[name] or null
@showFileData()
QR.characterCount()
save: (input) ->
{value} = input
@[input.dataset.name] = value
@ -456,6 +477,7 @@ QR =
# during the last 5 seconds of the cooldown.
if QR.cooldown.auto and @ is QR.posts[0] and 0 < QR.cooldown.seconds <= 5
QR.cooldown.auto = false
forceSave: ->
return unless @ is QR.selected
# Do this in case people use extensions
@ -463,6 +485,7 @@ QR =
for name in ['name', 'email', 'sub', 'com']
@save QR.nodes[name]
return
setFile: (@file) ->
@filename = "#{file.name} (#{$.bytesToString file.size})"
@nodes.el.title = @filename
@ -473,6 +496,7 @@ QR =
@nodes.el.style.backgroundImage = null
return
@setThumbnail()
setThumbnail: (fileURL) ->
# XXX Opera does not support blob URL
# Create a redimensioned thumbnail.
@ -532,6 +556,7 @@ QR =
applyBlob new Blob [ui8a], type: 'image/png'
img.src = fileURL
rmFile: ->
delete @file
delete @filename
@ -541,6 +566,7 @@ QR =
@showFileData()
return unless window.URL
URL.revokeObjectURL @URL
showFileData: (hide) ->
if @file
QR.nodes.filename.textContent = @filename
@ -549,6 +575,7 @@ QR =
$.addClass QR.nodes.fileSubmit, 'has-file'
else
$.rmClass QR.nodes.fileSubmit, 'has-file'
pasteText: (file) ->
reader = new FileReader()
reader.onload = (e) =>
@ -561,17 +588,23 @@ QR =
QR.nodes.com.value = @com
@nodes.span.textContent = @com
reader.readAsText file
dragStart: ->
$.addClass @, 'drag'
dragEnd: ->
$.rmClass @, 'drag'
dragEnter: ->
$.addClass @, 'over'
dragLeave: ->
$.rmClass @, 'over'
dragOver: (e) ->
e.preventDefault()
e.dataTransfer.dropEffect = 'move'
drop: ->
el = $ '.drag', @parentNode
$.rmClass el, 'drag' # Opera doesn't fire dragEnd if we drop it on something else
@ -589,6 +622,7 @@ QR =
return if d.cookie.indexOf('pass_enabled=1') >= 0
return unless @isEnabled = !!$.id 'captchaFormPart'
$.asap (-> $.id 'recaptcha_challenge_field_holder'), @ready.bind @
ready: ->
setLifetime = (e) => @lifetime = e.detail
$.on window, 'captcha:timeout', setLifetime
@ -626,8 +660,10 @@ QR =
$.addClass QR.nodes.el, 'has-captcha'
$.after QR.nodes.com.parentNode, [imgContainer, input]
sync: (@captchas) ->
QR.captcha.count()
getOne: ->
@clear()
if captcha = @captchas.shift()
@ -643,6 +679,7 @@ QR =
# If there's only one word, duplicate it.
response = "#{response} #{response}" unless /\s/.test response
{challenge, response}
save: ->
return unless response = @nodes.input.value.trim()
@captchas.push
@ -652,6 +689,7 @@ QR =
@count()
@reload()
$.set 'captchas', @captchas
clear: ->
now = Date.now()
for captcha, i in @captchas
@ -660,6 +698,7 @@ QR =
@captchas = @captchas[i..]
@count()
$.set 'captchas', @captchas
load: ->
return unless @nodes.challenge.firstChild
# -1 minute to give upload some time.
@ -669,6 +708,7 @@ QR =
@nodes.img.src = "//www.google.com/recaptcha/api/image?c=#{challenge}"
@nodes.input.value = null
@clear()
count: ->
count = @captchas.length
@nodes.input.placeholder = switch count
@ -679,11 +719,13 @@ QR =
else
"Verification (#{count} cached captchas)"
@nodes.input.alt = count # For XTRM RICE.
reload: (focus) ->
# the 't' argument prevents the input from being focused
$.globalEval 'Recaptcha.reload("t")'
# Focus if we meant to.
@nodes.input.focus() if focus
keydown: (e) ->
if e.keyCode is 8 and not @nodes.input.value
@reload()
@ -702,26 +744,26 @@ QR =
</div>
<form>
<div class=persona>
<input id=dump-button type=button title='Dump list' value=+>
<input name=name data-name=name title=Name placeholder=Name class=field size=1>
<input name=email data-name=email title=E-mail placeholder=E-mail class=field size=1>
<input name=sub data-name=sub title=Subject placeholder=Subject class=field size=1>
<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 tabindex=10>
<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 tabindex=30>
</div>
<div class=textarea>
<textarea data-name=com title=Comment placeholder=Comment class=field></textarea>
<textarea data-name=com title=Comment placeholder=Comment class=field tabindex=40></textarea>
<span id=char-count></span>
</div>
<div id=dump-list-container>
<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 id=file-n-submit>
<span id=qr-filename-container class=field>
<span id=qr-filename-container class=field tabindex=60>
<span id=qr-no-file>No selected file</span>
<span id=qr-filename></span>
<a id=qr-filerm href=javascript:; title='Remove file'>×</a>
<a id=qr-filerm href=javascript:; title='Remove file' tabindex=80>×</a>
</span>
<input type=submit>
<input type=submit tabindex=70>
</div>
<input type=file multiple>
<div id=qr-thread-select>
@ -730,7 +772,7 @@ QR =
</select>
</div>
<label id=qr-spoiler-label>
<input type=checkbox id=qr-file-spoiler title='Spoiler image'>Spoiler?
<input type=checkbox id=qr-file-spoiler title='Spoiler image' tabindex=90>Spoiler?
</label>
</form>
""".replace />\s+</g, '><' # get rid of spaces between elements
@ -801,7 +843,7 @@ QR =
$.add nodes.threadPar, nodes.thread
QR.resetThreadSelector()
$.on nodes.filename.parentNode, 'click', QR.openFileInput
$.on nodes.filename.parentNode, 'click keyup', QR.openFileInput
$.on nodes.autohide, 'change', QR.toggleHide
$.on nodes.close, 'click', QR.close
@ -818,6 +860,8 @@ QR =
# save selected post's data
for name in ['name', 'email', 'sub', 'com']
$.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.cooldown.init()