Bmansurov has uploaded a new change for review.
https://gerrit.wikimedia.org/r/246137
Change subject: Add a module that renders cards
......................................................................
Add a module that renders cards
How to use:
mw.loader.using( 'ext.cards.view' ).done( function() {
// '1' and '2' are page titles, while 200 is the desired thumbnail width
mw.cards.getHtml(['1', '2'], 200).done( function( html ) {
// insert html into the DOM
} );
} );
Bug: T114393
Change-Id: I0ba9e348867b8edb5e0c01ac0628c3a918f4c4f2
---
M extension.json
D resources/.gitkeep
A resources/view/cards.js
A resources/view/cards.mustache
A resources/view/noimage.png
A resources/view/noimage.svg
A resources/view/styles.less
7 files changed, 172 insertions(+), 0 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Cards
refs/changes/37/246137/1
diff --git a/extension.json b/extension.json
index 077c16b..d2cf9b1 100644
--- a/extension.json
+++ b/extension.json
@@ -18,5 +18,30 @@
},
"Hooks": {
},
+ "ResourceFileModulePaths": {
+ "localBasePath": "",
+ "remoteExtPath": "Cards"
+ },
+ "ResourceModules": {
+ "ext.cards.view": {
+ "targets": [
+ "mobile",
+ "desktop"
+ ],
+ "group": "other",
+ "dependencies": [
+ "mediawiki.Title"
+ ],
+ "scripts": [
+ "resources/view/cards.js"
+ ],
+ "styles": [
+ "resources/view/styles.less"
+ ],
+ "templates": {
+ "cards.mustache":
"resources/view/cards.mustache"
+ }
+ }
+ },
"manifest_version": 1
}
diff --git a/resources/.gitkeep b/resources/.gitkeep
deleted file mode 100644
index e69de29..0000000
--- a/resources/.gitkeep
+++ /dev/null
diff --git a/resources/view/cards.js b/resources/view/cards.js
new file mode 100644
index 0000000..7303a7c
--- /dev/null
+++ b/resources/view/cards.js
@@ -0,0 +1,69 @@
+( function ( $, mw ) {
+ 'use strict';
+ /**
+ * Default thumbnail width in pixels
+ * @type {Number} THUMB_WIDTH
+ */
+ var THUMB_WIDTH = 50,
+ template = mw.template.get( 'ext.cards.view', 'cards.mustache'
);
+
+ /**
+ * @class mw.cards
+ * @singleton
+ */
+ mw.cards = {};
+
+ /**
+ * Render cards and return HTML
+ *
+ * @param {Array} articleTitles list of article titles
+ * @param {Number} [thumbWidth] Thumbnail width in pixels. Defaults to
+ * THUMB_WIDTH.
+ * @return {jQuery.Deferred} The result resolves with HTML when ready
+ */
+ mw.cards.getHtml = function ( articleTitles, thumbWidth ) {
+ var article,
+ articles = [],
+ api = new mw.Api(),
+ result = $.Deferred();
+
+ thumbWidth = thumbWidth ? thumbWidth : THUMB_WIDTH;
+
+ api.get( {
+ action: 'query',
+ prop: 'extracts|pageimages',
+ explaintext: true,
+ exlimit: articleTitles.length,
+ exintro: true,
+ exsentences: 1,
+ pithumbsize: thumbWidth,
+ titles: articleTitles.join( '|' ),
+ continue: ''
+ } ).done( function ( data ) {
+ if ( data.query && data.query.pages ) {
+ $.each( data.query.pages, function (i, page ) {
+ article = {
+ title: page.title,
+ url: ( new mw.Title( page.title
) ).getUrl(),
+ extract: page.extract,
+ hasThumbnail: false,
+ thumbnailOrientation: 'none'
+ };
+
+ if ( page.thumbnail ) {
+ article.hasThumbnail = true;
+ article.thumbnailUrl =
page.thumbnail.source;
+ article.thumbnailOrientation =
( page.thumbnail.width > page.thumbnail.height ) ?
+ 'landscape' :
'portrait';
+ }
+ articles.push( article );
+ } );
+ result.resolve( template.render( {
+ 'articles': articles
+ } ) );
+ }
+ } );
+
+ return result;
+ };
+} )( jQuery, mediaWiki );
diff --git a/resources/view/cards.mustache b/resources/view/cards.mustache
new file mode 100644
index 0000000..54412bc
--- /dev/null
+++ b/resources/view/cards.mustache
@@ -0,0 +1,11 @@
+<ul class="ext-cards-page-list">
+{{#articles}}
+ <li title="{{ title }}">
+ <a href="{{ url }}">
+ <div class="card-thumb {{ thumbnailOrientation }}" {{#
hasThumbnail }}style="background-image: url( {{{ thumbnailUrl }}} )"{{/
hasThumbnail }}></div>
+ <h3><strong>{{ title }}</strong></h3>
+ <div class="extract">{{ extract }}</div>
+ </a>
+ </li>
+{{/articles}}
+</ul>
diff --git a/resources/view/noimage.png b/resources/view/noimage.png
new file mode 100644
index 0000000..60d16cd
--- /dev/null
+++ b/resources/view/noimage.png
Binary files differ
diff --git a/resources/view/noimage.svg b/resources/view/noimage.svg
new file mode 100644
index 0000000..dd09aac
--- /dev/null
+++ b/resources/view/noimage.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 56 56"
enable-background="new 0 0 56 56">
+ <path fill="#eee" d="M0 0h56v56h-56z"/>
+ <path fill="#999" d="M36.4 13.5h-18.6v24.9c0 1.4.9 2.3 2.3
2.3h18.7v-25c.1-1.4-1-2.2-2.4-2.2zm-6.2 3.5h5.1v6.4h-5.1v-6.4zm-8.8
0h6v1.8h-6v-1.8zm0 4.6h6v1.8h-6v-1.8zm0
15.5v-1.8h13.8v1.8h-13.8zm13.8-4.5h-13.8v-1.8h13.8v1.8zm0-4.7h-13.8v-1.8h13.8v1.8z"/>
+</svg>
diff --git a/resources/view/styles.less b/resources/view/styles.less
new file mode 100644
index 0000000..aee5aaf
--- /dev/null
+++ b/resources/view/styles.less
@@ -0,0 +1,62 @@
+@import "mediawiki.ui/variables";
+
+@thumbWidth: 70px;
+
+.background-size( @width: auto, @height: auto ) {
+ /* use -webkit prefix for older android browsers eg. nexus 1 */
+ -o-background-size: @width @height;
+ -webkit-background-size: @width @height;
+ background-size: @width @height;
+}
+
+.ext-cards-page-list {
+ border-top: 1px solid @colorGray14;
+ border-bottom: 1px solid @colorGray14;
+
+ li {
+ margin: 0;
+ padding: 5px 10px 5px ( @thumbWidth + 10px );
+ position: relative;
+
+ & + li {
+ border-top: 1px solid @colorGray14;
+ }
+ }
+
+ h3 {
+ margin: 0;
+ padding: 0;
+ }
+
+ .extract {
+ font-size: .8em;
+ margin-top: 0.5em;
+ }
+
+ .card-thumb {
+ background-repeat: no-repeat;
+ background-position: center center;
+ position: absolute;
+ width: @thumbWidth;
+ height: 100%;
+ top: 0;
+ left: 0;
+
+ &.none {
+ background-color: @colorGray14;
+ background-image: url('noimage.png');
+ background-image: -webkit-linear-gradient(transparent,
transparent), e('/* @embed */') url('noimage.svg');
+ background-image: linear-gradient(transparent,
transparent), e('/* @embed */') url('noimage.svg');
+ // Do not serve SVG to Opera 12, bad rendering with
border-radius or background-size (T87504)
+ background-image: -o-linear-gradient(transparent,
transparent), url('noimage.png');
+ }
+
+ &.portrait {
+ .background-size( auto, 100% );
+ }
+
+ &.landscape {
+ .background-size( 100%, auto );
+ }
+ }
+}
--
To view, visit https://gerrit.wikimedia.org/r/246137
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I0ba9e348867b8edb5e0c01ac0628c3a918f4c4f2
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Cards
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
