mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-24 14:34:09 +00:00
feat: remove lazyload modules
It is replaced by the core config `$wgNativeImageLazyLoading`
This commit is contained in:
alistair3149
parent
af8c3bace9
commit
c43e5279dd
|
|
@ -12,7 +12,6 @@ Live demo can be seen at the [Star Citizen Wiki](https://star-citizen.wiki), mor
|
|||
- **Collapsible sections**: Collapse and expand article sections. ***Require JS*** 📖📕
|
||||
- **Persistent ToC**: Access ToC anywhere in the article. ***Tracking require JS*** 🔍📖
|
||||
- **Rich search suggestions**: More helpful search suggestions with images and descriptions. ***Require JS*** 🔍👀
|
||||
- **Lazyload images**: Improve load time of your wiki and avoid unnecessary image downloads. ***Require JS*** 🚀
|
||||
- **Webapp manifest**: Give a more app-like experience when user add your wiki to their home screen. 📱
|
||||
- **HTTP security response headers**: Enhance the security of your wiki from HTTP response headers. 🔒🔑
|
||||
|
||||
|
|
@ -30,7 +29,6 @@ The config flags allow more customization on the specific features in the skin.
|
|||
|
||||
Note that:
|
||||
* By default, all security-related features are turned off to ensure maximum compatibility.
|
||||
* If you have a lot of users that do not use javascript, it is recommended to turn off lazyloading of images as it requires javascript to display images properly.
|
||||
|
||||
### Appearance
|
||||
Name | Description | Values | Default
|
||||
|
|
@ -51,11 +49,6 @@ Name | Description | Values | Default
|
|||
`$wgCitizenSearchDescriptionSource` | Source of description text on search suggestions (only takes effect if `$wgCitizenSearchGateway` is `mwActionApi`) | `wikidata` - Use description provided by [WikibaseLib](Extension:WikibaseLib) or [ShortDescription](https://www.mediawiki.org/wiki/Extension:ShortDescription); `textextracts` - Use description provided by [TextExtracts](https://www.mediawiki.org/wiki/Extension:TextExtracts); `pagedescription` - Use description provided by [Description2](https://www.mediawiki.org/wiki/Extension:Description2) or any other extension that sets the `description` page property | `textextracts`
|
||||
`$wgCitizenMaxSearchResults` | Max number of search suggestions | Integer > 0 | `6`
|
||||
|
||||
### Image lazyload
|
||||
Name | Description | Values | Default
|
||||
:--- | :--- | :--- | :---
|
||||
`$wgCitizenEnableLazyload` | Enable or disable image lazyloading | `true` - enable; `false` - disable | `false`
|
||||
|
||||
### Security-related
|
||||
#### Content Security Policy (CSP)
|
||||
Name | Description | Values | Default
|
||||
|
|
|
|||
|
|
@ -1,100 +0,0 @@
|
|||
<?php
|
||||
/**
|
||||
* Citizen - A responsive skin developed for the Star Citizen Wiki
|
||||
*
|
||||
* This file is part of Citizen.
|
||||
*
|
||||
* Citizen is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* Citizen is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with Citizen. If not, see <https://www.gnu.org/licenses/>.
|
||||
*
|
||||
* @file
|
||||
* @ingroup Skins
|
||||
*/
|
||||
|
||||
declare( strict_types=1 );
|
||||
|
||||
namespace Citizen\Hooks;
|
||||
|
||||
use ConfigException;
|
||||
use MediaWiki\Hook\ThumbnailBeforeProduceHTMLHook;
|
||||
use MediaWiki\MediaWikiServices;
|
||||
use RequestContext;
|
||||
use ThumbnailImage;
|
||||
|
||||
/**
|
||||
* Hooks to tun relating thumbnails
|
||||
*/
|
||||
class ThumbnailHooks implements ThumbnailBeforeProduceHTMLHook {
|
||||
|
||||
/**
|
||||
* Lazyload images
|
||||
* Modified from the Lazyload extension
|
||||
* Looks for thumbnail and swap src to data-src
|
||||
*
|
||||
* @param ThumbnailImage $thumbnail
|
||||
* @param array &$attribs
|
||||
* @param array &$linkAttribs
|
||||
* @return bool
|
||||
*/
|
||||
public function onThumbnailBeforeProduceHTML( $thumbnail, &$attribs, &$linkAttribs ) {
|
||||
try {
|
||||
$lazyloadEnabled = self::getSkinConfig( 'CitizenEnableLazyload' );
|
||||
} catch ( ConfigException $e ) {
|
||||
$lazyloadEnabled = false;
|
||||
}
|
||||
|
||||
// Replace thumbnail if lazyload is enabled
|
||||
if ( $lazyloadEnabled === true ) {
|
||||
$file = $thumbnail->getFile();
|
||||
|
||||
if ( $file !== null ) {
|
||||
$request = RequestContext::getMain()->getRequest();
|
||||
|
||||
if ( defined( 'MW_API' ) && $request->getVal( 'action' ) === 'parse' ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Set lazy class for the img
|
||||
if ( isset( $attribs['class'] ) ) {
|
||||
$attribs['class'] .= ' lazy';
|
||||
} else {
|
||||
$attribs['class'] = 'lazy';
|
||||
}
|
||||
|
||||
// Native API
|
||||
$attribs['loading'] = 'lazy';
|
||||
|
||||
$attribs['data-src'] = $attribs['src'];
|
||||
$attribs['src'] = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D';
|
||||
|
||||
if ( isset( $attribs['srcset'] ) ) {
|
||||
$attribs['data-srcset'] = $attribs['srcset'];
|
||||
$attribs['srcset'] = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a skin configuration variable.
|
||||
*
|
||||
* @param string $name Name of configuration option.
|
||||
* @return mixed Value configured.
|
||||
* @throws ConfigException
|
||||
*/
|
||||
private static function getSkinConfig( $name ) {
|
||||
return MediaWikiServices::getInstance()->getConfigFactory()->makeConfig( 'Citizen' )->get( $name );
|
||||
}
|
||||
}
|
||||
|
|
@ -266,12 +266,6 @@ class SkinCitizen extends SkinMustache {
|
|||
$options['scripts'][] = 'skins.citizen.scripts.toc';
|
||||
}
|
||||
|
||||
// Image lazyload
|
||||
if ( $this->getConfigValue( 'CitizenEnableLazyload' ) === true ) {
|
||||
$options['scripts'][] = 'skins.citizen.scripts.lazyload';
|
||||
$options['styles'][] = 'skins.citizen.styles.lazyload';
|
||||
}
|
||||
|
||||
// Drawer sitestats
|
||||
if ( $this->getConfigValue( 'CitizenEnableDrawerSiteStats' ) === true ) {
|
||||
$options['styles'][] = 'skins.citizen.styles.sitestats';
|
||||
|
|
|
|||
|
|
@ -1,54 +0,0 @@
|
|||
/*
|
||||
* Lazyloading images with Native API or IntersectionObserver
|
||||
* TODO: Remove the features since it is depreciated by $wgNativeImageLazyLoading in 1.35
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param {document} document
|
||||
* @return {void}
|
||||
*/
|
||||
function main( document ) {
|
||||
// Native API
|
||||
if ( 'loading' in HTMLImageElement.prototype ) {
|
||||
document.querySelectorAll( 'img.lazy' ).forEach( function ( img ) {
|
||||
img.setAttribute( 'src', img.getAttribute( 'data-src' ) );
|
||||
img.removeAttribute( 'data-src' );
|
||||
|
||||
if ( img.hasAttribute( 'data-srcset' ) ) {
|
||||
img.setAttribute( 'srcset', img.getAttribute( 'data-srcset' ) );
|
||||
img.removeAttribute( 'data-srcset' );
|
||||
}
|
||||
|
||||
img.classList.remove( 'lazy' );
|
||||
} );
|
||||
} else {
|
||||
// IntersectionObserver API
|
||||
if ( typeof IntersectionObserver !== 'undefined' && 'forEach' in NodeList.prototype ) {
|
||||
const observer = new IntersectionObserver( ( changes ) => {
|
||||
if ( 'connection' in navigator && navigator.connection.saveData === true ) {
|
||||
return;
|
||||
}
|
||||
|
||||
changes.forEach( ( change ) => {
|
||||
if ( change.isIntersecting ) {
|
||||
change.target.setAttribute( 'src', change.target.getAttribute( 'data-src' ) );
|
||||
change.target.removeAttribute( 'data-src' );
|
||||
|
||||
if ( change.target.hasAttribute( 'data-srcset' ) ) {
|
||||
change.target.setAttribute( 'srcset', change.target.getAttribute( 'data-srcset' ) );
|
||||
change.target.removeAttribute( 'data-srcset' );
|
||||
}
|
||||
|
||||
change.target.classList.remove( 'lazy' );
|
||||
observer.unobserve( change.target );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
document.querySelectorAll( 'img.lazy' ).forEach( function ( img ) {
|
||||
observer.observe( img );
|
||||
} );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main( document );
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
//
|
||||
// Citizen - Lazyload styles
|
||||
// https://starcitizen.tools
|
||||
//
|
||||
|
||||
@import '../variables.less';
|
||||
|
||||
.mw-body-content {
|
||||
a.image {
|
||||
background-color: var( --background-color-framed );
|
||||
|
||||
.lazy {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
opacity: 1;
|
||||
transition: @transition-opacity-quick;
|
||||
}
|
||||
}
|
||||
}
|
||||
24
skin.json
24
skin.json
|
|
@ -78,15 +78,11 @@
|
|||
},
|
||||
"SkinHooks": {
|
||||
"class": "Citizen\\Hooks\\SkinHooks"
|
||||
},
|
||||
"ThumbnailHooks": {
|
||||
"class": "Citizen\\Hooks\\ThumbnailHooks"
|
||||
}
|
||||
},
|
||||
"Hooks": {
|
||||
"SkinPageReadyConfig": "SkinHooks",
|
||||
"BeforePageDisplay": "SkinHooks",
|
||||
"ThumbnailBeforeProduceHTML": "ThumbnailHooks",
|
||||
"GetPreferences": "PreferenceHooks",
|
||||
"PreferencesFormPreSave": "PreferenceHooks"
|
||||
},
|
||||
|
|
@ -118,15 +114,6 @@
|
|||
"features": [],
|
||||
"styles": [ "resources/skins.citizen.styles.fonts/skins.citizen.styles.fonts.less" ]
|
||||
},
|
||||
"skins.citizen.styles.lazyload": {
|
||||
"class": "ResourceLoaderSkinModule",
|
||||
"targets": [
|
||||
"desktop",
|
||||
"mobile"
|
||||
],
|
||||
"features": [],
|
||||
"styles": [ "resources/skins.citizen.styles.lazyload/skins.citizen.styles.lazyload.less" ]
|
||||
},
|
||||
"skins.citizen.styles.sections": {
|
||||
"class": "ResourceLoaderSkinModule",
|
||||
"targets": [
|
||||
|
|
@ -166,11 +153,6 @@
|
|||
"resources/skins.citizen.scripts/checkboxHack.js"
|
||||
]
|
||||
},
|
||||
"skins.citizen.scripts.lazyload": {
|
||||
"scripts": [
|
||||
"resources/skins.citizen.scripts.lazyload/skins.citizen.scripts.lazyload.js"
|
||||
]
|
||||
},
|
||||
"skins.citizen.scripts.toc": {
|
||||
"scripts": [
|
||||
"resources/skins.citizen.scripts.toc/skins.citizen.scripts.toc.js"
|
||||
|
|
@ -675,12 +657,6 @@
|
|||
"descriptionmsg": "citizen-config-showpagetools",
|
||||
"public": true
|
||||
},
|
||||
"EnableLazyload": {
|
||||
"value": false,
|
||||
"description": "Enable or disable image lazyloading",
|
||||
"descriptionmsg": "citizen-config-enablelazyload",
|
||||
"public": true
|
||||
},
|
||||
"PortalAttach": {
|
||||
"value": "first",
|
||||
"description": "Label of the portal to attach links to upload and special pages to",
|
||||
|
|
|
|||
Loading…
Reference in a new issue