MediaWiki:Common.js: Difference between revisions

From TechWiki
Jump to navigation Jump to search
Add A–Z articles to the staging wiki navigation sidebar
Match resource pill sizes across staging
 
(6 intermediate revisions by the same user not shown)
Line 9: Line 9:
     const shell = document.createElement('div');
     const shell = document.createElement('div');
     shell.className = 'seloc-wiki-shell';
     shell.className = 'seloc-wiki-shell';
    const brand = document.createElement('a');
    brand.className = 'seloc-wiki-brand';
    brand.href = home;
    const logo = document.querySelector('#p-logo a');
    if (logo) {
      const artwork = getComputedStyle(logo).backgroundImage;
      if (artwork && artwork !== 'none') {
        const mark = document.createElement('span');
        mark.className = 'seloc-wiki-mark';
        mark.style.backgroundImage = artwork;
        mark.setAttribute('aria-hidden', 'true');
        brand.append(mark);
      }
    }
    brand.append(document.createTextNode('LOTUS Enthusiasts Club'));
     const nav = document.createElement('nav');
     const nav = document.createElement('nav');
    nav.className = 'seloc-wiki-primary';
     nav.setAttribute('aria-label', 'SELOC staging sites');
     nav.setAttribute('aria-label', 'SELOC staging sites');
     for (const [name, href] of [
     for (const [name, href] of [
       ['Club site', 'https://f.seloc.club/w691/'],
       ['Club Home', 'https://f.seloc.club/w691/'],
       ['Forums', 'https://forumsug.seloc.org/'],
       ['Forums', 'https://forumsug.seloc.org/'],
       ['TechWiki', home],
       ['TechWiki', home],
       ['Gallery', 'https://forumsug.seloc.org/cp_gallery.php'],
       ['Gallery', 'https://forumsug.seloc.org/cp_gallery.php'],
       ['Classifieds', 'https://classifiedsug.seloc.org/']
       ['Classifieds', 'https://classifiedsug.seloc.org/'],
      ['Advertisers', 'https://f.seloc.club/w691/index.php/advertisers/'],
      ['Membership', 'https://f.seloc.club/w691/index.php/membership/']
     ]) {
     ]) {
       const link = document.createElement('a');
       const link = document.createElement('a');
Line 43: Line 61:
     index.href = '/a/Special:AllPages'; index.textContent = 'A–Z articles';
     index.href = '/a/Special:AllPages'; index.textContent = 'A–Z articles';
     form.append(query, submit, index);
     form.append(query, submit, index);
    const techForum = document.querySelector('#n-SELOC-Tech-Forum a');
    if (techForum) techForum.href = 'https://forumsug.seloc.org/forumdisplay.php?fid=35';
    const browse = document.createElement('nav');
    browse.className = 'seloc-wiki-secondary';
    browse.setAttribute('aria-label', 'Browse TechWiki');
    for (const [name, href] of [
      ['Models', home + '#Lotus_Cars'],
      ['Technical subjects', home + '#Technical_Pages'],
      ['Resources', home + '#Non_Technical_Pages'],
      ['A–Z articles', '/a/Special:AllPages']
    ]) {
      const link = document.createElement('a');
      link.href = href;
      link.textContent = name;
      browse.append(link);
    }
     const sidebar = document.querySelector('#p-navigation ul');
     const sidebar = document.querySelector('#p-navigation ul');
     if (sidebar && !document.getElementById('n-seloc-article-index')) {
     if (sidebar) {
       const item = document.createElement('li');
      for (const link of sidebar.querySelectorAll('li:not(#n-mainpage) > a')) {
       item.id = 'n-seloc-article-index';
        browse.append(link.cloneNode(true));
       item.append(index.cloneNode(true));
      }
       const homeItem = sidebar.querySelector('#n-mainpage');
    }
       if (homeItem) homeItem.after(item);
    const toolbox = document.querySelector('#p-tb ul');
       else sidebar.prepend(item);
    if (toolbox && toolbox.children.length) {
       const tools = document.createElement('details');
       tools.className = 'seloc-wiki-tools';
       const label = document.createElement('summary');
       label.textContent = 'Wiki tools';
       tools.append(label, toolbox.cloneNode(true));
       browse.append(tools);
     }
     }
     shell.append(nav, form);
    if (sidebar) document.body.classList.add('seloc-wiki-compact-nav');
    index.remove();
     shell.append(brand, nav, browse);
    if (mw.config.get('wgCanonicalSpecialPageName') !== 'Search') shell.append(form);
    const responsiveNavigation = document.createElement('style');
    responsiveNavigation.textContent = "\n/* Keep the shared pills inside the reading column on phones and tablets. */\n@media screen and (max-width: 1024px) {\n  .seloc-wiki-compact-nav #content { margin-left: 0; min-width: 0; }\n  .seloc-wiki-shell { box-sizing: border-box; max-width: 100%; }\n  .seloc-wiki-shell nav.seloc-wiki-primary,\n  .seloc-wiki-shell nav.seloc-wiki-secondary {\n    display: flex;\n    flex-wrap: wrap;\n    box-sizing: border-box;\n    min-width: 0;\n  }\n  .seloc-wiki-shell nav > a { max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; }\n}\n";
    responsiveNavigation.textContent += "\n/* Shared staging resource pills */\n.seloc-wiki-shell .seloc-wiki-primary{display:flex!important;flex-wrap:wrap!important;gap:6px 8px!important;}\n.seloc-wiki-shell .seloc-wiki-primary > a{box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;width:auto!important;height:auto!important;min-height:36px!important;padding:6px 14px!important;font:700 14px/1.35 Verdana,Arial,sans-serif!important;white-space:nowrap!important;letter-spacing:normal!important;}\n@media(max-width:600px){.seloc-wiki-shell .seloc-wiki-primary > a{min-height:38px!important;padding-inline:11px!important;font-size:13px!important;}}\n";
    shell.prepend(responsiveNavigation);
     content.prepend(shell);
     content.prepend(shell);
     content.classList.add('seloc-wiki-enhanced');
     content.classList.add('seloc-wiki-enhanced');
    document.body.classList.add('seloc-wiki-themed');
     if (mw.config.get('wgNamespaceNumber') === 0 && !mw.config.get('wgIsMainPage')) {
     if (mw.config.get('wgNamespaceNumber') === 0 && !mw.config.get('wgIsMainPage')) {
       content.classList.add('seloc-wiki-article');
       content.classList.add('seloc-wiki-article');

Latest revision as of 15:19, 6 November 2026

/* Staging TechWiki navigation and native search. */
(function () {
  'use strict';
  if (location.hostname !== 'wikiug.seloc.org' || mw.config.get('wgAction') !== 'view') return;
  $(function () {
    const content = document.querySelector('#content');
    if (!content || document.querySelector('.seloc-wiki-shell')) return;
    const home = '/a/SELOC_TechWiki';
    const shell = document.createElement('div');
    shell.className = 'seloc-wiki-shell';
    const brand = document.createElement('a');
    brand.className = 'seloc-wiki-brand';
    brand.href = home;
    const logo = document.querySelector('#p-logo a');
    if (logo) {
      const artwork = getComputedStyle(logo).backgroundImage;
      if (artwork && artwork !== 'none') {
        const mark = document.createElement('span');
        mark.className = 'seloc-wiki-mark';
        mark.style.backgroundImage = artwork;
        mark.setAttribute('aria-hidden', 'true');
        brand.append(mark);
      }
    }
    brand.append(document.createTextNode('LOTUS Enthusiasts Club'));
    const nav = document.createElement('nav');
    nav.className = 'seloc-wiki-primary';
    nav.setAttribute('aria-label', 'SELOC staging sites');
    for (const [name, href] of [
      ['Club Home', 'https://f.seloc.club/w691/'],
      ['Forums', 'https://forumsug.seloc.org/'],
      ['TechWiki', home],
      ['Gallery', 'https://forumsug.seloc.org/cp_gallery.php'],
      ['Classifieds', 'https://classifiedsug.seloc.org/'],
      ['Advertisers', 'https://f.seloc.club/w691/index.php/advertisers/'],
      ['Membership', 'https://f.seloc.club/w691/index.php/membership/']
    ]) {
      const link = document.createElement('a');
      link.href = href;
      link.textContent = name;
      if (name === 'TechWiki') link.setAttribute('aria-current', 'true');
      nav.append(link);
    }
    const form = document.createElement('form');
    form.action = mw.config.get('wgScript');
    form.method = 'get';
    form.setAttribute('role', 'search');
    form.setAttribute('aria-label', 'TechWiki articles');
    for (const [name, value] of [['title', 'Special:Search'], ['fulltext', '1']]) {
      const field = document.createElement('input');
      field.type = 'hidden'; field.name = name; field.value = value;
      form.append(field);
    }
    const query = document.createElement('input');
    query.type = 'search'; query.name = 'search'; query.required = true;
    query.placeholder = 'Search models, parts or jobs';
    query.setAttribute('aria-label', 'Search TechWiki articles');
    const submit = document.createElement('button');
    submit.type = 'submit'; submit.textContent = 'Search';
    const index = document.createElement('a');
    index.href = '/a/Special:AllPages'; index.textContent = 'A–Z articles';
    form.append(query, submit, index);
    const techForum = document.querySelector('#n-SELOC-Tech-Forum a');
    if (techForum) techForum.href = 'https://forumsug.seloc.org/forumdisplay.php?fid=35';
    const browse = document.createElement('nav');
    browse.className = 'seloc-wiki-secondary';
    browse.setAttribute('aria-label', 'Browse TechWiki');
    for (const [name, href] of [
      ['Models', home + '#Lotus_Cars'],
      ['Technical subjects', home + '#Technical_Pages'],
      ['Resources', home + '#Non_Technical_Pages'],
      ['A–Z articles', '/a/Special:AllPages']
    ]) {
      const link = document.createElement('a');
      link.href = href;
      link.textContent = name;
      browse.append(link);
    }
    const sidebar = document.querySelector('#p-navigation ul');
    if (sidebar) {
      for (const link of sidebar.querySelectorAll('li:not(#n-mainpage) > a')) {
        browse.append(link.cloneNode(true));
      }
    }
    const toolbox = document.querySelector('#p-tb ul');
    if (toolbox && toolbox.children.length) {
      const tools = document.createElement('details');
      tools.className = 'seloc-wiki-tools';
      const label = document.createElement('summary');
      label.textContent = 'Wiki tools';
      tools.append(label, toolbox.cloneNode(true));
      browse.append(tools);
    }
    if (sidebar) document.body.classList.add('seloc-wiki-compact-nav');
    index.remove();
    shell.append(brand, nav, browse);
    if (mw.config.get('wgCanonicalSpecialPageName') !== 'Search') shell.append(form);
    const responsiveNavigation = document.createElement('style');
    responsiveNavigation.textContent = "\n/* Keep the shared pills inside the reading column on phones and tablets. */\n@media screen and (max-width: 1024px) {\n  .seloc-wiki-compact-nav #content { margin-left: 0; min-width: 0; }\n  .seloc-wiki-shell { box-sizing: border-box; max-width: 100%; }\n  .seloc-wiki-shell nav.seloc-wiki-primary,\n  .seloc-wiki-shell nav.seloc-wiki-secondary {\n    display: flex;\n    flex-wrap: wrap;\n    box-sizing: border-box;\n    min-width: 0;\n  }\n  .seloc-wiki-shell nav > a { max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; }\n}\n";
    responsiveNavigation.textContent += "\n/* Shared staging resource pills */\n.seloc-wiki-shell .seloc-wiki-primary{display:flex!important;flex-wrap:wrap!important;gap:6px 8px!important;}\n.seloc-wiki-shell .seloc-wiki-primary > a{box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;width:auto!important;height:auto!important;min-height:36px!important;padding:6px 14px!important;font:700 14px/1.35 Verdana,Arial,sans-serif!important;white-space:nowrap!important;letter-spacing:normal!important;}\n@media(max-width:600px){.seloc-wiki-shell .seloc-wiki-primary > a{min-height:38px!important;padding-inline:11px!important;font-size:13px!important;}}\n";
    shell.prepend(responsiveNavigation);
    content.prepend(shell);
    content.classList.add('seloc-wiki-enhanced');
    document.body.classList.add('seloc-wiki-themed');
    if (mw.config.get('wgNamespaceNumber') === 0 && !mw.config.get('wgIsMainPage')) {
      content.classList.add('seloc-wiki-article');
    }
  });
}());