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.
112 lines
3.5 KiB
112 lines
3.5 KiB
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() {}, |
|
};
|
|
|