User:Evad37/sandbox2.js

/* This is Evad37's Javascript sandbox – a testing spot for small bits of js code */

// ES6 module export test

/* jshint esnext:false, esversion: 8, laxbreak: true, undef: true, eqnull: true, maxerr: 999 */ /* globals console, document, File, FileReader, fetch, window, $, mw, OO */

const helloWorld = function thisIsATest { console.log("Hello, word!"); };

const add = function add(first, second) { return first + second; };

export default class Package { /** @static @prop {string} title A short title to display to users */ static title = "My Package"; /** @static @prop {string[]} dependencies Mediawiki dependencies for the * package. The sidebar gizmos script will ensure these are loaded before * creating an instance of your package. */	static dependencies = [ 'oojs', 'mediawiki.Title', 'mediawiki.api' ]; /** @constructor * An instance of your package will be constructed once the sidebar gizmos * script is ready and has loaded the package's dependecies. You may want to * initialise some props here. No need to render any HTML, the #render * method will be called straight after the instance is constructed. * 	 * @param {Object} args * @param {bool} args.isExpanded Gizmo is expanded */	constructor({isExpanded}) { // Just an example... this.state = { items: [], unreadItems: [] };		this.api = new mw.Api; }

/** @prop {number|null} badgeCount Number to show in a badge next to the * title. May be 0 or null to not display a badge. */	get badgeCount { return this.state.unreadItems.length; }	/** @method * Handler for when this gizmo is expanded or collapsed * 	 * @param {Object} event * @param {boolean} event.isExpanded Gizmo is now expanded */	onExpand({isExpanded}) { if (isExpanded) { // Do something } else { // Do something else. Be nice to the user and use less resources // or api requests when collapsed. }	}	/** @method * Handler for when the gizmo is paused or unpaused by the user * 	 * @param {Object} event * @param {boolean} event.isPaused Gizmo is now paused */	onPause({isPaused}) { if (isPaused) { // No need to be updating youself } else { // Start updating yourself again }	}	/** @method * This method is called by the gizmos script at a frequency set by the user, * e.g. every 30 secs or every minute. The parent script will wait for the * returned promise to be fullfilled before trying to render. * @return {Promise} Updating completed */	update { let params = {}; return this.api.get(params); }	/**	 * @method * Renders the current state of the gizmo. * 	 * @return {DocumentFragment|jQuery} HTML elements for the output as a	 * DocumentFragment or jQuery collection */	render { let ul = document.createElement('ul'); this.state.items.forEach(item => {			let li = document.createElement('li');			li.innerHTML = item;			ul.appendChild(li);		}); let fragment = new DocumentFragment; fragment.append(ul); return fragment; } }

export { helloWorld, add };