From 6366f20dcb5782cd0225cd11d8747c97f49cff1f Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Sat, 22 Apr 2017 16:56:29 +0200 Subject: [PATCH] re_integrated html2print boilerplate from osp --- README.md | 15 + assets/css/debug.scss | 22 ++ assets/css/dist/gui.css | 64 ++++ assets/css/dist/main.css | 338 ++++++++++++++++++ assets/css/dist/styles.css | 257 ------------- assets/css/gui.scss | 70 ++++ assets/css/html2print.scss | 162 +++++++++ assets/css/layout.scss | 98 +++++ assets/css/main.scss | 6 + assets/css/setup.scss | 2 +- assets/css/styles.scss | 246 +------------ assets/css/ui.scss | 151 ++++++++ assets/js/gui.js | 127 +++++++ assets/js/html2print.js | 106 ++++++ assets/js/script.js | 23 -- assets/js/setup.js | 5 +- .../{js => lib}/css-regions-polyfill.min.js | 0 assets/{js => lib}/jquery.min.js | 0 bin/build.py | 73 ++-- bin/oeuvres-gen.py | 0 bin/sync.sh | 8 + gulpfile.js | 12 +- index.html | 46 +++ server | 8 + templates/bot.tpl.html | 5 +- templates/top.tpl.html | 14 +- 26 files changed, 1293 insertions(+), 565 deletions(-) create mode 100644 assets/css/debug.scss create mode 100644 assets/css/dist/gui.css create mode 100644 assets/css/dist/main.css delete mode 100644 assets/css/dist/styles.css create mode 100644 assets/css/gui.scss create mode 100644 assets/css/html2print.scss create mode 100644 assets/css/layout.scss create mode 100644 assets/css/main.scss create mode 100644 assets/css/ui.scss create mode 100644 assets/js/gui.js create mode 100644 assets/js/html2print.js rename assets/{js => lib}/css-regions-polyfill.min.js (100%) rename assets/{js => lib}/jquery.min.js (100%) delete mode 100755 bin/oeuvres-gen.py create mode 100644 index.html create mode 100755 server diff --git a/README.md b/README.md index cd6740e..83dc6fa 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,18 @@ # HTML2PRINT : tous des sangs mélé +## Book src +bin/sync.sh will pull books from git repositories listed in the the script +source are in the directory book-src + +## Building + +bin/build.py will read the book sources and convert them to html files using pandoc (pypandoc) + +### Assets + +building process intergate in html files all the necessary assets (css/js) contained in the "assets" directory + +## Automation + +gulp is watching assets files to convert scss to css and then rebuild html pages diff --git a/assets/css/debug.scss b/assets/css/debug.scss new file mode 100644 index 0000000..e664489 --- /dev/null +++ b/assets/css/debug.scss @@ -0,0 +1,22 @@ +/** + * DEBUG STYLES + */ + +.debug .header { + outline: 1px solid pink; +} +.debug .body { + outline: 1px solid purple; +} +.debug .footer { + outline: 1px solid pink; +} + +.debug .region-break { + border-top: 1px dashed blue; + box-sizing: border-box; +} + +.debug img { + outline: 1px solid blue; +} diff --git a/assets/css/dist/gui.css b/assets/css/dist/gui.css new file mode 100644 index 0000000..1d433c1 --- /dev/null +++ b/assets/css/dist/gui.css @@ -0,0 +1,64 @@ +#viewport { + position: fixed; + top: 0; + bottom: 25px; + left: 0; + right: 0; } + +#toolbar { + background-color: black; + position: fixed; + height: 25px; + bottom: 0em; + left: 0; + right: 0; + color: white; + font-family: sans; + font-size: 11px; + text-transform: uppercase; + padding: 3px 0; + display: flex; + display: -webkit-flex; + align-items: center; + -webkit-align-items: center; } + +label { + margin-left: 1.5em; + margin-right: 3px; } + +input { + border: 1px solid white; + background-color: white; + font-size: 11px; + vertical-align: -2px; } + +input[type=number] { + width: 50px; + vertical-align: 0px; + margin-left: 2px; } + +input:hover { + cursor: pointer; + background-color: yellow; } + +button { + border: 1px solid white; + background-color: white; + font-size: 11px; + text-transform: uppercase; + margin-right: 1em; + height: 19px; } + +button:hover { + cursor: pointer; + background-color: yellow; } + +.separator { + content: " "; + flex-grow: 2; + -webkit-flex-grow: 2; } + +iframe { + width: 100%; + height: 100%; + border: 0; } diff --git a/assets/css/dist/main.css b/assets/css/dist/main.css new file mode 100644 index 0000000..f062740 --- /dev/null +++ b/assets/css/dist/main.css @@ -0,0 +1,338 @@ + \ No newline at end of file diff --git a/assets/css/dist/styles.css b/assets/css/dist/styles.css deleted file mode 100644 index 9891bfc..0000000 --- a/assets/css/dist/styles.css +++ /dev/null @@ -1,257 +0,0 @@ - \ No newline at end of file diff --git a/assets/css/gui.scss b/assets/css/gui.scss new file mode 100644 index 0000000..3e0727f --- /dev/null +++ b/assets/css/gui.scss @@ -0,0 +1,70 @@ +#viewport { + position: fixed; + top: 0; + bottom: 25px; + left: 0; + right: 0; +} + +#toolbar { + background-color: black; + position: fixed; + height: 25px; + bottom: 0em; + left: 0; + right: 0; + color: white; + font-family: sans; + font-size: 11px; + text-transform: uppercase; + padding: 3px 0; + display: flex; + display: -webkit-flex; + align-items: center; + -webkit-align-items: center; +} + +label { + margin-left: 1.5em; + margin-right: 3px; +} + +input { + border: 1px solid white; + background-color: white; + font-size: 11px; + vertical-align: -2px; +} +input[type=number]{ + width: 50px; + vertical-align: 0px; + margin-left: 2px; +} +input:hover { + cursor: pointer; + background-color: yellow; +} + +button { + border: 1px solid white; + background-color: white; + font-size: 11px; + text-transform: uppercase; + margin-right: 1em; + height: 19px; +} +button:hover { + cursor: pointer; + background-color: yellow; +} +.separator { + content: " "; + flex-grow: 2; + -webkit-flex-grow: 2; +} + +iframe { + width: 100%; + height: 100%; + border: 0; +} diff --git a/assets/css/html2print.scss b/assets/css/html2print.scss new file mode 100644 index 0000000..8ffc847 --- /dev/null +++ b/assets/css/html2print.scss @@ -0,0 +1,162 @@ +/** + * Computation + */ + + +/* EXTRA SPACE AROUND THE PAGE: BLEED + CROP */ +// TODO: find a more appropriate name +$crop: $crop-size + $bleed; + +/* GEOMETRY OF THE PAPER SHEET */ +$paper-width: $page-width + ( $crop * 2 ); +$paper-height: $page-height + ( $crop * 2 ); + +/* SIZE OF SPREAD */ +$spread: $page-width * 2; + + + +/** + * DEFINITION OF THE PAPER SHEET + */ +@page { + size: $paper-width ($paper-height + 1); + margin: 0; +} + + +/** + * CANVAS + */ + +@media all { + body { + margin: 0; + } + .paper { + width: $paper-width; + height: $paper-height; + box-sizing: border-box; + + counter-increment: page-counter; + + // To make sure that one paper sheet is not splitted into different pages in the PDF + page-break-inside: avoid; + page-break-after: always; + overflow: hidden; + + /* Crop marks */ + padding: $crop; + position: relative; + .crops { + width: $paper-width; + height: $paper-height; + position: absolute; + top: 0; + left: 0; + + div { + border-style: solid; + border-color: black; + border-width: 0; + width: $crop; + height: $crop; + position: absolute; + box-sizing: border-box; + + span { + width: $bleed; + height: $bleed; + background-color: white; + position: absolute; + } + } + .crop-top-left { + border-right-width: 1px; + border-bottom-width: 1px; + top: 0; + left: 0; + + span { right: -1px; bottom: -1px;} + } + .crop-top-right { + border-left-width: 1px; + border-bottom-width: 1px; + top: 0; + right: 0; + + span { left: -1px; bottom: -1px;} + } + .crop-bottom-right { + border-left-width: 1px; + border-top-width: 1px; + right: 0; + bottom: 0; + + span { left: -1px; top: -1px;} + } + .crop-bottom-left { + border-right-width: 1px; + border-top-width: 1px; + left: 0; + bottom: 0; + + span { right: -1px; top: -1px;} + } + } + } + .page { + width: $page-width; + height: $page-height; + position: relative; + box-sizing: border-box; + overflow: hidden; + } + + // TODO: changer le format du papier en spread pour pouvoir imprimer en planche + .spread { + .paper { + float: left; + } + .paper:nth-child(odd) { + margin-left: -$crop; + } + .paper:nth-child(even) { + margin-right: -$crop; + } + .paper:first-child { + margin-left: $page-width; + } + } +} + +@media print { + html { + width: $paper-width; + } + body { + /* Allows printing of background colors */ + background-color: white; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + /* Activate opentype features and kernings */ + -webkit-font-feature-settings: "liga", "dlig", "clig", "kern"; + text-rendering: optimizeLegibility; + } +} + + + +/** + * Helpers + */ + +.region-break { + /* Apply this class to an element to put it on a new region. + * Hint: + * You can also use an empty
+ * if you want to put manual page breaks without attaching it to an HTML element + */ + -webkit-region-break-before: always; + break-before: always; +} diff --git a/assets/css/layout.scss b/assets/css/layout.scss new file mode 100644 index 0000000..f15e5d4 --- /dev/null +++ b/assets/css/layout.scss @@ -0,0 +1,98 @@ +.header, +.body, +.footer { + box-sizing: border-box; +} + +/* __________________________________ HEADER __________________________________ */ +.header { + top: 0; + margin: 0; + padding-top: $page-margin-top; + width: 100%; + height: $header-height; + text-align: left; + + &:after { + content: $header-text; + } +} +/* __________________________________ MAIN SECTION __________________________________ */ +.body { + height: $page-height - $header-height - $footer-height; + width: $page-width; + margin-bottom: $page-margin-bottom; + padding-top: $page-margin-top + $header-height; + padding-bottom: $page-margin-bottom; + position: absolute; +} + +.recipient { + -webkit-flow-from: myStory; + flow-from: myStory; +} + +#my-story { + -webkit-flow-into: myStory; + flow-into: myStory; +} +/* __________________________________ FOOTER __________________________________ */ +.footer { + position: absolute; + bottom: 0; + margin: 0; + width: 100%; + height: $footer-height; + text-align: center; + + &:after { + content: $footer-text; + } +} + +/* mirrored pages */ +.paper { + &:nth-child(odd) .header { + text-align: right; + } + + &:nth-child(odd) .header, + &:nth-child(odd) .body, + &:nth-child(odd) .footer { + padding-left: $page-margin-inside; + padding-right: $page-margin-outside; + } + &:nth-child(even) .header, + &:nth-child(even) .body, + &:nth-child(even) .footer { + padding-left: $page-margin-outside; + padding-right: $page-margin-inside; + } +} + +img { + max-width: 100%; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + /* Avoids headings to be cut or to be orphans. + * But it doesn't seem to work + * if the element after has a page-break-inside avoid. It tries its best! */ + -webkit-region-break-inside: avoid; + break-inside: avoid; + -webkit-region-break-after: avoid; + break-after: avoid; +} + +/* AN EXAMPLE TO AVOID PAGE BREAK INSIDE, + * HERE NO PARAGRAPH WILL BE CUT, + * BUT YOU MIGHT WANT TO DEACTIVATE THIS */ +p { + /*-webkit-region-break-inside: avoid;*/ + /* break-inside: avoid;*/ +} diff --git a/assets/css/main.scss b/assets/css/main.scss new file mode 100644 index 0000000..66ced34 --- /dev/null +++ b/assets/css/main.scss @@ -0,0 +1,6 @@ +@import "setup.scss"; +@import "html2print.scss"; +@import "layout.scss"; +@import "debug.scss"; +@import "ui.scss"; +@import "styles.scss"; diff --git a/assets/css/setup.scss b/assets/css/setup.scss index 175c84b..af72855 100644 --- a/assets/css/setup.scss +++ b/assets/css/setup.scss @@ -20,6 +20,6 @@ $page-margin-bottom: 12mm; // Header & footer variables $header-height: 10mm; -$header-text: "Ethica Lectures"; +$header-text: "TDSM"; $footer-height: 10mm; $footer-text: counter(page-counter); diff --git a/assets/css/styles.scss b/assets/css/styles.scss index a36457d..8a2257c 100644 --- a/assets/css/styles.scss +++ b/assets/css/styles.scss @@ -1,245 +1 @@ -@import "setup.scss"; - -/** - * Computation - */ - - -/* EXTRA SPACE AROUND THE PAGE: BLEED + CROP */ -// TODO: find a more appropriate name -$crop: $crop-size + $bleed; - -/* GEOMETRY OF THE PAPER SHEET */ -$paper-width: $page-width + ( $crop * 2 ); -$paper-height: $page-height + ( $crop * 2 ); - -/* SIZE OF SPREAD */ -$spread: $page-width * 2; - - - -/** - * DEFINITION OF THE PAPER SHEET - */ -@page { - size: $paper-width ($paper-height + 1); - margin: 0; -} - - -/** - * CANVAS - */ - -@media all { - body { - margin: 0; - } - .paper { - width: $paper-width; - height: $paper-height; - box-sizing: border-box; - - counter-increment: page-counter; - - // To make sure that one paper sheet is not splitted into different pages in the PDF - page-break-inside: avoid; - page-break-after: always; - overflow: hidden; - - - } - .page { - width: $page-width; - height: $page-height; - position: relative; - } - -} - -@media print { - html { - width: $paper-width; - } - body { - /* Allows printing of background colors */ - background-color: white; - -webkit-print-color-adjust: exact; - print-color-adjust: exact; - /* Activate opentype features and kernings */ - -webkit-font-feature-settings: "liga", "dlig", "clig", "kern"; - text-rendering: optimizeLegibility; - } -} - - - -/** - * Helpers - */ - -.page-break { - /* Apply this class to an element to put it on a new region. - * Hint: - * You can also use an empty
- * if you want to put manual page breaks without attaching it to an HTML element - */ - // -webkit-region-break-before: always; - break-after: region; -} - -// section.level1, section.level2{ -// break-after: always; -// } - -/* __________________________________ LAYOUT __________________________________ */ - -.header, -.body, -.footer { - box-sizing: border-box; -} - -/* __________________________________ HEADER __________________________________ */ -.header { - top: 0; - margin: 0; - padding-top: $page-margin-top; - width: 100%; - height: $header-height; - text-align: left; - - &:after { - content: $header-text; - } -} -/* __________________________________ MAIN SECTION __________________________________ */ -.body { - height: $page-height - $header-height - $footer-height; - width: $page-width; - margin-bottom: $page-margin-bottom; - padding-top: $page-margin-top + $header-height; - padding-bottom: $page-margin-bottom; - position: absolute; -} - -.recipient { - -webkit-flow-from: contentFlow; - flow-from: contentFlow; -} - -#content > * { - -webkit-flow-into: contentFlow; - flow-into: contentFlow contents; -} - - - -/* __________________________________ FOOTER __________________________________ */ -.footer { - position: absolute; - bottom: 0; - margin: 0; - width: 100%; - height: $footer-height; - text-align: center; - - &:after { - content: $footer-text; - } -} - -/* mirrored pages */ -.paper { - - &:nth-child(odd) .header { - @if $page-layout == 2 {text-align: right;} - } - - &:nth-child(odd) .header, - &:nth-child(odd) .body, - &:nth-child(odd) .footer { - padding-left: $page-margin-inside; - padding-right: $page-margin-outside; - } - &:nth-child(even) .header, - &:nth-child(even) .body, - &:nth-child(even) .footer { - padding-left: $page-margin-outside; - padding-right: $page-margin-inside; - } -} - -img { - max-width: 100%; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - /* Avoids headings to be cut or to be orphans. - * But it doesn't seem to work - * if the element after has a page-break-inside avoid. It tries its best! */ - -webkit-region-break-inside: avoid; - -webkit-region-break-after: avoid; - break-inside: avoid; - break-after: avoid; -} - -/* AN EXAMPLE TO AVOID PAGE BREAK INSIDE, - * HERE NO PARAGRAPH WILL BE CUT, - * BUT YOU MIGHT WANT TO DEACTIVATE THIS */ -p { - /*-webkit-region-break-inside: avoid;*/ -} - - -/** - * DEBUG STYLES - */ -.debug .paper { - outline: 1px solid blue; -} -.debug .page { - outline: 1px solid green; -} -.debug .header { - outline: 1px solid pink; -} -.debug .body { - outline: 1px solid purple; -} -.debug .footer { - outline: 1px solid pink; -} - -.debug .region-break { - border-top: 1px dashed blue; - box-sizing: border-box; -} - -.debug img { - outline: 1px solid blue; -} - - -/** - * Style - */ - -@media screen{ - body{ - background-color: #EEE; - } - - .paper{ - background-color: #fff; - box-shadow: 0 0 10px 7px #AAA; - margin: 20px; - } -} - -@import "custom.scss"; +// your styles here diff --git a/assets/css/ui.scss b/assets/css/ui.scss new file mode 100644 index 0000000..22384f4 --- /dev/null +++ b/assets/css/ui.scss @@ -0,0 +1,151 @@ +/** + * User Interface + */ +@media screen { + // C A N V A S + body { + background-color: #F0F0F0; + } + #pages { + width: $paper-width; + height: $paper-height; + + margin-left: auto; + margin-right: auto; + } + .spread #pages { + width: $paper-width * 2; + height: $paper-height * 2; + } + .paper { + /* centrer la page à l'écran */ + background-color: white; + margin-top: 1em; + margin-bottom: 1em; + } + .normal .paper { + //outline: 1px solid lightgray; + } + .normal .page { + outline: 1px dashed lightsalmon; + } + .preview .paper { + background: none; + } + .preview .page { + outline: 1px solid lightgray; + background-color: white; + } + .preview .crops { visibility: hidden; } + + + + // M E N U + .button { + z-index: 1000; + background-color: black; + font-family: sans-serif; + text-transform: uppercase; + font-size: 9pt !important; + letter-spacing: 1pt; + color: white; + margin: 0; + padding: 5pt 7pt; + cursor: pointer; + border: 0; + } + .button:hover { + background-color: white; + color: black; + outline: 1pt solid black; + } + .button-active { + background-color: white; + color: black; + outline: 1pt solid black; + } + .lo-res { + outline: 10px solid red; + } + #interface { + font-family: sans-serif; + text-transform: uppercase; + font-size: 10pt !important; + line-height: 14pt; + letter-spacing: 1pt; + position: fixed; + bottom: 10pt; + right: 10pt; + } + + #interface a { + text-decoration: none; + position: static; + } + + + div.dropdown { + display: inline-block; + position: relative; + + ul { + padding: 0.5em 0; + display: none; + background-color: black; + position: absolute; + right: 0; + bottom: 2em; + height: 200pt; + width: 80pt; + overflow: auto; + + a { + padding: 0 1em; + color: white; + display: block; + + &:hover { + background-color: white; + color: black; + } + } + } + button { + width: 80pt; + } + } + + #toc { + display: inline-block; + } + #toc-pages { + padding: 0.5em 0; + display: none; + background-color: black; + position: absolute; + right: 0; + bottom: 2em; + height: 200pt; + width: 80pt; + overflow: auto; + } + #toc-pages a { + padding: 0 1em; + color: white; + } + #toc-pages a:hover { + background-color: white; + color: black; + } + #toc-pages button { + width: 80pt; + } +} + + + +@media print { + #interface { + display: none; + } +} diff --git a/assets/js/gui.js b/assets/js/gui.js new file mode 100644 index 0000000..4cdec3f --- /dev/null +++ b/assets/js/gui.js @@ -0,0 +1,127 @@ +$(function() { + + $.getJSON('build/toc.json', function(data){ + // console.log(data); + for (book of data) { + // console.log(book); + var $optgroup = $('').attr('label', book.label); + for (page of book.pages) { + // console.log(page); + $optgroup.append($('