Nikerabbit has uploaded a new change for review.
https://gerrit.wikimedia.org/r/68154
Change subject: Use resource loader module for project icons
......................................................................
Use resource loader module for project icons
This allows us to use png fallbacks easily and works more reliably
accross different browsers. It also moves some of the processing
to separate request that can be cached separately and reduces the
size of the page html.
In addition split the other CSS styles into separate module to
avoid loading them twice, once directly and once via resource
loader.
Change-Id: If49f1a40654ce88a2d433747f24a1de09132450d
---
M Autoload.php
A ResourceLoaderProjectIconsModule.php
M Resources.php
M resources/css/ext.translate.mainpage.css
M specials/SpecialTwnMainPage.php
5 files changed, 115 insertions(+), 21 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/TwnMainPage
refs/changes/54/68154/1
diff --git a/Autoload.php b/Autoload.php
index 8700697..db05eff 100644
--- a/Autoload.php
+++ b/Autoload.php
@@ -12,5 +12,7 @@
$wgAutoloadClasses['CachedStat'] = "$dir/CachedStat.php";
$wgAutoloadClasses['CachedStatJob'] = "$dir/CachedStat.php";
$wgAutoloadClasses['ProjectHandler'] = "$dir/ProjectHandler.php";
+$wgAutoloadClasses['ResourceLoaderProjectIconsModule'] =
"$dir/ResourceLoaderProjectIconsModule.php";
$wgAutoloadClasses['UserStats'] = "$dir/UserStats.php";
$wgAutoloadClasses['SpecialTwnMainPage'] =
"$dir/specials/SpecialTwnMainPage.php";
+
diff --git a/ResourceLoaderProjectIconsModule.php
b/ResourceLoaderProjectIconsModule.php
new file mode 100644
index 0000000..0cdacf5
--- /dev/null
+++ b/ResourceLoaderProjectIconsModule.php
@@ -0,0 +1,92 @@
+<?php
+/**
+ * Project icons via CSS using SVGs with PNG fallbacks.
+ *
+ * @file
+ * @author Niklas Laxström
+ * @license GPL2+
+ */
+
+/**
+ * Project icons via CSS using SVGs with PNG fallbacks.
+ */
+class ResourceLoaderProjectIconsModule extends ResourceLoaderModule {
+ protected $targets = array( 'desktop', 'mobile' );
+
+ /**
+ * Get all urls.
+ * @return array
+ */
+ protected function getData() {
+ $projects = ProjectHandler::getProjects();
+ $icons = array();
+ foreach( $projects as $group ) {
+ wfSuppressWarnings();
+ $icons[$group->getId()] = TranslateUtils::getIcon(
$group, 100 );
+ wfRestoreWarnings();
+ }
+
+ return $icons;
+ }
+
+ /**
+ * @see also resouces/css/ext.translate.mainpage.css
+ * @param $context ResourceLoaderContext
+ * @return array CSS styles
+ */
+ public function getStyles( ResourceLoaderContext $context ) {
+ $out = '';
+ foreach ( $this->getData() as $key => $value ) {
+ if ( !isset( $value['raster'] ) ) {
+ continue;
+ }
+
+ $raster = $value['raster'];
+ if ( !isset( $value['vector'] ) ) {
+ $out .= <<<CSS
+.project-icon-$key {
+ background: transparent url($raster);
+}
+
+
+CSS;
+ } else {
+ $vector = $value['vector'];
+ $out .= <<<CSS
+.project-icon-$key {
+ background: url($raster);
+ background-image: -webkit-linear-gradient(transparent, transparent),
url($vector);
+ background-image: linear-gradient(transparent, transparent),
url($vector);
+}
+
+CSS;
+
+ }
+ }
+
+ return array( 'all' => $out );
+ }
+
+ /**
+ * @param $context ResourceLoaderContext
+ * @return array|int|Mixed
+ */
+ public function getModifiedTime( ResourceLoaderContext $context ) {
+ $cache = wfGetCache( CACHE_ANYTHING );
+ $key = wfMemcKey( 'resourceloader', 'twnmainpage', 'icons' );
+
+ $data = $this->getData();
+ $hash = md5( serialize( $data ) );
+
+ $result = $cache->get( $key );
+ if ( is_array( $result ) && $result['hash'] === $hash ) {
+ return $result['timestamp'];
+ }
+ $timestamp = wfTimestamp();
+ $cache->set( $key, array(
+ 'hash' => $hash,
+ 'timestamp' => $timestamp,
+ ) );
+ return $timestamp;
+ }
+}
diff --git a/Resources.php b/Resources.php
index cebdb17..0f47ed5 100644
--- a/Resources.php
+++ b/Resources.php
@@ -13,8 +13,8 @@
$wgResourceModules['ext.translate.mainpage'] = array(
'scripts' => 'resources/js/ext.translate.mainpage.js',
- 'styles' => 'resources/css/ext.translate.mainpage.css',
'dependencies' => array(
+ 'ext.translate.mainpage.icons'
'ext.uls.interface',
'ext.translate.groupselector',
'ext.translate.statsbar',
@@ -24,5 +24,12 @@
'messages' => array(
'twnmp-show-more-projects',
),
- 'position' => 'top',
) + $resourcePaths;
+
+$wgResourceModules['ext.translate.mainpage.styles'] = array(
+ 'styles' => 'resources/css/ext.translate.mainpage.css',
+) + $resourcePaths;
+
+$wgResourceModules['ext.translate.mainpage.icons'] = array(
+ 'class' => 'ResourceLoaderProjectIconsModule'
+);
diff --git a/resources/css/ext.translate.mainpage.css
b/resources/css/ext.translate.mainpage.css
index c1ecf8c..8a6893c 100644
--- a/resources/css/ext.translate.mainpage.css
+++ b/resources/css/ext.translate.mainpage.css
@@ -245,8 +245,12 @@
color: #555;
}
-.project-icon img {
- padding: 10px 0 0 5px;
+.project-icon div {
+ width: 100%;
+ height: 100%;
+ background-size: 90%;
+ background-repeat: no-repeat;
+ background-position: left 5px top 10px;
}
.project-name {
diff --git a/specials/SpecialTwnMainPage.php b/specials/SpecialTwnMainPage.php
index b62605d..f9bd0d9 100644
--- a/specials/SpecialTwnMainPage.php
+++ b/specials/SpecialTwnMainPage.php
@@ -44,7 +44,7 @@
) );
$out->addModuleStyles( 'jquery.uls.grid' );
- $out->addModuleStyles( 'ext.translate.mainpage' );
+ $out->addModuleStyles( 'ext.translate.mainpage.styles' );
$out->addModules( 'ext.translate.mainpage' );
// Forcing wgULSPosition to personal to mimick that behavior
regardless
// of the position of the uls trigger in other pages.
@@ -163,17 +163,9 @@
}
protected function makeGroupTile( MessageGroup $group, array $stats ) {
- $urls = TranslateUtils::getIcon( $group, 100 );
- if ( isset( $urls['vector'] ) ) {
- $url = $urls['vector'];
- } elseif ( isset( $urls['raster'] ) ) {
- $url = $urls['raster'];
- } else {
- $url = '';
- }
-
+ $id = $group->getId();
$uiLanguage = $this->getLanguage();
- $statsbar = StatsBar::getNew( $group->getId(),
$uiLanguage->getCode(), $stats );
+ $statsbar = StatsBar::getNew( $id, $uiLanguage->getCode(),
$stats );
$translated = $stats[MessageGroupStats::TRANSLATED];
$proofread = $stats[MessageGroupStats::PROOFREAD];
@@ -182,10 +174,7 @@
$proofread = round( 100 * $proofread /
$stats[MessageGroupStats::TOTAL] );
}
- $image = Html::element(
- 'img',
- array( 'src' => $url, 'width' => '100%', 'alt' => '' )
- );
+ $image = Html::element( 'div', array( 'class' =>
"project-icon-$id" ) );
$label = htmlspecialchars( $group->getLabel(
$this->getContext() ) );
$stats = $statsbar->getHtml( $this->getContext() );
// @todo FIXME i18n: Hard coded percentage character twice.
@@ -196,12 +185,12 @@
$title = SpecialPage::getTitleFor( 'Translate' );
$translate = Html::element( 'a', array(
'class' => 'translate',
- 'href' => $title->getLocalUrl( array( 'group' =>
$group->getId() ) )
+ 'href' => $title->getLocalUrl( array( 'group' => $id ) )
), $this->msg( 'twnmp-translate-button' )->text() );
$proofread = Html::element( 'a', array(
'class' => 'proofread',
- 'href' => $title->getLocalUrl( array( 'group' =>
$group->getId(), 'action' => 'proofread' ) )
+ 'href' => $title->getLocalUrl( array( 'group' => $id,
'action' => 'proofread' ) )
), $this->msg( 'twnmp-proofread-button' )->text() );
$out = <<<HTML
--
To view, visit https://gerrit.wikimedia.org/r/68154
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: If49f1a40654ce88a2d433747f24a1de09132450d
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/TwnMainPage
Gerrit-Branch: master
Gerrit-Owner: Nikerabbit <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
