Commit edbd60ea authored by gijs's avatar gijs

Big push after last sprint, added some new tools, fixed some bugs in those...

Big push after last sprint, added some new tools, fixed some bugs in those tools, added name index, resolution checking for images. Added more positioning options for notes and images in book 1
parent 3e0d787e
......@@ -5,29 +5,29 @@
@I-1-1: @I-1-0 + 2;
@I-1-2: @I-1-1 + 12; // 11
@I-1-3: @I-1-2 + 6; // 5
@I-1-4: @I-1-3 + 10; // 9
@I-1-4: @I-1-3 + 8; // 9
@I-1-5: @I-1-4 + 16; // 15
@I-1-6: @I-1-5 + 14;
@I-1-7: @I-1-6 + 8;
@I-1-8: @I-1-7 + 8; // 7
@I-1-9: @I-1-8 + 20; // 19
@I-2-0: @I-1-9 + 12;
@I-2-1: @I-1-9 + 12;
@I-2: @I-1-9 + 12;
@I-2-1: @I-2 + 2;
@I-2-2: @I-2-1 + 6;
@I-2-3: @I-2-2 + 12;
@I-2-4: @I-2-3 + 12;
@I-2-5: @I-2-4 + 12; // 11
@I-2-6: @I-2-5 + 10;
@I-2-7: @I-2-6 + 10; // 9
@II: @I-2-7 + 14;
@II: @I-2-7 + 12;
@II-1: @II + 1;
@II-2: @II-1 + 22;
@II-3: @II-2 + 40;
@II-4: @II-3 + 26;
@II-5: @II-4 + 12;
@II-6: @II-5 + 28;
@III-0: @II-6 + 3;
@III: @II-6 + 30;
@III: @II-6 + 30 + 1;
@III-all: @III + 2;
body#extended-content-html {
#pages {
......@@ -133,48 +133,42 @@ body#I-2-7 {
body#II-1 {
#pages {
counter-reset: page-counter-left @II-1 page-counter-right @II-1 + 1;
counter-reset: page-counter-left @II-1 - 1 page-counter-right @II-1;
}
}
body#II-2 {
#pages {
counter-reset: page-counter-left @II-2 page-counter-right @II-2 + 1;
}
}
body#II-2 {
#pages {
counter-reset: page-counter-left @II-2 page-counter-right @II-2 + 1;
counter-reset: page-counter-left @II-2 - 1 page-counter-right @II-2;
}
}
body#II-3 {
#pages {
counter-reset: page-counter-left @II-3 page-counter-right @II-3 + 1;
counter-reset: page-counter-left @II-3 - 1 page-counter-right @II-3;
}
}
body#II-4 {
#pages {
counter-reset: page-counter-left @II-4 page-counter-right @II-4 + 1;
counter-reset: page-counter-left @II-4 - 1 page-counter-right @II-4;
}
}
body#II-5 {
#pages {
counter-reset: page-counter-left @II-5 page-counter-right @II-5 + 1;
counter-reset: page-counter-left @II-5 - 1 page-counter-right @II-5;
}
}
body#II-6 {
#pages {
counter-reset: page-counter-left @II-6 page-counter-right @II-6 + 1;
counter-reset: page-counter-left @II-6 - 1 page-counter-right @II-6;
}
}
body#III {
#pages {
counter-reset: page-counter @III;
counter-reset: page-counter @III-all;
}
}
\ No newline at end of file
......@@ -130,18 +130,21 @@
@media print {
html {
width: @paper-width;
background: none;
}
body {
/* Allows printing of background colors */
background-color: white;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
background: none;
}
#pages {
// Forces this div to start at the top of the page (bug in Chromium)
position: absolute;
top: 0;
}
html, body, .page .paper {
background: none !important;
}
}
/**
......
......@@ -34,6 +34,14 @@
font-style: normal;
}
@font-face {
font-family: "Garamond12";
src: url("/assets/fonts/EBGaramond8-Regular.ttf") format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Garamond12";
src: url("/assets/fonts/EBGaramond12-Regular.ttf") format('truetype');
......
This diff is collapsed.
;(function () {
'use strict';
if ((!document.getNamedFlows) && document.webkitGetNamedFlows) {
document.getNamedFlows = document.webkitGetNamedFlows;
}
if (!document.getNamedFlow) {
document.getNamedFlow = function (name) {
return document.getNamedFlows(name).namedItem(name);
}
}
var textFlow = document.getNamedFlow('main'),
captionsFlow = document.getNamedFlow('figcaptions');
/**
* Returns first region the given node is shown within
*
* workaround for getRegionsForContent() as that function only seems to work
* on block-elements
*/
function getRegionByNode(flow, node) {
var ranges, regions = flow.getRegionsByContent(node);
if (regions.length > 0) {
return regions[0];
} else {
regions = flow.getRegions();
for (var i=0; i < regions.length; i++) {
ranges = regions[i].webkitGetRegionFlowRanges();
for (var r=0; r < ranges.length; r++) {
if (ranges[r].isPointInRange(node, 0)) {
return regions[i];
}
}
}
console.log('Could not find region for node', node);
}
}
/**
* Find page for given node, travels up the DOM tree to find
* first wrapping paper element. Does not work for Nodes in a flow.
*/
function getPageByNode (node) {
if (node) {
if (node.classList.contains('paper')) {
return node;
} else {
if (node.parentElement) {
return getPageByNode(node.parentElement);
} else {
return false;
}
}
return false;
}
}
/**
* Get page by node in region
*/
function getPageByRegionNode (flow, node) {
var region = getRegionByNode(flow, node);
if (region) {
return getPageByNode(getRegionByNode(flow, node));
} else {
return null;
}
}
/**
* Return page number for given page
*/
function getPageNum (page) {
var firstpagenum = parseInt(document.querySelector('.paper:first-of-type').id.replace(/\D/g, '')),
pagenum = parseInt(page.id.replace(/\D/g, ''));
return (pagenum - firstpagenum) * 2 + firstpagenum + 1;
}
window.indexKeywords = function () {
var keywords = document.querySelectorAll('span.keyword'),
storedIndex = window.localStorage.getItem('the-riddle-index'),
index = (storedIndex != null) ? JSON.parse(storedIndex) : {};
for (var i=0; i<keywords.length;i++) {
var region = getRegionByNode(textFlow, keywords[i]);
if (!region) {
region = getRegionByNode(captionsFlow, keywords[i]);
}
if (region) {
var keywordPage = getPageByNode(region);
if (keywordPage) {
var keyword = keywords[i].innerText.toLowerCase(),
pageNum = getPageNum(keywordPage);
if (region.classList.contains('secondary')) {
pageNum += 1;
}
if (!(keyword in index)) {
index[keyword] = new Array();
}
if (!(index[keyword].includes(pageNum))) {
index[keyword].push(pageNum);
}
}
}
}
console.log(index);
window.localStorage.setItem('the-riddle-index', JSON.stringify(index));
};
})();
\ No newline at end of file
......@@ -87,6 +87,7 @@
for (var i=0; i<keywords.length;i++) {
var keywordPage = getPageByRegionNode(textFlow, keywords[i]);
if (keywordPage) {
var keyword = keywords[i].innerText.toLowerCase(),
pageNum = getPageNum(keywordPage);
......
;(function () {
'use strict';
if ((!document.getNamedFlows) && document.webkitGetNamedFlows) {
document.getNamedFlows = document.webkitGetNamedFlows;
}
if (!document.getNamedFlow) {
document.getNamedFlow = function (name) {
return document.getNamedFlows(name).namedItem(name);
}
}
var textFlow = document.getNamedFlow('main'),
captionsFlow = document.getNamedFlow('figcaptions');
/**
* Returns first region the given node is shown within
*
* workaround for getRegionsForContent() as that function only seems to work
* on block-elements
*/
function getRegionByNode(flow, node) {
var ranges, regions = flow.getRegionsByContent(node);
if (regions.length > 0) {
return regions[0];
} else {
regions = flow.getRegions();
for (var i=0; i < regions.length; i++) {
ranges = regions[i].webkitGetRegionFlowRanges();
for (var r=0; r < ranges.length; r++) {
if (ranges[r].isPointInRange(node, 0)) {
return regions[i];
}
}
}
console.log('Could not find region for node', node);
}
}
/**
* Find page for given node, travels up the DOM tree to find
* first wrapping paper element. Does not work for Nodes in a flow.
*/
function getPageByNode (node) {
if (node) {
if (node.classList.contains('paper')) {
return node;
} else {
if (node.parentElement) {
return getPageByNode(node.parentElement);
} else {
return false;
}
}
return false;
}
}
/**
* Get page by node in region
*/
function getPageByRegionNode (flow, node) {
var region = getRegionByNode(flow, node);
if (region) {
return getPageByNode(getRegionByNode(flow, node));
} else {
return null;
}
}
/**
* Return page number for given page
*/
function getPageNum (page) {
var firstpagenum = parseInt(document.querySelector('.paper:first-of-type').id.replace(/\D/g, '')),
pagenum = parseInt(page.id.replace(/\D/g, ''));
return (pagenum - firstpagenum) * 2 + firstpagenum + 1;
}
window.indexNames = function () {
var keywords = document.querySelectorAll('span.indexed_name'),
storedIndex = window.localStorage.getItem('the-riddle-name-index'),
index = (storedIndex != null) ? JSON.parse(storedIndex) : {};
for (var i=0; i<keywords.length;i++) {
var region = getRegionByNode(textFlow, keywords[i]);
if (!region) {
region = getRegionByNode(captionsFlow, keywords[i]);
}
if (region) {
var keywordPage = getPageByNode(region);
if (keywordPage) {
var keyword = keywords[i].innerText.toLowerCase(),
pageNum = getPageNum(keywordPage);
if (region.classList.contains('secondary')) {
pageNum += 1;
}
if (!(keyword in index)) {
index[keyword] = new Array();
}
if (!(index[keyword].includes(pageNum))) {
index[keyword].push(pageNum);
}
}
}
}
console.log(index);
window.localStorage.setItem('the-riddle-name-index', JSON.stringify(index));
};
})();
\ No newline at end of file
;(function () {
'use strict';
if ((!document.getNamedFlows) && document.webkitGetNamedFlows) {
document.getNamedFlows = document.webkitGetNamedFlows;
}
if (!document.getNamedFlow) {
document.getNamedFlow = function (name) {
return document.getNamedFlows(name).namedItem(name);
}
}
var textFlow = document.getNamedFlow('main');
/**
* Returns first region the given node is shown within
*
* workaround for getRegionsForContent() as that function only seems to work
* on block-elements
*/
function getRegionByNode(flow, node) {
var ranges, regions = flow.getRegionsByContent(node);
if (regions.length > 0) {
return regions[0];
} else {
regions = flow.getRegions();
for (var i=0; i < regions.length; i++) {
ranges = regions[i].webkitGetRegionFlowRanges();
for (var r=0; r < ranges.length; r++) {
if (ranges[r].isPointInRange(node, 0)) {
return regions[i];
}
}
}
console.log('Could not find region for node', node);
}
}
/**
* Find page for given node, travels up the DOM tree to find
* first wrapping paper element. Does not work for Nodes in a flow.
*/
function getPageByNode (node) {
if (node) {
if (node.classList.contains('paper')) {
return node;
} else {
if (node.parentElement) {
return getPageByNode(node.parentElement);
} else {
return false;
}
}
return false;
}
}
/**
* Get page by node in region
*/
function getPageByRegionNode (flow, node) {
var region = getRegionByNode(flow, node);
if (region) {
return getPageByNode(getRegionByNode(flow, node));
} else {
return null;
}
}
/**
* Return page number for given page
*/
function getPageNum (page) {
return parseInt(page.id.replace(/\D/g, ''));
}
window.indexNames = function () {
var keywords = document.querySelectorAll('span.indexed_name'),
storedIndex = window.localStorage.getItem('the-riddle-name-index'),
index = (storedIndex != null) ? JSON.parse(storedIndex) : {};
for (var i=0; i<keywords.length;i++) {
var keywordPage = getPageByRegionNode(textFlow, keywords[i]);
if (keywordPage) {
var keyword = keywords[i].innerText.toLowerCase(),
pageNum = getPageNum(keywordPage);
if (!(keyword in index)) {
index[keyword] = new Array();
}
if (!(index[keyword].includes(pageNum))) {
index[keyword].push(pageNum);
}
}
}
console.log(index);
window.localStorage.setItem('the-riddle-name-index', JSON.stringify(index));
};
})();
\ No newline at end of file
......@@ -87,7 +87,7 @@
var rects = spans[i].getClientRects(),
lineCount = rects.length; // Remember how many lines we had at the start
if (rects[rects.length-1].width <= threshold) {
if (rects.length > 0 && rects[rects.length-1].width <= threshold) {
var spacing = 0;
while(rects.length >= lineCount && spacing >= max) {
......@@ -104,7 +104,7 @@
}
window.fixWidows = function () {
var threshold = 30,
var threshold = 40,
p = document.querySelectorAll('p');
for (var i=0; i < p.length; i++) {
......
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css" media="all">
<title>Regions</title>
</head>
<body id="book0-index">
<!-- PAGES -->
<div id="pages">
<!-- MASTER -->
<div id="master-page" class="paper">
<div class="page">
<div class="header"></div>
<section id="master-region" class="body">
<div class="main"></div>
<div class="main"></div>
</section>
<div clahss="footer"></div>
</div>
</div>
</div>
<div id="stories">
<article id="main" data-src="/stories/keywordindex.html"></article>
<article id="main" data-src="/stories/nameindex.html"></article>
</div>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="/js/flow.js"></script>
<script type="text/javascript" src="/js/stories.js"></script>
<script type="text/javascript">
; (function () {
'use strict';
if (!(document.webkitGetNamedFlows || document.getNamedFlows)) {
var polyfill = document.createElement("script");
polyfill.setAttribute("src", "/assets/lib/css-regions.min.js");
document.body.appendChild(polyfill);
}
window.addEventListener("load", function () {
document.getNamedFlow('main').addEventListener('regionlayoutcomplete', function () {
window.requestAnimationFrame(function () {
document.layoutcomplete = true;
});
});
var template = document.querySelector('#master-page');
template.removeAttribute('id');
template.remove();
fitFlow(document.getNamedFlow('main'), template, document.querySelector('#pages'), function (node) { return node.classList.contains('paper')});
});
})();
</script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">