PublishingJS:TheNewSocial

const origin = window.location.origin
const title = "TheNewSocial"
const wikilink_rel = "mw:WikiLink"

document.onreadystatechange = function () {

	console.log( 'Hello from PublishingJS namespace!' )
	
	make_case_studies_collapsible()
	make_principles_collapsible()
	hashify_all_wikilinks()
	shuffle_worker_ants()
	give_galleries_buttons()

	
}





function $( selector ) {
	return document.querySelectorAll( selector )
}


function make_case_studies_collapsible() {
	const nav_links = $('#toc a, #Principles a')
	window.onhashchange = function() {
	    for (let i = 0; i < nav_links.length; i++) {
	        if (nav_links[i].href.match(/(#.*)/)[1] == window.location.hash) {
	            nav_links[i].className = 'selected'
	        } else {
	            nav_links[i].className = ''
	        }
	    }
	}
	
}

function hashify_all_wikilinks() {
	const wikilinks = $( `a[rel="${ wikilink_rel }"]` )
	for ( const wikilink of wikilinks ) {
		if ( !wikilink.href.includes('#') ) {
			wikilink.href = wikilink.href.replace( `${ origin }/html/`, '#' )
		}
	}
}

function make_principles_collapsible() {
	const principles = $( '#Principles > section' )
	for ( const principle of principles ) {
		const header = principle.querySelector( 'h3' )
		header.onclick = function() {
			Array.from( principles ).map( p => p.classList.remove('selected') )
			principle.classList.add( 'selected' )
		}
	}
}

function shuffle_worker_ants() {
	const ants = $( '.clippy_ant' )
	for ( const ant of ants ) {
		ant.style.setProperty( '--index', Math.floor(Math.random() * 21 ) )
	}
}

function give_galleries_buttons() {
 
    const galleries = $( 'ul.gallery' )

    for ( const gallery of galleries ) {
      if ( gallery.querySelector( '.controls' ) ) {
      	return
      }
	  const controls = document.createElement( 'div' )
	  controls.classList.add( 'controls' )
	  controls.innerHTML = `<span class="left"><</span><span class="right">></span>`
	  gallery.prepend( controls )
      const left = gallery.querySelector( '.left' )
      const right = gallery.querySelector( '.right' )
      const rem = parseFloat(getComputedStyle(document.documentElement).fontSize)

      right.onclick = () => { gallery.scroll({
        left: gallery.scrollLeft + gallery.offsetWidth - 1 * rem,
        behavior: "smooth"
      })}

      left.onclick = () => { gallery.scroll({
        left: gallery.scrollLeft - gallery.offsetWidth + 1 * rem,
        behavior: "smooth"
      })}

	}
}