Esanders has uploaded a new change for review.
https://gerrit.wikimedia.org/r/247092
Change subject: SelectFileWidget: Show image preview
......................................................................
SelectFileWidget: Show image preview
Change-Id: Ieedc9c6337e459d3a2042fcc34455086d07c1929
---
M src/styles/widgets/SelectFileWidget.less
M src/themes/apex/widgets.less
M src/themes/mediawiki/widgets.less
M src/widgets/SelectFileWidget.js
4 files changed, 124 insertions(+), 26 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/92/247092/1
diff --git a/src/styles/widgets/SelectFileWidget.less
b/src/styles/widgets/SelectFileWidget.less
index 64bbd9d..c56d86a 100644
--- a/src/styles/widgets/SelectFileWidget.less
+++ b/src/styles/widgets/SelectFileWidget.less
@@ -2,12 +2,12 @@
.oo-ui-selectFileWidget {
display: inline-block;
- vertical-align: middle;
+
+ .oo-ui-actionFieldLayout-button {
+ vertical-align: top;
+ }
&-selectButton {
- display: table-cell;
- vertical-align: middle;
-
> .oo-ui-buttonElement-button {
position: relative;
overflow: hidden;
@@ -39,12 +39,15 @@
&-info {
width: 100%;
- display: table-cell;
- vertical-align: middle;
position: relative;
overflow: hidden;
+ cursor: default;
.oo-ui-box-sizing(border-box);
+
+ > .oo-ui-selectFileWidget-preview > img {
+ display: block;
+ }
> .oo-ui-selectFileWidget-label {
position: absolute;
@@ -67,6 +70,9 @@
> .oo-ui-selectFileWidget-clearButton {
z-index: 2;
+ > .oo-ui-buttonElement-button {
+ display: block;
+ }
}
}
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 49bc2a7..19e56bc 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -172,6 +172,7 @@
.theme-oo-ui-selectFileWidget () {
width: 100%;
max-width: 50em;
+ @select-file-preview-size: 6em;
.oo-ui-inline-spacing(0.5em);
@@ -182,9 +183,18 @@
}
&-info {
- height: 2.4em;
+ min-height: 2.4em;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 0.25em;
+ padding: 0;
+
+ > .oo-ui-selectFileWidget-preview {
+ margin: 0.5em;
+ & > img {
+ max-width: @select-file-preview-size;
+ max-height: @select-file-preview-size;
+ }
+ }
> .oo-ui-indicatorElement-indicator {
right: 0;
@@ -233,6 +243,12 @@
}
}
+ &-info-previewed {
+ > .oo-ui-selectFileWidget-label {
+ left: 7em;
+ }
+ }
+
&.oo-ui-widget-disabled {
.oo-ui-selectFileWidget-info {
color: #ccc;
@@ -253,9 +269,17 @@
}
}
- &.oo-ui-iconElement .oo-ui-selectFileWidget-info {
+ &.oo-ui-iconElement .oo-ui-selectFileWidget-info-previewed {
.oo-ui-selectFileWidget-label {
- left: @icon-size + 0.6em;
+ left: @icon-size + 0.5em + @select-file-preview-size +
1em;
+ }
+
+ > .oo-ui-iconElement-icon {
+ margin-left: @select-file-preview-size + 1em;
+ }
+
+ > .oo-ui-selectFileWidget-preview {
+ margin-left: 0.5em;
}
}
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index c9ea2b3..9b0a93f 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -174,6 +174,7 @@
.theme-oo-ui-selectFileWidget () {
width: 100%;
max-width: 50em;
+ @select-file-preview-size: 6em;
.oo-ui-inline-spacing(0.5em);
@@ -184,9 +185,18 @@
}
&-info {
- height: 2.4em;
+ min-height: 2.4em;
border: 1px solid #ccc;
border-radius: 0.1em;
+ padding: 0;
+
+ > .oo-ui-selectFileWidget-preview {
+ margin: 0.5em;
+ & > img {
+ max-width: @select-file-preview-size;
+ max-height: @select-file-preview-size;
+ }
+ }
> .oo-ui-indicatorElement-indicator {
right: 0;
@@ -235,6 +245,12 @@
}
}
+ &-info-previewed {
+ > .oo-ui-selectFileWidget-label {
+ left: 7em;
+ }
+ }
+
&.oo-ui-widget-disabled {
.oo-ui-selectFileWidget-info {
color: #ccc;
@@ -261,6 +277,20 @@
}
}
+ &.oo-ui-iconElement .oo-ui-selectFileWidget-info-previewed {
+ .oo-ui-selectFileWidget-label {
+ left: @icon-size + 0.5em + @select-file-preview-size +
1em;
+ }
+
+ > .oo-ui-iconElement-icon {
+ margin-left: @select-file-preview-size + 1em;
+ }
+
+ > .oo-ui-selectFileWidget-preview {
+ margin-left: 0.5em;
+ }
+ }
+
// With close, no indicator:
& .oo-ui-selectFileWidget-info {
.oo-ui-selectFileWidget-label {
diff --git a/src/widgets/SelectFileWidget.js b/src/widgets/SelectFileWidget.js
index 4eeb135..732503f 100644
--- a/src/widgets/SelectFileWidget.js
+++ b/src/widgets/SelectFileWidget.js
@@ -26,6 +26,7 @@
* @cfg {boolean} [droppable=true] Whether to accept files by drag and drop.
* @cfg {boolean} [showDropTarget=false] Whether to show a drop target.
Requires droppable to be true.
* @cfg {boolean} [dragDropUI=false] Deprecated alias for showDropTarget
+ * @cfg {boolean} [showPreview=false] Show a preview for supported image types
*/
OO.ui.SelectFileWidget = function OoUiSelectFileWidget( config ) {
var dragHandler;
@@ -47,16 +48,16 @@
// Parent constructor
OO.ui.SelectFileWidget.parent.call( this, config );
+ // Properties
+ this.info = new OO.ui.DecoratedOptionWidget( { autoFitLabel: true } );
+
// Mixin constructors
OO.ui.mixin.IconElement.call( this, config );
OO.ui.mixin.IndicatorElement.call( this, config );
- OO.ui.mixin.PendingElement.call( this, $.extend( {}, config, {
$pending: this.$info } ) );
- OO.ui.mixin.LabelElement.call( this, $.extend( {}, config, {
autoFitLabel: true } ) );
+ OO.ui.mixin.PendingElement.call( this, $.extend( {}, config, {
$pending: this.info.$element } ) );
// Properties
- this.$info = $( '<span>' );
-
- // Properties
+ this.showPreview = config.showPreview;
this.showDropTarget = config.showDropTarget;
this.isSupported = this.constructor.static.isSupported();
this.currentFile = null;
@@ -82,6 +83,12 @@
disabled: this.disabled
} );
+ this.selectAction = new OO.ui.ActionFieldLayout(
+ this.info,
+ this.selectButton,
+ { align: 'top' }
+ );
+
// Events
this.selectButton.$button.on( {
keypress: this.onKeyPress.bind( this )
@@ -99,16 +106,23 @@
} );
}
+ if ( this.showPreview ) {
+ this.$preview = $( '<div>' ).addClass(
'oo-ui-selectFileWidget-preview oo-ui-element-hidden' );
+ }
+
// Initialization
this.addInput();
this.updateUI();
- this.$label.addClass( 'oo-ui-selectFileWidget-label' );
- this.$info
+ this.info.$label.addClass( 'oo-ui-selectFileWidget-label' );
+ if ( this.showPreview ) {
+ this.info.$element.append( this.$preview );
+ }
+ this.info.$element
.addClass( 'oo-ui-selectFileWidget-info' )
- .append( this.$icon, this.$label, this.clearButton.$element,
this.$indicator );
+ .append( this.$icon, this.clearButton.$element, this.$indicator
);
this.$element
.addClass( 'oo-ui-selectFileWidget' )
- .append( this.$info, this.selectButton.$element );
+ .append( this.selectAction.$element );
if ( config.droppable && config.showDropTarget ) {
this.$dropTarget = $( '<div>' )
.addClass( 'oo-ui-selectFileWidget-dropTarget' )
@@ -126,7 +140,6 @@
OO.mixinClass( OO.ui.SelectFileWidget, OO.ui.mixin.IconElement );
OO.mixinClass( OO.ui.SelectFileWidget, OO.ui.mixin.IndicatorElement );
OO.mixinClass( OO.ui.SelectFileWidget, OO.ui.mixin.PendingElement );
-OO.mixinClass( OO.ui.SelectFileWidget, OO.ui.mixin.LabelElement );
/* Static Properties */
@@ -199,11 +212,19 @@
* @protected
*/
OO.ui.SelectFileWidget.prototype.updateUI = function () {
- var $label;
+ var $label, reader,
+ hasPreview = false,
+ widget = this;
+
+ if ( this.showPreview ) {
+ this.$preview.empty().addClass( 'oo-ui-element-hidden' );
+ this.info.$element.removeClass(
'oo-ui-selectFileWidget-info-previewed' );
+ }
+
if ( !this.isSupported ) {
this.$element.addClass( 'oo-ui-selectFileWidget-notsupported' );
this.$element.removeClass( 'oo-ui-selectFileWidget-empty' );
- this.setLabel( this.notsupported );
+ this.info.setLabel( this.notsupported );
} else {
this.$element.addClass( 'oo-ui-selectFileWidget-supported' );
if ( this.currentFile ) {
@@ -213,15 +234,32 @@
$label = $label.add( $( '<span>' ).addClass(
'oo-ui-selectFileWidget-fileType' ).text( this.currentFile.type ) );
}
$label = $label.add( $( '<span>' ).text(
this.currentFile.name ) );
- this.setLabel( $label );
+ this.info.setLabel( $label );
+ if ( this.showPreview && this.currentFile.type.indexOf(
'image/' ) === 0 ) {
+ reader = new FileReader();
+ reader.addEventListener( 'load', function () {
+ var img = document.createElement( 'img'
);
+ img.addEventListener( 'load', function
() {
+ if ( img.naturalWidth === 0 ||
img.naturalHeight === 0 || img.complete === false ) {
+ // Broken/unsuported
image
+ return;
+ }
+ widget.$preview.removeClass(
'oo-ui-element-hidden' ).append( img );
+ widget.info.$element.addClass(
'oo-ui-selectFileWidget-info-previewed' );
+ } );
+ img.src = reader.result;
+ } );
+ reader.readAsDataURL( this.currentFile );
+ hasPreview = true;
+ }
} else {
this.$element.addClass( 'oo-ui-selectFileWidget-empty'
);
- this.setLabel( this.placeholder );
+ this.info.setLabel( this.placeholder );
}
}
if ( this.$input ) {
- this.$input.attr( 'title', this.getLabel() );
+ this.$input.attr( 'title', this.info.getLabel() );
}
};
@@ -244,7 +282,7 @@
this.$input.on( 'change', this.onFileSelectedHandler );
this.$input.attr( {
tabindex: -1,
- title: this.getLabel()
+ title: this.info.getLabel()
} );
if ( this.accept ) {
this.$input.attr( 'accept', this.accept.join( ', ' ) );
--
To view, visit https://gerrit.wikimedia.org/r/247092
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ieedc9c6337e459d3a2042fcc34455086d07c1929
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
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
