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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      assets/scripts/customizer.js
  2. 31
      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. 52
      lib/customizer-validate-wcag-color-contrast/customizer-validate-wcag-color-contrast.js
  19. 6
      package-lock.json
  20. 30
      package.json
  21. 16
      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'; import $ from 'jquery';
wp.customize( 'blogname', value => { 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 ) );
} ); } );

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

@ -76,7 +76,7 @@ export default {
// Give each <h3> a toggle button child // Give each <h3> a toggle button child
heading.innerHTML = ` heading.innerHTML = `
<button type="button" aria-expanded="false"> <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> <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> </button>
`; `;
@ -151,22 +151,27 @@ export default {
let licenses = document.querySelector( '.license-filters' ); let licenses = document.querySelector( '.license-filters' );
let subjects = document.querySelector( '.subject-filters' ); let subjects = document.querySelector( '.subject-filters' );
let sorts = document.querySelector( '.sorts' ); let sorts = document.querySelector( '.sorts' );
let clearFilters = document.querySelector( '.clear-filters' );
clearFilters.hidden = false;
licenses.addEventListener( 'click', function ( event ) { licenses.addEventListener( 'click', function ( event ) {
if ( event.target.type !== 'radio' ) { if ( event.target.type !== 'radio' ) {
return; return;
} }
let license = ''; let license = '';
let subject = ''; let subject = '';
let filterValue = '*';
if ( subjects.querySelector( 'input[type="radio"]:checked' ).value ) { if ( subjects.querySelector( 'input[type="radio"]:checked' ).value ) {
subject = `[data-subject="${ 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}"]`; license = `[data-license="${event.target.value}"]`;
alert(`[data-license="${event.target.value}"]${subject}`); }
$grid.isotope({ if ( license || subject ) {
filter: `[data-license="${event.target.value}"]${subject}`, filterValue = `${license}${subject}`;
}); }
$grid.isotope( { filter: filterValue } );
} ); } );
subjects.addEventListener( 'click', function ( event ) { subjects.addEventListener( 'click', function ( event ) {
if ( event.target.type !== 'radio' ) { if ( event.target.type !== 'radio' ) {
@ -174,16 +179,26 @@ export default {
} }
let license = ''; let license = '';
let subject = ''; let subject = '';
let filterValue = '*';
if ( licenses.querySelector( 'input[type="radio"]:checked' ).value ) { if ( licenses.querySelector( 'input[type="radio"]:checked' ).value ) {
license = `[data-license="${ 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}"]`; subject = `[data-subject="${event.target.value}"]`;
alert(`${license}[data-subject="${event.target.value}"]`); }
$grid.isotope({ if ( license || subject ) {
filter: `${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 ) { sorts.addEventListener( 'click', function ( event ) {
if ( event.target.type !== 'radio' ) { if ( event.target.type !== 'radio' ) {

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

@ -71,6 +71,24 @@ export default {
$( '.header__nav' ).toggleClass( 'header__nav--active' ); $( '.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() { finalize() {
// JavaScript to be fired on all pages, after page specific JS is fired // 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 { export default {
init() { init() {
// JavaScript to be fired on the home page // 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() {}, finalize() {},
}; };

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

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

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

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

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

@ -32,26 +32,26 @@ fieldset {
&:hover, &:hover,
&:focus { &:focus {
color: var(--brand); color: var(--primary);
background: var(--bg-body); background: var(--bg-body);
} }
&:active { &:active {
box-shadow: none; box-shadow: none;
} }
}
}
&[aria-expanded="true"] { [aria-expanded="true"] {
color: var(--brand); color: var(--primary);
svg { svg {
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
}
}
h2 { h2 {
button[aria-expanded="true"] { [aria-expanded="true"] {
border-bottom: solid 2px var(--accent); border-bottom: solid 2px var(--accent);
background: #fafdff; background: #fafdff;
} }
@ -67,6 +67,11 @@ fieldset {
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
} }
.label {
display: inline-block;
width: calc(100% - 2rem);
}
[type="radio"] + label { [type="radio"] + label {
cursor: pointer; cursor: pointer;
display: block; display: block;
@ -86,7 +91,7 @@ fieldset {
} }
[type="radio"]:checked + label { [type="radio"]:checked + label {
color: var(--brand); color: var(--primary);
font-weight: bold; font-weight: bold;
svg { svg {
@ -104,3 +109,192 @@ fieldset {
margin-bottom: 1rem; 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; height: 381px;
}
.page-header {
display: flex;
flex-direction: column;
justify-content: center;
height: rem(380);
margin-top: rem(-380);
}
@media #{$breakpoint-large} { @media #{$breakpoint-large} {
.header {
height: 450px; 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", "/scripts/aldine.js": "/scripts/aldine.js?id=a166171314fdc227903c",
"/styles/aldine.css": "/styles/aldine.css", "/styles/aldine.css": "/styles/aldine.css?id=728f9c04264f59ea9db3",
"/styles/editor.css": "/styles/editor.css", "/styles/editor.css": "/styles/editor.css?id=10e3f4b144847aa8d75e",
"/scripts/customizer.js": "/scripts/customizer.js" "/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' ); $assets->setSrcDirectory( 'assets' )->setDistDirectory( 'dist' );
wp_enqueue_script( 'aldine/customizer', $assets->getPath( 'scripts/customizer.js' ), [ 'customize-preview' ], false, null ); 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 = [ // $exports = [
'validate_color_contrast' => [ // 'validate_color_contrast' => [
'pb_network_color_primary_fg' => [ 'pb_network_color_primary' ], // 'pb_network_color_primary_fg' => [ 'pb_network_color_primary' ],
'pb_network_color_accent_fg' => [ 'pb_network_color_accent' ], // 'pb_network_color_accent_fg' => [ 'pb_network_color_accent' ],
], // ],
]; // ];
wp_scripts()->add_data( // wp_scripts()->add_data(
'wcag-validate-customizer-color-contrast', // 'wcag-validate-customizer-color-contrast',
'data', // 'data',
sprintf( 'var _validateWCAGColorContrastExports = %s;', wp_json_encode( $exports ) ) // sprintf( 'var _validateWCAGColorContrastExports = %s;', wp_json_encode( $exports ) )
); // ); // @codingStandardsIgnoreEnd
} }

60
inc/helpers/namespace.php
Unescape View File

@ -7,6 +7,8 @@
namespace Aldine\Helpers; namespace Aldine\Helpers;
use \Pressbooks\Licensing;
/** /**
* Get catalog data. * Get catalog data.
* *
@ -64,6 +66,43 @@ function get_catalog_licenses() {
return []; 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. * Return the default (non-page) menu items.
* *
@ -200,6 +239,12 @@ function handle_contact_form_submission() {
return; return;
} }
/**
* Does a page have page sections?
*
* @param int $post_id The page.
* @return bool
*/
function has_sections( $post_id ) { function has_sections( $post_id ) {
$post_content = get_post_field( 'post_content', $post_id ); $post_content = get_post_field( 'post_content', $post_id );
if ( ! empty( $post_content ) ) { if ( ! empty( $post_content ) ) {
@ -212,3 +257,18 @@ function has_sections( $post_id ) {
return false; 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;
}

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

@ -1,9 +1,7 @@
/* global wp, _validateWCAGColorContrastExports */ /* global wp, _validateWCAGColorContrastExports */
/* exported validateWCAGColorContrast */ /* exported validateWCAGColorContrast */
var validateWCAGColorContrast = ( function( $, api, exports ) { let validateWCAGColorContrast = ( function ( $, api, exports ) {
var self = { let self = { validate_color_contrast: [] };
validate_color_contrast: []
};
if ( exports ) { if ( exports ) {
$.extend( self, exports ); $.extend( self, exports );
} }
@ -15,7 +13,7 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* @return {boolean} Whether validation was added. * @return {boolean} Whether validation was added.
*/ */
self.addWCAGColorContrastValidation = function ( setting ) { self.addWCAGColorContrastValidation = function ( setting ) {
var initialValidate; let initialValidate;
if ( ! self.isColorControl( setting ) ) { if ( ! self.isColorControl( setting ) ) {
return false; return false;
@ -29,28 +27,28 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* @returns {*} * @returns {*}
*/ */
setting.validate = function ( value ) { setting.validate = function ( value ) {
var setting = this, title, validationError; let setting = this, title, validationError;
var current_color = value; let current_color = value;
var current_id = this.id; 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 // remove other (old) notifications
_.each( _.without( all_color_controls, current_id ), function ( other_color_control_id ) { _.each( _.without( all_color_controls, current_id ), function ( other_color_control_id ) {
var other_control = api.control.instance( other_color_control_id ); let other_control = api.control.instance( other_color_control_id );
notice = other_control.container.find( '.notice' ); notice = other_control.container.find( '.notice' );
notice.hide(); notice.hide();
} ); } );
// find other color controls and check contrast with current color control // 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 ) { _.each( other_color_controls, function ( other_color_control_id ) {
var other_control = api.control.instance( other_color_control_id); let other_control = api.control.instance( other_color_control_id );
var other_color = other_control.container.find('.color-picker-hex').val(); let other_color = other_control.container.find( '.color-picker-hex' ).val();
var name = $( '#customize-control-' + other_color_control_id + ' .customize-control-title').text(); let name = $( '#customize-control-' + other_color_control_id + ' .customize-control-title' ).text();
var contrast = self.hex( current_color, other_color ); let contrast = self.hex( current_color, other_color );
var score = self.score( contrast ); let score = self.score( contrast );
// contrast >= 7 ? "AAA" : contrast >= 4.5 ? "AA" : "" // contrast >= 7 ? "AAA" : contrast >= 4.5 ? "AA" : ""
if ( contrast < 4.5 ) { if ( contrast < 4.5 ) {
@ -85,9 +83,8 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
self.addWCAGColorContrastValidation( setting ); self.addWCAGColorContrastValidation( setting );
} ); } );
self.sprintf = function ( format ) { self.sprintf = function ( format ) {
for( var i=1; i < arguments.length; i++ ) { for ( let i=1; i < arguments.length; i++ ) {
format = format.replace( /%s/, arguments[i] ); format = format.replace( /%s/, arguments[i] );
} }
return format; return format;
@ -109,7 +106,7 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; 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 ];
}; };
@ -123,7 +120,7 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
// https://en.wikipedia.org/wiki/Rec._709#Luma_coefficients // https://en.wikipedia.org/wiki/Rec._709#Luma_coefficients
// red, green, and blue coefficients // red, green, and blue coefficients
var rc = 0.2126, let rc = 0.2126,
gc = 0.7152, gc = 0.7152,
bc = 0.0722, bc = 0.0722,
// low-gamma adjust coefficient // low-gamma adjust coefficient
@ -143,18 +140,17 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* var black_lum = luminance([0, 0, 0]); // 0 * var black_lum = luminance([0, 0, 0]); // 0
*/ */
self.relativeLuminance = function ( rgb ) { self.relativeLuminance = function ( rgb ) {
var rsrgb = rgb[0] / 255; let rsrgb = rgb[0] / 255;
var gsrgb = rgb[1] / 255; let gsrgb = rgb[1] / 255;
var bsrgb = rgb[2] / 255; let bsrgb = rgb[2] / 255;
var r = rsrgb <= 0.03928 ? rsrgb * lowc : self.adjustGamma(rsrgb), let r = rsrgb <= 0.03928 ? rsrgb * lowc : self.adjustGamma( rsrgb ),
g = gsrgb <= 0.03928 ? gsrgb * lowc : self.adjustGamma( gsrgb ), g = gsrgb <= 0.03928 ? gsrgb * lowc : self.adjustGamma( gsrgb ),
b = bsrgb <= 0.03928 ? bsrgb * lowc : self.adjustGamma( bsrgb ); b = bsrgb <= 0.03928 ? bsrgb * lowc : self.adjustGamma( bsrgb );
return r * rc + g * gc + b * bc; return r * rc + g * gc + b * bc;
}; };
// from https://github.com/tmcw/wcag-contrast // from https://github.com/tmcw/wcag-contrast
/** /**
* Get the contrast ratio between two relative luminance values * Get the contrast ratio between two relative luminance values
@ -165,8 +161,8 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* luminance(1, 1); // = 1 * luminance(1, 1); // = 1
*/ */
self.luminance = function ( a, b ) { self.luminance = function ( a, b ) {
var l1 = Math.max(a, b); let l1 = Math.max( a, b );
var l2 = Math.min(a, b); let l2 = Math.min( a, b );
return ( l1 + 0.05 ) / ( l2 + 0.05 ); return ( l1 + 0.05 ) / ( l2 + 0.05 );
}; };
@ -202,7 +198,7 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* score(10); // = 'AAA' * score(10); // = 'AAA'
*/ */
self.score = function ( contrast ) { self.score = function ( contrast ) {
return contrast >= 7 ? "AAA" : contrast >= 4.5 ? "AA" : ""; return contrast >= 7 ? 'AAA' : contrast >= 4.5 ? 'AA' : '';
}; };
return self; return self;

6
package-lock.json generated
Unescape View File

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

30
package.json
Unescape View File

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

16
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 ) : ''; <?php $subject = ( isset( $book['subject'] ) ) ? substr( $book['subject'], 0, 2 ) : '';
$date = ( isset( $book['metadata']['datePublished'] ) ) ? str_replace( '-', '', $book['metadata']['datePublished'] ) : ''; $date = ( isset( $book['metadata']['datePublished'] ) ) ? str_replace( '-', '', $book['metadata']['datePublished'] ) : '';
?> ?>
<li class="book" <li class="book"
<?php if ( $date ) { ?>data-date-published="<?php echo $date; ?>"<?php } ?> <?php if ( $date ) { ?>data-date-published="<?php echo $date; ?>"<?php } ?>
data-license="<?php echo ( new \Pressbooks\Licensing() )->getLicenseFromUrl( $book['metadata']['license']['url'] ); ?>" 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 ) ) { ?> data-subject="<?php echo $subject ?>"<?php } ?>
> >
<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 ) ) { ?> <?php if ( ! empty( $subject ) ) { ?>
<p class="book__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> <a href="<?php echo network_home_url( "/catalog/#$subject" ) ?>"><?php echo \Pressbooks\Metadata\get_subject_from_thema( $book['subject'] ); ?></a>
</p> </p>
<?php } ?> <?php } ?>
<p class="book__title">
<a href="<?php echo $book['link']; ?>"><?php echo $book['metadata']['name']; ?></a>
</p>
<p class="book__read-more"> <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> <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> </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_data;
use function Aldine\Helpers\get_catalog_licenses; 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; $current_page = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$orderby = ( get_query_var( 'orderby' ) ) ? get_query_var( 'orderby' ) : 'title'; $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; $previous_page = ( $current_page > 1 ) ? $current_page - 1 : 0;
$next_page = $current_page + 1; $next_page = $current_page + 1;
$licenses = get_catalog_licenses(); $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' ); ?> <?php get_template_part( 'partials/page', 'header' ); ?>
<section class="network-catalog"> <section class="network-catalog">
<form role="form" class="filter-sort" method="get"> <form role="form" class="filter-sort" method="get">
<input type="hidden" name="paged" value="<?php echo $current_page; ?>" /> <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"> <fieldset class="subject-filters">
<h2><?php _e( 'Filter by Subject', 'pressbooks-aldine' ); ?></h2> <h2><?php _e( 'Filter by Subject', 'pressbooks-aldine' ); ?></h2>
<input type="radio" name="subject" id="all-subjects" value="" <?php checked( $subject, '' ); ?>> <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> <label for="all-subjects"><?php _e( 'All Subjects', 'pressbooks-aldine' ); ?> <svg class="checked"><use xlink:href="#checkmark" /></svg></label>
<div class="subject-groups"> <div class="subject-groups">
<?php foreach ( $subject_groups as $key => $val ) : ?> <?php foreach ( $subjects as $key => $val ) :
<h3><?php echo $val['label']; ?></h3> if ( array_key_exists( $key, $available_subjects ) ) : ?>
<h3><span class="label"><?php echo $val['label']; ?></span></h3>
<?php foreach ( $val['children'] as $k => $v ) : <?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 ); ?>> <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 endif; ?>
<?php endforeach; ?> <?php endforeach; ?>
<?php endif; ?>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
</fieldset> </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"> <fieldset class="sorts">
<h2><?php _e( 'Sort by', 'pressbooks-aldine' ); ?></h2> <h2><?php _e( 'Sort by', 'pressbooks-aldine' ); ?></h2>
<?php <?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> <label for="<?php echo $key ?>"><?php echo $value; ?> <svg class="checked"><use xlink:href="#checkmark" /></svg></label>
<?php } ?> <?php } ?>
</fieldset> </fieldset>
<button type="button" class="clear-filters" hidden><?php _e( 'Clear Filters', 'pressbooks-aldine' ); ?></button>
<button type="submit"><?php _e( 'Submit', 'pressbooks-aldine' ); ?></button> <button type="submit"><?php _e( 'Submit', 'pressbooks-aldine' ); ?></button>
</form> </form>
<ul class="books"> <ul class="books">
@ -77,7 +85,10 @@ $subject_groups = ( defined( 'PB_PLUGIN_VERSION' ) ) ? \Pressbooks\Metadata\get_
</ul> </ul>
<?php if ( $catalog_data['pages'] > 1 ) : ?> <?php if ( $catalog_data['pages'] > 1 ) : ?>
<nav class="catalog-navigation"> <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"> <div class="pages">
<?php for ( $i = 1; $i <= $catalog_data['pages']; $i++ ) : <?php for ( $i = 1; $i <= $catalog_data['pages']; $i++ ) :
if ( $i === $current_page ) : ?> if ( $i === $current_page ) : ?>
@ -87,7 +98,10 @@ $subject_groups = ( defined( 'PB_PLUGIN_VERSION' ) ) ? \Pressbooks\Metadata\get_
<?php endif; ?> <?php endif; ?>
<?php endfor; ?> <?php endfor; ?>
</div> </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> </nav>
<?php endif; ?> <?php endif; ?>
</section> </section>

6
yarn.lock
Unescape View File

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

Write Preview
Loading…
Cancel
Save