Code
/
pressbooks-aldine
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Rework catalog sort/filter.

pull/55/head
Ned Zimmerman 7 years ago
parent
7039436317
commit
3d1344cb72
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
12 changed files with 28875 additions and 139 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 365
      assets/scripts/routes/catalog.js
  2. 1
      assets/styles/aldine.scss
  3. 106
      assets/styles/layouts/_catalog.scss
  4. 8
      dist/mix-manifest.json
  5. 14673
      dist/scripts/aldine.js
  6. 10356
      dist/scripts/customizer.js
  7. 3114
      dist/styles/aldine.css
  8. 302
      dist/styles/editor.css
  9. 1
      functions.php
  10. 3
      header.php
  11. 13
      inc/filters/namespace.php
  12. 72
      partials/content-page-catalog.php

365
assets/scripts/routes/catalog.js
Unescape View File

@ -1,114 +1,285 @@
const jQueryBridget = require( 'jquery-bridget' ); const jQueryBridget = require('jquery-bridget');
const Isotope = require( 'isotope-layout' ); const Isotope = require('isotope-layout');
export default { export default {
init() { init() {
// JavaScript to be fired on the catalog page // JavaScript to be fired on the catalog page
jQuery( $ => { (function() {
jQueryBridget( 'isotope', Isotope, $ ); // Get all the <h2> headings
let $grid = $( '.books' ); const headings = document.querySelectorAll('fieldset h2');
$grid.isotope( {
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
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.textContent}
<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
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', itemSelector: '.book',
getSortData: { getSortData: {
title: '.title a', title: '.book__title a',
subject: '[data-subject]', subject: '[data-subject]',
latest: '[data-date-published]', latest: '[data-date-published]',
}, },
sortAscending: { sortAscending: {
title: true, title: true,
subject: true, subject: false,
latest: false, latest: false,
}, },
} ); });
$( '.filters > a' ).click( e => { let licenses = document.querySelector('.license-filters');
e.preventDefault(); let subjects = document.querySelector('.subject-filters');
$( '.filters' ).toggleClass( 'is-active' ); let sorts = document.querySelector('.sorts');
$( '.filter-groups > div' ).removeClass( 'is-active' ); licenses.addEventListener('click', function(event) {
} ); if (event.target.type !== 'radio') {
$( '.filter-groups .subjects > a' ).click( e => { return;
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' ) { let license = '';
subjectValue = ''; let subject = '';
} else { if (subjects.querySelector('input[type="radio"]:checked').value) {
subjectValue = `[data-subject="${subjectValue}"]`; subject = `[data-subject="${
subjects.querySelector('input[type="radio"]:checked').value
}"]`;
} }
$grid.isotope( { filter: `${subjectValue}${licenseValue}` } ); license = `[data-license="${event.target.value}"]`;
} ); alert(`[data-license="${event.target.value}"]${subject}`);
$( '.licenses .filter-list a' ).click( e => { $grid.isotope({
e.preventDefault(); filter: `[data-license="${event.target.value}"]${subject}`,
if ( $( e.currentTarget ).hasClass( 'is-active' ) ) { });
$( '.licenses .filter-list a' ).removeClass( 'is-active' ); });
$( '.licenses' ).removeClass( 'has-active-child' ); subjects.addEventListener('click', function(event) {
} else { if (event.target.type !== 'radio') {
$( '.licenses .filter-list a' ).removeClass( 'is-active' ); return;
$( e.currentTarget ).addClass( 'is-active' );
$( '.licenses' ).addClass( 'has-active-child' );
} }
let subjectValue = $( '.subjects .filter-list a.is-active' ).attr( let license = '';
'data-filter' let subject = '';
); if (licenses.querySelector('input[type="radio"]:checked').value) {
let licenseValue = $( '.licenses .filter-list a.is-active' ).attr( license = `[data-license="${
'data-filter' licenses.querySelector('input[type="radio"]:checked').value
); }"]`;
if ( typeof licenseValue === 'undefined' ) {
licenseValue = '';
} else {
licenseValue = `[data-license="${licenseValue}"]`;
} }
if ( typeof subjectValue === 'undefined' ) { subject = `[data-subject="${event.target.value}"]`;
subjectValue = ''; alert(`${license}[data-subject="${event.target.value}"]`);
} else { $grid.isotope({
subjectValue = `[data-subject="${subjectValue}"]`; filter: `${license}${subject}`,
});
});
sorts.addEventListener('click', function(event) {
if (event.target.type !== 'radio') {
return;
} }
$grid.isotope( { filter: `${subjectValue}${licenseValue}` } ); $grid.isotope({ sortBy: event.target.value });
} ); });
$( '.sort > a' ).click( e => { // $('.filters > a').click(e => {
e.preventDefault(); // e.preventDefault();
$( '.sort' ).toggleClass( 'is-active' ); // $('.filters').toggleClass('is-active');
} ); // $('.filter-groups > div').removeClass('is-active');
$( '.sorts a' ).click( e => { // });
e.preventDefault(); // $('.filter-groups .subjects > a').click(e => {
let sortBy = $( e.currentTarget ).attr( 'data-sort' ); // e.preventDefault();
$( '.sorts a' ).removeClass( 'is-active' ); // let id = $(e.currentTarget).attr('href');
$( e.currentTarget ).addClass( 'is-active' ); // $(`.filter-groups .subjects:not(${id})`).removeClass('is-active');
$grid.isotope( { sortBy: sortBy } ); // $(`.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() {}, finalize() {},
}; };

1
assets/styles/aldine.scss
Unescape View File

@ -15,3 +15,4 @@
@import "layouts/header"; @import "layouts/header";
@import "layouts/front-page"; @import "layouts/front-page";
@import "layouts/pages"; @import "layouts/pages";
@import "layouts/catalog";

106
assets/styles/layouts/_catalog.scss
Unescape View File

@ -0,0 +1,106 @@
fieldset {
border-top: solid 2px var(--accent);
font-family: $font-family-sans-serif;
h2,
h3 {
margin-bottom: 0;
font-size: 1rem;
font-weight: bold;
text-align: left;
text-transform: none;
&:before {
display: none;
}
button {
display: flex;
flex-direction: row;
justify-content: space-between;
all: inherit;
width: 100%;
padding: 1rem 1.1875rem;
margin: 0;
border-top: 0;
svg {
display: block;
float: right;
margin-top: 0.5rem;
}
&:hover,
&:focus {
color: var(--brand);
background: var(--bg-body);
}
&:active {
box-shadow: none;
}
&[aria-expanded="true"] {
color: var(--brand);
svg {
transform: rotate(180deg);
}
}
}
}
h2 {
button[aria-expanded="true"] {
border-bottom: solid 2px var(--accent);
background: #fafdff;
}
}
[type="radio"] {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
clip: rect(1px, 1px, 1px, 1px);
}
[type="radio"] + label {
cursor: pointer;
display: block;
padding: 1rem 1.1875rem;
margin-bottom: 0;
svg {
display: none;
}
}
[type="radio"]:focus {
label {
cursor: pointer;
display: block;
}
}
[type="radio"]:checked + label {
color: var(--brand);
font-weight: bold;
svg {
display: block;
float: right;
margin-top: 0.5rem;
width: 1rem;
height: 1rem;
fill: transparent;
}
}
&:last-of-type {
border-bottom: solid 2px var(--accent);
margin-bottom: 1rem;
}
}

8
dist/mix-manifest.json vendored
Unescape View File

@ -1,6 +1,6 @@
{ {
"/scripts/aldine.js": "/scripts/aldine.js?id=c8641d03dfb38dc75e0d", "/scripts/aldine.js": "/scripts/aldine.js",
"/styles/aldine.css": "/styles/aldine.css?id=7fca925f82ab0be23d54", "/styles/aldine.css": "/styles/aldine.css",
"/styles/editor.css": "/styles/editor.css?id=10e3f4b144847aa8d75e", "/styles/editor.css": "/styles/editor.css",
"/scripts/customizer.js": "/scripts/customizer.js?id=f1f1f4225cba4c1b35f2" "/scripts/customizer.js": "/scripts/customizer.js"
} }

14673
dist/scripts/aldine.js vendored
View File

File diff suppressed because one or more lines are too long

10356
dist/scripts/customizer.js vendored
View File

File diff suppressed because one or more lines are too long

3114
dist/styles/aldine.css vendored
View File

File diff suppressed because one or more lines are too long

302
dist/styles/editor.css vendored
View File

File diff suppressed because one or more lines are too long

1
functions.php
Unescape View File

@ -48,6 +48,7 @@ add_filter( 'mce_buttons', '\\Aldine\\Filters\\add_style_select' );
add_filter( 'tiny_mce_before_init', '\\Aldine\\Filters\\add_blocks' ); add_filter( 'tiny_mce_before_init', '\\Aldine\\Filters\\add_blocks' );
add_filter( 'body_class', '\\Aldine\\Filters\\body_classes' ); add_filter( 'body_class', '\\Aldine\\Filters\\body_classes' );
add_filter( 'excerpt_more', '\\Aldine\\Filters\\excerpt_more' ); add_filter( 'excerpt_more', '\\Aldine\\Filters\\excerpt_more' );
add_filter( 'query_vars', '\\Aldine\\Filters\\register_query_vars' );
add_filter( 'wp_nav_menu_items', '\\Aldine\\Filters\\adjust_menu', 10, 2 ); add_filter( 'wp_nav_menu_items', '\\Aldine\\Filters\\adjust_menu', 10, 2 );
add_action( 'widgets_init', '\\Aldine\\Actions\\widgets_init' ); add_action( 'widgets_init', '\\Aldine\\Actions\\widgets_init' );
add_action( 'wp_enqueue_scripts', '\\Aldine\\Actions\\enqueue_assets' ); add_action( 'wp_enqueue_scripts', '\\Aldine\\Actions\\enqueue_assets' );

3
header.php
Unescape View File

@ -35,6 +35,9 @@
<symbol id="twitter" fill="currentColor" viewbox="0 0 512 512"><path d="M161 433c193 0 299-161 299-300v-14c20-15 38-34 52-55-19 9-40 14-60 17 22-13 38-34 46-59-21 13-43 21-67 26-32-35-84-44-126-21s-64 71-53 117c-84-4-163-44-216-110C8 82 22 144 68 175c-17 0-33-5-48-13v1c0 50 36 94 85 104-16 4-32 5-48 2 14 43 54 72 98 73-37 30-83 46-130 45-8 0-17 0-25-1 48 31 104 47 161 47"/></symbol> <symbol id="twitter" fill="currentColor" viewbox="0 0 512 512"><path d="M161 433c193 0 299-161 299-300v-14c20-15 38-34 52-55-19 9-40 14-60 17 22-13 38-34 46-59-21 13-43 21-67 26-32-35-84-44-126-21s-64 71-53 117c-84-4-163-44-216-110C8 82 22 144 68 175c-17 0-33-5-48-13v1c0 50 36 94 85 104-16 4-32 5-48 2 14 43 54 72 98 73-37 30-83 46-130 45-8 0-17 0-25-1 48 31 104 47 161 47"/></symbol>
<symbol id="arrow-right" fill="currentColor" viewBox="0 0 512 512"><path d="M291 32c0 6 3 12 7 17l133 135H23c-13 0-23 11-23 24s10 24 23 24h408L298 367c-4 4-7 10-7 16s3 12 7 17c10 9 24 9 33 0l173-176c9-9 9-23 0-33L331 15c-9-10-23-10-33 0-4 4-7 10-7 17"/></symbol> <symbol id="arrow-right" fill="currentColor" viewBox="0 0 512 512"><path d="M291 32c0 6 3 12 7 17l133 135H23c-13 0-23 11-23 24s10 24 23 24h408L298 367c-4 4-7 10-7 16s3 12 7 17c10 9 24 9 33 0l173-176c9-9 9-23 0-33L331 15c-9-10-23-10-33 0-4 4-7 10-7 17"/></symbol>
<symbol id="arrow-left" fill="currentColor" viewBox="0 0 512 512"><path d="M220 45c0 6-3 12-7 17L79 200h410c12 0 23 11 23 25 0 13-11 24-23 24H79l134 138c4 5 7 11 7 17 0 7-3 13-7 18-10 9-24 9-33 0L7 242c-9-10-9-25 0-34L180 26c9-9 23-9 33 0 4 5 7 11 7 19"/></symbol> <symbol id="arrow-left" fill="currentColor" viewBox="0 0 512 512"><path d="M220 45c0 6-3 12-7 17L79 200h410c12 0 23 11 23 25 0 13-11 24-23 24H79l134 138c4 5 7 11 7 17 0 7-3 13-7 18-10 9-24 9-33 0L7 242c-9-10-9-25 0-34L180 26c9-9 23-9 33 0 4 5 7 11 7 19"/></symbol>
<symbol id="checkmark" viewBox="0 0 20 16">
<polyline stroke="currentColor" stroke-width="3" transform="translate(10.063477, 4.717773) rotate(-45.000000) translate(-10.063477, -4.717773) " points="2.06347656 0.717773438 2.06347656 8.71777344 18.0634766 8.71777344"></polyline>
</symbol>
</defs> </defs>
</svg> </svg>
<div id="page" class="site"> <div id="page" class="site">

13
inc/filters/namespace.php
Unescape View File

@ -38,6 +38,19 @@ function body_classes( array $classes ) {
return array_filter( $classes ); return array_filter( $classes );
} }
/**
* Add custom query vars for catalog.
*
* @param array $vars The array of available query variables.
*
* @link https://codex.wordpress.org/Plugin_API/Filter_Reference/query_vars
*/
function register_query_vars( $vars ) {
$vars[] = 'license';
$vars[] = 'subject';
return $vars;
}
/** /**
* Customize excerpt. * Customize excerpt.
* *

72
partials/content-page-catalog.php
Unescape View File

@ -28,44 +28,48 @@ $subject_groups = ( defined( 'PB_PLUGIN_VERSION' ) ) ? \Pressbooks\Metadata\get_
<?php get_template_part( 'partials/page', 'header' ); ?> <?php get_template_part( 'partials/page', 'header' ); ?>
<section class="network-catalog"> <section class="network-catalog">
<div class="controls"> <form role="form" class="filter-sort" method="get">
<div class="search"> <input type="hidden" name="paged" value="<?php echo $current_page; ?>" />
<h2><a href="#search"><?php _e( 'Search by titles or keyword', 'pressbooks-aldine' ); ?> <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="#b01109" fill-rule="evenodd"/></svg></a></h2> <fieldset class="license-filters">
</div> <h2><?php _e( 'Filter by License', 'pressbooks-aldine' ); ?></h2>
<div class="filters"> <input type="radio" name="license" id="all-licenses" value="" <?php checked( $license, '' ); ?>>
<a href="#filter"><?php _e( 'Filter by', 'pressbooks-aldine' ); ?> <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="#b01109" fill-rule="evenodd"/></svg></a> <label for="all-licenses"><?php _e( 'All Licenses', 'pressbooks-aldine' ); ?> <svg class="checked"><use xlink:href="#checkmark" /></svg></label>
<div id="filter" class="filter-groups"> <?php foreach ( $licenses as $key => $value ) : ?>
<?php foreach ( $subject_groups as $key => $val ) : ?> <input type="radio" name="license" id="<?php echo $key; ?>" value="<?php echo $key; ?>" <?php checked( $license, $key ); ?>>
<div class="<?php echo $key; ?> subjects" id="<?php echo $key; ?>"> <label for="<?php echo $key; ?>"><?php echo $value; ?> <svg class="checked"><use xlink:href="#checkmark" /></svg></label>
<a href="#<?php echo $key; ?>"><?php echo $val['label']; ?> <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="#b01109" fill-rule="evenodd"/></svg></a> <?php endforeach; ?>
<ul class="filter-list"> </fieldset>
<fieldset class="subject-filters">
<h2><?php _e( 'Filter by Subject', 'pressbooks-aldine' ); ?></h2>
<input type="radio" name="subject" id="all-subjects" value="" <?php checked( $subject, '' ); ?>>
<label for="all-subjects"><?php _e( 'All Subjects', 'pressbooks-aldine' ); ?> <svg class="checked"><use xlink:href="#checkmark" /></svg></label>
<div class="subject-groups">
<?php foreach ( $subject_groups as $key => $val ) : ?>
<h3><?php echo $val['label']; ?></h3>
<?php foreach ( $val['children'] as $k => $v ) : <?php foreach ( $val['children'] as $k => $v ) :
if ( strlen( $k ) === 2 ) : ?> if ( strlen( $k ) === 2 ) : ?>
<li><a data-filter="{{ $k }}"><?php echo $v; ?><span class="close">&times;</span></a></li> <input type="radio" name="subject" id="<?php echo $k; ?>" value="<?php echo $k; ?>" <?php checked( $subject, $k ); ?>>
<label for="<?php echo $k; ?>"><?php echo $v; ?> <svg class="checked"><use xlink:href="#checkmark" /></svg></label>
<?php endif; ?> <?php endif; ?>
<?php endforeach; ?> <?php endforeach; ?>
</ul> <?php endforeach; ?>
</div> </div>
<?php endforeach; ?> </fieldset>
</div> <fieldset class="sorts">
<div class="licenses" id="licenses"> <h2><?php _e( 'Sort by', 'pressbooks-aldine' ); ?></h2>
<a href="#licenses"><?php _e( 'Licenses', 'pressbooks-aldine' ); ?><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="#b01109" fill-rule="evenodd"/></svg></a> <?php
<ul class="filter-list"> $sorts = [
<?php foreach ( $licenses as $key => $value ) : ?> 'title' => __( 'Title', 'pressbooks-aldine' ),
<li><a data-filter="<?php echo $key; ?>"><?php echo $value; ?><span class="close">&times;</span></a></li> 'subject' => __( 'Subject', 'pressbooks-aldine' ),
<?php endforeach; ?> 'latest' => __( 'Latest', 'pressbooks-aldine' ),
</ul> ];
</div> foreach ( $sorts as $key => $value ) { ?>
</div> <input type="radio" name="orderby" id="<?php echo $key ?>" value="<?php echo $key ?>" <?php checked( $orderby, $key ); ?>>
<div class="sort"> <label for="<?php echo $key ?>"><?php echo $value; ?> <svg class="checked"><use xlink:href="#checkmark" /></svg></label>
<a href="#sort"><?php _e( 'Sort by', 'pressbooks-aldine' ); ?> <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="#b01109" fill-rule="evenodd"/></svg></a> <?php } ?>
<ul id="sort" class="sorts"> </fieldset>
<li><a data-sort="title" href="<?php echo "/catalog/page/$current_page/?orderby=title"; ?>"><?php _e( 'Title', 'pressbooks-aldine' ); ?></a></li> <button type="submit"><?php _e( 'Submit', 'pressbooks-aldine' ); ?></button>
<li><a data-sort="subject" href="<?php echo "/catalog/page/$current_page/?orderby=subject"; ?>"><?php _e( 'Subject', 'pressbooks-aldine' ); ?></a></li> </form>
<li><a data-sort="latest" href="<?php echo "/catalog/page/$current_page/?orderby=latest"; ?>"><?php _e( 'Latest', 'pressbooks-aldine' ); ?></a></li>
</ul>
</div>
</div>
<ul class="books"> <ul class="books">
<?php foreach ( $catalog_data['books'] as $book ) : <?php foreach ( $catalog_data['books'] as $book ) :
include( locate_template( 'partials/book.php' ) ); include( locate_template( 'partials/book.php' ) );

Write Preview
Loading…
Cancel
Save