templates/frontend/epaper/index.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  6. <link rel="stylesheet" href="{{ asset('bundles/app/frontend/dist/styles.css') }}?v={{ parameters.app_version }}">
  7. <link rel="stylesheet" href="{{ asset('bundles/app/frontend/js/pdfviewer/samples/style.css') }}" />
  9. <script src="{{ asset('bundles/app/frontend/js/pdfviewer/lib/webviewer.min.js') }}"></script>
  10. <script src="{{ asset('bundles/app/frontend/js/pdfviewer/samples/old-browser-checker.js') }}"></script>
  11. <script src="{{ asset('bundles/app/frontend/js/pdfviewer/samples/global.js') }}"></script>
  12. <title>Urner Wochenblatt - E-Paper</title>
  13. {# <script src="{{ asset('bundles/app/frontend/js/pdfviewer/samples/modernizr.custom.min.js') }}"></script>#}
  14. </head>
  15. <body>
  16. <header>
  17. <div class="title sample">
  18. <a href="{{ path('fe.home') }}">Urner Wochenblatt</a>
  19. </div>
  20. <div class="links">
  21. <a href="{{ path('fe.home') }}">Startseite</a> | <a href="{{ path('fe.abo_logout') }}">Abmelden</a><br>&nbsp;
  22. </div>
  23. </header>
  24. <aside>
  25. {% for ausgabe in ausgabenMitBild %}
  26. <p>
  27. <a class="image-select" data-target="{{ path('fe.epaper.pdf', {'filename': ausgabe.filename}) }}" href="#">
  28. <img src="{{ path('fe.epaper.image', {'filename': ausgabe.filename|lower|replace({'.pdf':'.jpg'})}) }}" style="border:1px solid #ededed;max-width: 199px"><br>
  29. <span>
  30. <b>{{ ausgabe | uwAusgabeName }}</b> {{ ausgabe | uwAusgabeDate | format_datetime(pattern="d. MMMM", locale='de') }}
  31. </span>
  32. </a>
  33. </p>
  34. {% endfor%}
  36. <select class="mb-3" id="js-select" style="width: 100%">
  37. <option value="">Alle Ausgaben</option>
  38. {% for ausgabe in ausgaben %}
  39. {% if ausgabe | uwAusgabeDate < date() %}
  40. <option value="{{ path('fe.epaper.pdf', {'filename': ausgabe.filename}) }}">
  41. {{ ausgabe | uwAusgabeName }}
  42. {{ ausgabe | uwAusgabeDate | format_datetime(pattern="d. MMMM", locale='de') }}
  43. </option>
  44. {% endif %}
  45. {% endfor%}
  46. </select>
  47. </aside>
  48. <div id="viewer"></div>
  49. {% set showFullArticle = abonnent_authenticated() or is_granted('MODULE_ARTIKEL') %}
  50. {% if not showFullArticle %}
  51. {% set titelShort = "E-Paper" %}
  52. {% set titel = "Das E-Paper steht nur unseren E-Paper-Abonnenten zur Verfügung." %}
  53. {% include "frontend/_partials/_paywall.html.twig" %}
  54. {% endif %}
  56. <script src="{{ asset('bundles/app/frontend/js/pdfviewer/samples/menu-button.js') }}"></script>
  57. <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  58. <script async src="{{ asset('bundles/app/frontend/dist/scripts.js') }}?v={{ parameters.app_version }}"></script>
  60. <!--ga-tag-->
  62. <script>
  63. WebViewer({
  64. licenseKey: '{{ parameters.pdf_js_licence }}',
  65. path: '{{ asset('bundles/app/frontend/js/pdfviewer/lib') }}', // path to the PDF.js Express'lib' folder on your server
  66. {% if showFullArticle %}
  67. initialDoc: '{{ path('fe.epaper.pdf', {'filename': lastIssue.pdf}) }}',
  68. {% endif %}
  69. }, document.getElementById('viewer'))
  70. .then(instance => {
  71. // now you can access APIs through the WebViewer instance
  72. const { Core, UI } = instance;
  73. const { Tools } = instance.Core;
  74. var currentPageNumber = 1;
  76. instance.UI.disableElements(['thumbnailsSizeSlider','downloadButton','themeChangeButton','languageButton','panToolButton','selectToolButton','textSelectButton','menuButton']);
  77. instance.UI.disableFeatures([instance.UI.Feature.Annotations]);
  79. instance.UI.setLanguage('de');
  81. instance.UI.setHeaderItems((header) => {
  82. header.getHeader('default').push(
  83. {
  84. img: "icon-header-full-screen",
  85. index: -1,
  86. type: "actionButton",
  87. element: 'fullScreenButton',
  88. hidden: [ 'small-mobile','mobile','tablet' ],
  89. onClick: () => {
  90. instance.UI.toggleFullScreen()
  91. }
  92. },
  93. {
  94. img: 'icon-header-print-line',
  95. index: -1,
  96. type: "actionButton",
  97. element: 'printButton',
  98. onClick: () => {
  99. printCurrentPage()
  100. }
  101. });
  102. });
  104. //Set Hand Tool by Default
  105. const panTool = Tools.ToolNames.PAN;
  106. instance.UI.setToolMode(panTool);
  109. // PDF nach dem Laden, auf die Fensterbreite aufziehen
  110. // https://pdfjs.express/documentation/changelog/8.6.0
  111. Core.documentViewer.addEventListener('documentLoaded', () => {
  112. instance.setFitMode(instance.FitMode.FitWidth);
  113. });
  115. // C+P
  116. Core.documentViewer.addEventListener('keyDown', (e) => {
  117. if((e.ctrlKey || e.metaKey) && (e.key == "p" || e.charCode == 16 || e.charCode == 112 || e.keyCode == 80) ){
  118. printCurrentPage();
  119. e.cancelBubble = true;
  120. e.preventDefault();
  122. e.stopImmediatePropagation();
  123. }
  124. //usePrintButton(e);
  125. });
  127. document.getElementById('js-select').onchange = e => {
  128. instance.UI.loadDocument(e.target.value);
  129. //Close Aside when Burger is active
  130. if (menuButton.offsetParent !== null) {
  131. asideElement.style.display = 'none';
  132. }
  133. };
  135. const imageSelects = document.getElementsByClassName("image-select");
  136. const loadDocument = function() {
  137. let attribute = this.getAttribute("data-target");
  138. instance.UI.loadDocument(attribute);
  139. //Close Aside when Burger is active
  140. if (menuButton.offsetParent !== null) {
  141. asideElement.style.display = 'none';
  142. }
  143. };
  144. Array.from(imageSelects).forEach(function(element) {
  145. element.addEventListener('click', loadDocument);
  146. });
  150. //https://pdfjs.community/t/listen-for-the-print-event/1492/3
  151. // Print-----------------------
  152. // Qualität auf Hoch setzen
  153. instance.UI.setPrintQuality(2);
  155. // Listener beim Seitenwechsel speichert die aktuelle Seitennummer
  156. Core.documentViewer.addEventListener('pageNumberUpdated', (pageNumber) => {
  157. currentPageNumber = pageNumber;
  158. });
  160. //https://pdfjs.community/t/customize-print-options/490
  161. instance.updateElement('printButton', {
  162. onClick: () => {
  163. printCurrentPage();
  164. }
  165. })
  167. function printCurrentPage(){
  168. instance.UI.printInBackground({
  169. pagesToPrint:[currentPageNumber],
  170. includeComments:false,
  171. includeAnnotations: false,
  172. maintainPageOrientation: true,
  173. onProgress: function(pageNumber, htmlElement) {},
  174. });
  175. }
  177. //Shortcuts disablen, weil sonst das Print Modal kommt
  178. instance.UI.hotkeys.off(instance.UI.hotkeys.Keys.CTRL_P);
  179. instance.UI.hotkeys.off(instance.UI.hotkeys.Keys.COMMAND_P);
  181. // End Print-----------------------
  182. });
  183. // Modernizr.addTest('async', function() {
  184. // try {
  185. // var result;
  186. // eval('let a = () => {result = "success"}; let b = async () => {await a()}; b()');
  187. // return result === 'success';
  188. // } catch (e) {
  189. // return false;
  190. // }
  191. // });
  193. // test for async and fall back to code compiled to ES5 if they are not supported
  194. {#['{{ asset('bundles/app/frontend/js/pdfviewer/samples/viewing/viewing/viewing.js') }}'].forEach(function(js) {#}
  195. {# var script = Modernizr.async ? js : js.replace('.js', '.ES5.js');#}
  196. {# var scriptTag = document.createElement('script');#}
  197. {# scriptTag.src = script;#}
  198. {# scriptTag.type = 'text/javascript';#}
  199. {# document.getElementsByTagName('head')[0].appendChild(scriptTag);#}
  200. {#});#}
  201. </script>
  203. <script>
  204. $( document ).ready(function() {
  205. var $jqLoginForm = $('.jqLoginForm');
  206. var $jqPaywallInfo = $('.jqPaywallInfo');
  208. $('.jqLoginBtn').on('click', function(){
  209. $jqPaywallInfo.slideUp(function() {
  210. $jqLoginForm.slideDown(function(){
  211. $('.jqUsernameField').focus();
  212. });
  213. });
  214. });
  216. $('.jqLoginAbbrechenBtn').on('click', function (e) {
  218. $jqLoginForm.slideUp(function() {
  219. $jqPaywallInfo.slideDown();
  220. });
  221. });
  223. $(document).on('keydown', function(e) {
  224. if((e.ctrlKey || e.metaKey) && (e.key == "p" || e.charCode == 16 || e.charCode == 112 || e.keyCode == 80) ){
  225. alert("Bitte benutzen Sie den Print-Button in der Menuleiste des PDF-Viewers, um die aktuelle Seite zu drucken!");
  226. e.cancelBubble = true;
  227. e.preventDefault();
  229. e.stopImmediatePropagation();
  230. }
  231. });
  232. });
  233. </script>
  234. </body>
  235. </html>