Skip to content

Commit

Permalink
Merge pull request #113 from readium/feature/vertical-writing-client-…
Browse files Browse the repository at this point in the history 
…rects

Visibility computations by client rectangles, vertical writing mode (column layout) #87
  • Loading branch information
@danielweck
danielweck committed Sep 9, 2014
2 parents 1b735f3 + 9a30f50 commit e3d096d
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 21 deletions.
69 changes: 55 additions & 14 deletions js/views/cfi_navigation_logic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,15 +61,30 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){
return options.paginationInfo && !!options.paginationInfo.rightToLeft;
}

/**
* @private
* Checks whether or not pages are rendered with vertical writing mode
*
* @returns {boolean}
*/
function isVerticalWritingMode() {
return options.paginationInfo && !!options.paginationInfo.isVerticalWritingMode;
}


/**
* @private
* Checks whether or not a (fully adjusted) rectangle is at least partly visible
*
* @param {Object} rect
* @param {Object} frameDimensions
* @param {boolean} [isVwm] isVerticalWritingMode
* @returns {boolean}
*/
function isRectVisible(rect, frameDimensions) {
function isRectVisible(rect, frameDimensions, isVwm) {
if (isVwm) {
return rect.top >= 0 && rect.top < frameDimensions.height;
}
return rect.left >= 0 && rect.left < frameDimensions.width;
}

Expand All @@ -81,7 +96,7 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){
*/
function getColumnFullWidth() {

if (!options.paginationInfo || options.paginationInfo.isVerticalWritingMode)
if (!options.paginationInfo || isVerticalWritingMode())
{
return $iframe.width();
}
Expand All @@ -98,6 +113,11 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){
* @returns {Object}
*/
function getVisibleContentOffsets() {
if(isVerticalWritingMode()){
return {
top: (options.paginationInfo ? options.paginationInfo.pageOffset : 0)
};
}
return {
left: (options.paginationInfo ? options.paginationInfo.pageOffset : 0)
* (isPageProgressionRightToLeft() ? -1 : 1)
Expand Down Expand Up @@ -169,6 +189,7 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){
}

var isRtl = isPageProgressionRightToLeft();
var isVwm = isVerticalWritingMode();
var columnFullWidth = getColumnFullWidth();
var frameDimensions = {
width: $iframe.width(),
Expand All @@ -179,15 +200,15 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){
// because of webkit inconsistency, that single rectangle should be adjusted
// until it hits the end OR will be based on the FIRST column that is visible
adjustRectangle(clientRectangles[0], frameDimensions, columnFullWidth,
isRtl, true);
isRtl, isVwm, true);
}

// for an element split between several CSS columns,
// both Firefox and IE produce as many client rectangles;
// each of those should be checked
var visibilityPercentage = 0;
for (var i = 0, l = clientRectangles.length; i < l; ++i) {
if (isRectVisible(clientRectangles[i], frameDimensions)) {
if (isRectVisible(clientRectangles[i], frameDimensions, isVwm)) {
visibilityPercentage = shouldCalculateVisibilityPercentage
? measureVisibilityPercentageByRectangles(clientRectangles, i)
: 100;
Expand All @@ -214,29 +235,36 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){
}

var isRtl = isPageProgressionRightToLeft();
var isVwm = isVerticalWritingMode();
var columnFullWidth = getColumnFullWidth();

var frameHeight = $iframe.height();
var frameWidth = $iframe.width();

if (spatialVerticalOffset) {
trimRectanglesByVertOffset(clientRectangles, spatialVerticalOffset,
frameHeight, columnFullWidth, isRtl);
frameHeight, columnFullWidth, isRtl, isVwm);
}

var firstRectangle = _.first(clientRectangles);
if (clientRectangles.length === 1) {
adjustRectangle(firstRectangle, {
height: frameHeight, width: frameWidth
}, columnFullWidth, isRtl);
}, columnFullWidth, isRtl, isVwm);
}

var leftOffset = firstRectangle.left;
if (isRtl) {
leftOffset = (columnFullWidth * (options.paginationInfo ? options.paginationInfo.visibleColumnCount : 1)) - leftOffset;
}
var pageIndex;

var pageIndex = Math.floor(leftOffset / columnFullWidth);
if (isVwm) {
var topOffset = firstRectangle.top;
pageIndex = Math.floor(topOffset / frameHeight);
} else {
var leftOffset = firstRectangle.left;
if (isRtl) {
leftOffset = (columnFullWidth * (options.paginationInfo ? options.paginationInfo.visibleColumnCount : 1)) - leftOffset;
}
pageIndex = Math.floor(leftOffset / columnFullWidth);
}

if (pageIndex < 0) {
pageIndex = 0;
Expand Down Expand Up @@ -387,13 +415,20 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){
* @param {Object} frameDimensions
* @param {number} columnFullWidth
* @param {boolean} isRtl
* @param {boolean} isVwm isVerticalWritingMode
* @param {boolean} shouldLookForFirstVisibleColumn
* If set, there'll be two-phase adjustment
* (to align a rectangle with a viewport)
*/
function adjustRectangle(rect, frameDimensions, columnFullWidth, isRtl,
function adjustRectangle(rect, frameDimensions, columnFullWidth, isRtl, isVwm,
shouldLookForFirstVisibleColumn) {

// Rectangle adjustment is not needed in VWM since it does not deal with columns
if (isVwm) {
return;
}

if (isRtl) {
columnFullWidth *= -1; // horizontal shifts are reverted in RTL mode
}
Expand All @@ -409,7 +444,7 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){
// (i.e., is the first visible one).
if (shouldLookForFirstVisibleColumn) {
while (rect.bottom >= frameDimensions.height) {
if (isRectVisible(rect, frameDimensions)) {
if (isRectVisible(rect, frameDimensions, isVwm)) {
break;
}
offsetRectangle(rect, columnFullWidth, -frameDimensions.height);
Expand All @@ -426,10 +461,16 @@ ReadiumSDK.Views.CfiNavigationLogic = function($viewport, $iframe, options){
* @param {number} frameHeight
* @param {number} columnFullWidth
* @param {boolean} isRtl
* @param {boolean} isVwm isVerticalWritingMode
*/
function trimRectanglesByVertOffset(
rects, verticalOffset, frameHeight, columnFullWidth, isRtl) {
rects, verticalOffset, frameHeight, columnFullWidth, isRtl, isVwm) {

//TODO: Support vertical writing mode
if (isVwm) {
return;
}

var totalHeight = _.reduce(rects, function(prev, cur) {
return prev + cur.height;
}, 0);
Expand Down
23 changes: 16 additions & 7 deletions js/views/reflowable_view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -497,11 +497,15 @@ ReadiumSDK.Views.ReflowableView = function(options, reader){


function updatePagination() {


// At 100% font-size = 16px (on HTML, not body or descendant markup!)
var MAXW = 550; //TODO user/vendor-configurable?
var MINW = 400;

var isDoublePageSyntheticSpread = ReadiumSDK.Helpers.deduceSyntheticSpread(_$viewport, _currentSpineItem, _viewSettings);

var forced = (isDoublePageSyntheticSpread === false) || (isDoublePageSyntheticSpread === true);
// excludes 0 and 1 truthy values which denote non-forced result
// excludes 0 and 1 falsy/truthy values which denote non-forced result

// console.debug("isDoublePageSyntheticSpread: " + isDoublePageSyntheticSpread);
// console.debug("forced: " + forced);
Expand All @@ -512,8 +516,17 @@ ReadiumSDK.Views.ReflowableView = function(options, reader){
// console.debug("TRYING SPREAD INSTEAD OF SINGLE...");
}

_paginationInfo.visibleColumnCount = _htmlBodyIsVerticalWritingMode ? 1 : (isDoublePageSyntheticSpread ? 2 : 1);
_paginationInfo.visibleColumnCount = isDoublePageSyntheticSpread ? 2 : 1;

if (_htmlBodyIsVerticalWritingMode)
{
MAXW *= 2;
isDoublePageSyntheticSpread = false;
forced = true;
_paginationInfo.visibleColumnCount = 1;
// console.debug("Vertical Writing Mode => single CSS column, but behaves as if two-page spread");
}

if(!_$epubHtml) {
return;
}
Expand All @@ -529,10 +542,6 @@ ReadiumSDK.Views.ReflowableView = function(options, reader){

var filler = 0;

// At 100% font-size = 16px (on HTML, not body or descendant markup!)
var MAXW = 550; //TODO user/vendor-configurable?
var MINW = 400;

// var win = _$iframe[0].contentDocument.defaultView || _$iframe[0].contentWindow;
// var htmlBodyComputedStyle = win.getComputedStyle(_$htmlBody[0], null);
// if (htmlBodyComputedStyle)
Expand Down

0 comments on commit e3d096d

Please sign in to comment.