diff options
author | Yorhel <git@yorhel.nl> | 2009-10-04 15:02:00 +0200 |
---|---|---|
committer | Yorhel <git@yorhel.nl> | 2009-10-04 15:02:00 +0200 |
commit | d703d1dd64ffcf6af82b2747388a1001228ec30f (patch) | |
tree | 6d00e25506b49b0dd691e6c6c2f6f331c41069e9 | |
parent | 6c2b8498c9c9b828337e8adc6f1f873408b40d81 (diff) |
JS: Moved and rewrote VN screenshot uploader
Works pretty much the same as the old version.
-rw-r--r-- | data/style.css | 1 | ||||
-rw-r--r-- | static/f/forms.js | 254 | ||||
-rw-r--r-- | static/f/script.js | 256 |
3 files changed, 252 insertions, 259 deletions
diff --git a/data/style.css b/data/style.css index 06b68833..d09c7060 100644 --- a/data/style.css +++ b/data/style.css @@ -765,6 +765,7 @@ a.addnew { #scr_table td { height: 108px; border-top: 1px solid #258; padding: 0; padding-right: 5px } #scr_table td.thumb { width: 136px; vertical-align: middle } #scr_table select { width: 400px; } +div.scr_uploader { visibility: hidden; overflow: hidden; width: 1px; height: 1px; position: absolute; left: -500px; top: -500px; } diff --git a/static/f/forms.js b/static/f/forms.js index 7fdcadf5..d490b0d8 100644 --- a/static/f/forms.js +++ b/static/f/forms.js @@ -5,258 +5,6 @@ function qq(v) { - /*********************************\ - * V N S C R E E N S H O T S * - \*********************************/ - - -var scrRel = [ [ 0, '-- select release --' ] ]; -var scrStaticURL; -function scrLoad() { - // load the releases - scrStaticURL = x('scr_rel').className; - var l = x('scr_rel').options; - for(var i=0;i<l.length;i++) - scrRel[i+1] = [ l[i].value, l[i].text ]; - x('scr_rel').parentNode.removeChild(x('scr_rel')); - - // load the current screenshots - l = x('screenshots').value.split(' '); - for(i=0;i<l.length;i++) - if(l[i].length > 2) { - var r = l[i].split(','); - scrAdd(r[0], r[1], r[2]); - } - scrLast(); - scrCheckStatus(); - - scrSetSubmit(); -} - -// give an error when submitting the form while still uploading an image -function scrSetSubmit() { - var o=x('screenshots'); - while(o.nodeName.toLowerCase() != 'form') - o = o.parentNode; - oldfunc = o.onsubmit; - o.onsubmit = function() { - var c=0;var r=0; - var l = x('scr_table').getElementsByTagName('tr'); - for(var i=0;i<l.length-1;i++) { - if(l[i].scrStatus > 0) - c=1; - else if(l[i].getElementsByTagName('select')[0].selectedIndex == 0) - r=1; - } - if(c) { - alert('Please wait for the screenshots to be uploaded before submitting the form.'); - return false; - } else if(r) { - alert('Please select the appropriate release for every screenshot'); - return false; - } else if(oldfunc) - return oldfunc(); - }; -} - - -function scrURL(id, t) { - return scrStaticURL+'/s'+t+'/'+(id%100<10?'0':'')+(id%100)+'/'+id+'.jpg'; -} - -function scrAdd(id, nsfw, rel) { - var tr = document.createElement('tr'); - tr.scrId = id; - tr.scrStatus = id ? 2 : 1; // 0: done, 1: uploading, 2: waiting for thumbnail - tr.scrRel = rel; - tr.scrNSFW = nsfw; - - var td = document.createElement('td'); - td.className = 'thumb'; - td.innerHTML = 'loading...'; - tr.appendChild(td); - - td = document.createElement('td'); - if(id) - td.innerHTML = '<b>Generating thumbnail...</b><br />' - +'Note: if this takes longer than 30 seconds, there\'s probably something wrong on our side.' - +'Please try again later or report a bug if that is the case.'; - else - td.innerHTML = '<b>Uploading screenshot...</b><br />' - +'This can take a while, depending on the file size and your upload speed.<br />' - +'<a href="#" onclick="return scrDel(this)">cancel</a>'; - tr.appendChild(td); - - x('scr_table').appendChild(tr); - scrStripe(); - return tr; -} - -function scrLast() { - if(x('scr_last')) - x('scr_table').removeChild(x('scr_last')); - var full = x('scr_table').getElementsByTagName('tr').length >= 10; - - var tr = document.createElement('tr'); - tr.setAttribute('id', 'scr_last'); - - var td = document.createElement('td'); - td.className = 'thumb'; - tr.appendChild(td); - - var td = document.createElement('td'); - if(full) - td.innerHTML = '<b>Enough screenshots</b><br />' - +'The limit of 10 screenshots per visual novel has been reached. ' - +'If you want to add a new screenshot, please remove an existing one first.'; - else - td.innerHTML = '<b>Add screenshot</b><br />' - +'Image must be smaller than 5MB and in PNG or JPEG format.<br />' - +'<input name="scr_upload" id="scr_upload" type="file" class="text" /><br />' - +'<input type="button" value="Upload!" class="submit" onclick="scrUpload()" />'; - - tr.appendChild(td); - x('scr_table').appendChild(tr); - scrStripe(); -} - -function scrStripe() { - var l = x('scr_table').getElementsByTagName('tr'); - for(var i=0;i<l.length;i++) - l[i].className = i%2==0 ? 'odd' : ''; -} - -function scrCheckStatus() { - var ids = ''; - var l = x('scr_table').getElementsByTagName('tr'); - for(var i=0;i<l.length-1;i++) - if(l[i].scrStatus == 2) - ids += (ids ? ';' : '?')+'id='+l[i].scrId; - if(!ids) - return setTimeout(scrCheckStatus, 1000); - - var ti = setTimeout(scrCheckStatus, 10000); - ajax('/xml/screenshots.xml'+ids, function(hr) { - var ls = hr.responseXML.getElementsByTagName('item'); - var l = x('scr_table').getElementsByTagName('tr'); - var tr; - for(var s=0;s<ls.length;s++) { - for(i=0;i<l.length-1;i++) - if(l[i].scrId == ls[s].getAttribute('id') && ls[s].getAttribute('processed') == "1") - tr = l[i]; - if(!tr) - continue; - - tr.scrStatus = 0; - tr.getElementsByTagName('td')[0].innerHTML = - '<a href="'+scrURL(tr.scrId, 'f')+'" rel="iv:'+ls[s].getAttribute('width')+'x'+ls[s].getAttribute('height')+':edit">' - +'<img src="'+scrURL(tr.scrId, 't')+'" style="margin: 0; padding: 0; border: 0" /></a>'; - - var opt=''; - for(var o=0;o<scrRel.length;o++) - opt += '<option value="'+scrRel[o][0]+'"'+(tr.scrRel && tr.scrRel == scrRel[o][0] ? ' selected="selected"' : '')+'>'+scrRel[o][1]+'</option>'; - - tr.getElementsByTagName('td')[1].innerHTML = '<b>Screenshot #'+tr.scrId+'</b>' - +' (<a href="#" onclick="return scrDel(this)">remove</a>)<br />' - +'Full size: '+ls[s].getAttribute('width')+'x'+ls[s].getAttribute('height')+'<br /><br />' - +'<input type="checkbox" onclick="scrSerialize()" id="scr_ser_'+tr.scrId+'" name="scr_ser_'+tr.scrId+'"' - +' '+(tr.scrNSFW > 0 ? 'checked = "checked"' : '')+' />' - +'<label for="scr_ser_'+tr.scrId+'">This screenshot is NSFW</label><br />' - +'<select onchange="scrSerialize()">'+opt+'</select>'; - } - scrSerialize(); - ivInit(); - clearTimeout(ti); - setTimeout(scrCheckStatus, 1000); - }); -} - -function scrDel(what) { - while(what.nodeName.toLowerCase() != 'tr') - what = what.parentNode; - what.scrStatus = 3; - x('scr_table').removeChild(what); - scrSerialize(); - scrLast(); - return false; -} - -var scrUplNr=0; -function scrUpload() { - scrUplNr++; - - // create temporary form - var d = document.createElement('div'); - d.style.cssText = 'visibility: hidden; overflow: hidden; width: 1px; height: 1px; position: absolute; left: -500px; top: -500px'; - d.innerHTML = '<iframe id="scr_upl_'+scrUplNr+'" name="scr_upl_'+scrUplNr+'" style="height: 0px; width: 0px; visibility: hidden"' - +' src="about:blank" onload="scrUploadComplete(this)"></iframe>' - +'<form method="post" action="/xml/screenshots.xml" target="scr_upl_'+scrUplNr+'" enctype="multipart/form-data" id="scr_frm_'+scrUplNr+'"></form>'; - document.body.appendChild(d); - - // submit form and delete it - d = x('scr_frm_'+scrUplNr); - d.appendChild(x('scr_upload')); - d.submit(); - d.parentNode.removeChild(d); - - d = scrAdd(0, 0, 0); - x('scr_upl_'+scrUplNr).theTR = d; - scrLast(); - - return false; -} - -function scrUploadComplete(what) { - var f = window.frames[what.id]; - if(f.location.href.indexOf('screenshots') < 0) - return; - - var tr = what.theTR; - if(!tr || tr.scrStatus == 3) - return; - - try { - tr.scrId = f.window.document.getElementsByTagName('image')[0].getAttribute('id'); - } catch(e) { - tr.scrId = -10; - } - if(tr.scrId < 0) { - alert( - tr.scrId == -10 ? - 'Oops! Seems like something went wrong...\n' - +'Make sure the file you\'re uploading doesn\'t exceed 5MB in size.\n' - +'If that isn\'t the problem, then please report a bug.' : - tr.scrId == -1 ? - 'Upload failed!\nOnly JPEG or PNG images are accepted.' : - 'Upload failed!\nNo file selected, or an empty file?' - ); - return scrDel(tr); - } - - tr.scrStatus = 2; - tr.getElementsByTagName('td')[1].innerHTML = - '<b>Generating thumbnail...</b><br />' - +'Note: if this takes longer than 30 seconds, there\'s probably something wrong on our side.' - +'Please try again later or report a bug if that is the case.'; - - // remove the <div> in a timeout, otherwise some browsers think the page is still loading - setTimeout(function() { document.body.removeChild(what.parentNode) }, 100); -} - -function scrSerialize() { - var r = ''; - var l = x('scr_table').getElementsByTagName('tr'); - for(var i=0;i<l.length-1;i++) - if(l[i].scrStatus == 0) - r += (r ? ' ' : '') + l[i].scrId + ',' - + (l[i].getElementsByTagName('input')[0].checked ? 1 : 0) + ',' - + scrRel[l[i].getElementsByTagName('select')[0].selectedIndex][0]; - x('screenshots').value = r; -} - - - - /****************************************************\ * V I S U A L N O V E L S / P R O D U C E R S * \****************************************************/ @@ -508,8 +256,6 @@ function tglSerialize() { // load -if(x('jt_box_vn_scr')) - scrLoad(); if(x('jt_box_rel_vn')) vnpLoad('vn'); if(x('jt_box_rel_prod')) diff --git a/static/f/script.js b/static/f/script.js index 31225a6c..a6c5499c 100644 --- a/static/f/script.js +++ b/static/f/script.js @@ -81,7 +81,7 @@ function tag() { if(attr == 'style') el.setAttribute(attr, arguments[i][attr]); else - el[ attr == 'class' ? 'className' : attr ] = arguments[i][attr]; + el[ attr == 'class' ? 'className' : attr == 'for' ? 'htmlFor' : attr ] = arguments[i][attr]; } } else el.appendChild(tag(arguments[i])); @@ -96,9 +96,10 @@ function addBody(el) { else if(document.appendChild) document.appendChild(el); } -function setContent(el, content) { - setText(el, ''); - el.appendChild(content); +function setContent() { + setText(arguments[0], ''); + for(var i=1; i<arguments.length; i++) + arguments[0].appendChild(tag(arguments[i])); } function getText(obj) { return obj.textContent || obj.innerText || ''; @@ -182,7 +183,7 @@ function ivView(what) { var ol = byName('a'); var l=[]; for(i=0;i<ol.length;i++) - if(ol[i].rel.substr(0,3) == 'iv:' && ol[i].rel.indexOf(':'+opt[2]) > 4 && !hasClass(l[i], 'hidden') && ol[i].id != 'ivprev' && ol[i].id != 'ivnext') + if(ol[i].rel.substr(0,3) == 'iv:' && ol[i].rel.indexOf(':'+opt[2]) > 4 && !hasClass(ol[i], 'hidden') && ol[i].id != 'ivprev' && ol[i].id != 'ivnext') l[l.length] = ol[i]; for(i=0;i<l.length;i++) if(l[i].href == u) { @@ -876,6 +877,251 @@ if(byId('jt_box_rel_format')) +/* V I S U A L N O V E L S C R E E N S H O T U P L O A D E R (/v+/edit) */ + +var scrRel = [ [ 0, '-- select release --' ] ]; +var scrStaticURL; +var scrUplNr = 0; + +function scrLoad() { + // get scrRel and scrStaticURL + var rel = byId('scr_rel'); + scrStaticURL = rel.className; + for(var i=0; i<rel.options.length; i++) + scrRel[scrRel.length] = [ rel.options[i].value, getText(rel.options[i]) ]; + rel.parentNode.removeChild(rel); + + // load the current screenshots + var scr = byId('screenshots').value.split(' '); + for(i=0; i<scr.length && scr[i].length>1; i++) { + var r = scr[i].split(','); + scrAdd(r[0], r[1], r[2]); + } + + scrLast(); + scrCheckStatus(); + scrSetSubmit(); +} + +function scrSetSubmit() { + var frm = byId('screenshots'); + while(frm.nodeName.toLowerCase() != 'form') + frm = frm.parentNode; + oldfunc = frm.onsubmit; + frm.onsubmit = function() { + var loading = 0; + var norelease = 0; + var l = byName(byId('scr_table'), 'tr'); + for(var i=0; i<l.length-1; i++) { + if(l[i].scr_status > 0) + loading = 1; + else if(byName(l[i], 'select')[0].selectedIndex == 0) + norelease = 1; + } + if(loading) { + alert('Please wait for the screenshots to be uploaded before submitting the form.'); + return false; + } else if(norelease) { + alert('Please select the appropriate release for every screenshot'); + return false; + } else if(oldfunc) + return oldfunc(); + }; +} + +function scrURL(id, t) { + return scrStaticURL+'/s'+t+'/'+(id%100<10?'0':'')+(id%100)+'/'+id+'.jpg'; +} + +function scrAdd(id, nsfw, rel) { + // tr.scr_status = 0: done, 1: uploading, 2: waiting for thumbnail, 3: deleted + + var tr = tag('tr', { id:'scr_tr_'+id, scr_id: id, scr_status: id?2:1, scr_rel: rel, scr_nsfw: nsfw}, + tag('td', { class: 'thumb'}, 'loading...'), + tag('td', + tag('b', id ? 'Fetching thumbnail...' : 'Uploading screenshot'), + tag('br', null), + id ? null : 'This can take a while, depending on the file size and your upload speed.', + tag('br', null), + id ? null : tag('a', {href:'#', onclick:scrDel}, 'cancel') + ) + ); + byId('scr_table').appendChild(tr); + scrStripe(); + return tr; +} + +function scrLast() { + if(byId('scr_last')) + byId('scr_table').removeChild(byId('scr_last')); + var full = byName(byId('scr_table'), 'tr').length >= 10; + + byId('scr_table').appendChild(tag('tr', {id:'scr_last'}, + tag('td', {class: 'thumb'}), + full ? tag('td', + tag('b', 'Enough screenshots'), + tag('br', null), + 'The limit of 10 screenshots per visual novel has been reached. ', + 'If you want to add a new screenshot, please remove an existing one first.' + ) : tag('td', + tag('b', 'Add screenshot'), + tag('br', null), + 'Image must be smaller than 5MB and in PNG or JPEG format.', + tag('br', null), + tag('input', {name:'scr_upload', id:'scr_upload', type:'file', class:'text'}), + tag('br', null), + tag('input', {type:'button', value:'Upload!', class:'submit', onclick:scrUpload}) + ) + )); + scrStripe(); +} + +function scrStripe() { + var l = byName(byId('scr_table'), 'tr'); + for(var i=0; i<l.length; i++) + setClass(l[i], 'odd', i%2==0); +} + +function scrCheckStatus() { + var ids = []; + var trs = byName(byId('scr_table'), 'tr'); + for(var i=0; i<trs.length-1; i++) + if(trs[i].scr_status == 2) + ids[ids.length] = 'id='+trs[i].scr_id; + if(!ids.length) + return setTimeout(scrCheckStatus, 1000); + + var ti = setTimeout(scrCheckStatus, 10000); + ajax('/xml/screenshots.xml?'+ids.join(';'), function(hr) { + var ls = hr.responseXML.getElementsByTagName('item'); + for(var i=0; i<ls.length; i++) { + var tr = byId('scr_tr_'+ls[i].getAttribute('id')); + if(!tr || ls[i].getAttribute('processed') != '1') + continue; + tr.scr_status = 0; // ready + + // image + var dim = ls[i].getAttribute('width')+'x'+ls[i].getAttribute('height'); + setContent(byName(tr, 'td')[0], + tag('a', {href: scrURL(tr.scr_id, 'f'), rel:'iv:'+dim+':edit'}, + tag('img', {src: scrURL(tr.scr_id, 't')}) + ) + ); + + // content + var rel = tag('select', {onchange: scrSerialize, class:'scr_relsel'}); + for(var j=0; j<scrRel.length; j++) + rel.appendChild(tag('option', {value: scrRel[j][0], selected: tr.scr_rel == scrRel[j][0]}, scrRel[j][1])); + var nsfwid = 'scr_sfw_'+tr.scr_id; + setContent(byName(tr, 'td')[1], + tag('b', 'Screenshot #'+tr.scr_id), + ' (', tag('a', {href: '#', onclick:scrDel}, 'remove'), ')', + tag('br', null), + 'Full size: '+dim, + tag('br', null), + tag('br', null), + tag('input', {type:'checkbox', onclick:scrSerialize, id:nsfwid, name:nsfwid, checked: tr.scr_nsfw>0, class:'scr_nsfw'}), + tag('label', {for:nsfwid}, 'This screenshot is NSFW'), + tag('br', null), + rel + ); + } + scrSerialize(); + ivInit(); + clearTimeout(ti); + setTimeout(scrCheckStatus, 1000); + }); +} + +function scrDel(what) { + var tr = what && what.scr_status != null ? what : this; + while(tr.nodeName.toLowerCase() != 'tr') + tr = tr.parentNode; + tr.scr_status = 3; + byId('scr_table').removeChild(tr); + scrSerialize(); + scrLast(); + return false; +} + +function scrUpload() { + scrUplNr++; + + // create temporary form + var ifid = 'scr_upl_'+scrUplNr; + var frm = tag('form', {method: 'post', action:'/xml/screenshots.xml', target: ifid, enctype:'multipart/form-data'}); + var ifr = tag('iframe', {id:ifid, name:ifid, src:'about:blank', onload:scrUploadComplete}); + addBody(tag('div', {class:'scr_uploader'}, ifr, frm)); + + // submit form and delete it + frm.appendChild(byId('scr_upload')); + frm.submit(); + frm.parentNode.removeChild(frm); + ifr.scr_tr = scrAdd(0, 0, 0); + scrLast(); + return false; +} + +function scrUploadComplete() { + var ifr = this; + var fr = window.frames[ifr.id]; + if(fr.location.href.indexOf('screenshots') < 0) + return; + + var tr = ifr.scr_tr; + if(!tr || tr.scr_status == 3) + return; + + try { + tr.scr_id = fr.window.document.getElementsByTagName('image')[0].getAttribute('id'); + } catch(e) { + tr.scr_id = -10; + } + if(tr.scr_id < 0) { + alert( + tr.scr_id == -10 ? + 'Oops! Seems like something went wrong...\n' + +'Make sure the file you\'re uploading doesn\'t exceed 5MB in size.\n' + +'If that isn\'t the problem, then please report a bug.' : + tr.scr_id == -1 ? + 'Upload failed!\nOnly JPEG or PNG images are accepted.' : + 'Upload failed!\nNo file selected, or an empty file?' + ); + return scrDel(tr); + } + + tr.id = 'scr_tr_'+tr.scr_id; + tr.scr_status = 2; + setContent(byName(tr, 'td')[1], + tag('b', 'Generating thumbnail...'), + tag('br', null), + 'Note: if this takes longer than 30 seconds, there\'s probably something wrong on our side. ', + 'Please try again later or report a bug if that is the case.' + ); + + // remove the <div> in a timeout, otherwise some browsers think the page is still loading + setTimeout(function() { ifr.parentNode.parentNode.removeChild(ifr.parentNode) }, 100); +} + +function scrSerialize() { + var r = []; + var l = byName(byId('scr_table'), 'tr'); + for(var i=0; i<l.length-1; i++) + if(l[i].scr_status == 0) + r[r.length] = [ + l[i].scr_id, + byClass(l[i], 'input', 'scr_nsfw')[0].checked ? 1 : 0, + scrRel[byClass(l[i], 'select', 'scr_relsel')[0].selectedIndex][0] + ].join(','); + byId('screenshots').value = r.join(' '); +} + +if(x('jt_box_vn_scr')) + scrLoad(); + + + + /* M I S C S T U F F */ // search box |