Skip to content

GitLab

Commit fb2636a4 authored by alexandre's avatar alexandre
Browse files

L'interface et la structure sont désormais séparées

parent af637190
Hide whitespace changes
Inline Side-by-side
assets/css/gui.css 0 → 100644
View file @ fb2636a4
#viewport {
position: fixed;
top: 0;
bottom: 2em;
left: 0;
right: 0;
}
#toolbar {
background-color: lightgrey;
position: fixed;
height: 2em;
bottom: 0em;
left: 0;
right: 0;
}
iframe {
width: 100%;
height: 100%;
}
assets/css/html2print.less
View file @ fb2636a4
......@@ -160,117 +160,6 @@
}
}
/**
* UI
*/
@media screen {
.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;
}
}
/**
* Helpers
*/
......
assets/js/gui.js 0 → 100644
View file @ fb2636a4
$(function() {
$('iframe').load(function() {
var doc = $("iframe").contents().find("html");
$('[name="preview"]').change(function() {
if($(this).is(":checked")) {
doc.addClass("preview");
doc.removeClass("normal");
} else {
doc.removeClass("preview");
doc.addClass("normal");
}
});
$('[name="debug"]').change(function() {
if($(this).is(":checked")) {
doc.addClass("debug");
} else {
doc.removeClass("debug");
}
});
$('[name="spread"]').change(function() {
if($(this).is(":checked")) {
doc.addClass("spread");
} else {
doc.removeClass("spread");
}
});
//$('[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"
});
});
//$(".paper").each(function(){
//page = $(this).attr("id");
//$("#toc-pages").append("<li><a href='#" + page + "'>" + page.replace("-", " ") + "</a></li>")
//});
$('[name="page"]').change(function() {
var pageNumber = $(this).val() - 1;
var target = doc.find('.paper:eq(' + pageNumber + ')');
var offsetTop = target.offset().top;
doc.find('body').scrollTop(offsetTop);
});
$("#print").on('click', function() {
$("iframe").get(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));
gui.html 0 → 100644
View file @ fb2636a4
<!DOCTYPE HTML>
<html lang="en" class="normal">
<head>
<meta charset="utf-8">
<title>HTML2print</title>
<link rel="stylesheet" href="/assets/css/gui.css" media="screen">
</head>
<body>
<div id="viewport">
<iframe src="/index.html"></iframe>
</div>
<div id="toolbar">
<input name="preview" value="true" type="checkbox">
<label for="preview">preview</label>
<input name="debug" value="true" type="checkbox">
<label for="debug">debug</label>
<input name="spread" value="true" type="checkbox">
<label for="spread">spread</label>
<input name="hi-res" value="true" type="checkbox">
<label for="hi-res">hi-res</label>
<input name="zoom" value="100" type="number" min="25" max="1600" step="25">
<label for="zoom">zoom</label>
<select name="page">
<option value="1">1</option>
<option value="2">2</option>
</select>
<label for="page">page</label>
<button id="print">print</button>
</div>
<!-- JAVASCRIPT -->
<script type="text/javascript" src="/assets/lib/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/gui.js"></script>
</body>
</html>
index.html
View file @ fb2636a4
......@@ -7,48 +7,28 @@
<!-- Uncomment the line below to reset the CSS and get rid of the browser's default CSS. -->
<!--<link rel="stylesheet" href="/assets/lib/reset.css" type="text/css" />-->
<link rel="stylesheet" href="/main.less" type="text/less" media="all" charset="utf-8">
<link rel="stylesheet" href="/assets/lib/jquery-ui-1.10.3/css/smoothness/jquery-ui-1.10.3.custom.min.css" type="text/css" media="all" charset="utf-8">
<!--<link rel="stylesheet" href="/assets/lib/jquery-ui-1.10.3/css/smoothness/jquery-ui-1.10.3.custom.min.css" type="text/css" media="all" charset="utf-8">-->
</head>
<body>
<!-- PAGES -->
<div id="pages">
<div id="master-page" class="paper">
<div class="paper">
<div class="page">
<section class="header">
</section>
<div class="header"></div>
<section class="body recipient">
</section>
<div class="body recipient"></div>
<section class="footer">
</section>
<div class="footer"></div>
</div>
</div>
</div>
<div class="paper">
<div class="page">
<div class="header"></div>
<div id="interface">
<button id="preview" class="button">Preview</button>
<button id="debug" class="button">Debug</button>
<button id="spread" class="button">Spread</button>
<button id="hi-res" class="button">Hi-res</button>
<div class="body recipient"></div>
<div class="dropdown">
<button id="zoom" class="button">Zoom</button>
<ul id="zoom-list">
<li><a href="#" title="25">25&thinsp;%</a></li>
<li><a href="#" title="33">33&thinsp;%</a></li>
<li><a href="#" title="50">50&thinsp;%</a></li>
<li><a href="#" title="75">75&thinsp;%</a></li>
<li><a href="#" title="100">100&thinsp;%</a></li>
<li><a href="#" title="150">150&thinsp;%</a></li>
<li><a href="#" title="200">200&thinsp;%</a></li>
<li><a href="#" title="300">300&thinsp;%</a></li>
</ul>
</div>
<div id="toc">
<button id="goto" class="button" href="#">Go&nbsp;to</button>
<ul id="toc-pages"></ul>
<div class="footer"></div>
</div>
</div>
</div>
......@@ -58,14 +38,14 @@
<!-- JAVASCRIPT -->
<script type="text/javascript" src="/assets/lib/less-1.3.0.min.js"></script>
<script type="text/javascript" src="/assets/lib/jquery.min.js"></script>
<!--<script type="text/javascript" src="/assets/lib/jquery.min.js"></script>-->
<script type="text/javascript" src="/setup/setup.js"></script>
<script type="text/javascript" src="/assets/js/html2print.js"></script>
<!--<script type="text/javascript" src="/setup/setup.js"></script>-->
<!--<script type="text/javascript" src="/assets/js/html2print.js"></script>-->
<script type="text/javascript" src="/assets/lib/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="/assets/lib/popelt-v1.0.min.js"></script>
<script type="text/javascript" src="/assets/js/page.js"></script>
<!--<script type="text/javascript" src="/assets/lib/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.min.js"></script>-->
<!--<script type="text/javascript" src="/assets/lib/popelt-v1.0.min.js"></script>-->
<!--<script type="text/javascript" src="/assets/js/page.js"></script>-->
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment