Robmoen has uploaded a new change for review. https://gerrit.wikimedia.org/r/206973
Change subject: Refactor collection flag button to be an actual view ...................................................................... Refactor collection flag button to be an actual view Change-Id: I592cd0df9dfcf9bc2c5db4b62e461cbb6ddfe3e0 Dependency: Ib709ada5bd991b74e1c93eb3baa835653dc72dd6 --- M resources/Resources.php A resources/ext.gather.collection.flag/CollectionFlagButton.js M resources/ext.gather.special/init.js M resources/ext.gather.styles/collections.less 4 files changed, 68 insertions(+), 36 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Gather refs/changes/73/206973/1 diff --git a/resources/Resources.php b/resources/Resources.php index 92dcb0a..8b9cade 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -322,6 +322,7 @@ ), 'scripts' => array( 'ext.gather.collection.flag/CollectionFlagOverlay.js', + 'ext.gather.collection.flag/CollectionFlagButton.js', ), ), diff --git a/resources/ext.gather.collection.flag/CollectionFlagButton.js b/resources/ext.gather.collection.flag/CollectionFlagButton.js new file mode 100644 index 0000000..9e25f21 --- /dev/null +++ b/resources/ext.gather.collection.flag/CollectionFlagButton.js @@ -0,0 +1,60 @@ +( function ( M ) { + + var CollectionsApi = M.require( 'ext.gather.watchstar/CollectionsApi' ), + CollectionFlagOverlay = M.require( 'ext.gather.flag/CollectionFlagOverlay' ), + Button = M.require( 'Button' ), + Icon = M.require( 'Icon' ), + api = new CollectionsApi(), + CollectionFlagButton; + + /** + * A wrapper for creating a button. + * @class Button + * @extends View + */ + CollectionFlagButton = Button.extend( { + /** @inheritdoc */ + defaults: { + tagName: 'div', + additionalClassNames: new Icon( { + name: 'collection-flag', + additionalClassNames: 'mw-ui-quiet' + } ).getClassName(), + title: mw.msg( 'gather-flag-collection-flag-label' ) + }, + events: { + 'click': 'onCollectionFlagButtonClick' + }, + /** @inheritdoc */ + postRender: function () { + Button.prototype.postRender.apply( this, arguments ); + this.$el.attr( 'title', this.options.title ); + }, + onCollectionFlagButtonClick: function ( ev ) { + var flagOverlay, + $flag = this.$el; + ev.stopPropagation(); + ev.preventDefault(); + + if ( !$flag.hasClass( 'disabled' ) ) { + // Prevent multiple clicks + $flag.addClass( 'disabled' ); + api.getCollection( this.options.collectionId ).done( function ( collection ) { + flagOverlay = new CollectionFlagOverlay( { + collection: collection + } ); + flagOverlay.show(); + flagOverlay.on( 'collection-flagged', function () { + // After flagging, remove flag icon. + $flag.detach(); + } ); + flagOverlay.on( 'hide', function () { + $flag.removeClass( 'disabled' ); + } ); + } ); + } + } + } ); + M.define( 'ext.gather.flag/CollectionFlagButton', CollectionFlagButton ); + +}( mw.mobileFrontend ) ); diff --git a/resources/ext.gather.special/init.js b/resources/ext.gather.special/init.js index 2e2de29..1401b4c 100644 --- a/resources/ext.gather.special/init.js +++ b/resources/ext.gather.special/init.js @@ -1,45 +1,13 @@ ( function ( M, $ ) { - var CollectionsApi = M.require( 'ext.gather.watchstar/CollectionsApi' ), - CollectionFlagOverlay = M.require( 'ext.gather.flag/CollectionFlagOverlay' ), - Icon = M.require( 'Icon' ), - api = new CollectionsApi(); + var CollectionFlagButton = M.require( 'ext.gather.flag/CollectionFlagButton' ); $( function () { - var flagIcon, $flag, - $collection = $( '.collection' ); + var $collection = $( '.collection' ); if ( !$collection.data( 'is-owner' ) && mw.config.get( 'skin' ) === 'minerva' ) { - flagIcon = new Icon( { - name: 'collection-flag', - title: mw.msg( 'gather-flag-collection-flag-label' ) - } ); - // FIXME: See T97077 - $flag = $( flagIcon.toHtmlString() ); - $flag.on( 'click', function ( ev ) { - var flagOverlay; - ev.stopPropagation(); - ev.preventDefault(); - - if ( !$flag.hasClass( 'disabled' ) ) { - // Prevent multiple clicks - $flag.addClass( 'disabled' ); - api.getCollection( $collection.data( 'id' ) ).done( function ( collection ) { - flagOverlay = new CollectionFlagOverlay( { - collection: collection - } ); - flagOverlay.show(); - flagOverlay.on( 'collection-flagged', function () { - // After flagging, remove flag icon. - $flag.detach(); - } ); - flagOverlay.on( 'hide', function () { - $flag.removeClass( 'disabled' ); - } ); - } ); - } - } ); - $flag.prependTo( '.collection-moderation' ); + new CollectionFlagButton( { collectionId: $collection.data( 'id' ) } ) + .prependTo( '.collection-moderation' ); } $( '.collection-actions' ).addClass( 'visible' ); diff --git a/resources/ext.gather.styles/collections.less b/resources/ext.gather.styles/collections.less index 5af3653..b24c726 100644 --- a/resources/ext.gather.styles/collections.less +++ b/resources/ext.gather.styles/collections.less @@ -50,6 +50,9 @@ div { float: left; } + .mw-ui-icon-element:before { + top: 0; + } } .collection-header { -- To view, visit https://gerrit.wikimedia.org/r/206973 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I592cd0df9dfcf9bc2c5db4b62e461cbb6ddfe3e0 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/Gather Gerrit-Branch: master Gerrit-Owner: Robmoen <rm...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits