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. 169
      assets/scripts/routes/catalog.js
  3. 18
      assets/scripts/routes/common.js
  4. 19
      assets/scripts/routes/home.js
  5. 36
      assets/styles/components/_book.scss
  6. 6
      assets/styles/components/_forms.scss
  7. 212
      assets/styles/layouts/_catalog.scss
  8. 23
      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. 22
      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 ) );
} ); } );

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

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

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() {},
}; };

36
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;
margin-left: 0.5rem; @media #{$breakpoint-not-small} {
width: 1.125rem;
height: 1.125rem;
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;
} }

212
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;
}
}

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

@ -63,10 +63,27 @@
} }
} }
.page.catalog .header { .page.catalog {
height: 381px; .header {
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} {
height: 450px; .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", "/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;
}

108
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 );
} }
@ -14,8 +12,8 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* @param {wp.customize.Value} setting.validationMessage - Validation message. * @param {wp.customize.Value} setting.validationMessage - Validation message.
* @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;
@ -28,34 +26,34 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* @param {mixed} value - New value being assigned to the setting. * @param {mixed} value - New value being assigned to the setting.
* @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 ) {
setting.notifications.remove( other_color_control_id ); 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 ); setting.notifications.add( validationWarning.code, validationWarning );
// console.log( color_control_id + ' ' + color + ' ' + contrast + ' ' + score ); // console.log( color_control_id + ' ' + color + ' ' + contrast + ' ' + score );
} else { } else {
@ -75,19 +73,18 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* @param {wp.customize.Setting} setting - Setting. * @param {wp.customize.Setting} setting - Setting.
* @returns {boolean} * @returns {boolean}
*/ */
self.isColorControl = function( setting ) { self.isColorControl = function ( setting ) {
return _.findKey( self.validate_color_contrast, function( key, value ) { return _.findKey( self.validate_color_contrast, function ( key, value ) {
return value == setting.id; return value == setting.id;
} ); } );
}; };
api.bind( 'add', function( setting ) { api.bind( 'add', function ( setting ) {
self.addWCAGColorContrastValidation( setting ); self.addWCAGColorContrastValidation( setting );
} ); } );
self.sprintf = function ( format ) {
self.sprintf = function( format ) { for ( let i=1; i < arguments.length; i++ ) {
for( var i=1; i < arguments.length; i++ ) {
format = format.replace( /%s/, arguments[i] ); format = format.replace( /%s/, arguments[i] );
} }
return format; return format;
@ -98,20 +95,20 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
*/ */
// from https://github.com/sindresorhus/hex-rgb // from https://github.com/sindresorhus/hex-rgb
self.hexRgb = function (hex) { self.hexRgb = function ( hex ) {
if (typeof hex !== 'string') { if ( typeof hex !== 'string' ) {
throw new TypeError('Expected a 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]; 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 // 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 // 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
lowc = 1 / 12.92; lowc = 1 / 12.92;
self.adjustGamma = function( g ) { self.adjustGamma = function ( g ) {
return Math.pow((g + 0.055) / 1.055, 2.4); 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 luminance = require('relative-luminance');
* 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
@ -164,10 +160,10 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* @example * @example
* 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 );
}; };
/** /**
@ -178,8 +174,8 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* @example * @example
* rgb([0, 0, 0], [255, 255, 255]); // = 21 * rgb([0, 0, 0], [255, 255, 255]); // = 21
*/ */
self.rgb = function(a, b) { self.rgb = function ( a, b ) {
return self.luminance(self.relativeLuminance(a), self.relativeLuminance(b)); return self.luminance( self.relativeLuminance( a ), self.relativeLuminance( b ) );
}; };
/** /**
@ -190,8 +186,8 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* @example * @example
* hex('#000', '#fff'); // = 21 * hex('#000', '#fff'); // = 21
*/ */
self.hex = function(a, b) { self.hex = function ( a, b ) {
return self.rgb(self.hexRgb(a), self.hexRgb(b)); return self.rgb( self.hexRgb( a ), self.hexRgb( b ) );
}; };
/** /**
@ -201,8 +197,8 @@ var validateWCAGColorContrast = ( function( $, api, exports ) {
* @example * @example
* 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",

22
partials/book.php
Unescape View File

@ -1,21 +1,29 @@
<?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 } ?>
> >
<?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"> <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"> <p class="book__read-more">
<a href="<?php echo $book['link']; ?>"><?php echo $book['metadata']['name']; ?></a>
</p>
<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>
</li> </li>

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