MediaWiki:Gadget-StudyMode.js

const StudyMode = {

	init( $content ) {
		StudyMode.notify();
		$content.find( '.template-study-mode' ).each( StudyMode.addSwitch );
	},

	async addSwitch() {
		const require = await mw.loader.using( '@wikimedia/codex' );
		const Vue = require( 'vue' );
		const Codex = require( '@wikimedia/codex' );
		const app = Vue.createMwApp( StudyMode.switchComponent, this.dataset );
		app.component( 'cdx-toggle-switch', Codex.CdxToggleSwitch );
		app.mount( this );
	},

	switchComponent: {

		props: [ 'category', 'home' ],

		template: `<cdx-toggle-switch v-model="studyMode" @update:model-value="onUpdate">Study mode</cdx-toggle-switch>`,

		data() {
			return {
				studyMode: StudyMode.getCookie( 'enabled' )
			};
		},

		methods: {
			onUpdate() {
				const readMode = mw.user.isAnon() ? mw.cookie.get( 'ReadMode' ) : mw.user.options.get( 'read-mode' );
				if ( this.studyMode ) {
					StudyMode.setCookie( 'enabled', true );
					if ( !readMode ) {
						document.getElementById( 'v-0' ).click();
					}
					if ( this.category ) {
						StudyMode.setCookie( 'category', this.category );
						const page = mw.config.get( 'wgPageName' );
						StudyMode.setCookie( 'lastPage', page );
					}
				} else {
					mw.cookie.set( 'StudyMode', null );
					if ( readMode ) {
						document.getElementById( 'v-0' ).click();
					}
				}
			}
		},
	},

	/**
	 * Check if a notification needs to be shown
	 */
	notify() {
		const category = StudyMode.getCookie( 'category' );
		if ( !category ) {
			return;
		}
		const action = mw.config.get( 'wgAction' );
		if ( action !== 'view' ) {
			return;
		}
		const contentModel = mw.config.get( 'wgPageContentModel' );
		if ( contentModel !== 'wikitext' ) {
			return;
		}
		const mainPage = mw.config.get( 'wgIsMainPage' );
		if ( mainPage ) {
			return;
		}
		const categories = mw.config.get( 'wgCategories' );
		if ( categories.includes( category ) ) {
			const page = mw.config.get( 'wgPageName' );
			StudyMode.setCookie( 'lastPage', page );
			return;
		}
		let html = '<p><strong>Attention!</strong> This page is not part of ' + category + '.</p>';
		const lastPage = StudyMode.getCookie( 'lastPage' );
		if ( lastPage ) {
			const title = new mw.Title( lastPage );
			const url = title.getUrl();
			html += '<a href="' + url  + '">Return where you left off</a>';
		}
		const $notification = $( html );
		mw.notify( $notification, { autoHide: false } );
	},

	/**
	 * Helper method to set a cookie
 	 * @param {string} key Key of the cookie to set
	 * @param {string} value Value of the cookie to set
	 */
	setCookie( key, value ) {
		const cookie = mw.cookie.get( 'StudyMode' );
		const data = cookie ? JSON.parse( cookie ) : {};
		if ( value === null ) {
			delete data[ key ];
		} else {
			data[ key ] = value;
		}
		const json = JSON.stringify( data );
		mw.cookie.set( 'StudyMode', json );
	},

	/**
	 * Helper method to get a cookie
 	 * @param {string} key Key of the cookie to get
	 */
	getCookie( key ) {
		const cookie = mw.cookie.get( 'StudyMode' );
		const data = cookie ? JSON.parse( cookie ) : {};
		return data[ key ];
	}
};

mw.hook( 'wikipage.content' ).add( StudyMode.init );