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.
113 lines
3.5 KiB
113 lines
3.5 KiB
7 years ago
|
const jQueryBridget = require( 'jquery-bridget' );
|
||
|
const Isotope = require( 'isotope-layout' );
|
||
|
|
||
|
export default {
|
||
|
init() {
|
||
|
// JavaScript to be fired on the catalog page
|
||
|
jQueryBridget( 'isotope', Isotope, $ );
|
||
|
let $grid = $( '.books' );
|
||
|
$grid.isotope( {
|
||
|
itemSelector: '.book',
|
||
|
getSortData: {
|
||
|
title: '.title a',
|
||
|
subject: '[data-subject]',
|
||
|
latest: '[data-date-published]',
|
||
|
},
|
||
|
sortAscending: {
|
||
|
title: true,
|
||
|
subject: true,
|
||
|
latest: false,
|
||
|
},
|
||
|
} );
|
||
|
$( '.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() {},
|
||
|
};
|