|
|
| (13 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| /* Any JavaScript here will be loaded for all users on every page load. */ | | /* Site JS — loaded on every page (MediaWiki:Common.js). */ |
|
| |
|
| // Discord link | | /* SEO fixes (Lighthouse "meta description" + "image alt"). Citizen renders |
| $(document).ready(function() {
| | og:description but not <meta name="description">, and MediaWiki renders inline |
| var discordElement = $(`
| | images with no alt attribute, so we backfill both client-side. */ |
| <div class="g-discord citizen-header__item citizen-dropdown">
| | ( function () { |
| <details id="g-discord-details" class="citizen-dropdown-details">
| | // 1. Mirror og:description into a real meta description if missing. |
| <summary class="citizen-dropdown-summary" title="Discord Link" aria-details="citizen-search__card">
| | if ( !document.querySelector( 'meta[name="description"]' ) ) { |
| <span class="citizen-ui-icon">
| | var og = document.querySelector( 'meta[property="og:description"]' ); |
| <span></span>
| | if ( og && og.content ) { |
| <span></span>
| | var m = document.createElement( 'meta' ); |
| <span></span>
| | m.setAttribute( 'name', 'description' ); |
| </span>
| | m.setAttribute( 'content', og.content ); |
| <span>Discord Link</span>
| | document.head.appendChild( m ); |
| </summary>
| | } |
| <div class="dropdown-content">
| | } |
| <a href="https://discord.com/gscripts" target="_blank">
| |
| <img src="https://wiki.gscripts.co/images/4/4b/Discord_30_30.png" alt="Discord" width="30" height="30">
| |
| </a>
| |
| </div>
| |
| </details>
| |
| </div>
| |
| `);
| |
| $(".citizen-header").prepend(discordElement);
| |
| }); | |
|
| |
|
| | | // 2. Give every image an alt attribute if it lacks one, derived from the |
| | | // wrapping link's title (page/script name) or the file name. |
| $(document).ready(function() {
| | document.querySelectorAll( 'img:not([alt])' ).forEach( function ( img ) { |
| var $sections = $('.accordion-section');
| | var link = img.closest( 'a' ); |
| | | var alt = ( link && link.getAttribute( 'title' ) ) || ''; |
| // Initialize: disable links in all headers by default (since all start collapsed)
| | if ( !alt ) { |
| $sections.find('.accordion-header a').css('pointer-events', 'none');
| | var src = img.getAttribute( 'src' ) || ''; |
| | | alt = decodeURIComponent( src.split( '/' ).pop() || '' ) |
| // Handle header clicks
| | .replace( /^\d+px-/, '' ) |
| $('.accordion-header').on('click', function(e) {
| | .replace( /\.[a-z0-9]+$/i, '' ) |
| var $section = $(this).closest('.accordion-section');
| | .replace( /[_-]+/g, ' ' ) |
| var $content = $section.find('.accordion-content');
| | .trim(); |
| var isHidden = $content.is(':hidden');
| | } |
| | | img.setAttribute( 'alt', alt ); |
| if (isHidden) {
| | } ); |
| // Collapse all other sections
| | }() ); |
| $sections.not($section).find('.accordion-content').slideUp(200);
| |
| $sections.not($section).removeClass('expanded');
| |
| $sections.not($section).find('.accordion-header a').css('pointer-events', 'none');
| |
| | |
| // Expand this section
| |
| $content.slideDown(200);
| |
| $section.addClass('expanded');
| |
| $section.find('.accordion-header a').css('pointer-events', 'auto');
| |
| } else {
| |
| // Collapse this section
| |
| $content.slideUp(200);
| |
| $section.removeClass('expanded');
| |
| $section.find('.accordion-header a').css('pointer-events', 'none');
| |
| }
| |
| | |
| // Prevent link click if content is hidden
| |
| if (e.target.tagName === 'A' && $content.is(':hidden')) {
| |
| e.preventDefault();
| |
| }
| |
| });
| |
| });
| |
