Widget:Sandbox/Vinifera7/Trade

 // Uses global registeredWidgets var registeredWidgets = registeredWidgets || {};

( => { 'use strict';

// Only run script once per page if ( registeredWidgets.trade ) { return; } registeredWidgets.trade = true;

const i18n = { challenge_league_event_type: 'Challenge league', };

class Cargo { constructor { this.mwapi = new mw.Api; }

/**    * Wraps a handler function for the jQuery.Promise "done" callback. * @param handler  Function * @return function Returns a function that executes the specified handler, or one that logs to the console if handler isn't specified */   done (handler) { if ( typeof handler === 'function' ) { return data => { handler(data.cargoquery); }       }        return data => { console.log(data.cargoquery); }   }

/**    * Wraps a handler function for the jQuery.Promise "fail" callback. * @param handler  Function * @return function Returns a function that executes the specified handler, or one that logs to the console if handler isn't specified */   fail (handler) { if ( typeof handler === 'function' ) { return (jqXHR, textStatus, errorThrown) => { handler(textStatus); }       }        return (jqXHR, textStatus, errorThrown) => { console.log(textStatus); }   }

/**    * Runs a cargo query using mw.Api.get. * @param query  Object containing query parameters * @param doneHandler  Function called when query request is fulfilled * @param failHandler  Function called when query request is rejected * @return jQuery.Promise Returns a jQuery.Promise to deliver query results */   query (query, doneHandler, failHandler) { query.action = 'cargoquery'; query.format = 'json'; return this.mwapi.get(query) .done(this.done(doneHandler)) .fail(this.fail(failHandler)); } }

class Widget { constructor { this.widgets = document.getElementsByClassName('trade-widget'); // There can be more than one widget on the same page. if ( this.widgets.length > 0 ) { this.setup; this.getCurrentLeague; }   }

setup { let loader = document.createElement('div'); loader.classList.add('trade-widget__loader'); loader.innerHTML = ` <path fill="currentColor" d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"> `;       let form = document.createElement('form'); form.classList.add('trade-widget__form'); for ( let i = 0; i < this.widgets.length; i++ ) { let widget = this.widgets[i]; widget.appendChild(loader.cloneNode(true)); form.innerHTML = `  League   `; widget.appendChild(form.cloneNode(true)); }   }

// Query the events table for the current challenge league getCurrentLeague { let cargo = new Cargo; cargo.query({           tables: 'events',            fields: 'short_name, release_date',            where: `type="${i18n.challenge_league_event_type}" AND release_dateNOW)`,            order_by: 'release_date DESC',            limit: 1        }, results => {            if ( results.length ) {                this.league = results[0].title['short name'];                this.maybeBuildWidget;            } else {                this.league = null;                this.error('No results returned for the current challenge league.');            }        }, error => {            this.error('Server threw an error');        }); }

// Ensure that all preliminary async requests are done before building the widget maybeBuildWidget { if ( this.league ) { this.buildWidget; }   }

// Build the widget buildWidget { let leagues = [ {               name: this.league, label: this.league },           {                name: 'Hardcore ' + this.league, label: 'HC ' + this.league },           {                name: 'Standard', label: 'Standard' },           {                name: 'Hardcore', label: 'Hardcore' }       ];        let options = []; leagues.forEach( (i, league) => {           let option = document.createElement('option');            option.setAttribute('value', league.name);            option.textContent = league.label;            options[i] = option;        } ); for ( let i = 0; i < this.widgets.length; i++ ) { let widget = this.widgets[i]; widget.classList.remove('is-loading'); let select = document.getElementById(`trade-widget-${i}-field-1`); select.removeAttribute('disabled'); options.forEach( option => {               select.appendChild(option.cloneNode(true));            } ); }   } }

document.addEventListener('DOMContentLoaded', e => {   setTimeout( => { let widget = new Widget;

}, 1000); });

});