Browse Source

Tests: Refactored the iconset manual test.

Aleksander Nowodzinski 7 years ago
parent
commit
1f79ef248d

+ 7 - 4
packages/ckeditor5-theme-lark/package.json

@@ -10,11 +10,14 @@
     "@ckeditor/ckeditor5-ui": "^1.0.0-alpha.2"
   },
   "devDependencies": {
-	"@ckeditor/ckeditor5-basic-styles": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-alignment": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-basic-styles": "^1.0.0-alpha.2",
     "@ckeditor/ckeditor5-core": "^1.0.0-alpha.2",
-	"@ckeditor/ckeditor5-editor-classic": "^1.0.0-alpha.2",
-	"@ckeditor/ckeditor5-engine": "^1.0.0-alpha.2",
-	"@ckeditor/ckeditor5-link": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-font": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-highlight": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-link": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-list": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-undo": "^1.0.0-alpha.2",
     "@ckeditor/ckeditor5-utils": "^1.0.0-alpha.2",
     "eslint": "^4.15.0",
     "eslint-config-ckeditor5": "^1.0.7",

+ 1 - 15
packages/ckeditor5-theme-lark/tests/manual/iconset.html

@@ -1,17 +1,3 @@
 <style>
-	svg.ck-icon .ck-icon__fill { fill: #20ff93; }
+	svg.ck-icon .ck-icon__fill { fill: yellow; }
 </style>
-
-<div id="editor">
-	<p><a href="http://ckeditor.com">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
-	<p>dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
-	<blockquote>
-		<p>Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
-	</blockquote>
-	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat.</p>
-	<p>Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
-	<figure class="image">
-		<img src="logo.png" alt="CKEditor logo" />
-	</figure>
-	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
-</div>

+ 64 - 272
packages/ckeditor5-theme-lark/tests/manual/iconset.js

@@ -3,300 +3,92 @@
  * For licensing, see LICENSE.md.
  */
 
-/* global document, console, window */
+/* global document */
 
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
-
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 
-import alignLeftIcon from '@ckeditor/ckeditor5-alignment/theme/icons/align-left.svg';
-import alignCenterIcon from '@ckeditor/ckeditor5-alignment/theme/icons/align-center.svg';
-import alignRightIcon from '@ckeditor/ckeditor5-alignment/theme/icons/align-right.svg';
-import alignJustifyIcon from '@ckeditor/ckeditor5-alignment/theme/icons/align-justify.svg';
-import codeIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/code.svg';
-import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
-import imageLeftIcon from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
-import imageCenterIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
-import editIcon from '@ckeditor/ckeditor5-core/theme/icons/pencil.svg';
-import strikethroughIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/strikethrough.svg';
-import underlineIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/underline.svg';
-import unlinkIcon from '@ckeditor/ckeditor5-link/theme/icons/unlink.svg';
-
-import fontFamilyIcon from '@ckeditor/ckeditor5-font/theme/icons/font-family.svg';
-import fontSizeIcon from '@ckeditor/ckeditor5-font/theme/icons/font-size.svg';
-
-import markerIcon from '@ckeditor/ckeditor5-highlight/theme/icons/marker.svg';
-import penIcon from '@ckeditor/ckeditor5-highlight/theme/icons/pen.svg';
-import eraserIcon from '@ckeditor/ckeditor5-highlight/theme/icons/eraser.svg';
-
-class FakeIcons extends Plugin {
-	init() {
-		const editor = this.editor;
-
-		editor.ui.componentFactory.add( 'alignLeft', locale => {
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: 'Align left',
-				icon: alignLeftIcon,
-				tooltip: true
-			} );
-
-			return view;
-		} );
-
-		editor.ui.componentFactory.add( 'alignCenter', locale => {
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: 'Align center',
-				icon: alignCenterIcon,
-				tooltip: true
-			} );
-
-			return view;
-		} );
-
-		editor.ui.componentFactory.add( 'alignRight', locale => {
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: 'Align right',
-				icon: alignRightIcon,
-				tooltip: true
-			} );
-
-			return view;
-		} );
-
-		editor.ui.componentFactory.add( 'alignJustify', locale => {
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: 'Align justify',
-				icon: alignJustifyIcon,
-				tooltip: true
-			} );
-
-			return view;
-		} );
-
-		editor.ui.componentFactory.add( 'code', locale => {
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: 'Code',
-				icon: codeIcon,
-				tooltip: true
-			} );
-
-			return view;
-		} );
-
-		editor.ui.componentFactory.add( 'edit', locale => {
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: 'Edit link',
-				icon: editIcon,
-				tooltip: true
-			} );
-
-			return view;
-		} );
-
-		editor.ui.componentFactory.add( 'eraser', locale => {
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: 'Erase highlight',
-				icon: eraserIcon,
-				tooltip: true
-			} );
-
-			return view;
-		} );
+import alignLeft from '@ckeditor/ckeditor5-alignment/theme/icons/align-left.svg';
+import alignCenter from '@ckeditor/ckeditor5-alignment/theme/icons/align-center.svg';
+import alignRight from '@ckeditor/ckeditor5-alignment/theme/icons/align-right.svg';
+import alignJustify from '@ckeditor/ckeditor5-alignment/theme/icons/align-justify.svg';
 
-		editor.ui.componentFactory.add( 'fontFamily', locale => {
-			const view = new ButtonView( locale );
+import bold from '@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg';
+import italic from '@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg';
+import underline from '@ckeditor/ckeditor5-basic-styles/theme/icons/underline.svg';
+import code from '@ckeditor/ckeditor5-basic-styles/theme/icons/code.svg';
+import strikethrough from '@ckeditor/ckeditor5-basic-styles/theme/icons/strikethrough.svg';
 
-			view.set( {
-				label: 'Font family',
-				icon: fontFamilyIcon,
-				tooltip: true
-			} );
+import cancel from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
+import check from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
+import lowVision from '@ckeditor/ckeditor5-core/theme/icons/low-vision.svg';
+import image from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
+import objectLeft from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
+import objectCenter from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
+import objectRight from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
+import objectFullWidth from '@ckeditor/ckeditor5-core/theme/icons/object-full-width.svg';
+import pencil from '@ckeditor/ckeditor5-core/theme/icons/pencil.svg';
+import quote from '@ckeditor/ckeditor5-core/theme/icons/quote.svg';
 
-			return view;
-		} );
+import fontFamily from '@ckeditor/ckeditor5-font/theme/icons/font-family.svg';
+import fontSize from '@ckeditor/ckeditor5-font/theme/icons/font-size.svg';
 
-		editor.ui.componentFactory.add( 'fontSize', locale => {
-			const view = new ButtonView( locale );
+import marker from '@ckeditor/ckeditor5-highlight/theme/icons/marker.svg';
+import pen from '@ckeditor/ckeditor5-highlight/theme/icons/pen.svg';
+import eraser from '@ckeditor/ckeditor5-highlight/theme/icons/eraser.svg';
 
-			view.set( {
-				label: 'Font size',
-				icon: fontSizeIcon,
-				tooltip: true
-			} );
+import link from '@ckeditor/ckeditor5-link/theme/icons/link.svg';
+import unlink from '@ckeditor/ckeditor5-link/theme/icons/unlink.svg';
 
-			return view;
-		} );
+import bulletedList from '@ckeditor/ckeditor5-list/theme/icons/bulletedlist.svg';
+import numberedList from '@ckeditor/ckeditor5-list/theme/icons/numberedlist.svg';
 
-		editor.ui.componentFactory.add( 'insertImage', locale => {
-			const view = new ButtonView( locale );
+import undo from '@ckeditor/ckeditor5-undo/theme/icons/undo.svg';
+import redo from '@ckeditor/ckeditor5-undo/theme/icons/redo.svg';
 
-			view.set( {
-				label: 'Insert image',
-				icon: imageIcon,
-				tooltip: true
-			} );
+import '../../theme/ckeditor5-ui/components/editorui/editorui.css';
 
-			return view;
-		} );
+const icons = {
+	// alignment
+	alignLeft, alignCenter, alignRight, alignJustify,
 
-		editor.ui.componentFactory.add( 'imageLeft', locale => {
-			const view = new ButtonView( locale );
+	// basic-styles
+	bold, italic, underline, code, strikethrough,
 
-			view.set( {
-				label: 'Left-sided image',
-				icon: imageLeftIcon,
-				tooltip: true
-			} );
+	// core
+	check, cancel, lowVision, quote, image, objectLeft, objectCenter, objectRight, objectFullWidth, pencil,
 
-			return view;
-		} );
+	// font
+	fontFamily, fontSize,
 
-		editor.ui.componentFactory.add( 'imageCenter', locale => {
-			const view = new ButtonView( locale );
+	// highlight
+	marker, pen, eraser,
 
-			view.set( {
-				label: 'Centered image',
-				icon: imageCenterIcon,
-				tooltip: true
-			} );
+	// link
+	link, unlink,
 
-			return view;
-		} );
+	// list
+	bulletedList, numberedList,
 
-		editor.ui.componentFactory.add( 'marker', locale => {
-			const view = new ButtonView( locale );
+	// undo
+	undo, redo
+};
 
-			view.set( {
-				label: 'Marker',
-				icon: markerIcon,
-				tooltip: true
-			} );
+const toolbar = new ToolbarView();
 
-			return view;
-		} );
+for ( const i in icons ) {
+	const button = new ButtonView();
 
-		editor.ui.componentFactory.add( 'pen', locale => {
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: 'Pen',
-				icon: penIcon,
-				tooltip: true
-			} );
-
-			return view;
-		} );
-
-		editor.ui.componentFactory.add( 'strikethrough', locale => {
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: 'Strikethrough',
-				icon: strikethroughIcon,
-				tooltip: true
-			} );
-
-			return view;
-		} );
-
-		editor.ui.componentFactory.add( 'underline', locale => {
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: 'Underline',
-				icon: underlineIcon,
-				tooltip: true
-			} );
-
-			return view;
-		} );
-
-		editor.ui.componentFactory.add( 'unlink', locale => {
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: 'Unlink',
-				icon: unlinkIcon,
-				tooltip: true
-			} );
-
-			return view;
-		} );
-
-		editor.ui.componentFactory.add( 'marker', locale => {
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: 'Maker',
-				icon: markerIcon,
-				tooltip: true
-			} );
-
-			view.render();
-			view.element.querySelector( '.ck-icon__fill' ).style.color = 'yellow';
-
-			return view;
-		} );
-
-		editor.ui.componentFactory.add( 'pen', locale => {
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: 'Pen',
-				icon: penIcon,
-				tooltip: true
-			} );
-
-			view.render();
-			view.element.querySelector( '.ck-icon__fill' ).style.color = 'yellow';
-
-			return view;
-		} );
-
-		editor.ui.componentFactory.add( 'eraser', locale => {
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: 'Eraser',
-				icon: eraserIcon,
-				tooltip: true
-			} );
+	button.set( {
+		label: i,
+		icon: icons[ i ],
+		tooltip: true
+	} );
 
-			return view;
-		} );
-	}
+	toolbar.items.add( button );
 }
 
-ClassicEditor
-	.create( document.querySelector( '#editor' ), {
-		plugins: [
-			ArticlePluginSet, FakeIcons
-		],
-		toolbar: [
-			'headings', 'bold', 'italic', 'strikethrough', 'underline', 'link', 'unlink', 'edit', 'bulletedList', 'numberedList',
-			'blockquote', 'code', 'undo', 'redo', 'imagestylefull', 'imagestyleside', 'imageLeft', 'imageCenter', 'imagetextalternative',
-			'insertImage', 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', 'fontFamily', 'fontSize', 'marker', 'pen', 'eraser'
-		]
-	} )
-	.then( editor => {
-		window.editor = editor;
-	} )
-	.catch( err => {
-		console.error( err.stack );
-	} );
+toolbar.className = 'ck-editor-toolbar ck-reset_all';
+toolbar.render();
+
+document.body.appendChild( toolbar.element );