Browse Source

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

pull/55/head
Ned Zimmerman 7 years ago
parent
commit
b66d12b511
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
  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

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

31
assets/scripts/routes/catalog.js

@ -76,7 +76,7 @@ export default {
// Give each <h3> a toggle button child
heading.innerHTML = `
<button type="button" aria-expanded="false">
${heading.textContent}
${heading.innerHTML}
<svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="currentColor" fill-rule="evenodd"></path></svg>
</button>
`;
@ -151,22 +151,27 @@ export default {
let licenses = document.querySelector( '.license-filters' );
let subjects = document.querySelector( '.subject-filters' );
let sorts = document.querySelector( '.sorts' );
let clearFilters = document.querySelector( '.clear-filters' );
clearFilters.hidden = false;
licenses.addEventListener( 'click', function ( event ) {
if ( event.target.type !== 'radio' ) {
return;
}
let license = '';
let subject = '';
let filterValue = '*';
if ( subjects.querySelector( 'input[type="radio"]:checked' ).value ) {
subject = `[data-subject="${
subjects.querySelector( 'input[type="radio"]:checked' ).value
}"]`;
}
if ( event.target.value ) {
license = `[data-license="${event.target.value}"]`;
alert(`[data-license="${event.target.value}"]${subject}`);
$grid.isotope({
filter: `[data-license="${event.target.value}"]${subject}`,
});
}
if ( license || subject ) {
filterValue = `${license}${subject}`;
}
$grid.isotope( { filter: filterValue } );
} );
subjects.addEventListener( 'click', function ( event ) {
if ( event.target.type !== 'radio' ) {
@ -174,16 +179,26 @@ export default {
}
let license = '';
let subject = '';
let filterValue = '*';
if ( licenses.querySelector( 'input[type="radio"]:checked' ).value ) {
license = `[data-license="${
licenses.querySelector( 'input[type="radio"]:checked' ).value
}"]`;
}
if ( event.target.value ) {
subject = `[data-subject="${event.target.value}"]`;
alert(`${license}[data-subject="${event.target.value}"]`);
$grid.isotope({
filter: `${license}${subject}`,
}
if ( license || subject ) {
filterValue = `${license}${subject}`;
}
$grid.isotope( { filter: filterValue } );
} );
clearFilters.addEventListener( 'click', function () {
let allLicenses = document.getElementById( 'all-licenses' );
let allSubjects = document.getElementById( 'all-subjects' );
allLicenses.checked = true;
allSubjects.checked = true;
$grid.isotope( { filter: '*' } );
} );
sorts.addEventListener( 'click', function ( event ) {
if ( event.target.type !== 'radio' ) {

18
assets/scripts/routes/common.js

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

19
assets/scripts/routes/home.js

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

34
assets/styles/components/_book.scss

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

6
assets/styles/components/_forms.scss

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

208
assets/styles/layouts/_catalog.scss

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

19
assets/styles/layouts/_header.scss

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

516
assets/styles/layouts/pages__deprecated/_catalog.scss

@ -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

@ -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

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

14673
dist/scripts/aldine.js vendored

File diff suppressed because one or more lines are too long

10356
dist/scripts/customizer.js vendored

File diff suppressed because one or more lines are too long

3114
dist/styles/aldine.css vendored

File diff suppressed because one or more lines are too long

302
dist/styles/editor.css vendored

File diff suppressed because one or more lines are too long

25
inc/customizer/namespace.php

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

60
inc/helpers/namespace.php

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

52
lib/customizer-validate-wcag-color-contrast/customizer-validate-wcag-color-contrast.js

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

6
package-lock.json generated

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

30
package.json

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

16
partials/book.php

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

48
partials/content-page-catalog.php

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

6
yarn.lock

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

Loading…
Cancel
Save