j1-template 2020.0.11 → 2020.0.12

data/lib/starter_web/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "j1_starter",
-  "version": "2020.0.11",
+  "version": "2020.0.12",
   "description": "J1 Template starter Web",
   "homepage": "https://your.site",
   "author": {

data/lib/starter_web/pages/public/learn/examples/floating_ad.adoc

@@ -0,0 +1,221 @@
+---
+title:                                  CSS Examples
+tagline:                                floating ads
+description:                            floating ads
+
+tags:                                   [ Page, Roundtrip ]
+index:                                  [ Start, Template, Whats, Up, Readme, TL;DR ]
+categories:                             [ pages ]
+
+toc:                                    true
+advertising:                            true
+
+permalink:                              /pages/public/learn/fad/
+regenerate:                             false
+
+resources:                              [ lightbox ]
+resource_options:
+---
+
+// Enable the Liquid Preprocessor
+// -----------------------------------------------------------------------------
+:page-liquid:
+
+
+// Set other global page attributes here
+// -----------------------------------------------------------------------------
+//:my-asciidoc-attribute:
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
+
+
+// Initialize entry document environmental attributes
+// -----------------------------------------------------------------------------
+{% include {{set_env_entry_document}} %}
+
+// Load tag, url and data attributes
+// -----------------------------------------------------------------------------
+// include::{includedir}/attributes.asciidoc[tag=tags]
+// include::{includedir}/attributes.asciidoc[tag=urls]
+// include::{includedir}/attributes.asciidoc[tag=data]
+
+// Set local page attributes
+// -----------------------------------------------------------------------------
+// :images-dir:                         {imagesdir}/path/to/page/images
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents
+// -----------------------------------------------------------------------------
+
+Welcome to the pages of J1 Template. If your here first time,
+hopefully you get on that page first. For sure, there is no better
+place to step in.
+
+Having a menu system is great. We hope the the navigator module of J1 will
+support you to explore this site, find what your are looking for. The site
+of J1 has grown over the last month a lot. Many documents were seeking for
+a home. And we have really a bunch of them.
+
+== Orientation
+
+To get better orientated, the site is organized for *natural reading*. As we
+use the English language for our international vistors (we are German),
+*natural reading* means for a western language, reading from the left to the
+right (LTR), and from top to down a page. The same to all menus, sections
+and pages.
+
+Welcome to the pages of J1 Template. If your here first time,
+hopefully you get on that page first. For sure, there is no better
+place to step in.
+
+Having a menu system is great. We hope the the navigator module of J1 will
+support you to explore this site, find what your are looking for. The site
+of J1 has grown over the last month a lot. Many documents were seeking for
+a home. And we have really a bunch of them.
+
+To get better orientated, the site is organized for *natural reading*. As we
+use the English language for our international vistors (we are German),
+*natural reading* means for a western language, reading from the left to the
+right (LTR), and from top to down a page. The same to all menus, sections
+and pages.
+Welcome to the pages of J1 Template. If your here first time,
+hopefully you get on that page first. For sure, there is no better
+place to step in.
+
+Having a menu system is great. We hope the the navigator module of J1 will
+support you to explore this site, find what your are looking for. The site
+of J1 has grown over the last month a lot. Many documents were seeking for
+a home. And we have really a bunch of them.
+
+To get better orientated, the site is organized for *natural reading*. As we
+use the English language for our international vistors (we are German),
+*natural reading* means for a western language, reading from the left to the
+right (LTR), and from top to down a page. The same to all menus, sections
+and pages.
+
+
+++++
+<style>
+
+  .advertising {
+    display: none;
+  }
+
+  .adblock {
+  }
+
+  .adblock-fixed {
+    position: fixed;
+  }
+
+/* .sidebar {
+    width:33.33%;
+    float:left;
+    padding: 0 10px;
+} */
+
+/*
+  .floating-div {
+    background-color: #333;
+    padding: 10px 50px;
+    color:#EEE;
+    font-size: 20px;
+    margin-top:10px;
+    position: absolute;
+    right: -40px;
+  }
+*/
+  .floating-div {
+      background-color: #333;
+      /* padding: 10px 50px; */
+      color: #EEE;
+      font-size: 20px;
+      /* margin-top: 10px; */
+      /* position: absolute; */
+      /* right: -40px; */
+  }
+
+  .sticky {
+    position: fixed;
+    top: 150px;
+    right:-40px;
+    margin: 0;
+    width:calc(33.33% - 25px);
+  }
+
+  .abs {
+    position: absolute;
+    bottom: 10px;
+    right:10px;
+    width:calc(33.33% - 20px);
+  }
+</style>
+
+<script>
+  $(document).ready(function() {
+    var dependencies_met_core = setInterval(function() {
+      if (j1.getState() == 'finished') {
+        // variables
+        var logger = log4javascript.getLogger('fad.scrollSpy');
+
+        var $window             = $(window);
+        var $navbar             = $('nav.navbar');
+        var $attic              = $('.attic');
+        var $main_content       = $('.js-toc-content');
+        var $adblock            = $('#adblock');
+        var $footer             = $('#j1_footer');
+
+        var pageHeight          = $window.height();
+        var pageHeightOuter     = $window.outerHeight();
+
+        var atticHeight         = $attic.height();
+        var atticHeightOuter    = $attic.outerHeight()
+        var navbarHeight        = $navbar.height();
+        var navbarHeightOuter   = $navbar.outerHeight()
+
+        var footerHeight        = $footer.height();
+        var footerHeightOuter   = $footer.outerHeight();
+        var footerFromTop       = $footer.offset().top;
+
+        var adFromTop           = $adblock.offset().top;
+        var adblockHeight       = $adblock.height();
+        var adblockHeightOuter  = $adblock.outerHeight();
+
+        var a                   = $adblock.offset().top;
+        var m                   = $main_content.offset().top;
+        var h                   = $attic.length ? $attic.height() : 0;
+        var n                   = $navbar.length ? $navbar.height() : 0;
+
+        var fixPosition         = navbarHeight;
+        var absPosition         = fixPosition - 10;
+
+        $window.scroll(function() {
+          var scrollPos = $(document).scrollTop();
+
+          logger.info('document scroll pos detected as: ' + scrollPos + 'px');
+
+          if ($window.scrollTop() > fixPosition) {
+            $adblock.show();
+            $adblock.addClass('adblock-fixed');
+//          $adblock.css('top', 80);
+            $adblock.css('top', fixPosition);
+          } else if ($window.scrollTop() < absPosition) {
+            $adblock.removeClass('adblock-fixed');
+            $adblock.removeAttr('style');
+            $adblock.hide();
+          } else {
+            $adblock.removeClass('adblock-fixed');
+            $adblock.removeAttr('style');
+            $adblock.hide();
+          }
+        });
+        clearInterval(dependencies_met_core);
+      }
+    }, 25);
+  });
+</script>
+++++

data/lib/starter_web/pages/public/learn/examples/floating_div.adoc

@@ -49,7 +49,21 @@ resource_options:
 // -----------------------------------------------------------------------------
 
 ++++
-<div class="sidebar">
+    <div id="adblock" class="row no-gutters adblock">
+      <div class="doc-example mb-3">
+        <button type="button" class="btn btn-primary btn-raised">Primary</button>
+        <button type="button" class="btn btn-secondary btn-raised">Secondary</button>
+        <button type="button" class="btn btn-success btn-raised">Success</button>
+        <button type="button" class="btn btn-info btn-raised">Info</button>
+        <button type="button" class="btn btn-warning btn-raised">Warning</button>
+        <button type="button" class="btn btn-danger btn-raised">Danger</button>
+        <button type="button" class="btn btn-link btn-raised">Link</button>
+      </div>
+    </div>
+++++
+
+++++
+<div class="">
   <div class="floating-div">
     <p>This "floating div" could be a form, a call to action, an ad,
       or whatever other content you want to float in sidebar as the user
@@ -106,12 +120,20 @@ and pages.
 ++++
 <style>
 
+  .adblock {
+  }
+
+  .adblock-fixed {
+    position: fixed;
+  }
+
   .sidebar {
     width:33.33%;
     float:left;
     padding: 0 10px;
   }
 
+/*
   .floating-div {
     background-color: #333;
     padding: 10px 50px;
@@ -121,6 +143,16 @@ and pages.
     position: absolute;
     right: -40px;
   }
+*/
+  .floating-div {
+      background-color: #333;
+      /* padding: 10px 50px; */
+      color: #EEE;
+      font-size: 20px;
+      /* margin-top: 10px; */
+      /* position: absolute; */
+      /* right: -40px; */
+  }
 
   .sticky {
     position: fixed;

data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/419_advanced_modals_html.asciidoc

@@ -128,7 +128,7 @@
     <div class="modal-content">
       <!-- Body -->
       <div class="modal-body">
-        <p class="mt-1 ml-3 mr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p><div class="row ml-3">          
+        <p class="mt-1 ml-3 mr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p><div class="row ml-3">
           <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
           <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks<div class="ripple-container"><div class="ripple-decorator ripple-on ripple-out" style="left: 51.4063px; top: 20px; background-color: rgb(1, 211, 107); transform: scale(14.5548);"></div></div></a>
         </div>
@@ -184,7 +184,7 @@
       </div>
       <!-- Body -->
       <div class="modal-body">
-        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg" alt="admin-dashboard-bootstrap" class="img-fluid">
         <div class="text-center">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
         </div>
@@ -409,7 +409,7 @@
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
           </p>
         </div>
-        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg" alt="admin-dashboard-bootstrap" class="img-fluid">
       </div>
       <!-- Footer -->
       <div class="modal-footer">
@@ -724,7 +724,7 @@
       </div>
       <!-- Body -->
       <div class="modal-body">
-        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg" alt="admin-dashboard-bootstrap" class="img-fluid">
         <div class="text-center">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
         </div>
@@ -925,4 +925,4 @@
   </div>
 </div>
 <!--END Modal Subscription -->
-++++
+++++

data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc

@@ -11,10 +11,10 @@ toc:                                    true
 scrollbar:                              false
 
 permalink:                              /pages/public/learn/roundtrip/present_images/
-regenerate:                             false
+regenerate:                             true
 
 resources:                              [
-                                          bs_tour, carousel, lightbox,
+                                          carousel, lightbox,
                                           justified_gallery, light_gallery
                                         ]
 resource_options:

data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc

@@ -8,9 +8,10 @@ index:                                  [ Template, Roundtrip, Typography ]
 categories:                             [ pages ]
 
 permalink:                              /pages/public/learn/roundtrip/typography/
-regenerate:                             false
+regenerate:                             true
 
 toc:                                    true
+advertising:                            false
 
 resources:                              []
 resource_options:

data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc

@@ -10,7 +10,7 @@ categories:                             [ pages ]
 permalink:                              /pages/public/learn/roundtrip/mdi_icon_font/
 regenerate:                             false
 
-resources:                              []
+resources:                              [ iconify_api ]
 resource_options:
   - attic:
       padding_top:                      400
@@ -89,7 +89,7 @@ project to create an increased icon-set based on _Google_'s official repository
 and MD style specification.
 
 .Material Design Icons
-[cols="2a,3a,4a,3a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
+[cols="2a,3a,4a,^", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
 
@@ -100,7 +100,7 @@ and MD style specification.
 ----
 mdi:account[1x]
 ----
-^|mdi:account[1x]
+|mdi:account[1x]
 
 |3x
 |no modifier set
@@ -109,7 +109,7 @@ mdi:account[1x]
 ----
 mdi:account[3x]
 ----
-^|mdi:account[3x]
+|mdi:account[3x]
 
 |5x
 |no modifier set
@@ -118,7 +118,7 @@ mdi:account[3x]
 ----
 mdi:account[5x]
 ----
-^|mdi:account[5x]
+|mdi:account[5x]
 
 |5x
 |`mdi-rotate-45`
@@ -127,7 +127,7 @@ mdi:account[5x]
 ----
 mdi:account[5x mdi-rotate-45]
 ----
-^|mdi:account[5x mdi-rotate-45]
+|mdi:account[5x mdi-rotate-45]
 
 |5x
 |`mdi-rotate-315`
@@ -136,7 +136,7 @@ mdi:account[5x mdi-rotate-45]
 ----
 mdi:account[5x mdi-rotate-315]
 ----
-^|mdi:account[5x mdi-rotate-315]
+|mdi:account[5x mdi-rotate-315]
 
 |5x
 |`mdi-light` +
@@ -146,7 +146,7 @@ mdi:account[5x mdi-rotate-315]
 ----
 mdi:alert[5x mdi-light mdi-flip-v]
 ----
-^|mdi:alert[5x mdi-light mdi-flip-v]
+|mdi:alert[5x mdi-light mdi-flip-v]
 
 |5x
 |`md-indigo`
@@ -155,7 +155,7 @@ mdi:alert[5x mdi-light mdi-flip-v]
 ----
 mdi:alert[5x md-indigo]
 ----
-^|mdi:account[5x md-indigo]
+|mdi:account[5x md-indigo]
 
 |5x
 |`md-pink`
@@ -164,7 +164,7 @@ mdi:alert[5x md-indigo]
 ----
 mdi:alert[5x md-pink]
 ----
-^|mdi:account[5x md-pink]
+|mdi:account[5x md-pink]
 
 |5x
 |`mdi-spin`
@@ -173,7 +173,7 @@ mdi:alert[5x md-pink]
 ----
 mdi:loading[5x mdi-spin]
 ----
-^|mdi:loading[5x mdi-spin]
+|mdi:loading[5x mdi-spin]
 
 |5x
 |`md-red-900` +
@@ -183,7 +183,7 @@ mdi:loading[5x mdi-spin]
 ----
 mdi:heart[5x md-red-900 mdi-pulsed]
 ----
-^|mdi:heart[5x md-red-900 mdi-pulsed]
+|mdi:heart[5x md-red-900 mdi-pulsed]
 
 |===============================================================================
 
@@ -223,7 +223,7 @@ and the MIT License.
 ====
 
 .FontAwesome Icons
-[cols="2a,3a,4a,3a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
+[cols="2a,3a,4a,^", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
 
@@ -234,7 +234,7 @@ and the MIT License.
 ----
 fas:user[1x]
 ----
-^|fas:user[1x mt-4]
+^|fas:user[1x]
 
 |3x
 |no modifier set
@@ -243,7 +243,7 @@ fas:user[1x]
 ----
 fas:user[3x]
 ----
-^|fas:user[3x mt-4]
+^|fas:user[3x]
 
 |5x
 |no modifier set
@@ -252,25 +252,16 @@ fas:user[3x]
 ----
 fas:user[5x]
 ----
-^|fas:user[5x mt-4]
+^|fas:user[5x]
 
 |5x
-|`fa-rotate-45`
-|Rotate 45 degrees
-[source, adoc, role="noclip"]
-----
-fas:user[5x fa-rotate-45]
-----
-^|fas:user[5x fa-rotate-45 mt-4]
-
-|5x
-|`fa-rotate-315`
-|Rotate 315 degrees
+|`fa-rotate-90`
+|Rotate 90 degrees
 [source, adoc, role="noclip"]
 ----
-fas:user[5x fa-rotate-315]
+fas:user[5x fa-rotate-90]
 ----
-^|fas:user[5x fa-rotate-315 mt-4]
+^|fas:user[5x fa-rotate-90]
 
 |5x
 |`mdi-light` +
@@ -280,7 +271,7 @@ fas:user[5x fa-rotate-315]
 ----
 fas:exclamation-triangle[5x mdi-light fa-flip-v]
 ----
-^|fas:exclamation-triangle[5x mdi-light fa-flip-v mt-4]
+^|fas:exclamation-triangle[5x mdi-light fa-flip-v]
 
 |5x
 |`md-indigo`
@@ -289,7 +280,7 @@ fas:exclamation-triangle[5x mdi-light fa-flip-v]
 ----
 fas:alert[5x md-indigo]
 ----
-^|fas:user[5x md-indigo mt-4]
+^|fas:user[5x md-indigo]
 
 |5x
 |`md-pink`
@@ -298,7 +289,7 @@ fas:alert[5x md-indigo]
 ----
 fas:alert[5x md-pink]
 ----
-^|fas:user[5x md-pink mt-4]
+^|fas:user[5x md-pink]
 
 |5x
 |`fa-spin`
@@ -307,17 +298,17 @@ fas:alert[5x md-pink]
 ----
 fas:circle-notch[5x fa-spin]
 ----
-^|fas:circle-notch[5x fa-spin mt-4]
+^|fas:circle-notch[5x fa-spin]
 
 |5x
 |`md-red-900` +
-`fa-pulsed`
+`md-red-900` `fa-pulsed`
 |Color set to MDI Dark Red and added animation of type Pulsed
 [source, adoc, role="noclip"]
 ----
 fas:heart[5x md-red-900 fa-pulsed]
 ----
-^|fas:heart[5x md-red-900 fa-pulsed mt-4]
+^|fas:heart[5x md-red-900 fa-pulsed]
 
 |===============================================================================
 
@@ -366,20 +357,20 @@ Currently, over 40,000 vector icons are available for many different use cases.
 Find some examples below.
 
 .Brand Icons
-[cols="2a,3a,4a,3a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
+[cols="2a,3a,4a,^", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
 
-|5x
+|3x
 |no modifier set
 |All `icons` can be found on the preview page at link:{iconify-brand-icons}[SVG Logos, {window}]
 [source, adoc, role="noclip"]
 ----
-iconify:logos:opensource[5x]
+iconify:logos:opensource[3x]
 ----
-^|iconify:logos:opensource[5x]
+^|iconify:logos:opensource[3x]
 
-|3x
+|5x
 |no modifier set
 |All `icons` can be found on the preview page at link:{iconify-brand-icons}[SVG Logos, {window}]
 [source, adoc, role="noclip"]
@@ -391,7 +382,7 @@ iconify:logos:atom[5x]
 |===============================================================================
 
 .Medical Icons
-[cols="2a,3a,4a,3a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
+[cols="2a,3a,4a,^", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
 
@@ -405,13 +396,13 @@ iconify:medical-icon:i-ear-nose-throat[3x]
 ^|iconify:medical-icon:i-ear-nose-throat[3x]
 
 |5x
-|no modifier set
+|`md-red-900`
 |All `icons` can be found on the preview page at link:{iconify-medical-icons}[Medical Icons, {window}]
 [source, adoc, role="noclip"]
 ----
-iconify:medical-icon:i-ear-nose-throat[5x]
+iconify:medical-icon:i-ear-nose-throat[5x md-red-900]
 ----
-^|iconify:medical-icon:i-ear-nose-throat[5x]
+^|iconify:medical-icon:i-ear-nose-throat[5x md-red-900]
 
 |===============================================================================