Răsfoiți Sursa

Merge pull request #18 from ckeditor/t/17

t/17: Implement the themes architecture
Aleksander Nowodzinski 9 ani în urmă
părinte
comite
2ad3eee400

+ 32 - 0
packages/ckeditor5-ui/src/editorui/editorui.js

@@ -9,6 +9,8 @@ import Controller from '../controller.js';
 import ControllerCollection from '../controllercollection.js';
 import ComponentFactory from '../componentfactory.js';
 import ObservableMixin from '../../utils/observablemixin.js';
+import IconManagerView from '../iconmanagerview.js';
+import iconManagerModel from '../../../theme/iconmanagermodel.js';
 import utils from '../../utils/utils.js';
 
 /**
@@ -51,6 +53,36 @@ export default class EditorUI extends Controller {
 
 		this.collections.add( new ControllerCollection( 'body' ) );
 	}
+
+	/**
+	 * Initializes EditorUI instance.
+	 *
+	 * @returns {Promise}
+	 */
+	init() {
+		this._setupIconManager();
+
+		return super.init();
+	}
+
+	/**
+	 * Adds IconManager into DOM.
+	 *
+	 * @protected
+	 */
+	_setupIconManager() {
+		/**
+		 * Icons available in the UI.
+		 *
+		 * @readonly
+		 * @member {Array} ui.editorUI.EditorUI#icons
+		 */
+		this.icons = iconManagerModel.icons;
+
+		this.collections.get( 'body' ).add(
+			new Controller( iconManagerModel, new IconManagerView( iconManagerModel ) )
+		);
+	}
 }
 
 utils.mix( EditorUI, ObservableMixin );

+ 1 - 1
packages/ckeditor5-ui/src/editorui/editoruiview.js

@@ -44,7 +44,7 @@ export default class EditorUIView extends View {
 
 		this.applyTemplateToElement( bodyElement, {
 			attributes: {
-				class: 'ck-body'
+				class: 'ck-body ck-reset-all'
 			}
 		} );
 

+ 12 - 0
packages/ckeditor5-ui/src/iconmanagermodel.jsdoc

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * Provides a Model containing icon sprite for {@link ui.iconManager.IconManagerView}.
+ *
+ * @class IconManagerModel
+ * @memberOf ui.iconManager
+ * @extends ui.Model
+ */

+ 49 - 0
packages/ckeditor5-ui/src/iconmanagerview.js

@@ -0,0 +1,49 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import View from './view.js';
+
+/**
+ * Icon manager view using {@link ui.iconManager.IconManagerModel}.
+ *
+ * @memberOf ui.iconManager
+ * @extends ui.View
+ */
+
+export default class IconManagerView extends View {
+	constructor( model, locale ) {
+		super( model, locale );
+
+		this.template = {
+			tag: 'div',
+			attributes: {
+				class: 'ck-icon-manager'
+			}
+		};
+	}
+
+	init() {
+		this._setupSprite();
+
+		return super.init();
+	}
+
+	/**
+	 * Injects icon sprite into DOM.
+	 *
+	 * @protected
+	 */
+	_setupSprite() {
+		// Note: Creating SVG icons with with Template class is not possible
+		// because of CSS limitations of document.createEleentNS–created elements.
+		this.element.innerHTML = `<svg
+				xmlns="http://www.w3.org/2000/svg"
+				xmlns:xlink="http://www.w3.org/1999/xlink"
+				class="ck-icon-manager-sprite"
+			>${ this.model.sprite }</svg>`;
+	}
+}

+ 23 - 0
packages/ckeditor5-ui/tests/editorui/editorui.js

@@ -5,11 +5,14 @@
 
 'use strict';
 
+import testUtils from '/tests/ckeditor5/_utils/utils.js';
 import Editor from '/ckeditor5/editor.js';
 import EditorUI from '/ckeditor5/ui/editorui/editorui.js';
 import ComponentFactory from '/ckeditor5/ui/componentfactory.js';
 import ControllerCollection from '/ckeditor5/ui/controllercollection.js';
 
+testUtils.createSinonSandbox();
+
 describe( 'EditorUI', () => {
 	let editor, editorUI;
 
@@ -31,4 +34,24 @@ describe( 'EditorUI', () => {
 			expect( editor ).to.have.property( 'ui', editorUI );
 		} );
 	} );
+
+	describe( 'init', () => {
+		it( 'calls _setupIconManager when "icon" in model', () => {
+			const spy = testUtils.sinon.spy( editorUI, '_setupIconManager' );
+
+			return editorUI.init()
+				.then( () => {
+					expect( spy.calledOnce ).to.be.true;
+				} );
+		} );
+	} );
+
+	describe( '_setupIconManager', () => {
+		it( 'sets "icon" property', () => {
+			editorUI._setupIconManager();
+
+			expect( editorUI.icons ).to.be.an( 'array' );
+			expect( editorUI.icons ).to.not.be.empty;
+		} );
+	} );
 } );

+ 48 - 0
packages/ckeditor5-ui/tests/iconmanagerview.js

@@ -0,0 +1,48 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+ /* bender-tags: ui, iconmanager */
+
+'use strict';
+
+import testUtils from '/tests/ckeditor5/_utils/utils.js';
+import IconManagerView from '/ckeditor5/ui/iconmanagerview.js';
+import Model from '/ckeditor5/ui/model.js';
+
+testUtils.createSinonSandbox();
+
+describe( 'IconManagerView', () => {
+	let view;
+
+	beforeEach( () => {
+		view = new IconManagerView( new Model( {
+			sprite: 'foo'
+		} ) );
+	} );
+
+	describe( 'init', () => {
+		it( 'calls _setupSprite', () => {
+			const spy = testUtils.sinon.spy( view, '_setupSprite' );
+
+			view.init();
+			expect( spy.calledOnce ).to.be.true;
+		} );
+	} );
+
+	describe( '_setupSprite', () => {
+		it( 'initializes the sprite', () => {
+			view._setupSprite();
+
+			const el = view.element;
+			const svg = view.element.firstChild;
+
+			expect( el.tagName ).to.be.equal( 'DIV' );
+			expect( el.classList.item( 0 ) ).to.be.equal( 'ck-icon-manager' );
+			expect( svg.tagName ).to.be.equal( 'svg' );
+			expect( svg.innerHTML ).to.be.equal( 'foo' );
+			expect( svg.classList.item( 0 ) ).to.be.equal( 'ck-icon-manager-sprite' );
+		} );
+	} );
+} );