浏览代码

Internal: Moved SymbolGridView into special characters. Also reused common GridView class.

Marek Lewandowski 6 年之前
父节点
当前提交
85b4b7fae6

+ 1 - 1
packages/ckeditor5-special-characters/src/ui/specialcharacterstableview.js

@@ -11,7 +11,7 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
-import SymbolGridView from '@ckeditor/ckeditor5-ui/src/symbolgrid/symbolgridview';
+import SymbolGridView from './symbolgridview';
 
 // TODO: Keyboard navigation does not work.
 

+ 74 - 0
packages/ckeditor5-special-characters/src/ui/symbolgridview.js

@@ -0,0 +1,74 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module special-characters/ui/symbolgridview
+ */
+
+import SymbolTileView from './symboltileview';
+import GridView from '@ckeditor/ckeditor5-ui/src/gridview';
+
+/**
+ * A grid of {@link module:special-characters/ui/symboltileview~symbolTileView symbol tiles}.
+ *
+ * @extends module:ui/grid~Grid
+ */
+export default class SymbolGridView extends GridView {
+	/**
+	 * Creates an instance of a symbol grid containing {@link module:special-characters/ui/symboltileview~symbolTileView tiles}.
+	 *
+	 * @param {module:utils/locale~Locale} [locale] The localization services instance.
+	 * @param {Object} options Component configuration
+	 * @param {Array.<module:ui/symbolgrid/symbolgrid~symbolDefinition>} [options.symbolDefinitions] Array with definitions
+	 * required to create the {@link module:special-characters/ui/symboltileview~symbolTileView tiles}.
+	 * @param {Number} options.columns A number of columns to display the tiles.
+	 */
+	constructor( locale, options ) {
+		super( locale, options );
+
+		const symbolDefinitions = options && options.symbolDefinitions || [];
+		const viewStyleAttribute = {};
+
+		if ( options && options.columns ) {
+			viewStyleAttribute.gridTemplateColumns = `repeat( ${ options.columns }, 1fr)`;
+		}
+
+		symbolDefinitions.forEach( item => {
+			const symbolTile = this.createSymbolTile( item.character, item.title );
+
+			this.items.add( symbolTile );
+		} );
+
+		this.extendTemplate( {
+			attributes: {
+				class: [ 'ck-symbol-grid' ]
+			}
+		} );
+	}
+
+	/**
+	 * Creates a new tile for the grid.
+	 *
+	 * @param {String} character A character that will be displayed on the button.
+	 * @param {String} title A label that descrbied the character.
+	 * @returns {module:special-characters/ui/symboltileview~SymbolTileView}
+	 */
+	createSymbolTile( character, title ) {
+		const symbolTile = new SymbolTileView();
+
+		symbolTile.set( {
+			symbol: character,
+			label: character,
+			tooltip: title,
+			withText: true
+		} );
+
+		symbolTile.on( 'execute', () => {
+			this.fire( 'execute', { title } );
+		} );
+
+		return symbolTile;
+	}
+}

+ 35 - 0
packages/ckeditor5-special-characters/src/ui/symboltileview.js

@@ -0,0 +1,35 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module special-characters/ui/symboltileview
+ */
+
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+
+/**
+ * @extends module:ui/button/buttonview~ButtonView
+ */
+export default class SymbolTileView extends ButtonView {
+	constructor( locale ) {
+		super( locale );
+
+		/**
+		 * String representing a symbol shown as tile's value.
+		 *
+		 * @type {String}
+		 */
+		this.set( 'symbol' );
+
+		this.extendTemplate( {
+			attributes: {
+				class: [
+					'ck',
+					'ck-symbol-grid__tile',
+				]
+			}
+		} );
+	}
+}