MediaWiki:Common.js: Difference between revisions

From TechWiki
Jump to navigation Jump to search
Move Club Home into the shared staging navigation
Match resource pill sizes across staging
 
(One intermediate revision by the same user not shown)
Line 96: Line 96:
     shell.append(brand, nav, browse);
     shell.append(brand, nav, browse);
     if (mw.config.get('wgCanonicalSpecialPageName') !== 'Search') shell.append(form);
     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');
    }
  });
}());