Jump to content

MediaWiki:Common.js: Difference between revisions

From Transight Wiki
← Older editNewer edit →
No edit summary
Tag: Manual revert
No edit summary
Line 112: Line 112:


/* === Transightee: Sticky header helper ===
/* === Transightee: Sticky header helper ===
  Place in MediaWiki:Common.js
(function () {
  Vanilla JS, updates on load/resize and when header content changes. */
    if (window.transighteeLogoFixedInit) return;
    window.transighteeLogoFixedInit = true;


( function () {
    function updateLogoPosition() {
    if ( window.transighteeStickyHeaderInit ) return;
        var logo = document.querySelector('#p-logo'); // ID of logo container
    window.transighteeStickyHeaderInit = true;
        if (!logo) return;


    function getTopFixedElementsHeight(excludeEl) {
         // Make logo fixed at top-left
         // find fixed-position elements at the very top (likely toolbars) and sum their heights
         logo.style.position = 'fixed';
         var all = document.getElementsByTagName('*');
        logo.style.top = '0';
        var sum = 0;
         logo.style.left = '0';
        for (var i = 0; i < all.length; i++) {
         logo.style.zIndex = '1000';
            var el = all[i];
         logo.style.backgroundColor = '#060424'; // match header background if needed
            if (el === excludeEl) continue;
         logo.style.padding = '5px 10px'; // optional
            var cs = window.getComputedStyle(el);
            if (cs.position === 'fixed' && cs.display !== 'none' && el.offsetHeight > 0) {
                var rect = el.getBoundingClientRect();
                // consider elements whose top is near the top of viewport
                if (rect.top >= -2 && rect.top <= 10) {
                    sum += el.offsetHeight;
                }
            }
        }
        return sum;
    }
 
    function updateStickyHeader() {
        var header = document.querySelector('.vector-header-container');
        var pageContainer = document.querySelector('.mw-page-container');
 
        if (!header || !pageContainer) {
            // If header or container not present yet, keep trying later
            return;
        }
 
         // Ensure header has a stable background so it doesn't appear transparent after becoming fixed
        try {
            var comp = getComputedStyle(header);
            if (!header.style.background && comp.backgroundColor && comp.backgroundColor !== 'rgba(0, 0, 0, 0)') {
                header.style.backgroundColor = comp.backgroundColor;
            }
         } catch (e) {
            // ignore
        }
 
        // Detect any other fixed elements at the top (toolbars) and position header below them
        var topOffset = getTopFixedElementsHeight(header);
        header.style.top = topOffset + 'px';
 
        // measure header height AFTER top is applied
         // force reflow to get accurate size
        var height = header.offsetHeight;
 
        // total vertical space header occupies (top offset + header height) = required padding
        var totalSpace = topOffset + height;
        document.documentElement.style.setProperty('--trans-header-height', totalSpace + 'px');
 
        // add body class to enable CSS that uses the variable
         document.body.classList.add('transightee-has-sticky-header');
    }
 
    // debounce helper for resize events
    var resizeTimer = null;
    function scheduleUpdate() {
        if (resizeTimer) clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            updateStickyHeader();
            resizeTimer = null;
        }, 120);
     }
     }


     document.addEventListener('DOMContentLoaded', function () {
     document.addEventListener('DOMContentLoaded', function () {
         // initial attempt
         updateLogoPosition();
        updateStickyHeader();
         window.addEventListener('resize', updateLogoPosition);
        // update when all resources loaded (images, fonts can change header height)
         window.addEventListener('load', updateStickyHeader);
        // keep updated on resize
        window.addEventListener('resize', scheduleUpdate);
 
        // Observe mutations inside header (e.g. buttons collapsing/expanding) and update padding
        var header = document.querySelector('.vector-header-container');
        if (header && window.MutationObserver) {
            var mo = new MutationObserver(function () {
                scheduleUpdate();
            });
            mo.observe(header, { attributes: true, childList: true, subtree: true, characterData: true });
            // keep reference to avoid GC in some environments
            window._transighteeStickyMO = mo;
        }
     });
     });
 
})();
    // Also try a periodic update a couple of times in case skin scripts alter header after load
    var tries = 0;
    var intId = setInterval(function () {
        updateStickyHeader();
        tries++;
        if (tries > 6) clearInterval(intId);
    }, 300);
}() );

Revision as of 06:44, 13 October 2025


$(document).ready(function() {
  $('input#searchInput').attr('placeholder', 'Search for Transight Wiki');
});

// Open all external links in a new tab
$(document).ready(function () {
    $("a.external").attr("target", "_blank");
});

mw.loader.using('mediawiki.util', function () {
    // Force small text
    document.documentElement.classList.remove('vector-feature-custom-font-size-standard', 'vector-feature-custom-font-size-large');
    document.documentElement.classList.add('vector-feature-custom-font-size-small');

    // Force wide layout
    document.documentElement.classList.remove('vector-feature-limited-width');
    document.documentElement.classList.add('vector-feature-wide-width');
});



/* === Transight site-wide footer (robust body-append) === */
mw.loader.using(['mediawiki.util']).then(function () {

  function injectTsFooter() {
    if (document.getElementById('ts-footer')) return; // avoid duplicates

    var html = '\
<div id="ts-footer" class="ts-footer">\
  <div class="ts-footer__container">\
    <nav class="ts-footer__sitemap">\
      <ul class="ts-footer__col">\
        <li class="ts-footer__title">USE CASES</li>\
        <li><a href="https://transight.com/solutions/fleet-management/">Fleet Telematics</a></li>\
        <li><a href="https://transight.com/solutions/remote-management-system/">Remote Monitoring System</a></li>\
        <li><a href="https://transight.com/solutions/automation/">Automation</a></li>\
        <li><a href="https://transight.com/solutions/asset-tracking/">Asset Tracking</a></li>\
        <li><a href="https://transight.com/transforming-battery-management-for-ev/">Advanced EV Telematics</a></li>\
      </ul>\
      <ul class="ts-footer__col">\
        <li class="ts-footer__title">PRODUCTS</li>\
        <li><a href="https://telematics.transight.com/Trackers">Trackers</a></li>\
        <li><a href="https://telematics.transight.com/Accessories">Accessories</a></li>\
        <li><a href="https://transight.com/products/cloud-iot-platform/">Cloud IoT Solutions</a></li>\
      </ul>\
      <ul class="ts-footer__col">\
        <li class="ts-footer__title">SUPPORT</li>\
        <li><a href="https://transight.com/client-support/">Product Support</a></li>\
        <li><a href="/wiki/WIKI_KNOWLEDGE_BASE">Wiki Knowledge Base</a></li>\
        <li><a href="/wiki/RMA_Guidelines">Warranty & Repair</a></li>\
      </ul>\
      <ul class="ts-footer__col">\
        <li class="ts-footer__title">ABOUT US</li>\
        <li><a href="https://transight.com/about/">Mission, Vision</a></li>\
        <li><a href="/wiki/Career">Career</a></li>\
        <li><a href="https://transight.com/contact/">Contacts</a></li>\
      </ul>\
    </nav>\
    <div class="ts-footer__bottom">\
      <p class="ts-footer__legal">© 2024, Transight | <a href="/wiki/Privacy">Privacy</a> | <a href="/wiki/Cookies">Cookies</a> | <a href="/wiki/Policies">All Policies</a></p>\
      <p class="ts-footer__social"><a href="https://facebook.com">Facebook</a> <a href="https://www.linkedin.com/company/transight/">LinkedIn</a> <a href="https://x.com/transight_iot?s=21">X</a> <a href="https://youtube.com/@transightsystems">YouTube</a> <a href="https://www.instagram.com/transightsystems/">Instagram</a></p>\
    </div>\
  </div>\
</div>';

    // Always append at the very end of <body> so no page element can constrain width
    document.body.insertAdjacentHTML('beforeend', html);

    // Hide any built-in wiki footers
    document.querySelectorAll('footer.mw-footer, .mw-footer, #mw-footer, .mw-footer-container')
      .forEach(function (el) { el.style.display = 'none'; });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', injectTsFooter);
  } else {
    injectTsFooter();
  }
});



/* === Inject floating buttons: "Go to our web" & "Go to Top" === */
mw.loader.using(['mediawiki.util']).then(function () {
    // Prevent duplicate injection
    if (!document.getElementById('ts-webfab')) {
        var webUrl = 'https://transight.com/';
        var htmlWeb = ''
            + '<div id="ts-webfab" class="ts-fab">'
            + '  <a class="ts-fab__btn" href="' + webUrl + '" target="_blank" rel="noopener" aria-label="Go to our website"></a>'
            + '  <span class="ts-fab__bubble">Go to our web</span>'
            + '</div>';
        document.body.insertAdjacentHTML('beforeend', htmlWeb);
    }

    if (!document.getElementById('ts-topfab')) {
        var htmlTop = ''
            + '<div id="ts-topfab" class="ts-fab">'
            + '  <a class="ts-fab__btn" href="javascript:void(0);" aria-label="Go to top"></a>'
            + '  <span class="ts-fab__bubble">Go to Top</span>'
            + '</div>';
        document.body.insertAdjacentHTML('beforeend', htmlTop);

        // Smooth scroll to top
        document.querySelector('#ts-topfab .ts-fab__btn').addEventListener('click', function() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    }
});


/* === Transightee: Sticky header helper ===
 (function () {
    if (window.transighteeLogoFixedInit) return;
    window.transighteeLogoFixedInit = true;

    function updateLogoPosition() {
        var logo = document.querySelector('#p-logo'); // ID of logo container
        if (!logo) return;

        // Make logo fixed at top-left
        logo.style.position = 'fixed';
        logo.style.top = '0';
        logo.style.left = '0';
        logo.style.zIndex = '1000';
        logo.style.backgroundColor = '#060424'; // match header background if needed
        logo.style.padding = '5px 10px'; // optional
    }

    document.addEventListener('DOMContentLoaded', function () {
        updateLogoPosition();
        window.addEventListener('resize', updateLogoPosition);
    });
})();
Retrieved from "https://telematics.transight.com/index.php?title=MediaWiki:Common.js&oldid=1197"