Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
osp
tools.html2print
Commits
fb2636a4
Commit
fb2636a4
authored
Jul 10, 2015
by
alexandre
Browse files
L'interface et la structure sont désormais séparées
parent
af637190
Changes
5
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
 
%
</a></li>
<li><a
href=
"#"
title=
"33"
>
33
 
%
</a></li>
<li><a
href=
"#"
title=
"50"
>
50
 
%
</a></li>
<li><a
href=
"#"
title=
"75"
>
75
 
%
</a></li>
<li><a
href=
"#"
title=
"100"
>
100
 
%
</a></li>
<li><a
href=
"#"
title=
"150"
>
150
 
%
</a></li>
<li><a
href=
"#"
title=
"200"
>
200
 
%
</a></li>
<li><a
href=
"#"
title=
"300"
>
300
 
%
</a></li>
</ul>
</div>
<div
id=
"toc"
>
<button
id=
"goto"
class=
"button"
href=
"#"
>
Go
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>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment