瀏覽代碼

Feature: Implemented the SwitchButtonView.

Aleksander Nowodzinski 7 年之前
父節點
當前提交
52360b2309

+ 97 - 0
packages/ckeditor5-ui/src/button/switchbuttonview.js

@@ -0,0 +1,97 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module ui/button/switchbuttonview
+ */
+
+import View from '../view';
+import ButtonView from './buttonview';
+
+import '../../theme/components/button/switchbutton.css';
+
+/**
+ * The switch button view class.
+ *
+ *		const view = new SwitchButtonView();
+ *
+ *		view.set( {
+ *			withText: true,
+ *			label: 'Switch me!'
+ *		} );
+ *
+ *		view.render();
+ *
+ *		document.body.append( view.element );
+ *
+ * @extends module:ui/buttonview~ButtonView
+ */
+export default class SwitchButtonView extends ButtonView {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale ) {
+		super( locale );
+
+		/**
+		 * The toggle switch of the button.
+		 *
+		 * @readonly
+		 * @member {module:ui/view~View} #toggleSwitchView
+		 */
+		this.toggleSwitchView = this._createToggleView();
+
+		this.extendTemplate( {
+			attributes: {
+				class: 'ck-switchbutton'
+			}
+		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
+
+		this.children.add( this.toggleSwitchView );
+	}
+
+	/**
+	 * Creates a toggle child view.
+	 *
+	 * @private
+	 * @returns {module:ui/view~View}
+	 */
+	_createToggleView() {
+		const toggleSwitchView = new View();
+
+		toggleSwitchView.setTemplate( {
+			tag: 'span',
+
+			attributes: {
+				class: [
+					'ck',
+					'ck-button__toggle'
+				],
+			},
+
+			children: [
+				{
+					tag: 'span',
+
+					attributes: {
+						class: [
+							'ck',
+							'ck-button__toggle__inner'
+						],
+					}
+				}
+			]
+		} );
+
+		return toggleSwitchView;
+	}
+}

+ 46 - 0
packages/ckeditor5-ui/tests/button/switchbuttonview.js

@@ -0,0 +1,46 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import SwitchButtonView from '../../src/button/switchbuttonview';
+import View from '../../src/view';
+
+describe( 'SwitchButtonView', () => {
+	let locale, view;
+
+	beforeEach( () => {
+		locale = { t() {} };
+
+		view = new SwitchButtonView( locale );
+		view.render();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'creates #toggleSwitchView', () => {
+			expect( view.toggleSwitchView ).to.be.instanceOf( View );
+		} );
+
+		it( 'sets CSS class', () => {
+			expect( view.element.classList.contains( 'ck-switchbutton' ) ).to.be.true;
+		} );
+	} );
+
+	describe( 'render', () => {
+		it( 'adds #toggleSwitchView to #children', () => {
+			expect( view.children.get( 2 ) ).to.equal( view.toggleSwitchView );
+		} );
+	} );
+
+	describe( '#toggleSwitchView', () => {
+		it( 'has proper DOM structure', () => {
+			const toggleElement = view.toggleSwitchView.element;
+
+			expect( toggleElement.classList.contains( 'ck' ) ).to.be.true;
+			expect( toggleElement.classList.contains( 'ck-button__toggle' ) ).to.be.true;
+
+			expect( toggleElement.firstChild.classList.contains( 'ck' ) ).to.be.true;
+			expect( toggleElement.firstChild.classList.contains( 'ck-button__toggle__inner' ) ).to.be.true;
+		} );
+	} );
+} );

+ 20 - 0
packages/ckeditor5-ui/theme/components/button/switchbutton.css

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck.ck-button.ck-switchbutton {
+	position: relative;
+
+	& .ck-button__toggle {
+		display: block;
+
+		& .ck-button__toggle__inner {
+			display: block;
+		}
+	}
+
+	&.ck-on .ck-button__toggle .ck-button__toggle__inner {
+		float: right;
+	}
+}