Fixed attachments not being converted inside Redactor
authorAlexander Ebert <ebert@woltlab.com>
Tue, 9 Aug 2016 13:34:55 +0000 (15:34 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Tue, 9 Aug 2016 13:34:55 +0000 (15:34 +0200)
com.woltlab.wcf/templates/messageFormAttachments.tpl
wcfsetup/install/files/js/WCF.Attachment.js
wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Metacode.js

index 0cd0fde9742618313552a812a45571224d74c88f..071e936cc176d1e5e2a198a407520ae8f4c4e4ec 100644 (file)
@@ -1,7 +1,7 @@
 <div class="jsOnly formAttachmentContent messageTabMenuContent" id="attachments_{if $wysiwygSelector|isset}{$wysiwygSelector}{else}text{/if}">
        <ul class="formAttachmentList clearfix"{if !$attachmentHandler->getAttachmentList()|count} style="display: none"{/if}>
                {foreach from=$attachmentHandler->getAttachmentList() item=$attachment}
-                       <li class="box64" data-object-id="{@$attachment->attachmentID}" data-height="{@$attachment->height}" data-width="{@$attachment->width}">
+                       <li class="box64" data-object-id="{@$attachment->attachmentID}" data-height="{@$attachment->height}" data-width="{@$attachment->width}" data-is-image="{@$attachment->isImage}">
                                {if $attachment->tinyThumbnailType}
                                        <img src="{link controller='Attachment' object=$attachment}tiny=1{/link}" alt="" class="attachmentTinyThumbnail">
                                {else}
@@ -17,8 +17,8 @@
                                        <ul class="buttonGroup">
                                                <li><span class="button small jsDeleteButton" data-object-id="{@$attachment->attachmentID}" data-confirm-message="{lang}wcf.attachment.delete.sure{/lang}">{lang}wcf.global.button.delete{/lang}</span></li>
                                                {if $attachment->isImage}
-                                                       <li><span class="button small jsButtonAttachmentInsertThumbnail" data-object-id="{@$attachment->attachmentID}">{lang}wcf.attachment.insertThumbnail{/lang}</span></li>
-                                                       <li><span class="button small jsButtonAttachmentInsertFull" data-object-id="{@$attachment->attachmentID}">{lang}wcf.attachment.insertFull{/lang}</span></li>
+                                                       <li><span class="button small jsButtonAttachmentInsertThumbnail" data-object-id="{@$attachment->attachmentID}" data-url="{link controller='Attachment' object=$attachment}thumbnail=1{/link}">{lang}wcf.attachment.insertThumbnail{/lang}</span></li>
+                                                       <li><span class="button small jsButtonAttachmentInsertFull" data-object-id="{@$attachment->attachmentID}" data-url="{link controller='Attachment' object=$attachment}{/link}">{lang}wcf.attachment.insertFull{/lang}</span></li>
                                                {else}
                                                        <li><span class="button small jsButtonInsertAttachment" data-object-id="{@$attachment->attachmentID}">{lang}wcf.attachment.insert{/lang}</span></li>
                                                {/if}
index b349b0d336dbdd54b9bbc1dd7f5b2b62ab752541..9a95ff90a960ba46c0240209f98a70f9bb04fdc1 100644 (file)
@@ -87,9 +87,32 @@ WCF.Attachment.Upload = WCF.Upload.extend({
                        WCF.System.Event.addListener('com.woltlab.wcf.redactor2', 'submit_' + this._editorId, $.proxy(this._submitInline, this));
                        WCF.System.Event.addListener('com.woltlab.wcf.redactor2', 'reset_' + this._editorId, $.proxy(this._reset, this));
                        
+                       WCF.System.Event.addListener('com.woltlab.wcf.redactor2', 'metacode_attach', (function(data) {
+                               var images = this._getImageAttachments();
+                               var attachmentId = data.attributes[0] || 0;
+                               if (images.hasOwnProperty(attachmentId)) {
+                                       var thumbnail = data.attributes[2];
+                                       thumbnail = (thumbnail === true || thumbnail === 'true');
+                                       
+                                       var image = elCreate('img');
+                                       image.className = 'woltlabAttachment';
+                                       image.src = images[attachmentId][(thumbnail ? 'thumbnailUrl' : 'url')];
+                                       elData(image, 'attachment-id', attachmentId);
+                                       
+                                       var float = data.attributes[1] || 'none';
+                                       if (float === 'left') image.classList.add('messageFloatObjectLeft');
+                                       else if (float === 'right') image.classList.add('messageFloatObjectRight');
+                                       
+                                       var metacode = data.metacode;
+                                       metacode.parentNode.insertBefore(image, metacode);
+                                       elRemove(metacode);
+                                       
+                                       data.cancel = true;
+                               }
+                       }).bind(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));
                }
        },
        
@@ -118,18 +141,22 @@ WCF.Attachment.Upload = WCF.Upload.extend({
        /**
         * Sets the attachments representing an image.
         * 
-        * @param       object          data
+        * @return      {Object}
         */
-       _getImageAttachments: function(data) {
+       _getImageAttachments: function() {
+               var images = {};
+               
                this._fileListSelector.children('li').each(function(index, attachment) {
                        var $attachment = $(attachment);
-                       if ($attachment.children('img.attachmentTinyThumbnail').length) {
-                               data.imageAttachments[parseInt($attachment.data('objectID'))] = {
-                                       height: parseInt($attachment.data('height')),
-                                       width: parseInt($attachment.data('width'))
+                       if ($attachment.data('isImage')) {
+                               images[~~$attachment.data('objectID')] = {
+                                       thumbnailUrl: $attachment.find('.jsButtonAttachmentInsertThumbnail').data('url'),
+                                       url: $attachment.find('.jsButtonAttachmentInsertFull').data('url')
                                };
                        }
                });
+               
+               return images;
        },
        
        /**
@@ -299,6 +326,7 @@ WCF.Attachment.Upload = WCF.Upload.extend({
                                        
                                        $li.data('height', attachmentData.height);
                                        $li.data('width', attachmentData.width);
+                                       elData($li[0], 'is-image', attachmentData.isImage);
                                }
                                // show file icon
                                else {
index 8aff60b420b8cf2c40e3c7838b7dff02a14012f9..c36a3dbf277966e9f66f3ec307b3766e016e2a9c 100644 (file)
@@ -6,7 +6,7 @@
  * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module     WoltLabSuite/Core/Ui/Redactor/Metacode
  */
-define(['Dom/Util'], function(DomUtil) {
+define(['EventHandler', 'Dom/Util'], function(EventHandler, DomUtil) {
        "use strict";
        
        /**
@@ -22,11 +22,21 @@ define(['Dom/Util'], function(DomUtil) {
                        var div = elCreate('div');
                        div.innerHTML = element.textContent;
                        
-                       var attributes, metacode, metacodes = elByTag('woltlab-metacode', div), name, tagClose, tagOpen;
+                       var attributes, data, metacode, metacodes = elByTag('woltlab-metacode', div), name, tagClose, tagOpen;
                        while (metacodes.length) {
                                metacode = metacodes[0];
                                name = elData(metacode, 'name');
-                               attributes = elData(metacode, 'attributes');
+                               attributes = this._parseAttributes(elData(metacode, 'attributes'));
+                               
+                               data = {
+                                       attributes: attributes,
+                                       cancel: false,
+                                       metacode: metacode
+                               };
+                               EventHandler.fire('com.woltlab.wcf.redactor2', 'metacode_' + name, data);
+                               if (data.cancel === true) {
+                                       continue;
+                               }
                                
                                tagOpen = this._getOpeningTag(name, attributes);
                                tagClose = this._getClosingTag(name);
@@ -50,29 +60,19 @@ define(['Dom/Util'], function(DomUtil) {
                 * Returns a text node representing the opening bbcode tag.
                 * 
                 * @param       {string}        name            bbcode tag
-                * @param       {string}        attributes      base64- and JSON-encoded attributes
+                * @param       {Array}         attributes      list of attributes
                 * @returns     {Text}          text node containing the opening bbcode tag
                 * @protected
                 */
                _getOpeningTag: function(name, attributes) {
-                       try {
-                               attributes = JSON.parse(atob(attributes));
-                       }
-                       catch (e) { /* invalid base64 data or invalid json */ }
-                       
-                       if (!Array.isArray(attributes)) {
-                               attributes = [];
-                       }
-                       
                        var buffer = '[' + name;
                        if (attributes.length) {
+                               buffer += '=';
+                               
                                for (var i = 0, length = attributes.length; i < length; i++) {
-                                       if (!/^'.*'$/.test(attributes[i])) {
-                                               attributes[i] = "'" + attributes[i] + "'";
-                                       }
+                                       if (i > 0) buffer += ",";
+                                       buffer += "'" + attributes[i] + "'";
                                }
-                               
-                               buffer += '=' + attributes.join(',');
                        }
                        
                        return document.createTextNode(buffer + ']');
@@ -149,6 +149,37 @@ define(['Dom/Util'], function(DomUtil) {
                        }
                        
                        return paragraph;
+               },
+               
+               /**
+                * Parses the attributes string.
+                * 
+                * @param       {string}        attributes      base64- and JSON-encoded attributes
+                * @return      {Array}         list of parsed attributes
+                * @protected
+                */
+               _parseAttributes: function(attributes) {
+                       try {
+                               attributes = JSON.parse(atob(attributes));
+                       }
+                       catch (e) { /* invalid base64 data or invalid json */ }
+                       
+                       if (!Array.isArray(attributes)) {
+                               return [];
+                       }
+                       
+                       var attribute, parsedAttributes = [];
+                       for (var i = 0, length = attributes.length; i < length; i++) {
+                               attribute = attributes[i];
+                               
+                               if (typeof attribute === 'string') {
+                                       attribute = attribute.replace(/^'(.*)'$/, '$1');
+                               }
+                               
+                               parsedAttributes.push(attribute);
+                       }
+                       
+                       return parsedAttributes;
                }
        };
 });