From 698cf28faf990801b7c9a61be72e073af8b49f51 Mon Sep 17 00:00:00 2001 From: MichaelDaum Date: Tue, 6 Nov 2018 11:15:58 +0100 Subject: [PATCH] Item14782: moved progress bar into js land Item14781: removed excess /div in metadata.tmpl --- data/System/TopicInteractionPlugin.txt | 15 +- lib/Foswiki/Plugins/TopicInteractionPlugin.pm | 4 +- .../dialog.uncompressed.js | 13 +- .../foswiki.attachments.uncompressed.js | 80 ++++---- .../foswiki.fileupload.uncompressed.js | 157 +++++++++++---- pub/System/TopicInteractionPlugin/i18n/de.js | 1 + pub/System/TopicInteractionPlugin/i18n/en.js | 1 + .../legacy.fileupload.uncompressed.js | 14 +- .../metadata.uncompressed.js | 80 ++++---- .../uploader.uncompressed.css | 6 +- .../uploader.uncompressed.js | 184 +++++++++++++----- templates/metadata.tmpl | 12 +- 12 files changed, 361 insertions(+), 206 deletions(-) diff --git a/data/System/TopicInteractionPlugin.txt b/data/System/TopicInteractionPlugin.txt index 1247023..8aa83ef 100644 --- a/data/System/TopicInteractionPlugin.txt +++ b/data/System/TopicInteractionPlugin.txt @@ -1,4 +1,4 @@ -%META:TOPICINFO{author="ProjectContributor" comment="" date="1540399921" format="1.1" version="1"}% +%META:TOPICINFO{author="ProjectContributor" comment="" date="1541499354" format="1.1" version="1"}% ---+!! %TOPIC% %FORMFIELD{"Description"}% @@ -228,6 +228,7 @@ generates: ---++ Change History %TABLE{columnwidths="7em" tablewidth="100%"}% +| 06 Nov 2018: | removed excess div in templates; moved progress bar into js land | | 24 Oct 2018: | improved "insert link" action; added "create link & hide file" action; performance improvements to other actions | | 05 Mar 2018: | fixed selecting attachments with brackets in its filename | | 16 Feb 2018: | added a legacy uploader to be somewhat backwards compatible to the old plupload just enough to please natedit | @@ -291,9 +292,9 @@ generates: %META:FIELD{name="Repository" title="Repository" value="https://github.com/foswiki/%25TOPIC%25"}% %META:FIELD{name="Support" title="Support" value="Foswiki:Support/%25TOPIC%25"}% %META:FIELD{name="Version" title="Version" value="%25$VERSION%25"}% -%META:FILEATTACHMENT{name="TopicInteractionPluginSnap5.png" attachment="TopicInteractionPluginSnap5.png" attr="" comment="" date="1540399921" size="36218" user="ProjectContributor" version="1"}% -%META:FILEATTACHMENT{name="TopicInteractionPluginSnap4.png" attachment="TopicInteractionPluginSnap4.png" attr="" comment="" date="1540399921" size="45039" user="ProjectContributor" version="1"}% -%META:FILEATTACHMENT{name="TopicInteractionPluginSnap3.png" attachment="TopicInteractionPluginSnap3.png" attr="" comment="" date="1540399921" size="99574" user="ProjectContributor" version="1"}% -%META:FILEATTACHMENT{name="TopicInteractionPluginSnap2.png" attachment="TopicInteractionPluginSnap2.png" attr="" comment="" date="1540399921" size="111026" user="ProjectContributor" version="1"}% -%META:FILEATTACHMENT{name="TopicInteractionPluginSnap1.png" attachment="TopicInteractionPluginSnap1.png" attr="" comment="" date="1540399921" size="16199" user="ProjectContributor" version="1"}% -%META:FILEATTACHMENT{name="LibreOfficeWebDAV.reg" attachment="LibreOfficeWebDAV.reg" attr="" comment="" date="1540399921" moveby="micha" movedto="System.TopicInteractionPlugin.LibreOfficeWebDAV.reg" movedwhen="1470922302" movefrom="Sandbox.OpenToEditTest.LibreOfficeWebDAV.reg" size="1126" user="ProjectContributor" version="1"}% +%META:FILEATTACHMENT{name="TopicInteractionPluginSnap5.png" attachment="TopicInteractionPluginSnap5.png" attr="" comment="" date="1541499354" size="36218" user="ProjectContributor" version="1"}% +%META:FILEATTACHMENT{name="TopicInteractionPluginSnap4.png" attachment="TopicInteractionPluginSnap4.png" attr="" comment="" date="1541499354" size="45039" user="ProjectContributor" version="1"}% +%META:FILEATTACHMENT{name="TopicInteractionPluginSnap3.png" attachment="TopicInteractionPluginSnap3.png" attr="" comment="" date="1541499354" size="99574" user="ProjectContributor" version="1"}% +%META:FILEATTACHMENT{name="TopicInteractionPluginSnap2.png" attachment="TopicInteractionPluginSnap2.png" attr="" comment="" date="1541499354" size="111026" user="ProjectContributor" version="1"}% +%META:FILEATTACHMENT{name="TopicInteractionPluginSnap1.png" attachment="TopicInteractionPluginSnap1.png" attr="" comment="" date="1541499354" size="16199" user="ProjectContributor" version="1"}% +%META:FILEATTACHMENT{name="LibreOfficeWebDAV.reg" attachment="LibreOfficeWebDAV.reg" attr="" comment="" date="1541499354" moveby="micha" movedto="System.TopicInteractionPlugin.LibreOfficeWebDAV.reg" movedwhen="1470922302" movefrom="Sandbox.OpenToEditTest.LibreOfficeWebDAV.reg" size="1126" user="ProjectContributor" version="1"}% diff --git a/lib/Foswiki/Plugins/TopicInteractionPlugin.pm b/lib/Foswiki/Plugins/TopicInteractionPlugin.pm index fbff441..ff5e800 100644 --- a/lib/Foswiki/Plugins/TopicInteractionPlugin.pm +++ b/lib/Foswiki/Plugins/TopicInteractionPlugin.pm @@ -18,8 +18,8 @@ package Foswiki::Plugins::TopicInteractionPlugin; use strict; use warnings; -our $VERSION = '8.00'; -our $RELEASE = '24 Oct 2018'; +our $VERSION = '8.10'; +our $RELEASE = '06 Nov 2018'; our $SHORTDESCRIPTION = 'Improved interaction with attachments and !DataForms'; our $NO_PREFS_IN_TOPIC = 1; our $core; diff --git a/pub/System/TopicInteractionPlugin/dialog.uncompressed.js b/pub/System/TopicInteractionPlugin/dialog.uncompressed.js index adba9c6..42e0f50 100644 --- a/pub/System/TopicInteractionPlugin/dialog.uncompressed.js +++ b/pub/System/TopicInteractionPlugin/dialog.uncompressed.js @@ -24,7 +24,6 @@ As per the GPL, removal of this notice is prohibited. /*eslint-disable no-console */ "use strict"; -var Dialog; (function($) { @@ -34,11 +33,11 @@ var Dialog; }; /* constructor **********************************************************/ - Dialog = function(opts) { + function Dialog(opts) { var self = this; self.opts = $.extend({}, defaults, opts); - }; + } /* shortcut *************************************************************/ Dialog.load = function(opts) { @@ -62,10 +61,10 @@ var Dialog; /* load *****************************************************************/ Dialog.prototype.load = function(params) { - var self = this, + var self = this, opts = $.extend({}, self.opts, params), $dialog = typeof(opts.id) === 'undefined'?undefined:$(opts.id), - data, + data, dfd = $.Deferred(); self.log("called load() opts=",opts); @@ -109,4 +108,8 @@ var Dialog; return dfd.promise(); }; + + // export + window.Dialog = Dialog; + })(jQuery); diff --git a/pub/System/TopicInteractionPlugin/foswiki.attachments.uncompressed.js b/pub/System/TopicInteractionPlugin/foswiki.attachments.uncompressed.js index c3f70ef..64d3002 100644 --- a/pub/System/TopicInteractionPlugin/foswiki.attachments.uncompressed.js +++ b/pub/System/TopicInteractionPlugin/foswiki.attachments.uncompressed.js @@ -21,7 +21,10 @@ As per the GPL, removal of this notice is prohibited. */ +/* global Dialog, window */ + /*eslint-disable no-console */ + "use strict"; (function($) { @@ -38,14 +41,14 @@ As per the GPL, removal of this notice is prohibited. }; /* The actual plugin constructor ****************************************/ - function FoswikiAttachments(elem, opts) { + function FoswikiAttachments(elem, opts) { var self = this; - self.elem = $(elem); - self.opts = $.extend({}, defaults, self.elem.data(), opts); + self.elem = $(elem); + self.opts = $.extend({}, defaults, self.elem.data(), opts); self.log("new FoswikiAttachments opts=",self.opts); - self.init(); - } + self.init(); + } /* logger ***************************************************************/ FoswikiAttachments.prototype.log = function() { @@ -61,7 +64,7 @@ As per the GPL, removal of this notice is prohibited. }; /* init attachments *****************************************************/ - FoswikiAttachments.prototype.init = function () { + FoswikiAttachments.prototype.init = function () { var self = this, tabpane; self.log("called init()"); @@ -144,7 +147,7 @@ As per the GPL, removal of this notice is prohibited. val = $input.val(); if (val === 'none') { val = ''; - } + } self.load({ "showempty": true, "filter": val @@ -197,7 +200,7 @@ As per the GPL, removal of this notice is prohibited. $(this).removeClass("foswikiAttachmentHover"); } ).on("click", function(e) { - var $attachment = $(this), + var $attachment = $(this), id = $attachment.data('id'); if (!$(e.target).is("a,img,i")) { // dont propagate the attachment clicks @@ -242,7 +245,7 @@ As per the GPL, removal of this notice is prohibited. if (extension.match(/mp3|wav/)) { previewType = "audio"; - } else if (extension.match(/flv|swf|mp4|mpe?g|mov|ogg|webm|ogv/)) { + } else if (extension.match(/flv|swf|mp4|mpe?g|mov|ogg|webm|ogv/)) { previewType = "video"; } else if (extension.match(/vsd/)) { previewType = "visio"; @@ -257,7 +260,7 @@ As per the GPL, removal of this notice is prohibited. }); Dialog.load({ - expand: "attachments::previewer::"+previewType, + expand: "attachments::previewer::"+previewType, data: { filename: decodeURIComponent(attachmentOpts.filename) } @@ -277,7 +280,7 @@ As per the GPL, removal of this notice is prohibited. thumbnail = $attachment.find(".foswikiThumbnail").clone().removeClass("foswikiLeft"); Dialog.load({ - id:"#foswikiAttachmentConfirmDelete", + id:"#foswikiAttachmentConfirmDelete", expand:"attachments::confirmdelete", init: function() { var $this = this; @@ -300,7 +303,7 @@ As per the GPL, removal of this notice is prohibited. ev.stopPropagation(); }); - // add button behaviour + // add button behaviour self.elem.find(".foswikiAttachmentPropertiesButton").on("click", function() { var $button = $(this), $attachment = $button.parents(".foswikiAttachment:first"), @@ -308,8 +311,8 @@ As per the GPL, removal of this notice is prohibited. thumbnail = $attachment.find(".foswikiThumbnail").clone().removeClass("foswikiLeft"); Dialog.load({ - id:"#foswikiAttachmentEditor", - expand:"attachments::editor", + id:"#foswikiAttachmentEditor", + expand:"attachments::editor", init: function() { var $this = this; @@ -353,7 +356,7 @@ As per the GPL, removal of this notice is prohibited. thumbnail = $attachment.find(".foswikiThumbnail").clone().removeClass("foswikiLeft"); Dialog.load({ - id: "#foswikiAttachmentMove", + id: "#foswikiAttachmentMove", expand: "attachments::moveattachment", init: function() { var $this = this; @@ -363,7 +366,7 @@ As per the GPL, removal of this notice is prohibited. $this.find(".foswikiThumbnailContainer").html(thumbnail); } $this.find(".foswikiGenericThumbnail").hide(); - + $this.dialog("option", "position", "center"); } }); @@ -374,7 +377,7 @@ As per the GPL, removal of this notice is prohibited. // add bulk action behaviour self.elem.find(".foswikiAttachmentsBulkAction select").on("change", function() { var $select = $(this), - action = $select.val(), + action = $select.val(), hideFile, msgClass, len = self.selection?self.selection.length:0; @@ -410,12 +413,11 @@ As per the GPL, removal of this notice is prohibited. if (action !== "move") { Dialog.load({ - id: "#foswikiAttachmentConfirmBulk", + id: "#foswikiAttachmentConfirmBulk", expand: "attachments::confirmbulkaction", init: function() { var $this = this, - $form = $this.find("form"), - $hideFile = $form.find("input[name=hidefile]"); + $form = $this.find("form"); $form.find("input[type='hidden'][name='filename']").remove(); $form.find("input[type='hidden'][name='hidefile']").val(hideFile); @@ -435,9 +437,9 @@ As per the GPL, removal of this notice is prohibited. }); } else { - // move attachments + // move attachments Dialog.load({ - id: "#foswikiAttachmentMove", + id: "#foswikiAttachmentMove", expand: "attachments::moveattachment", init: function() { var $this = this, @@ -460,7 +462,7 @@ As per the GPL, removal of this notice is prohibited. } }); - // add show more versions behaviour + // add show more versions behaviour self.elem.find(".foswikiShowVersions").each(function() { var $this = $(this), $attachment = $this.parents(".foswikiAttachment:first"), @@ -474,7 +476,7 @@ As per the GPL, removal of this notice is prohibited. "expand": "attachments::versions", "filename": attachmentOpts.filename }; - + $this.on("click", function() { if($versionContainer.is(".foswikiVersionsContainerLoaded")) { $this.hide(); @@ -482,7 +484,7 @@ As per the GPL, removal of this notice is prohibited. $versionContainer.slideDown("fast"); } else { $versionContainer.show(); - $versionContainer.load(url, params, function(resp, stat) { + $versionContainer.load(url, params, function() { $versionContainer.addClass("foswikiVersionsContainerLoaded"); $attachment.effect("highlight"); $this.hide(); @@ -492,13 +494,13 @@ As per the GPL, removal of this notice is prohibited. return false; }); }); - - // add hide more versions behaviour + + // add hide more versions behaviour self.elem.find(".foswikiHideVersions").each(function() { var $this = $(this), $attachment = $this.parents(".foswikiAttachment:first"), $versionContainer = $attachment.find(".foswikiVersionsContainer"); - + $this.on("click", function() { $this.hide(); $attachment.find(".foswikiShowVersions").show(); @@ -637,23 +639,23 @@ As per the GPL, removal of this notice is prohibited. success: function(data) { $.unblockUI(); // perform reload - if (action === "createlink" || action == "createlink_hidefile" || action === "createimagegallery") { + if (action === "createlink" || action === "createlink_hidefile" || action === "createimagegallery") { //self.log("reloading topic"); window.location.href = foswiki.getScriptUrl("view", foswiki.getPreference("WEB"), foswiki.getPreference("TOPIC")); - } - + } + // perform redirect else if (action === "download") { //self.log("redirect url="+data.result); window.location.href = data.result; - } + } // clear selection else if (action === 'delete') { self.clearSelection(); self.load(); } - + // default else { self.load(); @@ -676,7 +678,7 @@ As per the GPL, removal of this notice is prohibited. } }); }); - + }; // end of init() /* get number of attachments ********************************************/ @@ -697,7 +699,7 @@ As per the GPL, removal of this notice is prohibited. /* get data of attachments **********************************************/ FoswikiAttachments.prototype.getAttachmentData = function(elem) { - var self = this, id; + var id; if (typeof(elem) === 'string') { id = elem; @@ -726,14 +728,14 @@ As per the GPL, removal of this notice is prohibited. /* all attachments *************************************************/ FoswikiAttachments.prototype.load = function(params) { - var self = this, + var self = this, url, thisParams = {}, dfd = $.Deferred(); self.log("called load()"); $.each(params, function(key, val) { - thisParams["attachments_"+key] = val; + thisParams["attachments_"+key] = val; }); params = $.extend({ @@ -770,7 +772,7 @@ As per the GPL, removal of this notice is prohibited. self.container.load(url, params, function() { self.elem.unblock(); self.container.height('auto'); - self.elem.removeData("FoswikiAttachments"); // remove reference + self.elem.removeData("FoswikiAttachments"); // remove reference dfd.resolve(); }); @@ -808,7 +810,7 @@ As per the GPL, removal of this notice is prohibited. return; } - id = id.replace(/[^0-9a-zA-Z_]/g, "_"); + id = id.replace(/[^0-9a-zA-Z_]/g, "_"); //self.log(" select("+id+")"); if (typeof(self.selection) === 'undefined') { diff --git a/pub/System/TopicInteractionPlugin/foswiki.fileupload.uncompressed.js b/pub/System/TopicInteractionPlugin/foswiki.fileupload.uncompressed.js index 941fc46..40aacbf 100644 --- a/pub/System/TopicInteractionPlugin/foswiki.fileupload.uncompressed.js +++ b/pub/System/TopicInteractionPlugin/foswiki.fileupload.uncompressed.js @@ -1,5 +1,5 @@ /* - * foswiki file upload plugin 1.0 + * foswiki file upload plugin 2.0 * * Copyright (c) 2016-2018 Michael Daum http://michaeldaumconsulting.com * @@ -7,28 +7,32 @@ * */ +/* global Dialog, window */ + "use strict"; (function($) { + // uploader defaults + var defaults = { + topic: null, + progress: null + }; + // The file upload class /////////////////////////////////////////////////// function FoswikiUploader(elem, opts) { var self = this; - self.elem = $(elem); - self.opts = $.extend({ - topic: foswiki.getPreference("WEB")+"."+foswiki.getPreference("TOPIC") - }, self.elem.data(), opts); - - self.init(); - } + self.elem = $(elem); + self.opts = $.extend({}, defaults, self.elem.data(), opts); + self.init(); + } FoswikiUploader.prototype.init = function () { var self = this; - self.bar = self.elem.find(".jqUploadProgressBar"); - self.progressInfo = self.elem.find(".jqUploadProgressInfo"); self.uploadedFiles = []; + // create workhorse self.elem.fileupload({ url: foswiki.getScriptUrl("rest", "TopicInteractionPlugin", "upload"), fileInput: null, @@ -42,11 +46,11 @@ $.each(data.files, function(index, file) { files.push(file.name); }); - self.progressInfo.html(files.join(", ")); + self.progressBar.add(files); }, progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); - self.bar.css("width", progress+"%"); + self.progressBar.setProgress(progress); }, add: function(e, data) { data.files = data.files; @@ -59,7 +63,7 @@ self.currentData = data; Dialog.load({ - id:"#foswikiAttachmentPaste", + id:"#foswikiAttachmentPaste", expand:"attachments::paste", init: function() { if (typeof(self.prevFileName) !== 'undefined') { @@ -96,11 +100,7 @@ }, start: function() { self.uploadedFiles = []; - self.bar.width(0); - $.blockUI({ - blockMsgClass: "jqUploadMsg", - message: self.bar.length?self.bar:"" - }); + self.progressBar.start(); }, dragover: function() { if (self.dragoverTimer) { @@ -126,11 +126,11 @@ }); }, stop: function() { - $.unblockUI(); + self.progressBar.stop(); $.pnotify({ text: $.i18n("Uploaded %num% file(s)", {num: self.uploadedFiles.length}), type: "success", - delay: 1000 + delay: 1000 }); $(".foswikiAttachments").trigger("refresh", [self.uploadedFiles]); // legacy self.elem.trigger("afterUpload", [self.uploadedFiles]); @@ -144,14 +144,18 @@ }); } }); - + // prevent default browser drop event $(document).bind('drop dragover', function (e) { e.preventDefault(); + return false; }); + // attach to progress bar object + self.progressBar = self.elem.data("uploadProgress"); + //console.log("init'ed fileupload on",this); - }; + }; FoswikiUploader.prototype.add = function (params) { var self = this; @@ -172,15 +176,15 @@ function UploadButton(elem, opts) { var self = this; - self.elem = $(elem); - self.opts = $.extend({}, self.elem.data(), opts); - self.init(); - } + self.elem = $(elem); + self.opts = $.extend({}, self.elem.data(), opts); + self.init(); + } UploadButton.prototype.init = function () { var self = this; - self.elem.on("change", function() { + self.elem.on("change", function() { /* self.send().done(function(data) { console.log("done button with result.",data.result); @@ -206,32 +210,101 @@ }); }; + // The upload indicator class /////////////////////////////////////////////////// + function UploadProgress(elem) { + var self = this; + + self.bar = $('
Uploading ...
').appendTo(elem); + self.progressInfo = self.bar.find(".jqUploadProgressInfo"); + self.dropIndicator = $('
Drag files here.
').appendTo(elem); + self.reset(); + } + + UploadProgress.prototype.reset = function () { + var self = this; + + self.setProgress(0); + self.progressInfo.html(""); + }; + + UploadProgress.prototype.add = function (files) { + var self = this; + self.progressInfo.html(files.join(", ")); + }; + + UploadProgress.prototype.setProgress = function(val) { + var self = this; + + self.progress = val; + self.bar.css("width", val+"%"); + //console.log("setProgress",val); + }; + + UploadProgress.prototype.getProgress = function() { + var self = this; + + return self.progress; + }; + + UploadProgress.prototype.start = function() { + var self = this; + + self.reset(); + $.blockUI({ + blockMsgClass: "jqUploadMsg", + message: self.bar + }); + }; + + UploadProgress.prototype.stop = function() { + var self = this; + + $.unblockUI(); + self.reset(); + }; + ///////////////////////////////////////////////////////////////////////////// - // preventing against multiple instantiations - $.fn.uploadButton = function (opts) { - return this.each(function () { - if (!$.data(this, "uploadButton")) { - $.data(this, "uploadButton", new UploadButton(this, opts)); - } - }); + // preventing against multiple instantiations + $.fn.uploadButton = function(opts) { + return this.each(function () { + if (!$.data(this, "uploadButton")) { + $.data(this, "uploadButton", new UploadButton(this, opts)); + } + }); + }; + + $.fn.uploadProgress = function(opts) { + return this.each(function () { + if (!$.data(this, "uploadProgress")) { + $.data(this, "uploadProgress", new UploadProgress(this, opts)); + } + }); }; - $.fn.foswikiUploader = function (opts) { - return this.each(function () { + $.fn.foswikiUploader = function(opts) { + return this.each(function () { + + // create one instance for use by other components such as the UploadButton if (!foswiki.uploader) { - foswiki.uploader = new FoswikiUploader(this, opts); - } - }); + foswiki.uploader = new FoswikiUploader(this, opts); + } + }); }; - // Enable declarative widget instanziation + // Enable declarative widget instanziation $(function() { - // instantiate singleton FoswikiUploader instanze + // set defaults + defaults.topic = foswiki.getPreference("WEB")+"."+foswiki.getPreference("TOPIC"); + + // create progress bar for uploads + $("body").uploadProgress(); + + // create foswiki uploader $("body").foswikiUploader(); - // have buttons + // create upload buttons $(".jqUploadButton:not(.jqUploadButtonInited)").livequery(function() { $(this).uploadButton().addClass("jqUploadButtonInited"); }); diff --git a/pub/System/TopicInteractionPlugin/i18n/de.js b/pub/System/TopicInteractionPlugin/i18n/de.js index 96be771..ddf069e 100644 --- a/pub/System/TopicInteractionPlugin/i18n/de.js +++ b/pub/System/TopicInteractionPlugin/i18n/de.js @@ -1,4 +1,5 @@ { + "Drag files here." : "Dateien hier hinziehen.", "Deleting %file% ...": "Lösche %file% ...", "Edit failed": "Editieren fehlgeschlagen", "Error during '%action%'": "Fehler während '%action%'", diff --git a/pub/System/TopicInteractionPlugin/i18n/en.js b/pub/System/TopicInteractionPlugin/i18n/en.js index ae0c3ea..a4e7d83 100644 --- a/pub/System/TopicInteractionPlugin/i18n/en.js +++ b/pub/System/TopicInteractionPlugin/i18n/en.js @@ -1,4 +1,5 @@ { + "Drag files here." : "Drag files here.", "Deleting %file% ...": "Deleting %file% ...", "Edit failed": "Edit failed", "Error during '%action%'": "Error during '%action%'", diff --git a/pub/System/TopicInteractionPlugin/legacy.fileupload.uncompressed.js b/pub/System/TopicInteractionPlugin/legacy.fileupload.uncompressed.js index 512f682..2b94c43 100644 --- a/pub/System/TopicInteractionPlugin/legacy.fileupload.uncompressed.js +++ b/pub/System/TopicInteractionPlugin/legacy.fileupload.uncompressed.js @@ -21,7 +21,7 @@ var plupload = { (function($) { - // legacy uploader, wrapper around new implementation + // legacy uploader, wrapper around new implementation function LegacyUploader(elem, opts) { var self = this, wrapper = $(elem).wrap("
").parent().addClass("jqLegacyUploader jqUploadButton"); @@ -31,11 +31,11 @@ var plupload = { self.fileInput = $("").attr("type", "file").appendTo(wrapper); self.opts = $.extend({}, self.elem.data(), opts); self.init(); - }; + } LegacyUploader.prototype.init = function() { var self = this; - + self.state = plupload.STOPPED; self.files = []; self.browseButton = $(self.opts.browseButton) || self.wrapper; @@ -75,10 +75,10 @@ var plupload = { // add to jquery $.fn.uploader = function(opts) { console.warn("this uploader api is deprecated, please switch to new fileupload api"); - return this.each(function () { - if (!$.data(this, "uploader")) { - $.data(this, "uploader", new LegacyUploader(this, opts)); - } + return this.each(function () { + if (!$.data(this, "uploader")) { + $.data(this, "uploader", new LegacyUploader(this, opts)); + } }); }; diff --git a/pub/System/TopicInteractionPlugin/metadata.uncompressed.js b/pub/System/TopicInteractionPlugin/metadata.uncompressed.js index 5607ca2..1eeba8f 100644 --- a/pub/System/TopicInteractionPlugin/metadata.uncompressed.js +++ b/pub/System/TopicInteractionPlugin/metadata.uncompressed.js @@ -207,7 +207,10 @@ As per the GPL, removal of this notice is prohibited. */ +/* global Dialog, window */ + /*eslint-disable no-console */ + "use strict"; (function($) { @@ -224,14 +227,14 @@ As per the GPL, removal of this notice is prohibited. }; /* The actual plugin constructor ****************************************/ - function FoswikiAttachments(elem, opts) { + function FoswikiAttachments(elem, opts) { var self = this; - self.elem = $(elem); - self.opts = $.extend({}, defaults, self.elem.data(), opts); + self.elem = $(elem); + self.opts = $.extend({}, defaults, self.elem.data(), opts); self.log("new FoswikiAttachments opts=",self.opts); - self.init(); - } + self.init(); + } /* logger ***************************************************************/ FoswikiAttachments.prototype.log = function() { @@ -247,7 +250,7 @@ As per the GPL, removal of this notice is prohibited. }; /* init attachments *****************************************************/ - FoswikiAttachments.prototype.init = function () { + FoswikiAttachments.prototype.init = function () { var self = this, tabpane; self.log("called init()"); @@ -330,7 +333,7 @@ As per the GPL, removal of this notice is prohibited. val = $input.val(); if (val === 'none') { val = ''; - } + } self.load({ "showempty": true, "filter": val @@ -383,7 +386,7 @@ As per the GPL, removal of this notice is prohibited. $(this).removeClass("foswikiAttachmentHover"); } ).on("click", function(e) { - var $attachment = $(this), + var $attachment = $(this), id = $attachment.data('id'); if (!$(e.target).is("a,img,i")) { // dont propagate the attachment clicks @@ -428,7 +431,7 @@ As per the GPL, removal of this notice is prohibited. if (extension.match(/mp3|wav/)) { previewType = "audio"; - } else if (extension.match(/flv|swf|mp4|mpe?g|mov|ogg|webm|ogv/)) { + } else if (extension.match(/flv|swf|mp4|mpe?g|mov|ogg|webm|ogv/)) { previewType = "video"; } else if (extension.match(/vsd/)) { previewType = "visio"; @@ -443,7 +446,7 @@ As per the GPL, removal of this notice is prohibited. }); Dialog.load({ - expand: "attachments::previewer::"+previewType, + expand: "attachments::previewer::"+previewType, data: { filename: decodeURIComponent(attachmentOpts.filename) } @@ -463,7 +466,7 @@ As per the GPL, removal of this notice is prohibited. thumbnail = $attachment.find(".foswikiThumbnail").clone().removeClass("foswikiLeft"); Dialog.load({ - id:"#foswikiAttachmentConfirmDelete", + id:"#foswikiAttachmentConfirmDelete", expand:"attachments::confirmdelete", init: function() { var $this = this; @@ -486,7 +489,7 @@ As per the GPL, removal of this notice is prohibited. ev.stopPropagation(); }); - // add button behaviour + // add button behaviour self.elem.find(".foswikiAttachmentPropertiesButton").on("click", function() { var $button = $(this), $attachment = $button.parents(".foswikiAttachment:first"), @@ -494,8 +497,8 @@ As per the GPL, removal of this notice is prohibited. thumbnail = $attachment.find(".foswikiThumbnail").clone().removeClass("foswikiLeft"); Dialog.load({ - id:"#foswikiAttachmentEditor", - expand:"attachments::editor", + id:"#foswikiAttachmentEditor", + expand:"attachments::editor", init: function() { var $this = this; @@ -539,7 +542,7 @@ As per the GPL, removal of this notice is prohibited. thumbnail = $attachment.find(".foswikiThumbnail").clone().removeClass("foswikiLeft"); Dialog.load({ - id: "#foswikiAttachmentMove", + id: "#foswikiAttachmentMove", expand: "attachments::moveattachment", init: function() { var $this = this; @@ -549,7 +552,7 @@ As per the GPL, removal of this notice is prohibited. $this.find(".foswikiThumbnailContainer").html(thumbnail); } $this.find(".foswikiGenericThumbnail").hide(); - + $this.dialog("option", "position", "center"); } }); @@ -560,7 +563,7 @@ As per the GPL, removal of this notice is prohibited. // add bulk action behaviour self.elem.find(".foswikiAttachmentsBulkAction select").on("change", function() { var $select = $(this), - action = $select.val(), + action = $select.val(), hideFile, msgClass, len = self.selection?self.selection.length:0; @@ -596,12 +599,11 @@ As per the GPL, removal of this notice is prohibited. if (action !== "move") { Dialog.load({ - id: "#foswikiAttachmentConfirmBulk", + id: "#foswikiAttachmentConfirmBulk", expand: "attachments::confirmbulkaction", init: function() { var $this = this, - $form = $this.find("form"), - $hideFile = $form.find("input[name=hidefile]"); + $form = $this.find("form"); $form.find("input[type='hidden'][name='filename']").remove(); $form.find("input[type='hidden'][name='hidefile']").val(hideFile); @@ -621,9 +623,9 @@ As per the GPL, removal of this notice is prohibited. }); } else { - // move attachments + // move attachments Dialog.load({ - id: "#foswikiAttachmentMove", + id: "#foswikiAttachmentMove", expand: "attachments::moveattachment", init: function() { var $this = this, @@ -646,7 +648,7 @@ As per the GPL, removal of this notice is prohibited. } }); - // add show more versions behaviour + // add show more versions behaviour self.elem.find(".foswikiShowVersions").each(function() { var $this = $(this), $attachment = $this.parents(".foswikiAttachment:first"), @@ -660,7 +662,7 @@ As per the GPL, removal of this notice is prohibited. "expand": "attachments::versions", "filename": attachmentOpts.filename }; - + $this.on("click", function() { if($versionContainer.is(".foswikiVersionsContainerLoaded")) { $this.hide(); @@ -668,7 +670,7 @@ As per the GPL, removal of this notice is prohibited. $versionContainer.slideDown("fast"); } else { $versionContainer.show(); - $versionContainer.load(url, params, function(resp, stat) { + $versionContainer.load(url, params, function() { $versionContainer.addClass("foswikiVersionsContainerLoaded"); $attachment.effect("highlight"); $this.hide(); @@ -678,13 +680,13 @@ As per the GPL, removal of this notice is prohibited. return false; }); }); - - // add hide more versions behaviour + + // add hide more versions behaviour self.elem.find(".foswikiHideVersions").each(function() { var $this = $(this), $attachment = $this.parents(".foswikiAttachment:first"), $versionContainer = $attachment.find(".foswikiVersionsContainer"); - + $this.on("click", function() { $this.hide(); $attachment.find(".foswikiShowVersions").show(); @@ -823,23 +825,23 @@ As per the GPL, removal of this notice is prohibited. success: function(data) { $.unblockUI(); // perform reload - if (action === "createlink" || action == "createlink_hidefile" || action === "createimagegallery") { + if (action === "createlink" || action === "createlink_hidefile" || action === "createimagegallery") { //self.log("reloading topic"); window.location.href = foswiki.getScriptUrl("view", foswiki.getPreference("WEB"), foswiki.getPreference("TOPIC")); - } - + } + // perform redirect else if (action === "download") { //self.log("redirect url="+data.result); window.location.href = data.result; - } + } // clear selection else if (action === 'delete') { self.clearSelection(); self.load(); } - + // default else { self.load(); @@ -862,7 +864,7 @@ As per the GPL, removal of this notice is prohibited. } }); }); - + }; // end of init() /* get number of attachments ********************************************/ @@ -883,7 +885,7 @@ As per the GPL, removal of this notice is prohibited. /* get data of attachments **********************************************/ FoswikiAttachments.prototype.getAttachmentData = function(elem) { - var self = this, id; + var id; if (typeof(elem) === 'string') { id = elem; @@ -912,14 +914,14 @@ As per the GPL, removal of this notice is prohibited. /* all attachments *************************************************/ FoswikiAttachments.prototype.load = function(params) { - var self = this, + var self = this, url, thisParams = {}, dfd = $.Deferred(); self.log("called load()"); $.each(params, function(key, val) { - thisParams["attachments_"+key] = val; + thisParams["attachments_"+key] = val; }); params = $.extend({ @@ -956,7 +958,7 @@ As per the GPL, removal of this notice is prohibited. self.container.load(url, params, function() { self.elem.unblock(); self.container.height('auto'); - self.elem.removeData("FoswikiAttachments"); // remove reference + self.elem.removeData("FoswikiAttachments"); // remove reference dfd.resolve(); }); @@ -994,7 +996,7 @@ As per the GPL, removal of this notice is prohibited. return; } - id = id.replace(/[^0-9a-zA-Z_]/g, "_"); + id = id.replace(/[^0-9a-zA-Z_]/g, "_"); //self.log(" select("+id+")"); if (typeof(self.selection) === 'undefined') { diff --git a/pub/System/TopicInteractionPlugin/uploader.uncompressed.css b/pub/System/TopicInteractionPlugin/uploader.uncompressed.css index cf33584..16ff358 100644 --- a/pub/System/TopicInteractionPlugin/uploader.uncompressed.css +++ b/pub/System/TopicInteractionPlugin/uploader.uncompressed.css @@ -40,10 +40,10 @@ font-size:0.77em; } -.jqUploadDropZone { +.jqUploadIndicator { display:none; } -.jqUploadDropZone span { +.jqUploadIndicator span { position:relative; text-align:center; top:50%; @@ -51,7 +51,7 @@ font-size:200%; font-weight:bold; } -.jqUploadDragging .jqUploadDropZone { +.jqUploadDragging .jqUploadIndicator { display:block; box-sizing:border-box; opacity: 0.5; diff --git a/pub/System/TopicInteractionPlugin/uploader.uncompressed.js b/pub/System/TopicInteractionPlugin/uploader.uncompressed.js index 93d49e3..7d81163 100644 --- a/pub/System/TopicInteractionPlugin/uploader.uncompressed.js +++ b/pub/System/TopicInteractionPlugin/uploader.uncompressed.js @@ -25,7 +25,6 @@ As per the GPL, removal of this notice is prohibited. /*eslint-disable no-console */ "use strict"; -var Dialog; (function($) { @@ -35,11 +34,11 @@ var Dialog; }; /* constructor **********************************************************/ - Dialog = function(opts) { + function Dialog(opts) { var self = this; self.opts = $.extend({}, defaults, opts); - }; + } /* shortcut *************************************************************/ Dialog.load = function(opts) { @@ -63,10 +62,10 @@ var Dialog; /* load *****************************************************************/ Dialog.prototype.load = function(params) { - var self = this, + var self = this, opts = $.extend({}, self.opts, params), $dialog = typeof(opts.id) === 'undefined'?undefined:$(opts.id), - data, + data, dfd = $.Deferred(); self.log("called load() opts=",opts); @@ -110,6 +109,10 @@ var Dialog; return dfd.promise(); }; + + // export + window.Dialog = Dialog; + })(jQuery); /* * jQuery File Upload Plugin @@ -1595,7 +1598,7 @@ var Dialog; })); /* - * foswiki file upload plugin 1.0 + * foswiki file upload plugin 2.0 * * Copyright (c) 2016-2018 Michael Daum http://michaeldaumconsulting.com * @@ -1603,28 +1606,32 @@ var Dialog; * */ +/* global Dialog, window */ + "use strict"; (function($) { + // uploader defaults + var defaults = { + topic: null, + progress: null + }; + // The file upload class /////////////////////////////////////////////////// function FoswikiUploader(elem, opts) { var self = this; - self.elem = $(elem); - self.opts = $.extend({ - topic: foswiki.getPreference("WEB")+"."+foswiki.getPreference("TOPIC") - }, self.elem.data(), opts); - - self.init(); - } + self.elem = $(elem); + self.opts = $.extend({}, defaults, self.elem.data(), opts); + self.init(); + } FoswikiUploader.prototype.init = function () { var self = this; - self.bar = self.elem.find(".jqUploadProgressBar"); - self.progressInfo = self.elem.find(".jqUploadProgressInfo"); self.uploadedFiles = []; + // create workhorse self.elem.fileupload({ url: foswiki.getScriptUrl("rest", "TopicInteractionPlugin", "upload"), fileInput: null, @@ -1638,11 +1645,11 @@ var Dialog; $.each(data.files, function(index, file) { files.push(file.name); }); - self.progressInfo.html(files.join(", ")); + self.progressBar.add(files); }, progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); - self.bar.css("width", progress+"%"); + self.progressBar.setProgress(progress); }, add: function(e, data) { data.files = data.files; @@ -1655,7 +1662,7 @@ var Dialog; self.currentData = data; Dialog.load({ - id:"#foswikiAttachmentPaste", + id:"#foswikiAttachmentPaste", expand:"attachments::paste", init: function() { if (typeof(self.prevFileName) !== 'undefined') { @@ -1692,11 +1699,7 @@ var Dialog; }, start: function() { self.uploadedFiles = []; - self.bar.width(0); - $.blockUI({ - blockMsgClass: "jqUploadMsg", - message: self.bar.length?self.bar:"" - }); + self.progressBar.start(); }, dragover: function() { if (self.dragoverTimer) { @@ -1722,11 +1725,11 @@ var Dialog; }); }, stop: function() { - $.unblockUI(); + self.progressBar.stop(); $.pnotify({ text: $.i18n("Uploaded %num% file(s)", {num: self.uploadedFiles.length}), type: "success", - delay: 1000 + delay: 1000 }); $(".foswikiAttachments").trigger("refresh", [self.uploadedFiles]); // legacy self.elem.trigger("afterUpload", [self.uploadedFiles]); @@ -1740,14 +1743,18 @@ var Dialog; }); } }); - + // prevent default browser drop event $(document).bind('drop dragover', function (e) { e.preventDefault(); + return false; }); + // attach to progress bar object + self.progressBar = self.elem.data("uploadProgress"); + //console.log("init'ed fileupload on",this); - }; + }; FoswikiUploader.prototype.add = function (params) { var self = this; @@ -1768,15 +1775,15 @@ var Dialog; function UploadButton(elem, opts) { var self = this; - self.elem = $(elem); - self.opts = $.extend({}, self.elem.data(), opts); - self.init(); - } + self.elem = $(elem); + self.opts = $.extend({}, self.elem.data(), opts); + self.init(); + } UploadButton.prototype.init = function () { var self = this; - self.elem.on("change", function() { + self.elem.on("change", function() { /* self.send().done(function(data) { console.log("done button with result.",data.result); @@ -1802,32 +1809,101 @@ var Dialog; }); }; + // The upload indicator class /////////////////////////////////////////////////// + function UploadProgress(elem) { + var self = this; + + self.bar = $('
Uploading ...
').appendTo(elem); + self.progressInfo = self.bar.find(".jqUploadProgressInfo"); + self.dropIndicator = $('
Drag files here.
').appendTo(elem); + self.reset(); + } + + UploadProgress.prototype.reset = function () { + var self = this; + + self.setProgress(0); + self.progressInfo.html(""); + }; + + UploadProgress.prototype.add = function (files) { + var self = this; + self.progressInfo.html(files.join(", ")); + }; + + UploadProgress.prototype.setProgress = function(val) { + var self = this; + + self.progress = val; + self.bar.css("width", val+"%"); + //console.log("setProgress",val); + }; + + UploadProgress.prototype.getProgress = function() { + var self = this; + + return self.progress; + }; + + UploadProgress.prototype.start = function() { + var self = this; + + self.reset(); + $.blockUI({ + blockMsgClass: "jqUploadMsg", + message: self.bar + }); + }; + + UploadProgress.prototype.stop = function() { + var self = this; + + $.unblockUI(); + self.reset(); + }; + ///////////////////////////////////////////////////////////////////////////// - // preventing against multiple instantiations - $.fn.uploadButton = function (opts) { - return this.each(function () { - if (!$.data(this, "uploadButton")) { - $.data(this, "uploadButton", new UploadButton(this, opts)); - } - }); + // preventing against multiple instantiations + $.fn.uploadButton = function(opts) { + return this.each(function () { + if (!$.data(this, "uploadButton")) { + $.data(this, "uploadButton", new UploadButton(this, opts)); + } + }); }; - $.fn.foswikiUploader = function (opts) { - return this.each(function () { + $.fn.uploadProgress = function(opts) { + return this.each(function () { + if (!$.data(this, "uploadProgress")) { + $.data(this, "uploadProgress", new UploadProgress(this, opts)); + } + }); + }; + + $.fn.foswikiUploader = function(opts) { + return this.each(function () { + + // create one instance for use by other components such as the UploadButton if (!foswiki.uploader) { - foswiki.uploader = new FoswikiUploader(this, opts); - } - }); + foswiki.uploader = new FoswikiUploader(this, opts); + } + }); }; - // Enable declarative widget instanziation + // Enable declarative widget instanziation $(function() { - // instantiate singleton FoswikiUploader instanze + // set defaults + defaults.topic = foswiki.getPreference("WEB")+"."+foswiki.getPreference("TOPIC"); + + // create progress bar for uploads + $("body").uploadProgress(); + + // create foswiki uploader $("body").foswikiUploader(); - // have buttons + // create upload buttons $(".jqUploadButton:not(.jqUploadButtonInited)").livequery(function() { $(this).uploadButton().addClass("jqUploadButtonInited"); }); @@ -1857,7 +1933,7 @@ var plupload = { (function($) { - // legacy uploader, wrapper around new implementation + // legacy uploader, wrapper around new implementation function LegacyUploader(elem, opts) { var self = this, wrapper = $(elem).wrap("
").parent().addClass("jqLegacyUploader jqUploadButton"); @@ -1867,11 +1943,11 @@ var plupload = { self.fileInput = $("").attr("type", "file").appendTo(wrapper); self.opts = $.extend({}, self.elem.data(), opts); self.init(); - }; + } LegacyUploader.prototype.init = function() { var self = this; - + self.state = plupload.STOPPED; self.files = []; self.browseButton = $(self.opts.browseButton) || self.wrapper; @@ -1911,10 +1987,10 @@ var plupload = { // add to jquery $.fn.uploader = function(opts) { console.warn("this uploader api is deprecated, please switch to new fileupload api"); - return this.each(function () { - if (!$.data(this, "uploader")) { - $.data(this, "uploader", new LegacyUploader(this, opts)); - } + return this.each(function () { + if (!$.data(this, "uploader")) { + $.data(this, "uploader", new LegacyUploader(this, opts)); + } }); }; diff --git a/templates/metadata.tmpl b/templates/metadata.tmpl index 26f51d0..36f82bd 100644 --- a/templates/metadata.tmpl +++ b/templates/metadata.tmpl @@ -4,6 +4,7 @@ %TMPL:P{"metadata::attachments"}%%{}% %TMPL:P{"metadata::comments"}%%{}% %TMPL:P{"metadata::end"}%%{}%%TMPL:END% +%TMPL:DEF{"spinner"}%%JQICON{"fa-spinner" animate="spin"}%%TMPL:END% %{ ################################################################################ }% %TMPL:DEF{"metadata::start"}%%{}% @@ -80,10 +81,10 @@ id="comments" url="%SCRIPTURL{"rest"}%/RenderPlugin/template?name=metacomments;expand=metacomments;topic=%WEB%.%TOPIC%;render=on;%GMTIME{"$epoch"}%" }% -
 
-
+
%TMPL:P{"spinner"}%
%ENDTAB%%TMPL:END% + %{ ################################################################################ }% %TMPL:DEF{"dataform::tab"}%%RENDERFORDISPLAY{ topic="%BASEWEB%.%BASETOPIC%" @@ -297,7 +298,7 @@ $percntIF{\"$version>1\" then=\"... %MAKETEXT{"more"}% - \" + \" }$percnt%{}%
%CLEAR%%TMPL:END% @@ -588,19 +589,14 @@ %TMPL:DEF{"uploadbutton"}%%TMPL:P{"uploadbutton::impl"}%%TMPL:END% %TMPL:DEF{"uploadbutton::impl"}%%TMPL:P{"uploadbutton::start"}%%{}% %TMPL:P{"uploadbutton::input"}%%{}% -%TMPL:P{"uploadbutton::progress"}%%{}% -%TMPL:P{"uploadbutton::dropzone"}%%{}% %TMPL:P{"uploadbutton::end"}%%TMPL:END% %TMPL:DEF{"uploadbutton::start"}%%TMPL:P{"uploadbutton::icon"}%%TMPL:P{"uploadbutton::label"}%%TMPL:END% %TMPL:DEF{"uploadbutton::input"}%%TMPL:END% -%TMPL:DEF{"uploadbutton::progress"}%
%TMPL:P{"uploadbutton::progress::label"}%
%TMPL:END% -%TMPL:DEF{"uploadbutton::dropzone"}%
%MAKETEXT{"Drag files here"}%
%TMPL:END% %TMPL:DEF{"uploadbutton::end"}%%TMPL:END% %TMPL:DEF{"uploadbutton::icon"}%%TMPL:END% %TMPL:DEF{"uploadbutton::label"}%%MAKETEXT{"Upload files"}%%TMPL:END% -%TMPL:DEF{"uploadbutton::progress::label"}%%MAKETEXT{"Uploading ..."}%%TMPL:END% %{ ################################################################################ }% %TMPL:DEF{"optionsbutton"}%%BUTTON{