From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 26 Mar 2014 16:33:24 +0000 (+0100)
Subject: Redactor buttons now allow both FontAwesome classes and images
X-Git-Tag: 2.1.0_Alpha_1~957
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=3f5d34eb9eb6c9c325b4556cbf72f864d623b418;p=GitHub%2FWoltLab%2FWCF.git

Redactor buttons now allow both FontAwesome classes and images
---

diff --git a/com.woltlab.wcf/bbcode.xml b/com.woltlab.wcf/bbcode.xml
index 92b358fa76..5d889f89ce 100644
--- a/com.woltlab.wcf/bbcode.xml
+++ b/com.woltlab.wcf/bbcode.xml
@@ -95,7 +95,7 @@
 				<attribute name="0"></attribute>
 				<attribute name="1"></attribute>
 			</attributes>
-			<wysiwygicon>quote.png</wysiwygicon>
+			<wysiwygicon>fa-quote-left</wysiwygicon>
 			<buttonlabel>wcf.bbcode.button.quote</buttonlabel>
 		</bbcode>
 		<bbcode name="code">
@@ -107,7 +107,7 @@
 				</attribute>
 			</attributes>
 			<sourcecode>1</sourcecode>
-			<wysiwygicon>code.png</wysiwygicon>
+			<wysiwygicon>fa-code</wysiwygicon>
 			<buttonlabel>wcf.bbcode.button.code</buttonlabel>
 		</bbcode>
 		<bbcode name="img">
@@ -156,7 +156,7 @@
 			<attributes>
 				<attribute name="0"></attribute>
 			</attributes>
-			<wysiwygicon>spoiler.png</wysiwygicon>
+			<wysiwygicon>fa-eye-slash</wysiwygicon>
 			<buttonlabel>wcf.bbcode.button.spoiler</buttonlabel>
 		</bbcode>
 		<bbcode name="tt">
@@ -164,7 +164,7 @@
 			<htmlclose>code</htmlclose>
 			<allowedchildren>none</allowedchildren>
 			<sourcecode>1</sourcecode>
-			<wysiwygicon>inlineCode.png</wysiwygicon>
+			<wysiwygicon>fa-font</wysiwygicon>
 			<buttonlabel>wcf.bbcode.button.inlineCode</buttonlabel>
 		</bbcode>
 		
diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl
index abe703dfaf..365d41e819 100644
--- a/com.woltlab.wcf/templates/wysiwyg.tpl
+++ b/com.woltlab.wcf/templates/wysiwyg.tpl
@@ -1,6 +1,7 @@
 <link rel="stylesheet" type="text/css" href="{@$__wcf->getPath()}js/3rdParty/redactor/redactor.css" />
 <script data-relocate="true">
-var __REDACTOR_BUTTONS = [ {implode from=$__wcf->getBBCodeHandler()->getButtonBBCodes() item=__bbcode}{ icon: '{@$__wcf->getPath()}/icon/{$__bbcode->wysiwygIcon}', label: '{$__bbcode->buttonLabel|language}', name: '{$__bbcode->bbcodeTag}' }{/implode} ];
+var __REDACTOR_ICON_PATH = '{@$__wcf->getPath()}icon/';
+var __REDACTOR_BUTTONS = [ {implode from=$__wcf->getBBCodeHandler()->getButtonBBCodes() item=__bbcode}{ icon: '{$__bbcode->wysiwygIcon}', label: '{$__bbcode->buttonLabel|language}', name: '{$__bbcode->bbcodeTag}' }{/implode} ];
 var __REDACTOR_SMILIES = { {implode from=$defaultSmilies item=smiley}'{@$smiley->smileyCode|encodeJS}': '{@$smiley->getURL()|encodeJS}'{/implode} };
 var __REDACTOR_SOURCE_BBCODES = [ {implode from=$__wcf->getBBCodeHandler()->getSourceBBCodes() item=__bbcode}'{@$__bbcode->bbcodeTag}'{/implode} ];
 </script>
diff --git a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbutton.js b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbutton.js
index 6b3e771cac..168bd8383f 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbutton.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbutton.js
@@ -32,32 +32,17 @@ RedactorPlugins.wbutton = {
 	 */
 	_addBBCodeButton: function(data) {
 		var $buttonName = '__wcf_' + data.name;
-		this.buttonAdd($buttonName, data.label, this._insertBBCode);
+		var $button = this.buttonAdd($buttonName, data.label, this._insertBBCode);
 		this._bbcodes[$buttonName] = data.name;
 		
-		//
-		// TODO: These are hardcoded for now, since the API does not provide class names yet, this has to be changes
-		//
-		var $iconName = '';
-		switch (data.name) {
-			case 'code':
-				$iconName = 'fa-code';
-			break;
-			
-			case 'quote':
-				$iconName = 'fa-quote-left';
-			break;
-			
-			case 'spoiler':
-				$iconName = 'fa-eye-slash';
-			break;
-			
-			case 'tt':
-				$iconName = 'fa-font';
-			break;
+		// FontAwesome class name
+		if (data.icon.match(/^fa\-[a-z\-]+$/)) {
+			this.buttonAwesome($buttonName, data.icon);
+		}
+		else {
+			// image reference
+			$button.css('background-image', 'url(' + __REDACTOR_ICON_PATH + data.icon + ')');
 		}
-		
-		this.buttonAwesome($buttonName, $iconName);
 	},
 	
 	/**