From c43e5279dd4d6ac660c118007e97828122fb2bc0 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 17 May 2021 16:54:12 -0400 Subject: [PATCH] feat: remove lazyload modules It is replaced by the core config `$wgNativeImageLazyLoading` --- README.md | 7 -- includes/Hooks/ThumbnailHooks.php | 100 ------------------ includes/SkinCitizen.php | 6 -- .../skins.citizen.scripts.lazyload.js | 54 ---------- .../skins.citizen.styles.lazyload.less | 21 ---- skin.json | 24 ----- 6 files changed, 212 deletions(-) delete mode 100644 includes/Hooks/ThumbnailHooks.php delete mode 100644 resources/skins.citizen.scripts.lazyload/skins.citizen.scripts.lazyload.js delete mode 100644 resources/skins.citizen.styles.lazyload/skins.citizen.styles.lazyload.less diff --git a/README.md b/README.md index 5879b05c..cbcee6c6 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/includes/Hooks/ThumbnailHooks.php b/includes/Hooks/ThumbnailHooks.php deleted file mode 100644 index a962bdcf..00000000 --- a/includes/Hooks/ThumbnailHooks.php +++ /dev/null @@ -1,100 +0,0 @@ -. - * - * @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 ); - } -} diff --git a/includes/SkinCitizen.php b/includes/SkinCitizen.php index 8dbfb8e7..0ec616df 100644 --- a/includes/SkinCitizen.php +++ b/includes/SkinCitizen.php @@ -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'; diff --git a/resources/skins.citizen.scripts.lazyload/skins.citizen.scripts.lazyload.js b/resources/skins.citizen.scripts.lazyload/skins.citizen.scripts.lazyload.js deleted file mode 100644 index 53bf378f..00000000 --- a/resources/skins.citizen.scripts.lazyload/skins.citizen.scripts.lazyload.js +++ /dev/null @@ -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 ); diff --git a/resources/skins.citizen.styles.lazyload/skins.citizen.styles.lazyload.less b/resources/skins.citizen.styles.lazyload/skins.citizen.styles.lazyload.less deleted file mode 100644 index be38980a..00000000 --- a/resources/skins.citizen.styles.lazyload/skins.citizen.styles.lazyload.less +++ /dev/null @@ -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; - } - } -} diff --git a/skin.json b/skin.json index 450b278b..fbac3681 100644 --- a/skin.json +++ b/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",