JGonera has uploaded a new change for review. https://gerrit.wikimedia.org/r/84032
Change subject: Load photo uploader dynamically ...................................................................... Load photo uploader dynamically Refactor the code in the process (split the button and "controller" code) and rename/move some of the templates so that it's clear where they belong. Initial page load (stable, desktop Chrome) before: 320KB, after: 303KB. Bug: 48718 Change-Id: I1b167dd27ba0488f99cbd3a29287d8af95011647 --- M includes/Resources.php M javascripts/modules/uploads/LeadPhoto.js M javascripts/modules/uploads/LearnMoreOverlay.js M javascripts/modules/uploads/NagOverlay.js M javascripts/modules/uploads/PhotoUploadProgress.js M javascripts/modules/uploads/PhotoUploader.js A javascripts/modules/uploads/PhotoUploaderButton.js M javascripts/modules/uploads/PhotoUploaderPreview.js R templates/uploads/LeadPhoto.html R templates/uploads/LeadPhotoUploaderButton.html R templates/uploads/LearnMoreOverlay.html R templates/uploads/NagOverlay.html R templates/uploads/PhotoUploadPreview.html R templates/uploads/PhotoUploadProgress.html R templates/uploads/PhotoUploaderButton.html 15 files changed, 290 insertions(+), 235 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend refs/changes/32/84032/1 diff --git a/includes/Resources.php b/includes/Resources.php index fbd1bfc..079bf07 100644 --- a/includes/Resources.php +++ b/includes/Resources.php @@ -156,20 +156,6 @@ 'mobile.stable.plumbing' => array( 'messages' => array( - // NagOverlay.js - 'mobile-frontend-photo-license' => array( 'parse' ), - 'mobile-frontend-photo-nag-1-bullet-1-heading', - 'mobile-frontend-photo-nag-1-bullet-1-text' => array( 'parse' ), - 'mobile-frontend-photo-nag-1-bullet-2-heading', - 'mobile-frontend-photo-nag-1-bullet-2-text', - 'mobile-frontend-photo-nag-2-bullet-1-heading', - 'mobile-frontend-photo-nag-3-bullet-1-heading', - 'parentheses', - 'mobile-frontend-learn-more', - 'mobile-frontend-photo-nag-learn-more-heading', - 'mobile-frontend-photo-nag-learn-more-1' => array( 'parse' ), - 'mobile-frontend-photo-nag-learn-more-2' => array( 'parse' ), - 'mobile-frontend-photo-nag-learn-more-3' => array( 'parse' ), // page.js 'mobile-frontend-talk-overlay-header', 'mobile-frontend-language-article-heading', @@ -189,27 +175,21 @@ 'wikitext/commons-upload', // LanguageOverlay.js 'overlays/languages', - // leadphoto.js - 'leadPhoto', 'overlay', 'overlays/cleanup', - 'overlays/learnMore', // search-2.js 'articleList', 'overlays/search/search', // page.js 'page', 'languageSection', - // PhotoUploader.js + // PhotoUploaderButton.js // For new page action menu - 'photoUploadAction', - 'photoUploader', - // PhotoUploaderPreview.js - 'photoUploadPreview', - // PhotoUploadProgress.js - 'photoUploadProgress', - // NagOverlay.js - 'photoNag', + 'uploads/LeadPhotoUploaderButton', + // FIXME: this should be in special.uploads.plumbing (need to split + // code in PhotoUploaderButton.js into separate files too) + 'uploads/PhotoUploaderButton', + 'ctaDrawer', // mf-references.js 'ReferencesDrawer', @@ -254,6 +234,80 @@ 'mobile-frontend-editor-error-loading', 'mobile-frontend-editor-preview-header', 'mobile-frontend-editor-error-preview', + ), + ), + + 'mobile.dynamic.uploads' => $wgMFMobileResourceBoilerplate + array( + 'dependencies' => array( + 'mobile.stable', + 'mobile.dynamic.uploads.plumbing', + ), + 'scripts' => array( + 'javascripts/modules/uploads/LearnMoreOverlay.js', + 'javascripts/modules/uploads/PhotoApi.js', + 'javascripts/modules/uploads/NagOverlay.js', + 'javascripts/modules/uploads/PhotoUploadProgress.js', + 'javascripts/modules/uploads/PhotoUploaderPreview.js', + 'javascripts/modules/uploads/LeadPhoto.js', + 'javascripts/modules/uploads/PhotoUploader.js', + ), + ), + + 'mobile.dynamic.uploads.plumbing' => array( + 'class' => 'MFResourceLoaderModule', + 'localBasePath' => $localBasePath, + 'localTemplateBasePath' => $localBasePath . '/templates', + 'templates' => array( + 'uploads/PhotoUploadPreview', + 'uploads/PhotoUploadProgress', + 'uploads/NagOverlay', + 'uploads/LearnMoreOverlay', + 'uploads/LeadPhoto', + ), + 'messages' => array( + 'mobile-frontend-photo-upload-success-article', + 'mobile-frontend-photo-upload-error', + + // LearnMoreOverlay.js + 'mobile-frontend-photo-ownership-confirm', + + // PhotoApi.js + 'mobile-frontend-photo-article-edit-comment', + 'mobile-frontend-photo-article-donate-comment', + 'mobile-frontend-photo-upload-error-filename', + 'mobile-frontend-photo-upload-comment', + + // PhotoUploaderPreview.js + 'mobile-frontend-photo-ownership', + 'mobile-frontend-photo-ownership-help', + 'mobile-frontend-photo-caption-placeholder', + 'mobile-frontend-image-loading', + 'mobile-frontend-photo-submit', + 'mobile-frontend-photo-cancel', + 'mobile-frontend-photo-ownership-bullet-one', + 'mobile-frontend-photo-ownership-bullet-two', + 'mobile-frontend-photo-ownership-bullet-three', + 'mobile-frontend-photo-upload-error-file-type', + + // PhotoUploadProgress.js + 'mobile-frontend-image-uploading-wait', + 'mobile-frontend-image-uploading-long', + 'mobile-frontend-image-uploading-cancel', + + // NagOverlay.js + 'mobile-frontend-photo-license' => array( 'parse' ), + 'mobile-frontend-photo-nag-1-bullet-1-heading', + 'mobile-frontend-photo-nag-1-bullet-1-text' => array( 'parse' ), + 'mobile-frontend-photo-nag-1-bullet-2-heading', + 'mobile-frontend-photo-nag-1-bullet-2-text', + 'mobile-frontend-photo-nag-2-bullet-1-heading', + 'mobile-frontend-photo-nag-3-bullet-1-heading', + 'parentheses', + 'mobile-frontend-learn-more', + 'mobile-frontend-photo-nag-learn-more-heading', + 'mobile-frontend-photo-nag-learn-more-1' => array( 'parse' ), + 'mobile-frontend-photo-nag-learn-more-2' => array( 'parse' ), + 'mobile-frontend-photo-nag-learn-more-3' => array( 'parse' ), ), ), @@ -431,13 +485,7 @@ 'javascripts/common/notification.js', 'javascripts/views/page.js', // Upload specific code - 'javascripts/modules/uploads/LearnMoreOverlay.js', - 'javascripts/modules/uploads/PhotoApi.js', - 'javascripts/modules/uploads/NagOverlay.js', - 'javascripts/modules/uploads/PhotoUploadProgress.js', - 'javascripts/modules/uploads/PhotoUploaderPreview.js', - 'javascripts/modules/uploads/LeadPhoto.js', - 'javascripts/modules/uploads/PhotoUploader.js', + 'javascripts/modules/uploads/PhotoUploaderButton.js', // Language specific code 'javascripts/common/languages/LanguageOverlay.js', ), @@ -448,36 +496,11 @@ 'mobile-frontend-drawer-cancel', 'mobile-frontend-overlay-escape', - // LearnMoreOverlay.js, newbie.js - 'mobile-frontend-photo-ownership-confirm', - 'cancel', - - // PhotoApi.js - 'mobile-frontend-photo-article-edit-comment', - 'mobile-frontend-photo-article-donate-comment', - 'mobile-frontend-photo-upload-error-filename', - 'mobile-frontend-photo-upload-comment', - - // PhotoUploader.js - 'mobile-frontend-photo-upload-error', + // PhotoUploaderButton.js 'mobile-frontend-photo-upload-cta', - // PhotoUploaderPreview.js - 'mobile-frontend-photo-ownership', - 'mobile-frontend-photo-ownership-help', - 'mobile-frontend-photo-caption-placeholder', - 'mobile-frontend-image-loading', - 'mobile-frontend-photo-submit', - 'mobile-frontend-photo-cancel', - 'mobile-frontend-photo-ownership-bullet-one', - 'mobile-frontend-photo-ownership-bullet-two', - 'mobile-frontend-photo-ownership-bullet-three', - 'mobile-frontend-photo-upload-error-file-type', - - // PhotoUploadProgress.js - 'mobile-frontend-image-uploading-wait', - 'mobile-frontend-image-uploading-long', - 'mobile-frontend-image-uploading-cancel', + // LearnMoreOverlay.js, newbie.js + 'cancel', // LanguageOverlay.js 'mobile-frontend-language-header', @@ -529,7 +552,6 @@ 'mobile-frontend-photo-upload-protected', 'mobile-frontend-photo-upload-anon', 'mobile-frontend-photo-upload-unavailable', - 'mobile-frontend-photo-upload-success-article', 'mobile-frontend-photo-upload', // mf-watchstar.js @@ -695,6 +717,7 @@ 'mobile.uploads.plumbing', 'mobile.stable.styles', 'mobile.stable.common', + 'mobile.dynamic.uploads', ), 'messages' => array( 'mobile-frontend-photo-upload-generic', diff --git a/javascripts/modules/uploads/LeadPhoto.js b/javascripts/modules/uploads/LeadPhoto.js index a7fe59a..2aed30c 100644 --- a/javascripts/modules/uploads/LeadPhoto.js +++ b/javascripts/modules/uploads/LeadPhoto.js @@ -3,7 +3,7 @@ var View = M.require( 'view' ), LeadPhoto; LeadPhoto = View.extend( { - template: M.template.get( 'leadPhoto' ), + template: M.template.get( 'uploads/LeadPhoto' ), animate: function() { this.$el.hide().slideDown(); diff --git a/javascripts/modules/uploads/LearnMoreOverlay.js b/javascripts/modules/uploads/LearnMoreOverlay.js index c843643..9a82fc2 100644 --- a/javascripts/modules/uploads/LearnMoreOverlay.js +++ b/javascripts/modules/uploads/LearnMoreOverlay.js @@ -4,7 +4,7 @@ defaults: { confirmMessage: mw.msg( 'mobile-frontend-photo-ownership-confirm' ) }, - template: M.template.get( 'overlays/learnMore' ) + template: M.template.get( 'uploads/LearnMoreOverlay' ) } ); M.define( 'modules/uploads/LearnMoreOverlay', LearnMoreOverlay ); diff --git a/javascripts/modules/uploads/NagOverlay.js b/javascripts/modules/uploads/NagOverlay.js index a2511f3..f44dfcb 100644 --- a/javascripts/modules/uploads/NagOverlay.js +++ b/javascripts/modules/uploads/NagOverlay.js @@ -8,7 +8,7 @@ learnMore: mw.msg( 'parentheses', mw.msg( 'mobile-frontend-learn-more' ) ) }, - template: M.template.get( 'photoNag' ), + template: M.template.get( 'uploads/NagOverlay' ), initialize: function( options ) { this.learnMoreOverlay = new LearnMoreOverlay( { diff --git a/javascripts/modules/uploads/PhotoUploadProgress.js b/javascripts/modules/uploads/PhotoUploadProgress.js index ff2bd14..0b853cc 100644 --- a/javascripts/modules/uploads/PhotoUploadProgress.js +++ b/javascripts/modules/uploads/PhotoUploadProgress.js @@ -10,7 +10,7 @@ messageInterval: 10000 }, - template: M.template.get( 'photoUploadProgress' ), + template: M.template.get( 'uploads/PhotoUploadProgress' ), className: 'drawer position-fixed text loading', locked: true, diff --git a/javascripts/modules/uploads/PhotoUploader.js b/javascripts/modules/uploads/PhotoUploader.js index bf8a7a0..48d2e72 100644 --- a/javascripts/modules/uploads/PhotoUploader.js +++ b/javascripts/modules/uploads/PhotoUploader.js @@ -1,30 +1,11 @@ ( function( M, $ ) { - var View = M.require( 'view' ), + var Class = M.require( 'Class' ), popup = M.require( 'notifications' ), - CtaDrawer = M.require( 'CtaDrawer' ), NagOverlay = M.require( 'modules/uploads/NagOverlay' ), PhotoApi = M.require( 'modules/uploads/PhotoApi' ), PhotoUploadProgress = M.require( 'modules/uploads/PhotoUploadProgress' ), PhotoUploaderPreview = M.require( 'modules/uploads/PhotoUploaderPreview' ), - PhotoUploader, - PhotoUploaderButton, - LeadPhoto = M.require( 'modules/uploads/LeadPhoto' ), - LeadPhotoUploaderButton; - - function isSupported() { - // FIXME: create a module for browser detection stuff - // deal with known false positives which don't support file input (bug 47374) - if ( navigator.userAgent.match( /Windows Phone (OS 7|8.0)/ ) ) { - return false; - } - var browserSupported = ( - typeof FileReader !== 'undefined' && - typeof FormData !== 'undefined' && - ($('<input type="file"/>').prop('type') === 'file') // Firefox OS 1.0 turns <input type="file"> into <input type="text"> - ); - - return browserSupported && !mw.config.get( 'wgImagesDisabled', false ); - } + PhotoUploader; function getLog( funnel ) { return function( data ) { @@ -43,119 +24,39 @@ }; } - /** - * PhotoUploader is a component for uploading images to the wiki. - * - * @example - * <code> - * var photoUploader = new PhotoUploader( { - * buttonCaption: 'Add a photo', - * } ); - * photoUploader. - * insertAfter( 'h1' ). - * on( 'upload', function( fileName, url ) { - * $( '.someImage' ).attr( 'src', url ); - * } ); - * </code> - * - * @constructor - * @param {Object} options Uploader options. - * @param {string} options.buttonCaption Caption for the upload button. - * @param {boolean} options.insertInPage If the image should be prepended - * to the wikitext of a page specified by options.pageTitle. - * @param {string} options.pageTitle Title of the page to which the image - * belongs (image name will be based on this) and to which it should be - * prepended (if options.insertInPage is true). - * @fires PhotoUploader#start - * @fires PhotoUploader#success - * @fires PhotoUploader#error - * @fires PhotoUploader#cancel - */ - /** - * Triggered when image upload starts. - * - * @event PhotoUploader#start - */ - /** - * Triggered when image upload is finished successfully. - * - * @event PhotoUploader#success - * @property {Object} data Uploaded image data. - * @property {string} data.fileName Name of the uploaded image. - * @property {string} data.description Name of the uploaded image. - * @property {string} data.url URL to the uploaded image (can be a - * local data URL). - */ - /** - * Triggered when image upload fails. - * - * @event PhotoUploader#error - */ - /** - * Triggered when image upload is cancelled. - * - * @event PhotoUploader#cancel - */ - PhotoUploader = View.extend( { + PhotoUploader = Class.extend( { initialize: function( options ) { + var nagCount = parseInt( M.settings.getUserSetting( 'uploadNagCount' ) || 0, 10 ), + shouldNag = parseInt( mw.config.get( 'wgUserEditCount' ), 10 ) < 3, + fileReader = new FileReader(), nagOverlay, preview; + this.log = getLog( options.funnel ); - this._super( options ); - }, + preview = this.preview = new PhotoUploaderPreview( { log: this.log } ); - postRender: function() { - var self = this, $input = this.$( 'input' ), ctaDrawer; + this.options = options; + this.parent = options.parent; + this.file = options.file; - // show CTA instead if not logged in - if ( !M.isLoggedIn() ) { - ctaDrawer = new CtaDrawer( { - content: mw.msg( 'mobile-frontend-photo-upload-cta' ), - queryParams: { - campaign: 'mobile_uploadPageActionCta', - returntoquery: 'article_action=photo-upload' - } - } ); - this.$el.click( function( ev ) { - ctaDrawer.show(); - ev.preventDefault(); - } ); - return; + // nag if never nagged and shouldNag and then keep nagging (3 times) + if ( ( nagCount === 0 && shouldNag ) || ( nagCount > 0 && nagCount < 3 ) ) { + // FIXME: possibly set self.preview.parent = nagOverlay when nagOverlay is present + nagOverlay = this._showNagOverlay( nagCount ); + } else { + this._showPreview(); } - $input. - // accept must be set via attr otherwise cannot use camera on Android - attr( 'accept', 'image/*;' ). - on( 'change', function() { - var nagCount = parseInt( M.settings.getUserSetting( 'uploadNagCount' ) || 0, 10 ), - shouldNag = parseInt( mw.config.get( 'wgUserEditCount' ), 10 ) < 3, - fileReader = new FileReader(), nagOverlay; + fileReader.readAsDataURL( this.file ); + fileReader.onload = function() { + var dataUrl = fileReader.result; + // add mimetype if not present (some browsers need it, e.g. Android browser) + dataUrl = dataUrl.replace( /^data:base64/, 'data:image/jpeg;base64' ); - self.preview = new PhotoUploaderPreview( { log: self.log } ); - - self.file = $input[0].files[0]; - // clear so that change event is fired again when user selects the same file - $input.val( '' ); - - // nag if never nagged and shouldNag and then keep nagging (3 times) - if ( ( nagCount === 0 && shouldNag ) || ( nagCount > 0 && nagCount < 3 ) ) { - // FIXME: possibly set self.preview.parent = nagOverlay when nagOverlay is present - nagOverlay = self._showNagOverlay( nagCount ); - } else { - self._showPreview(); - } - - fileReader.readAsDataURL( self.file ); - fileReader.onload = function() { - var dataUrl = fileReader.result; - // add mimetype if not present (some browsers need it, e.g. Android browser) - dataUrl = dataUrl.replace( /^data:base64/, 'data:image/jpeg;base64' ); - - if ( nagOverlay ) { - nagOverlay.setImageUrl( dataUrl ); - } - self.preview.setImageUrl( dataUrl ); - }; - } ); + if ( nagOverlay ) { + nagOverlay.setImageUrl( dataUrl ); + } + preview.setImageUrl( dataUrl ); + }; }, _showNagOverlay: function( nagCount ) { @@ -217,13 +118,13 @@ api = new PhotoApi(), progressPopup = new PhotoUploadProgress(); - this.emit( 'start' ); + this.parent.emit( 'start' ); this.preview.hide(); progressPopup.show(); progressPopup.on( 'cancel', function() { api.abort(); self.log( { action: 'cancel' } ); - self.emit( 'cancel' ); + self.parent.emit( 'cancel' ); } ); api.save( { @@ -234,7 +135,7 @@ } ).done( function( fileName, descriptionUrl ) { progressPopup.hide(); self.log( { action: 'success' } ); - self.emit( 'success', { + self.parent.emit( 'success', { fileName: fileName, description: description, descriptionUrl: descriptionUrl, @@ -244,7 +145,7 @@ progressPopup.hide(); popup.show( msg || mw.msg( 'mobile-frontend-photo-upload-error' ), 'toast error' ); self.log( { action: 'error', errorText: err } ); - self.emit( 'error' ); + self.parent.emit( 'error' ); } ); api.on( 'uploadProgress', function( value ) { @@ -253,43 +154,6 @@ } } ); - // An extension of the PhotoUploader which instead of treating it as a button treats it as a full screen bar - PhotoUploaderButton = PhotoUploader.extend( { - template: M.template.get( 'photoUploader' ), - className: 'button photo' - } ); - - LeadPhotoUploaderButton = PhotoUploader.extend( { - template: M.template.get( 'photoUploadAction' ), - className: 'enabled', - initialize: function( options ) { - var self = this; - this._super( options ); - this.on( 'start', function() { - self.$el.removeClass( 'enabled' ); - } ). - on( 'success', function( data ) { - popup.show( mw.msg( 'mobile-frontend-photo-upload-success-article' ), 'toast' ); - // FIXME: workaround for https://bugzilla.wikimedia.org/show_bug.cgi?id=43271 - if ( !$( '#content_0' ).length ) { - $( '<div id="content_0" >' ).insertAfter( $( '#section_0,#page-actions' ).last() ); - } - new LeadPhoto( { - url: data.url, - pageUrl: data.descriptionUrl, - caption: data.description - } ).prependTo( '#content_0' ); - } ). - on( 'error cancel', function() { - self.$el.addClass( 'enabled' ); - } ); - } - } ); - - PhotoUploaderButton.isSupported = LeadPhotoUploaderButton.isSupported = isSupported(); - - // FIXME: should we allow more than one define() per file? - M.define( 'modules/uploads/PhotoUploaderButton', PhotoUploaderButton ); - M.define( 'modules/uploads/LeadPhotoUploaderButton', LeadPhotoUploaderButton ); + M.define( 'modules/uploads/PhotoUploader', PhotoUploader ); }( mw.mobileFrontend, jQuery ) ); diff --git a/javascripts/modules/uploads/PhotoUploaderButton.js b/javascripts/modules/uploads/PhotoUploaderButton.js new file mode 100644 index 0000000..1fdba40 --- /dev/null +++ b/javascripts/modules/uploads/PhotoUploaderButton.js @@ -0,0 +1,168 @@ +( function( M, $ ) { + var View = M.require( 'view' ), + popup = M.require( 'notifications' ), + CtaDrawer = M.require( 'CtaDrawer' ), + LoadingOverlay = M.require( 'LoadingOverlay' ), + PhotoUploaderButton, + LeadPhotoUploaderButton; + + function isSupported() { + // FIXME: create a module for browser detection stuff + // deal with known false positives which don't support file input (bug 47374) + if ( navigator.userAgent.match( /Windows Phone (OS 7|8.0)/ ) ) { + return false; + } + var browserSupported = ( + typeof FileReader !== 'undefined' && + typeof FormData !== 'undefined' && + ($('<input type="file"/>').prop('type') === 'file') // Firefox OS 1.0 turns <input type="file"> into <input type="text"> + ); + + return browserSupported && !mw.config.get( 'wgImagesDisabled', false ); + } + + /** + * PhotoUploaderButton is a component for uploading images to the wiki. + * + * @example + * <code> + * var photoUploaderButton = new PhotoUploaderButton( { + * buttonCaption: 'Add a photo', + * } ); + * photoUploaderButton. + * insertAfter( 'h1' ). + * on( 'upload', function( fileName, url ) { + * $( '.someImage' ).attr( 'src', url ); + * } ); + * </code> + * + * @constructor + * @param {Object} options Uploader options. + * @param {string} options.buttonCaption Caption for the upload button. + * @param {boolean} options.insertInPage If the image should be prepended + * to the wikitext of a page specified by options.pageTitle. + * @param {string} options.pageTitle Title of the page to which the image + * belongs (image name will be based on this) and to which it should be + * prepended (if options.insertInPage is true). + * @param {string} options.funnel Funnel for EventLogging. + * @fires PhotoUploader#start + * @fires PhotoUploader#success + * @fires PhotoUploader#error + * @fires PhotoUploader#cancel + */ + /** + * Triggered when image upload starts. + * + * @event PhotoUploader#start + */ + /** + * Triggered when image upload is finished successfully. + * + * @event PhotoUploader#success + * @property {Object} data Uploaded image data. + * @property {string} data.fileName Name of the uploaded image. + * @property {string} data.description Name of the uploaded image. + * @property {string} data.url URL to the uploaded image (can be a + * local data URL). + */ + /** + * Triggered when image upload fails. + * + * @event PhotoUploader#error + */ + /** + * Triggered when image upload is cancelled. + * + * @event PhotoUploader#cancel + */ + PhotoUploaderButton = View.extend( { + template: M.template.get( 'uploads/PhotoUploaderButton' ), + className: 'button photo', + + initialize: function( options ) { + this._super( options ); + }, + + postRender: function() { + var self = this, $input = this.$( 'input' ), ctaDrawer; + + // show CTA instead if not logged in + if ( !M.isLoggedIn() ) { + ctaDrawer = new CtaDrawer( { + content: mw.msg( 'mobile-frontend-photo-upload-cta' ), + queryParams: { + campaign: 'mobile_uploadPageActionCta', + returntoquery: 'article_action=photo-upload' + } + } ); + this.$el.click( function( ev ) { + ctaDrawer.show(); + ev.preventDefault(); + } ); + return; + } + + $input. + // accept must be set via attr otherwise cannot use camera on Android + attr( 'accept', 'image/*;' ). + on( 'change', function() { + var options = $.extend( {}, self.options, { + file: $input[0].files[0], + parent: self + } ), + loadingOverlay = new LoadingOverlay(); + + loadingOverlay.show(); + mw.loader.using( 'mobile.dynamic.uploads', function() { + var PhotoUploader = M.require( 'modules/uploads/PhotoUploader' ); + loadingOverlay.hide(); + new PhotoUploader( options ); + } ); + + // clear so that change event is fired again when user selects the same file + $input.val( '' ); + } ); + }, + } ); + + LeadPhotoUploaderButton = PhotoUploaderButton.extend( { + template: M.template.get( 'uploads/LeadPhotoUploaderButton' ), + className: 'enabled', + + initialize: function( options ) { + var self = this; + this._super( options ); + this.on( 'start', function() { + self.$el.removeClass( 'enabled' ); + } ). + on( 'success', function( data ) { + popup.show( mw.msg( 'mobile-frontend-photo-upload-success-article' ), 'toast' ); + // FIXME: workaround for https://bugzilla.wikimedia.org/show_bug.cgi?id=43271 + if ( !$( '#content_0' ).length ) { + $( '<div id="content_0" >' ).insertAfter( $( '#section_0,#page-actions' ).last() ); + } + + // just in case, LeadPhoto should be loaded by now anyway + mw.loader.using( 'mobile.dynamic.uploads', function() { + var LeadPhoto = M.require( 'modules/uploads/LeadPhoto' ); + + new LeadPhoto( { + url: data.url, + pageUrl: data.descriptionUrl, + caption: data.description + } ).prependTo( '#content_0' ); + } ); + } ). + on( 'error cancel', function() { + self.$el.addClass( 'enabled' ); + } ); + } + } ); + + PhotoUploaderButton.isSupported = LeadPhotoUploaderButton.isSupported = isSupported(); + + // FIXME: should we allow more than one define() per file? + M.define( 'modules/uploads/PhotoUploaderButton', PhotoUploaderButton ); + M.define( 'modules/uploads/LeadPhotoUploaderButton', LeadPhotoUploaderButton ); + +}( mw.mobileFrontend, jQuery ) ); diff --git a/javascripts/modules/uploads/PhotoUploaderPreview.js b/javascripts/modules/uploads/PhotoUploaderPreview.js index 53c2abe..a548874 100644 --- a/javascripts/modules/uploads/PhotoUploaderPreview.js +++ b/javascripts/modules/uploads/PhotoUploaderPreview.js @@ -18,7 +18,7 @@ className: 'mw-mf-overlay photo-overlay', - template: M.template.get( 'photoUploadPreview' ), + template: M.template.get( 'uploads/PhotoUploadPreview' ), initialize: function( options ) { this.log = options.log; diff --git a/templates/leadPhoto.html b/templates/uploads/LeadPhoto.html similarity index 100% rename from templates/leadPhoto.html rename to templates/uploads/LeadPhoto.html diff --git a/templates/photoUploadAction.html b/templates/uploads/LeadPhotoUploaderButton.html similarity index 100% rename from templates/photoUploadAction.html rename to templates/uploads/LeadPhotoUploaderButton.html diff --git a/templates/overlays/learnMore.html b/templates/uploads/LearnMoreOverlay.html similarity index 100% rename from templates/overlays/learnMore.html rename to templates/uploads/LearnMoreOverlay.html diff --git a/templates/photoNag.html b/templates/uploads/NagOverlay.html similarity index 100% rename from templates/photoNag.html rename to templates/uploads/NagOverlay.html diff --git a/templates/photoUploadPreview.html b/templates/uploads/PhotoUploadPreview.html similarity index 100% rename from templates/photoUploadPreview.html rename to templates/uploads/PhotoUploadPreview.html diff --git a/templates/photoUploadProgress.html b/templates/uploads/PhotoUploadProgress.html similarity index 100% rename from templates/photoUploadProgress.html rename to templates/uploads/PhotoUploadProgress.html diff --git a/templates/photoUploader.html b/templates/uploads/PhotoUploaderButton.html similarity index 100% rename from templates/photoUploader.html rename to templates/uploads/PhotoUploaderButton.html -- To view, visit https://gerrit.wikimedia.org/r/84032 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I1b167dd27ba0488f99cbd3a29287d8af95011647 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/MobileFrontend Gerrit-Branch: master Gerrit-Owner: JGonera <jgon...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits