Jdlrobson has uploaded a new change for review. https://gerrit.wikimedia.org/r/247531
Change subject: Hygiene: Introduce JS collection model ...................................................................... Hygiene: Introduce JS collection model Changes: * Move all models in ext.gather.collections.models resource * Adjust data pased to CardImage so it is compatible with the Page JavaScript object. See http://tinyurl.com/qchn3xw for an example of how to use on an existing collection. Change-Id: I0e4c73100e720a4a3d9088b7bc474f0de5af8c99 --- M extension.json M includes/Gather.hooks.php M includes/views/Image.php A resources/ext.gather.collections.models/Collection.js A resources/ext.gather.collections.models/CollectionItemCard.js R resources/ext.gather.collections.models/CollectionsList.js R resources/ext.gather.collections.models/CreateCollectionButton.js M resources/ext.gather.special.usercollections/init.js M templates/CardImage.mustache A tests/qunit/ext.gather.collections.models/test_Collection.js 10 files changed, 151 insertions(+), 17 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Gather refs/changes/31/247531/1 diff --git a/extension.json b/extension.json index e2edbaf..3924747 100644 --- a/extension.json +++ b/extension.json @@ -184,7 +184,7 @@ "resources/ext.gather.api/RelatedPagesApi.js" ] }, - "ext.gather.collections.list": { + "ext.gather.collections.models": { "targets": [ "mobile", "desktop" @@ -200,6 +200,7 @@ ], "styles": [], "messages": [ + "gather-page-not-found", "gather-lists-more-failed", "gather-article-count", "gather-public", @@ -208,13 +209,16 @@ "gather-create-collection-button-label" ], "templates": { + "CollectionItemCard.hogan": "templates/CollectionItemCard.mustache", "CollectionsList.hogan": "templates/CollectionsList.mustache", "CollectionsListItemCard.hogan": "templates/CollectionsListItemCard.mustache", "CardImage.hogan": "templates/CardImage.mustache" }, "scripts": [ - "resources/ext.gather.collections.list/CreateCollectionButton.js", - "resources/ext.gather.collections.list/CollectionsList.js" + "resources/ext.gather.collections.models/CreateCollectionButton.js", + "resources/ext.gather.collections.models/CollectionItemCard.js", + "resources/ext.gather.collections.models/Collection.js", + "resources/ext.gather.collections.models/CollectionsList.js" ] }, "ext.gather.collection.base": { @@ -604,7 +608,7 @@ "group": "other", "dependencies": [ "ext.gather.special.base", - "ext.gather.collections.list", + "ext.gather.collections.models", "skins.minerva.scripts" ], "scripts": [ diff --git a/includes/Gather.hooks.php b/includes/Gather.hooks.php index 9dc4a5e..8cbe46a 100644 --- a/includes/Gather.hooks.php +++ b/includes/Gather.hooks.php @@ -304,6 +304,12 @@ ), 'dependencies' => array( 'ext.gather.page.search' ), ); + $modules['qunit']['ext.gather.collections.models.tests'] = $boilerplate + array( + 'scripts' => array( + 'ext.gather.collections.models/test_Collection.js', + ), + 'dependencies' => array( 'ext.gather.collections.models' ), + ); return true; } diff --git a/includes/views/Image.php b/includes/views/Image.php index ba2d6b2..13a5716 100644 --- a/includes/views/Image.php +++ b/includes/views/Image.php @@ -40,8 +40,8 @@ $thumb = models\Image::getThumbnail( $this->item->getFile(), $size ); if ( $thumb && $thumb->getUrl() ) { $data = array( - 'url' => wfExpandUrl( $thumb->getUrl(), PROTO_CURRENT ), - 'wide' => $thumb->getWidth() > $thumb->getHeight(), + 'source' => wfExpandUrl( $thumb->getUrl(), PROTO_CURRENT ), + 'isLandscape' => $thumb->getWidth() > $thumb->getHeight(), ); return Template::render( 'CardImage', $data ); } diff --git a/resources/ext.gather.collections.models/Collection.js b/resources/ext.gather.collections.models/Collection.js new file mode 100644 index 0000000..c0207e6 --- /dev/null +++ b/resources/ext.gather.collections.models/Collection.js @@ -0,0 +1,31 @@ +( function ( M ) { + + var Collection, + View = M.require( 'View' ); + + /** + * @class Collection + * @extends View + */ + Collection = View.extend( { + /** + * @inheritdoc + * @cfg {Object} defaults Default options hash. + * @cfg {CollectionItemCard} defaults.items + */ + defaults: { + items: undefined + }, + /** + * Add new item to collection + * @param {CollectionItemCard} collectionItemCard + */ + add: function ( collectionItemCard ) { + this.options.items.push( collectionItemCard ); + this.$( '.collection-cards' ).append( collectionItemCard.$el ); + } + } ); + + M.define( 'ext.gather.collections.models/Collection', Collection ); + +} )( mw.mobileFrontend ); diff --git a/resources/ext.gather.collections.models/CollectionItemCard.js b/resources/ext.gather.collections.models/CollectionItemCard.js new file mode 100644 index 0000000..71b5def --- /dev/null +++ b/resources/ext.gather.collections.models/CollectionItemCard.js @@ -0,0 +1,51 @@ +( function ( M ) { + + var CollectionItemCard, + Icon = M.require( 'Icon' ), + View = M.require( 'View' ); + + /** + * @class CollectionItemCard + * @extends View + * @uses Icon + * @uses Anchor + */ + CollectionItemCard = View.extend( { + /** @inheritdoc */ + template: mw.template.get( 'ext.gather.collections.models', 'CollectionItemCard.hogan' ), + /** @inheritdoc */ + templatePartials: { + image: mw.template.get( 'ext.gather.collections.models', 'CardImage.hogan' ) + }, + /** @inheritdoc */ + defaults: { + page: undefined, + // FIXME: Use method on Anchor class (currently doesn't exist) + progressiveAnchorClass: 'mw-ui-anchor mw-ui-progressive', + iconClass: new Icon( { + name: 'collections-read-more', + additionalClassNames: 'collections-read-more-arrow' + } ).getClassName(), + isMissing: false, + msgMissing: mw.msg( 'gather-page-not-found' ), + extract: undefined + }, + /** @inheritdoc */ + initialize: function ( options ) { + // FIXME: Core server side templating doesn't support partials... so alas we must workaround. + if ( options.page && options.page.thumbnail ) { + options.cardImage = this.templatePartials.image.render( options.page.thumbnail ); + } + if ( options.cardImage ) { + options.hasCardImage = true; + } + if ( options.extract ) { + options.hasExtract = true; + } + View.prototype.initialize.apply( this, arguments ); + } + } ); + + M.define( 'ext.gather.collections.models/CollectionItemCard', CollectionItemCard ); + +} )( mw.mobileFrontend ); diff --git a/resources/ext.gather.collections.list/CollectionsList.js b/resources/ext.gather.collections.models/CollectionsList.js similarity index 90% rename from resources/ext.gather.collections.list/CollectionsList.js rename to resources/ext.gather.collections.models/CollectionsList.js index 8653b0b..4686172 100644 --- a/resources/ext.gather.collections.list/CollectionsList.js +++ b/resources/ext.gather.collections.models/CollectionsList.js @@ -7,8 +7,12 @@ toast = M.require( 'mobile.toast/toast' ), View = M.require( 'mobile.view/View' ), Icon = M.require( 'mobile.startup/Icon' ), - CreateCollectionButton = M.require( 'ext.gather.collections.list/CreateCollectionButton' ); + CreateCollectionButton = M.require( 'ext.gather.collections.models/CreateCollectionButton' ); + /** + * @class CollectionsList + * @extends View + */ CollectionsList = View.extend( { /** * @inheritdoc @@ -24,10 +28,10 @@ hasText: true } ).getClassName() }, - template: mw.template.get( 'ext.gather.collections.list', 'CollectionsList.hogan' ), + template: mw.template.get( 'ext.gather.collections.models', 'CollectionsList.hogan' ), templatePartials: { - item: mw.template.get( 'ext.gather.collections.list', 'CollectionsListItemCard.hogan' ), - image: mw.template.get( 'ext.gather.collections.list', 'CardImage.hogan' ) + item: mw.template.get( 'ext.gather.collections.models', 'CollectionsListItemCard.hogan' ), + image: mw.template.get( 'ext.gather.collections.models', 'CardImage.hogan' ) }, /** @inheritdoc */ initialize: function () { @@ -174,6 +178,7 @@ } } ); - M.define( 'ext.gather.collections.list/CollectionsList', CollectionsList ); + M.define( 'ext.gather.collections.models/CollectionsList', CollectionsList ) + .deprecate( 'ext.gather.collections.list/CollectionsList' ); } )( mw.mobileFrontend, jQuery ); diff --git a/resources/ext.gather.collections.list/CreateCollectionButton.js b/resources/ext.gather.collections.models/CreateCollectionButton.js similarity index 88% rename from resources/ext.gather.collections.list/CreateCollectionButton.js rename to resources/ext.gather.collections.models/CreateCollectionButton.js index e5f1ccd..ef1c5f1 100644 --- a/resources/ext.gather.collections.list/CreateCollectionButton.js +++ b/resources/ext.gather.collections.models/CreateCollectionButton.js @@ -45,6 +45,6 @@ editOverlay.show(); } } ); - M.define( 'ext.gather.collections.list/CreateCollectionButton', CreateCollectionButton ); - + M.define( 'ext.gather.collections.models/CreateCollectionButton', CreateCollectionButton ) + .deprecate( 'ext.gather.collections.list/CreateCollectionButton' ); }( mw.mobileFrontend ) ); diff --git a/resources/ext.gather.special.usercollections/init.js b/resources/ext.gather.special.usercollections/init.js index 2db0606..4ee2605 100644 --- a/resources/ext.gather.special.usercollections/init.js +++ b/resources/ext.gather.special.usercollections/init.js @@ -1,6 +1,8 @@ ( function ( M, $ ) { - var CollectionsList = M.require( 'ext.gather.collections.list/CollectionsList' ), + var CollectionsList = M.require( 'ext.gather.collections.models/CollectionsList' ), + Collection = M.require( 'ext.gather.collections.models/Collection' ), $collectionsList = $( '.collections-list' ), + $collection = $( '.collection' ), owner = $collectionsList.data( 'owner' ), mode = $collectionsList.data( 'mode' ); @@ -12,6 +14,10 @@ owner: owner, mode: mode } ); + new Collection( { + el: $collection, + enhance: true + } ); } ); }( mw.mobileFrontend, jQuery ) ); diff --git a/templates/CardImage.mustache b/templates/CardImage.mustache index 42e827b..04926d7 100644 --- a/templates/CardImage.mustache +++ b/templates/CardImage.mustache @@ -1,5 +1,5 @@ <div class='list-thumb - {{#wide}}list-thumb-y{{/wide}} - {{^wide}}list-thumb-x{{/wide}}' - style='background-image: url("{{url}}")'></div> + {{#isLandscape}}list-thumb-y{{/isLandscape}} + {{^isLandscape}}list-thumb-x{{/isLandscape}}' + style='background-image: url("{{source}}")'></div> diff --git a/tests/qunit/ext.gather.collections.models/test_Collection.js b/tests/qunit/ext.gather.collections.models/test_Collection.js new file mode 100644 index 0000000..3bde6c3 --- /dev/null +++ b/tests/qunit/ext.gather.collections.models/test_Collection.js @@ -0,0 +1,31 @@ +( function ( M, $ ) { + var Page = M.require( 'Page' ), + CollectionItemCard = M.require( 'ext.gather.collections.models/CollectionItemCard' ), + Collection = M.require( 'ext.gather.collections.models/Collection' ); + + QUnit.module( 'Gather: Collection' ); + + QUnit.test( 'Check card adds successfully', 3, function ( assert ) { + var collection = new Collection( { + items: [], + el: $( '<div><div class="collection-cards"></div></div>' ) + } ); + collection.add( + new CollectionItemCard( { + page: new Page( { + title: 'Foo', + thumbnail: { + isLandscape: true, + source: 'foo.gif' + } + } ), + isMissing: false, + extract: 'Hello world' + } ) + ); + assert.strictEqual( collection.$( '.collection-card' ).length, 1, 'Card added' ); + assert.strictEqual( $.trim( collection.$( '.collection-card h2' ).text() ), 'Foo', 'Title of card' ); + assert.strictEqual( collection.$( '.list-thumb' ).length, 1, 'Thumbnail rendered' ); + } ); + +}( mw.mobileFrontend, jQuery ) ); -- To view, visit https://gerrit.wikimedia.org/r/247531 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I0e4c73100e720a4a3d9088b7bc474f0de5af8c99 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/Gather Gerrit-Branch: dev Gerrit-Owner: Jdlrobson <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
