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

More cleanup (header and JS).

pull/43/head
Ned Zimmerman 7 years ago
parent
2a892bdaf1
commit
59633ff08c
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
16 changed files with 272 additions and 427 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. 3
      assets/scripts/aldine.js
  2. 2
      assets/scripts/routes/catalog.js
  3. 17
      assets/scripts/routes/common.js
  4. 10
      assets/scripts/util/Router.js
  5. 5
      assets/scripts/util/camelCase.js
  6. 2
      assets/styles/aldine.scss
  7. 210
      assets/styles/layouts/_header.scss
  8. 4
      dist/mix-manifest.json
  9. 2
      dist/scripts/aldine.js
  10. 2
      dist/styles/aldine.css
  11. 22
      header.php
  12. 4
      inc/actions/namespace.php
  13. 10
      inc/filters/namespace.php
  14. 1
      package.json
  15. 7
      searchform.php
  16. 2
      yarn.lock

3
assets/scripts/aldine.js
Unescape View File

@ -1,6 +1,3 @@
// import external dependencies
import 'jquery';
// import local dependencies // import local dependencies
import Router from './util/Router'; import Router from './util/Router';
import common from './routes/common'; import common from './routes/common';

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

@ -4,6 +4,7 @@ const Isotope = require( 'isotope-layout' );
export default { export default {
init() { init() {
// JavaScript to be fired on the catalog page // JavaScript to be fired on the catalog page
jQuery( $ => {
jQueryBridget( 'isotope', Isotope, $ ); jQueryBridget( 'isotope', Isotope, $ );
let $grid = $( '.books' ); let $grid = $( '.books' );
$grid.isotope( { $grid.isotope( {
@ -107,6 +108,7 @@ export default {
$( e.currentTarget ).addClass( 'is-active' ); $( e.currentTarget ).addClass( 'is-active' );
$grid.isotope( { sortBy: sortBy } ); $grid.isotope( { sortBy: sortBy } );
} ); } );
} );
}, },
finalize() {}, finalize() {},
}; };

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

@ -3,6 +3,7 @@ import * as Cookies from 'js-cookie';
export default { export default {
init() { init() {
// JavaScript to be fired on all pages // JavaScript to be fired on all pages
jQuery( $ => {
$( 'body' ) $( 'body' )
.removeClass( 'no-js' ) .removeClass( 'no-js' )
.addClass( 'js' ); .addClass( 'js' );
@ -27,7 +28,10 @@ export default {
.addClass( 'active' ) .addClass( 'active' )
.text( PB_A11y.decrease_label ) .text( PB_A11y.decrease_label )
.attr( 'title', PB_A11y.decrease_label ); .attr( 'title', PB_A11y.decrease_label );
Cookies.set( 'a11y-larger-fontsize', '1', { expires: 365, path: '' } ); Cookies.set( 'a11y-larger-fontsize', '1', {
expires: 365,
path: '',
} );
return false; return false;
} else { } else {
$( 'html' ).removeClass( 'fontsize' ); $( 'html' ).removeClass( 'fontsize' );
@ -37,7 +41,10 @@ export default {
.removeClass( 'active' ) .removeClass( 'active' )
.text( PB_A11y.increase_label ) .text( PB_A11y.increase_label )
.attr( 'title', PB_A11y.increase_label ); .attr( 'title', PB_A11y.increase_label );
Cookies.set( 'a11y-larger-fontsize', '0', { expires: 365, path: '' } ); Cookies.set( 'a11y-larger-fontsize', '0', {
expires: 365,
path: '',
} );
return false; return false;
} }
} ); } );
@ -59,10 +66,10 @@ export default {
}, 100 ); }, 100 );
} }
} ); } );
$( '.js-header-menu-toggle' ).click( event => { $( '.js-header-nav-toggle' ).click( event => {
event.preventDefault(); event.preventDefault();
$( event.currentTarget ).toggleClass( '--active' ); $( '.header__nav' ).toggleClass( 'header__nav--active' );
$( '.js-header-nav' ).toggleClass( '--visible' ); } );
} ); } );
}, },
finalize() { finalize() {

10
assets/scripts/util/Router.js
Unescape View File

@ -9,7 +9,6 @@ import camelCase from './camelCase';
* Add additional events for more control over timing e.g. a finalize event * Add additional events for more control over timing e.g. a finalize event
*/ */
class Router { class Router {
/** /**
* Create a new Router * Create a new Router
* @param {Object} routes * @param {Object} routes
@ -25,7 +24,10 @@ class Router {
* @param {string} [arg] Any custom argument to be passed to the event. * @param {string} [arg] Any custom argument to be passed to the event.
*/ */
fire( route, event = 'init', arg ) { fire( route, event = 'init', arg ) {
const fire = route !== '' && this.routes[route] && typeof this.routes[route][event] === 'function'; const fire =
route !== '' &&
this.routes[route] &&
typeof this.routes[route][event] === 'function';
if ( fire ) { if ( fire ) {
this.routes[route][event]( arg ); this.routes[route][event]( arg );
} }
@ -50,7 +52,7 @@ class Router {
.replace( /-/g, '_' ) .replace( /-/g, '_' )
.split( /\s+/ ) .split( /\s+/ )
.map( camelCase ) .map( camelCase )
.forEach((className) => { .forEach( className => {
this.fire( className ); this.fire( className );
this.fire( className, 'finalize' ); this.fire( className, 'finalize' );
} ); } );
@ -60,4 +62,4 @@ class Router {
} }
} }
export default Router export default Router;

5
assets/scripts/util/camelCase.js
Unescape View File

@ -3,7 +3,10 @@
* @param {string} str String that isn't camel-case, e.g., CAMeL_CaSEiS-harD * @param {string} str String that isn't camel-case, e.g., CAMeL_CaSEiS-harD
* @return {string} String converted to camel-case, e.g., camelCaseIsHard * @return {string} String converted to camel-case, e.g., camelCaseIsHard
*/ */
export default str => `${str.charAt(0).toLowerCase()}${str.replace(/[\W_]/g, '|').split('|') export default str =>
`${str.charAt( 0 ).toLowerCase()}${str
.replace( /[\W_]/g, '|' )
.split( '|' )
.map( part => `${part.charAt( 0 ).toUpperCase()}${part.slice( 1 )}` ) .map( part => `${part.charAt( 0 ).toUpperCase()}${part.slice( 1 )}` )
.join( '' ) .join( '' )
.slice( 1 )}`; .slice( 1 )}`;

2
assets/styles/aldine.scss
Unescape View File

@ -14,7 +14,7 @@
// @import "components/forms"; // @import "components/forms";
// @import "components/grid"; // @import "components/grid";
// @import "components/wp-classes"; // @import "components/wp-classes";
// @import "layouts/header"; @import "layouts/header";
// @import "layouts/sidebar"; // @import "layouts/sidebar";
// @import "layouts/footer"; // @import "layouts/footer";
// @import "layouts/pages"; // @import "layouts/pages";

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

@ -1,214 +1,42 @@
.banner { .home .header {
background-position: bottom; background-position: bottom;
background-size: cover; background-size: cover;
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 560px; height: 560px;
width: 100%;
max-width: 100%;
max-width: 1440px;
}
.toggle {
display: block;
position: absolute;
top: 30px;
right: 17px;
width: 25px;
height: 20px;
z-index: 99;
text-indent: -9999em;
&__icon { &__title {
display: block; font-family: $font-family-sans-serif;
position: absolute; font-size: 1.875rem;
top: 7px; margin-top: 3rem;
width: 25px; margin-bottom: 0;
height: 3px; text-align: center;
background: var(--primary, $brand-primary);
&::before,
&::after {
width: 25px;
height: 3px;
content: '';
background: var(--primary, $brand-primary);
}
&::before {
position: absolute;
top: -7px;
right: 0;
}
&::after {
position: absolute;
top: 7px;
right: 0;
}
}
&--active {
.toggle__icon {
background: var(--primary-fg, $white);
&::before,
&::after {
background: var(--primary-fg, $white);
}
}
}
}
&__brand {
display: block;
align-self: flex-start;
width: 6.5625rem;
height: auto;
margin: 30px 0 0 17px;
svg,
img {
width: auto;
max-width: 100%; max-width: 100%;
height: auto;
}
} }
&__navigation { &__description {
display: flex;
position: absolute;
flex-direction: column;
justify-content: center;
align-items: flex-start;
top: 0;
width: 100%;
height: 560px;
margin: 0 0 0 -100%;
padding: 0 17px;
background: transparent;
a {
display: none;
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
font-size: rem(24); font-size: 1.125rem;
line-height: (80/24); margin-bottom: 0;
color: var(--primary-fg, $white);
letter-spacing: 0;
}
.sep {
display: none;
}
&--visible {
margin: 0;
padding: 0 52px;
z-index: 1;
background: var(--primary, $brand-primary);
a {
display: block;
width: 100%;
border-bottom: solid 1px var(--primary-fg, $white);
&:last-child {
border-bottom: 0;
}
}
}
}
&__branding {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height: 364px;
text-align: center; text-align: center;
max-width: 100%;
p {
font-family: $font-family-sans-serif;
}
}
}
.page:not(.home) .banner__branding {
display: none;
} }
@media #{$breakpoint-large} { @media #{$breakpoint-large} {
.banner {
.container {
height: 880px; height: 880px;
margin: 0 auto;
}
.toggle { &__title {
display: none; font-size: 4.5rem;
} }
&__brand { &__description {
align-self: center; font-size: 1.875rem;
width: 16.5625rem;
height: auto;
margin-top: 40px;
} }
&__navigation {
top: 40px;
height: 40px;
max-width: 1440px;
margin: 0 auto;
flex-direction: row;
justify-content: flex-start;
align-items: center;
a {
display: inline-block;
font-size: rem(18);
color: var(--header-text, $black);
line-height: normal;
&:hover,
&:focus {
color: var(--primary, $brand-primary);
}
}
&--catalog {
margin-right: auto;
}
&--contact {
margin: 0 1em 0 auto;
}
&--sep {
display: inline-block;
margin: 0 0.5em;
} }
} }
&__branding { .page .header {
height: 576px; // TODO
p {
font-size: rem(30);
letter-spacing: 0.75px;
line-height: (40/30);
}
} }
h1 { .page.catalog .header {
margin-bottom: rem(32); // TODO
font-size: rem(72);
line-height: (40/72);
letter-spacing: rem(1.8);
}
}
} }

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

@ -1,5 +1,5 @@
{ {
"/scripts/aldine.js": "/scripts/aldine.js?id=f0380c51980a33b2d33c", "/scripts/aldine.js": "/scripts/aldine.js?id=af09fa97e83d238ec459",
"/styles/aldine.css": "/styles/aldine.css?id=405ee7591545ea8b1977", "/styles/aldine.css": "/styles/aldine.css?id=28b42418cb02cfbe2c49",
"/scripts/customizer.js": "/scripts/customizer.js?id=f1f1f4225cba4c1b35f2" "/scripts/customizer.js": "/scripts/customizer.js?id=f1f1f4225cba4c1b35f2"
} }

2
dist/scripts/aldine.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/styles/aldine.css vendored
View File

File diff suppressed because one or more lines are too long

22
header.php
Unescape View File

@ -35,44 +35,44 @@
</svg> </svg>
<div id="page" class="site"> <div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'pressbooks-aldine' ); ?></a> <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'pressbooks-aldine' ); ?></a>
<header class="header" role="banner" style="background-image: url(<?php
<header id="masthead" class="header header--root" role="banner" style="background-image: url(<?php
if ( is_front_page() ) { if ( is_front_page() ) {
echo( get_header_image() ); echo( get_header_image() );
} else { } else {
echo get_template_directory_uri() . '/dist/images/catalog-header.jpg'; echo get_template_directory_uri() . '/dist/images/catalog-header.jpg';
} ?>);"> } ?>);">
<div class="header__inner"> <div class="header__inside">
<div class="header__brand"> <div class="header__brand">
<a class="header__logo" href="<?php echo network_home_url(); ?>"> <a title="<?php echo get_bloginfo( 'name', 'display' ); ?>" href="<?php echo network_home_url(); ?>">
<?php if ( has_custom_logo() ) { ?> <?php if ( has_custom_logo() ) { ?>
<?php $custom_logo_id = get_theme_mod( 'custom_logo' ); <?php $custom_logo_id = get_theme_mod( 'custom_logo' );
printf( printf(
'<img src="%1$s" srcset="%2$s" alt="%3$s" />', '<img class="header__logo--img" src="%1$s" srcset="%2$s" alt="%3$s" />',
wp_get_attachment_image_src( $custom_logo_id, 'logo' )[0], wp_get_attachment_image_src( $custom_logo_id, 'logo' )[0],
wp_get_attachment_image_srcset( $custom_logo_id, 'large' ), wp_get_attachment_image_srcset( $custom_logo_id, 'large' ),
sprintf( __( 'Logo for %s', 'pressbooks-aldine' ), get_bloginfo( 'name', 'display' ) ) sprintf( __( 'Logo for %s', 'pressbooks-aldine' ), get_bloginfo( 'name', 'display' ) )
); ?> ); ?>
<?php } else { ?> <?php } else { ?>
<svg class="logo--svg"> <svg class="header__logo--svg">
<use xlink:href="#logo-pressbooks" /> <use xlink:href="#logo-pressbooks" />
</svg> </svg>
<?php } ?> <?php } ?>
</a> </a>
</div> </div>
<div class="header__nav"> <div class="header__nav">
<a class="header__menu-icon js-header-menu-toggle" href="#navigation"><?php _e( 'Toggle Menu', 'pressbooks-book' ); ?><span class="header__menu-icon__icon"></span></a> <a class="header__nav-icon js-header-nav-toggle" href="#navigation"><?php _e( 'Toggle Menu', 'pressbooks-book' ); ?><span class="header__nav-icon__icon"></span></a>
<?php wp_nav_menu( [ <?php wp_nav_menu( [
'theme_location' => 'primary-menu', 'theme_location' => 'primary-menu',
'container' => 'nav', 'container' => 'nav',
'container_class' => 'js-header-nav', 'container_class' => 'js-header-nav',
'container_id' => 'navigation', 'container_id' => 'navigation',
'menu_class' => 'menu--primary', 'menu_id' => 'nav-primary-menu',
'menu_class' => 'nav--primary',
] ); ?> ] ); ?>
</div> </div>
</div> </div>
<h1><?php echo get_bloginfo( 'name', 'display' ); ?></h1> <h1 class="header__title"><?php echo get_bloginfo( 'name', 'display' ); ?></h1>
<p class="description"><?php echo get_bloginfo( 'description', 'display' ); ?></p> <p class="header__description"><?php echo get_bloginfo( 'description', 'display' ); ?></p>
</header><!-- #masthead --> </header> <!-- .header -->
<div id="content" class="site-content"> <div id="content" class="site-content">

4
inc/actions/namespace.php
Unescape View File

@ -145,8 +145,8 @@ function enqueue_assets() {
'aldine/script', 'aldine/script',
'PB_A11y', 'PB_A11y',
[ [
'increase_label' => __( 'Increase Font Size', 'pressbooks-book' ), 'increase_label' => __( 'Increase Font Size', 'pressbooks-aldine' ),
'decrease_label' => __( 'Decrease Font Size', 'pressbooks-book' ), 'decrease_label' => __( 'Decrease Font Size', 'pressbooks-aldine' ),
] ]
); );
} }

10
inc/filters/namespace.php
Unescape View File

@ -25,7 +25,7 @@ function body_classes( array $classes ) {
/** Clean up class names for custom templates */ /** Clean up class names for custom templates */
$classes = array_map( function ( $class ) { $classes = array_map( function ( $class ) {
return preg_replace( [ '/-php$/', '/^page-template-/' ], '', $class ); return preg_replace( [ '/-php$/', '/^page-template-views/' ], '', $class );
}, $classes ); }, $classes );
return array_filter( $classes ); return array_filter( $classes );
@ -68,13 +68,13 @@ function adjust_menu( $items, $args ) {
$items .= sprintf( $items .= sprintf(
'<li><a href="%1$s">%2$s</a></li>', '<li><a href="%1$s">%2$s</a></li>',
wp_login_url( get_permalink() ), wp_login_url( get_permalink() ),
__( 'Sign in', 'pressbooks-aldine' ) __( 'Sign In', 'pressbooks-aldine' )
); );
if ( in_array( get_site_option( 'registration' ), [ 'user', 'all' ], true ) ) { if ( in_array( get_site_option( 'registration' ), [ 'user', 'all' ], true ) ) {
$items .= sprintf( $items .= sprintf(
'<li><a href="%1$s">%2$s</a></li>', '<li><a href="%1$s">%2$s</a></li>',
network_home_url( '/wp-signup.php' ), network_home_url( '/wp-signup.php' ),
__( 'Sign up', 'pressbooks-aldine' ) __( 'Sign Up', 'pressbooks-aldine' )
); );
} }
} else { } else {
@ -88,11 +88,11 @@ function adjust_menu( $items, $args ) {
$items .= sprintf( $items .= sprintf(
'<li><a href="%1$s">%2$s</a></li>', '<li><a href="%1$s">%2$s</a></li>',
wp_logout_url( get_permalink() ), wp_logout_url( get_permalink() ),
__( 'Sign out', 'pressbooks-aldine' ) __( 'Sign Out', 'pressbooks-aldine' )
); );
} }
/* @codingStandardsIgnoreStart $items .= sprintf( /* @codingStandardsIgnoreStart $items .= sprintf(
'<li class="header__search js-search"><a class="icon icon-search js-toggle-search"></a><div class="header__search__form">%s</div></li>', '<li class="header__search js-search"><div class="header__search__form">%s</div></li>',
get_search_form( false ) get_search_form( false )
); @codingStandardsIgnoreEnd */ ); @codingStandardsIgnoreEnd */
} }

1
package.json
Unescape View File

@ -55,7 +55,6 @@
"dependencies": { "dependencies": {
"aetna": "^0.2.0", "aetna": "^0.2.0",
"isotope-layout": "^3.0.4", "isotope-layout": "^3.0.4",
"jquery": "1.12.4 - 3",
"jquery-bridget": "^2.0.1", "jquery-bridget": "^2.0.1",
"js-cookie": "^2.2.0", "js-cookie": "^2.2.0",
"wpapi": "^1.1.2" "wpapi": "^1.1.2"

7
searchform.php
Unescape View File

@ -0,0 +1,7 @@
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label for="s">
<?php _ex( 'Search Catalog', 'label', 'pressbooks-aldine' ); ?>
<input id="s" type="search" class="search-field" value="<?php echo get_search_query(); ?>" name="s" />
</label>
<input type="submit" class="search-submit" value="<?php _ex( 'Search', 'submit button', 'pressbooks-aldine' ); ?>" />
</form>

2
yarn.lock
Unescape View File

@ -4396,7 +4396,7 @@ jquery-bridget@^2.0.1:
dependencies: dependencies:
jquery ">=1.4.2 <4" jquery ">=1.4.2 <4"
"jquery@1.12.4 - 3", "jquery@>=1.4.2 <4": "jquery@>=1.4.2 <4":
version "3.2.1" version "3.2.1"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787" resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"

Write Preview
Loading…
Cancel
Save