MediaWiki:Common.js: Difference between revisions

From TechWiki
Jump to navigation Jump to search
Point the Tech Forum sidebar link at staging
Match resource pill sizes across staging
 
(4 intermediate revisions by the same user not shown)
Line 28: Line 28:
     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 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://www.seloc.org/advertisers.php']
       ['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 61: Line 63:
     const techForum = document.querySelector('#n-SELOC-Tech-Forum a');
     const techForum = document.querySelector('#n-SELOC-Tech-Forum a');
     if (techForum) techForum.href = 'https://forumsug.seloc.org/forumdisplay.php?fid=35';
     if (techForum) techForum.href = 'https://forumsug.seloc.org/forumdisplay.php?fid=35';
    const sidebar = document.querySelector('#p-navigation ul');
    if (sidebar && !document.getElementById('n-seloc-article-index')) {
      const item = document.createElement('li');
      item.id = 'n-seloc-article-index';
      item.append(index.cloneNode(true));
      const homeItem = sidebar.querySelector('#n-mainpage');
      if (homeItem) homeItem.after(item);
      else sidebar.prepend(item);
    }
     const browse = document.createElement('nav');
     const browse = document.createElement('nav');
     browse.className = 'seloc-wiki-secondary';
     browse.className = 'seloc-wiki-secondary';
Line 77: Line 70:
       ['Technical subjects', home + '#Technical_Pages'],
       ['Technical subjects', home + '#Technical_Pages'],
       ['Resources', home + '#Non_Technical_Pages'],
       ['Resources', home + '#Non_Technical_Pages'],
       ['A–Z articles', '/a/Special:AllPages'],
       ['A–Z articles', '/a/Special:AllPages']
      ['Club site', 'https://f.seloc.club/w691/']
     ]) {
     ]) {
       const link = document.createElement('a');
       const link = document.createElement('a');
Line 85: Line 77:
       browse.append(link);
       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();
     index.remove();
     shell.append(brand, nav, browse, form);
     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');

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');
    }
  });
}());