diff options
Diffstat (limited to 'view/js')
-rw-r--r-- | view/js/main.js | 38 | ||||
-rw-r--r-- | view/js/mod_cloud.js | 115 | ||||
-rw-r--r-- | view/js/mod_import_progress.js | 54 | ||||
-rw-r--r-- | view/js/mod_photos.js | 280 |
4 files changed, 216 insertions, 271 deletions
diff --git a/view/js/main.js b/view/js/main.js index 476e78056..d3f4eff9a 100644 --- a/view/js/main.js +++ b/view/js/main.js @@ -1457,35 +1457,21 @@ function preview_post() { } function bin2hex(s) { - // Converts the binary representation of data to hex - // - // version: 812.316 - // discuss at: http://phpjs.org/functions/bin2hex - // + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) - // + bugfixed by: Onno Marsman - // + bugfixed by: Linuxworld - // * example 1: bin2hex('Kev'); - // * returns 1: '4b6576' - // * example 2: bin2hex(String.fromCharCode(0x00)); - // * returns 2: '00' - var v,i, f = 0, a = []; - s += ''; - f = s.length; - - for (i = 0; i<f; i++) { - a[i] = s.charCodeAt(i).toString(16).replace(/^([\da-f])$/,"0$1"); - } - - return a.join(''); + // UTF-8 encoding to hex is supported + var bytes = new TextEncoder().encode(s); + return Array.from( + bytes, + byte => byte.toString(16).padStart(2, "0") + ).join(""); } function hex2bin(hex) { - var bytes = [], str; - - for(var i=0; i< hex.length-1; i+=2) - bytes.push(parseInt(hex.substr(i, 2), 16)); - - return String.fromCharCode.apply(String, bytes); + // UTF-8 decoding from hex is supported + var bytes = new Uint8Array(hex.length / 2); + for (i = 0; i !== bytes.length; i++) { + bytes[i] = parseInt(hex.substr(i * 2, 2), 16); + } + return new TextDecoder().decode(bytes); } function groupChangeMember(gid, cid, sec_token) { diff --git a/view/js/mod_cloud.js b/view/js/mod_cloud.js index 928ce8689..1f444e4fe 100644 --- a/view/js/mod_cloud.js +++ b/view/js/mod_cloud.js @@ -402,74 +402,85 @@ $(document).ready(function () { function UploadInit() { var submit = $("#upload-submit"); - var count = 1; + var idx = 0; var filedrag = $(".cloud-index.attach-drop"); + var reload = false; $('#invisible-cloud-file-upload').fileupload({ - url: 'file_upload', - dataType: 'json', - dropZone: filedrag, - maxChunkSize: 4 * 1024 * 1024, - - add: function(e,data) { - $(data.files).each( function() { this.count = ++ count; prepareHtml(this); }); - - var allow_cid = ($('#ajax-upload-files').data('allow_cid') || []); - var allow_gid = ($('#ajax-upload-files').data('allow_gid') || []); - var deny_cid = ($('#ajax-upload-files').data('deny_cid') || []); - var deny_gid = ($('#ajax-upload-files').data('deny_gid') || []); - - $('.acl-field').remove(); - - $(allow_gid).each(function(i,v) { - $('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='group_allow[]' value='"+v+"'>"); - }); - $(allow_cid).each(function(i,v) { - $('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='contact_allow[]' value='"+v+"'>"); - }); - $(deny_gid).each(function(i,v) { - $('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='group_deny[]' value='"+v+"'>"); - }); - $(deny_cid).each(function(i,v) { - $('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='contact_deny[]' value='"+v+"'>"); - }); - - data.formData = $('#ajax-upload-files').serializeArray(); - data.submit(); - }, - + url: 'file_upload', + dataType: 'json', + dropZone: filedrag, + maxChunkSize: 4 * 1024 * 1024, + add: function(e,data) { - progress: function(e,data) { + idx++; + data.files[0].idx = idx; + prepareHtml(data.files[0]); - // there will only be one file, the one we are looking for + var allow_cid = ($('#ajax-upload-files').data('allow_cid') || []); + var allow_gid = ($('#ajax-upload-files').data('allow_gid') || []); + var deny_cid = ($('#ajax-upload-files').data('deny_cid') || []); + var deny_gid = ($('#ajax-upload-files').data('deny_gid') || []); - $(data.files).each( function() { - var idx = this.count; + $('.acl-field').remove(); - // Dynamically update the percentage complete displayed in the file upload list - $('#upload-progress-' + idx).html(Math.round(data.loaded / data.total * 100) + '%'); - $('#upload-progress-bar-' + idx).css('background-size', Math.round(data.loaded / data.total * 100) + '%'); + $(allow_gid).each(function(i,v) { + $('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='group_allow[]' value='"+v+"'>"); + }); + $(allow_cid).each(function(i,v) { + $('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='contact_allow[]' value='"+v+"'>"); + }); + $(deny_gid).each(function(i,v) { + $('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='group_deny[]' value='"+v+"'>"); + }); + $(deny_cid).each(function(i,v) { + $('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='contact_deny[]' value='"+v+"'>"); + }); - }); + data.formData = $('#ajax-upload-files').serializeArray(); + // trick it into not uploadiong all files at once + $('#new-upload-' + data.files[0].idx).one('fileupload_trigger', function () { + data.submit(); + }); - }, + $('#new-upload-1').trigger('fileupload_trigger'); + }, - stop: function(e,data) { - window.location.href = window.location.href; + progress: function(e,data) { + var id = data.files[0].idx; + if(data.loaded == data.total) { + if(id == data.originalFiles.length) { + reload = true; + } + else { + // trigger uploading the next file + var next_id = id + 1; + setTimeout(function(){ $('#new-upload-' + next_id).trigger('fileupload_trigger'); }, 1000); + } } - }); + // Dynamically update the percentage complete displayed in the file upload list + $('#upload-progress-' + id).html(Math.round(data.loaded / data.total * 100) + '%'); + $('#upload-progress-bar-' + id).css('width', Math.round(data.loaded / data.total * 100) + '%'); - $('#upload-submit').click(function(event) { event.preventDefault(); $('#invisible-cloud-file-upload').trigger('click'); return false;}); + }, -} + stop: function(e,data) { + if(reload) { + console.log('Upload completed'); + window.location.href = window.location.href; + } + } + }); + $('#upload-submit').click(function(event) { event.preventDefault(); $('#invisible-cloud-file-upload').trigger('click');}); +} function prepareHtml(f) { - var num = f.count - 1; - var i = f.count; + var num = f.idx - 1; + var i = f.idx; $('#cloud-index #new-upload-progress-bar-' + num.toString()).after( '<tr id="new-upload-' + i + '" class="new-upload">' + '<td></td>' + @@ -479,7 +490,11 @@ function prepareHtml(f) { '<td class="d-none d-md-table-cell">' + formatSizeUnits(f.size) + '</td><td class="d-none d-md-table-cell"></td>' + '</tr>' + '<tr id="new-upload-progress-bar-' + i + '" class="new-upload">' + - '<td id="upload-progress-bar-' + i + '" colspan="9" class="upload-progress-bar"></td>' + + '<td colspan="9" class="upload-progress-bar">' + + '<div class="progress" style="height: 1px;">' + + '<div id="upload-progress-bar-' + i + '" class="progress-bar bg-info" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>' + + '</div>' + + '</td>' + '</tr>' ); } diff --git a/view/js/mod_import_progress.js b/view/js/mod_import_progress.js new file mode 100644 index 000000000..7aed56365 --- /dev/null +++ b/view/js/mod_import_progress.js @@ -0,0 +1,54 @@ +$(document).ready(function() { + setInterval(get_progress, 5000); + + function get_progress(){ + $.get('import_progress', function(data) { + update_progress(data); + }); + } + + function update_progress(data){ + + // items + if (typeof data.cprogress == 'number') { + $('#cprogress-label').html(data.cprogress + '%'); + $('#cprogress-bar').css('width', data.cprogress + '%'); + + if (data.cprogress == 100) { + $('#cprogress-resume').addClass('d-none'); + $('#cprogress-completed').removeClass('d-none'); + $('#cprogress-bar').removeClass('progress-bar-animated'); + } + else if (data.cprogress < 100) { + $('#cprogress-resume').removeClass('d-none'); + $('#cprogress-completed').addClass('d-none'); + $('#cprogress-bar').addClass('progress-bar-animated'); + } + } + else { + $('#cprogress-label').html(data.cprogress); + $('#cprogress-bar').css('width', '0%'); + } + + // files + if (typeof data.fprogress == 'number') { + $('#fprogress-label').html(data.fprogress + '%'); + $('#fprogress-bar').css('width', data.fprogress + '%'); + + if (data.fprogress == 100) { + $('#fprogress-resume').addClass('d-none'); + $('#fprogress-completed').removeClass('d-none'); + $('#fprogress-bar').removeClass('progress-bar-animated'); + } + else if (data.fprogress < 100) { + $('#fprogress-resume').removeClass('d-none'); + $('#fprogress-completed').addClass('d-none'); + $('#fprogress-bar').addClass('progress-bar-animated'); + } + } + else { + $('#fprogress-label').html(data.fprogress); + $('#fprogress-bar').css('width', '0%'); + } + } +}); diff --git a/view/js/mod_photos.js b/view/js/mod_photos.js index 1ce410a1b..c487fc417 100644 --- a/view/js/mod_photos.js +++ b/view/js/mod_photos.js @@ -20,151 +20,101 @@ function UploadInit() { var fileselect = $("#photos-upload-choose"); var filedrag = $("#photos-upload-form"); var submit = $("#dbtn-submit"); - var count = 1; - - $('#invisible-photos-file-upload').fileupload({ - url: 'photos/' + nickname, - dataType: 'json', - dropZone: filedrag, - maxChunkSize: 4 * 1024 * 1024, - - add: function(e,data) { - $(data.files).each( function() { this.count = ++ count; prepareHtml(this); }); - - var allow_cid = ($('#photos-upload-form').data('allow_cid') || []); - var allow_gid = ($('#photos-upload-form').data('allow_gid') || []); - var deny_cid = ($('#photos-upload-form').data('deny_cid') || []); - var deny_gid = ($('#photos-upload-form').data('deny_gid') || []); - - $('.acl-field').remove(); - - $(allow_gid).each(function(i,v) { - $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='group_allow[]' value='"+v+"'>"); - }); - $(allow_cid).each(function(i,v) { - $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='contact_allow[]' value='"+v+"'>"); - }); - $(deny_gid).each(function(i,v) { - $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='group_deny[]' value='"+v+"'>"); - }); - $(deny_cid).each(function(i,v) { - $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='contact_deny[]' value='"+v+"'>"); - }); - - data.formData = $('#photos-upload-form').serializeArray(); - - data.submit(); - }, - - progress: function(e,data) { - - // there will only be one file, the one we are looking for - - $(data.files).each( function() { - var idx = this.count; - - // Dynamically update the percentage complete displayed in the file upload list - $('#upload-progress-' + idx).html(Math.round(data.loaded / data.total * 100) + '%'); - $('#upload-progress-bar-' + idx).css('background-size', Math.round(data.loaded / data.total * 100) + '%'); - - }); - - - }, - - - stop: function(e,data) { - window.location.href = window.location.href; - } - - }); - - $('#dbtn-submit').click(function(event) { event.preventDefault(); $('#invisible-photos-file-upload').trigger('click'); return false;}); - - - - - // is XHR2 available? -// var xhr = new XMLHttpRequest(); -// if (xhr.upload) { - - // file select -// fileselect.attr("multiple", 'multiple'); -// fileselect.on("change", UploadFileSelectHandler); - - // file submit -// submit.on("click", fileselect, UploadFileSelectHandler); + var idx = 0; + var reload = false; + + + $('#invisible-photos-file-upload').fileupload({ + url: 'photos/' + nickname, + dataType: 'json', + dropZone: filedrag, + maxChunkSize: 4 * 1024 * 1024, + + add: function(e,data) { + + idx++; + data.files[0].idx = idx; + prepareHtml(data.files[0]); + + var allow_cid = ($('#photos-upload-form').data('allow_cid') || []); + var allow_gid = ($('#photos-upload-form').data('allow_gid') || []); + var deny_cid = ($('#photos-upload-form').data('deny_cid') || []); + var deny_gid = ($('#photos-upload-form').data('deny_gid') || []); + + $('.acl-field').remove(); + + $(allow_gid).each(function(i,v) { + $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='group_allow[]' value='"+v+"'>"); + }); + $(allow_cid).each(function(i,v) { + $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='contact_allow[]' value='"+v+"'>"); + }); + $(deny_gid).each(function(i,v) { + $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='group_deny[]' value='"+v+"'>"); + }); + $(deny_cid).each(function(i,v) { + $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='contact_deny[]' value='"+v+"'>"); + }); + + data.formData = $('#photos-upload-form').serializeArray(); + + // trick it into not uploadiong all files at once + $('#new-upload-' + data.files[0].idx).one('fileupload_trigger', function () { + data.submit(); + }); + + $('#new-upload-1').trigger('fileupload_trigger'); + }, + + progress: function(e,data) { + + var id = data.files[0].idx; + if(data.loaded == data.total) { + if(id == data.originalFiles.length) { + reload = true; + } + else { + // trigger uploading the next file + var next_id = id + 1; + setTimeout(function(){ $('#new-upload-' + next_id).trigger('fileupload_trigger'); }, 1000); + } + } + + // Dynamically update the percentage complete displayed in the file upload list + $('#upload-progress-' + id).html(Math.round(data.loaded / data.total * 100) + '%'); + $('#upload-progress-bar-' + id).css('width', Math.round(data.loaded / data.total * 100) + '%'); + }, + + stop: function(e,data) { + if(reload) { + console.log('Upload completed'); + window.location.href = window.location.href; + } + } + }); - // file drop -// filedrag.on("dragover", DragDropUploadFileHover); -// filedrag.on("dragleave", DragDropUploadFileHover); -// filedrag.on("drop", DragDropUploadFileSelectHandler); -// } + $('#dbtn-submit').click(function(event) { event.preventDefault(); $('#invisible-photos-file-upload').trigger('click'); return false;}); -// window.filesToUpload = 0; -// window.fileUploadsCompleted = 0; } -// file drag hover -function DragDropUploadFileHover(e) { - e.stopPropagation(); - e.preventDefault(); - e.currentTarget.className = (e.type == "dragover" ? "hover" : ""); -} - -// file selection via drag/drop -function DragDropUploadFileSelectHandler(e) { - // cancel event and hover styling - DragDropUploadFileHover(e); - - // fetch FileList object - var files = e.target.files || e.originalEvent.dataTransfer.files; - - $('.new-upload').remove(); - - // process all File objects - for (var i = 0, f; f = files[i]; i++) { - prepareHtml(f, i); - UploadFile(f, i); - } -} - -// file selection via input -function UploadFileSelectHandler(e) { - // fetch FileList object - if(e.target.id === 'dbtn-submit') { - e.preventDefault(); - var files = e.data[0].files; - } - if(e.target.id === 'photos-upload-choose') { - $('.new-upload').remove(); - var files = e.target.files; - } - - // process all File objects - for (var i = 0, f; f = files[i]; i++) { - if(e.target.id === 'photos-upload-choose') - prepareHtml(f, i); - if(e.target.id === 'dbtn-submit') { - UploadFile(f, i); - } - } -} function prepareHtml(f) { - - var num = f.count - 1; - var i = f.count; - + var num = f.idx - 1; + var i = f.idx; $('#upload-index #new-upload-progress-bar-' + num.toString()).after( '<tr id="new-upload-' + i + '" class="new-upload">' + - '<td width="1%"><i class="fa ' + getIconFromType(f.type) + '" title="' + f.type + '"></i></td>' + - '<td width="96%">' + f.name + '</td>' + - '<td id="upload-progress-' + i + '" width="1%"></td>' + - '<td class="d-none d-md-table-cell" width="1%">' + formatSizeUnits(f.size) + '</td>' + + '<td></td>' + + '<td><i class="fa fa-fw ' + getIconFromType(f.type) + '" title="' + f.type + '"></i></td>' + + '<td>' + f.name + '</td>' + + '<td id="upload-progress-' + i + '"></td><td></td><td></td>' + + '<td class="d-none d-md-table-cell">' + formatSizeUnits(f.size) + '</td><td class="d-none d-md-table-cell"></td>' + '</tr>' + '<tr id="new-upload-progress-bar-' + i + '" class="new-upload">' + - '<td id="upload-progress-bar-' + i + '" colspan="4" class="upload-progress-bar"></td>' + + '<td colspan="8" class="upload-progress-bar">' + + '<div class="progress" style="height: 1px;">' + + '<div id="upload-progress-bar-' + i + '" class="progress-bar bg-info" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>' + + '</div>' + + '</td>' + '</tr>' ); } @@ -224,63 +174,3 @@ function getIconFromType(type) { return iconFromType; } - -// upload files -function UploadFile(file, idx) { - - window.filesToUpload = window.filesToUpload + 1; - - var xhr = new XMLHttpRequest(); - - xhr.withCredentials = true; // Include the SESSION cookie info for authentication - - (xhr.upload || xhr).addEventListener('progress', function (e) { - - var done = e.position || e.loaded; - var total = e.totalSize || e.total; - // Dynamically update the percentage complete displayed in the file upload list - $('#upload-progress-' + idx).html(Math.round(done / total * 100) + '%'); - $('#upload-progress-bar-' + idx).css('background-size', Math.round(done / total * 100) + '%'); - - if(done == total) { - $('#upload-progress-' + idx).html('Processing...'); - } - - }); - - - xhr.addEventListener('load', function (e) { - //we could possibly turn the filenames to real links here and add the delete and edit buttons to avoid page reload... - $('#upload-progress-' + idx).html('Ready!'); - - //console.log('xhr upload complete', e); - window.fileUploadsCompleted = window.fileUploadsCompleted + 1; - - // When all the uploads have completed, refresh the page - if (window.filesToUpload > 0 && window.fileUploadsCompleted === window.filesToUpload) { - - window.fileUploadsCompleted = window.filesToUpload = 0; - - // After uploads complete, refresh browser window to display new files - window.location.href = window.location.href; - } - }); - - - xhr.addEventListener('error', function (e) { - $('#upload-progress-' + idx).html('<span style="color: red;">ERROR</span>'); - }); - - // POST to the entire cloud path - xhr.open('post', $('#photos-upload-form').attr( 'action' ), true); - - var formfields = $("#photos-upload-form").serializeArray(); - - var data = new FormData(); - $.each(formfields, function(i, field) { - data.append(field.name, field.value); - }); - data.append('userfile', file); - - xhr.send(data); -} |