wikimedia/mediawiki-extensions-Popups
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups synced 2024-11-13 17:56:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rewrite createPopup with template for better readability

Browse source 
Change-Id: If646623ba4ebf5dfac2a94c73b6f053131739767
This commit is contained in:
jdlrobson 2016-05-12 15:58:53 -07:00
parent ab15bf8b3e
commit 27d811a173
3 changed files with 38 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
Popups.hooks.php
View file

@ -76,6 +76,9 @@ class PopupsHooks {
'resources/ext.popups.disablenavpop.js',
'resources/ext.popups.settings.js',
),
'templates' => array(
'popup.mustache' => 'resources/popup.mustache',
),
'styles' => array(
'resources/ext.popups.animation.less',
'resources/ext.popups.settings.less',

60
resources/ext.popups.renderer.article.js
View file

@ -115,51 +115,37 @@
* @return {jQuery}
*/
article.createPopup = function ( page, href ) {
var $div,
$contentbox = $( '<a>' )
.attr( {
href: href,
lang: page.pagelanguagehtmlcode,
dir: page.pagelanguagedir
} )
.addClass( 'mwe-popups-extract' )
.append(
article.getProcessedElements( page.extract, page.title )
),
var $div, hasThumbnail,
thumbnail = page.thumbnail,
tall = thumbnail && thumbnail.height > thumbnail.width,
$thumbnail = article.createThumbnail( thumbnail, tall ),
timestamp = new Date( page.revisions[ 0 ].timestamp ),
timediff = new Date() - timestamp,
oneDay = 1000 * 60 * 60 * 24,
timestampclass = ( timediff < oneDay ) ?
'mwe-popups-timestamp-recent' :
'mwe-popups-timestamp-older',
$settingsImage = $( '<a>' ).addClass( 'mwe-popups-icon mwe-popups-settings-icon' ),
$footer = $( '<footer>' )
.append(
$( '<span>' )
.text( mw.message( 'popups-last-edited',
moment( timestamp ).fromNow() ).text() )
.addClass( timestampclass ),
$settingsImage
);
if ( article.surveyLink ) {
$footer.append( article.createSurveyLink( article.surveyLink ) );
}
oneDay = 1000 * 60 * 60 * 24;
// createThumbnail returns an empty <span> if there is no thumbnail
if ( $thumbnail.prop( 'tagName' ) !== 'SPAN' ) {
$thumbnail = $( '<a>' )
.addClass( 'mwe-popups-discreet' )
.attr( 'href', href )
.append( $thumbnail );
} else {
tall = thumbnail = undefined;
}
hasThumbnail = $thumbnail.prop( 'tagName' ) !== 'SPAN';
$div = $( '<div>' ).append( $thumbnail, $contentbox, $footer );
$div = mw.template.get( 'ext.popups.desktop', 'popup.mustache' ).render( {
langcode: page.pagelanguagehtmlcode,
langdir: page.pagelanguagedir,
href: href,
isRecent: timediff < oneDay,
lastModified: mw.message( 'popups-last-edited', moment( timestamp ).fromNow() ).text(),
hasThumbnail: hasThumbnail
} );
// FIXME: Ideally these things should be added in template. These will be refactored in future patches.
if ( !hasThumbnail ) {
tall = thumbnail = undefined;
} else {
$div.find( '.mwe-popups-discreet' ).append( $thumbnail );
}
$div.find( '.mwe-popups-extract' )
.append( article.getProcessedElements( page.extract, page.title ) );
if ( article.surveyLink ) {
$div.find( 'footer' ).append( article.createSurveyLink( article.surveyLink ) );
}
mw.popups.render.cache[ href ].settings = {
title: page.title,

12
resources/popup.mustache Normal file
View file

@ -0,0 +1,12 @@
<div>
{{#hasThumbnail}}
<a href="{{href}}" class="mwe-popups-discreet"><!-- thumbnail injected post render --></a>
{{/hasThumbnail}}
<a dir="{{langcode}}" lang="{{langdir}}" class="mwe-popups-extract" href="{{href}}"><!-- extract will be appended here --></a>
<footer>
<span
class="{{#isRecent}}mwe-popups-timestamp-recent{{/isRecent}}{{^isRecent}}mwe-popups-timestamp-older{{/isRecent}}">{{lastModified}}</span>
<a class="mwe-popups-icon mwe-popups-settings-icon"></a>
<!-- survey link injected here if found -->
</footer>
</div>