Merge pull request #7482 from ckeditor/i/5201

Feature (image): Introduced the UI for a manual image resizing via a dropdown or standalone buttons. Closes #5201. Feature (image): Introduced the UI for restoring original image size. Closes #5197.
ckeditor · Jul 7, 2020 · 70e0b41 · 70e0b41
2 parents 1264e63 + 1229fd9
commit 70e0b41
Show file tree

Hide file tree

Showing 16 changed files with 1,095 additions and 123 deletions.
diff --git a/packages/ckeditor5-image/docs/_snippets/features/image-resizeui.html b/packages/ckeditor5-image/docs/_snippets/features/image-resizeui.html
@@ -0,0 +1,14 @@
+<div id="snippet-image-resizeui">
+	<h3>Resize me using image toolbar buttons!</h3>
+
+	<figure class="image">
+		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+		<figcaption>Autumn fields by Aleksander Nowodziński</figcaption>
+	</figure>
+
+	<h3>Resized image (width: 75%):</h3>
+
+	<figure class="image image_resized" style="width:75%;">
+		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+	</figure>
+</div>
diff --git a/packages/ckeditor5-image/docs/_snippets/features/image-resizeui.js b/packages/ckeditor5-image/docs/_snippets/features/image-resizeui.js
@@ -0,0 +1,49 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config.js';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-image-resizeui' ), {
+		removePlugins: [ 'LinkImage' ],
+		toolbar: {
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		},
+		image: {
+			resizeOptions: [
+				{
+					name: 'imageResize:original',
+					label: 'Original size',
+					value: null
+				},
+				{
+					name: 'imageResize:50',
+					label: '50%',
+					value: '50'
+				},
+				{
+					name: 'imageResize:75',
+					label: '75%',
+					value: '75'
+				}
+			],
+			toolbar: [
+				'imageStyle:full',
+				'imageStyle:side', '|',
+				'imageResize:original',
+				'imageResize:50',
+				'imageResize:75'
+			]
+		},
+		cloudServices: CS_CONFIG
+	} )
+	.then( editor => {
+		window.editorResizeUI = editor;
+	} )
+	.catch( err => {
+		console.error( err );
+	} );
diff --git a/packages/ckeditor5-image/docs/_snippets/features/image-resizeuidropdown.html b/packages/ckeditor5-image/docs/_snippets/features/image-resizeuidropdown.html
@@ -0,0 +1,14 @@
+<div id="snippet-image-resizeui-dropdown">
+	<h3>Resize me using the dropdown!</h3>
+
+	<figure class="image">
+		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+		<figcaption>Autumn fields by Aleksander Nowodziński</figcaption>
+	</figure>
+
+	<h3>Resized image (width: 75%):</h3>
+
+	<figure class="image image_resized" style="width:75%;">
+		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+	</figure>
+</div>
diff --git a/packages/ckeditor5-image/docs/_snippets/features/image-resizeuidropdown.js b/packages/ckeditor5-image/docs/_snippets/features/image-resizeuidropdown.js
@@ -0,0 +1,43 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config.js';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-image-resizeui-dropdown' ), {
+		removePlugins: [ 'LinkImage' ],
+		toolbar: {
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		},
+		image: {
+			resizeOptions: [
+				{
+					name: 'imageResize:original',
+					label: 'Original size',
+					value: null
+				},
+				{
+					name: 'imageResize:50',
+					label: '50%',
+					value: '50'
+				},
+				{
+					name: 'imageResize:75',
+					label: '75%',
+					value: '75'
+				}
+			],
+			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageResize' ]
+		},
+		cloudServices: CS_CONFIG
+	} )
+	.then( editor => {
+		window.editorResizeUIDropdown = editor;
+	} )
+	.catch( err => {
+		console.error( err );
+	} );
diff --git a/packages/ckeditor5-image/docs/features/image.md b/packages/ckeditor5-image/docs/features/image.md
@@ -185,8 +185,71 @@ The [image styles](#image-styles) feature is meant to give the user the choice b
 
 It is implemented by the {@link module:image/imageresize~ImageResize} plugin and enables four "resize handles" displayed over the selected image. The user can freely resize the image by dragging them. The feature can be configured to use either percentage (default) or pixel values.
 
+The plugin also gives you an ability to change the size of the image through the image toolbar. You can set an optional static configuration with {@link module:image/image~ImageConfig#resizeOptions} and choose whether you want to use a dropdown or set of the standalone buttons.
+
+### Resize image using handles
+
 {@snippet features/image-resize}
 
+### Resize image using the plugin dropdown
+
+```js
+const imageConfiguration = {
+	resizeOptions: [
+		{
+			name: 'imageResize:original',
+			label: 'Original size',
+			value: null
+		},
+		{
+			name: 'imageResize:50',
+			label: '50%',
+			value: '50'
+		},
+		{
+			name: 'imageResize:75',
+			label: '75%',
+			value: '75'
+		}
+	],
+	toolbar: [ ... , 'imageResize' ]
+}
+```
+
+{@snippet features/image-resizeuidropdown}
+
+### Resize image using the standalone buttons
+
+```js
+const imageConfiguration = {
+	resizeOptions: [
+		{
+			name: 'imageResize:original',
+			label: 'Original size',
+			value: null
+		},
+		{
+			name: 'imageResize:50',
+			label: '50%',
+			value: '50'
+		},
+		{
+			name: 'imageResize:75',
+			label: '75%',
+			value: '75'
+		}
+	],
+	toolbar: [
+		// ...,
+		'imageResize:original',
+		'imageResize:50',
+		'imageResize:75'
+	]
+}
+```
+
+{@snippet features/image-resizeui}
+
 ### Enabling image resizing
 
 The image resize feature is not enabled by default in any of the editor builds. In order to enable it, you need to load the {@link module:image/imageresize~ImageResize} plugin. Read more in the [Installation](#installation) section.

diff --git a/packages/ckeditor5-image/lang/contexts.json b/packages/ckeditor5-image/lang/contexts.json
@@ -10,5 +10,8 @@
 	"Enter image caption": "Placeholder text for image caption displayed when caption is empty.",
 	"Insert image": "Label for the insert image toolbar button.",
 	"Upload failed": "Title of the notification displayed when upload fails.",
-	"Image toolbar": "The label used by assistive technologies describing an image toolbar attached to an image widget."
+	"Image toolbar": "The label used by assistive technologies describing an image toolbar attached to an image widget.",
+	"Resize image to": "The label used for the standalone resize option buttons in the image toolbar",
+	"Resize image": "The label used for the dropdown in the image toolbar, containing defined resize options",
+	"Resize image to the original size": "The label used for the standalone resize reset option button in the image toolbar, when user set the value to `null`"
 }