Skip to content

Commit

Permalink
Merge remote branch 'upstream/componentry' into componentry
Browse files Browse the repository at this point in the history
  • Loading branch information
aronwoost committed Feb 2, 2011
2 parents 9d6fbce + 6008ead commit 066fd20
Show file tree
Hide file tree
Showing 7 changed files with 112 additions and 20 deletions.
28 changes: 18 additions & 10 deletions src/book.js
Expand Up @@ -148,6 +148,7 @@ Monocle.Book = function (dataSource) {
if (cIndex == 0) {
// On first page of book.
result.page = 1;
result.boundarystart = true;
} else {
// Moving backwards from current component.
result.load = true;
Expand All @@ -159,6 +160,7 @@ Monocle.Book = function (dataSource) {
if (cIndex == p.lastCIndex) {
// On last page of book.
result.page = lastPageNum['new'];
result.boundaryend = true;
} else {
// Moving forwards from current component.
result.load = true;
Expand All @@ -181,17 +183,23 @@ Monocle.Book = function (dataSource) {
function setPageAt(pageDiv, locus) {
locus = pageNumberAt(pageDiv, locus);
if (locus && !locus.load) {
var component = p.components[p.componentIds.indexOf(locus.componentId)];
pageDiv.m.place = pageDiv.m.place || new Monocle.Place();
pageDiv.m.place.setPlace(component, locus.page);

var evtData = {
page: pageDiv,
locus: locus,
pageNumber: pageDiv.m.place.pageNumber(),
componentId: locus.componentId
if (locus.boundarystart) {
pageDiv.m.reader.dispatchEvent('monocle:boundarystart', { locus: locus });
} else if (locus.boundaryend) {
pageDiv.m.reader.dispatchEvent('monocle:boundaryend', { locus: locus });
} else {
var component = p.components[p.componentIds.indexOf(locus.componentId)];
pageDiv.m.place = pageDiv.m.place || new Monocle.Place();
pageDiv.m.place.setPlace(component, locus.page);

var evtData = {
page: pageDiv,
locus: locus,
pageNumber: pageDiv.m.place.pageNumber(),
componentId: locus.componentId
}
pageDiv.m.reader.dispatchEvent("monocle:pagechange", evtData);
}
pageDiv.m.reader.dispatchEvent("monocle:pagechange", evtData);
}
return locus;
}
Expand Down
13 changes: 10 additions & 3 deletions src/dimensions/columns.js
Expand Up @@ -197,7 +197,7 @@ Monocle.Dimensions.Columns = function (pageDiv) {
var hbw = bdy.scrollWidth / 2;
return hbw;
}
} else if (Monocle.Browser.is.Gecko) {
} else if (k.SETX && Monocle.Browser.is.Gecko) {
var lc = bdy.lastChild;
while (lc && lc.nodeType != 1) {
lc = lc.previousSibling;
Expand Down Expand Up @@ -226,8 +226,13 @@ Monocle.Dimensions.Columns = function (pageDiv) {

function translateToLocus(locus) {
var offset = locusToOffset(locus);
var bdy = p.page.m.activeFrame.contentDocument.body;
Monocle.Styles.affix(bdy, "transform", "translateX("+offset+"px)");
if (k.SETX) {
var bdy = p.page.m.activeFrame.contentDocument.body;
Monocle.Styles.affix(bdy, "transform", "translateX("+offset+"px)");
} else {
var scrElem = scrollerElement();
scrElem.scrollLeft = 0 - offset;
}
return offset;
}

Expand Down Expand Up @@ -257,6 +262,8 @@ Monocle.Dimensions.Columns.BODY_STYLES = {
"column-fill": "auto"
}

Monocle.Dimensions.Columns.SETX = true; // Set to false for scrollLeft.

if (Monocle.Browser.has.iframeDoubleWidthBug) {
Monocle.Dimensions.Columns.BODY_STYLES["min-width"] = "200%";
} else {
Expand Down
4 changes: 2 additions & 2 deletions src/flippers/slider.js
Expand Up @@ -143,14 +143,14 @@ Monocle.Flippers.Slider = function (reader) {

if (dir == k.FORWARDS) {
if (getPlace().onLastPageOfBook()) {
//console.log("ON LAST PAGE");
p.reader.dispatchEvent('monocle:boundaryend');
resetTurnData();
return;
}
onGoingForward(boxPointX);
} else if (dir == k.BACKWARDS) {
if (getPlace().onFirstPageOfBook()) {
//console.log("ON FIRST PAGE");
p.reader.dispatchEvent('monocle:boundarystart');
resetTurnData();
return;
}
Expand Down
11 changes: 10 additions & 1 deletion src/reader.js
Expand Up @@ -455,7 +455,7 @@ Monocle.Reader = function (node, bookData, options, onLoadCallback) {
console.warn("No data for control: " + ctrl);
return;
}
if (controlData.hidden == false) {
if (showingControl(ctrl)) {
return;
}
for (var i = 0; i < controlData.elements.length; ++i) {
Expand Down Expand Up @@ -490,6 +490,12 @@ Monocle.Reader = function (node, bookData, options, onLoadCallback) {
}


function showingControl(ctrl) {
var controlData = dataForControl(ctrl);
return controlData.hidden == false;
}


// Internet Explorer does not permit custom events; we'll wait for a
// version of IE that supports the W3C model.
//
Expand Down Expand Up @@ -668,6 +674,7 @@ Monocle.Reader = function (node, bookData, options, onLoadCallback) {
API.addControl = addControl;
API.hideControl = hideControl;
API.showControl = showControl;
API.showingControl = showingControl;
API.dispatchEvent = dispatchEvent;
API.listen = listen;
API.deafen = deafen;
Expand All @@ -694,8 +701,10 @@ Monocle.Reader.FLIPPER_DEFAULT_CLASS = "Slider";
Monocle.Reader.FLIPPER_LEGACY_CLASS = "Legacy";
Monocle.Reader.DEFAULT_STYLE_RULES = [
"html * {" +
"-webkit-font-smoothing: subpixel-antialiased;" +
"text-rendering: auto !important;" +
"word-wrap: break-word !important;" +
"overflow: visible !important;" +
(Monocle.Browser.has.floatColumnBug ? "float: none !important;" : "") +
"}",
"body {" +
Expand Down
28 changes: 28 additions & 0 deletions test/bugs/webkit-out-of-bounds/index.html
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>Webkit fails to render outside document boundaries</title>
<style>
#frame {
width: 200px;
height: 300px;
}
</style>
</head>
<body>

<p>
This iframe has a width of 200px. It contains a document body with
a column-width of 200px, that is translateX'ed -200px. So it should
be showing the second column, but it is blank in latest Webkit nightlies.
</p>

<p>
Try changing the translateX to -199px: the second column is suddenly
visible.
</p>

<iframe id="frame" src="inner.html"></iframe>

</body>
</html>
31 changes: 31 additions & 0 deletions test/bugs/webkit-out-of-bounds/inner.html
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<title>Inner doc</title>
<style>
body {
margin: 0;
height: 284px; /* height of iframe - scrollbar height */
-webkit-transform: translateX(-200px);
-webkit-column-width: 200px;
}
p {
margin: 0;
}
</style>
</head>

<body>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere ligula et neque ullamcorper consectetur. Duis nec viverra magna. Nullam tellus diam, auctor et auctor at, fermentum quis mi. Nulla rhoncus porttitor ultrices. Nunc gravida, nisi nec consequat scelerisque, lectus eros sagittis erat, non ultrices ipsum nibh in quam. Donec dignissim, lacus sed cursus commodo, nibh enim sodales metus, lacinia dictum felis est tincidunt orci. Morbi pretium volutpat ante, ut ultricies nulla pharetra sed. Duis ac felis quis justo ullamcorper semper. Integer augue lacus, imperdiet eu euismod ut, vulputate vel purus. Donec bibendum felis id nisl auctor sit amet imperdiet quam mollis. Duis aliquam tellus odio, a varius lectus. Nunc a tortor augue, eu sollicitudin nibh. Phasellus ultricies, lacus eget tincidunt mattis, velit erat facilisis lacus, quis luctus arcu erat ut erat. Duis feugiat eros eu ligula ultricies non tincidunt tellus viverra. Donec ut eros augue, nec elementum elit. Pellentesque massa lectus, vulputate sed vehicula eget, volutpat eu augue. Cras fermentum turpis vitae erat vehicula et lacinia mi molestie.
</p>

<p>
Curabitur ac porttitor leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eget mauris id turpis ullamcorper blandit quis eget turpis. Nullam et molestie elit. Curabitur urna arcu, luctus a suscipit et, viverra vel orci. Morbi scelerisque erat quis massa blandit molestie. Fusce vitae velit a lacus suscipit tempus. In vitae nisl orci, vel ultrices diam. Duis pellentesque, massa sit amet eleifend sollicitudin, dolor orci semper urna, eget euismod tortor massa sit amet ante. Quisque sed varius lectus. Mauris facilisis blandit mattis. Ut id tortor ante, ac eleifend dui. Donec sit amet arcu quis neque aliquam euismod a tincidunt justo. Integer sagittis, neque sed aliquam bibendum, est ante vulputate lectus, in elementum felis tellus et nibh. Aliquam id ultrices nisl. Sed sodales lacinia interdum. Aenean pharetra tellus ante, aliquam consectetur ligula.
</p>
</div>
</body>
</html>


17 changes: 13 additions & 4 deletions test/flippers/index.html
Expand Up @@ -82,6 +82,11 @@
}
}

var fn = function (rdr) {
rdr.listen('monocle:boundarystart', function () { console.log('start!') });
rdr.listen('monocle:boundaryend', function () { console.log('end!') });
}

// Initialize the reader element.
Monocle.Events.listen(
window,
Expand All @@ -90,22 +95,26 @@
window.reader1 = Monocle.Reader(
'instant',
bookData,
{ flipper: Monocle.Flippers.Instant }
{ flipper: Monocle.Flippers.Instant },
fn
);
window.reader2 = Monocle.Reader(
'scroller',
bookData,
{ flipper: Monocle.Flippers.Scroller }
{ flipper: Monocle.Flippers.Scroller },
fn
);
window.reader3 = Monocle.Reader(
'slider',
bookData,
{ flipper: Monocle.Flippers.Slider }
{ flipper: Monocle.Flippers.Slider },
fn
);
window.reader4 = Monocle.Reader(
'legacy',
bookData,
{ flipper: Monocle.Flippers.Legacy }
{ flipper: Monocle.Flippers.Legacy },
fn
);
}
);
Expand Down

0 comments on commit 066fd20

Please sign in to comment.