Browse Source

Add carousel for latest books.

pull/9/head
Ned Zimmerman 7 years ago
parent
commit
7b6578d4f8
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
  1. 7
      app/controllers/FrontPage.php
  2. 2
      app/setup.php
  3. 1
      package.json
  4. 1
      resources/assets/scripts/main.js
  5. 78
      resources/assets/scripts/routes/home.js
  6. 38
      resources/assets/styles/components/_buttons.scss
  7. 1
      resources/assets/styles/components/_grid.scss
  8. 5
      resources/assets/styles/layouts/_header.scss
  9. 97
      resources/assets/styles/layouts/_pages.scss
  10. 2
      resources/assets/styles/main.scss
  11. 14
      resources/views/front-page.blade.php
  12. 35
      resources/views/partials/front-page-catalog.blade.php
  13. 8
      yarn.lock

7
app/controllers/FrontPage.php

@ -62,12 +62,9 @@ class FrontPage extends Controller
get_theme_mod('pb_front_page_catalog_title');
}
public static function latestBooks($offset = null)
public static function latestBooks($page = 1, $per_page = 3)
{
$path = ($offset) ?
"/wp-json/pressbooks/v2/books?per_page=3&page=$offset" :
'/wp-json/pressbooks/v2/books?per_page=3';
$books = wp_remote_get(network_home_url($path));
$books = wp_remote_get(network_home_url("/wp-json/pressbooks/v2/books?per_page=$per_page&page=$page"));
$books = json_decode($books['body'], true);
return $books;
}

2
app/setup.php

@ -104,7 +104,7 @@ add_action('widgets_init', function () {
$config = [
'before_widget' => '<section class="widget %1$s %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3>',
'before_title' => '<h3 class="tc ttu">',
'after_title' => '</h3>'
];
register_sidebar([

1
package.json

@ -128,6 +128,7 @@
},
"dependencies": {
"jquery": "1.12.4 - 3",
"slick-carousel": "^1.7.1",
"tachyons-sass": "~4.7",
"wpapi": "^1.1.2"
}

1
resources/assets/scripts/main.js

@ -1,5 +1,6 @@
// import external dependencies
import 'jquery';
import 'slick-carousel';
// import local dependencies
import Router from './util/Router';

78
resources/assets/scripts/routes/home.js

@ -3,37 +3,63 @@ const WPAPI = require( 'wpapi' );
export default {
init() {
// JavaScript to be fired on the home page
let books = $('.books');
let pb = new WPAPI({ endpoint: 'http://pressbooks.dev/wp-json' });
pb.books = pb.registerRoute( 'pressbooks/v2', '/books/' );
const total = parseInt($('.navigation').attr('data-total'));
$('.latest-books .navigation .next, .latest-books .navigation .previous').live('click', (event) => {
event.preventDefault();
const page = parseInt($(event.currentTarget).attr('data-page'));
pb.books().perPage(3).page(page).then(function(data) {
let books = '', nav = '';
data.forEach((book) => {
books = books + `<div class="book">
<a class="subject" href="">Fiction</a>
<a class="title" href="${book.link}">${book.metadata.name}</a>
<a class="read-more" href="${book.link}">About this book &rarr;</a>
</div>`;
function loadNextPage() {
let nextpage = books.attr('data-next-page');
if (typeof nextpage !== typeof undefined && nextpage !== false) {
const total = parseInt($('.books').attr('data-total-pages'));
const page = parseInt($('.books').attr('data-next-page'));
pb.books().perPage(3).page(page).then(function(data) {
data.forEach((book) => {
books.slick('slickAdd', `<div class="book w-100">
<p class="subject tc ma0"><a href="">Fiction</a></p>
<p class="title tc ma0"><a href="${book.link}">${book.metadata.name}</a></p>
<p class="read-more tl ma0"><a href="${book.link}">About this book &rarr;</a></p>
</div>`); // TODO Localize
});
if (page < total) {
books.attr('data-next-page', page + 1);
} else {
books.removeAttr('data-next-page');
}
}).catch(function(err) { // TODO handle error
console.error(err); // eslint-disable-line
});
$('.books').html(books);
if (page > 1 && page < total) {
nav = nav + `<a class="previous f1" data-page="${page - 1}" href="/page/${page - 1}/">&larr;</a>
<a class="next f1" data-page="${page + 1}" href="/page/${page + 1}/">&rarr;</a>`;
} else if (page > 1 && page === total) {
nav = nav + `<a class="previous f1" data-page="${page - 1}" href="/page/${page - 1}/">&larr;</a>`;
} else {
nav = nav + `<a class="next f1" data-page="${page + 1}" href="/page/${page + 1}/">&rarr;</a>`;
}
$('.latest-books .navigation').html(nav);
}).catch(function(err) {
console.error(err); // eslint-disable-line
});
}
}
books.on('init', () => {
loadNextPage();
})
books.slick({
slidesToShow: 1,
slidesToScroll: 1,
infinite: false,
mobileFirst: true,
prevArrow: '.latest-books .navigation .previous',
nextArrow: '.latest-books .navigation .next',
responsive: [
{
breakpoint: 960,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
},
},
],
variableWidth: true,
});
books.on('afterChange', (slick, currentSlide) => {
if((parseInt($('.slick-active:last').attr('data-slick-index')) + 1) === currentSlide.slideCount) {
loadNextPage(true);
}
})
},
finalize() {
// JavaScript to be fired on the home page, after the init JS
},
};

38
resources/assets/styles/components/_buttons.scss

@ -22,6 +22,44 @@
background: $white;
color: $brand-primary;
}
&.button-wide {
width: 305px;
}
&.button-outline {
background: $white;
color: $brand-primary;
&:hover,
&:focus {
background: $brand-primary;
color: $white;
}
}
&.button-secondary {
border: 2px solid $brand-secondary;
background: $brand-secondary;
color: $white;
&:hover,
&:focus {
background: $white;
color: $brand-secondary;
}
&.button-outline {
background: $white;
color: $brand-secondary;
&:hover,
&:focus {
background: $brand-secondary;
color: $white;
}
}
}
}
@media (min-width: $medium) {

1
resources/assets/styles/components/_grid.scss

@ -3,4 +3,5 @@
flex-direction: column;
align-items: center;
width: 100%;
padding: 0 7.5px;
}

5
resources/assets/styles/layouts/_header.scss

@ -3,6 +3,7 @@
.container {
height: 560px;
max-width: 1440px;
}
.toggle-menu {
@ -123,9 +124,9 @@
.primary-navigation {
top: 40px;
max-width: 1440px;
height: 40px;
margin-left: 0;
max-width: 1440px;
margin: 0 auto;
a {
display: inline-block;

97
resources/assets/styles/layouts/_pages.scss

@ -1,19 +1,11 @@
.home {
.block {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 12.5px;
width: 100%;
height: 445px;
background-color: $white;
h3 {
font-size: em(30);
font-weight: 600;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
line-height: (36/30);
color: $brand-primary;
@ -29,40 +21,44 @@
}
}
p {
.widget p {
font-size: em(16);
line-height: (32/16);
text-align: center;
}
.inside {
width: 100%;
text-align: center;
}
&.latest-books {
box-shadow: unset;
width: 100%;
height: auto;
padding-bottom: 50px;
h3 {
margin-top: 70px;
}
.inside {
width: 100%;
padding: 0;
}
.navigation {
a {
color: $brand-secondary;
&.slick-disabled {
opacity: 0;
}
}
}
}
.books {
display: flex;
flex-direction: row;
justify-content: center;
.book {
width: 367px;
.book,
.slick-slide {
width: 100vw;
height: 386px;
margin: 113px 30px 0;
margin: 45px 0 0;
padding: 0 29.5px;
border: solid 2px $brand-secondary;
background-color: $brand-secondary;
// transition: 0.4s all;
a {
font-family: $font-family-sans-serif;
@ -71,26 +67,19 @@
}
.subject {
display: block;
height: 91px;
margin-top: 22px;
margin-top: 24px;
font-size: em(24);
text-align: center;
}
.title {
display: block;
height: 329px - 115px;
font-size: em(30);
font-weight: 500;
text-align: center;
}
.read-more {
display: block;
height: auto;
font-size: em(18);
text-align: left;
}
}
}
@ -182,6 +171,29 @@
top: 2020px;
}
}
.block.latest-books {
width: 100%;
.inside {
width: 100%;
}
.books {
flex-direction: row;
justify-content: space-between;
}
.book,
.slick-slide {
width: 300px;
margin-right: 30px;
&:last-child {
margin-right: 0;
}
}
}
}
}
@ -198,6 +210,25 @@
top: 2150px;
}
}
.block.latest-books {
width: 1200px;
margin-bottom: 0;
.inside {
width: 100%;
}
.book,
.slick-slide {
width: 367px;
margin-right: 50px;
&:last-child {
margin-right: 0;
}
}
}
}
}

2
resources/assets/styles/main.scss

@ -9,7 +9,7 @@
* Prefix your imports with `~` to grab from node_modules/
* @see https://github.com/webpack-contrib/sass-loader#imports
*/
// @import "~some-node-module";
@import "~slick-carousel/slick/slick";
/** Import theme styles */
@import "common/functions";

14
resources/views/front-page.blade.php

@ -2,7 +2,7 @@
@section('content')
@if($block_count === 0)
<div class="block block-1">
<div class="block block-1 flex flex-column items-center justify-center p-0 w-100">
<div class="inside">
<h3>{{ __('About Pressbooks', 'aldine') }}</h3>
<p>{{ __('Pressbooks is easy-to-use book writing software that lets you create a book in all the formats you need to publish.', 'aldine')}}</p>
@ -10,8 +10,8 @@
</div>
@elseif($block_count < 4)
@for($i = 0; $i < $block_count; $i++)
<div class="block block-{{ $i + 1 }}">
<div class="inside">
<div class="block block-{{ $i + 1 }} flex flex-column items-center justify-center p-0 w-100">
<div class="inside tc">
@php(dynamic_sidebar($blocks[$i]))
</div>
</div>
@ -19,16 +19,16 @@
@elseif($block_count === 4)
<div class="one-two">
@for($i = 0; $i < 2; $i++)
<div class="block block-{{ $i + 1 }}">
<div class="inside">
<div class="block block-{{ $i + 1 }} flex flex-column items-center justify-center p-0 w-100">
<div class="inside tc">
@php(dynamic_sidebar($blocks[$i]))
</div>
</div>
@endfor
</div>
@for($i = 2; $i < $block_count; $i++)
<div class="block block-{{ $i + 1 }}">
<div class="inside">
<div class="block block-{{ $i + 1 }} flex flex-column items-center justify-center p-0 w-100">
<div class="inside tc">
@php(dynamic_sidebar($blocks[$i]))
</div>
</div>

35
resources/views/partials/front-page-catalog.blade.php

@ -1,22 +1,27 @@
<div class="block latest-books">
<div class="block latest-books w-100">
<div class="inside">
<h3>{{ $latest_books_title }}</h3>
<div class="books">
@foreach( FrontPage::latestBooks( $current_page ) as $book )
<div class="book">
<a class="subject" href="">Fiction</a>
<a class="title" href="{{ $book['link'] }}">{{ $book['metadata']['name'] }}</a>
<a class="read-more" href="{{ $book['link'] }}">{{ __('About this book &rarr;', 'aldine') }}</a>
<h3 class="tc ttu">{{ $latest_books_title }}</h3>
<div class="books flex flex-column justify-center flex-row-m justify-between-m" data-total-pages="{{ $total_pages }}" data-next-page="2">
@foreach(FrontPage::latestBooks( $current_page, 3 ) as $book)
<div class="book w-100">
<p class="subject tc ma0">
<a href="">Fiction</a>
</p>
<p class="title tc ma0">
<a href="{{ $book['link'] }}">{{ $book['metadata']['name'] }}</a>
</p>
<p class="read-more tl ma0">
<a href="{{ $book['link'] }}">{{ __('About this book &rarr;', 'aldine') }}</a>
</p>
</div>
@endforeach
</div>
<nav class="navigation mt2" data-total="{{ $total_pages }}">
@if($previous_page)
<a class="previous f1" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/") }}">&larr;</a>
@endif
@if($next_page)
<a class="next f1" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/") }}">&rarr;</a>
@endif
<nav class="navigation flex flex-row justify-between mt2 tr" data-total="{{ $total_pages }}">
<a class="previous f1 @if(!$previous_page) slick-disabled @endif" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/") }}">&larr;</a>
<a class="next f1" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/") }}">&rarr;</a>
</nav>
<div class="catalog-link tc">
<a class="button button-outline button-wide" href="{{ network_home_url('/catalog/') }}">{{ __('View Complete Catalog', 'aldine') }}</a>
</div>
</div>
</div>

8
yarn.lock

@ -3221,7 +3221,7 @@ jpegtran-bin@^3.0.0:
bin-wrapper "^3.0.0"
logalot "^2.0.0"
"jquery@1.12.4 - 3":
"jquery@1.12.4 - 3", jquery@>=1.7.2:
version "3.2.1"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"
@ -5608,6 +5608,12 @@ slice-ansi@0.0.4:
version "0.0.4"
resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
slick-carousel@^1.7.1:
version "1.7.1"
resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.7.1.tgz#51f5489bbb52212542ccbe9f42689f818bd29ed2"
dependencies:
jquery ">=1.7.2"
sntp@1.x.x:
version "1.0.9"
resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"

Loading…
Cancel
Save