j1-template 2021.3.2 → 2022.0.0

data/lib/starter_web/pages/_test_pages/infinite-scroll-tester-4.adoc

@@ -0,0 +1,222 @@
+---
+title:                                  Tester
+tagline:                                infinite scroll
+date:                                   2020-11-03 00:00:00 +100
+description: >
+                                        Welcome to the preview page focussing on the image module. This page
+                                        shows some valuable features of the J1 Template to manage your image-based
+                                        content using lightboxes, carousels (slider), and galleries.
+
+categories:                             [ Testpages ]
+tags:                                   [ Example ]
+
+comments:                               false
+fab_menu_id:                            page_ctrl_simple
+
+permalink:                              /pages/public/learn/scroller-4/
+regenerate:                             false
+
+resources:                              [ j1scroll ]
+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
+---
+
+// 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)
+// -----------------------------------------------------------------------------
+
+== Infinite scroll example 3
+
+lorem:sentences[5]
+
+++++
+<div class="row">
+  <ul id="home_news_panel-scroll-group" class="list-group list-group-horizontal align-items-stretch flex-wrap">
+  	<!-- [INFO   ] [j1.assets.data.panel.html             ] [ write post items ] -->
+  	<li id="home_news_panel-scroll-item" class="list-group-item items-2 p-0">
+  	  <article class="card card-same-height raised-z3 mb-3">
+  		<img class="img-fluid img-object--cover g-height-200" src="/assets/images/modules/attics/katie-moum-1920x1280.jpg" alt="Welcome">
+  		<h3 class="card-header bg-primary notoc">Welcome</h3>
+  		<!-- Body|Excerpt -->
+  		<div class="card-body r-text-300 mt-4">
+  		  <div class="paragraph dropcap">
+  			<p class="dropcap"><span class="j1-dropcap">A</span>ll you’re doing at the end of the day is writing your content, and the J1
+  			  Template does all the tricky things: putting out HTML, Javascript, and CSS.
+  			  As a result, the site creation process gets out of your way.</p>
+  		  </div>
+  		  <div class="paragraph">
+  			<p><strong>Sounds fun, isn’t it</strong>?</p>
+  		  </div>
+  		</div>
+  		<!-- End Body|Excerpt -->
+  		<div class="card-footer r-text-200">
+  		  <div class="card-footer-text">
+  			<i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>2021 March, 28
+  		  </div>
+  		  <a class="card-link text-muted text-lowercase" href="/posts/public/featured/info/2021/03/28/welcome-to-j1/">
+  			read · jekyll for everyone
+  		  </a>
+  		</div>
+  	  </article>
+  	</li>
+  	<li id="home_news_panel-scroll-item" class="list-group-item items-2 p-0">
+
+  	  <article class="card card-same-height raised-z3 mb-3">
+  		<img class="img-fluid img-object--cover g-height-200" src="/assets/images/modules/attics/runner-1920x1200.jpg" alt="J1 Template">
+  		<h3 class="card-header bg-primary notoc">J1 Template</h3>
+  		<!-- Body|Excerpt -->
+  		<div class="card-body r-text-300 mt-4">
+  		  <div class="paragraph dropcap">
+  			<p class="dropcap"><span class="j1-dropcap">T</span>he template system was initially developed to create a simple but fully
+  			  configurable website creation toolset for document servers. Document servers
+  			  provide websites or other content formats like PDF, projects, software
+  			  documentation, or similar approaches.</p>
+  		  </div>
+  		</div>
+  		<!-- End Body|Excerpt -->
+  		<div class="card-footer r-text-200">
+  		  <div class="card-footer-text">
+  			<i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>2021 March,  3
+  		  </div>
+  		  <a class="card-link text-muted text-lowercase" href="/posts/public/featured/knowledge/2021/03/03/about-j1/">
+  			read · first version is out
+  		  </a>
+  		</div>
+  	  </article>
+  	</li>
+  </ul>
+</div>
+++++
+
+++++
+<script>
+
+var _createClass = function () {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+  return function (Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+}();
+
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+var j1Scroller = function () {
+  function j1Scroller(path, wrapperId) {
+    _classCallCheck(this, j1Scroller);
+
+    if (path === undefined || wrapperId === undefined) throw Error('no parameter.');
+    this.path = path;
+    this.pNum = 2;
+    this.pMaxNum = 6;
+    this.wNode = document.getElementById(wrapperId);
+    this.wrapperId = wrapperId;
+    this.enable = true;
+
+    this.detectScroll();
+  }
+
+  _createClass(j1Scroller, [{
+    key: 'detectScroll',
+    value: function detectScroll() {
+      var _this = this;
+
+      window.onscroll = function (ev) {
+        if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) _this.getNewPost();
+      };
+    }
+  }, {
+    key: 'getNewPost',
+    value: function getNewPost() {
+      var _this = this;
+      if (_this.pNum >= this.pMaxNum ) {
+        return;
+      }
+      if (this.enable === false) return false;
+      this.enable = false;
+      var xmlhttp = new XMLHttpRequest();
+      xmlhttp.onreadystatechange = function () {
+        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
+          if (xmlhttp.status == 200) {
+            _this.pNum++;
+            var childItems = _this.getChildItemsByAjaxHTML(xmlhttp.responseText);
+            _this.appendNewItems(childItems);
+          }
+          return _this.enable = true;
+        }
+      };
+      xmlhttp.open("GET", location.origin + this.path + this.pNum + '/index.html', true);
+      xmlhttp.send();
+    }
+  }, {
+    key: 'getChildItemsByAjaxHTML',
+    value: function getChildItemsByAjaxHTML(HTMLText) {
+      var newHTML = document.createElement('html');
+      newHTML.innerHTML = HTMLText;
+      var childItems = newHTML.querySelectorAll('#' + this.wrapperId + ' > *');
+      return childItems;
+    }
+  }, {
+    key: 'appendNewItems',
+    value: function appendNewItems(items) {
+      var _this = this;
+
+      items.forEach(function (item) {
+        _this.wNode.appendChild(item);
+      });
+    }
+  }]);
+
+  return j1Scroller;
+}();
+
+var postWrapperId = 'home_news_panel-scroll-group';
+var paginatePath  = '/assets/data/news_panel_posts/page';
+
+// new j1Scroller(paginatePath, postWrapperId);
+
+</script>
+++++

data/lib/starter_web/pages/_test_pages/infinite-scroll-tester-5.adoc

@@ -0,0 +1,119 @@
+---
+title:                                  Tester
+tagline:                                infinite scroll
+date:                                   2020-11-03 00:00:00 +100
+description: >
+                                        Welcome to the preview page focussing on the image module. This page
+                                        shows some valuable features of the J1 Template to manage your image-based
+                                        content using lightboxes, carousels (slider), and galleries.
+
+categories:                             [ Testpages ]
+tags:                                   [ Example ]
+
+comments:                               false
+fab_menu_id:                            page_ctrl_simple
+
+permalink:                              /pages/public/learn/scroller-5/
+regenerate:                             false
+
+resources:                              [ j1scroll, showonscroll ]
+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
+---
+
+// 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)
+// -----------------------------------------------------------------------------
+
+== Infinite scroll example 5
+
+lorem:sentences[5]
+
+++++
+<div class="noClass">
+  <ul id="home_news_panel-scroll-group" class="list-group list-group-horizontal align-items-stretch flex-wrap">
+  	<!-- [INFO   ] [j1.assets.data.panel.html             ] [ write post items ] -->
+  	<li id="home_news_panel-scroll-item" class="list-group-item items-2 p-0">
+  	  <article class="card card-same-height raised-z3 mb-3">
+  		<img class="img-fluid img-object--cover g-height-200" src="/assets/images/modules/attics/katie-moum-1920x1280.jpg" alt="Welcome">
+  		<h3 class="card-header bg-primary notoc">Welcome</h3>
+  		<!-- Body|Excerpt -->
+  		<div class="card-body r-text-300 mt-4">
+  		  <div class="paragraph dropcap">
+  			<p class="dropcap"><span class="j1-dropcap">A</span>ll you’re doing at the end of the day is writing your content, and the J1
+  			  Template does all the tricky things: putting out HTML, Javascript, and CSS.
+  			  As a result, the site creation process gets out of your way.</p>
+  		  </div>
+  		  <div class="paragraph">
+  			<p><strong>Sounds fun, isn’t it</strong>?</p>
+  		  </div>
+  		</div>
+  		<!-- End Body|Excerpt -->
+  		<div class="card-footer r-text-200">
+  		  <div class="card-footer-text">
+  			<i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>2021 March, 28
+  		  </div>
+  		  <a class="card-link text-muted text-lowercase" href="/posts/public/featured/info/2021/03/28/welcome-to-j1/">
+  			read · jekyll for everyone
+  		  </a>
+  		</div>
+  	  </article>
+  	</li>
+  	<li id="home_news_panel-scroll-item" class="list-group-item items-2 p-0">
+
+  	  <article class="card card-same-height raised-z3 mb-3">
+  		<img class="img-fluid img-object--cover g-height-200" src="/assets/images/modules/attics/runner-1920x1200.jpg" alt="J1 Template">
+  		<h3 class="card-header bg-primary notoc">J1 Template</h3>
+  		<!-- Body|Excerpt -->
+  		<div class="card-body r-text-300 mt-4">
+  		  <div class="paragraph dropcap">
+  			<p class="dropcap"><span class="j1-dropcap">T</span>he template system was initially developed to create a simple but fully
+  			  configurable website creation toolset for document servers. Document servers
+  			  provide websites or other content formats like PDF, projects, software
+  			  documentation, or similar approaches.</p>
+  		  </div>
+  		</div>
+  		<!-- End Body|Excerpt -->
+  		<div class="card-footer r-text-200">
+  		  <div class="card-footer-text">
+  			<i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>2021 March,  3
+  		  </div>
+  		  <a class="card-link text-muted text-lowercase" href="/posts/public/featured/knowledge/2021/03/03/about-j1/">
+  			read · first version is out
+  		  </a>
+  		</div>
+  	  </article>
+  	</li>
+  </ul>
+</div>
+++++

data/lib/starter_web/pages/_test_pages/infinite-scroll-tester.1.adoc

@@ -0,0 +1,236 @@
+---
+title:                                  Tester
+tagline:                                infinite scroll
+date:                                   2020-11-03 00:00:00 +100
+description: >
+                                        Welcome to the preview page focussing on the image module. This page
+                                        shows some valuable features of the J1 Template to manage your image-based
+                                        content using lightboxes, carousels (slider), and galleries.
+
+categories:                             [ Testpages ]
+tags:                                   [ Example ]
+
+comments:                               false
+fab_menu_id:                            page_ctrl_simple
+
+permalink:                              /pages/public/learn/scroller/
+regenerate:                             false
+
+resources:                              [
+                                          clipboard, rouge, carousel, lightbox,
+                                          justifiedGallery, lightGallery
+                                        ]
+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
+---
+
+// 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)
+// -----------------------------------------------------------------------------
+
+== Example with cards
+++++
+<div class="row">
+	<section id="scroller">
+  <ul class="list-group list-group-horizontal align-items-stretch flex-wrap">
+      <li class="list-group-item items-2 p-0">
+        <article class="card raised-z3 p-0">
+          <img class="img-fluid img-object--cover" src="/assets/images/modules/attics/rirri-1920x1280.jpg" alt="Polaroid">
+          <h3 class="card-header bg-primary notoc">Polaroid</h3>
+          <div class="card-body r-text-300">
+            <div class="paragraph dropcap">
+              <p class="dropcap"><span class="j1-dropcap">M</span>ehr als zehn Jahre nach der Insolvenz von Polaroid ist die Sofortbildfotografie heute erfolgreicher denn je. Sofortbilder sind vorallem eines: Einzigartig. Polaroids fangen Momente ein wie sind. Nicht zu wiederholen.</p>
+            </div>
+            <div class="paragraph">
+              <p><strong>Was geht denn sofort?</strong></p>
+            </div>
+          </div>
+          <div class="card-footer r-text-200">
+            
+            <div class="card-footer-text"> <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>1. Januar 2025 </div>
+            <a class="card-link text-muted text-lowercase" href="/posts/public/featured/produkte/2025/01/01/gegenbewegung_polaroit/"> lesen · Gegenbewegung </a>
+          </div>
+        </article>
+      </li>
+      <li class="list-group-item items-2 p-0">
+        <article class="card raised-z3 p-0">
+          <img class="img-fluid img-object--cover" src="/assets/images/modules/attics/franck-1920x1280.jpg" alt="TikTok">
+          <h3 class="card-header bg-primary notoc">TikTok</h3>
+          <div class="card-body r-text-300">
+            <div class="paragraph dropcap">
+              <p class="dropcap"><span class="j1-dropcap">T</span>ikTok ist eine Social-Media Plattform mit Schwerpunkt Video-Content. Die Nutzer können kurze selbstgemachte Videos teilen. Die Plattform bietet einen Raum, in dem einfach und schnell die eigenen Inhalte veröffentlicht werden können.</p>
+            </div>
+            <div class="paragraph">
+              <p><strong>Was kann TikTok besser?</strong></p>
+            </div>
+          </div>
+          <div class="card-footer r-text-200">
+            
+            <div class="card-footer-text"> <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>1. Januar 2025 </div>
+            <a class="card-link text-muted text-lowercase" href="/posts/public/featured/produkte/2025/01/01/aufsteiger_tiktok/"> lesen · video neu gedacht </a>
+          </div>
+        </article>
+      </li>
+  </ul>
+	</section>
+  <div class="page-load-status">
+    <div class="loader-ellips infinite-scroll-request">
+      <span class="loader-ellips__dot"></span>
+      <span class="loader-ellips__dot"></span>
+      <span class="loader-ellips__dot"></span>
+      <span class="loader-ellips__dot"></span>
+    </div>
+    <!-- p class="infinite-scroll-last">End of content</p -->
+    <!-- p class="infinite-scroll-error">Weitere Artikel finden Sie im <a href="/pages/public/blog/navigator/">Blog Navigator</a></p -->
+    <p class="infinite-scroll-last">Weitere Artikel finden Sie im <a href="/pages/public/blog/navigator/">Blog Navigator</a></p>
+  </div>
+
+  <!-- div class="last-page-indicator">
+    <p class="infinite-scroll-last">End of content</p>
+    <p class="infinite-scroll-error">Weitere Artikel finden Sie im <a href="/pages/public/blog/navigator/">Blog Navigator</a></p>
+  </div -->
+
+</div>
+
+<style>
+
+.card {
+	height: calc(100% - 1.75rem);
+}
+
+.page-load-status {
+  display: none; /* hidden by default */
+  padding-top: 20px;
+  border-top: 1px solid #DDD;
+  text-align: center;
+  color: #777;
+}
+
+.loader-ellips {
+  font-size: 20px; /* change size here */
+  position: relative;
+  width: 4em;
+  height: 1em;
+  margin: 10px auto;
+}
+
+.loader-ellips__dot {
+  display: block;
+  width: 1em;
+  height: 1em;
+  border-radius: 0.5em;
+  background: #555; /* change color here */
+  position: absolute;
+  animation-duration: 0.5s;
+  animation-timing-function: ease;
+  animation-iteration-count: infinite;
+}
+
+.loader-ellips__dot:nth-child(1),
+.loader-ellips__dot:nth-child(2) {
+  left: 0;
+}
+.loader-ellips__dot:nth-child(3) { left: 1.5em; }
+.loader-ellips__dot:nth-child(4) { left: 3em; }
+
+@keyframes reveal {
+  from { transform: scale(0.001); }
+  to { transform: scale(1); }
+}
+
+@keyframes slide {
+  to { transform: translateX(1.5em) }
+}
+
+.loader-ellips__dot:nth-child(1) {
+  animation-name: reveal;
+}
+
+.loader-ellips__dot:nth-child(2),
+.loader-ellips__dot:nth-child(3) {
+  animation-name: slide;
+}
+
+.loader-ellips__dot:nth-child(4) {
+  animation-name: reveal;
+  animation-direction: reverse;
+}
+
+</style>
+
+<script>
+
+  $(document).ready(function() {
+
+    var dependencies_met_page_ready = setInterval (function (options) {
+      if ( j1.getState() === 'finished' ) {
+        var logger = log4javascript.getLogger("j1.infiniteScroll");
+        var log_text = '\n module infiniteScroll is being initialized';
+        logger.info(log_text);
+
+        function getPosts() {
+          var pageNumber = ( this.loadCount + 1 );
+          if ( pageNumber < 30) {
+            return `/pages/public/scroller/scroller-p${pageNumber}.html`;
+          }
+        }
+
+        //  status: '.page-load-status',
+        $('.list-group').infiniteScroll({
+          path: getPosts,
+          append: '.list-group-item',
+          history: false,
+          scrollThreshold: 10,
+          checkLastPage: true,
+          status: '.page-load-status',
+        });
+
+        $('.list-group').on( 'error.infiniteScroll', function( event, error, path, response ) {
+          var logger = log4javascript.getLogger("j1.infiniteScroll");
+          var log_text = `\n Could not load: ${path}. ${error}`;
+          logger.info(log_text);
+        });
+
+        $('.list-group').on( 'last.infiniteScroll', function( event, body, path ) {
+          var logger = log4javascript.getLogger("j1.infiniteScroll");
+          var log_text = `\n last page reached on ${path}`;
+          logger.info(log_text);
+          // console.log(`Last page hit on ${path}`);
+        });
+        clearInterval(dependencies_met_page_ready);
+      }
+    });
+   });
+
+</script>
+++++