From 32fd39917ecee565436da397fff04967e7b6a2c5 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Fri, 27 May 2016 16:58:42 +0200 Subject: [PATCH] Added basic attachment support to Redactor --- com.woltlab.wcf/templates/wysiwyg.tpl | 3 +- .../redactor2/plugins/WoltLabAttachment.js | 23 +++++ .../redactor2/plugins/WoltLabSmiley.js | 4 +- wcfsetup/install/files/js/WCF.Attachment.js | 92 +++++++++---------- 4 files changed, 69 insertions(+), 53 deletions(-) create mode 100644 wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabAttachment.js diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl index 2d2fb9963d..837e0ae8f3 100644 --- a/com.woltlab.wcf/templates/wysiwyg.tpl +++ b/com.woltlab.wcf/templates/wysiwyg.tpl @@ -31,7 +31,7 @@ require(['WoltLab/WCF/Ui/Redactor/Metacode'], function(UiRedactorMetacode) { var config = { buttons: buttons, minHeight: 200, - plugins: ['alignment', 'source', 'table', 'WoltLabColor', 'WoltLabDropdown', 'WoltLabEvent', 'WoltLabLink', 'WoltLabQuote', 'WoltLabSize', 'WoltLabSmiley'], + plugins: ['alignment', 'source', 'table', 'WoltLabAttachment', 'WoltLabColor', 'WoltLabDropdown', 'WoltLabEvent', 'WoltLabLink', 'WoltLabQuote', 'WoltLabSize', 'WoltLabSmiley'], toolbarFixed: false, woltlab: { autosave: autosave, @@ -64,6 +64,7 @@ require(['WoltLab/WCF/Ui/Redactor/Metacode'], function(UiRedactorMetacode) { '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/table.js?v={@LAST_UPDATE_TIME}', {* WoltLab *} + '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabAttachment.js?v={@LAST_UPDATE_TIME}', '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabButton.js?v={@LAST_UPDATE_TIME}', '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabColor.js?v={@LAST_UPDATE_TIME}', '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabDropdown.js?v={@LAST_UPDATE_TIME}', diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabAttachment.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabAttachment.js new file mode 100644 index 0000000000..c2d1705f14 --- /dev/null +++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabAttachment.js @@ -0,0 +1,23 @@ +$.Redactor.prototype.WoltLabAttachment = function() { + "use strict"; + + return { + init: function() { + require(['EventHandler'], (function(EventHandler) { + EventHandler.add('com.woltlab.wcf.redactor2', 'insertAttachment_' + this.$element[0].id, this.WoltLabAttachment._insert.bind(this)) + }).bind(this)); + }, + + _insert: function(data) { + var attachmentId = data.attachmentId; + + if (data.url) { + this.insert.html(''); + } + else { + // non-image attachment + this.insert.text('[attach=' + attachmentId + '][/attach]'); + } + } + }; +}; \ No newline at end of file diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabSmiley.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabSmiley.js index 8c35f5d08c..7d55186383 100644 --- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabSmiley.js +++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabSmiley.js @@ -4,11 +4,11 @@ $.Redactor.prototype.WoltLabSmiley = function() { return { init: function() { require(['EventHandler'], (function(EventHandler) { - EventHandler.add('com.woltlab.wcf.redactor2', 'insertSmiley_' + this.$element[0].id, this.WoltLabSmiley._insertSmiley.bind(this)) + EventHandler.add('com.woltlab.wcf.redactor2', 'insertSmiley_' + this.$element[0].id, this.WoltLabSmiley._insert.bind(this)) }).bind(this)); }, - _insertSmiley: function(data) { + _insert: function(data) { this.insert.html('' + data.code + ''); } } diff --git a/wcfsetup/install/files/js/WCF.Attachment.js b/wcfsetup/install/files/js/WCF.Attachment.js index 92e8c431a8..0b82657337 100644 --- a/wcfsetup/install/files/js/WCF.Attachment.js +++ b/wcfsetup/install/files/js/WCF.Attachment.js @@ -48,15 +48,15 @@ WCF.Attachment.Upload = WCF.Upload.extend({ _parentObjectID: 0, /** - * container if of WYSIWYG editor + * editor id * @var string */ - _wysiwygContainerID: '', + _editorId: '', /** * @see WCF.Upload.init() */ - init: function(buttonSelector, fileListSelector, objectType, objectID, tmpHash, parentObjectID, maxUploads, wysiwygContainerID) { + init: function(buttonSelector, fileListSelector, objectType, objectID, tmpHash, parentObjectID, maxUploads, editorId) { this._super(buttonSelector, fileListSelector, 'wcf\\data\\attachment\\AttachmentAction', { multiple: true, maxUploads: maxUploads }); this._autoInsert = [ ]; @@ -64,7 +64,7 @@ WCF.Attachment.Upload = WCF.Upload.extend({ this._objectID = parseInt(objectID); this._tmpHash = tmpHash; this._parentObjectID = parseInt(parentObjectID); - this._wysiwygContainerID = wysiwygContainerID; + this._editorId = editorId; this._buttonSelector.children('p.button').click($.proxy(this._validateLimit, this)); this._fileListSelector.find('.jsButtonInsertAttachment').click($.proxy(this._insert, this)); @@ -72,7 +72,7 @@ WCF.Attachment.Upload = WCF.Upload.extend({ this._fileListSelector.find('.jsButtonAttachmentInsertFull').click($.proxy(this._insert, this)); //WCF.DOMNodeRemovedHandler.addCallback('WCF.Attachment.Upload', $.proxy(this._removeLimitError, this)); - WCF.System.Event.addListener('com.woltlab.wcf.action.delete', 'attachment_' + this._wysiwygContainerID, $.proxy(this._removeLimitError, this)); + WCF.System.Event.addListener('com.woltlab.wcf.action.delete', 'attachment_' + this._editorId, $.proxy(this._removeLimitError, this)); this._makeSortable(); @@ -83,12 +83,13 @@ WCF.Attachment.Upload = WCF.Upload.extend({ this._insertAllButton.show(); } - if (this._wysiwygContainerID) { - WCF.System.Event.addListener('com.woltlab.wcf.redactor2', 'submit_' + this._wysiwygContainerID, $.proxy(this._submitInline, this)); - WCF.System.Event.addListener('com.woltlab.wcf.messageOptionsInline', 'prepareExtended_' + this._wysiwygContainerID, $.proxy(this._prepareExtended, this)); + if (this._editorId) { + WCF.System.Event.addListener('com.woltlab.wcf.redactor2', 'submit_' + this._editorId, $.proxy(this._submitInline, this)); WCF.System.Event.addListener('com.woltlab.wcf.redactor2', 'reset', $.proxy(this._reset, this)); - WCF.System.Event.addListener('com.woltlab.wcf.redactor', 'upload_' + this._wysiwygContainerID, $.proxy(this._editorUpload, this)); - WCF.System.Event.addListener('com.woltlab.wcf.redactor', 'getImageAttachments_' + this._wysiwygContainerID, $.proxy(this._getImageAttachments, this)); + + // TODO + //WCF.System.Event.addListener('com.woltlab.wcf.redactor', 'upload_' + this._editorId, $.proxy(this._editorUpload, this)); + //WCF.System.Event.addListener('com.woltlab.wcf.redactor', 'getImageAttachments_' + this._editorId, $.proxy(this._getImageAttachments, this)); } }, @@ -142,17 +143,6 @@ WCF.Attachment.Upload = WCF.Upload.extend({ } }, - /** - * Adds parameters send to the server before jumping to extended form. - * - * @param object data - */ - _prepareExtended: function(data) { - if (!this._objectID && this._tmpHash && this._fileListSelector.children('li:not(.uploadFailed)').length) { - data.tmpHash = this._tmpHash; - } - }, - /** * Resets the attachment container. */ @@ -208,8 +198,8 @@ WCF.Attachment.Upload = WCF.Upload.extend({ }).bind(this), 250); } - if (this._wysiwygContainerID) { - $('#' + this._wysiwygContainerID).redactor('wbbcode.removeAttachment', data.button.data('objectID')); + if (this._editorId) { + $('#' + this._editorId).redactor('wbbcode.removeAttachment', data.button.data('objectID')); } }, @@ -283,7 +273,12 @@ WCF.Attachment.Upload = WCF.Upload.extend({ * @see WCF.Upload._success() */ _success: function(uploadID, data) { + var attachmentData; for (var $i in this._uploadMatrix[uploadID]) { + if (!this._uploadMatrix[uploadID].hasOwnProperty($i)) { + continue; + } + // get li var $li = this._uploadMatrix[uploadID][$i]; @@ -294,12 +289,14 @@ WCF.Attachment.Upload = WCF.Upload.extend({ var $filename = $li.data('filename'); var $internalFileID = $li.data('internalFileID'); if (data.returnValues && data.returnValues.attachments[$internalFileID]) { + attachmentData = data.returnValues.attachments[$internalFileID]; + // show thumbnail - if (data.returnValues.attachments[$internalFileID].tinyURL) { - $li.children('.fa-spinner').replaceWith($('')); + if (attachmentData.tinyURL) { + $li.children('.fa-spinner').replaceWith($('')); - $li.data('height', data.returnValues.attachments[$internalFileID].height); - $li.data('width', data.returnValues.attachments[$internalFileID].width); + $li.data('height', attachmentData.height); + $li.data('width', attachmentData.width); } // show file icon else { @@ -308,33 +305,33 @@ WCF.Attachment.Upload = WCF.Upload.extend({ // update attachment link var $link = $(''); - $link.text($filename).attr('href', data.returnValues.attachments[$internalFileID]['url']); + $link.text($filename).attr('href', attachmentData.url); - if (data.returnValues.attachments[$internalFileID]['isImage'] != 0) { + if (attachmentData.isImage != 0) { $link.addClass('jsImageViewer').attr('title', $filename); } $li.find('p').empty().append($link); // update file size - $li.find('small').append(data.returnValues.attachments[$internalFileID]['formattedFilesize']); + $li.find('small').append(attachmentData.formattedFilesize); // init buttons var $buttonList = $li.find('ul').addClass('buttonGroup'); - var $deleteButton = $('
  • ' + WCF.Language.get('wcf.global.button.delete') + '
    • '); + var $deleteButton = $('
  • ' + WCF.Language.get('wcf.global.button.delete') + '
    • '); $buttonList.append($deleteButton); - $li.data('objectID', data.returnValues.attachments[$internalFileID].attachmentID); + $li.data('objectID', attachmentData.attachmentID); - if (this._wysiwygContainerID) { - if (data.returnValues.attachments[$internalFileID].tinyURL) { - var $insertThumbnail = $('
  • ' + WCF.Language.get('wcf.attachment.insertThumbnail') + '
    • ').appendTo($buttonList); - var $insertOriginal = $('
  • ' + WCF.Language.get('wcf.attachment.insertFull') + '
    • ').appendTo($buttonList); + if (this._editorId) { + if (attachmentData.tinyURL) { + var $insertThumbnail = $('
  • ' + WCF.Language.get('wcf.attachment.insertThumbnail') + '
    • ').appendTo($buttonList); + var $insertOriginal = $('
  • ' + WCF.Language.get('wcf.attachment.insertFull') + '
    • ').appendTo($buttonList); $insertThumbnail.children('span.button').click($.proxy(this._insert, this)); $insertOriginal.children('span.button').click($.proxy(this._insert, this)); } else { - var $insertPlain = $('
  • ' + WCF.Language.get('wcf.attachment.insert') + '
    • '); + var $insertPlain = $('
  • ' + WCF.Language.get('wcf.attachment.insert') + '
    • '); $insertPlain.appendTo($buttonList).children('span.button').click($.proxy(this._insert, this)); } } @@ -364,7 +361,7 @@ WCF.Attachment.Upload = WCF.Upload.extend({ this._autoInsert.splice(this._autoInsert.indexOf(uploadID), 1); if (!$li.hasClass('uploadFailed')) { - WCF.System.Event.fireEvent('com.woltlab.wcf.attachment', 'autoInsert_' + this._wysiwygContainerID, { + WCF.System.Event.fireEvent('com.woltlab.wcf.attachment', 'autoInsert_' + this._editorId, { attachment: '[attach=' + data.returnValues.attachments[$internalFileID].attachmentID + '][/attach]', uploadID: uploadID }); @@ -387,25 +384,20 @@ WCF.Attachment.Upload = WCF.Upload.extend({ /** * Inserts an attachment into WYSIWYG editor contents. * - * @param object event - * @param integer attachmentID + * @param {Event} event */ - _insert: function(event, attachmentID) { - var $attachmentID = (event === null) ? attachmentID : $(event.currentTarget).data('objectID'); - var $insertFull = (event !== null) ? $(event.currentTarget).hasClass('jsButtonAttachmentInsertFull') : false; - - if ($.browser.redactor) { - $('#' + this._wysiwygContainerID).redactor('wbbcode.insertAttachment', $attachmentID, $insertFull); - } + _insert: function(event) { + WCF.System.Event.fireEvent('com.woltlab.wcf.redactor2', 'insertAttachment_' + this._editorId, { + attachmentId: elData(event.currentTarget, 'object-id'), + url: elData(event.currentTarget, 'url') + }); }, /** * Inserts all attachments at once. */ _insertAll: function() { - this._fileListSelector.children('li:not(.uploadFailed)').each($.proxy(function(index, attachment) { - this._insert(null, $(attachment).data('objectID')); - }, this)); + this._fileListSelector.children('li:not(.uploadFailed)').find('.jsButtonAttachmentInsertThumbnail, .jsButtonAttachmentInsertPlain').trigger('click'); }, /** -- 2.20.1