Jhernandez has uploaded a new change for review.
https://gerrit.wikimedia.org/r/190801
Change subject: Collections list collections show image
......................................................................
Collections list collections show image
Go to Special:Gather/ to see it.
* Collection model now has image associated with it.
* It is filled up in WatchlistCollection (as the rest of the stuff, for the
moment)
* view/ItemImage now takes a model that implements the interface
models\WithImage. (decoupled from CollectionItem)
* CollectionItem and Collection implement WithImage interface (because both
can have images).
* view/ItemImage Now only returns the div with the image, moved out the link
with the url.
* The card in the collections list will be 14em if there is an image to show or
6em if there is not.
* Image shown in the collections list links to the collection page.
Change-Id: I67ba623a858681e214a939d0444cea04755f5f8a
---
M Gather.php
M extension.json
M includes/models/Collection.php
M includes/models/CollectionItem.php
A includes/models/WithImage.php
M includes/stores/WatchlistCollection.php
M includes/views/CollectionItemCard.php
M includes/views/CollectionsListItemCard.php
M includes/views/ItemImage.php
M resources/ext.collections.styles/collections.less
10 files changed, 109 insertions(+), 18 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Gather
refs/changes/01/190801/1
diff --git a/Gather.php b/Gather.php
index 0520a90..70b2c01 100644
--- a/Gather.php
+++ b/Gather.php
@@ -44,6 +44,7 @@
'Gather\models\CollectionItem' => 'models/CollectionItem',
'Gather\models\Collection' => 'models/Collection',
+ 'Gather\models\WithImage' => 'models/WithImage',
'Gather\stores\Collection' => 'stores/Collection',
'Gather\stores\WatchlistCollection' => 'stores/WatchlistCollection',
diff --git a/extension.json b/extension.json
index dfa5340..7e9b45c 100644
--- a/extension.json
+++ b/extension.json
@@ -27,6 +27,7 @@
"Gather\\Hooks": "includes/Gather.hooks.php",
"Gather\\models\\CollectionItem":
"includes/models/CollectionItem.php",
"Gather\\models\\Collection": "includes/models/Collection.php",
+ "Gather\\models\\WithImage": "models/WithImage",
"Gather\\stores\\Collection": "includes/stores/Collection.php",
"Gather\\stores\\WatchlistCollection":
"includes/stores/WatchlistCollection.php",
"Gather\\stores\\CollectionsList":
"includes/stores/CollectionsList.php",
diff --git a/includes/models/Collection.php b/includes/models/Collection.php
index a71384a..cd0ec7a 100644
--- a/includes/models/Collection.php
+++ b/includes/models/Collection.php
@@ -16,7 +16,7 @@
/**
* A collection of items, which are represented by the CollectionItem class.
*/
-class Collection implements IteratorAggregate {
+class Collection implements IteratorAggregate, WithImage {
/**
* The internal collection of items.
@@ -57,17 +57,28 @@
protected $public;
/**
+ * Image that represents the collection.
+ *
+ * @var File
+ */
+ protected $image;
+
+ /**
* @param int $id id of the collection. Null if not persisted yet
* @param User $user User that owns the collection
* @param string $title Title of the collection
* @param string $description Description of the collection
+ * @param File $image Main image of the collection
* @param boolean $public Wether the collection is public or private
*/
- public function __construct( $id = null, User $user, $title = '',
$description = '', $public = true ) {
+ public function __construct( $id = null, User $user, $title = '',
$description = '',
+ $image = null, $public = true ) {
+
$this->id = $id;
$this->owner = $user;
$this->title = $title;
$this->description = $description;
+ $this->image = $image;
$this->public = $public;
}
@@ -175,4 +186,18 @@
return $this->items;
}
+ /**
+ * @inheritdoc
+ */
+ public function hasImage() {
+ return $this->image ? true : false;
+ }
+
+ /**
+ * @inheritdoc
+ */
+ public function getFile() {
+ return $this->image;
+ }
+
}
diff --git a/includes/models/CollectionItem.php
b/includes/models/CollectionItem.php
index f545367..62b05df 100644
--- a/includes/models/CollectionItem.php
+++ b/includes/models/CollectionItem.php
@@ -12,7 +12,7 @@
* An item of a Collection. Similar to a Page and MobilePage, but with some
* extra information like the extract and image.
*/
-class CollectionItem {
+class CollectionItem implements WithImage {
/**
* @var Title: Title for page
@@ -41,9 +41,7 @@
}
/**
- * Check whether the item has an image
- *
- * @return Boolean
+ * @inheritdoc
*/
public function hasImage() {
return $this->file ? true : false;
@@ -73,7 +71,7 @@
}
/**
- * @return File|bool Get the file from this item
+ * @inheritdoc
*/
public function getFile() {
return $this->file;
diff --git a/includes/models/WithImage.php b/includes/models/WithImage.php
new file mode 100644
index 0000000..28a9960
--- /dev/null
+++ b/includes/models/WithImage.php
@@ -0,0 +1,27 @@
+<?php
+
+/**
+ * WithImage.php
+ */
+
+namespace Gather\models;
+
+/**
+ * Interface for items that have an image.
+ *
+ * Exposes the necessary methods for handling the file.
+ */
+interface WithImage {
+ /**
+ * Check whether the item has an image
+ *
+ * @return Boolean
+ */
+ public function hasImage();
+
+ /**
+ * @return File|bool Get the file from this item
+ */
+ public function getFile();
+}
+
diff --git a/includes/stores/WatchlistCollection.php
b/includes/stores/WatchlistCollection.php
index ac40dfe..5c621fa 100644
--- a/includes/stores/WatchlistCollection.php
+++ b/includes/stores/WatchlistCollection.php
@@ -50,12 +50,22 @@
$items[] = new models\CollectionItem( $title,
$images[$key], $extracts[$key] );
}
+ // Grab first image available for the collection
+ $firstImage = null;
+ foreach ( $images as $image ) {
+ if ( $image ) {
+ $firstImage = $image;
+ break;
+ }
+ }
+
// Construct the internal models\Collection
$this->collection = new models\Collection(
$this->getId(),
$user,
wfMessage( 'gather-watchlist-title' ),
wfMessage( 'gather-watchlist-description' ),
+ $firstImage,
false
);
$this->collection->batch( $items );
diff --git a/includes/views/CollectionItemCard.php
b/includes/views/CollectionItemCard.php
index 2f16308..6d168a5 100644
--- a/includes/views/CollectionItemCard.php
+++ b/includes/views/CollectionItemCard.php
@@ -13,6 +13,9 @@
* View for an item card in a mobile collection.
*/
class CollectionItemCard extends View {
+ /**
+ * @var models\CollectionItem Item that is going to be shown in this
view
+ */
protected $item;
/**
@@ -44,7 +47,9 @@
$item = $this->item;
$title = $item->getTitle();
$html = Html::openElement( 'div', array( 'class' =>
'collection-item' ) ) .
+ Html::openElement( 'a', array( 'href' =>
$title->getLocalUrl() ) ) .
$this->image->getHtml() .
+ Html::closeElement( 'a' ) .
Html::openElement( 'h2', array( 'class' =>
'collection-item-title' ) ) .
Html::element( 'a', array( 'href' =>
$title->getLocalUrl() ),
$this->getTitle()
diff --git a/includes/views/CollectionsListItemCard.php
b/includes/views/CollectionsListItemCard.php
index 3215308..fd63f73 100644
--- a/includes/views/CollectionsListItemCard.php
+++ b/includes/views/CollectionsListItemCard.php
@@ -18,9 +18,18 @@
*/
public function __construct( models\Collection $collection ) {
$this->collection = $collection;
+ $this->image = new ItemImage( $collection );
}
+ /**
+ * @var models\Collection Model to be rendered on this view
+ */
protected $collection;
+
+ /**
+ * @var ItemImage view for the collection image
+ */
+ protected $image;
/**
* Return title of collection
@@ -42,8 +51,16 @@
// FIXME: should consider privacy in collection
$followingMsg = wfMessage( 'gather-private' )->text();
$collectionUrl = $this->collection->getUrl();
+ $hasImage = $this->collection->hasImage();
- $html = Html::openElement( 'div', array( 'class' =>
'collection-card' ) ) .
+ $html = Html::openElement( 'div', array(
+ 'class' => 'collection-card ' . ( $hasImage ? '' :
'without-image' )
+ ) ) .
+ Html::openElement( 'a', array(
+ 'href' => $collectionUrl, 'class' =>
'collection-card-image',
+ ) ) .
+ $this->image->getHtml() .
+ Html::closeElement( 'a' ) .
Html::openElement( 'div', array( 'class' =>
'collection-card-overlay' ) ) .
Html::openElement( 'div', array( 'class' =>
'collection-card-title' ) ) .
Html::element( 'a', array( 'href' => $collectionUrl ),
$this->getTitle() ) .
diff --git a/includes/views/ItemImage.php b/includes/views/ItemImage.php
index 7da357c..65c620a 100644
--- a/includes/views/ItemImage.php
+++ b/includes/views/ItemImage.php
@@ -17,9 +17,9 @@
/**
* Constructor
- * @param models\CollectionItem $item
+ * @param models\WithImage $item
*/
- public function __construct( models\CollectionItem $item ) {
+ public function __construct( models\WithImage $item ) {
$this->item = $item;
}
@@ -57,13 +57,7 @@
$props['src'] = $imgUrl;
$text = $this->title->getText();
}
- $imageHtml = Html::openElement( 'a', array(
- 'href' =>
$this->item->getTitle()->getLocalUrl(),
- 'class' => CSS::anchorClass(
'progressive' )
- )
- ) .
- Html::element( $useBackgroundImage ? 'div' :
'img', $props, $text ) .
- Html::closeElement( 'a' );
+ $imageHtml = Html::element( $useBackgroundImage
? 'div' : 'img', $props, $text );
}
}
return $imageHtml;
diff --git a/resources/ext.collections.styles/collections.less
b/resources/ext.collections.styles/collections.less
index 327acf7..d6730b3 100644
--- a/resources/ext.collections.styles/collections.less
+++ b/resources/ext.collections.styles/collections.less
@@ -136,9 +136,22 @@
@overlayHeight: 6em;
.collection-card {
- height: @overlayHeight;
+ height: (@overlayHeight + 8em);
border: 1px solid @grayLightest;
position: relative;
+
+ &.without-image {
+ // If there is no image on the card, then make it as
big as the overlay
+ height: @overlayHeight;
+ }
+ }
+
+ .collection-card-image {
+ // Make the link and div with the image fully expand
+ &, &>div {
+ position: absolute;
+ top: 0; right: 0; left: 0; bottom: 0;
+ }
}
.collection-card-overlay {
--
To view, visit https://gerrit.wikimedia.org/r/190801
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I67ba623a858681e214a939d0444cea04755f5f8a
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Gather
Gerrit-Branch: master
Gerrit-Owner: Jhernandez <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
