Commit 9577511b authored by Jens Ehlers's avatar Jens Ehlers
Browse files

#1 print view styles and generated PDF file

parent 47ebc80e
Pipeline #8009 failed with stage
in 39 seconds
......@@ -14,7 +14,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script>
<script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]} });</script>
<script src="js/bootstrap-4-navbar.js"></script>
<script src="js/prism.js"></script>
<script src="js/prism.js"></script>
<script src="https://kit.fontawesome.com/083ef4a4ae.js"></script>
<script>
// document ready handler
......@@ -51,13 +52,27 @@
// open external links in new tab
$("#" + filename + " a").each(function() {
var href = $(this).attr('href');
if (href.startsWith("http")) $(this).attr('target', '_blank');
if (typeof href !== "undefined" && href.startsWith("http")) $(this).attr('target', '_blank');
});
// generate listing titles for print view
$("#" + filename + " .tab-pane").each(function() {
var title = $('a[href="#'+ $(this).attr('id') +'"]').html();
$(this).prepend('<div class="print-title">' + title + '</div>');
});
// display all listings below each other for print view
if (urlParams.get('show') == "all") {
$('.tab-pane').css('display', 'block');
}
});
var id = $(this).parent().attr('id').replace('content-', '');
var title = $('#' + id).html();
$("#content-" + id).prepend("<h3>"+title+"</h3>");
// page break before each h3 in print view
$("h3").each(function() { $(this).addClass('page-break'); });
});
// search event handlers
......@@ -78,6 +93,18 @@
}
});
// display all units for pdf export
var urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('show') == "all") {
$("[id^=content-unit-]").show();
}
// generate toc for print view
$('.toc').append($('.navbar-nav').clone());
$('.toc').find('.navbar-nav').removeClass('navbar-nav');
$('.toc').find('.dropdown-menu').removeClass('dropdown-menu');
$('.toc').find('.dropdown-toggle').removeClass('dropdown-toggle');
// finish preloading animation
$(window).on("load", function() {
$("body").addClass("loaded");
......@@ -144,7 +171,24 @@
mark { background-color: yellow; }
b, th { font-weight: 600; }
td { vertical-align: top; }
.table-head-row { background-color: #ccc; }
.table-head-row { background-color: #ccc; }
#pdf { z-index: 100; position: absolute; top: 10px; right: 10px; width: 24px; }
#pdf a { color: #ffffff; font-size: 24px; }
@media screen { .credits, .toc, .print-title { display: none; } }
@media print {
@page { margin: 2cm; }
.page-break { page-break-before: always; }
#content { display: table; }
.jumbotron { background-image: none; background-color: white; }
.jumbotron .lead, .jumbotron h1 { color: #212529; }
.jumbotron .lead { font-size: 20pt; margin-bottom: 31cm; }
.credits, .toc { color: #212529; padding-left: 15px; page-break-after: always; }
#pdf, .nav-tabs, .overlay { display: none; }
.print-title { font-weight: 600; }
.tab-pane { page-break-inside: avoid; }
pre code { font-size: 12px; }
}
</style>
</head>
<body>
......@@ -160,7 +204,13 @@
<h1 class="display-4">Patterns und Frameworks</h1>
<p class="lead">für die Entwicklung paralleler und verteilter Anwendungen in Java</p>
</div>
<div class="credits">
<p>Verfasser: Prof. Dr. Jens Ehlers, Technische Hochschule Lübeck</p>
<p>Webseite: <a href="https://oncampus.pages.th-luebeck.de/patterns-and-frameworks">https://oncampus.pages.th-luebeck.de/patterns-and-frameworks</a></p>
<p>GitLab: <a href="https://git.mylab.th-luebeck.de/oncampus/patterns-and-frameworks">https://git.mylab.th-luebeck.de/oncampus/patterns-and-frameworks</a></p>
</div>
</div>
<div class="toc"><h3>Inhaltsverzeichnis</h3></div>
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
......@@ -216,41 +266,42 @@
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown">Verteilte Programmierung</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="unit-distributed-communication">Kommunikation und Skalierbarkeit im verteilten System</a>
<a class="dropdown-item" id="unit-rmi">Remote Method Invocation (RMI)</a>
<a class="dropdown-item" id="unit-soap">SOAP-Webservices</a>
<a class="dropdown-item" id="unit-rest">REST-Webservices</a>
<a class="dropdown-item" id="unit-orm">Object-Relational Mapping (ORM)</a>
<a class="dropdown-item" id="unit-spring">REST und Reactive Streams in Spring</a>
<a class="dropdown-item" id="unit-websocket">WebSockets</a>
<a class="dropdown-item" id="unit-socket">Sockets</a>
</div>
<ul class="dropdown-menu">
<li><a class="dropdown-item" id="unit-distributed-communication">Kommunikation und Skalierbarkeit im verteilten System</a></li>
<li><a class="dropdown-item" id="unit-rmi">Remote Method Invocation (RMI)</a></li>
<li><a class="dropdown-item" id="unit-soap">SOAP-Webservices</a></li>
<li><a class="dropdown-item" id="unit-rest">REST-Webservices</a></li>
<li><a class="dropdown-item" id="unit-orm">Object-Relational Mapping (ORM)</a></li>
<li><a class="dropdown-item" id="unit-spring">REST und Reactive Streams in Spring</a></li>
<li><a class="dropdown-item" id="unit-websocket">WebSockets</a></li>
<li><a class="dropdown-item" id="unit-socket">Sockets</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown">Nebenläufige Programmierung</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="unit-threads">Threads in Java</a>
<a class="dropdown-item" id="unit-sync">Synchronisation von Threads</a>
<a class="dropdown-item" id="unit-streams">Futures und parallele Streams</a>
</div>
<ul class="dropdown-menu">
<li> <a class="dropdown-item" id="unit-threads">Threads in Java</a></li>
<li> <a class="dropdown-item" id="unit-sync">Synchronisation von Threads</a></li>
<li> <a class="dropdown-item" id="unit-streams">Futures und parallele Streams</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown">UI-Frameworks</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="unit-javafx">Desktop-Anwendungen mit JavaFX</a>
<a class="dropdown-item" id="unit-web">Web-Anwendungen mit jQuery und Angular</a>
</div>
<ul class="dropdown-menu">
<li><a class="dropdown-item" id="unit-javafx">Desktop-Anwendungen mit JavaFX</a></li>
<li><a class="dropdown-item" id="unit-web">Web-Anwendungen mit jQuery und Angular</a></li>
</ul>
</li>
</ul>
<div id="search">
<input class="form-control" type="text" placeholder="Suche (min. 3 Zeichen)" aria-label="Search">
<span id="unit-search-results" style="display: none">Suchergebnisse</span>
</div>
</div>
</div>
</nav>
<div id="content" style="padding:30px">
<div id="pdf"><a href="patterns-and-frameworks.pdf"><i class="far fa-file-pdf"></i></a></div>
<div id="content-unit-goals">
<div class="unit-part" id="intro-goals"></div>
......
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