Thijs/wiki.techinc.nl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UploadBooklet: Show image thumbnail in both steps

Browse source 
Bug: T115860
Change-Id: I0794206dad06fd0652e9b62884e8996e836b73b3
This commit is contained in:
Prateek Saxena 2016-02-11 18:17:40 +05:30
parent 17603263ce
commit e80ea1c4e3
4 changed files with 66 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
resources/Resources.php
View file

@ -1182,6 +1182,9 @@ return array(
'scripts' => array(
'resources/src/mediawiki/mediawiki.Upload.BookletLayout.js',
),
'styles' => array(
'resources/src/mediawiki/mediawiki.Upload.BookletLayout.css',
),
'dependencies' => array(
'oojs-ui',
'oojs-ui.styles.icons-content',

10
resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.js
View file

@ -158,6 +158,8 @@
layout.getDateFromExif( file ).done( function ( date ) {
layout.dateWidget.setValue( date );
} );
layout.updateFilePreview();
} );
return this.uploadForm;
@ -179,6 +181,9 @@
mw.ForeignStructuredUpload.BookletLayout.prototype.renderInfoForm = function () {
var fieldset;
this.filePreview = new OO.ui.Widget( {
classes: [ 'mw-upload-bookletLayout-filePreview' ]
} );
this.filenameWidget = new OO.ui.TextInputWidget( {
required: true,
validate: /.+/
@ -223,7 +228,10 @@
align: 'top'
} )
] );
this.infoForm = new OO.ui.FormLayout( { items: [ fieldset ] } );
this.infoForm = new OO.ui.FormLayout( {
classes: [ 'mw-upload-bookletLayout-infoForm' ],
items: [ this.filePreview, fieldset ]
} );
// Validation
this.filenameWidget.on( 'change', this.onInfoFormChange.bind( this ) );

19
resources/src/mediawiki/mediawiki.Upload.BookletLayout.css Normal file
View file

@ -0,0 +1,19 @@
.mw-upload-bookletLayout-filePreview {
width: 100%;
height: 1em;
background-color: #eee;
background-size: cover;
background-position: center center;
padding: 1.5em;
margin: -1.5em;
margin-bottom: 1.5em;
}
.mw-upload-bookletLayout-infoForm.mw-upload-bookletLayout-hasThumbnail .mw-upload-bookletLayout-filePreview {
height: 10em;
}
.mw-upload-bookletLayout-filePreview p {
line-height: 1em;
margin: 0;
}

37
resources/src/mediawiki/mediawiki.Upload.BookletLayout.js
View file

@ -383,7 +383,8 @@
* @return {OO.ui.FormLayout}
*/
mw.Upload.BookletLayout.prototype.renderUploadForm = function () {
var fieldset;
var fieldset,
layout = this;
this.selectFileWidget = new OO.ui.SelectFileWidget( {
showDropTarget: true
@ -395,9 +396,35 @@
// Validation
this.selectFileWidget.on( 'change', this.onUploadFormChange.bind( this ) );
this.selectFileWidget.on( 'change', function () {
layout.updateFilePreview();
} );
return this.uploadForm;
};
/**
* Updates the file preview on the info form when a file is added.
*
* @protected
*/
mw.Upload.BookletLayout.prototype.updateFilePreview = function () {
this.selectFileWidget.loadAndGetImageUrl().done( function ( url ) {
this.filePreview.$element.find( 'p' ).remove();
this.filePreview.$element.css( 'background-image', 'url(' + url + ')' );
this.infoForm.$element.addClass( 'mw-upload-bookletLayout-hasThumbnail' );
}.bind( this ) ).fail( function () {
this.filePreview.$element.find( 'p' ).remove();
if ( this.selectFileWidget.getValue() ) {
this.filePreview.$element.append(
$( '<p>' ).text( this.selectFileWidget.getValue().name )
);
}
this.filePreview.$element.css( 'background-image', '' );
this.infoForm.$element.removeClass( 'mw-upload-bookletLayout-hasThumbnail' );
}.bind( this ) );
};
/**
* Handle change events to the upload form
*
@ -419,6 +446,9 @@
mw.Upload.BookletLayout.prototype.renderInfoForm = function () {
var fieldset;
this.filePreview = new OO.ui.Widget( {
classes: [ 'mw-upload-bookletLayout-filePreview' ]
} );
this.filenameWidget = new OO.ui.TextInputWidget( {
indicator: 'required',
required: true,
@ -447,7 +477,10 @@
help: mw.msg( 'upload-form-label-infoform-description-tooltip' )
} )
] );
this.infoForm = new OO.ui.FormLayout( { items: [ fieldset ] } );
this.infoForm = new OO.ui.FormLayout( {
classes: [ 'mw-upload-bookletLayout-infoForm' ],
items: [ this.filePreview, fieldset ]
} );
this.filenameWidget.on( 'change', this.onInfoFormChange.bind( this ) );
this.descriptionWidget.on( 'change', this.onInfoFormChange.bind( this ) );