Book Viewer Component

Overview

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

Markup

DOM elements required to operate the book viewer

+- .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-0
|
+- .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

jQuery libraries

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

"littled" libraries

• $.littled
• $.bookviewer