pressbooks aldine theme the theme used for the front page or default book
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

338 lines
11 KiB

const Isotope = require( 'isotope-layout' );
const jQueryBridget = require( 'jquery-bridget' );
export default {
/**
*
*/
init() {
// JavaScript to be fired on the catalog page
( function () {
// Get all the <h2> headings
const headings = document.querySelectorAll( 'fieldset h2' );
Array.prototype.forEach.call( headings, heading => {
// Give each <h3> a toggle button child
heading.innerHTML = `
<button type="button" aria-expanded="false">
${heading.textContent}
<svg aria-hidden="true" focusable="false" class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="currentColor" fill-rule="evenodd"></path></svg>
</button>
`;
// Function to create a node list
// of the content between this <h2> and the next
/**
* @param elem
*/
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 = () => {
// Cast the state as a boolean
let expanded = btn.getAttribute( 'aria-expanded' ) === 'true' || false;
// Switch the state
btn.setAttribute( 'aria-expanded', ! expanded );
// Switch the content's visibility
wrapper.hidden = expanded;
};
} );
} )();
( function () {
// Get all the <h3> headings
const headings = document.querySelectorAll( 'fieldset h3' );
Array.prototype.forEach.call( headings, heading => {
// Give each <h3> a toggle button child
heading.innerHTML = `
<button type="button" aria-expanded="false">
${heading.innerHTML}
<svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="currentColor" fill-rule="evenodd"></path></svg>
</button>
`;
// Function to create a node list
// of the content between this <h2> and the next
/**
* @param elem
*/
const getContent = elem => {
let elems = [];
while (
elem.nextElementSibling &&
elem.nextElementSibling.tagName !== 'H3'
) {
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 = () => {
// Cast the state as a boolean
let expanded = btn.getAttribute( 'aria-expanded' ) === 'true' || false;
// Switch the state
btn.setAttribute( 'aria-expanded', ! expanded );
// Switch the content's visibility
wrapper.hidden = expanded;
};
} );
} )();
jQuery( $ => {
jQueryBridget( 'isotope', Isotope, $ );
let $grid = $( '.books' );
$grid.isotope( {
itemSelector: '.book',
getSortData: {
title: '.book__title a',
subject: '[data-subject]',
latest: '[data-date-published]',
},
sortAscending: {
title: true,
subject: false,
latest: false,
},
} );
let licenses = document.querySelector( '.license-filters' );
let subjects = document.querySelector( '.subject-filters' );
let institutions = document.querySelector( '.institution-filters' );
let sorts = document.querySelector( '.sorts' );
let clearFilters = document.querySelector( '.clear-filters' );
clearFilters.hidden = false;
licenses.addEventListener( 'click', function ( event ) {
if ( event.target.type !== 'radio' ) {
return;
}
const subject = subjects.querySelector( 'input[type="radio"]:checked' ).value
? `[data-subject="${subjects.querySelector( 'input[type="radio"]:checked' ).value}"]`
: '';
const institution = institutions.querySelector( 'input[type="radio"]:checked' ).value
? `[data-institution*="${institutions.querySelector( 'input[type="radio"]:checked' ).value}"]`
: '';
const license = event.target.value
? `[data-license="${event.target.value}"]`
: '';
const filterValue = subject || license || institution ? `${subject}${license}${institution}` : '*';
$grid.isotope( { filter: filterValue } );
} );
institutions.addEventListener( 'click', function ( event ) {
if ( event.target.type !== 'radio' ) {
return;
}
const subject = subjects.querySelector( 'input[type="radio"]:checked' ).value
? `[data-subject="${subjects.querySelector( 'input[type="radio"]:checked' ).value}"]`
: '';
const license = licenses.querySelector( 'input[type="radio"]:checked' ).value
? `[data-license="${licenses.querySelector( 'input[type="radio"]:checked' ).value}"]`
: '';
const institution = event.target.value
? `[data-institution*="${event.target.value}"]`
: '';
const filterValue = subject || license || institution ? `${subject}${license}${institution}` : '*';
$grid.isotope( { filter: filterValue } );
} );
subjects.addEventListener( 'click', function ( event ) {
if ( event.target.type !== 'radio' ) {
return;
}
const license = licenses.querySelector( 'input[type="radio"]:checked' ).value
? `[data-license="${licenses.querySelector( 'input[type="radio"]:checked' ).value}"]`
: '';
const institution = institutions.querySelector( 'input[type="radio"]:checked' ).value
? `[data-institution*="${institutions.querySelector( 'input[type="radio"]:checked' ).value}"]`
: '';
const subject = event.target.value
? `[data-subject="${event.target.value}"]`
: '';
const filterValue = subject || license || institution ? `${subject}${license}${institution}` : '*';
$grid.isotope( { filter: filterValue } );
} );
clearFilters.addEventListener( 'click', function () {
let allLicenses = document.getElementById( 'all-licenses' );
let allSubjects = document.getElementById( 'all-subjects' );
let allInstitutions = document.getElementById( 'all-institutions' );
allLicenses.checked = true;
allSubjects.checked = true;
allInstitutions.checked = true;
$grid.isotope( { filter: '*' } );
} );
sorts.addEventListener( 'click', function ( event ) {
if ( event.target.type !== 'radio' ) {
return;
}
$grid.isotope( { sortBy: event.target.value } );
} );
// $('.filters > a').click(e => {
// e.preventDefault();
// $('.filters').toggleClass('is-active');
// $('.filter-groups > div').removeClass('is-active');
// });
// $('.filter-groups .subjects > a').click(e => {
// e.preventDefault();
// let id = $(e.currentTarget).attr('href');
// $(`.filter-groups .subjects:not(${id})`).removeClass('is-active');
// $(`.filter-groups ${id}`).toggleClass('is-active');
// });
// $('.licenses > a').click(e => {
// e.preventDefault();
// let id = $(e.currentTarget).attr('href');
// $(id).toggleClass('is-active');
// });
// $('.subjects .filter-list a').click(e => {
// e.preventDefault();
// if ($(e.currentTarget).hasClass('is-active')) {
// $('.subjects .filter-list a').removeClass('is-active');
// $('.subjects').removeClass('has-active-child');
// } else {
// $('.subjects .filter-list a').removeClass('is-active');
// $(e.currentTarget).addClass('is-active');
// $('.subjects').removeClass('has-active-child');
// $(e.currentTarget)
// .parent()
// .parent()
// .parent('.subjects')
// .addClass('has-active-child');
// }
// let subjectValue = $('.subjects .filter-list a.is-active').attr(
// 'data-filter'
// );
// let licenseValue = $('.licenses .filter-list a.is-active').attr(
// 'data-filter'
// );
// if (typeof licenseValue === 'undefined') {
// licenseValue = '';
// } else {
// licenseValue = `[data-license="${licenseValue}"]`;
// }
// if (typeof subjectValue === 'undefined') {
// subjectValue = '';
// } else {
// subjectValue = `[data-subject="${subjectValue}"]`;
// }
// $grid.isotope({ filter: `${subjectValue}${licenseValue}` });
// });
// $('.licenses .filter-list a').click(e => {
// e.preventDefault();
// if ($(e.currentTarget).hasClass('is-active')) {
// $('.licenses .filter-list a').removeClass('is-active');
// $('.licenses').removeClass('has-active-child');
// } else {
// $('.licenses .filter-list a').removeClass('is-active');
// $(e.currentTarget).addClass('is-active');
// $('.licenses').addClass('has-active-child');
// }
// let subjectValue = $('.subjects .filter-list a.is-active').attr(
// 'data-filter'
// );
// let licenseValue = $('.licenses .filter-list a.is-active').attr(
// 'data-filter'
// );
// if (typeof licenseValue === 'undefined') {
// licenseValue = '';
// } else {
// licenseValue = `[data-license="${licenseValue}"]`;
// }
// if (typeof subjectValue === 'undefined') {
// subjectValue = '';
// } else {
// subjectValue = `[data-subject="${subjectValue}"]`;
// }
// $grid.isotope({ filter: `${subjectValue}${licenseValue}` });
// });
// $('.sort > a').click(e => {
// e.preventDefault();
// $('.sort').toggleClass('is-active');
// });
// $('.sorts a').click(e => {
// e.preventDefault();
// let sortBy = $(e.currentTarget).attr('data-sort');
// $('.sorts a').removeClass('is-active');
// $(e.currentTarget).addClass('is-active');
// $grid.isotope({ sortBy: sortBy });
// });
} );
},
/**
*
*/
finalize() {},
};