j1-template 2022.0.9 → 2022.0.10

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

@@ -1,222 +0,0 @@
----
-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

@@ -1,119 +0,0 @@
----
-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

@@ -1,236 +0,0 @@
----
-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>
-++++