Commit 46c573b2 authored by alexandre's avatar alexandre

A tentative to merge by hand our three custom versions of html2print.

parent 5f5ac83c
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#viewport {
position: fixed;
top: 0;
bottom: 25px;
left: 0;
right: 0;
width: 100%;
height: calc(100% - 25px);
border: none;
}
#toolbar {
......@@ -18,34 +26,37 @@
font-size: 11px;
text-transform: uppercase;
padding: 3px 0;
box-sizing: border-box;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
}
label {
#toolbar > label {
margin-left: 1.5em;
margin-right: 3px;
}
input {
#toolbar > input {
border: 1px solid white;
background-color: white;
font-size: 11px;
vertical-align: -2px;
}
input[type=number]{
#toolbar > input[type=number]{
width: 50px;
vertical-align: 0px;
margin-left: 2px;
}
input:hover {
#toolbar > input:hover {
cursor: pointer;
background-color: yellow;
}
button {
#toolbar > button {
border: 1px solid white;
background-color: white;
font-size: 11px;
......@@ -53,18 +64,14 @@ button {
margin-right: 1em;
height: 19px;
}
button:hover {
#toolbar > button:hover {
cursor: pointer;
background-color: yellow;
}
.separator {
#toolbar > .separator {
content: " ";
flex-grow: 2;
-webkit-flex-grow: 2;
}
iframe {
width: 100%;
height: 100%;
border: 0;
}
$(function() {
$('iframe').load(function() {
var doc = $("iframe").contents().find("html");
$('[name="preview"]').change(function() {
if($(this).is(":checked")) {
doc.addClass("preview");
doc.removeClass("normal");
(function($) {
'use strict';
$('#viewport')[0].addEventListener("load", function(event) {
var doc = this.contentDocument.getElementsByTagName('html')[0];
$('[name="preview"]')[0].addEventListener("change", function(event) {
if(this.checked) {
doc.classList.add("preview");
doc.classList.remove("normal");
} else {
doc.removeClass("preview");
doc.addClass("normal");
doc.classList.add("normal");
doc.classList.remove("preview");
}
});
$('[name="debug"]').change(function() {
if($(this).is(":checked")) {
doc.addClass("debug");
$('[name="grid"]')[0].addEventListener("change", function(event) {
if(this.checked) {
doc.classList.add("grid");
} else {
doc.removeClass("debug");
doc.classList.remove("grid");
}
});
$('[name="spread"]').change(function() {
if($(this).is(":checked")) {
doc.addClass("spread");
$('[name="debug"]')[0].addEventListener("change", function(event) {
if(this.checked) {
doc.classList.add("debug");
} else {
doc.removeClass("spread");
doc.classList.remove("debug");
}
});
//$('[name="hi-res"]').change(function() {
//if($(this).is(":checked")) {
//doc.addClass("export");
//} else {
//doc.removeClass("export");
//}
//});
$('[name="zoom"]').change(function() {
zoomLevel = $(this).val() / 100;
doc.find("#pages").css({
"-webkit-transform": "scale(" + zoomLevel + ")",
"-webkit-transform-origin": "0 0"
});
$('[name="spread"]')[0].addEventListener("change", function(event) {
if(this.checked) {
doc.classList.add("spread");
} else {
doc.classList.remove("spread");
}
});
//$(".paper").each(function(){
//page = $(this).attr("id");
//$("#toc-pages").append("<li><a href='#" + page + "'>" + page.replace("-", " ") + "</a></li>")
//});
$('[name="zoom"]')[0].addEventListener("change", function(event) {
var zoomLevel = this.value / 100;
var elt = doc.querySelector("#pages");
elt.style.webkitTransform = "scale(" + zoomLevel + ")";
elt.style.webkitTransformOrigin = "0 0";
});
$('[name="page"]').change(function() {
var pageNumber = $(this).val() - 1;
$('[name="page"]')[0].addEventListener("change", function(event) {
var pageNumber = this.value - 1;
var target = doc.find('.paper:eq(' + pageNumber + ')');
var offsetTop = target.offset().top;
var target = doc.querySelectorAll('.paper')[pageNumber];
var offsetTop = target.offsetTop;
doc.find('body').scrollTop(offsetTop);
doc.querySelector('body').scrollTop = offsetTop;
});
$("#print").on('click', function() {
$("iframe").get(0).contentWindow.print();
$('#print')[0].addEventListener("click", function(event) {
console.log('click');
$("#viewport")[0].contentWindow.print();
});
});
//// __________________________________ HIGH RESOLUTION __________________________________ //
//$("#hi-res").click(function(e){
//e.preventDefault();
//$(this).toggleClass("button-active");
//$("html").toggleClass("export");
//$("img").each(function(){
//var hires = $(this).attr("data-alt-src");
//var lores = $(this).attr("src");
//$(this).attr("data-alt-src", lores)
//$(this).attr("src", hires)
//});
//console.log("Wait for hi-res images to load");
//window.setTimeout(function(){
//console.log("Check image resolution");
//// Redlights images too small for printing
//$("img").each(function(){
//if (Math.ceil(this.naturalHeight / $(this).height()) < 3) {
//console.log($(this).attr("src") + ": " + Math.floor(this.naturalHeight / $(this).height()) );
//if($(this).parent().hasClass("moveable")) {
//$(this).parent().toggleClass("lo-res");
//} else {
//$(this).toggleClass("lo-res");
//}
//}
//});
//}, 2000);
//});
});
//(function($) {
//'use strict';
//$('iframe')[0].addEventListener("load", function(event) {
//console.log(arguments);
//}, false);
//})(document.querySelectorAll.bind(document));
}, false);
})(document.querySelectorAll.bind(document));
......@@ -5,91 +5,13 @@ $(function() {
// Cloning the master page
for (i = 1; i < nb_page; i++){
$("#master-page").clone().attr("id","page-"+i).insertBefore($("#master-page"));
$("#master-page").clone().attr("id","page-" + i).insertBefore($("#master-page"));
}
$("#master-page").attr("data-width", $(".paper:first-child").width()).hide();
// Loads main content into <article id="my-story">
$("#my-story").load(content);
// ________________________________ PREVIEW __________________________________ //
$("#preview").click(function(e){
e.preventDefault();
$(this).toggleClass("button-active");
$("html").toggleClass("preview normal");
});
// __________________________________ DEBUG __________________________________ //
$("#debug").click(function(e){
e.preventDefault();
$(this).toggleClass("button-active");
$("html").toggleClass("debug");
});
// __________________________________ SPREAD __________________________________ //
$("#spread").click(function(e){
e.preventDefault();
$(this).toggleClass("button-active");
$("html").toggleClass("spread");
});
// __________________________________ HIGH RESOLUTION __________________________________ //
$("#hi-res").click(function(e){
e.preventDefault();
$(this).toggleClass("button-active");
$("html").toggleClass("export");
$("img").each(function(){
var hires = $(this).attr("data-alt-src");
var lores = $(this).attr("src");
$(this).attr("data-alt-src", lores)
$(this).attr("src", hires)
});
console.log("Wait for hi-res images to load");
window.setTimeout(function(){
console.log("Check image resolution");
// Redlights images too small for printing
$("img").each(function(){
if (Math.ceil(this.naturalHeight / $(this).height()) < 3) {
console.log($(this).attr("src") + ": " + Math.floor(this.naturalHeight / $(this).height()) );
if($(this).parent().hasClass("moveable")) {
$(this).parent().toggleClass("lo-res");
} else {
$(this).toggleClass("lo-res");
}
}
});
}, 2000);
});
// __________________________________ TOC __________________________________ //
$(".paper").each(function(){
page = $(this).attr("id");
$("#toc-pages").append("<li><a href='#" + page + "'>" + page.replace("-", " ") + "</a></li>")
});
$("#goto").click(function(e){
e.preventDefault();
$(this).toggleClass("button-active");
$("#toc-pages").toggle();
});
// __________________________________ ZOOM __________________________________ //
$("#zoom").click(function(e){
e.preventDefault();
$(this).toggleClass("button-active");
$("#zoom-list").toggle();
});
$("#zoom-list a").click(function(e){
e.preventDefault();
zoom = $(this).attr("title") / 100 ;
unzoom = 1 / zoom;
$("#pages").css("-webkit-transform", "scale(" + zoom + ")");
$("#pages").css("-webkit-transform-origin", "0 0");
});
// loads stories
$('#stories [data-src]').each(function() {
var src = $(this).attr('data-src');
$(this).load(src, function() {});
})
});
......@@ -2,21 +2,13 @@
* DEBUG STYLES
*/
.debug .header {
outline: 1px solid pink;
}
.debug .body {
outline: 1px solid purple;
}
.debug .footer {
outline: 1px solid pink;
}
.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;
}
.debug img { outline: 1px solid blue; }
@body-width: @page-width - @page-margin-inside - @page-margin-outside;
@body-height: @page-height - @page-margin-top - @page-margin-bottom;
@col-width: (@body-width - ((@col-number - 1) * @col-gutter)) / @col-number;
@row-height: (@body-height - ((@row-number - 1) * @row-gutter)) / @row-number;
@col-gutter-width: @col-width + @col-gutter;
@row-gutter-height: @row-height + @row-gutter;
/* x classes */
.create-x-classes(@i:0) when(@i < @col-number) {
.x@{i}{
left: (@i * @col-width) + (@i * @col-gutter);
}
.create-x-classes(@i + 1);
}
.create-x-classes();
/* y classes */
.create-y-classes(@i:0) when(@i < @row-number) {
.y@{i}{
top: (@i * @row-height) + (@i * @row-gutter);
}
.create-y-classes(@i + 1);
}
.create-y-classes();
/* width classes */
.create-w-classes(@i:1) when(@i <= @col-number) {
.w@{i}{
width: (@col-width * @i) + (@col-gutter * (@i - 1));
}
.create-w-classes(@i + 1);
}
.create-w-classes();
/* height classes */
.create-h-classes(@i:1) when(@i <= @row-number) {
.h@{i}{
height: (@row-height * @i) + (@row-gutter * (@i - 1));
}
.create-h-classes(@i + 1);
}
.create-h-classes();
.grid .body {
background-attachment: local;
background-size: @col-gutter-width @row-gutter-height,
@col-gutter-width @row-gutter-height,
@col-gutter-width @row-gutter-height,
@col-gutter-width @row-gutter-height;
background-position: -1px -1px,
-1px -1px,
-(@col-gutter + 0) -(@row-gutter + 0),
-(@col-gutter + 0) -(@row-gutter + 0);
background-image: -webkit-linear-gradient(top, @grid-color 1px, transparent 1px),
-webkit-linear-gradient(left, @grid-color 1px, transparent 1px),
-webkit-linear-gradient(top, @grid-color 1px, transparent 1px),
-webkit-linear-gradient(left, @grid-color 1px, transparent 1px);
background-image: -moz-linear-gradient(top, @grid-color 1px, transparent 1px),
-moz-linear-gradient(left, @grid-color 1px, transparent 1px),
-moz-linear-gradient(top, @grid-color 1px, transparent 1px),
-moz-linear-gradient(left, @grid-color 1px, transparent 1px);
background-image: -ms-linear-gradient(top, @grid-color 1px, transparent 1px),
-ms-linear-gradient(left, @grid-color 1px, transparent 1px),
-ms-linear-gradient(top, @grid-color 1px, transparent 1px),
-ms-linear-gradient(left, @grid-color 1px, transparent 1px);
background-image: -o-linear-gradient(top, @grid-color 1px, transparent 1px),
-o-linear-gradient(left, @grid-color 1px, transparent 1px),
-o-linear-gradient(top, @grid-color 1px, transparent 1px),
-o-linear-gradient(left, @grid-color 1px, transparent 1px);
background-image: linear-gradient(to bottom, @grid-color 1px, transparent 1px),
linear-gradient(to right, @grid-color 1px, transparent 1px),
linear-gradient(to bottom, @grid-color 1px, transparent 1px),
linear-gradient(to right, @grid-color 1px, transparent 1px);
}
......@@ -3,24 +3,26 @@
*/
/* 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;
/* computes the edge size of the paper, which is the sum of the bleed and the
* crop sizes */
@edge: @crop-size + @bleed;
/* Computes the size of the paper sheet */
@paper-width: @page-width + ( @edge * 2 );
@paper-height: @page-height + ( @edge * 2 );
/**
* DEFINITION OF THE PAPER SHEET
*/
/**
* The @page CSS at-rule is used to define some properties of printed
* documents. We make it the size of the elements with the .paper class and
* remove any margins so they don't add up with margins specifed in elements
* with the .page class (or it's children, like .header, .body and .footer)
*/
@page {
size: @paper-width (@paper-height + 1);
size: @paper-width @paper-height;
margin: 0;
}
......@@ -30,121 +32,155 @@
*/
@media all {
body {
body {
margin: 0;
/* Activate opentype features and kernings */
-webkit-font-feature-settings: "liga", "dlig", "clig", "kern";
text-rendering: optimizeLegibility;
}
.paper {
width: @paper-width;
height: @paper-height;
box-sizing: border-box;
/* defines a named counter and increments it every page, so we can use
* it to compute the page number */
counter-increment: page-counter;
// To make sure that one paper sheet is not splitted into different pages in the PDF
/* makes sure that pages aren't cut because of pootential unprecise unit
* conversion at printing time */
page-break-inside: avoid;
page-break-after: always;
/* clips the content if it goes out of the page, so it doesn't increase
* the format */
overflow: hidden;
/* Crop marks */
padding: @crop;
padding: @edge;
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;}
}
}
}
.paper .crops {
width: @paper-width;
height: @paper-height;
position: absolute;
top: 0;
left: 0;
}
.paper .crops div {
border-style: solid;
border-color: black;
border-width: 0;
width: @edge;
height: @edge;
position: absolute;
box-sizing: border-box;
}
.paper .crops div span {
width: @bleed;
height: @bleed;
background-color: white;
position: absolute;
}
.paper .crops .crop-top-left {
border-right-width: 1px;
border-bottom-width: 1px;
top: 0;
left: 0;
}
.paper .crops .crop-top-left span { right: -1px; bottom: -1px;}
.paper .crops .crop-top-right {
border-left-width: 1px;
border-bottom-width: 1px;
top: 0;
right: 0;
}
.paper .crops .crop-top-right span { left: -1px; bottom: -1px;}
.paper .crops .crop-bottom-right {
border-left-width: 1px;
border-top-width: 1px;
right: 0;
bottom: 0;
}
.paper .crops .crop-bottom-right span { left: -1px; top: -1px;}
.paper .crops .crop-bottom-left {
border-right-width: 1px;
border-top-width: 1px;
left: 0;
bottom: 0;
}
.paper .crops .crop-bottom-left span { right: -1px; top: -1px;}
.page {
/* defines the page size */
width: @page-width;
height: @page-height;
/* allows for absolutely positioned elements as settings the position
* property to relative as the side effect of making this elements
* top-left corner the reference point */
position: relative;
}
// 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;
}
.spread .paper { float: left; }
.spread .paper:nth-child(odd) { margin-left: -@edge; }
.spread .paper:nth-child(even) { margin-right: -@edge; }
.spread .paper:first-child { margin-left: @page-width; }
}
@media screen {
/* defines the background color of the workspace */
/* UI */
body { background-color: #F0F0F0; }
#pages {
width: @paper-width;
height: @paper-height;
margin-left: auto;
margin-right: auto;
}
/* FIXME: allows for printing spreads as well */
.spread #pages {
width: @paper-width * 2;
height: @paper-height * 2;
}
.paper {
/* centrer la page à l'écran */
/* UI */
background-color: white;
/* UI */
margin-top: 1em;
/* UI */
margin-bottom: 1em;
}
/* UI */
.normal .page { outline: 1px dotted lightsalmon; }
/* UI */
.preview .paper { background: none; }
/* UI */
.preview .page {
outline: 1px solid lightgray;
background-color: white;
}
}
@media print {
html {
width: @paper-width;
}
html { width: @paper-width; }
body {
/* Allows printing of background colors */
/* Allows for background colors printing */
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
*/
......
......@@ -12,11 +12,10 @@
width: 100%;
height: @header-height;
text-align: left;
&:after {
content: @header-text;
}
}
.header:after { content: @header-text; }
/* __________________________________ MAIN SECTION __________________________________ */
.body {
height: @page-height - @header-height - @footer-height;
......@@ -44,36 +43,27 @@
width: 100%;
height: @footer-height;
text-align: center;
&:after {
content: @footer-text;
}
}
/* mirrored pages */
.paper {
&:nth-child(odd) .header {
text-align: right;
}
.footer:after { content: @footer-text; }
&:nth-child(odd) .header,
&:nth-child(odd) .body,
&:nth-child(odd) .footer {
padding-left: @page-margin-inside;