From c3cd11afd826a004cac45cb89fa631a29379c97b Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Tue, 24 Jan 2012 15:08:40 +0100 Subject: [PATCH] Indicate upload progress. I really need to refactor $.ajax. --- 4chan_x.user.js | 39 +++++++++++++++++++++++++++++++++------ script.coffee | 29 +++++++++++++++++++++++++---- 2 files changed, 58 insertions(+), 10 deletions(-) diff --git a/4chan_x.user.js b/4chan_x.user.js index 266ba4415..2cce6f03c 100644 --- a/4chan_x.user.js +++ b/4chan_x.user.js @@ -320,10 +320,10 @@ id: function(id) { return d.getElementById(id); }, - ajax: function(url, cb, opts, form) { - var event, headers, key, r, type, val; + ajax: function(url, cb, opts) { + var event, form, headers, key, onprogress, r, type, val; if (opts == null) opts = {}; - type = opts.type, event = opts.event, headers = opts.headers; + type = opts.type, event = opts.event, headers = opts.headers, form = opts.form, onprogress = opts.onprogress; type || (type = 'get'); event || (event = 'onload'); r = new XMLHttpRequest(); @@ -333,6 +333,7 @@ r.setRequestHeader(key, val); } r[event] = cb; + r.upload.onprogress = onprogress; r.send(form); return r; }, @@ -1229,6 +1230,7 @@ i = _ref[_i]; qr.replies[0].rm(); } + qr.status(); qr.resetFileInput(); if ((spoiler = $.id('spoiler')).checked) spoiler.click(); return qr.cleanError(); @@ -1251,6 +1253,17 @@ cleanError: function() { return $('.error', qr.el).textContent = null; }, + status: function(data) { + var disabled, value; + if (g.dead) { + value = 404; + disabled = true; + } else if (data) { + if (data.progress != null) value = "" + data.progress + "%"; + } + qr.status.input.value = value || 'Submit'; + return qr.status.input.disabled = disabled || false; + }, pickThread: function(thread) { return $('select', qr.el).value = thread; }, @@ -1495,7 +1508,7 @@ }); qr.mimeTypes = mimeTypes.split(', '); qr.spoiler = !!$('#com_submit + label'); - qr.el = ui.dialog('qr', 'top:0;right:0;', "
Quick Reply " + (g.REPLY ? '' : threads) + " x
+
Spoiler Image?
"); + qr.el = ui.dialog('qr', 'top:0;right:0;', "
Quick Reply " + (g.REPLY ? '' : threads) + " x
Spoiler Image?
"); if (!g.REPLY) { $.on($('select', qr.el), 'mousedown', function(e) { return e.stopPropagation(); @@ -1525,6 +1538,8 @@ return qr.selected[this.name] = this.value; }); } + qr.status.input = $('[type=submit]', qr.el); + qr.status(); qr.captcha.init(); qr.message.init(); return $.add(d.body, qr.el); @@ -1597,6 +1612,7 @@ }, response: function(html) { var b, persona, reply, sage; + qr.status(); b = $('td b', $.el('a', { innerHTML: html })); @@ -1655,12 +1671,16 @@ var bb, form, i, l, name, ui8a, url, val, _ref; if (data.abort) { if ((_ref = qr.ajax) != null) _ref.abort(); + qr.message.send({ + status: true + }); return; } if (data.response) { qr.response(data.html); return; } + if (data.status) qr.status(data); delete data.qr; if (data.mode === 'regist') { url = "http://sys.4chan.org/" + data.board + "/post?" + (Date.now()); @@ -1687,8 +1707,15 @@ html: this.response }); }), { - type: 'post' - }, form); + type: 'post', + form: form, + onprogress: function(e) { + return qr.message.send({ + status: true, + progress: Math.floor(e.loaded / e.total * 100) + }); + } + }); } } } diff --git a/script.coffee b/script.coffee index a7adeeae5..18acbd8a7 100644 --- a/script.coffee +++ b/script.coffee @@ -229,8 +229,8 @@ $.extend $, $.on d, 'DOMContentLoaded', cb id: (id) -> d.getElementById id - ajax: (url, cb, opts={}, form) -> - {type, event, headers} = opts + ajax: (url, cb, opts={}) -> + {type, event, headers, form, onprogress} = opts type or= 'get' event or= 'onload' r = new XMLHttpRequest() @@ -238,6 +238,7 @@ $.extend $, for key, val of headers r.setRequestHeader key, val r[event] = cb + r.upload.onprogress = onprogress r.send form r cache: (url, cb) -> @@ -888,6 +889,7 @@ qr = $.removeClass qr.el, 'dump' for i in qr.replies qr.replies[0].rm() + qr.status() qr.resetFileInput() spoiler.click() if (spoiler = $.id 'spoiler').checked qr.cleanError() @@ -905,6 +907,16 @@ qr = cleanError: -> $('.error', qr.el).textContent = null + status: (data) -> + if g.dead + value = 404 + disabled = true + else if data + if data.progress? + value = "#{data.progress}%" + qr.status.input.value = value or 'Submit' + qr.status.input.disabled = disabled or false + pickThread: (thread) -> $('select', qr.el).value = thread @@ -1115,7 +1127,7 @@ qr =
-
+
Spoiler Image?
" @@ -1139,6 +1151,8 @@ qr = # if match = e.key.match /qr_(.+)$/ # qr.inputs[match[1]].value = JSON.parse e.newValue + qr.status.input = $ '[type=submit]', qr.el + qr.status() qr.captcha.init() qr.message.init() $.add d.body, qr.el @@ -1213,6 +1227,7 @@ qr = qr.message.send post response: (html) -> + qr.status() b = $ 'td b', $.el('a', innerHTML: html) if b.childElementCount # error! qr.error b.firstChild.data @@ -1266,10 +1281,13 @@ qr = receive: (data) -> if data.abort qr.ajax?.abort() + qr.message.send status: true return if data.response # xhr response qr.response data.html return + if data.status + qr.status data delete data.qr if data.mode is 'regist' # reply object: we're posting # fool CloudFlare's cache to hopefully avoid connection errors @@ -1290,7 +1308,10 @@ qr = delete data.upfile for name, val of data form.append name, val if val - qr.ajax = $.ajax url, (-> qr.message.send response: true, html: @response), type: 'post', form + qr.ajax = $.ajax url, (-> qr.message.send response: true, html: @response), + type: 'post', + form: form, + onprogress: (e) -> qr.message.send status: true, progress: Math.floor e.loaded / e.total * 100 options = init: ->