Improved event handling in Redactor

diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl
index d27fdea03c5277699b1bac8bcc3130881ae8878d..94e517484e5dd1e396e1f5324355c8b3ddcde21e 100644 (file)
--- a/com.woltlab.wcf/templates/wysiwyg.tpl
+++ b/com.woltlab.wcf/templates/wysiwyg.tpl
@@ -45,6 +45,7 @@
                                'wcf.editor.code.file.description': '{lang}wcf.editor.code.file.description{/lang}',
                                'wcf.editor.code.highlighter': '{lang}wcf.editor.code.highlighter{/lang}',
                                'wcf.editor.code.highlighter.description': '{lang}wcf.editor.code.highlighter.description{/lang}',
+                               'wcf.editor.code.highlighter.detect': '{lang}wcf.editor.code.highlighter.detect{/lang}',
                                'wcf.editor.code.line': '{lang}wcf.editor.code.line{/lang}',
                                'wcf.editor.code.line.description': '{lang}wcf.editor.code.line.description{/lang}',
                                'wcf.editor.code.title': '{lang __literal=true}wcf.editor.code.title{/lang}',

diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabEvent.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabEvent.js
index 9ef9749d2475f7a26569964d199607d8cba9ef27..8f52ad7e9db0eb0274b409cec09a6003e6fc4ce5 100644 (file)
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabEvent.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabEvent.js
@@ -16,7 +16,7 @@ $.Redactor.prototype.WoltLabEvent = function() {
                        this.observe.load = (function() {
                                observeLoad.call(this);
                                
-                               EventHandler.fire('com.woltlab.wcf.redactor', 'observe_load_' + elementId, {
+                               EventHandler.fire('com.woltlab.wcf.redactor2', 'observe_load_' + elementId, {
                                        editor: this.$editor[0]
                                });
                        }).bind(this);

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Redactor/Code.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Redactor/Code.js
index ebdf43455e141f0dcfc379b61de099b078440777..45e04ec966f01728e544a509bf761dc29fac8b44 100644 (file)
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Redactor/Code.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Redactor/Code.js
@@ -59,7 +59,6 @@ define(['EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Di
                                
                                this._setTitle(pre);
                                
-                               pre.removeEventListener(WCF_CLICK_EVENT, this._callbackEdit);
                                pre.addEventListener(WCF_CLICK_EVENT, this._callbackEdit);
                                
                                // there must be some kind of element after the <pre>
@@ -80,10 +79,14 @@ define(['EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Di
                 * @protected
                 */
                _observeLoad: function() {
+                       this._editor.events.stopDetectChanges();
+                       
                        elBySelAll('pre', this._editor.$editor[0], (function(pre) {
                                pre.addEventListener(WCF_CLICK_EVENT, this._callbackEdit);
                                this._setTitle(pre);
                        }).bind(this));
+                       
+                       this._editor.events.startDetectChanges();
                },
                
                /**
@@ -124,6 +127,8 @@ define(['EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Di
                _save: function(event) {
                        event.preventDefault();
                        
+                       this._editor.events.stopDetectChanges();
+                       
                        var id = 'redactor-code-' + this._elementId;
                        
                        ['file', 'highlighter', 'line'].forEach((function (attr) {
@@ -133,6 +138,8 @@ define(['EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Di
                        this._setTitle(this._pre);
                        this._editor.caret.after(this._pre);
                        
+                       this._editor.events.startDetectChanges();
+                       
                        UiDialog.close(this);
                },
                
@@ -149,10 +156,14 @@ define(['EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Di
                        //noinspection JSUnresolvedVariable
                        highlighter = (this._editor.opts.woltlab.highlighters.hasOwnProperty(highlighter)) ? this._editor.opts.woltlab.highlighters[highlighter] : '';
                        
-                       elData(pre, 'display-value', Language.get('wcf.editor.code.title', {
+                       var title = Language.get('wcf.editor.code.title', {
                                file: file,
                                highlighter: highlighter
-                       }));
+                       });
+                       
+                       if (elData(pre, 'title') !== title) {
+                               elData(pre, 'title', title);
+                       }
                },
                
                _dialogSetup: function() {
@@ -169,7 +180,7 @@ define(['EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Di
                                                elById(idButtonSave).addEventListener(WCF_CLICK_EVENT, this._save.bind(this));
                                                
                                                // set highlighters
-                                               var highlighters = '<option value="">' + Language.get('wcf.global.noSelection') + '</option>';
+                                               var highlighters = '<option value="">' + Language.get('wcf.editor.code.highlighter.detect') + '</option>';
                                                
                                                var value, values = [];
                                                //noinspection JSUnresolvedVariable

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Redactor/Quote.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Redactor/Quote.js
index ceddeaf564326bf085bf5ed4159532c0a7960ff2..f88a4272a981869c93c90449f730ebaf4f1622b2 100644 (file)
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Redactor/Quote.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Redactor/Quote.js
@@ -26,7 +26,7 @@ define(['EventHandler', 'Language', 'Dom/Util', 'Ui/Dialog'], function(EventHand
                 * @param       {object}        editor          editor element
                 */
                initEditor: function(editorId, editor) {
-                       EventHandler.add('com.woltlab.wcf.redactor', 'observe_load_' + editorId, (function(data) {
+                       EventHandler.add('com.woltlab.wcf.redactor2', 'observe_load_' + editorId, (function(data) {
                                this.observeAll(data.editor);
                        }).bind(this));
                        
@@ -109,7 +109,6 @@ define(['EventHandler', 'Language', 'Dom/Util', 'Ui/Dialog'], function(EventHand
                _observe: function(element, updateHeader) {
                        if (_callbackEdit === null) _callbackEdit = this.edit.bind(this);
                        
-                       element.removeEventListener(WCF_CLICK_EVENT, _callbackEdit);
                        element.addEventListener(WCF_CLICK_EVENT, _callbackEdit);
                        
                        if (updateHeader) this._updateHeader(element);

diff --git a/wcfsetup/install/files/style/bbcode/code.scss b/wcfsetup/install/files/style/bbcode/code.scss
index eedcfa9d83ec4f1f102819cf5d43ba12b381f1fc..8672a96a4f2393e8fad78f062b4137b5e0390832 100644 (file)
--- a/wcfsetup/install/files/style/bbcode/code.scss
+++ b/wcfsetup/install/files/style/bbcode/code.scss
@@ -10,7 +10,7 @@
        white-space: pre;
        
        &::before {
-               content: attr(data-display-value);
+               content: attr(data-title);
                cursor: pointer;
                display: block;
                font-family: $wcfFontFamily;

diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index 75979fd2a6c0dd8b657d2179b51d38a4a84d0062..90c360b08bd8695f1a21afb0eb6d824aa620c0d1 100644 (file)
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -2138,6 +2138,7 @@ Fehler sind beispielsweise:
                <item name="wcf.editor.code.file.description"><![CDATA[Optional: Legen Sie einen anzuzeigenden Dateinamen fest.]]></item>
                <item name="wcf.editor.code.highlighter"><![CDATA[Syntax-Hervorhebung]]></item>
                <item name="wcf.editor.code.highlighter.description"><![CDATA[Die farbliche Hervorherbung wird im Editor nicht angezeigt.]]></item>
+               <item name="wcf.editor.code.highlighter.detect"><![CDATA[(Automatische Erkennung)]]></item>
                <item name="wcf.editor.code.line"><![CDATA[Start-Zeilennummer]]></item>
                <item name="wcf.editor.code.line.description"><![CDATA[Optional: Legen Sie den Wert fest, ab dem die Zeilennummierung startet.]]></item>
                <item name="wcf.editor.code.title"><![CDATA[{if $highlighter}{$highlighter}{else}Quellcode{/if}{if $file} - {$file}{/if}]]></item>

diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index 3d3f6d6f77381b09b616b532fcb025db50e96365..40908fd35efb94c0534fed62415c80e852ac9f02 100644 (file)
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -2149,6 +2149,7 @@ Errors are:
                <item name="wcf.editor.code.file.description"><![CDATA[Optional: Specify the displayed filename.]]></item>
                <item name="wcf.editor.code.highlighter"><![CDATA[Syntax Highlighting]]></item>
                <item name="wcf.editor.code.highlighter.description"><![CDATA[Highlighting is not displayed within the editor.]]></item>
+               <item name="wcf.editor.code.highlighter.detect"><![CDATA[(Automatically Detect)]]></item>
                <item name="wcf.editor.code.line"><![CDATA[Start Line Number]]></item>
                <item name="wcf.editor.code.line.description"><![CDATA[Optional: Specify the start for line enumeration.]]></item>
                <item name="wcf.editor.code.title"><![CDATA[{if $highlighter}{$highlighter}{else}Code{/if}{if $file} - {$file}{/if}]]></item>