Sfoglia il codice sorgente

Internal: image resize manual test.

Marek Lewandowski 6 anni fa
parent
commit
b869296e42

+ 40 - 0
packages/ckeditor5-image/tests/manual/resize.html

@@ -0,0 +1,40 @@
+<section id="resizer-options">
+	<h1>Options</h1>
+
+	<p>Use the options below to adjust resizer behavior.</p>
+
+	<h2>Resizing strategy</h2>
+
+	<p>
+		<select name="strategy" id="strategy">
+			<option value="center">Center</option>
+			<option value="top-anchored">Top-anchored center</option>
+			<option value="standard">Standard</option>
+		</select>
+	</p>
+
+	<h2>Visible resizers</h2>
+	<ol>
+		<li><input type="checkbox" name="handler[]" value="top-left" id="resizer-checkbox__top-left"> <label for="resizer-checkbox__top-left">top-left</label></li>
+		<li><input type="checkbox" name="handler[]" value="top-right" id="resizer-checkbox__top-right"> <label for="resizer-checkbox__top-right">top-right</label></li>
+		<li><input type="checkbox" name="handler[]" value="bottom-right" id="resizer-checkbox__bottom-right"> <label for="resizer-checkbox__bottom-right">bottom-right</label></li>
+		<li><input type="checkbox" name="handler[]" value="bottom-left" id="resizer-checkbox__bottom-left"> <label for="resizer-checkbox__bottom-left">bottom-left</label></li>
+	</ol>
+</section>
+
+<div id="editor">
+
+	<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>
+	<figure class="image image-style-side">
+		<img src="sample.jpg" alt="" height="60" />
+	</figure>
+	<figure class="image">
+		<img src="sample.jpg" alt="" />
+	</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>

+ 56 - 0
packages/ckeditor5-image/tests/manual/resize.js

@@ -0,0 +1,56 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* global document, console, window */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import EnterPlugin from '@ckeditor/ckeditor5-enter/src/enter';
+import TypingPlugin from '@ckeditor/ckeditor5-typing/src/typing';
+import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import ImagePlugin from '../../src/image';
+import UndoPlugin from '@ckeditor/ckeditor5-undo/src/undo';
+import ClipboardPlugin from '@ckeditor/ckeditor5-clipboard/src/clipboard';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, ImagePlugin, UndoPlugin, ClipboardPlugin ],
+		toolbar: [ 'undo', 'redo' ]
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+( function() {
+	const optionsWrapper = document.getElementById( 'resizer-options' );
+	const defaultConfig = {
+		handler: [ 'top-left', 'top-right', 'bottom-right', 'bottom-left' ]
+	};
+	const dynamicStylesheet = document.createElement( 'style' );
+	const cssRules = {};
+
+	for ( const checkbox of optionsWrapper.querySelectorAll( 'input[name="handler[]"]' ) ) {
+		checkbox.addEventListener( 'change', function() {
+			const ruleValue = `.ck-widget__resizer.ck-widget__resizer-${ this.value } { display: none; }`;
+
+			if ( this.value in cssRules ) {
+				dynamicStylesheet.sheet.deleteRule( cssRules[ this.value ] );
+				delete cssRules[ this.value ];
+			}
+
+			if ( !this.checked ) {
+				cssRules[ this.value ] = dynamicStylesheet.sheet.insertRule( ruleValue );
+			}
+		} );
+
+		if ( defaultConfig.handler.includes( checkbox.value ) ) {
+			checkbox.checked = true;
+		}
+	}
+
+	document.head.appendChild( dynamicStylesheet );
+}() );

+ 2 - 0
packages/ckeditor5-image/tests/manual/resize.md

@@ -0,0 +1,2 @@
+## Image resize
+