Esanders has uploaded a new change for review.
https://gerrit.wikimedia.org/r/85970
Change subject: Show a label with the current dimensions while resizing
......................................................................
Show a label with the current dimensions while resizing
* Add config option to disable if required
* Centre label within resize handles
* Only show when resizing
* Sexy opacity transitions, rounded corners and multiplication
character
Bug: 54297
Change-Id: Ic49430ce3302f780ae4b05d1fa29e14db1192c84
---
M modules/ve/ce/styles/ve.ce.Node.css
M modules/ve/ce/ve.ce.ResizableNode.js
2 files changed, 74 insertions(+), 1 deletion(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/70/85970/1
diff --git a/modules/ve/ce/styles/ve.ce.Node.css
b/modules/ve/ce/styles/ve.ce.Node.css
index fcba4f4..e5e3964 100644
--- a/modules/ve/ce/styles/ve.ce.Node.css
+++ b/modules/ve/ce/styles/ve.ce.Node.css
@@ -111,6 +111,30 @@
right: -0.33em;
}
+.ve-ce-resizableNode-sizeLabel {
+ position: absolute;
+ text-align: center;
+ opacity: 0;
+ -webkit-transition: opacity 200ms;
+ -moz-transition: opacity 200ms;
+ -ms-transition: opacity 200ms;
+ -o-transition: opacity 200ms;
+ transition: opacity 200ms;
+}
+
+.ve-ce-resizableNode-sizeLabel-resizing {
+ opacity: 1;
+}
+
+.ve-ce-resizableNode-sizeText {
+ font-size: 0.8em;
+ padding: 0.25em 0.5em;
+ border: solid 1px #ccc;
+ background-color: white;
+ border-radius: 0.2em;
+ white-space: nowrap;
+}
+
/* ve.ce.RelocatableNode */
.ve-ce-relocatableNode-marker {
diff --git a/modules/ve/ce/ve.ce.ResizableNode.js
b/modules/ve/ce/ve.ce.ResizableNode.js
index 62cea43..feac157 100644
--- a/modules/ve/ce/ve.ce.ResizableNode.js
+++ b/modules/ve/ce/ve.ce.ResizableNode.js
@@ -13,13 +13,19 @@
*
* @constructor
* @param {jQuery} [$resizable=this.$] Resizable DOM element
+ * @param {Object} [config] Configuration options
+ * @param {boolean} [config.showSizeLabel=true] Show a label with the current
dimensions while resizing
*/
-ve.ce.ResizableNode = function VeCeResizableNode( $resizable ) {
+ve.ce.ResizableNode = function VeCeResizableNode( $resizable, config ) {
// Properties
this.$resizable = $resizable || this.$;
this.ratio = this.model.getAttribute( 'width' ) /
this.model.getAttribute( 'height' );
this.resizing = false;
this.$resizeHandles = this.$$( '<div>' );
+ if( !config || config.showSizeLabel !== false ) {
+ this.$sizeText = $( '<span>' ).addClass(
've-ce-resizableNode-sizeText' );
+ this.$sizeLabel = this.$$( '<div>' ).addClass(
've-ce-resizableNode-sizeLabel' ).append( this.$sizeText );
+ }
// Events
this.connect( this, {
@@ -45,11 +51,48 @@
/* Methods */
/**
+ * Update the contents and position of the size label
+ *
+ * Omitting the dimensions object will hide the size label.
+ *
+ * @param {Object|undefined} dimensions Dimensions object with width, height,
top & left, or undefined to hide
+ */
+ve.ce.ResizableNode.prototype.updateSizeLabel = function ( dimensions ) {
+ if ( !this.$sizeLabel ) {
+ return;
+ }
+ var node;
+ if ( dimensions ) {
+ this.$sizeLabel
+ .addClass( 've-ce-resizableNode-sizeLabel-resizing' )
+ .css( {
+ 'top': dimensions.top,
+ 'left': dimensions.left,
+ 'width': dimensions.width,
+ 'height': dimensions.height,
+ 'lineHeight': dimensions.height + 'px',
+ } );
+ this.$sizeText.text( Math.round( dimensions.width ) + ' × ' +
Math.round( dimensions.height ) );
+ } else {
+ node = this;
+ // Defer the removal of this class otherwise other DOM changes
may cause
+ // the opacity transition to not play out smoothly
+ setTimeout( function () {
+ node.$sizeLabel.removeClass(
've-ce-resizableNode-sizeLabel-resizing' );
+ } );
+ }
+};
+
+/**
* Handle node focus.
*
* @method
*/
ve.ce.ResizableNode.prototype.onResizableFocus = function () {
+ if ( this.$sizeLabel ) {
+ // Attach the size label first so it doesn't mask the resize
handles
+ this.$sizeLabel.appendTo(
this.root.getSurface().getSurface().$localOverlayControls );
+ }
this.$resizeHandles.appendTo(
this.root.getSurface().getSurface().$localOverlayControls );
this.setResizableHandlesSizeAndPosition();
@@ -82,6 +125,9 @@
*/
ve.ce.ResizableNode.prototype.onResizableBlur = function () {
this.$resizeHandles.detach();
+ if ( this.$sizeLabel ) {
+ this.$sizeLabel.detach();
+ }
};
/**
@@ -135,6 +181,7 @@
// Bind resize events
this.resizing = true;
+ this.updateSizeLabel( this.resizeInfo );
$( this.getElementDocument() ).on( {
'mousemove.ve-ce-resizableNode': ve.bind(
this.onDocumentMouseMove, this ),
'mouseup.ve-ce-resizableNode': ve.bind( this.onDocumentMouseUp,
this )
@@ -249,6 +296,7 @@
// Update bounding box
this.$resizeHandles.css( dimensions );
+ this.updateSizeLabel( dimensions );
}
};
@@ -269,6 +317,7 @@
this.$resizeHandles.removeClass( 've-ui-resizableNode-handles-resizing'
);
$( this.getElementDocument() ).off( '.ve-ce-resizableNode' );
this.resizing = false;
+ this.updateSizeLabel();
// Apply changes to the model
attrChanges = this.getAttributeChanges( width, height );
--
To view, visit https://gerrit.wikimedia.org/r/85970
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic49430ce3302f780ae4b05d1fa29e14db1192c84
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
