Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

a huge number of changes. Page rendering. Text sizing. Better centeri…

…ng. Other stuff.
  • Loading branch information...
commit 906bb6040795680ab1cf2e4306451b26dc4574c3 1 parent 715209e
@blaine authored
View
106 book.css
@@ -10,64 +10,66 @@ a {
}
div#container {
-/*
- width: 790px; // (page.width * 2) + 40
- height: 610px; // page.height + 82 */
- width: 841px;
- height: 650px;
- margin: 0 auto;
- padding: 0;
+ width: 912px; /* (page.width * 2) */
+ height: 656px; /* page.height + 20 */
display: none;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+ border: 0;
+ padding: 0;
+/* -webkit-box-shadow: 2px 0 2px #000; */
}
-div.page {
- margin: 15px 0 10px;
- /*
- border: 1px solid black;
- width: 375px;
- height: 528px; */
- width: 420px;
- height: 630px;
-/* background-color: #f7f6f4; */
- background-color: #faf6f0;
-}
+div#backgroundDiv {
+ width: 952px;
+ height: 686px;
+ margin: auto;
+ position: absolute;
+ top: 50%;
+ bottom: 50%;
+ left: 0;
+ right: 0;
+ z-index: -1;
+ text-align: center;
+/* background-image:
+url('images/tl.png'), url('images/tml.png'), url('images/tcl.png'), url('images/tcr.png'), url('images/tmr.png'), url('images/tr.png'),
+url('images/sl.png'), url('images/sr.png'),
+url('images/bl.png'), url('images/bml.png'), url('images/bcl.png'), url('images/bcr.png'), url('images/bmr.png'), url('images/br.png');
-div.content {
- height: 530px;
+ background-size: 56px 50px, 365px 50px, 55px 50px, 55px 50px, 365px 50px, 56px 50px,
+ 56px 586px, 56px 586px,
+ 56px 50px, 365px 50px, 55px 50px, 55px 50px, 365px 50px, 56px 50px;
+
+ background-repeat: no-repeat;
+ background-position: top left, top 56px, top 421px, top 476px, top 531px, top right,
+ 50px left, 50px right,
+ bottom left, bottom 56px, bottom 421px, bottom 476px, bottom 531px, bottom right;
+ background-color: #faf6f0; */
}
-div#leftpage {
- float: left;
-/* margin-left: 15px; */
- margin-left: 0;
+div#background canvas {
+ margin: auto;
}
-div#rightpage {
- float: right;
-/* margin-right: 15px; */
- margin-right: 0;
- border-left: 1px solid #9a9690;
-}
-div#pagenav {
- clear: both;
- margin: 0 15px;
- height: 40px;
-}
-div#pagenav * {
+div.page {
float: left;
- height: 100%;
- vertical-align: middle;
-}
-div#pagenav_left {
- width: 15px;
+ margin: 0;
}
-div#pagenav_content {
- width: 730px;
- text-align: center;
+
+div#leftpage {
+ /* this is a hack. the positioning needs work. */
+ margin-left: 1.25em;
+/* background-image: -webkit-gradient(linear, right top, left top, from(rgb(239, 235, 230)), color-stop(0.05, rgb(250, 246, 240))); */
}
-div#pagenav_right {
- width: 15px;
- text-align: right;
+
+div#rightpage {
+ /* this is a hack tied to the above left-page hack. the positioning needs work. */
+ margin-left: 0.25em;
+/* background-image: -webkit-gradient(linear, left top, right top, from(rgb(239, 235, 230)), color-stop(0.05, rgb(250, 246, 240))); */
}
div.content {
@@ -84,21 +86,15 @@ div.content pre {
div.content * {
line-height: 150%;
- font-size: 12px;
+ font-size: 1em;
}
-/*div.content * {
- margin: 0 0 1em 0;
- padding: 0;
- font-size: 12px;
- font-family: Serif, Georgia;
- line-height: 150%;
-}*/
div.header {
font-size: 80%;
vertical-align: middle;
position: relative;
margin-top: 1em;
+ height: 1em;
}
div.header h1 {
font-size: 120%;
View
109 index.html
@@ -2,8 +2,12 @@
<head>
<link rel="stylesheet" type="text/css" media="screen" href="book.css" />
- <link rel="stylesheet" type="text/css" media="all and (orientation:portrait)" href="portrait.css" />
+ <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1024px) and (orientation:portrait)" href="portrait.css" />
+ <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1024px) and (orientation: landscape)" href="landscape.css" />
+
<meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="viewport" content="width=930, user-scalable=no" />
+
<script type="text/javascript" src="js/inflate.js"></script>
<script type="text/javascript" src="js/sax.js"></script>
<script type="text/javascript" src="js/zip.js"></script>
@@ -14,12 +18,12 @@
<script type="text/javascript" src="js/section.js"></script>
<script type="text/javascript" src="js/pageHandler.js"></script>
- <!-- Hyphenation is currently [not] disabled. It shall return! -->
+ <!-- Hyphenation. -->
<script src="js/Hyphenator.js" type="text/javascript"></script>
<script src="js/patterns/en.js" type="text/javascript"></script>
- <!-- -->
<script src="js/swipe.js"></script>
+ <script src="js/pageRenderer.js"></script>
<script type="text/javascript">
@@ -28,8 +32,97 @@
loadBook(epuburl);
}
+ function setPageSize(pageRatio) {
+
+ if (!pageRatio) pageRatio = Math.sqrt(Math.E);
+
+ var width = (window.innerWidth - 20) / 2;
+ var height = window.innerHeight - 20;
+
+ var pageHeight = height,
+ pageWidth = width;
+
+ if (height / pageRatio > width) {
+ // We'll need to constrain the height.
+ pageHeight = width * pageRatio;
+/* } else if (height / pageRatio > width * 1.5) {
+ // We have way more height than width. Go to a one-page view.
+ pageHeight = width * pageRatio; */
+ } else {
+ // Constrain the width, 2-page.
+ pageWidth = height / pageRatio;
+ }
+
+ console.log("Width/Height: " + width + "/" + height + ", pageWidth/pageHeight: " + pageWidth + "/" + pageHeight);
+
+ var container = document.getElementById('container');
+ container.style.width = pageWidth * 2;
+ container.style.height = pageHeight;
+
+ var background = document.getElementById('backgroundDiv');
+ background.style.width = pageWidth * 2;
+ background.style.height = pageHeight;
+
+ var canvas = document.getElementById('background');
+ canvas.width = pageWidth * 2;
+ canvas.height = pageHeight;
+
+ var pages = document.getElementsByClassName('page');
+
+ for (var i = 0, l = pages.length; i < l; i++) {
+ pages[i].style.width = pageWidth - Math.log(22) * 8;
+ pages[i].style.height = pageHeight - Math.log(22) * 10;
+ pages[i].style.marginTop = '0px';
+
+ var header = document.getElementsByClassName('header')[0];
+ var headerHeight = 24 * 2; // hard coded for now, until we properly size the header...
+
+ var contents = document.getElementsByClassName('content');
+ contents[0].style.height = pageHeight - (Math.log(22) * 10) - headerHeight;
+ }
+
+ // This needs tweaking, because it should actually be done once we know
+ // which font will be used as the body font for the book. This is a reasonable
+ // approximation, though, and will do for now.
+
+ var sizerElement = document.createElement('p');
+
+ // Rough statistical relevancy of letters [in english]. This will give us a more-accurate approximation of average line length.
+ var letters = "aaaaaaaabbcccddddeeeeeeeeeeeeeffgghhhhhhiiiiiiijkllllmmnnnnnnnooooooooppqrrrrrrsssssstttttttttuuuvwxyyz";
+ sizerElement.textContent = letters;
+ sizerElement.style.left = '0';
+ sizerElement.style.top = '0';
+ sizerElement.style.position = 'absolute';
+ sizerElement.style.margin = '0';
+ sizerElement.style.padding = '0';
+ document.body.appendChild(sizerElement);
+
+ // Our ideal line width is 66 characters.
+console.log('offsetwidth: ' + sizerElement.offsetWidth);
+console.log('letters.length: ' + letters.length);
+ var idealLineWidth = (sizerElement.offsetWidth / letters.length) * 66;
+ var measuredFontSize = document.defaultView.getComputedStyle(sizerElement, null).getPropertyValue('font-size').toString().replace('px', '');
+console.log('measured font size: ' + measuredFontSize);
+
+ // now that we have that, remove the sizer element.
+ document.body.removeChild(sizerElement);
+
+ var pageSize = pageWidth - Math.log(22) * 8
+console.log('content width: ' + pageSize);
+
+ // multiply the actual fontSize by our sizing ratio
+ var pixelFontSize = (measuredFontSize * pageSize / idealLineWidth) + 'px';
+console.log('pixelFontSize: ' + pixelFontSize);
+
+ // and apply that to the document body. All other sizes should be in ems.
+ document.body.style.fontSize = pixelFontSize;
+ }
+
var loadBook = function (epub) {
+ setPageSize();
+
+
selector.style.display = 'none';
container.style.display = 'block';
@@ -177,14 +270,15 @@
</div>
</div>
+ <div id="backgroundDiv">
+ <canvas id="background" width="952" height="686"></canvas>
+ </div>
+
<div id="container">
<div id="leftpage" class="page">
<div class="left header">
<span class="left pagenum"></span> &#183;
<h1 id="book_title"></h1>
-<!-- <span class="discoverable">
- <a href="javascript:pageHandler.prevPage()" title="Previous Page">&#8617;</a>
- </span> -->
</div>
<div id="leftcontent" class="left content"></div>
<div class="left footer">
@@ -195,9 +289,6 @@ <h1 id="chapter_heading"></h1>
<div id="rightpage" class="page landscape">
<div class="right header">
-<!-- <span class="discoverable">
- <a href="javascript:pageHandler.nextPage()" title="Next Page">&#8618;</a>
- </span> -->
<h1 id="author_heading"></h1> &#183;
<span class="right pagenum"></span>
</div>
View
22 js/pageHandler.js
@@ -78,8 +78,27 @@ var PageHandler = function (book, displayElements, pageNumbers, chapterName) {
}
};
+ // TODO: This is a hard-coded hack, should be made modular.
+ this.pageRenderer = function () {
+ var totalPageCount = pageCounts.length;
+ for (var i = pageCounts.length - 1; i >= 0; i--) {
+ if (!pageCounts[i]) continue;
+
+ totalPageCount = pageCounts[i];
+ break;
+ }
+
+ var currPage = pageCounts[currSection] + sections[currSection].currPage;
+ if (!currPage) currPage = Math.min(currSection, totalPageCount - 1);
+ if (currPage >= totalPageCount) currPage = currPage - 1;
+
+ drawPct(currPage / totalPageCount);
+ };
+
this.pageDisplayer = function (pageIdx) {
+ this.pageRenderer();
+
// Expect to get called within 50 ms, or display the loading indicator.
showLoadingIndicator(50);
waiting++;
@@ -106,7 +125,7 @@ var PageHandler = function (book, displayElements, pageNumbers, chapterName) {
// Move to the next section if we're at the end of this one.
if (sections[currSection].isLastPage()) {
- if (sections[currSection + 1]) {
+ if (sections.length > currSection + 1) {
currSection += 1;
sections[currSection].seekBeginning();
} else {
@@ -122,6 +141,7 @@ var PageHandler = function (book, displayElements, pageNumbers, chapterName) {
this.prevPage = function () {
+ // Don't go back a page if we're already trying to do a page movement.
if (waiting > 0) return;
if (sections[currSection].currPage <= self.displayElements.length) {
View
157 js/pageRenderer.js
@@ -0,0 +1,157 @@
+var drawLeftPage = function (canvas,
+ center, top, width, height,
+ curlRadiusX, curlRadiusY,
+ vOffset, hOffset, maxCurlRadiusY) {
+
+ canvas.save();
+
+ // Left Page
+ var bottom = top + height,
+ left = center - width - hOffset;
+
+ canvas.beginPath();
+ canvas.moveTo(center, top + curlRadiusY + vOffset);
+
+ // Spine
+ canvas.lineTo(center, bottom + maxCurlRadiusY);
+ canvas.lineTo(center, bottom + maxCurlRadiusY);
+
+ // Bottom curl.
+ canvas.bezierCurveTo(center - curlRadiusX / 4 - hOffset, bottom + vOffset - curlRadiusY / 2,
+ center - curlRadiusX - hOffset, bottom + vOffset - curlRadiusY / 2,
+ center - curlRadiusX - hOffset, bottom + vOffset - curlRadiusY / 2);
+
+ // Bottom Page Edge
+ canvas.bezierCurveTo((center + left) / 2, bottom + vOffset / 2 - curlRadiusY / 2,
+ (center + left) / 2, bottom + vOffset,
+ left + 1, bottom + vOffset);
+// canvas.lineTo(left + 1, bottom + vOffset);
+
+ // Left Edge with Rounded Corners
+ canvas.quadraticCurveTo(left, bottom + vOffset, left, bottom + vOffset - 1);
+ canvas.lineTo(left, top + vOffset + 1);
+ canvas.quadraticCurveTo(left + 1, top + vOffset, left, top + vOffset);
+
+ // Top Page Edge
+ canvas.bezierCurveTo((center + left) / 2, top + vOffset,
+ (center + left) / 2, top + vOffset / 2 + curlRadiusY / 2,
+ center - curlRadiusX, top + vOffset);
+ // canvas.lineTo(center - curlRadiusX, top + vOffset + 1);
+
+ // Top Curl
+ canvas.bezierCurveTo(center - curlRadiusX / 2, top + vOffset,
+ center, top + vOffset + curlRadiusY / 2,
+ center, top + curlRadiusY + vOffset);
+
+ var strokeGradient = canvas.createLinearGradient(left, bottom, center, 0);
+ strokeGradient.addColorStop(0, 'rgb(194, 190, 184)');
+ strokeGradient.addColorStop(1 - (curlRadiusX / width * 0.5), 'rgb(234, 230, 224)');
+ canvas.strokeStyle = strokeGradient;
+
+ var fillGradient = canvas.createLinearGradient(left, 0, center, 0 + curlRadiusX / 8);
+ fillGradient.addColorStop(1 - (curlRadiusX / width * 0.8), 'rgb(250, 246, 240)');
+ fillGradient.addColorStop(1, 'rgb(234, 230, 224)');
+ canvas.fillStyle = fillGradient;
+
+ canvas.stroke();
+ canvas.fill();
+
+ canvas.closePath();
+
+ canvas.restore();
+}
+
+var drawRightPage = function (canvas,
+ center, top, width, height,
+ curlRadiusX, curlRadiusY,
+ vOffset, hOffset, maxCurlRadiusY) {
+
+ canvas.save();
+
+ // Left Page
+ var bottom = top + height,
+ right = center + width + hOffset;
+
+ canvas.beginPath();
+ canvas.moveTo(center, top + curlRadiusY + vOffset);
+
+ // Spine
+ canvas.lineTo(center, bottom + maxCurlRadiusY);
+ canvas.lineTo(center, bottom + maxCurlRadiusY);
+
+ // Bottom curl.
+ canvas.bezierCurveTo(center + curlRadiusX / 2 + hOffset, bottom + vOffset - curlRadiusY / 2,
+ center + curlRadiusX + hOffset, bottom + vOffset - curlRadiusY / 2,
+ center + curlRadiusX + hOffset, bottom + vOffset - curlRadiusY / 2);
+
+ // Bottom Page Edge
+ canvas.bezierCurveTo((center + right) / 2, bottom + vOffset / 2 - curlRadiusY / 2,
+ (center + right) / 2, bottom + vOffset,
+ right - 1, bottom + vOffset);
+// canvas.lineTo(right - 1, bottom + vOffset);
+
+ // Left Edge with Rounded Corners
+ canvas.quadraticCurveTo(right, bottom + vOffset, right, bottom + vOffset - 1);
+ canvas.lineTo(right, top + vOffset + 1);
+ canvas.quadraticCurveTo(right - 1, top + vOffset, right, top + vOffset);
+
+ // Top Page Edge
+ canvas.bezierCurveTo((center + right) / 2, top + vOffset / 2 + curlRadiusY / 2,
+ (center + right) / 2, top + vOffset,
+ center + curlRadiusX, top + vOffset);
+ // canvas.lineTo(center + curlRadiusX, top + vOffset);
+
+ // Top Curl
+ canvas.bezierCurveTo(center + curlRadiusX / 2, top + vOffset,
+ center, top + vOffset + curlRadiusY / 2,
+ center, top + curlRadiusY + vOffset);
+
+ var strokeGradient = canvas.createLinearGradient(right, bottom, center, 0);
+ strokeGradient.addColorStop(0, 'rgb(194, 190, 184)');
+ strokeGradient.addColorStop(1 - (curlRadiusX / width * 0.5), 'rgb(234, 230, 224)');
+ canvas.strokeStyle = strokeGradient;
+
+ var fillGradient = canvas.createLinearGradient(right, 0, center, 0);
+ fillGradient.addColorStop(1 - (curlRadiusX / (width * 0.8)), 'rgb(250, 246, 240)');
+ fillGradient.addColorStop(1, 'rgb(234, 230, 224)');
+ canvas.fillStyle = fillGradient;
+
+ canvas.stroke();
+ canvas.fill();
+
+ canvas.closePath();
+
+ canvas.restore();
+}
+
+function drawPct(pct) {
+ var canvas = document.getElementById('background');
+ var context = canvas.getContext('2d');
+
+ var width = canvas.width / 2;
+ var height = canvas.height;
+
+ context.clearRect(0, 0, window.innerWidth, window.innerHeight);
+
+ pct = Math.min(1, pct);
+ pct = Math.max(0, pct);
+
+ var thickness = 20;
+
+ for (var i = thickness; i >= Math.ceil(pct * thickness); i--) {
+ var x = Math.max(1, i);
+ drawRightPage(context,
+ width, 0, width - Math.log(thickness + 1) * 10, height - Math.log(thickness) * 6,
+ Math.log((thickness - x) + 2) * 10, Math.log((thickness - x) + 2) * 4, Math.log(x + 2) * 4, Math.log(x + 2) * 8,
+ Math.log(thickness + 2) * 4);
+ }
+
+ for (var i = 0; i <= Math.ceil(pct*thickness); i++) {
+ var x = Math.max(1, thickness - i);
+ drawLeftPage(context,
+ width, 0, width - Math.log(thickness + 1) * 10, height - Math.log(thickness) * 6,
+ Math.log((thickness - x) + 2) * 10, Math.log((thickness - x) + 2) * 4,
+ Math.log(x + 2) * 4, Math.log(x + 2) * 8,
+ Math.log(thickness + 2) * 4);
+ }
+}
View
4 js/swipe.js
@@ -26,21 +26,17 @@ var swipe = function () {
if (changeX < 0) {
// Motion was left-to-right across the screen.
- document.getElementById('spinner').style.display = 'block';
pageHandler.prevPage()
} else {
// Motion was right-to-left across the screen.
- document.getElementById('spinner').style.display = 'block';
pageHandler.nextPage();
}
} else if (changeRatio < 0.4) {
if (changeY < 0) {
// Motion was top-to-bottom across the screen.
- document.getElementById('spinner').style.display = 'block';
pageHandler.prevPage();
} else {
// Motion was bottom-to-top across the screen.
- document.getElementById('spinner').style.display = 'block';
pageHandler.nextPage()
}
View
13 portrait.css
@@ -2,12 +2,17 @@
display: none;
}
+div#background {
+ width: 422px;
+}
+
div#container {
- width: 100%;
+ width: 422px;
+ -webkit-transform: scale(1.5) translate(-10%,-10%);
+/* -webkit-transform-origin: -25% -25%; */
}
-.page {
- margin: 0;
+/*
-webkit-transform: scale(1.5);
-webkit-transform-origin: 0 0;
-}
+} */
Please sign in to comment.
Something went wrong with that request. Please try again.