Forráskód Böngészése

Merge branch 'master' into t/ckeditor5-image/310

Piotrek Koszuliński 6 éve
szülő
commit
8e501287f8

+ 3 - 3
packages/ckeditor5-widget/.travis.yml

@@ -1,9 +1,11 @@
 sudo: required
-dist: trusty
+dist: xenial
 addons:
   chrome: stable
   firefox: latest
 language: node_js
+services:
+- xvfb
 node_js:
 - '8'
 cache:
@@ -13,8 +15,6 @@ branches:
   - stable
 before_install:
 - export START_TIME=$( date +%s )
-- export DISPLAY=:99.0
-- sh -e /etc/init.d/xvfb start
 - npm i -g yarn
 install:
 - yarn add @ckeditor/ckeditor5-dev-tests

+ 17 - 0
packages/ckeditor5-widget/CHANGELOG.md

@@ -1,6 +1,23 @@
 Changelog
 =========
 
+## [11.1.0](https://github.com/ckeditor/ckeditor5-widget/compare/v11.0.4...v11.1.0) (2019-08-26)
+
+### Features
+
+* Introduced image widget resizer. See [ckeditor/ckeditor5-image#241](https://github.com/ckeditor/ckeditor5-image/issues/241). ([c84cd73](https://github.com/ckeditor/ckeditor5-widget/commit/c84cd73))
+
+### Bug fixes
+
+* Improved balloon positioning when there is more than one stack in the rotator. ([763c9ba](https://github.com/ckeditor/ckeditor5-widget/commit/763c9ba))
+* Reposition visible toolbar when it is in a not visible stack of rotator. Closes [ckeditor/ckeditor5#1957](https://github.com/ckeditor/ckeditor5/issues/1957). ([a438c8b](https://github.com/ckeditor/ckeditor5-widget/commit/a438c8b))
+
+### Other changes
+
+* The issue tracker for this package was moved to https://github.com/ckeditor/ckeditor5/issues. See [ckeditor/ckeditor5#1988](https://github.com/ckeditor/ckeditor5/issues/1988). ([cfd41c1](https://github.com/ckeditor/ckeditor5-widget/commit/cfd41c1))
+* The widget toolbar should have a proper `aria-label` attribute (see [ckeditor/ckeditor5#1404](https://github.com/ckeditor/ckeditor5/issues/1404)). ([aec5888](https://github.com/ckeditor/ckeditor5-widget/commit/aec5888))
+
+
 ## [11.0.4](https://github.com/ckeditor/ckeditor5-widget/compare/v11.0.3...v11.0.4) (2019-07-10)
 
 Internal changes only (updated dependencies, documentation, etc.).

+ 0 - 1
packages/ckeditor5-widget/README.md

@@ -1,7 +1,6 @@
 CKEditor 5 widget API
 ========================================
 
-[![Join the chat at https://gitter.im/ckeditor/ckeditor5](https://badges.gitter.im/ckeditor/ckeditor5.svg)](https://gitter.im/ckeditor/ckeditor5?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-widget.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-widget)
 [![Build Status](https://travis-ci.org/ckeditor/ckeditor5-widget.svg?branch=master)](https://travis-ci.org/ckeditor/ckeditor5-widget)
 [![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5-widget/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5-widget?branch=master)

+ 1 - 1
packages/ckeditor5-widget/docs/api/widget.md

@@ -42,5 +42,5 @@ The source code of this package is available on GitHub in https://github.com/cke
 
 * [`@ckeditor/ckeditor5-widget` on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-widget)
 * [`ckeditor/ckeditor5-widget` on GitHub](https://github.com/ckeditor/ckeditor5-widget)
-* [Issue tracker](https://github.com/ckeditor/ckeditor5-widget/issues)
+* [Issue tracker](https://github.com/ckeditor/ckeditor5/issues)
 * [Changelog](https://github.com/ckeditor/ckeditor5-widget/blob/master/CHANGELOG.md)

+ 18 - 18
packages/ckeditor5-widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-widget",
-  "version": "11.0.4",
+  "version": "11.1.0",
   "description": "Widget API for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -9,25 +9,25 @@
     "ckeditor5-lib"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^12.2.1",
-    "@ckeditor/ckeditor5-engine": "^13.2.1",
-    "@ckeditor/ckeditor5-ui": "^13.0.2",
-    "@ckeditor/ckeditor5-utils": "^13.0.1",
+    "@ckeditor/ckeditor5-core": "^12.3.0",
+    "@ckeditor/ckeditor5-engine": "^14.0.0",
+    "@ckeditor/ckeditor5-ui": "^14.0.0",
+    "@ckeditor/ckeditor5-utils": "^14.0.0",
     "lodash-es": "^4.17.10"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^11.1.3",
-    "@ckeditor/ckeditor5-block-quote": "^11.1.2",
-    "@ckeditor/ckeditor5-clipboard": "^12.0.1",
-    "@ckeditor/ckeditor5-editor-balloon": "^12.2.1",
-    "@ckeditor/ckeditor5-editor-classic": "^12.1.3",
-    "@ckeditor/ckeditor5-enter": "^11.0.4",
-    "@ckeditor/ckeditor5-essentials": "^11.0.4",
-    "@ckeditor/ckeditor5-heading": "^11.0.4",
-    "@ckeditor/ckeditor5-paragraph": "^11.0.4",
-    "@ckeditor/ckeditor5-table": "^13.0.2",
-    "@ckeditor/ckeditor5-typing": "^12.1.1",
-    "@ckeditor/ckeditor5-undo": "^11.0.4",
+    "@ckeditor/ckeditor5-basic-styles": "^11.1.4",
+    "@ckeditor/ckeditor5-block-quote": "^11.1.3",
+    "@ckeditor/ckeditor5-clipboard": "^12.0.2",
+    "@ckeditor/ckeditor5-editor-balloon": "^12.2.2",
+    "@ckeditor/ckeditor5-editor-classic": "^12.1.4",
+    "@ckeditor/ckeditor5-enter": "^11.1.0",
+    "@ckeditor/ckeditor5-essentials": "^11.0.5",
+    "@ckeditor/ckeditor5-heading": "^11.0.5",
+    "@ckeditor/ckeditor5-paragraph": "^11.0.5",
+    "@ckeditor/ckeditor5-table": "^14.0.0",
+    "@ckeditor/ckeditor5-typing": "^12.2.0",
+    "@ckeditor/ckeditor5-undo": "^11.0.5",
     "eslint": "^5.5.0",
     "eslint-config-ckeditor5": "^2.0.0",
     "husky": "^1.3.1",
@@ -40,7 +40,7 @@
   "author": "CKSource (http://cksource.com/)",
   "license": "GPL-2.0-or-later",
   "homepage": "https://ckeditor.com/ckeditor-5",
-  "bugs": "https://github.com/ckeditor/ckeditor5-widget/issues",
+  "bugs": "https://github.com/ckeditor/ckeditor5/issues",
   "repository": {
     "type": "git",
     "url": "https://github.com/ckeditor/ckeditor5-widget.git"

+ 5 - 5
packages/ckeditor5-widget/src/widgetresize.js

@@ -15,7 +15,7 @@ import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 import { throttle } from 'lodash-es';
 
 /**
- * Widget resize feature plugin.
+ * The widget resize feature plugin.
  *
  * Use the {@link module:widget/widgetresize~WidgetResize#attachTo} method to create a resizer for the specified widget.
  *
@@ -172,7 +172,7 @@ export default class WidgetResize extends Plugin {
 }
 
 /**
- * Interface describing a resizer. It allows to specify resizing host, custom logic for calculating aspect ratio etc.
+ * Interface describing a resizer. It allows to specify the resizing host, custom logic for calculating aspect ratio, etc.
  *
  * @interface ResizerOptions
  */
@@ -190,12 +190,12 @@ export default class WidgetResize extends Plugin {
  */
 
 /**
- * A callback to be executed once resizing process is done.
+ * A callback to be executed once the resizing process is done.
  *
  * It receives a `Number` (`newValue`) as a parameter.
  *
- * For example, {@link module:image/imageresize~ImageResize} uses it to execute image resize command,
- * which puts new value into the model.
+ * For example, {@link module:image/imageresize~ImageResize} uses it to execute the image resize command
+ * which puts the new value into the model.
  *
  * ```js
  * {

+ 15 - 15
packages/ckeditor5-widget/src/widgetresize/resizer.js

@@ -27,7 +27,7 @@ export default class Resizer {
 	 */
 	constructor( options ) {
 		/**
-		 * Stores the state of resizable host geometry, such as original width, currently proposed height, etc.
+		 * Stores the state of the resizable host geometry, such as the original width, the currently proposed height, etc.
 		 *
 		 * Note that a new state is created for each resize transaction.
 		 *
@@ -36,7 +36,7 @@ export default class Resizer {
 		 */
 
 		/**
-		 * A view displaying new proposed element's size during the resizing.
+		 * A view displaying the proposed new element size during the resizing.
 		 *
 		 * @protected
 		 * @readonly
@@ -100,7 +100,7 @@ export default class Resizer {
 			return domElement;
 		} );
 
-		// Append resizer wrapper to the widget's wrapper.
+		// Append the resizer wrapper to the widget's wrapper.
 		writer.insert( writer.createPositionAt( widgetElement, 'end' ), viewResizerWrapper );
 		writer.addClass( 'ck-widget_with-resizer', widgetElement );
 	}
@@ -108,7 +108,7 @@ export default class Resizer {
 	/**
 	 * Starts the resizing process.
 	 *
-	 * Creates a new {@link #state} for current process.
+	 * Creates a new {@link #state} for the current process.
 	 *
 	 * @fires begin
 	 * @param {HTMLElement} domResizeHandle Clicked handle.
@@ -166,7 +166,7 @@ export default class Resizer {
 	}
 
 	/**
-	 * Cancels and rejects proposed resize dimensions hiding all the UI.
+	 * Cancels and rejects the proposed resize dimensions, hiding the UI.
 	 *
 	 * @fires cancel
 	 */
@@ -243,7 +243,7 @@ export default class Resizer {
 	}
 
 	/**
-	 * Method used to calculate the proposed size as the resize handles are dragged.
+	 * Calculates the proposed size as the resize handles are dragged.
 	 *
 	 * @private
 	 * @param {Event} domEventData Event data that caused the size update request. It should be used to calculate the proposed size.
@@ -315,9 +315,9 @@ export default class Resizer {
 	}
 
 	/**
-	 * Method used to obtain the resize host.
+	 * Obtains the resize host.
 	 *
-	 * Resize host is an object that receives dimensions that are result of resizing.
+	 * Resize host is an object that receives dimensions which are the result of resizing.
 	 *
 	 * @protected
 	 * @returns {HTMLElement}
@@ -329,12 +329,12 @@ export default class Resizer {
 	}
 
 	/**
-	 * Method used to obtain the handle host.
+	 * Obtains the handle host.
 	 *
-	 * Handle host is an object to which the handles are aligned to.
+	 * Handle host is an object that the handles are aligned to.
 	 *
-	 * Handle host will not always be an entire widget itself. Take an image as an example. Image widget
-	 * contains an image and a caption. Only image should be surrounded with handles.
+	 * Handle host will not always be an entire widget itself. Take an image as an example. The image widget
+	 * contains an image and a caption. Only the image should be surrounded with handles.
 	 *
 	 * @protected
 	 * @returns {HTMLElement}
@@ -346,7 +346,7 @@ export default class Resizer {
 	}
 
 	/**
-	 * Renders the resize handles in DOM.
+	 * Renders the resize handles in the DOM.
 	 *
 	 * @private
 	 * @param {HTMLElement} domElement The resizer wrapper.
@@ -385,7 +385,7 @@ export default class Resizer {
 	 * Determines the position of a given resize handle.
 	 *
 	 * @private
-	 * @param {HTMLElement} domHandle Handler used to calculate reference point.
+	 * @param {HTMLElement} domHandle Handler used to calculate the reference point.
 	 * @returns {String|undefined} Returns a string like `"top-left"` or `undefined` if not matched.
 	 */
 	_getHandlePosition( domHandle ) {
@@ -418,7 +418,7 @@ export default class Resizer {
 mix( Resizer, ObservableMixin );
 
 /**
- * A view displaying new proposed element's size during the resizing.
+ * A view displaying the proposed new element size during the resizing.
  *
  * @extends {module:ui/view~View}
  */

+ 17 - 17
packages/ckeditor5-widget/src/widgetresize/resizerstate.js

@@ -22,28 +22,28 @@ export default class ResizeState {
 	 */
 	constructor( options ) {
 		/**
-		 * TODO
+		 * The original width (pixels) of the resized object when the resize process was started.
 		 *
 		 * @readonly
 		 * @member {Number} #originalWidth
 		 */
 
 		/**
-		 * TODO
+		 * The original height (pixels) of the resized object when the resize process was started.
 		 *
 		 * @readonly
 		 * @member {Number} #originalHeight
 		 */
 
 		/**
-		 * TODO
+		 * The original width (percents) of the resized object when the resize process was started.
 		 *
 		 * @readonly
 		 * @member {Number} #originalWidthPercents
 		 */
 
 		/**
-		 * Position of the handle that has initiated the resizing. E.g. `"top-left"`, `"bottom-right"` etc or `null`
+		 * The position of the handle that initiated the resizing. E.g. `"top-left"`, `"bottom-right"` etc. or `null`
 		 * if unknown.
 		 *
 		 * @readonly
@@ -53,7 +53,7 @@ export default class ResizeState {
 		this.set( 'activeHandlePosition', null );
 
 		/**
-		 * TODO
+		 * The width (percents) proposed, but not committed yet, in the current resize process.
 		 *
 		 * @readonly
 		 * @observable
@@ -62,7 +62,7 @@ export default class ResizeState {
 		this.set( 'proposedWidthPercents', null );
 
 		/**
-		 * TODO
+		 * The width (pixels) proposed, but not committed yet, in the current resize process.
 		 *
 		 * @readonly
 		 * @observable
@@ -71,7 +71,7 @@ export default class ResizeState {
 		this.set( 'proposedWidth', null );
 
 		/**
-		 * TODO
+		 * The height (pixels) proposed, but not committed yet, in the current resize process.
 		 *
 		 * @readonly
 		 * @observable
@@ -83,7 +83,7 @@ export default class ResizeState {
 		this.set( 'proposedHandleHostHeight', null );
 
 		/**
-		 * TODO
+		 * A width to height ratio of the resized image.
 		 *
 		 * @readonly
 		 * @member {Number} #aspectRatio
@@ -96,9 +96,9 @@ export default class ResizeState {
 		this._options = options;
 
 		/**
-		 * Reference point of resizer where the dragging started. It is used to measure the distance to user cursor
-		 * traveled, thus how much the image should be enlarged.
-		 * This information is only known after DOM was rendered, so it will be updated later.
+		 * The reference point of the resizer where the dragging started. It is used to measure the distance the user cursor
+		 * traveled, so how much the image should be enlarged.
+		 * This information is only known after the DOM was rendered, so it will be updated later.
 		 *
 		 * @private
 		 * @type {Object}
@@ -151,11 +151,11 @@ export default class ResizeState {
 mix( ResizeState, ObservableMixin );
 
 /**
- * Returns coordinates of top-left corner of a element, relative to the document's top-left corner.
+ * Returns coordinates of the top-left corner of an element, relative to the document's top-left corner.
  *
  * @private
  * @param {HTMLElement} element
- * @param {String} resizerPosition Position of the resize handler, e.g. `"top-left"`, `"bottom-right"`.
+ * @param {String} resizerPosition The position of the resize handle, e.g. `"top-left"`, `"bottom-right"`.
  * @returns {Object} return
  * @returns {Number} return.x
  * @returns {Number} return.y
@@ -176,8 +176,8 @@ function getAbsoluteBoundaryPoint( element, resizerPosition ) {
 
 /**
  * @private
- * @param {String} resizerPosition Expected resizer position like `"top-left"`, `"bottom-right"`.
- * @returns {String} A prefixed HTML class name for the resizer element
+ * @param {String} resizerPosition The expected resizer position, like `"top-left"`, `"bottom-right"`.
+ * @returns {String} A prefixed HTML class name for the resizer element.
  */
 function getResizerHandleClass( resizerPosition ) {
 	return `ck-widget__resizer__handle-${ resizerPosition }`;
@@ -187,7 +187,7 @@ function getResizerHandleClass( resizerPosition ) {
  * Determines the position of a given resize handle.
  *
  * @private
- * @param {HTMLElement} domHandle Handler used to calculate reference point.
+ * @param {HTMLElement} domHandle Handler used to calculate the reference point.
  * @returns {String|undefined} Returns a string like `"top-left"` or `undefined` if not matched.
  */
 function getHandlePosition( domHandle ) {
@@ -202,7 +202,7 @@ function getHandlePosition( domHandle ) {
 
 /**
  * @param {String} position Like `"top-left"`.
- * @returns {String} Inverted `position`, e.g. returns `"bottom-right"` if `"top-left"` was given as `position`.
+ * @returns {String} Inverted `position`, e.g. it returns `"bottom-right"` if `"top-left"` was given as `position`.
  */
 function getOppositePosition( position ) {
 	const parts = position.split( '-' );

+ 2 - 1
packages/ckeditor5-widget/src/widgettoolbarrepository.js

@@ -222,7 +222,8 @@ export default class WidgetToolbarRepository extends Plugin {
 			this.listenTo( this._balloon, 'change:visibleView', () => {
 				for ( const definition of this._toolbarDefinitions.values() ) {
 					if ( this._isToolbarVisible( definition ) ) {
-						this._updateToolbarsVisibility( definition );
+						const relatedElement = definition.getRelatedElement( this.editor.editing.view.document.selection );
+						repositionContextualBalloon( this.editor, relatedElement );
 					}
 				}
 			} );

+ 5 - 5
packages/ckeditor5-widget/theme/widget.css

@@ -9,7 +9,7 @@
 	--ck-resizer-border-width: 1px;
 	--ck-resizer-border-radius: 2px;
 
-	/* Set resizer with 50% offset. */
+	/* Set the resizer with a 50% offset. */
 	--ck-resizer-offset: calc( ( var(--ck-resizer-size) / -2 ) - 2px);
 
 	--ck-resizer-tooltip-offset: 10px;
@@ -26,7 +26,7 @@
 	display: none;
 	position: absolute;
 
-	/* The wrapper itself should not interfere with pointer device, only the handles. */
+	/* The wrapper itself should not interfere with the pointer device, only the handles should. */
 	pointer-events: none;
 
 	left: 0;
@@ -44,7 +44,7 @@
 .ck .ck-widget__resizer__handle {
 	position: absolute;
 
-	/* Resizers are the only UI elements that should interfere with pointer device. */
+	/* Resizers are the only UI elements that should interfere with a pointer device. */
 	pointer-events: all;
 
 	width: var(--ck-resizer-size);
@@ -79,7 +79,7 @@
 }
 
 .ck .ck-widget.ck-widget_with-selection-handler {
-	/* Make the widget wrapper a relative positioning container for the drag handler. */
+	/* Make the widget wrapper a relative positioning container for the drag handle. */
 	position: relative;
 
 	/* Show the selection handler on mouse hover over the widget. */
@@ -93,7 +93,7 @@
 		position: absolute;
 
 		& .ck-icon {
-			/* Make sure the icon in not a subject to font-size/line-height to avoid
+			/* Make sure the icon in not a subject to font-size or line-height to avoid
 			unnecessary spacing around it. */
 			display: block;
 		}