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

Make font-size option configuration reflect dropdown items UI.

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

+ 12 - 1
packages/ckeditor5-font/src/fontsize/fontsizeui.js

@@ -13,8 +13,11 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import createListDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/list/createlistdropdown';
 
 import { normalizeOptions } from '../fontsize/utils';
+
 import fontSizeIcon from '../../theme/icons/font-size.svg';
 
+import '../../theme/fontsize.css';
+
 /**
  * @extends module:core/plugin~Plugin
  */
@@ -36,9 +39,17 @@ export default class FontSizeUI extends Plugin {
 				commandName: 'fontSize',
 				commandParam: option.model,
 				label: option.title,
-				class: option.class
+				class: 'ck-fontsize-option'
 			} );
 
+			if ( option.view && option.view.style ) {
+				itemModel.set( 'style', `font-size:${ option.view.style[ 'font-size' ] }` );
+			}
+
+			if ( option.view && option.view.class ) {
+				itemModel.set( 'class', `${ itemModel.class } ${ option.view.class }` );
+			}
+
 			itemModel.bind( 'isActive' ).to( command, 'value', value => value === option.model );
 
 			// Add the option to the collection.

+ 76 - 0
packages/ckeditor5-font/tests/fontsize/fontsizeui.js

@@ -119,6 +119,82 @@ describe( 'FontSizeUI', () => {
 			} );
 		} );
 
+		describe( 'config', () => {
+			describe( 'using presets', () => {
+				beforeEach( () => {
+					element = document.createElement( 'div' );
+					document.body.appendChild( element );
+
+					return ClassicTestEditor
+						.create( element, {
+							plugins: [ FontSizeEditing, FontSizeUI ],
+							fontSize: {
+								options: [ 'tiny', 'small', 'normal', 'big', 'huge' ]
+							}
+						} )
+						.then( newEditor => {
+							editor = newEditor;
+							dropdown = editor.ui.componentFactory.create( 'fontSize' );
+						} );
+				} );
+
+				it( 'adds css class to listView#items in the panel', () => {
+					const listView = dropdown.listView;
+
+					expect( listView.items.map( item => item.class ) ).to.deep.equal( [
+						'ck-fontsize-option text-tiny',
+						'ck-fontsize-option text-small',
+						'ck-fontsize-option',
+						'ck-fontsize-option text-big',
+						'ck-fontsize-option text-huge'
+					] );
+				} );
+			} );
+
+			describe( 'using numeric values', () => {
+				beforeEach( () => {
+					element = document.createElement( 'div' );
+					document.body.appendChild( element );
+
+					return ClassicTestEditor
+						.create( element, {
+							plugins: [ FontSizeEditing, FontSizeUI ],
+							fontSize: {
+								options: [ 10, 12, 'normal', 16, 18 ]
+							}
+						} )
+						.then( newEditor => {
+							editor = newEditor;
+							dropdown = editor.ui.componentFactory.create( 'fontSize' );
+						} );
+				} );
+
+				it( 'adds css class to listView#items in the panel', () => {
+					const listView = dropdown.listView;
+
+					expect( listView.items.map( item => item.class ) ).to.deep.equal( [
+						'ck-fontsize-option',
+						'ck-fontsize-option',
+						'ck-fontsize-option',
+						'ck-fontsize-option',
+						'ck-fontsize-option'
+					] );
+				} );
+
+				it( 'adds font-size style to listView#items in the panel', () => {
+					const listView = dropdown.listView;
+
+					expect( listView.items.map( item => item.style ) ).to.deep.equal( [
+						'font-size:10px',
+						'font-size:12px',
+						undefined,
+						'font-size:16px',
+						'font-size:18px'
+					] );
+				} );
+			} );
+		} );
+
 		describe( 'localization', () => {
 			beforeEach( () => {
 				return localizedEditor( [ 'tiny', 'small', 'normal', 'big', 'huge' ] );

+ 11 - 0
packages/ckeditor5-font/tests/manual/font-size-numeric.html

@@ -0,0 +1,11 @@
+<div id="editor">
+	<h2>Font Size feature sample.</h2>
+
+	<p><span style="font-size: 10px;">Some text with font-size set to: 10px.</span></p>
+	<p><span style="font-size: 12px;">Some text with font-size set to: 12px.</span></p>
+	<p><span style="font-size: 14px;">Some text with font-size set to: 14px.</span></p>
+	<p>Some text with normal size (font-size not set to).</p>
+	<p><span style="font-size: 18px;">Some text with font-size set to: 18px.</span></p>
+	<p><span style="font-size: 20px;">Some text with font-size set to: 20px.</span></p>
+	<p><span style="font-size: 22px;">Some text with font-size set to: 22px.</span></p>
+</div>

+ 25 - 0
packages/ckeditor5-font/tests/manual/font-size-numeric.js

@@ -0,0 +1,25 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import FontSize from '../../src/fontsize';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ ArticlePluginSet, FontSize ],
+		toolbar: [
+			'headings', 'fontSize', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
+		],
+		fontSize: { options: [ 10, 12, 14, 'normal', 18, 20, 22 ] }
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 12 - 0
packages/ckeditor5-font/tests/manual/font-size-numeric.md

@@ -0,0 +1,12 @@
+### Loading
+
+The data should be loaded with:
+- 7 paragraphs with font sizes (10, 12, 14, normal, 18, 20, 22),
+
+### Testing
+
+Try to:
+- Change font by selecting many paragraphs.
+- Change font by selecting some text.
+- Change to default font by selecting many paragraphs.
+- Change to default font by selecting some text.

+ 0 - 0
packages/ckeditor5-font/tests/manual/font-size.html → packages/ckeditor5-font/tests/manual/font-size-presets.html


+ 0 - 0
packages/ckeditor5-font/tests/manual/font-size.js → packages/ckeditor5-font/tests/manual/font-size-presets.js


+ 0 - 0
packages/ckeditor5-font/tests/manual/font-size.md → packages/ckeditor5-font/tests/manual/font-size-presets.md


+ 10 - 0
packages/ckeditor5-font/theme/fontsize.css

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */