8
0
Просмотр исходного кода

Other: Update button creation.

Maciej Gołaszewski 8 лет назад
Родитель
Сommit
d3b206f869

+ 2 - 2
packages/ckeditor5-highlight/src/highlightediting.js

@@ -37,8 +37,8 @@ export default class HighlightEditing extends Plugin {
 				type: 'marker'
 			},
 			{ model: 'pinkMarker', view: { name: 'mark', class: 'marker-pink' }, title: 'Pink Marker', color: '#ff6fff', type: 'marker' },
-			{ model: 'redPen', view: { name: 'mark', class: 'pen-red' }, title: 'Red Pen', color: '#ff0000', type: 'pen' },
-			{ model: 'bluePen', view: { name: 'mark', class: 'pen-blue' }, title: 'Blue Pen', color: '#0000ff', type: 'pen' }
+			{ model: 'redPen', view: { name: 'mark', class: 'pen-red' }, title: 'Red Pen', color: '#ff2929', type: 'pen' },
+			{ model: 'bluePen', view: { name: 'mark', class: 'pen-blue' }, title: 'Blue Pen', color: '#0091ff', type: 'pen' }
 		] );
 	}
 

+ 33 - 31
packages/ckeditor5-highlight/src/highlightui.js

@@ -12,14 +12,17 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import HighlightEditing from './highlightediting';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 
-import highlightIcon from '@ckeditor/ckeditor5-core/theme/icons/input.svg';
-import highlightRemoveIcon from '@ckeditor/ckeditor5-core/theme/icons/low-vision.svg';
+import markerIcon from './../theme/icons/marker.svg';
+import penIcon from './../theme/icons/pen.svg';
+import rubberIcon from '@ckeditor/ckeditor5-core/theme/icons/low-vision.svg';
 
 import Model from '@ckeditor/ckeditor5-ui/src/model';
 import createSplitButtonDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/createsplitbuttondropdown';
 import { closeDropdownOnBlur, closeDropdownOnExecute, focusDropdownContentsOnArrows } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 
+import './../theme/highlight.css';
+
 /**
  * The default Highlight UI plugin.
  *
@@ -44,15 +47,15 @@ export default class HighlightUI extends Plugin {
 	 * @inheritDoc
 	 */
 	init() {
-		const highlighters = this.editor.config.get( 'highlight' );
+		const options = this.editor.config.get( 'highlight' );
 
-		for ( const highlighter of highlighters ) {
-			this._addHighlighterButton( highlighter );
+		for ( const option of options ) {
+			this._addHighlighterButton( option );
 		}
 
 		this._addRemoveHighlightButton();
 
-		this._addDropdown( highlighters );
+		this._addDropdown( options );
 	}
 
 	/**
@@ -63,27 +66,34 @@ export default class HighlightUI extends Plugin {
 	_addRemoveHighlightButton() {
 		const t = this.editor.t;
 
-		this._addButton( 'removeHighlight', t( 'Remove highlighting' ), highlightRemoveIcon );
+		this._addButton( 'removeHighlight', t( 'Remove highlighting' ), rubberIcon );
 	}
 
 	/**
 	 * Creates toolbar button from provided highlight option.
 	 *
-	 * @param {module:highlight/highlightediting~HighlightOption} highlighter
+	 * @param {module:highlight/highlightediting~HighlightOption} option
 	 * @private
 	 */
-	_addHighlighterButton( highlighter ) {
-		const name = highlighter.name;
-		const command = this.editor.commands.get( name );
+	_addHighlighterButton( option ) {
+		const command = this.editor.commands.get( 'highlight' );
+
+		const icon = option.type === 'marker' ? markerIcon : penIcon;
 
-		this._addButton( name, highlighter.title, highlightIcon, decorateHighlightButton );
+		this._addButton( 'highlight:' + option.model, option.title, icon, option.model, decorateHighlightButton );
 
 		function decorateHighlightButton( button ) {
 			button.bind( 'isEnabled' ).to( command, 'isEnabled' );
 
+			button.extendTemplate( {
+				attributes: {
+					class: 'ck-highlight_button'
+				}
+			} );
+
 			button.iconView.extendTemplate( {
 				attributes: {
-					style: getIconStyleForHighlighter( highlighter.type, highlighter.color )
+					style: `color: ${ option.color }`
 				}
 			} );
 		}
@@ -98,7 +108,7 @@ export default class HighlightUI extends Plugin {
 	 * @param {Function} [decorateButton=()=>{}] Additional method for extending button.
 	 * @private
 	 */
-	_addButton( name, label, icon, decorateButton = () => {} ) {
+	_addButton( name, label, icon, value, decorateButton = () => {} ) {
 		const editor = this.editor;
 
 		editor.ui.componentFactory.add( name, locale => {
@@ -111,7 +121,7 @@ export default class HighlightUI extends Plugin {
 			} );
 
 			buttonView.on( 'execute', () => {
-				editor.execute( name );
+				editor.execute( 'highlight', { value } );
 				editor.editing.view.focus();
 			} );
 
@@ -129,6 +139,10 @@ export default class HighlightUI extends Plugin {
 	 * @private
 	 */
 	_addDropdown( highlighters ) {
+		if ( true ) {
+			return;
+		}
+
 		const editor = this.editor;
 		const t = editor.t;
 		const componentFactory = editor.ui.componentFactory;
@@ -141,7 +155,7 @@ export default class HighlightUI extends Plugin {
 			const model = new Model( {
 				label: t( 'Highlight' ),
 				withText: false,
-				icon: highlightIcon,
+				icon: markerIcon,
 				type: startingHighlighter.type,
 				color: startingHighlighter.color,
 				command: commandName
@@ -167,7 +181,7 @@ export default class HighlightUI extends Plugin {
 					type: highlighter.type,
 					color: highlighter.color,
 					command: commandName,
-					icon: highlightIcon
+					icon: markerIcon
 				} ) );
 
 				return buttonView;
@@ -181,7 +195,7 @@ export default class HighlightUI extends Plugin {
 				type: 'remove',
 				color: undefined,
 				command: 'removeHighlight',
-				icon: highlightRemoveIcon
+				icon: rubberIcon
 			} ) );
 
 			// Make toolbar button enabled when any button in dropdown is enabled.
@@ -229,18 +243,6 @@ function getBindingTargets( buttons, attribute ) {
 	return Array.prototype.concat( ...buttons.map( button => [ button, attribute ] ) );
 }
 
-// Returns style definition for highlighter button
-// @param {String} type Type of highlighter. One of: "marker", "pen", "remove".
-// @param {String} color Color of highlighter.
-function getIconStyleForHighlighter( type, color ) {
-	// Only return type for defined types "marker"/"pen". Return empty style otherwise (ie. for "remove" type).
-	if ( type === 'pen' ) {
-		return 'color:' + color;
-	} else if ( type === 'marker' ) {
-		return 'background-color:' + color;
-	}
-}
-
 // Rebinds model values to a new command.
 function bindModelToCommand( model, editor, commandName ) {
 	model.unbind( 'isOn' );
@@ -266,5 +268,5 @@ function bindIconStyle( dropdownView, model ) {
 		}
 	} );
 
-	iconView.bind( 'style' ).to( model, 'type', model, 'color', getIconStyleForHighlighter );
+	iconView.bind( 'style' ).to( model, 'color', color => `color:${ color }` );
 }

+ 7 - 5
packages/ckeditor5-highlight/tests/manual/highlight.html

@@ -13,25 +13,27 @@
 
 	.pen-red {
 		background-color: transparent;
-		color: #ff0000;
+		color: #ff2929;
 	}
 
 	.pen-blue {
 		background-color: transparent;
-		color: #0000ff;
+		color: #0091ff;
 	}
 
 </style>
 <div id="editor">
 	<p>Highlight feature example.</p>
-	<p>Here ares some markers:
+	<p>
+		Here are some markers:
 		<mark class="marker">yellow one</mark>, <mark class="marker-pink">pink one</mark> and <mark class="marker-green">green one</mark>.
 	</p>
-	<p>Here ares some pens:
+	<p>
+		Here ares some pens:
 		<mark class="pen-red">red pen</mark> and <mark class="pen-blue">blue one</mark>.
 	</p>
 	<figure class="image">
 		<img src="sample.jpg" alt="CKEditor logo" />
-		<figcaption>Some image with caption</figcaption>
+		<figcaption>Some image with caption and <mark class="marker">highlighted text</mark>.</figcaption>
 	</figure>
 </div>

+ 6 - 1
packages/ckeditor5-highlight/tests/manual/highlight.js

@@ -14,7 +14,12 @@ ClassicEditor
 		plugins: [ ArticlePluginSet, Highlight ],
 		toolbar: [
 			'headings',
-			'highlightDropdown',
+			'highlight:marker',
+			'highlight:greenMarker',
+			'highlight:pinkMarker',
+			'highlight:bluePen',
+			'highlight:redPen',
+			'removeHighlight',
 			'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
 		]
 	} )

+ 9 - 0
packages/ckeditor5-highlight/theme/highlight.css

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-highlight_button svg path:not(.ck-icon__fill) {
+	/* Do not inherit color from parent. */
+	fill: initial;
+}