Book Viewer Component

Overview

Documentation of the "book viewer" component used on damienjay.com and littledamien.com.

PHP

• Base class: AlbumViewer
  • [COMMON_CLASS_DIR]filters\AlbumViewer.php
• Derived classes
  • In their __construct() method, they will call the parent's constructor, passing in a content type id, page content type id, and the path to the directory where the page images are located.

Markup

DOM elements required to operate the book viewer

+- {header}
|
+- .minimized-header (hidden)
|
+- .page-title
|
+- .book-container > data-id, data-type
|  |
|  +- .alert-error
|  | 
|  +- .left-page > data-p, data-op
|  |  |
|  |  +- img
|  |
|  +- .right-page > data-p, data-op
|     |
|     +- img
|
+- .page-links-container
|  |
|  +- .prev-pg-btn > data-p, data-op
|  |
|  +- .page-number
|  |
|  +- .next-pg-btn > data-p, data-op
|  
+- .page-previews .scroll-pane .ui-widget .scroll-widget-header > data-id, data-type
|  |
|  +- .scroll-content
|  |  |
|  |  + .page-tn > data-p
|  |
|  +- .scroll-bar-wrap .ui-widget-content
|     |
|     +- .scroll-bar
|
+- .book-previews
| 
+- .preload .preload-0
|
+- .preload .preload-1

Shared templates

• [COMMON_TEMPLATE_DIR]_templates/content/book-viewer/page-set.php
• [COMMON_TEMPLATE_DIR]_templates/content/book-viewer/page-navigation.php
• [COMMON_TEMPLATE_DIR]_templates/content/book-viewer/page-previews.php
• [COMMON_TEMPLATE_DIR]_templates/content/book-viewer/book-previews.php

JavaScript

Page initialization

• $('.sketchbook-viewer').bookviewer('bindBookSetHandlers');
  Binds handlers for the page set, page previews, and book previews.
• $(document).bookviewer('bindKeyedNavigation');
  Configures navigation from page to page using right and left arrow keys, and right and left swipes on tablets.
• $('.header').bookviewer('toggleHeader', 4000);
  • With the 2nd argument value of 4000, replaces the "normal" header element with a minimized version after 4 seconds.
  • After the header is minimized, it can be restored by mousing over the minimized header.
  • After mousing out of the "normal" header it is again swapped with the minimized version.
  • The default minimized header element selector is .minimized-header and should be hidden initially.

jQuery libraries

• jQuery
• jQuery UI
• jQuery Mobile Support for tablet swipe navigation. (No CDN that I could find.)

"littled" libraries

• $.littled
• $.bookviewer