MediaWiki:Gadget-trailblazer-modal.js

/**
* Interface modal for Trailblazer regions
* See also: Gadget-trailblazer-core which initialises this one
*
* @version 1.1
* @author Elessar2
* 
*/

/*global jQuery, mediaWiki, mw, rswiki, rs, OO, moment, ga */
'use strict';

;
(function ($, mw, rs) {
  var areaChecks, $content, api;

  // trailblazer regions
  var tbareas = [{
    name: 'Misthalin',
    img: '/images/Misthalin_Area_Badge.png?11111',
    link: '/w/Trailblazer_Reloaded_League/Areas/Misthalin',
    id: 'misthalin'
  }, {
    name: 'Karamja',
    img: '/images/Karamja_Area_Badge.png?11111',
    link: '/w/Trailblazer_Reloaded_League/Areas/Karamja',
    id: 'karamja'
  }, {
    name: 'Asgarnia',
    img: '/images/Asgarnia_Area_Badge.png?11111',
    link: '/w/Trailblazer_Reloaded_League/Areas/Asgarnia',
    id: 'asgarnia'
  }, {
    name: 'Desert',
    img: '/images/Desert_Area_Badge.png?11111',
    link: '/w/Trailblazer_Reloaded_League/Areas/Kharidian_Desert',
    id: 'desert'
  }, {
    name: 'Fremennik',
    img: '/images/Fremennik_Area_Badge.png?11111',
    link: '/w/Trailblazer_Reloaded_League/Areas/Fremennik_Province',
    id: 'fremennik'
  }, {
    name: 'Kandarin',
    img: '/images/Kandarin_Area_Badge.png?11111',
    link: '/w/Trailblazer_Reloaded_League/Areas/Kandarin',
    id: 'kandarin'
  }, {
    name: 'Morytania',
    img: '/images/Morytania_Area_Badge.png?11111',
    link: '/w/Trailblazer_Reloaded_League/Areas/Morytania',
    id: 'morytania'
  }, {
    name: 'Tirannwn',
    img: '/images/Tirannwn_Area_Badge.png?11111',
    link: '/w/Trailblazer_Reloaded_League/Areas/Tirannwn',
    id: 'tirannwn'
  }, {
    name: 'Wilderness',
    img: '/images/Wilderness_Area_Badge.png?11111',
    link: '/w/Trailblazer_Reloaded_League/Areas/Wilderness',
    id: 'wilderness'
  }, {
    name: 'Kourend',
    img: '/images/Kourend_Area_Badge.png?11111',
    link: '/w/Trailblazer_Reloaded_League/Areas/Kourend',
    id: 'kourend'
  }];

  // countdown date
  var ctdwn = '2024-01-10T11:30:00+00:00';

  // Last time (for constant updating)
  rswtbz.updatetimer = 0;

  /**
   * Close the interface
   * Is a click() event handler
   * @return {undefined}
   */
  rswtbz.closeInt = function () {
    // Stop constant update
    clearInterval(rswtbz.updatetimer);
    // Close interface
    window.OOUIWindowManager.closeWindow('trailblazerPopup');
  };

  /**
   * Initialises the interface (popup and forms)
   * @return {Promise}
   */
  rswtbz.initInt = function () {
    return new Promise(function (resolve, reject) {
      mw.log('Initialising Trailblazer modal...');
      api = new mw.Api();

      // setup moment library
      moment.locale('en-events', {
        relativeTime: {
          parentLocale: "en",
          future: "%s",
          past: "%s ago",
          s: "secs",
          m: "1m",
          mm: "%dm",
          h: "1h",
          hh: "%dh",
          d: "1d",
          dd: "%dd",
          M: "1 month",
          MM: "%dmths",
          y: "1 year",
          yy: "%dyr"
        }
      });
      rs.createOOUIWindow('trailblazerPopup', 'Trailblazer Reloaded League', {
        size: 'large',
        classes: ['rsw-events-popup']
      }, rswtbz.initModal).then(function () {
        // Mark interface as initialised
        rswtbz.formMade = true;
        rswtbz.formConst = false;
        resolve();
      });
    });
  };

  /**
   * Saves areas unlocked to localStorage
   * @param  {string} id   Name (id) of area to save
   * @param  {boolean} value Area unlocked?
   * @return {boolean} If save was successfull
   */
  rswtbz.saveArea = function (id, value) {
    mw.log('Saving area status: ' + id);
    if (value) {
      if (!rswtbz.settings.areas.includes(id)) {
        rswtbz.settings.areas.push(id);
      }
    } else {
      var ind = rswtbz.settings.areas.indexOf(id);
      if (ind > -1) {
        rswtbz.settings.areas.splice(ind, 1);
      }
    }
    mw.log('Unlocked areas:');
    mw.log(rswtbz.settings.areas);

    // Update displays
    rswtbz.updateAreas();
    if (!rs.hasLocalStorage()) {
      console.warn('Browser does not support localStorage');
      return false;
    }
    var string = JSON.stringify(rswtbz.settings);
    try {
      localStorage.setItem(rswtbz.localKey, string);
    } catch (err) {
      console.warn('Error saving presets to localStorage');
      return false;
    }
    return true;
  };

  /**
   * Generates the events popup
   * @return {undefined}
   */
  rswtbz.initModal = function (modal) {
    var closeButton = new OO.ui.ButtonWidget({
      icon: 'close',
      id: 'rsw-events-close',
      label: 'Close',
      framed: false
    });
    closeButton.on('click', rswtbz.closeInt);
    areaChecks = {};
    areaChecks.areasel = new OO.ui.CheckboxMultiselectWidget({
      classes: ['tb-area-sels']
    });
    tbareas.forEach(function (area) {
      var label = '<img title="' + area.name + '" alt="' + area.name + '_Area_Badge.png" src="' + area.img + '" srcset="' + area.img + ' 1.5x" data-file-width="20" data-file-height="30" width="20" height="30" draggable="false"> ' + area.name;
      var externalLink = '<a href="' + area.link + '" class="tbz-external-link" title="' + area.name + ' Trailblazer Reloaded League area information" target="_blank">' + area.name + '</a>';
      areaChecks[area.id] = new OO.ui.CheckboxMultioptionWidget({
        label: new OO.ui.HtmlSnippet(label + externalLink),
        data: area.id,
        selected: rswtbz.settings.areas.includes(area.id)
      });
      areaChecks[area.id].on('change', rswtbz.saveArea, [area.id]);
      areaChecks.areasel.addItems([areaChecks[area.id]]);
    });
    $content = $('<div>');
    $content.addClass('events-popup').append($('<div>').addClass('header').append(closeButton.$element, $('<h2>').addClass('tb-title').append($('<a>').attr({
      href: '/w/Trailblazer_Reloaded_League',
      title: 'Trailblazer Reloaded League',
      target: '_blank'
    }).text('Trailblazer Reloaded League'))), $('<div>').addClass('body').append($('<div>').addClass('col col-l').append($('<div>').addClass('areas section').append($('<h3>').append($('<a>').attr({
      href: '/w/Trailblazer_Reloaded_League/Areas',
      title: 'Trailblazer Reloaded League Areas',
      target: '_blank'
    }).text('Regions unlocked')), areaChecks.areasel.$element)), $('<div>').addClass('col col-r').append($('<div>').addClass('guides section').append($('<h3>').append($('<a>').attr({
      href: '/w/Trailblazer_Reloaded_League/Guide',
      title: 'Trailblazer Reloaded League Guide',
      target: '_blank'
    }).text('League guides')), $('<div>').addClass('guide-links').append($('<a>').append($('<img>').attr({
      src: '/images/Quests.png?11111',
      height: '30px'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Quests',
      title: 'Trailblazer Reloaded League quests guide',
      target: '_blank'
    }).append('Quests'), $('<a>').append($('<img>').attr({
      src: '/images/Trailblazer_Reloaded_League_icon.png?11111',
      height: '30px'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Tasks',
      title: 'Trailblazer Reloaded League tasks',
      target: '_blank'
    }).append('Tasks'), $('<a>').append($('<img>').attr({
      src: '/images/Trailblazer_Reloaded_League_-_%3F_Relic.png?11111',
      height: '30px'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Relics',
      title: 'Trailblazer Reloaded League relics',
      target: '_blank'
    }).append('Relics'))), $('<div>').addClass('skills section').append($('<h3>').append($('<a>').attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Skills',
      title: 'Trailblazer Reloaded League Skills',
      target: '_blank'
    }).text('Skill guides')), $('<div>').addClass('skill-links').append($('<table>').addClass('wikitable').append($('<tr>').append($('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Stats_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Skills',
      title: 'Trailblazer Reloaded League skills',
      target: '_blank'
    })), $('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Agility_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Agility',
      title: 'Trailblazer Reloaded League agility',
      target: '_blank'
    })), $('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Mining_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Mining',
      title: 'Trailblazer Reloaded League Mining',
      target: '_blank'
    }))), $('<tr>').append($('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Melee.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Melee',
      title: 'Trailblazer Reloaded League Melee',
      target: '_blank'
    })), $('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Herblore_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Herblore',
      title: 'Trailblazer Reloaded League Herblore',
      target: '_blank'
    })), $('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Smithing_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Smithing',
      title: 'Trailblazer Reloaded League Smithing',
      target: '_blank'
    }))), $('<tr>').append($('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Ranged_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Ranged',
      title: 'Trailblazer Reloaded League Ranged',
      target: '_blank'
    })), $('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Thieving_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Thieving',
      title: 'Trailblazer Reloaded League Thieving',
      target: '_blank'
    })), $('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Fishing_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Fishing',
      title: 'Trailblazer Reloaded League Fishing',
      target: '_blank'
    }))), $('<tr>').append($('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Prayer_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Prayer',
      title: 'Trailblazer Reloaded League Prayer',
      target: '_blank'
    })), $('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Crafting_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Crafting',
      title: 'Trailblazer Reloaded League Crafting',
      target: '_blank'
    })), $('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Cooking_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Cooking',
      title: 'Trailblazer Reloaded League Cooking',
      target: '_blank'
    }))), $('<tr>').append($('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Magic_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Magic',
      title: 'Trailblazer Reloaded League Magic',
      target: '_blank'
    })), $('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Fletching_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Fletching',
      title: 'Trailblazer Reloaded League Fletching',
      target: '_blank'
    })), $('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Firemaking_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Firemaking',
      title: 'Trailblazer Reloaded League Firemaking',
      target: '_blank'
    }))), $('<tr>').append($('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Runecraft_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Runecraft',
      title: 'Trailblazer Reloaded League Runecraft',
      target: '_blank'
    })), $('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Slayer_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Slayer',
      title: 'Trailblazer Reloaded League Slayer',
      target: '_blank'
    })), $('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Woodcutting_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Woodcutting',
      title: 'Trailblazer Reloaded League Woodcutting',
      target: '_blank'
    }))), $('<tr>').append($('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Construction_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Construction',
      title: 'Trailblazer Reloaded League Construction',
      target: '_blank'
    })), $('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Hunter_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Hunter',
      title: 'Trailblazer Reloaded League Hunter',
      target: '_blank'
    })), $('<td>').append($('<a>').append($('<img>').attr({
      src: '/images/Farming_icon.png?11111'
    })).attr({
      href: '/w/Trailblazer_Reloaded_League/Guide/Farming',
      title: 'Trailblazer Reloaded League Farming',
      target: '_blank'
    })))))))), $('<div>').addClass('footer').append($('<div>').addClass('footer-padding'), $('<div>').addClass('tb-countdown').append($('<label>').text('End countdown'), $('<time>').text('')), $('<div>').addClass('footer-padding'), $('<div>').addClass('tb-update').append($('<label>').text('Latest newspost'), $('<a>').attr({
      href: '#',
      title: 'Loading...'
    }).text('Loading...')), $('<div>').addClass('footer-padding'), $('<div>').addClass('tb-info').append($('<label>').text('Rankings'), $('<a>').attr({
      href: 'https://secure.runescape.com/m=hiscore_oldschool_seasonal/overall',
      title: 'OSRS League Hiscores',
      target: '_blank',
      rel: 'nofollow noreferrer noopener'
    }).text('OSRS HiScores')), $('<div>').addClass('footer-padding')));

    // Create modal
    modal.content = new OO.ui.PanelLayout({
      padded: false,
      expanded: false
    });
    modal.content.$element.append($content);
    modal.$body.append(modal.content.$element);
    $('.oo-ui-windowManager .rsw-events-popup').click(rswtbz.closeInt).children().click(function (e) {
      e.stopPropagation();
    });
  };

  /**
   * Updates all values (used on opening)
   * @return {undefined}
   */
  rswtbz.updateAll = function () {
    rswtbz.updateTimes();
    rswtbz.updateNews();
  };

  /**
   * Continuously updates the time values in Events dropdown
   * @return {undefined}
   */
  rswtbz.updateTimes = function () {
    // Current UTC time
    var now = moment.utc();

    // Update UTC clock
    $content.find('.cur-utc-time').attr({
      'title': now.format('HH:mm D/M/Y'),
      'datetime': now.format()
    }).text(now.format('HH:mm') + ' (UTC)');

    // Update coountdown time
    var cntdwn_date = moment(ctdwn);
    $content.find('.tb-countdown time').attr({
      'title': cntdwn_date.format('HH:mm D/M/Y'),
      'datetime': cntdwn_date.format()
    }).text(cntdwn_date.from(now));
  };

  /**
   * Updates the values that are per day in the Events popup:
   * Current update
   * @return {undefined}
   */
  rswtbz.updateNews = function () {
    // Current UTC time
    var now = moment.utc();

    // Update the current update
    var uptitle = "Christmas 2023";
    var uplink = "/w/Update:Christmas_2023";
    var uphover = 'Update:' + uptitle;
    $content.find('.tb-update a').replaceWith($('<a>').attr({
      href: uplink,
      title: uphover
    }).text(uptitle));
  };
})(jQuery, mediaWiki, rswiki);