APIRef.ejs

<%
// API Sidebar
//
// Parameters:
//  $0  A tag for the API group (searches for related APIs)

// Variables and data
var slug = env.slug;
var locale = env.locale;
var APIHref = '/' + locale + '/docs/Web/API';
var output = "";

// This is a hack. But to be able to use this macro in the /MDN/Kitchensink page
// we have to, unfortunately, pretend that our current slug is something
// that it's not. Otherwise you'll always get a `MacroPagesError` when using
// this macro on the kitchensink page.
if (slug.toLowerCase().startsWith('mdn/kitchensink')) {
  // Sorry, but it's important to be able to run this macro for CI.
  slug = 'Web/API/ServiceWorker';
}

// slug is not available in preview mode.
if (slug) {
var mainIF = slug.replace('Web/API/','').split('/')[0];
mainIF = mainIF.charAt(0).toUpperCase() + mainIF.slice(1);
var group = $0;
var hasTag = page.hasTag;
var htmlEscape = mdn.htmlEscape;
var rtlLocales = ['ar', 'he', 'fa'];

var webAPIData = web.getJSONData("InterfaceData");
if (group) {
  var webAPIGroups = web.getJSONData("GroupData");
}

var commonl10n = web.getJSONData("L10n-Common");

var text = {
    'Static properties': mdn.getLocalString(commonl10n, 'Static_properties'),
    'Instance properties': mdn.getLocalString(commonl10n, 'Instance_properties'),
    'Static methods': mdn.getLocalString(commonl10n, 'Static_methods'),
    'Instance methods': mdn.getLocalString(commonl10n, 'Instance_methods'),
    'Constructor': mdn.getLocalString(commonl10n, 'Constructor'),
    'Inheritance': mdn.getLocalString(commonl10n, 'Inheritance'),
    'Implemented_by': mdn.getLocalString(commonl10n, 'Implemented_by'),
    'Related': mdn.getLocalString(commonl10n, 'Related_pages').replace('$1', group),
    'translate': mdn.getLocalString(commonl10n, '[Translate]'),
    'title': mdn.getLocalString(commonl10n, 'TranslationCTA'),
    'Events': mdn.getLocalString(commonl10n, 'Events'),
};

// Collect all the things
var mainIFPages = await page.subpagesExpand('/en-US/docs/Web/API/' + mainIF);
var impl = webAPIData[0][mainIF] != undefined ? webAPIData[0][mainIF].impl : [];
var inh = webAPIData[0][mainIF] != undefined ? webAPIData[0][mainIF].inh : '';
var related = [];
var events = []
if (group && webAPIGroups[0][group]) {
  var rel_if = webAPIGroups[0][group].interfaces || [];
  var rel_met = webAPIGroups[0][group].methods || [];
  var rel_prop = webAPIGroups[0][group].properties || [];
  related = rel_if.concat(rel_met, rel_prop);
  var mainIfIndex = related.indexOf(mainIF);
  if (mainIfIndex !== -1) {
    related.splice(mainIfIndex, 1);
  }
  related.sort();
}

var staticProperties = [];
var instanceProperties = [];
var staticMethods = [];
var instanceMethods = [];
var ctors = [];
var events = [];
var inheritedIF = [];
var implementedBy = [];

function collect(pageList) {
  for (var i in pageList) {
    var aPage = pageList[i];
    switch(aPage.pageType) {
      case "web-api-static-property":
        staticProperties.push(aPage);
        break;
      case "web-api-instance-property":
        instanceProperties.push(aPage);
        break;
      case "web-api-static-method":
        staticMethods.push(aPage);
        break;
      case "web-api-instance-method":
        instanceMethods.push(aPage);
        break;
      case "web-api-constructor":
        ctors.push(aPage);
        break;
      case "web-api-event":
        events.push(aPage);
        break;
    }
  }
}

collect(mainIFPages);

if (impl.length > 0) {
  for (var i = 0; i < impl.length; i++) {
    var implementPages = await page.subpagesExpand('/en-US/docs/Web/API/' + impl[i]);
    collect(implementPages);
  }
}


function APISort(a, b) {
  return getPageTitle(a).toLowerCase().localeCompare(getPageTitle(b).toLowerCase());
}

staticProperties.sort(APISort);
instanceProperties.sort(APISort);
staticMethods.sort(APISort);
instanceMethods.sort(APISort);
ctors.sort(APISort);
events.sort(APISort);

function getInheritance(inh) {
  if (inh.length > 0) {
    inheritedIF.push(inh);
    if (Object.prototype.hasOwnProperty.call(webAPIData[0], inh)) {
        var inh = webAPIData[0][inh].inh;
        getInheritance(inh);
    }
  }
}
getInheritance(inh);

function getImplementedBy(data) {
  for (var key in data) {
    if (Object.prototype.hasOwnProperty.call(data, key)
        && data[key].impl
        && data[key].impl.indexOf(mainIF) != -1) {
      implementedBy.push(key);
    }
  }
  implementedBy.sort();
}
getImplementedBy(webAPIData[0]);

function getPageTitle(page) {
  if (page.short_title) {
    return htmlEscape(page.short_title);
  }
  const titleSplit = htmlEscape(page.title).split('.'); // Two cases, as sometimes the interface name is forgotten in the title:
  let title = titleSplit[titleSplit.length - 1];       // "WebGLRenderingContext.activeTexture()" and "activeTexture()" should both become "activeTexture()"
  // Event pages have a title like "Interface: eventname event" which looks silly
  // in the sidebar. So for event pages we use the slug, which is supposed to be
  // in the form "eventname_event", and split off "_event" to leave us (hopefully)
  // with just "eventname" for the link text.
  if (page.pageType === 'web-api-event') {
    title = page.slug.split('/').pop();
    if (title.endsWith('_event')) {
        title = title.slice(0,-6);
    }
  }
  return title;
}

async function smartLinkWithBadges(url, content) {
  let aPage = await wiki.getPage(url);
  if (!aPage.title && env.locale !== 'en-US') {
    const originalUrl = url.replace(`/${env.locale}/`, "/en-US/");
    aPage = await wiki.getPage(originalUrl);
  }
  const link = web.smartLink(url, null, content, APIHref, null, "APIRef");
  const badges = (await page.badges(aPage)).join("");
  return link + badges;
}

async function buildSublist(pages, title) {
  var result = '<li class="toggle"><details open><summary>' + title + '</summary><ol>';

  for (var i in pages) {
    var aPage = pages[i];
    var url = aPage.url.replace('en-US', locale);

    const title = getPageTitle(aPage);

    result += '<li>';

    const pageBadges = (await page.badges(aPage)).join("");

    if (rtlLocales.indexOf(locale) != -1) {
        result += '<bdi>';
    }

    if (slug == aPage.slug) {
        result += `<em><code>${title}</code> ${pageBadges}</em>`
    } else {
        result += await smartLinkWithBadges(url, `<code>${title}</code>`);
    }

    if (rtlLocales.indexOf(locale) != -1) {
        result += '</bdi>';
    }

    result += '</li>';
  }

  result += '</ol></details></li>';

  return result;
}

async function buildIFList(interfaces, title) {
  let result = '<li class="toggle"><details open><summary>' + title + '</summary><ol>';

  for (var i = 0; i < interfaces.length; i++) {
    var url = APIHref + '/' + interfaces[i].replace('()', '').replace('.', '/');
    if (!url.endsWith(slug)) {
      result += `<li>${await smartLinkWithBadges(url, `<code>${interfaces[i]}</code>`)}</li>`;
    }
  }

  result += '</ol></details></li>';

  return result;
}

// output
output = '<section id="Quick_links" data-macro="APIRef"><ol>';
if (group && webAPIGroups[0][group] && webAPIGroups[0][group].overview) {
  output += `<li class="section">${await smartLinkWithBadges(APIHref + '/' + webAPIGroups[0][group].overview[0].replace(/ /g, '_'), webAPIGroups[0][group].overview[0])}</li>`;
}

output += `<li class="section">${await smartLinkWithBadges(APIHref + '/' + mainIF, `<code>${mainIF}</code>`)}</li>`;

if (ctors.length > 0) {
  output += await buildSublist(ctors, text['Constructor']);
}
if (staticProperties.length > 0) {
  output += await buildSublist(staticProperties, text['Static properties']);
}
if (instanceProperties.length > 0) {
  output += await buildSublist(instanceProperties, text['Instance properties']);
}
if (staticMethods.length > 0) {
  output += await buildSublist(staticMethods, text['Static methods']);
}
if (instanceMethods.length > 0) {
  output += await buildSublist(instanceMethods, text['Instance methods']);
}
if (events.length > 0) {
  output += await buildSublist(events, text['Events']);
}
if (inh.length > 0) {
  output += await buildIFList(inheritedIF, text['Inheritance']);
}
if (implementedBy.length > 0) {
  output += await buildIFList(implementedBy, text['Implemented_by']);
}

if (related.length > 0) {
  output += await buildIFList(related, text['Related']);
}

output += '</ol></section>';
}
%>

<%-output%>