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

Tests: Automated spawning of toolbars. Code refactoring.

Aleksander Nowodzinski 9 лет назад
Родитель
Сommit
e3a653222c

+ 6 - 22
packages/ckeditor5-theme-lark/tests/manual/theme.html

@@ -106,37 +106,21 @@
 <h2>Toolbar</h2>
 
 	<h3>Toolbar: Text</h3>
-	<div class="ck-reset-all">
-		<div id="toolbar-text" class="ck-toolbar">
-			Just text and some icon.
-		</div>
-	</div>
+	<div id="toolbar-text" class="ck-reset-all"></div>
 
 	<h3>Toolbar: Button</h3>
-	<div class="ck-reset-all">
-		<div id="toolbar-button" class="ck-toolbar">
-			Some text.
-		</div>
-	</div>
+	<div id="toolbar-button" class="ck-reset-all"></div>
 
 	<h3>Toolbar: Rounded</h3>
-	<div class="ck-reset-all">
-		<div id="toolbar-rounded" class="ck-rounded-corners ck-toolbar"></div>
-	</div>
+	<div id="toolbar-rounded" class="ck-reset-all ck-rounded-corners"></div>
 
 	<h3>Toolbar: Wrapping content</h3>
-	<div class="ck-reset-all">
-		<div id="toolbar-wrap" class="ck-toolbar" style="width: 250px"></div>
-	</div>
+	<div id="toolbar-wrap" class="ck-reset-all"></div>
 
 	<h3>Toolbar: Item separators</h3>
-	<div class="ck-reset-all">
-		<div id="toolbar-separator" class="ck-toolbar"></div>
-	</div>
+	<div id="toolbar-separator" class="ck-reset-all"></div>
 
 	<h3>Toolbar: Multi-row</h3>
-	<div class="ck-reset-all">
-		<div id="toolbar-multi-row" class="ck-toolbar"></div>
-	</div>
+	<div id="toolbar-multi-row" class="ck-reset-all"></div>
 
 <div id="body"></div>

+ 93 - 81
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -22,6 +22,9 @@ import ButtonView from '/ckeditor5/ui/button/buttonview.js';
 import ListDropdown from '/ckeditor5/ui/dropdown/list/listdropdown.js';
 import ListDropdownView from '/ckeditor5/ui/dropdown/list/listdropdownview.js';
 
+import Toolbar from '/ckeditor5/ui/toolbar/toolbar.js';
+import ToolbarView from '/ckeditor5/ui/toolbar/toolbarview.js';
+
 testUtils.createTestUIController( {
 	'icon-plain-1':					'#icon-plain-1',
 	'icon-plain-2':					'#icon-plain-2',
@@ -51,7 +54,6 @@ testUtils.createTestUIController( {
 
 	body:							'div#body'
 } ).then( ui => {
-	setupIconManager( ui );
 	renderIcon( ui );
 	renderButton( ui );
 	renderDropdown( ui );
@@ -59,6 +61,10 @@ testUtils.createTestUIController( {
 } );
 
 function renderIcon( ui ) {
+	// --- IconManager ------------------------------------------------------------
+
+	ui.add( 'body', new Controller( null, new IconManagerView( iconManagerModel ) ) );
+
 	// --- In-text ------------------------------------------------------------
 
 	ui.add( 'icon-plain-1', getIcon( 'bold' ) );
@@ -239,117 +245,123 @@ function renderDropdown( ui ) {
 function renderToolbar( ui ) {
 	// --- Text ------------------------------------------------------------
 
-	ui.add( 'toolbar-text', getIcon( 'bold' ) );
+	ui.add( 'toolbar-text', getToolbar( [
+		getIcon( 'bold' ),
+		getText()
+	] ) );
 
 	// --- Button ------------------------------------------------------------
 
-	ui.add( 'toolbar-button', getButton( {
-		label: 'Some button'
-	} ) );
-
-	ui.add( 'toolbar-button', getButton( {
-		label: 'Button with icon',
-		icon: 'bold',
-		iconAlign: 'left'
-	} ) );
+	ui.add( 'toolbar-button', getToolbar( [
+		getButton(),
+		getText(),
+		getButton( {
+			label: 'Button with icon',
+			icon: 'bold',
+			iconAlign: 'left'
+		} )
+	] ) );
 
 	// --- Rounded ------------------------------------------------------------
 
-	ui.add( 'toolbar-rounded', getButton( {
-		label: 'A button which corners are also rounded because of toolbar class'
-	} ) );
-
-	ui.add( 'toolbar-rounded', getButton( {
-		label: 'Button with icon',
-		icon: 'bold',
-		iconAlign: 'left'
-	} ) );
+	ui.add( 'toolbar-rounded', getToolbar( [
+		getButton( {
+			label: 'A button which corners are also rounded because of toolbar class'
+		} ),
+		getButton( {
+			label: 'Button with icon',
+			icon: 'bold',
+			iconAlign: 'left'
+		} )
+	] ) );
 
 	// --- Wrap ------------------------------------------------------------
 
-	ui.add( 'toolbar-wrap', getButton( {
-		label: 'Some button'
-	} ) );
+	const wrapToolbar = getToolbar( [
+		getButton(),
+		getButton(),
+		getButton()
+	] );
 
-	ui.add( 'toolbar-wrap', getButton( {
-		label: 'Some button'
-	} ) );
+	wrapToolbar.view.element.style.width = '150px';
 
-	ui.add( 'toolbar-wrap', getButton( {
-		label: 'Some button'
-	} ) );
+	ui.add( 'toolbar-wrap', wrapToolbar );
 
 	// --- Separator ------------------------------------------------------------
 
-	ui.add( 'toolbar-separator', getButton( {
-		label: 'Some button'
-	} ) );
-
-	ui.add( 'toolbar-separator', getButton( {
-		label: 'Another button'
-	} ) );
-
-	ui.add( 'toolbar-separator', getToolbarSeparator() );
-
-	ui.add( 'toolbar-separator', getButton( {
-		label: 'Link',
-		icon: 'link',
-		iconAlign: 'left'
-	} ) );
-
-	ui.add( 'toolbar-separator', getToolbarSeparator() );
-
-	ui.add( 'toolbar-separator', getButton( {
-		label: 'Unlink RTL',
-		icon: 'unlink',
-		iconAlign: 'right'
-	} ) );
+	ui.add( 'toolbar-separator', getToolbar( [
+		getButton(),
+		getButton(),
+		getToolbarSeparator(),
+		getButton( {
+			label: 'Link',
+			icon: 'link',
+			iconAlign: 'left'
+		} ),
+		getToolbarSeparator(),
+		getButton( {
+			label: 'Unlink RTL',
+			icon: 'unlink',
+			iconAlign: 'right'
+		} )
+	] ) );
 
 	// --- Multi row ------------------------------------------------------------
 
-	ui.add( 'toolbar-multi-row', getButton( {
-		label: 'Some button'
-	} ) );
-
-	ui.add( 'toolbar-multi-row', getButton( {
-		label: 'Another button'
-	} ) );
-
-	ui.add( 'toolbar-multi-row', getToolbarNewline() );
-
-	ui.add( 'toolbar-multi-row', getButton( {
-		label: 'Link',
-		icon: 'link',
-		iconAlign: 'left'
-	} ) );
+	ui.add( 'toolbar-multi-row', getToolbar( [
+		getButton(),
+		getButton(),
+		getToolbarNewline(),
+		getButton( {
+			label: 'Link',
+			icon: 'link',
+			iconAlign: 'left'
+		} ),
+		getButton( {
+			label: 'Unlink RTL',
+			icon: 'unlink',
+			iconAlign: 'right'
+		} ),
+		getButton( {
+			label: 'Link',
+			icon: 'link',
+			iconAlign: 'left'
+		} )
+	] ) );
+}
 
-	ui.add( 'toolbar-multi-row', getButton( {
-		label: 'Unlink RTL',
-		icon: 'unlink',
-		iconAlign: 'right'
-	} ) );
+const TextView = class extends View {
+	constructor() {
+		super();
 
-	ui.add( 'toolbar-multi-row', getButton( {
-		label: 'Link',
-		icon: 'link',
-		iconAlign: 'left'
-	} ) );
-}
+		this.element = document.createTextNode( 'Sample text' );
+	}
+};
 
-function setupIconManager( ui ) {
-	ui.add( 'body', new Controller( null, new IconManagerView( iconManagerModel ) ) );
+function getText() {
+	return new Controller( null, new TextView( null ) );
 }
 
 function getIcon( name ) {
 	return new Controller( null, new IconView( new Model( { icon: name } ) ) );
 }
 
-function getButton( { label = 'A button', isEnabled = true, isOn = false, icon, iconAlign } = {} ) {
+function getButton( { label = 'Button', isEnabled = true, isOn = false, icon, iconAlign } = {} ) {
 	const model = new Model( { label, isEnabled, isOn, icon, iconAlign } );
 
 	return new Button( model, new ButtonView( model ) );
 }
 
+function getToolbar( children = [] ) {
+	const toolbar = new Toolbar( null, new ToolbarView( null ) );
+
+	children.forEach( c => {
+		toolbar.add( 'buttons', c );
+	} );
+
+	return toolbar;
+}
+
 const ToolbarSeparatorView = class extends View {
 	constructor() {
 		super();