diff --git a/css/main.css b/css/main.css index 408752b..7833b1f 100755 --- a/css/main.css +++ b/css/main.css @@ -1,298 +1,65 @@ -/* - * HTML5 Boilerplate - * - * What follows is the result of much research on cross-browser styling. - * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, - * Kroc Camen, and the H5BP dev community and team. - */ - -/* ========================================================================== - Base styles: opinionated defaults - ========================================================================== */ - -html, -button, -input, -select, -textarea { - color: #222; +#area { + width: 40%; + margin: 100px auto; + font-family: Cambria; } -body { - font-size: 1em; - line-height: 1.4; +#prev { + position: fixed; + left: 0; + top: 50%; + height: 50px; + width: 25px; + background: #777; + display: none; } -/* - * Remove text-shadow in selection highlight: h5bp.com/i - * These selection declarations have to be separate. - * Customize the background color to match your design. - */ - -::-moz-selection { - background: #b3d4fc; - text-shadow: none; +#next { + position: fixed; + right: 0; + top: 50%; + height: 50px; + width: 25px; + background: #777; + display: none; + opacity: .6; } -::selection { - background: #b3d4fc; - text-shadow: none; +#prev:active, +#next:active { + background: #888; + opacity: .8; } -/* - * A better looking default horizontal rule - */ - -hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 1em 0; - padding: 0; +h3 { + margin-top: 0; } -/* - * Remove the gap between images and the bottom of their containers: h5bp.com/i/440 - */ +#modal{ + width: 300px; + height: 50px; + padding: 50px; + background: #ccc; + position: fixed; + top: 50%; + left: 50%; + margin-left: -200px; + margin-top: -75px; + text-align: center; -img { - vertical-align: middle; + -moz-box-shadow: 1px 1px 1px 2px rgba(0,0,0,.4); + -webkit-box-shadow: 1px 1px 1px 2px rgba(0,0,0,.4); + box-shadow: 1px 1px 1px 2px rgba(0,0,0,.4); + } -/* - * Remove default fieldset styles. - */ - -fieldset { - border: 0; - margin: 0; - padding: 0; +#header { + background: #EAE2CF; } -/* - * Allow only vertical resizing of textareas. - */ - -textarea { - resize: vertical; -} - -/* ========================================================================== - Chrome Frame prompt - ========================================================================== */ - -.chromeframe { - margin: 0.2em 0; - background: #ccc; - color: #000; - padding: 0.2em 0; -} - -/* ========================================================================== - Author's custom styles - ========================================================================== */ - - - - - - - - - - - - - - - - - -/* ========================================================================== - Helper classes - ========================================================================== */ - -/* - * Image replacement - */ - -.ir { - background-color: transparent; - border: 0; - overflow: hidden; - /* IE 6/7 fallback */ - *text-indent: -9999px; -} - -.ir:before { - content: ""; - display: block; - width: 0; - height: 100%; -} - -/* - * Hide from both screenreaders and browsers: h5bp.com/u - */ - -.hidden { - display: none !important; - visibility: hidden; -} - -/* - * Hide only visually, but have it available for screenreaders: h5bp.com/v - */ - -.visuallyhidden { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -/* - * Extends the .visuallyhidden class to allow the element to be focusable - * when navigated to via the keyboard: h5bp.com/p - */ - -.visuallyhidden.focusable:active, -.visuallyhidden.focusable:focus { - clip: auto; - height: auto; - margin: 0; - overflow: visible; - position: static; - width: auto; -} - -/* - * Hide visually and from screenreaders, but maintain layout - */ - -.invisible { - visibility: hidden; -} - -/* - * Clearfix: contain floats - * - * For modern browsers - * 1. The space content is one way to avoid an Opera bug when the - * `contenteditable` attribute is included anywhere else in the document. - * Otherwise it causes space to appear at the top and bottom of elements - * that receive the `clearfix` class. - * 2. The use of `table` rather than `block` is only necessary if using - * `:before` to contain the top-margins of child elements. - */ - -.clearfix:before, -.clearfix:after { - content: " "; /* 1 */ - display: table; /* 2 */ -} - -.clearfix:after { - clear: both; -} - -/* - * For IE 6/7 only - * Include this rule to trigger hasLayout and contain floats. - */ - -.clearfix { - *zoom: 1; -} - -/* ========================================================================== - EXAMPLE Media Queries for Responsive Design. - Theses examples override the primary ('mobile first') styles. - Modify as content requires. - ========================================================================== */ - -@media only screen and (min-width: 35em) { - /* Style adjustments for viewports that meet the condition */ -} - -@media only screen and (-webkit-min-device-pixel-ratio: 1.5), - only screen and (min-resolution: 144dpi) { - /* Style adjustments for high resolution devices */ -} - -/* ========================================================================== - Print styles. - Inlined to avoid required HTTP connection: h5bp.com/r - ========================================================================== */ - -@media print { - * { - background: transparent !important; - color: #000 !important; /* Black prints faster: h5bp.com/s */ - box-shadow: none !important; - text-shadow: none !important; - } - - a, - a:visited { - text-decoration: underline; - } - - a[href]:after { - content: " (" attr(href) ")"; - } - - abbr[title]:after { - content: " (" attr(title) ")"; - } - - /* - * Don't show links for images, or javascript/internal links - */ - - .ir a:after, - a[href^="javascript:"]:after, - a[href^="#"]:after { - content: ""; - } - - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - - thead { - display: table-header-group; /* h5bp.com/t */ - } - - tr, - img { - page-break-inside: avoid; - } - - img { - max-width: 100% !important; - } - - @page { - margin: 0.5cm; - } - - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - - h2, - h3 { - page-break-after: avoid; - } -} +#main { + background: #C1BCB6; + -moz-box-shadow: inset 0 0 100px rgba(0,0,0,.6); + -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.6); + box-shadow: inset 0 0 100px rgba(0,0,0,.6); +} \ No newline at end of file diff --git a/index.html b/index.html index 5884e42..1def97d 100755 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ - + + -
- choose a zip file - + +
+
- - - +
+ + + + diff --git a/js/app/app.js b/js/app/app.js index fe142f4..5c778b4 100644 --- a/js/app/app.js +++ b/js/app/app.js @@ -3,10 +3,15 @@ FP.namespace('app').init = (function($){ function init(){ var fileInput = document.getElementById("file-input"); + var area = document.getElementById("area"); var bookFiles = [], bookImages = [], bookCSS = []; + var pages = {}, + images = {}, + ordered = []; + //-- Tell zip where it is located zip.workerScriptsPath = "/js/libs/"; @@ -17,11 +22,17 @@ FP.namespace('app').init = (function($){ //-- Get all Entries in Zip file FP.core.loadZip.getEntries(file, function(entries) { + //TODO: parse the rootfile to find files + var total = 0, + loaded = 0; + //-- Split Entries into xhtml, images, css entries.forEach(function(entry) { if(entry.filename.search(".xhtml") != -1){ + //console.log("entry", entry); bookFiles.push(entry); + total++; } if(entry.filename.search(".jpg") != -1 || entry.filename.search(".png") != -1){ @@ -34,12 +45,126 @@ FP.namespace('app').init = (function($){ }); - bookFiles.forEach(function(file) { + bookImages.forEach(function(file) { + var name = file.filename.replace("OPS/", ''); //Blob or File FP.core.loadZip.getEntryFile(file, "Blob", function(blobURL, revokeBlobURL) { - console.log(file.filename, blobURL) + + images[name] = blobURL; + console.log("images[name]", images[name]) + //var img = document.createElement('img'); + //img.src = blobURL; + //area.appendChild(img); + + + }, function(current, total) { + //-- Progress Meter }); + }); + + bookFiles.forEach(function(file) { + var reg = /\/(.*).xhtml/, + name = reg.exec(file.filename)[1]; + + //TEMP ORDER FIX + if(name === "cover") name = "1_"+name; + if(name === "TOC") name = "2_"+name; + + //Blob or File + FP.core.loadZip.getEntryFile(file, "Blob", function(blobURL, revokeBlobURL) { + //console.log(file, blobURL) + + // $.ajax({ + // url: blobURL, + // success: function(data) { + // pages.push(data); + // } + // }); + + $.ajax({ + url: blobURL, + dataType: "html", + cache: true, + success: function(data) { + //var section = $("
"); + //$('#area').append(section); + pages[name] = data; + ordered.push(name); + loaded++; + if(loaded == total){ + allReady(); + } + }, + error: function(e){ + console.log("error:", e) + } + + }); + //var section = $("
"); + //section.load(blobURL); + //$('#area').append(section); + + + + // var iframe = document.createElement('iframe'); + // iframe.src = window.webkitURL.createObjectURL(blobURL); + // iframe.type = "content"; + // area.appendChild(iframe); + + // FP.core.load(blobURL, function(data){ + // //console.log("data", data); + // var iframe = document.createElement('iframe'); + // iframe.src = blobURL; + // iframe.type = "content"; + // area.appendChild(iframe); + // }); + + // var reader = new FileReader(); + // reader.onloadend = function() { + // if (this.result) { + // console.log(this.result) + // } + // else if ( errorCallback ) { + // console.log("ERROR") + // } + // }; + // reader.readAsText(file); + + }, function(current, total) { + //-- Progress Meter + }); + + }); + + + + function allReady(){ + FP.book.page.start($("#area"), pages, ordered, images); + + $("#modal").fadeOut(); + + $("#next").fadeIn(); + $("#prev").fadeIn(); + + $("#next").on("click", function(){ + FP.book.page.next(); + }); + + $("#prev").on("click", function(){ + FP.book.page.prev(); + }); + + $(document).keydown(function(e) { + if(e.keyCode == 37) { // left + FP.book.page.prev(); + } + else if(e.keyCode == 39) { // right + FP.book.page.next(); + } + }); + + } //console.log(bookFiles, bookImages, bookCSS) }); diff --git a/js/app/core.js b/js/app/core.js index b110d10..e835ca7 100644 --- a/js/app/core.js +++ b/js/app/core.js @@ -1,4 +1,23 @@ FP.namespace('core').load = (function(){ + function load(url, callback){ + var xhr = new XMLHttpRequest(); + xhr.open('GET', url, true); + xhr.responseType = 'blob'; + + xhr.onload = function(e) { + if (this.status == 200) { + // Note: .response instead of .responseText + var blob = new Blob([this.response], {type: 'application/xhtml+xml'}); + callback(blob); + } + }; + + xhr.send(); + } + return load; +})(); + +FP.namespace('core').load2 = (function(){ /* PDFJS.getPdf(