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

Fix catalog and customizer (close #2, close #48).

pull/55/head
Ned Zimmerman 7 years ago
parent
3d1344cb72
commit
b66d12b511
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
23 changed files with 564 additions and 29520 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      assets/scripts/customizer.js
  2. 155
      assets/scripts/routes/catalog.js
  3. 18
      assets/scripts/routes/common.js
  4. 19
      assets/scripts/routes/home.js
  5. 34
      assets/styles/components/_book.scss
  6. 6
      assets/styles/components/_forms.scss
  7. 208
      assets/styles/layouts/_catalog.scss
  8. 19
      assets/styles/layouts/_header.scss
  9. 516
      assets/styles/layouts/pages__deprecated/_catalog.scss
  10. 321
      assets/styles/layouts/pages__deprecated/_front-page.scss
  11. 8
      dist/mix-manifest.json
  12. 14673
      dist/scripts/aldine.js
  13. 10356
      dist/scripts/customizer.js
  14. 3114
      dist/styles/aldine.css
  15. 302
      dist/styles/editor.css
  16. 25
      inc/customizer/namespace.php
  17. 60
      inc/helpers/namespace.php
  18. 108
      lib/customizer-validate-wcag-color-contrast/customizer-validate-wcag-color-contrast.js
  19. 6
      package-lock.json
  20. 30
      package.json
  21. 20
      partials/book.php
  22. 48
      partials/content-page-catalog.php
  23. 6
      yarn.lock

6
assets/scripts/customizer.js
Unescape View File

@ -1,5 +1,9 @@
import $ from 'jquery';
wp.customize( 'blogname', value => {
value.bind( to => $( '.brand a' ).text( to ) );
value.bind( to => $( '.home .entry-title' ).text( to ) );
} );
wp.customize( 'blogdescription', value => {
value.bind( to => $( '.home .entry-description' ).text( to ) );
} );

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

@ -1,14 +1,14 @@
const jQueryBridget = require('jquery-bridget');
const Isotope = require('isotope-layout');
const jQueryBridget = require( 'jquery-bridget' );
const Isotope = require( 'isotope-layout' );
export default {
init() {
// JavaScript to be fired on the catalog page
(function() {
( function () {
// Get all the <h2> headings
const headings = document.querySelectorAll('fieldset h2');
const headings = document.querySelectorAll( 'fieldset h2' );
Array.prototype.forEach.call(headings, heading => {
Array.prototype.forEach.call( headings, heading => {
// Give each <h3> a toggle button child
heading.innerHTML = `
<button type="button" aria-expanded="false">
@ -25,58 +25,58 @@ export default {
elem.nextElementSibling &&
elem.nextElementSibling.tagName !== 'H2'
) {
elems.push(elem.nextElementSibling);
elems.push( elem.nextElementSibling );
elem = elem.nextElementSibling;
}
// Delete the old versions of the content nodes
elems.forEach(node => {
node.parentNode.removeChild(node);
});
elems.forEach( node => {
node.parentNode.removeChild( node );
} );
return elems;
};
// Assign the contents to be expanded/collapsed (array)
let contents = getContent(heading);
let contents = getContent( heading );
// Create a wrapper element for `contents` and hide it
let wrapper = document.createElement('div');
let wrapper = document.createElement( 'div' );
wrapper.hidden = true;
// Add each element of `contents` to `wrapper`
contents.forEach(node => {
wrapper.appendChild(node);
});
contents.forEach( node => {
wrapper.appendChild( node );
} );
// Add the wrapped content back into the DOM
// after the heading
heading.parentNode.insertBefore(wrapper, heading.nextElementSibling);
heading.parentNode.insertBefore( wrapper, heading.nextElementSibling );
// Assign the button
let btn = heading.querySelector('button');
let btn = heading.querySelector( 'button' );
btn.onclick = () => {
// Cast the state as a boolean
let expanded = btn.getAttribute('aria-expanded') === 'true' || false;
let expanded = btn.getAttribute( 'aria-expanded' ) === 'true' || false;
// Switch the state
btn.setAttribute('aria-expanded', !expanded);
btn.setAttribute( 'aria-expanded', ! expanded );
// Switch the content's visibility
wrapper.hidden = expanded;
};
});
})();
} );
} )();
(function() {
( function () {
// Get all the <h3> headings
const headings = document.querySelectorAll('fieldset h3');
const headings = document.querySelectorAll( 'fieldset h3' );
Array.prototype.forEach.call(headings, heading => {
Array.prototype.forEach.call( headings, heading => {
// Give each <h3> a toggle button child
heading.innerHTML = `
<button type="button" aria-expanded="false">
${heading.textContent}
${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>
`;
@ -89,53 +89,53 @@ export default {
elem.nextElementSibling &&
elem.nextElementSibling.tagName !== 'H3'
) {
elems.push(elem.nextElementSibling);
elems.push( elem.nextElementSibling );
elem = elem.nextElementSibling;
}
// Delete the old versions of the content nodes
elems.forEach(node => {
node.parentNode.removeChild(node);
});
elems.forEach( node => {
node.parentNode.removeChild( node );
} );
return elems;
};
// Assign the contents to be expanded/collapsed (array)
let contents = getContent(heading);
let contents = getContent( heading );
// Create a wrapper element for `contents` and hide it
let wrapper = document.createElement('div');
let wrapper = document.createElement( 'div' );
wrapper.hidden = true;
// Add each element of `contents` to `wrapper`
contents.forEach(node => {
wrapper.appendChild(node);
});
contents.forEach( node => {
wrapper.appendChild( node );
} );
// Add the wrapped content back into the DOM
// after the heading
heading.parentNode.insertBefore(wrapper, heading.nextElementSibling);
heading.parentNode.insertBefore( wrapper, heading.nextElementSibling );
// Assign the button
let btn = heading.querySelector('button');
let btn = heading.querySelector( 'button' );
btn.onclick = () => {
// Cast the state as a boolean
let expanded = btn.getAttribute('aria-expanded') === 'true' || false;
let expanded = btn.getAttribute( 'aria-expanded' ) === 'true' || false;
// Switch the state
btn.setAttribute('aria-expanded', !expanded);
btn.setAttribute( 'aria-expanded', ! expanded );
// Switch the content's visibility
wrapper.hidden = expanded;
};
});
})();
} );
} )();
jQuery($ => {
jQueryBridget('isotope', Isotope, $);
let $grid = $('.books');
$grid.isotope({
jQuery( $ => {
jQueryBridget( 'isotope', Isotope, $ );
let $grid = $( '.books' );
$grid.isotope( {
itemSelector: '.book',
getSortData: {
title: '.book__title a',
@ -147,50 +147,65 @@ export default {
subject: false,
latest: false,
},
});
let licenses = document.querySelector('.license-filters');
let subjects = document.querySelector('.subject-filters');
let sorts = document.querySelector('.sorts');
licenses.addEventListener('click', function(event) {
if (event.target.type !== 'radio') {
} );
let licenses = document.querySelector( '.license-filters' );
let subjects = document.querySelector( '.subject-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;
}
let license = '';
let subject = '';
if (subjects.querySelector('input[type="radio"]:checked').value) {
let filterValue = '*';
if ( subjects.querySelector( 'input[type="radio"]:checked' ).value ) {
subject = `[data-subject="${
subjects.querySelector('input[type="radio"]:checked').value
subjects.querySelector( 'input[type="radio"]:checked' ).value
}"]`;
}
if ( event.target.value ) {
license = `[data-license="${event.target.value}"]`;
alert(`[data-license="${event.target.value}"]${subject}`);
$grid.isotope({
filter: `[data-license="${event.target.value}"]${subject}`,
});
});
subjects.addEventListener('click', function(event) {
if (event.target.type !== 'radio') {
}
if ( license || subject ) {
filterValue = `${license}${subject}`;
}
$grid.isotope( { filter: filterValue } );
} );
subjects.addEventListener( 'click', function ( event ) {
if ( event.target.type !== 'radio' ) {
return;
}
let license = '';
let subject = '';
if (licenses.querySelector('input[type="radio"]:checked').value) {
let filterValue = '*';
if ( licenses.querySelector( 'input[type="radio"]:checked' ).value ) {
license = `[data-license="${
licenses.querySelector('input[type="radio"]:checked').value
licenses.querySelector( 'input[type="radio"]:checked' ).value
}"]`;
}
if ( event.target.value ) {
subject = `[data-subject="${event.target.value}"]`;
alert(`${license}[data-subject="${event.target.value}"]`);
$grid.isotope({
filter: `${license}${subject}`,
});
});
sorts.addEventListener('click', function(event) {
if (event.target.type !== 'radio') {
}
if ( license || subject ) {
filterValue = `${license}${subject}`;
}
$grid.isotope( { filter: filterValue } );
} );
clearFilters.addEventListener( 'click', function () {
let allLicenses = document.getElementById( 'all-licenses' );
let allSubjects = document.getElementById( 'all-subjects' );
allLicenses.checked = true;
allSubjects.checked = true;
$grid.isotope( { filter: '*' } );
} );
sorts.addEventListener( 'click', function ( event ) {
if ( event.target.type !== 'radio' ) {
return;
}
$grid.isotope({ sortBy: event.target.value });
});
$grid.isotope( { sortBy: event.target.value } );
} );
// $('.filters > a').click(e => {
// e.preventDefault();
// $('.filters').toggleClass('is-active');
@ -279,7 +294,7 @@ export default {
// $(e.currentTarget).addClass('is-active');
// $grid.isotope({ sortBy: sortBy });
// });
});
} );
},
finalize() {},
};

18
assets/scripts/routes/common.js
Unescape View File

@ -71,6 +71,24 @@ export default {
$( '.header__nav' ).toggleClass( 'header__nav--active' );
} );
} );
// Props to Dave Rupert: https://daverupert.com/2017/11/happier-html5-forms/
const inputs = document.querySelectorAll( 'input, textarea' );
inputs.forEach( input => {
input.addEventListener(
'invalid',
event => {
input.classList.add( 'error' );
},
false
);
input.addEventListener( 'focus', function () {
input.classList.remove( 'error' );
} );
input.addEventListener( 'blur', function () {
input.checkValidity();
} );
} );
},
finalize() {
// JavaScript to be fired on all pages, after page specific JS is fired

19
assets/scripts/routes/home.js
Unescape View File

@ -1,25 +1,6 @@
export default {
init() {
// JavaScript to be fired on the home page
// Props to Dave Rupert: https://daverupert.com/2017/11/happier-html5-forms/
const inputs = document.querySelectorAll( 'input, textarea' );
inputs.forEach( input => {
input.addEventListener(
'invalid',
event => {
input.classList.add( 'error' );
},
false
);
input.addEventListener( 'focus', function () {
input.classList.remove( 'error' );
} );
input.addEventListener( 'blur', function () {
input.checkValidity();
} );
} );
},
finalize() {},
};

34
assets/styles/components/_book.scss
Unescape View File

@ -1,12 +1,13 @@
.book {
display: flex;
flex-direction: column;
justify-content: flex-end;
justify-content: space-between;
width: 100%;
max-width: 22.9375rem;
height: 24.125rem;
margin: 0 0 2rem;
padding: 1.5rem 1.85rem 2.1875rem;
padding: 1.5rem 1rem 2rem;
@media #{$breakpoint-not-small} { padding: 1.5rem 1.85rem 2.1875rem; }
border: solid 2px var(--accent, $brand-accent);
background: var(--accent, $brand-accent);
@ -18,32 +19,37 @@
text-align: center;
}
&__subject {
height: 4.625rem;
&__title {
margin: 0;
font-size: rem(24);
text-align: center;
font-size: 1.25rem;
@media #{$breakpoint-not-small} { font-size: 1.75rem; }
font-weight: 500;
line-height: 1.2;
text-align: left;
}
&__title {
height: 13rem;
&__subject {
margin: 0;
font-size: rem(30);
font-weight: 500;
line-height: (40/30);
font-size: 0.8rem;
@media #{$breakpoint-not-small} { font-size: 1.25rem; }
text-align: left;
}
&__read-more {
margin: 0;
font-size: rem(18);
font-size: 1rem;
@media #{$breakpoint-not-small} { font-size: 1.125rem; }
text-align: left;
a {
svg {
width: rem(18);
height: rem(18);
width: 1rem;
height: 1rem;
@media #{$breakpoint-not-small} {
width: 1.125rem;
height: 1.125rem;
margin-left: 0.5rem;
}
vertical-align: middle;
}
}

6
assets/styles/components/_forms.scss
Unescape View File

@ -17,8 +17,9 @@ textarea {
border-right: 0;
border-left: 0;
border-bottom: solid 2px var(--black, #000);
padding: 0 0 1em;
font-size: 0.875rem;
border-radius: 0;
padding: 0 0 1.5em;
font-size: 1rem;
font-weight: 600;
font-family: $font-family-sans-serif;
background: transparent;
@ -73,7 +74,6 @@ input[type="submit"] {
left: 0;
top: 0;
transition: 0.2s;
background: #f6f6f6;
line-height: 1;
}

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

@ -32,26 +32,26 @@ fieldset {
&:hover,
&:focus {
color: var(--brand);
color: var(--primary);
background: var(--bg-body);
}
&:active {
box-shadow: none;
}
}
}
&[aria-expanded="true"] {
color: var(--brand);
[aria-expanded="true"] {
color: var(--primary);
svg {
transform: rotate(180deg);
}
}
}
}
h2 {
button[aria-expanded="true"] {
[aria-expanded="true"] {
border-bottom: solid 2px var(--accent);
background: #fafdff;
}
@ -67,6 +67,11 @@ fieldset {
clip: rect(1px, 1px, 1px, 1px);
}
.label {
display: inline-block;
width: calc(100% - 2rem);
}
[type="radio"] + label {
cursor: pointer;
display: block;
@ -86,7 +91,7 @@ fieldset {
}
[type="radio"]:checked + label {
color: var(--brand);
color: var(--primary);
font-weight: bold;
svg {
@ -104,3 +109,192 @@ fieldset {
margin-bottom: 1rem;
}
}
.js .filter-sort [type="submit"] {
display: none;
}
.clear-filters {
width: calc(100% - 2rem);
margin: 0 1rem;
}
.catalog {
.books {
width: calc(100% - 1rem);
padding: 0;
margin: 2rem 0 1rem 1rem;
}
.book {
height: 14.375rem;
width: calc(50% - 1rem);
margin: 0 1rem 1rem 0;
}
}
.catalog-navigation {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
margin-top: rem(40);
margin-bottom: 2rem;
align-items: baseline;
font-family: $font-family-sans-serif;
a {
color: #000;
&:hover,
&:focus {
color: var(--primary);
}
}
.previous,
.next {
display: block;
margin: 0 rem(26);
font-family: $font-family-sans-serif;
font-size: rem(16);
svg {
width: 1.2rem;
height: 1rem;
margin: 0.25rem rem(6) 0;
path {
fill: var(--primary);
}
}
}
.pages {
display: inline-block;
border-bottom: solid 2px #ececec;
a,
span {
display: inline-block;
width: rem(41);
padding: rem(8) 0;
font-size: rem(24);
text-align: center;
}
.current {
border-bottom: solid rem(6) var(--primary);
}
}
}
@media #{$breakpoint-tablet-and-up} {
.filter-sort {
width: calc(100% - 1rem);
height: 7rem;
margin: 2rem 0 1rem 1rem;
}
fieldset {
width: calc(100% / 3 - 1rem);
margin: 0 1rem 1rem 0;
float: left;
border-top: 0;
position: relative;
&:last-of-type {
border-bottom: 0;
}
}
fieldset h2 button {
border-bottom: solid 2px var(--accent);
}
fieldset div:not(hidden) {
position: absolute;
width: 100%;
background: var(--body-bg);
z-index: 99;
border-right: rem(1) solid #ececec;
border-left: rem(1) solid #ececec;
border-bottom: rem(1) solid #ececec;
.subject-groups {
width: calc(100% + 0.125rem);
margin-left: -0.06125rem;
div {
position: relative;
width: calc(100% + 0.125rem);
margin-left: -0.06125rem;
border-bottom: 0;
}
}
}
.clear-filters {
width: calc(100% / 3 - 1rem);
margin-left: 0;
}
.catalog .book {
height: 16.25rem;
width: calc(100% / 3 - 1rem);
margin: 0 1rem 1rem 0;
}
}
@media #{$breakpoint-large} {
.catalog #content {
width: 100%;
max-width: rem(1440);
background: transparent;
}
.catalog .book {
max-width: calc(100% / 3 - 1rem);
}
}
@media #{$breakpoint-extra-large} {
.catalog #content {
width: 100%;
max-width: rem(1650);
}
.filter-sort {
width: calc(25% - 1rem);
height: auto;
float: left;
margin-left: 0;
}
fieldset {
width: 100%;
display: block;
margin-bottom: 0;
}
fieldset div:not(hidden) {
position: relative;
border: 0;
}
.clear-filters {
width: 100%;
margin-left: 0;
}
.catalog .books {
width: 75%;
float: right;
margin-left: 0;
}
.catalog-navigation {
width: 75%;
float: right;
padding-right: 1rem;
}
}

19
assets/styles/layouts/_header.scss
Unescape View File

@ -63,10 +63,27 @@
}
}
.page.catalog .header {
.page.catalog {
.header {
height: 381px;
}
.page-header {
display: flex;
flex-direction: column;
justify-content: center;
height: rem(380);
margin-top: rem(-380);
}
@media #{$breakpoint-large} {
.header {
height: 450px;
}
.page-header {
height: 381px;
margin-top: -381px;
}
}
}

516
assets/styles/layouts/pages__deprecated/_catalog.scss
Unescape View File

@ -1,516 +0,0 @@
// stylelint-disable no-descending-specificity
.catalog {
.banner .container {
height: rem(381);
}
.banner .primary-navigation {
height: rem(381);
}
.page-header {
display: flex;
flex-direction: column;
justify-content: center;
height: rem(381);
margin-top: rem(-381);
h1 {
color: var(--primary, $brand-primary);
margin-bottom: 2rem;
font-size: rem(36);
line-height: 0.55556;
letter-spacing: 0.1125rem;
}
}
.network-catalog {
width: 100%;
padding-bottom: rem(152);
}
.controls {
width: 100%;
}
.book {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: percent(165, 358);
margin: 0 percent(9, 358) rem(8) 0;
height: rem(230);
float: left;
padding: 1.5rem rem(8) rem(26);
border: solid 2px var(--accent, $brand-accent);
background: var(--accent, $brand-accent);
p {
margin: 0;
}
a {
font-family: $font-family-sans-serif;
color: var(--accent-fg, $white);
text-decoration: none;
}
&__subject {
height: rem(44);
font-size: rem(14);
}
&__title {
height: rem(118);
font-size: rem(16);
font-weight: 600;
line-height: (20/16);
}
&__read-more {
font-size: rem(14);
}
}
.catalog-navigation {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
margin-top: rem(83);
align-items: baseline;
font-family: $font-family-sans-serif;
a {
color: $black;
&:hover,
&:focus {
color: var(--primary, $brand-primary);
}
}
.previous,
.next {
display: block;
margin: 0 rem(26);
font-family: $font-family-sans-serif;
font-size: rem(16);
svg {
width: rem(16.2);
height: rem(12.5);
margin: 0 rem(6);
path {
fill: var(--primary, $brand-primary);
}
}
}
.pages {
display: inline-block;
border-bottom: solid 2px #ececec;
a,
span {
display: inline-block;
width: rem(41);
padding: rem(8) 0;
font-size: rem(24);
text-align: center;
}
.current {
border-bottom: solid rem(6) var(--primary, $brand-primary);
}
}
}
.filters,
.search,
.sort {
width: 100%;
border-top: solid 2px var(--accent, $brand-accent);
background: $white;
a {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
padding: rem(16) rem(19);
font-size: rem(16);
font-weight: 600;
font-family: $font-family-sans-serif;
letter-spacing: rem(0.67);
color: $black;
&:hover,
&:focus {
background: #fafdff;
color: var(--primary, $brand-primary);
}
}
.has-active-child > a {
color: var(--primary, $brand-primary);
}
ul {
margin: 0;
padding: 0;
list-style: none;
li {
font-size: rem(16);
font-family: $font-family-sans-serif;
letter-spacing: rem(0.67);
a {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-weight: normal;
cursor: pointer;
.close {
display: inline-block;
float: right;
margin-top: rem(-2);
font-size: rem(20);
opacity: 0;
transition: opacity 0.5s;
}
}
a.is-active {
font-weight: 600;
color: var(--primary, $brand-primary);
.close {
opacity: 1;
}
}
}
}
}
.arrow {
path {
fill: var(--primary, $brand-primary);
}
}
.is-active > a .arrow {
transform: rotate(180deg);
}
.filters {
.filter-groups {
display: none;
border-top: solid 2px var(--accent, $brand-accent);
h3 {
margin: 0;
border-top: solid 1px $light-gray;
}
h3:first-of-type {
border-top: none;
}
}
.licenses {
display: none;
}
.filter-list {
display: none;
}
&.is-active {
.filter-groups,
.licenses {
display: block;
}
}
.is-active ul {
display: block;
}
}
.search {
display: none;
}
.sort {
border-bottom: solid 2px var(--accent, $brand-accent);
.sorts {
display: none;
border-top: solid 2px var(--accent, $brand-accent);
}
&.is-active {
.sorts {
display: block;
}
}
}
.books {
align-self: flex-start;
width: percent(358, 360);
margin: rem(32) 0 0 percent(10.5, 360);
padding: 0;
}
}
@media (min-width: 768px) {
.catalog {
.controls {
width: percent(706, 768);
height: rem(52);
margin: rem(60) percent(29, 768) rem(20) percent(33, 768);
.filters,
.search,
.sort {
position: relative;
border-top: 0;
border-bottom: solid 2px var(--accent, $brand-accent);
z-index: 99;
}
.filters {
float: left;
width: rem(360);
.filter-groups {
border-right: solid 1px #ececec;
border-left: solid 1px #ececec;
}
}
.sort {
float: right;
width: rem(160);
.sorts {
border-right: solid 1px #ececec;
border-bottom: solid 1px #ececec;
border-left: solid 1px #ececec;
}
}
}
.books {
align-self: flex-start;
width: percent(735, 768);
margin-bottom: rem(15);
margin-left: percent(24, 768);
}
.book {
width: percent(230, 735);
height: rem(260);
margin: 0 percent(15, 735) 2rem 0;
padding: 0 rem(14) rem(21.35);
&__subject {
height: rem(45.85);
font-size: rem(18);
}
&__title {
height: rem(147.65);
font-size: rem(22);
font-weight: 600;
line-height: (40/30);
}
&__read-more {
font-size: rem(16);
}
}
}
}
@media (min-width: $medium) {
.catalog {
.page-header {
h1 {
font-size: rem(72);
}
}
}
}
@media #{$breakpoint-large} {
.catalog {
.banner {
.container {
height: rem(450);
}
.primary-navigation {
height: 40px;
}
.brand {
text-align: center;
img {
max-height: rem(60);
}
}
}
.page-header {
height: rem(360);
margin-top: rem(-360);
}
}
}
@media (min-width: $extra-large) {
.catalog {
.main {
width: rem(1535);
margin: 0 auto;
}
.network-catalog {
margin-top: rem(205);
}
.controls {
width: 100%;
margin: 0 0 rem(64);
.filters {
width: rem(286);
border-bottom: 0;
> a {
border-bottom: solid 3px var(--accent, $brand-accent);
&:hover,
&:focus {
color: $black;
background: $white;
cursor: default;
}
.arrow {
display: none;
}
}
.filter-groups {
display: block;
border-right: 0;
border-top: 0;
border-left: 0;
.subjects {
border-bottom: solid 1px #ececec;
}
}
.licenses {
display: block;
margin-top: rem(60);
> a {
background: var(--primary, $brand-primary);
color: var(--primary-fg, $white);
.arrow {
path {
fill: var(--primary-fg, $white);
}
}
}
}
ul li {
a {
padding-top: 0;
padding-bottom: 0;
line-height: 2;
}
&:last-child a {
padding-bottom: 1rem;
}
}
}
.sort {
.sorts {
border-top: solid 3px var(--accent, $brand-accent);
border-right: 0;
border-left: 0;
}
}
}
.books {
width: percent(1221.5, 1535);
margin: 0 0 0 percent(316, 1535);
}
.book {
width: percent(367, 1221.5);
height: rem(386);
margin: 0 0 2rem percent(39.5, 1221.5);
padding: 1.5rem 1.85rem 2.1875rem;
&__subject {
height: 4.625rem;
font-size: rem(24);
}
&__title {
height: 13rem;
font-size: rem(30);
font-weight: 500;
line-height: (40/30);
}
&__read-more {
font-size: rem(18);
}
}
}
}
.catalog.no-js {
.filters {
.arrow {
display: none;
}
.filter-groups,
.licenses,
.filter-list {
display: block;
}
}
.sort {
.arrow {
display: none;
}
.sorts {
display: block;
}
}
}

321
assets/styles/layouts/pages__deprecated/_front-page.scss
Unescape View File

@ -1,321 +0,0 @@
.home {
.block {
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 0.78125rem;
display: flex;
height: rem(445);
background-color: $white;
margin-left: auto;
margin-right: auto;
text-align: center;
p {
font-size: rem(18);
line-height: (32/16);
}
}
.latest-books {
height: auto;
padding: 0 0 rem(154);
h3 {
text-align: center;
text-transform: uppercase;
margin-top: 4.375rem;
margin-bottom: 2.8125rem;
}
.track {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
max-width: 22.9375rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 2rem;
padding: 0 0.46875rem;
position: relative;
}
.books {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
order: 0;
padding: 0;
width: 100%;
margin-bottom: rem(34);
}
.previous,
.next {
display: block;
width: auto;
height: auto;
svg {
path {
fill: var(--primary, $brand);
}
}
}
.previous {
order: 1;
margin-right: auto;
}
.next {
order: 2;
margin-left: auto;
}
.catalog-link {
text-align: center;
}
}
.blocks.blocks-2,
.blocks.blocks-3 {
.widget_text:nth-child(2) {
margin-right: 0.5rem;
margin-left: 0.5rem;
border: solid 2px var(--primary, $brand-primary);
box-shadow: unset;
}
}
.blocks.blocks-4 {
.widget_text:nth-child(2) {
color: var(--accent-fg, $white);
background: var(--accent, $brand-accent);
h3 {
color: var(--accent-fg, $white);
&::before {
background: var(--accent-fg, $white);
}
}
.button {
color: var(--accent-fg, $white);
border-color: var(--accent-fg, $white);
background: transparent;
&:hover,
&:focus {
color: var(--accent, $brand-accent);
background: var(--accent-fg, $white);
}
}
}
.widget_text:nth-child(3) {
margin-top: 2rem;
margin-right: 0.5rem;
margin-left: 0.5rem;
border: solid 2px var(--primary, $brand-primary);
box-shadow: unset;
&::after {
top: rem(1880);
}
}
}
.blocks.blocks-2 .widget_text:nth-child(2),
.blocks.blocks-3 .widget_text:nth-child(2),
.blocks.blocks-4 .widget_text:nth-child(3) {
background: transparent;
margin-bottom: rem(400);
&::after {
z-index: -1;
content: "";
display: block;
width: 100vw;
height: rem(444);
background-image: url('../images/banner.jpg');
background-position: center;
background-size: cover;
position: absolute;
top: rem(1410);
left: 0;
}
}
}
@media (min-width: $medium) {
.home {
.wrap {
margin-top: rem(-366);
}
.block {
width: rem(775);
height: rem(494);
margin-bottom: rem(119);
padding: 0 90px;
box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);
&:last-child {
margin-bottom: 4.0625rem;
}
p {
font-size: rem(18);
line-height: (32/18);
}
}
.blocks.blocks-2 .widget_text:nth-child(2),
.blocks.blocks-3 .widget_text:nth-child(2),
.blocks.blocks-4 .widget_text:nth-child(3) {
margin-left: auto;
margin-right: auto;
margin-bottom: rem(119);
&::after {
height: rem(600);
top: rem(1547);
}
}
.blocks.blocks-4 .widget_text:nth-child(3) {
&::after {
top: rem(2177);
}
}
.latest-books {
width: 100%;
margin-left: auto;
margin-right: auto;
h3 {
margin-bottom: 4.375rem;
}
.track {
display: flex;
flex-flow: row nowrap;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
.next,
.previous {
position: absolute;
top: rem(165.5);
svg {
width: 2.4375rem;
height: 1.875rem;
}
}
.next {
margin-right: 0.9375rem;
right: 0;
}
.previous {
order: 0;
margin-left: 0.9375rem;
left: 0;
}
.books {
width: auto;
min-width: 50rem;
flex-direction: row;
order: 1;
justify-content: space-between;
margin-bottom: 2rem;
}
.book {
width: 30%;
max-width: 19.54rem;
&:last-child {
margin-bottom: 2rem;
}
}
}
}
}
@media (min-width: $large) {
.home {
.block {
width: rem(1115);
}
.latest-books {
width: 100%;
margin-bottom: 0;
.track {
width: 100%;
margin: 0 auto;
max-width: 87rem;
}
.books {
width: 100%;
max-width: 75rem;
}
.book {
min-width: 19.54rem;
max-width: 22.9375rem;
}
}
}
}
@media (min-width: $extra-large) {
.home {
.block {
width: rem(1115);
box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);
}
.blocks.blocks-4 {
display: flex;
flex-flow: row wrap;
width: 1615px;
.widget_text {
width: 1115px;
margin-right: auto;
margin-left: auto;
}
.widget_text:nth-child(1),
.widget_text:nth-child(2) {
width: 775px;
}
.widget_text:nth-child(1) {
margin-right: 65px;
}
}
.blocks.blocks-4 .widget_text:nth-child(3) {
&::after {
top: rem(1596);
}
}
}
}

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

@ -1,6 +1,6 @@
{
"/scripts/aldine.js": "/scripts/aldine.js",
"/styles/aldine.css": "/styles/aldine.css",
"/styles/editor.css": "/styles/editor.css",
"/scripts/customizer.js": "/scripts/customizer.js"
"/scripts/aldine.js": "/scripts/aldine.js?id=a166171314fdc227903c",
"/styles/aldine.css": "/styles/aldine.css?id=728f9c04264f59ea9db3",
"/styles/editor.css": "/styles/editor.css?id=10e3f4b144847aa8d75e",
"/scripts/customizer.js": "/scripts/customizer.js?id=decf119933e3b2d4b210"
}

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

25
inc/customizer/namespace.php
Unescape View File

@ -169,17 +169,18 @@ function customize_preview_js() {
$assets->setSrcDirectory( 'assets' )->setDistDirectory( 'dist' );
wp_enqueue_script( 'aldine/customizer', $assets->getPath( 'scripts/customizer.js' ), [ 'customize-preview' ], false, null );
wp_enqueue_script( 'wcag-validate-customizer-color-contrast', get_template_directory_uri() . '/lib/customizer-validate-wcag-color-contrast/customizer-validate-wcag-color-contrast.js', [ 'customize-controls' ] );
// TODO @codingStandardsIgnoreStart
// wp_enqueue_script( 'wcag-validate-customizer-color-contrast', get_template_directory_uri() . '/lib/customizer-validate-wcag-color-contrast/customizer-validate-wcag-color-contrast.js', [ 'customize-controls' ] );
$exports = [
'validate_color_contrast' => [
'pb_network_color_primary_fg' => [ 'pb_network_color_primary' ],
'pb_network_color_accent_fg' => [ 'pb_network_color_accent' ],
],
];
wp_scripts()->add_data(
'wcag-validate-customizer-color-contrast',
'data',
sprintf( 'var _validateWCAGColorContrastExports = %s;', wp_json_encode( $exports ) )
);
// $exports = [
// 'validate_color_contrast' => [
// 'pb_network_color_primary_fg' => [ 'pb_network_color_primary' ],
// 'pb_network_color_accent_fg' => [ 'pb_network_color_accent' ],
// ],
// ];
// wp_scripts()->add_data(
// 'wcag-validate-customizer-color-contrast',
// 'data',
// sprintf( 'var _validateWCAGColorContrastExports = %s;', wp_json_encode( $exports ) )
// ); // @codingStandardsIgnoreEnd
}

60
inc/helpers/namespace.php
Unescape View File

@ -7,6 +7,8 @@
namespace Aldine\Helpers;
use \Pressbooks\Licensing;
/**
* Get catalog data.
*
@ -64,6 +66,43 @@ function get_catalog_licenses() {
return [];
}
/**
* Get licenses currently in use.
*
* @param array $catalog_data
* @return array
*/
function get_available_licenses( $catalog_data ) {
$licenses = [];
$licensing = new \Pressbooks\Licensing();
foreach ( $catalog_data['books'] as $book ) {
$license = $licensing->getLicenseFromUrl( $book['metadata']['license']['url'] );
if ( ! in_array( $license, $licenses, true ) ) {
$licenses[] = $license;
}
}
return $licenses;
}
/**
* Get subjects currently in use.
*
* @param array $catalog_data
* @return array
*/
function get_available_subjects( $catalog_data ) {
$subjects = [];
foreach ( $catalog_data['books'] as $book ) {
if ( ! empty( $book['subject'] ) ) {
$subjects[ substr( $book['subject'], 0, 1 ) ][] = substr( $book['subject'], 0, 2 );
}
}
return $subjects;
}
/**
* Return the default (non-page) menu items.
*
@ -200,6 +239,12 @@ function handle_contact_form_submission() {
return;
}
/**
* Does a page have page sections?
*
* @param int $post_id The page.
* @return bool
*/
function has_sections( $post_id ) {
$post_content = get_post_field( 'post_content', $post_id );
if ( ! empty( $post_content ) ) {
@ -212,3 +257,18 @@ function has_sections( $post_id ) {
return false;
}
/**
* Maybe truncate a string to a sensible length.
*
* @param string $string The string.
* @param int $length Max length in characters.
*
* @return string
*/
function maybe_truncate_string( $string, $length = 40 ) {
if ( strlen( $string ) > $length ) {
return substr( $string, 0, strpos( wordwrap( $string, $length ), "\n" ) ) . '&hellip;';
}
return $string;
}

108
lib/customizer-validate-wcag-color-contrast/customizer-validate-wcag-color-contrast.js
Unescape View File

@ -1,9 +1,7 @@
/* global wp, _validateWCAGColorContrastExports */
/* exported validateWCAGColorContrast */
var validateWCAGColorContrast = ( function( $, api, exports ) {
var self = {
validate_color_contrast: []
};
let validateWCAGColorContrast = ( function ( $, api, exports ) {
let self = { validate_color_contrast: [] };
if ( exports ) {
$.extend( self, exports );
}
@ -14,8 +12,8 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* @param {wp.customize.Value} setting.validationMessage - Validation message.
* @return {boolean} Whether validation was added.
*/
self.addWCAGColorContrastValidation = function( setting ) {
var initialValidate;
self.addWCAGColorContrastValidation = function ( setting ) {
let initialValidate;
if ( ! self.isColorControl( setting ) ) {
return false;
@ -28,34 +26,34 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* @param {mixed} value - New value being assigned to the setting.
* @returns {*}
*/
setting.validate = function( value ) {
var setting = this, title, validationError;
var current_color = value;
var current_id = this.id;
setting.validate = function ( value ) {
let setting = this, title, validationError;
let current_color = value;
let current_id = this.id;
var all_color_controls = _.union( _.flatten( _.values( self.validate_color_contrast ) ) );
let all_color_controls = _.union( _.flatten( _.values( self.validate_color_contrast ) ) );
// remove other (old) notifications
_.each ( _.without ( all_color_controls , current_id ), function( other_color_control_id ) {
var other_control = api.control.instance( other_color_control_id );
notice = other_control.container.find('.notice');
_.each( _.without( all_color_controls, current_id ), function ( other_color_control_id ) {
let other_control = api.control.instance( other_color_control_id );
notice = other_control.container.find( '.notice' );
notice.hide();
} );
// find other color controls and check contrast with current color control
var other_color_controls = self.validate_color_contrast[ current_id ];
let other_color_controls = self.validate_color_contrast[ current_id ];
_.each ( other_color_controls, function( other_color_control_id ) {
var other_control = api.control.instance( other_color_control_id);
var other_color = other_control.container.find('.color-picker-hex').val();
var name = $( '#customize-control-' + other_color_control_id + ' .customize-control-title').text();
var contrast = self.hex( current_color, other_color );
var score = self.score( contrast );
_.each( other_color_controls, function ( other_color_control_id ) {
let other_control = api.control.instance( other_color_control_id );
let other_color = other_control.container.find( '.color-picker-hex' ).val();
let name = $( '#customize-control-' + other_color_control_id + ' .customize-control-title' ).text();
let contrast = self.hex( current_color, other_color );
let score = self.score( contrast );
// contrast >= 7 ? "AAA" : contrast >= 4.5 ? "AA" : ""
if ( contrast < 4.5 ) {
setting.notifications.remove( other_color_control_id );
validationWarning = new api.Notification( other_color_control_id, { message: self.sprintf( 'WCAG conflict with "%s"<br/>contrast: %s' ,name, contrast), type: 'warning' } );
validationWarning = new api.Notification( other_color_control_id, { message: self.sprintf( 'WCAG conflict with "%s"<br/>contrast: %s', name, contrast ), type: 'warning' } );
setting.notifications.add( validationWarning.code, validationWarning );
// console.log( color_control_id + ' ' + color + ' ' + contrast + ' ' + score );
} else {
@ -75,19 +73,18 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* @param {wp.customize.Setting} setting - Setting.
* @returns {boolean}
*/
self.isColorControl = function( setting ) {
return _.findKey( self.validate_color_contrast, function( key, value ) {
self.isColorControl = function ( setting ) {
return _.findKey( self.validate_color_contrast, function ( key, value ) {
return value == setting.id;
} );
};
api.bind( 'add', function( setting ) {
api.bind( 'add', function ( setting ) {
self.addWCAGColorContrastValidation( setting );
} );
self.sprintf = function( format ) {
for( var i=1; i < arguments.length; i++ ) {
self.sprintf = function ( format ) {
for ( let i=1; i < arguments.length; i++ ) {
format = format.replace( /%s/, arguments[i] );
}
return format;
@ -98,20 +95,20 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
*/
// from https://github.com/sindresorhus/hex-rgb
self.hexRgb = function (hex) {
if (typeof hex !== 'string') {
throw new TypeError('Expected a string');
self.hexRgb = function ( hex ) {
if ( typeof hex !== 'string' ) {
throw new TypeError( 'Expected a string' );
}
hex = hex.replace(/^#/, '');
hex = hex.replace( /^#/, '' );
if (hex.length === 3) {
if ( hex.length === 3 ) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
var num = parseInt(hex, 16);
let num = parseInt( hex, 16 );
return [num >> 16, num >> 8 & 255, num & 255];
return [ num >> 16, num >> 8 & 255, num & 255 ];
};
// from https://github.com/tmcw/relative-luminance
@ -123,14 +120,14 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
// https://en.wikipedia.org/wiki/Rec._709#Luma_coefficients
// red, green, and blue coefficients
var rc = 0.2126,
let rc = 0.2126,
gc = 0.7152,
bc = 0.0722,
// low-gamma adjust coefficient
lowc = 1 / 12.92;
self.adjustGamma = function( g ) {
return Math.pow((g + 0.055) / 1.055, 2.4);
self.adjustGamma = function ( g ) {
return Math.pow( ( g + 0.055 ) / 1.055, 2.4 );
};
/**
@ -142,19 +139,18 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* var luminance = require('relative-luminance');
* var black_lum = luminance([0, 0, 0]); // 0
*/
self.relativeLuminance = function (rgb) {
var rsrgb = rgb[0] / 255;
var gsrgb = rgb[1] / 255;
var bsrgb = rgb[2] / 255;
self.relativeLuminance = function ( rgb ) {
let rsrgb = rgb[0] / 255;
let gsrgb = rgb[1] / 255;
let bsrgb = rgb[2] / 255;
var r = rsrgb <= 0.03928 ? rsrgb * lowc : self.adjustGamma(rsrgb),
g = gsrgb <= 0.03928 ? gsrgb * lowc : self.adjustGamma(gsrgb),
b = bsrgb <= 0.03928 ? bsrgb * lowc : self.adjustGamma(bsrgb);
let r = rsrgb <= 0.03928 ? rsrgb * lowc : self.adjustGamma( rsrgb ),
g = gsrgb <= 0.03928 ? gsrgb * lowc : self.adjustGamma( gsrgb ),
b = bsrgb <= 0.03928 ? bsrgb * lowc : self.adjustGamma( bsrgb );
return r * rc + g * gc + b * bc;
};
// from https://github.com/tmcw/wcag-contrast
/**
* Get the contrast ratio between two relative luminance values
@ -164,10 +160,10 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* @example
* luminance(1, 1); // = 1
*/
self.luminance = function(a, b) {
var l1 = Math.max(a, b);
var l2 = Math.min(a, b);
return (l1 + 0.05) / (l2 + 0.05);
self.luminance = function ( a, b ) {
let l1 = Math.max( a, b );
let l2 = Math.min( a, b );
return ( l1 + 0.05 ) / ( l2 + 0.05 );
};
/**
@ -178,8 +174,8 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* @example
* rgb([0, 0, 0], [255, 255, 255]); // = 21
*/
self.rgb = function(a, b) {
return self.luminance(self.relativeLuminance(a), self.relativeLuminance(b));
self.rgb = function ( a, b ) {
return self.luminance( self.relativeLuminance( a ), self.relativeLuminance( b ) );
};
/**
@ -190,8 +186,8 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* @example
* hex('#000', '#fff'); // = 21
*/
self.hex = function(a, b) {
return self.rgb(self.hexRgb(a), self.hexRgb(b));
self.hex = function ( a, b ) {
return self.rgb( self.hexRgb( a ), self.hexRgb( b ) );
};
/**
@ -201,8 +197,8 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* @example
* score(10); // = 'AAA'
*/
self.score = function(contrast) {
return contrast >= 7 ? "AAA" : contrast >= 4.5 ? "AA" : "";
self.score = function ( contrast ) {
return contrast >= 7 ? 'AAA' : contrast >= 4.5 ? 'AA' : '';
};
return self;

6
package-lock.json generated
Unescape View File

@ -284,9 +284,9 @@
}
},
"aetna": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/aetna/-/aetna-0.6.0.tgz",
"integrity": "sha512-ORBZeyqzfu2OHJRqFhW4z00Y7nOv1u/UHx5mAJ/MianR7rmc9m/n3puLhLmyhCvtI7kmruUTsVU929YGuQpLHA==",
"version": "1.0.0-alpha.0",
"resolved": "https://registry.npmjs.org/aetna/-/aetna-1.0.0-alpha.0.tgz",
"integrity": "sha512-AxjejoGeiv0OsQNuusC5A50ByuoXknA6SKjD/d0AMV3tCJuX26lZq1bnpTalVjqtk6Kzyo6nHU2nKzjltlTR+Q==",
"requires": {
"@frctl/fractal": "1.1.7"
}

30
package.json
Unescape View File

@ -4,7 +4,12 @@
"author": "Pressbooks (Book Oven Inc.) <code@pressbooks.com>",
"homepage": "https://github.com/pressbooks/pressbooks-aldine/",
"description": "Aldine is the root theme for Pressbooks.",
"keywords": ["publishing", "catalog", "pressbooks", "default-theme"],
"keywords": [
"publishing",
"catalog",
"pressbooks",
"default-theme"
],
"private": true,
"repository": {
"type": "git",
@ -19,7 +24,11 @@
"url": "https://opensource.org/licenses/GPL-3.0"
}
],
"browserslist": ["last 2 versions", "android 4", "opera 12"],
"browserslist": [
"last 2 versions",
"android 4",
"opera 12"
],
"eslintConfig": {
"extends": "./node_modules/pressbooks-build-tools/config/eslint.js",
"globals": {
@ -31,19 +40,14 @@
"extends": "./node_modules/pressbooks-build-tools/config/stylelint.js"
},
"scripts": {
"build":
"cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"build:production":
"cross-env NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"build:profile":
"cross-env NODE_ENV=production webpack --progress --profile --json --config=node_modules/laravel-mix/setup/webpack.config.js",
"start":
"cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"build": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"build:production": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"build:profile": "cross-env NODE_ENV=production webpack --progress --profile --json --config=node_modules/laravel-mix/setup/webpack.config.js",
"start": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"rmdist": "rimraf dist",
"lint": "npm run -s lint:scripts && npm run -s lint:styles",
"lint:scripts": "node_modules/eslint/bin/eslint.js \"assets/scripts/*.js\"",
"lint:styles":
"node_modules/stylelint/bin/stylelint.js \"assets/styles/**/*.scss\" --syntax scss",
"lint:styles": "node_modules/stylelint/bin/stylelint.js \"assets/styles/**/*.scss\" --syntax scss",
"test": "npm run -s lint"
},
"engines": {
@ -53,7 +57,7 @@
"pressbooks-build-tools": "^0.9.0"
},
"dependencies": {
"aetna": "^0.6.0",
"aetna": "^1.0.0-alpha",
"isotope-layout": "^3.0.5",
"jquery-bridget": "^2.0.1",
"js-cookie": "^2.2.0",

20
partials/book.php
Unescape View File

@ -1,20 +1,28 @@
<?php use function \Aldine\Helpers\maybe_truncate_string; ?>
<?php $subject = ( isset( $book['subject'] ) ) ? substr( $book['subject'], 0, 2 ) : '';
$date = ( isset( $book['metadata']['datePublished'] ) ) ? str_replace( '-', '', $book['metadata']['datePublished'] ) : '';
?>
<li class="book"
<?php if ( $date ) { ?>data-date-published="<?php echo $date; ?>"<?php } ?>
data-license="<?php echo ( new \Pressbooks\Licensing() )->getLicenseFromUrl( $book['metadata']['license']['url'] ); ?>"
<?php if ( ! empty( $subject ) ) { ?> data-subject="<?php echo $subject ?>"<?php } ?>
>
<?php if ( ! empty( $subject ) ) { ?>
<p class="book__title">
<a href="<?php echo $book['link']; ?>"><?php echo maybe_truncate_string( $book['metadata']['name'] ); ?></a>
</p>
<?php /* <?php if (isset( $book['metadata']['author'] ) ) { ?>
<p class="book__author">
<?php _e( 'By', 'pressbooks-aldine' ); ?> <?php foreach ( $book['metadata']['author'] as $author ) {
echo $author['name'];
} ?>
</p>
<?php } ?> */ ?>
<?php if ( ! empty( $subject ) ) { ?>
<p class="book__subject">
<a href="<?php echo network_home_url( "/catalog/#$subject" ) ?>"><?php echo \Pressbooks\Metadata\get_subject_from_thema( $book['subject'] ); ?></a>
</p>
<?php } ?>
<p class="book__title">
<a href="<?php echo $book['link']; ?>"><?php echo $book['metadata']['name']; ?></a>
</p>
<?php } ?>
<p class="book__read-more">
<a href="<?php echo $book['link']; ?>"><?php _e( 'About this book', 'pressbooks-aldine' ); ?> <svg aria-hidden="true"><use xlink:href="#arrow-right" /></svg></a>
</p>

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

@ -13,6 +13,8 @@
use function Aldine\Helpers\get_catalog_data;
use function Aldine\Helpers\get_catalog_licenses;
use function Aldine\Helpers\get_available_subjects;
use function Aldine\Helpers\get_available_licenses;
$current_page = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$orderby = ( get_query_var( 'orderby' ) ) ? get_query_var( 'orderby' ) : 'title';
@ -22,39 +24,44 @@ $catalog_data = get_catalog_data( $current_page, 9, $orderby, $license, $subject
$previous_page = ( $current_page > 1 ) ? $current_page - 1 : 0;
$next_page = $current_page + 1;
$licenses = get_catalog_licenses();
$subject_groups = ( defined( 'PB_PLUGIN_VERSION' ) ) ? \Pressbooks\Metadata\get_thema_subjects() : [];
$available_licenses = get_available_licenses( $catalog_data );
$subjects = ( defined( 'PB_PLUGIN_VERSION' ) ) ? \Pressbooks\Metadata\get_thema_subjects() : [];
$available_subjects = get_available_subjects( $catalog_data );
?>
<?php get_template_part( 'partials/page', 'header' ); ?>
<section class="network-catalog">
<form role="form" class="filter-sort" method="get">
<input type="hidden" name="paged" value="<?php echo $current_page; ?>" />
<fieldset class="license-filters">
<h2><?php _e( 'Filter by License', 'pressbooks-aldine' ); ?></h2>
<input type="radio" name="license" id="all-licenses" value="" <?php checked( $license, '' ); ?>>
<label for="all-licenses"><?php _e( 'All Licenses', 'pressbooks-aldine' ); ?> <svg class="checked"><use xlink:href="#checkmark" /></svg></label>
<?php foreach ( $licenses as $key => $value ) : ?>
<input type="radio" name="license" id="<?php echo $key; ?>" value="<?php echo $key; ?>" <?php checked( $license, $key ); ?>>
<label for="<?php echo $key; ?>"><?php echo $value; ?> <svg class="checked"><use xlink:href="#checkmark" /></svg></label>
<?php endforeach; ?>
</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 ( $subjects as $key => $val ) :
if ( array_key_exists( $key, $available_subjects ) ) : ?>
<h3><span class="label"><?php echo $val['label']; ?></span></h3>
<?php foreach ( $val['children'] as $k => $v ) :
if ( strlen( $k ) === 2 ) : ?>
if ( in_array( $k, $available_subjects[$key] ) ) : ?>
<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>
<label for="<?php echo $k; ?>"><span class="label"><?php echo $v; ?></span> <svg class="checked"><use xlink:href="#checkmark" /></svg></label>
<?php endif; ?>
<?php endforeach; ?>
<?php endif; ?>
<?php endforeach; ?>
</div>
</fieldset>
<fieldset class="license-filters">
<h2><?php _e( 'Filter by License', 'pressbooks-aldine' ); ?></h2>
<input type="radio" name="license" id="all-licenses" value="" <?php checked( $license, '' ); ?>>
<label for="all-licenses"><?php _e( 'All Licenses', 'pressbooks-aldine' ); ?> <svg class="checked"><use xlink:href="#checkmark" /></svg></label>
<?php foreach ( $licenses as $key => $value ) :
if ( in_array( $key, $available_licenses, true ) ) : ?>
<input type="radio" name="license" id="<?php echo $key; ?>" value="<?php echo $key; ?>" <?php checked( $license, $key ); ?>>
<label for="<?php echo $key; ?>"><?php echo $value; ?> <svg class="checked"><use xlink:href="#checkmark" /></svg></label>
<?php endif;
endforeach; ?>
</fieldset>
<fieldset class="sorts">
<h2><?php _e( 'Sort by', 'pressbooks-aldine' ); ?></h2>
<?php
@ -68,6 +75,7 @@ $subject_groups = ( defined( 'PB_PLUGIN_VERSION' ) ) ? \Pressbooks\Metadata\get_
<label for="<?php echo $key ?>"><?php echo $value; ?> <svg class="checked"><use xlink:href="#checkmark" /></svg></label>
<?php } ?>
</fieldset>
<button type="button" class="clear-filters" hidden><?php _e( 'Clear Filters', 'pressbooks-aldine' ); ?></button>
<button type="submit"><?php _e( 'Submit', 'pressbooks-aldine' ); ?></button>
</form>
<ul class="books">
@ -77,7 +85,10 @@ $subject_groups = ( defined( 'PB_PLUGIN_VERSION' ) ) ? \Pressbooks\Metadata\get_
</ul>
<?php if ( $catalog_data['pages'] > 1 ) : ?>
<nav class="catalog-navigation">
<?php if ( $previous_page ) : ?><a class="previous" data-page="<?php echo $previous_page; ?>" href="<?php echo network_home_url( "/catalog/page/$previous_page/" ); ?>"><?php _e( 'Previous', 'pressbooks-aldine' ); ?></a><?php endif; ?>
<?php if ( $previous_page ) : ?><a class="previous" rel="previous" data-page="<?php echo $previous_page; ?>" href="<?php echo network_home_url( "/catalog/page/$previous_page/" ); ?>"><span class="screen-reader-text"><?php _e( 'Previous Page', 'pressbooks' ); ?></span>
<svg aria-hidden="true">
<use xlink:href="#arrow-left" />
</svg></a><?php endif; ?>
<div class="pages">
<?php for ( $i = 1; $i <= $catalog_data['pages']; $i++ ) :
if ( $i === $current_page ) : ?>
@ -87,7 +98,10 @@ $subject_groups = ( defined( 'PB_PLUGIN_VERSION' ) ) ? \Pressbooks\Metadata\get_
<?php endif; ?>
<?php endfor; ?>
</div>
<?php if ( $next_page <= $catalog_data['pages'] ) : ?><a class="next" data-page="<?php echo $next_page; ?>" href="<?php echo network_home_url( "/catalog/page/$next_page/" ); ?>"><?php _e( 'Next', 'pressbooks-aldine' ); ?></a><?php endif; ?>
<?php if ( $next_page <= $catalog_data['pages'] ) : ?><a class="next" rel="next" data-page="<?php echo $next_page; ?>" href="<?php echo network_home_url( "/catalog/page/$next_page/" ); ?>"><span class="screen-reader-text"><?php _e( 'Next Page', 'pressbooks' ); ?></span>
<svg aria-hidden="true">
<use xlink:href="#arrow-right" />
</svg></a><?php endif; ?>
</nav>
<?php endif; ?>
</section>

6
yarn.lock
Unescape View File

@ -179,9 +179,9 @@ adjust-sourcemap-loader@^1.1.0:
object-path "^0.9.2"
regex-parser "^2.2.1"
aetna@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/aetna/-/aetna-0.6.0.tgz#e5ec7d52f39f747a5d8d2a56603208bbfccf3498"
aetna@^1.0.0-alpha:
version "1.0.0-alpha.0"
resolved "https://registry.yarnpkg.com/aetna/-/aetna-1.0.0-alpha.0.tgz#3d38239ebceae39d8d1d026001eb653ec7258a98"
dependencies:
"@frctl/fractal" "^1.1.7"

Write Preview
Loading…
Cancel
Save