j1-template 2023.0.2 → 2023.0.3

data/lib/starter_web/pages/public/learn/mweb/mweb-tester.adoc

@@ -0,0 +1,299 @@
+---
+title:                                  Tester
+tagline:                                Media Web
+date:                                   2023-01-05 00:00:00
+description: >
+                                        Welcome to the preview page focussing on the image module. This page
+                                        shows some valuable features of the J1 Theme to manage your image-based
+                                        content using lightboxes, carousels (slider), and galleries.
+
+categories:                             [ Testpages ]
+tags:                                   [ Media Web ]
+
+comments:                               false
+fab_menu_id:                            page_ctrl
+
+permalink:                              /pages/public/learn/mweb/
+regenerate:                             false
+
+resources:                              [ datatables ]
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
+          alt:                          Photo by Ricardo Gomez Angel on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Ricardo Gomez Angel
+            href:                       https://unsplash.com/@ripato/portfolio
+---
+// https://mediathekviewweb.de/socket.io/?EIO=4&transport=polling&t=OM6fpnN&sid=Wzzj9vV-nAu1pbImBGNk
+// http://localhost:41000/socket.io/?EIO=4&transport=polling&t=OM6iftg
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+
+++++
+
+  <!-- link rel="stylesheet" href="static/icons/material-icons.css" / -->
+  <link rel="stylesheet" href="static/video-js.min.css" />
+  <link rel="stylesheet" href="static/index.css" />
+
+  <!-- script src="static/js.cookie.min.js"></script -->
+  <!-- script src="static/socket.io.min.js"></script -->
+  <script src="static/socket.io/socket.io.js"></script>
+  <script src="static/lodash.min.js"></script>
+  <script src="static/video.min.js"></script>
+  <script src="static/index.js"></script>
+
+++++
+
+
+
+++++
+
+  <!-- div id="videooverlay" class="overlay initiallyHidden" tabindex="0">
+    <a id="videocloseButton" class="closeButton">&times;</a>
+    <div class="row overlay-content">
+      <div class="col-lg-3 col-md-2 col-sm-2 col-xs-1"></div>
+      <div class="col-lg-6 col-md-8 col-sm-8 col-xs-10 noPadding">
+        <div id="videocontent"></div>
+      </div>
+      <div class="col-lg-3 col-md-2 col-sm-2 col-xs-1"></div>
+    </div>
+  </div -->
+
+  <div id="blur" class="no-filter">
+    <nav class="navbar navbar-default">
+      <div class="container-fluid">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a id="logo" class="navbar-brand" href="#">MediathekViewWeb</a>
+        </div>
+        <div class="collapse navbar-collapse" id="navbar">
+          <ul class="nav navbar-nav">
+          </ul>
+          <ul class="nav navbar-nav navbar-right">
+            <li><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=BDVH46DLCM7E8&amp;source=url" target="_blank">Spenden</a></li>
+            <li><a id="forumButton" target="_blank" href="https://forum.mediathekview.de/category/11/offizeller-client-mediathekviewweb">Forum</a></li>
+            <li><a id="contactButton" href="mailto:kontakt@mediathekviewweb.de" data-onclick-return-false>Kontakt</a></li>
+            <li><a id="githubButton" target="_blank" href="https://github.com/mediathekview/mediathekviewweb">GitHub</a></li>
+
+            <li class="dropdown">
+              <a class="dropdown-toggle about" data-toggle="dropdown">Über
+                <span class="caret"></span>
+              </a>
+
+              <ul class="dropdown-menu">
+                <li><a id="donateButton" target="_blank" href="donate.html">Spenden</a></li>
+                <li><a id="impressumButton" target="_blank" href="impressum.html">Impressum</a></li>
+                <li><a id="datenschutzButton" target="_blank" href="datenschutz.html">Datenschutz</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+    <div class="container">
+
+      <div id="browserWarning" class="showafter1s" style="border: 3px solid red; padding: 10px; margin: 15px">
+        <span><a target="_blank" href="https://github.com/mediathekview/mediathekviewweb/issues/8">Dein Browser wird
+            nicht unterstützt</a> oder Javascript ist deaktiviert</span>
+      </div>
+
+      <div id="main-view">
+        <div class="row">
+          <div class="col-lg-8 col-md-7 col-sm-7">
+            <div class="input-group">
+              <span id="searchSpan" class="input-group-addon" data-toggle="popover" title="Selektoren" data-trigger="hover"
+                    data-html="true" data-placement="bottom"
+                    data-content="!Sender</br>#Thema</br>+Titel</br>*Beschreibung</br>&amp;lt;x (in minuten)</br>&amp;gt;x (in minuten)">Suche</span>
+              <input id="queryInput" type="text" class="form-control" autofocus>
+            </div>
+            <a tabIndex="-1"><i id="queryInputClearButton" class="material-icons">clear</i></a>
+          </div>
+
+          <div class="col-lg-4 col-md-5 col-sm-5">
+            <div class="input-group" id="queryParameters">
+              <span class="input-group-addon">
+                <input type="checkbox" name="everywhere" id="everywhereCheckbox">
+                <label for="everywhereCheckbox">Überall</label>
+              </span>
+
+              <span class="input-group-addon">
+                <input type="checkbox" name="future" id="futureCheckbox" checked>
+                <label for="futureCheckbox">Zukünftige</label>
+              </span>
+
+              <span class="input-group-btn">
+                <button id="rssFeedButton" class="btn btn-default" type="button"><i class="material-icons icon-small">rss_feed</i></button>
+                <button id="helpButton" class="btn btn-default" type="button">Hilfe</button>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <br>
+
+        <table id="mediathek" class="table table-striped table-hover">
+          <thead>
+            <tr>
+              <th data-onclick-sort="channel">Sender</th>
+              <th fielddata-is-disabled="topic">Thema</th>
+              <th fielddata-is-disabled="title">Titel</th>
+              <th><i class="material-icons">description</i></th>
+              <th data-onclick-sort="timestamp">Datum</th>
+              <th>Zeit</th>
+              <th data-onclick-sort="duration">Dauer</th>
+              <th>Video</th>
+            </tr>
+          </thead>
+          <tbody>
+          </tbody>
+        </table>
+
+        <div class="smallMarginTop">
+          <div class="floatRight">
+            <ul id="pagination" class="pagination paginationstyle">
+            </ul>
+          </div>
+          <div class="floatLeft">
+            <p id="queryInfoLabel"></p>
+          </div>
+        </div>
+
+      </div>
+
+      <div id="generic-html-view" class="initiallyHidden">
+        <button id="genericHtmlViewBackButton" class="btn btn-default" type="button">Zurück</button>
+        <div id="genericHtmlContent"></div>
+      </div>
+
+      <div id="connectingModal" class="modal fade" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h4 class="modal-title">Keine Verbindung</h4>
+            </div>
+            <div class="modal-body">
+              <i class="material-icons spin-left" style="display: inline-flex; vertical-align: middle; font-size: 2.5em;">sync</i>
+              <span style="font-size:1.2em; vertical-align: middle;">Verbinde...</span>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      <div id="indexingModal" class="modal fade" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h4 class="modal-title">Server aktualisiert Datenbank...</h4>
+            </div>
+            <div class="modal-body">
+              <div class="progress">
+                <div id="parsingProgressbar" class="progress-bar progress-bar-striped active" role="progressbar" style="min-width: 2em;">
+                  0%
+                </div>
+              </div>
+              <div class="progress">
+                <div id="indexingProgressbar" class="progress-bar progress-bar-striped active" role="progressbar" style="min-width: 2em;">
+                  0%
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-sm-4">Einträge:
+                  <div id="indexingMessage">0</div>
+                </div>
+                <div class="col-sm-4">Dauer:
+                  <div id="indexingTimeLabel">0</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="contactModal" class="modal fade" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <button type="button" class="close" data-dismiss="modal">&times;</button>
+              <h4 class="modal-title">Kontakt</h4>
+            </div>
+            <div class="modal-body">
+              <p>Für gefundene Fehler oder Verbesserungsvorschläge verwende bitte die <a target="_blank" href="https://github.com/mediathekview/mediathekviewweb/issues">Issues auf
+                  GitHub.</a></p>
+              <p>Für fehlende Sendungen gibt es Hilfe <a target="_blank" href="https://forum.mediathekview.de/">im Forum</a>.</p>
+              <p>Für alles andere oder im Fall, dass du kein GitHub Account hast/willst, schreibe mir eine Mail: <a target="_blank"
+                   href="mailto:kontakt@mediathekviewweb.de">kontakt@mediathekviewweb.de</a>. Bitte keine Anfragen zu fehlenden Sendungen per Mail!</p>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      <div id="cookieModal" class="modal fade" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h4 class="modal-title">Cookies</h4>
+            </div>
+            <div class="modal-body">
+              <p>
+                Diese Website verwendet Cookies für die Darstellung von Werbung. Hierbei werden Daten an Google übertragen. Nähere Informationen dazu finden Sie in unserer
+                <a target="_blank" href="datenschutz.html">Datenschutzerklärung</a>.
+                Klicken Sie auf „Akzeptieren“, um Cookies zu akzeptieren und direkt unsere Website besuchen zu können.
+              </p>
+
+              <p>
+                <a target="_blank" href="impressum.html">Impressum aufrufen</a>
+              </p>
+
+              <p>
+                Sollten Sie mit den Werbe-Cookies nicht einverstanden sein, bitten wir Sie über eine
+                <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=BDVH46DLCM7E8&amp;source=url" target="_blank">Spende</a>
+                nachzudenken, um den Weiterbetrieb der Website zu ermöglichen.
+              </p>
+
+              <button id="cookieDenyButton" class="btn btn-default margin-right-1" type="button">Ablehnen</button>
+              <button id="cookieAcceptButton" class="btn btn-success" type="button">Akzeptieren</button>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+++++

data/lib/starter_web/pages/public/learn/mweb/static/index.css

@@ -0,0 +1,237 @@
+html * {
+  font-family: 'Roboto';
+}
+
+.spin-left {
+  animation: spinleft 2s infinite linear;
+}
+
+.spin-right {
+  animation: spinright 2s infinite linear;
+}
+
+@keyframes spinleft {
+  from {
+    transform: scale(1) rotate(360deg);
+  }
+
+  to {
+    transform: scale(1) rotate(0deg);
+  }
+}
+
+@keyframes spinright {
+  from {
+    transform: scale(1) rotate(0deg);
+  }
+
+  to {
+    transform: scale(1) rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.8);
+  }
+
+  50% {
+    transform: scale(0.8);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* The element to apply the animation to */
+.pulse {
+  animation: pulse 0.5s;
+}
+
+.showafter1s {
+  animation: show 1s;
+}
+
+@keyframes show {
+  0% {
+    opacity: 0;
+  }
+
+  99% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.margin-left {
+  margin-left: 0.2em;
+}
+
+.margin-right {
+  margin-right: 0.2em;
+}
+
+.margin-right-1 {
+  margin-right: 1rem;
+}
+
+.paginationstyle {
+  margin: 0 !important;
+  float: right;
+}
+
+.initiallyHidden {
+  display: none;
+}
+
+.floatRight {
+  float: right;
+}
+
+.rotateLeft {
+  -webkit-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+
+.floatLeft {
+  float: left;
+}
+
+.watchDownloadField {
+  min-width: 4.2em;
+}
+
+.filesizeCell {
+  min-width: 6em;
+}
+
+.movie-icon {
+  line-height: 0 !important;
+}
+
+.material-icons {
+  vertical-align: middle;
+  transition: all 0.25s ease-in-out;
+}
+
+td {
+  vertical-align: middle !important;
+  line-height: 1.5rem !important;
+  padding: 0px 8px !important;
+  height: 40px !important;
+}
+
+label {
+  vertical-align: middle;
+  top: 50%;
+  line-height: 0;
+}
+
+#queryInputGroup {
+  width: 100%;
+}
+
+#queryInputClearButton {
+  position: absolute;
+  font-size: 18px;
+  right: 1.3em;
+  top: 50%;
+  line-height: 0;
+  opacity: 0;
+  height: auto;
+  cursor: pointer;
+  z-index: 3;
+}
+
+#mediathek {
+  width: 100% !important;
+}
+
+.smallMarginTop {
+  margin-top: 0.7em;
+}
+
+.icon-big {
+  font-size: 2em !important;
+  transition: all 0.25s ease-in-out;
+}
+
+.icon-small {
+  font-size: 1.3em !important;
+  transition: all 0.25s ease-in-out;
+}
+
+.noPadding {
+  padding: 0 !important;
+}
+
+.blur {
+  -webkit-filter: blur(3px) !important;
+  filter: blur(3px) !important;
+  transition: all 0.4s ease-in-out;
+}
+
+.no-filter {
+  -webkit-filter: none;
+  filter: none;
+  transition: all 0.4s ease-in-out;
+}
+
+.overlay {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  z-index: 100000;
+  left: 0;
+  top: 0;
+  background-color: rgba(0, 0, 0, 0.85);
+  overflow-x: hidden;
+}
+
+.overlay-content {
+  position: absolute;
+  top: 20%;
+  width: 100%;
+  margin: 0;
+  text-align: center;
+}
+
+.overlay .closeButton {
+  position: absolute;
+  top: 20px;
+  right: 45px;
+  font-size: 60px;
+  cursor: pointer;
+}
+
+.about {
+  cursor: pointer;
+}
+
+.table {
+  margin-bottom: 0;
+}
+
+th[data-onclick-sort] {
+  cursor: pointer;
+}
+
+.dataTables_scrollHead tr[data-sort="channel-asc"] > th[data-onclick-sort="channel"]::after,
+.dataTables_scrollHead tr[data-sort="topic-asc"] > th[data-onclick-sort="topic"]::after,
+.dataTables_scrollHead tr[data-sort="timestamp-asc"] > th[data-onclick-sort="timestamp"]::after,
+.dataTables_scrollHead tr[data-sort="duration-asc"] > th[data-onclick-sort="duration"]::after {
+  content: "▲";
+  margin-left: 0.25em;
+}
+
+.dataTables_scrollHead tr[data-sort="channel-desc"] > th[data-onclick-sort="channel"]::after,
+.dataTables_scrollHead tr[data-sort="topic-desc"] > th[data-onclick-sort="topic"]::after,
+.dataTables_scrollHead tr[data-sort="timestamp-desc"] > th[data-onclick-sort="timestamp"]::after,
+.dataTables_scrollHead tr[data-sort="duration-desc"] > th[data-onclick-sort="duration"]::after {
+  content: "▼";
+  margin-left: 0.25em;
+}