From: Alexander Ebert Date: Tue, 24 May 2016 14:08:41 +0000 (+0200) Subject: Added proper support for font size and color X-Git-Tag: 3.0.0_Beta_1~1645 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=8101152161d308504b75a41a1a16b5b8fdf74b43;p=GitHub%2FWoltLab%2FWCF.git Added proper support for font size and color --- diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl index 6208299c3c..943c2cc7b4 100644 --- a/com.woltlab.wcf/templates/wysiwyg.tpl +++ b/com.woltlab.wcf/templates/wysiwyg.tpl @@ -28,7 +28,7 @@ var config = { buttons: buttons, minHeight: 200, - plugins: ['alignment', 'source', 'table', 'WoltLabColor', 'WoltLabDropdown', 'WoltLabEvent', 'WoltLabLink', 'WoltLabQuote'], + plugins: ['alignment', 'source', 'table', 'WoltLabColor', 'WoltLabDropdown', 'WoltLabEvent', 'WoltLabLink', 'WoltLabQuote', 'WoltLabSize'], toolbarFixed: false, woltlab: { autosave: autosave, @@ -68,7 +68,8 @@ '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabLink.js?v={@LAST_UPDATE_TIME}', {if $__wcf->session->getPermission('admin.content.cms.canUseMedia')}'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabMedia.js?v={@LAST_UPDATE_TIME}',{/if} '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabMention.js?v={@LAST_UPDATE_TIME}', - '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabQuote.js?v={@LAST_UPDATE_TIME}' + '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabQuote.js?v={@LAST_UPDATE_TIME}', + '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabSize.js?v={@LAST_UPDATE_TIME}' ], function() { WCF.System.Dependency.Manager.invoke(callbackIdentifier); diff --git a/com.woltlab.wcf/templates/wysiwygToolbar.tpl b/com.woltlab.wcf/templates/wysiwygToolbar.tpl index d5a3dd44ed..4f6066f3e6 100644 --- a/com.woltlab.wcf/templates/wysiwygToolbar.tpl +++ b/com.woltlab.wcf/templates/wysiwygToolbar.tpl @@ -12,7 +12,8 @@ buttonOptions = { underline: { icon: 'fa-underline', title: '{lang}wcf.editor.button.underline{/lang}' }, woltlabColor: { icon: 'fa-paint-brush', title: '{lang}wcf.editor.button.color{/lang}' }, woltlabMedia: { icon: 'fa-file-o', title: '{lang}wcf.editor.button.media{/lang}' }, - woltlabQuote: { icon: 'fa-comment', title: '{lang}wcf.editor.button.quote{/lang}' } + woltlabQuote: { icon: 'fa-comment', title: '{lang}wcf.editor.button.quote{/lang}' }, + woltlabSize: { icon: 'fa-text-height', title: '{lang}wcf.editor.button.size{/lang}' } }; buttons = []; @@ -34,10 +35,10 @@ buttons.push('alignment'); {if $__wcf->getBBCodeHandler()->isAvailableBBCode('font')} buttons.push('fontfamily'); {/if} +*} {if $__wcf->getBBCodeHandler()->isAvailableBBCode('size')} - buttons.push('fontsize'); + buttons.push('woltlabSize'); {/if} -*} {if $__wcf->getBBCodeHandler()->isAvailableBBCode('color')} buttons.push('woltlabColor'); {/if} diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabSize.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabSize.js new file mode 100644 index 0000000000..12e5efeba4 --- /dev/null +++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabSize.js @@ -0,0 +1,57 @@ +$.Redactor.prototype.WoltLabSize = function() { + "use strict"; + + return { + init: function() { + var size, sizes = [8, 10, 12, 14, 18, 24, 36]; + var callback = this.WoltLabSize.setSize.bind(this); + var dropdown = {}; + + for (var i = 0, length = sizes.length; i < length; i++) { + size = sizes[i]; + + dropdown['size_' + size] = { + title: size, + func: callback + }; + } + + dropdown['removeSize'] = { + title: 'remove size', + func: this.WoltLabSize.removeSize.bind(this) + }; + + var button = this.button.add('woltlabSize', ''); + this.button.addDropdown(button, dropdown); + + // add styling + button.data('dropdown').find('a').each(function(index, link) { + if (link.className.match(/redactor-dropdown-size_(\d{1,2})/)) { + link.parentNode.classList.add('woltlab-size-' + RegExp.$1); + link.parentNode.classList.add('woltlab-size-selection'); + } + }); + + }, + + setSize: function(key) { + require(['WoltLab/WCF/Ui/Redactor/Format'], (function(UiRedactorFormat) { + this.selection.save(); + + UiRedactorFormat.format(this.$editor[0], 'woltlab-size', 'woltlab-size-' + key.replace(/^size_/, '')); + + this.selection.restore(); + }).bind(this)); + }, + + removeSize: function() { + require(['WoltLab/WCF/Ui/Redactor/Format'], (function(UiRedactorFormat) { + this.selection.save(); + + UiRedactorFormat.removeFormat(this.$editor[0], 'woltlab-size'); + + this.selection.restore(); + }).bind(this)); + } + }; +}; diff --git a/wcfsetup/install/files/lib/system/html/input/filter/MessageHtmlInputFilter.class.php b/wcfsetup/install/files/lib/system/html/input/filter/MessageHtmlInputFilter.class.php index 5e4a30a998..3c212884e5 100644 --- a/wcfsetup/install/files/lib/system/html/input/filter/MessageHtmlInputFilter.class.php +++ b/wcfsetup/install/files/lib/system/html/input/filter/MessageHtmlInputFilter.class.php @@ -34,6 +34,9 @@ class MessageHtmlInputFilter implements IHtmlInputFilter { $definition->addAttribute('blockquote', 'data-quote-title', 'Text'); $definition->addAttribute('blockquote', 'data-quote-url', 'URI'); + $definition->addElement('woltlab-color', 'Inline', 'Inline', '', ['class' => 'Text']); + $definition->addElement('woltlab-size', 'Inline', 'Inline', '', ['class' => 'Text']); + $definition->addElement('woltlab-mention', 'Inline', 'Inline', '', [ 'data-user-id' => 'Number', 'data-username' => 'Text' diff --git a/wcfsetup/install/files/lib/system/html/metacode/converter/ColorMetacodeConverter.class.php b/wcfsetup/install/files/lib/system/html/metacode/converter/ColorMetacodeConverter.class.php index 7a593c94ce..55de4e4aad 100644 --- a/wcfsetup/install/files/lib/system/html/metacode/converter/ColorMetacodeConverter.class.php +++ b/wcfsetup/install/files/lib/system/html/metacode/converter/ColorMetacodeConverter.class.php @@ -10,11 +10,11 @@ class ColorMetacodeConverter extends AbstractMetacodeConverter { * @inheritDoc */ public function convert(\DOMDocumentFragment $fragment, array $attributes) { - $woltlabColor = $fragment->ownerDocument->createElement('woltlab-color'); - $woltlabColor->setAttribute('class', 'woltlab-color-' . strtoupper(substr($attributes[0], 1))); - $woltlabColor->appendChild($fragment); + $element = $fragment->ownerDocument->createElement('woltlab-color'); + $element->setAttribute('class', 'woltlab-color-' . strtoupper(substr($attributes[0], 1))); + $element->appendChild($fragment); - return $woltlabColor; + return $element; } /** diff --git a/wcfsetup/install/files/lib/system/html/metacode/converter/SizeMetacodeConverter.class.php b/wcfsetup/install/files/lib/system/html/metacode/converter/SizeMetacodeConverter.class.php new file mode 100644 index 0000000000..03881f05f8 --- /dev/null +++ b/wcfsetup/install/files/lib/system/html/metacode/converter/SizeMetacodeConverter.class.php @@ -0,0 +1,37 @@ +ownerDocument->createElement('woltlab-size'); + $element->setAttribute('class', 'woltlab-size-' . $attributes[0]); + $element->appendChild($fragment); + + return $element; + } + + /** + * @inheritDoc + */ + public function validateAttributes(array $attributes) { + if (count($attributes) !== 1) { + return false; + } + + // validates if size is allowed + if (!in_array($attributes[0], $this->sizes)) { + return false; + } + + return true; + } +} diff --git a/wcfsetup/install/files/lib/system/html/node/AbstractHtmlNode.class.php b/wcfsetup/install/files/lib/system/html/node/AbstractHtmlNode.class.php index 0cef89907b..fa87694640 100644 --- a/wcfsetup/install/files/lib/system/html/node/AbstractHtmlNode.class.php +++ b/wcfsetup/install/files/lib/system/html/node/AbstractHtmlNode.class.php @@ -8,6 +8,8 @@ namespace wcf\system\html\node; abstract class AbstractHtmlNode implements IHtmlNode { protected $tagName = ''; + const PLACEHOLDER = ''; + public function getTagName() { return $this->tagName; } diff --git a/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeProcessor.class.php b/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeProcessor.class.php index eb85e8e846..6f283188e4 100644 --- a/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeProcessor.class.php +++ b/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeProcessor.class.php @@ -13,5 +13,7 @@ class HtmlOutputNodeProcessor extends HtmlNodeProcessor { // TODO: this should be dynamic to some extent $this->invokeHtmlNode(new HtmlOutputNodeBlockquote()); $this->invokeHtmlNode(new HtmlOutputNodeWoltlabMention()); + $this->invokeHtmlNode(new HtmlOutputNodeWoltlabColor()); + $this->invokeHtmlNode(new HtmlOutputNodeWoltlabSize()); } } diff --git a/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabColor.class.php b/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabColor.class.php new file mode 100644 index 0000000000..5db70669c7 --- /dev/null +++ b/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabColor.class.php @@ -0,0 +1,36 @@ +[A-F0-9]{6})$~', $element->getAttribute('class'), $matches)) { + $nodeIdentifier = StringUtil::getRandomID(); + $htmlNodeProcessor->addNodeData($this, $nodeIdentifier, [ + 'color' => $matches['color'] + ]); + + $htmlNodeProcessor->renameTag($element, 'wcfNode-' . $nodeIdentifier); + } + } + } + + public function replaceTag(array $data) { + return '' . self::PLACEHOLDER . ''; + } +} diff --git a/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabSize.class.php b/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabSize.class.php new file mode 100644 index 0000000000..f85a8b7497 --- /dev/null +++ b/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabSize.class.php @@ -0,0 +1,36 @@ +[0-9]{1,2})$~', $element->getAttribute('class'), $matches)) { + $nodeIdentifier = StringUtil::getRandomID(); + $htmlNodeProcessor->addNodeData($this, $nodeIdentifier, [ + 'size' => $matches['size'] + ]); + + $htmlNodeProcessor->renameTag($element, 'wcfNode-' . $nodeIdentifier); + } + } + } + + public function replaceTag(array $data) { + return '' . self::PLACEHOLDER . ''; + } +} diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss index 7c3f2302ab..b353004107 100644 --- a/wcfsetup/install/files/style/ui/redactor.scss +++ b/wcfsetup/install/files/style/ui/redactor.scss @@ -443,3 +443,12 @@ } } } + +/* font size */ +.woltlab-size-8 { font-size: 8px; } +.woltlab-size-10 { font-size: 10px; } +.woltlab-size-12 { font-size: 12px; } +.woltlab-size-14 { font-size: 14px; } +.woltlab-size-18 { font-size: 18px; } +.woltlab-size-24 { font-size: 24px; } +.woltlab-size-36 { font-size: 36px; } diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml index 94d2381dbd..9910b56cb6 100644 --- a/wcfsetup/install/lang/de.xml +++ b/wcfsetup/install/lang/de.xml @@ -2118,6 +2118,7 @@ Fehler sind beispielsweise: + diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml index 5f15b487ce..93558b0fff 100644 --- a/wcfsetup/install/lang/en.xml +++ b/wcfsetup/install/lang/en.xml @@ -2128,6 +2128,7 @@ Errors are: +