MediaWiki

Group-Grouse.js: Difference between revisions

From Grouse House Wiki

No edit summary
No edit summary
Line 126: Line 126:


(function() {
(function() {
  // Get all the <h2> headings
   const headings = document.querySelectorAll('h2');
   const headings = document.querySelectorAll('main h2')
    
    
   Array.prototype.forEach.call(headings, heading => {
   Array.prototype.forEach.call(headings, h => {
     // Give each <h2> a toggle button child
     let btn = h.querySelector('button');
    // with the SVG plus/minus icon
     let target = h.nextElementSibling;
    heading.innerHTML = `
      <button aria-expanded="false">
        ${heading.textContent}
        <svg aria-hidden="true" focusable="false" viewBox="0 0 10 10">
          <rect class="vert" height="8" width="2" y="1" x="4"/>
          <rect height="2" width="8" y="4" x="1"/>
        </svg>
      </button>
    `
   
    // Function to create a node list
    // of the content between this <h2> and the next
    const getContent = (elem) => {
      let elems = []
      while (elem.nextElementSibling && elem.nextElementSibling.tagName !== 'H2') {
        elems.push(elem.nextElementSibling)
        elem = elem.nextElementSibling
      }
     
      // Delete the old versions of the content nodes
      elems.forEach((node) => {
        node.parentNode.removeChild(node)
      })
 
      return elems
    }
   
    // Assign the contents to be expanded/collapsed (array)
     let contents = getContent(heading)
   
    // Create a wrapper element for `contents` and hide it
    let wrapper = document.createElement('div')
    wrapper.hidden = true
   
    // Add each element of `contents` to `wrapper`
    contents.forEach(node => {
      wrapper.appendChild(node)
    })
   
    // Add the wrapped content back into the DOM
    // after the heading
    heading.parentNode.insertBefore(wrapper, heading.nextElementSibling)
   
    // Assign the button
    let btn = heading.querySelector('button')
      
      
     btn.onclick = () => {
     btn.onclick = () => {
      // Cast the state as a boolean
       let expanded = btn.getAttribute('aria-expanded') === 'true';
       let expanded = btn.getAttribute('aria-expanded') === 'true' || false
        
        
      // Switch the state
       btn.setAttribute('aria-expanded', !expanded);
       btn.setAttribute('aria-expanded', !expanded)
       target.hidden = expanded; 
       // Switch the content's visibility
      wrapper.hidden = expanded  
     }
     }
   })
   });
})()
})()

Revision as of 22:19, 18 February 2024


$(function() {
    $('h2.c-header.active span.mw-headline').each(function () {
        var $header = $(this);
        var $headername = $header.html();
        $headernameu = $headername.split(' ').join('_');
$headernameu = $headernameu.replace("'", "\\'").replace("?", "\\?").replace("!", "\\!");

        var $secondheader = "#" + $headernameu + "_2";

        var $editsection = $( $secondheader ).next().children('a').attr("href");

        $header.after('[Edit]');
        $header.next().css( 'font-size', '0.6em').css( 'margin-left', '1em');

        $("a[href*='" + $secondheader + "']").hide();
    });
 });

$(function() {
    $('h2.c-header.hidden span.mw-headline').each(function () {
        var $header = $(this);
        var $headername = $header.html();
        $headernameu = $headername.split(' ').join('_');
$headernameu = $headernameu.replace("'", "\\'").replace("?", "\\?").replace("!", "\\!");

        var $secondheader = "#" + $headernameu + "_2";

        var $editsection = $( $secondheader ).next().children('a').attr("href");
        
        $header.after('[Edit]');
        $header.next().css( 'font-size', '0.6em').css( 'margin-left', '1em');

        $("a[href='" + $secondheader + "']").hide();
    });
 });

$(function() {
    $('h2.h-static span.mw-headline').each(function () {
        var $header = $(this);
        var $headername = $header.html();
        $headernameu = $headername.split(' ').join('_');
$headernameu = $headernameu.replace("'", "\\'").replace("?", "\\?").replace("!", "\\!");

        var $secondheader = "#" + $headernameu + "_2";

        var $editsection = $( $secondheader ).next().children('a').attr("href");

        $header.after('[Edit]');
        $header.next().css( 'font-size', '0.6em').css( 'margin-left', '1em');

        var $pagename = $('h1#firstHeading').html();
        $pagenameu = $pagename.split(' ').join('_');
        
        $toclink = "https://grousehouse.wiki/" + $pagenameu + $secondheader;

        $("a[href*='" + $secondheader + "']").hide();
    });
 });

$(function() {
    $('h3.c-header.active span.mw-headline').each(function () {
        var $header = $(this);
        var $headername = $header.html();
        $headernameu = $headername.split(' ').join('_');
$headernameu = $headernameu.replace("'", "\\'").replace("?", "\\?").replace("!", "\\!");

        var $secondheader = "#" + $headernameu + "_2";

        var $editsection = $( $secondheader ).next().children('a').attr("href");

        $header.after('[Edit]');
        $header.next().css( 'font-size', '0.6em').css( 'margin-left', '1em');

        $("a[href*='" + $secondheader + "']").hide();
    });
 });

$(function() {
    $('h3.c-header.hidden span.mw-headline').each(function () {
        var $header = $(this);
        var $headername = $header.html();
        $headernameu = $headername.split(' ').join('_');
$headernameu = $headernameu.replace("'", "\\'").replace("?", "\\?").replace("!", "\\!");

        var $secondheader = "#" + $headernameu + "_2";

        var $editsection = $( $secondheader ).next().children('a').attr("href");

        $header.after('[Edit]');
        $header.next().css( 'font-size', '0.6em').css( 'margin-left', '1em');

        var $pagename = $('h1#firstHeading').html();
        $pagenameu = $pagename.split(' ').join('_');
        
        $toclink = "https://grousehouse.wiki/" + $pagenameu + $secondheader;

        $("a[href*='" + $secondheader + "']").hide();
    });
 });

$(function() {
    $('h3.h-static span.mw-headline').each(function () {
        var $header = $(this);
        var $headername = $header.html();
        $headernameu = $headername.split(' ').join('_');
$headernameu = $headernameu.replace("'", "\\'").replace("?", "\\?").replace("!", "\\!");

        var $secondheader = "#" + $headernameu + "_2";

        var $editsection = $( $secondheader ).next().children('a').attr("href");

        $header.after('[Edit]');
        $header.next().css( 'font-size', '0.6em').css( 'margin-left', '1em');

        var $pagename = $('h1#firstHeading').html();
        $pagenameu = $pagename.split(' ').join('_');
        
        $toclink = "https://grousehouse.wiki/" + $pagenameu + $secondheader;

        $("a[href*='" + $secondheader + "']").hide();
    });
 });

/* Testing */

(function() {
  const headings = document.querySelectorAll('h2');
  
  Array.prototype.forEach.call(headings, h => {
    let btn = h.querySelector('button');
    let target = h.nextElementSibling;
    
    btn.onclick = () => {
      let expanded = btn.getAttribute('aria-expanded') === 'true';
      
      btn.setAttribute('aria-expanded', !expanded);
      target.hidden = expanded;  
    }
  });
})()
Retrieved from "http://grousehouse.wiki/index.php?title=MediaWiki:Group-Grouse.js&oldid=3730"