Esanders has uploaded a new change for review.
https://gerrit.wikimedia.org/r/109519
Change subject: Show % scale on ResizableNodes
......................................................................
Show % scale on ResizableNodes
Requires original dimensions to be provided.
Implement on ImageNodes using naturalWidth/Height.
Change-Id: I2719ddd0dae73db4927aff592a565560c6a1d5dc
---
M modules/ve/ce/nodes/ve.ce.ImageNode.js
M modules/ve/ce/styles/ve.ce.Node.css
M modules/ve/ce/ve.ce.ResizableNode.js
3 files changed, 56 insertions(+), 6 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/VisualEditor/VisualEditor
refs/changes/19/109519/1
diff --git a/modules/ve/ce/nodes/ve.ce.ImageNode.js
b/modules/ve/ce/nodes/ve.ce.ImageNode.js
index 0b55faf..08c6530 100644
--- a/modules/ve/ce/nodes/ve.ce.ImageNode.js
+++ b/modules/ve/ce/nodes/ve.ce.ImageNode.js
@@ -32,6 +32,7 @@
// Events
this.$element.on( 'click', ve.bind( this.onClick, this ) );
+ this.$image.on( 'load', ve.bind( this.onLoad, this ) );
this.model.connect( this, { 'attributeChange': 'onAttributeChange' } );
// Initialization
@@ -100,6 +101,19 @@
).select();
};
+/**
+ * Handle the image load
+ *
+ * @method
+ * @param {jQuery.Event} e Load event
+ */
+ve.ce.ImageNode.prototype.onLoad = function () {
+ this.setOriginalDimensions( {
+ 'width': this.$image.prop( 'naturalWidth' ),
+ 'height': this.$image.prop( 'naturalHeight' )
+ } );
+};
+
/* Registration */
ve.ce.nodeFactory.register( ve.ce.ImageNode );
diff --git a/modules/ve/ce/styles/ve.ce.Node.css
b/modules/ve/ce/styles/ve.ce.Node.css
index 3eea298..1002855 100644
--- a/modules/ve/ce/styles/ve.ce.Node.css
+++ b/modules/ve/ce/styles/ve.ce.Node.css
@@ -144,6 +144,12 @@
white-space: nowrap;
}
+.ve-ce-resizableNode-sizeText span:not(:first-child) {
+ margin-left: 0.4em;
+ padding-left: 0.4em;
+ border-left: solid 1px #ccc;
+}
+
/* 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 26297e9..5f6be1b 100644
--- a/modules/ve/ce/ve.ce.ResizableNode.js
+++ b/modules/ve/ce/ve.ce.ResizableNode.js
@@ -17,6 +17,7 @@
* @param {number|null} [config.snapToGrid=10] Snap to a grid of size X when
the shift key is held. Null disables.
* @param {boolean} [config.outline=false] Resize using an outline of the
element only, don't live preview.
* @param {boolean} [config.showSizeLabel=true] Show a label with the current
dimensions while resizing
+ * @param {boolean} [config.showScaleLabel=true] Show a label with the current
scale while resizing
* @param {boolean} [config.min=1] Minimum size of longest edge
* @param {boolean} [config.max=Infinity] Maximum size or longest edge
*/
@@ -29,11 +30,16 @@
this.$resizeHandles = this.$( '<div>' );
this.snapToGrid = config.snapToGrid !== undefined ? config.snapToGrid :
10;
this.outline = !!config.outline;
- if ( config.showSizeLabel !== false ) {
+ this.showSizeLabel = config.showSizeLabel !== false;
+ this.showScaleLabel = config.showScaleLabel !== false;
+ // Only gets enabled when the original dimensions are provided
+ this.canShowScaleLabel = false;
+ if ( this.showSizeLabel || this.showScaleLabel ) {
this.$sizeText = this.$( '<span>' ).addClass(
've-ce-resizableNode-sizeText' );
this.$sizeLabel = this.$( '<div>' ).addClass(
've-ce-resizableNode-sizeLabel' ).append( this.$sizeText );
}
this.resizableOffset = null;
+ this.originalDimensions = null;
this.min = config.min !== undefined ? config.min : 1;
this.max = config.max !== undefined ? config.max : Infinity;
@@ -92,6 +98,17 @@
};
/**
+ * Set the orignal dimensions of an image
+ *
+ * @param {Object} dimensions Dimensions object with width & height
+ */
+ve.ce.ResizableNode.prototype.setOriginalDimensions = function ( dimensions ) {
+ this.originalDimensions = ve.copy( dimensions );
+ // If dimensions are valid and the scale label is desired, enable it
+ this.canShowScaleLabel = this.showScaleLabel &&
this.originalDimensions.width && this.originalDimensions.height;
+};
+
+/**
* Update the contents and position of the size label
*
* Omitting the dimensions object will hide the size label.
@@ -99,14 +116,15 @@
* @param {Object} [dimensions] Dimensions object with width, height, top &
left, or undefined to hide
*/
ve.ce.ResizableNode.prototype.updateSizeLabel = function ( dimensions ) {
- if ( !this.$sizeLabel ) {
+ if ( !this.showSizeLabel && !this.canShowScaleLabel ) {
return;
}
- var offset, node, top, height;
+ var offset, node, top, height, minWidth;
if ( dimensions ) {
offset = this.getResizableOffset();
- // Things get a bit tight below 100px, so put the label on the
outside
- if ( dimensions.width < 100 ) {
+ minWidth = ( this.showSizeLabel ? 100 : 0 ) + (
this.showScaleLabel ? 30 : 0 );
+ // Put the label on the outside when too narrow
+ if ( dimensions.width < minWidth ) {
top = offset.top + dimensions.height;
height = 30;
} else {
@@ -122,7 +140,19 @@
'height': height,
'lineHeight': height + 'px'
} );
- this.$sizeText.text( Math.round( dimensions.width ) + ' × ' +
Math.round( dimensions.height ) );
+ this.$sizeText.empty();
+ if ( this.showSizeLabel ) {
+ this.$sizeText.append( $( '<span>' )
+ .addClass( 've-ce-resizableNode-sizeText-size' )
+ .text( Math.round( dimensions.width ) + ' × ' +
Math.round( dimensions.height ) )
+ );
+ }
+ if ( this.canShowScaleLabel ) {
+ this.$sizeText.append( $( '<span>' )
+ .addClass( 've-ce-resizableNode-sizeText-scale'
)
+ .text( Math.round( 100 * dimensions.width /
this.originalDimensions.width ) + '%' )
+ );
+ }
} else {
node = this;
// Defer the removal of this class otherwise other DOM changes
may cause
--
To view, visit https://gerrit.wikimedia.org/r/109519
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I2719ddd0dae73db4927aff592a565560c6a1d5dc
Gerrit-PatchSet: 1
Gerrit-Project: VisualEditor/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Esanders <esand...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
