j1-template 2020.0.22 → 2021.0.2

data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc

@@ -1,12 +1,14 @@
 ---
 title:                                  Roundtrip
 tagline:                                responsive tables
-description:                            Enhanced table styles for J1 Template
+date:                                   2020-11-09 12:00:00
+description: >
+                                        Creating a design for responsive tables is challenging. The approach used by
+                                        J1 Template is based on pure CSS on top of the classic Bootstrap styles for
+                                        simplicity and portability to be viewed best on all devices and browsers.
 
-
-tags:                                   [ Page, Roundtrip ]
-index:                                  [ Template, Bootstrap, Roundtrip, Extended, Tables]
-categories:                             [ pages ]
+tags:                                   [ Roundtrip, Introduction ]
+categories:                             [ Bootstrap, Table, Extension ]
 
 flowtext:                               false
 
@@ -15,8 +17,6 @@ regenerate:                             false
 
 resources:                              [ rtable, rouge ]
 resource_options:
-  - toccer:
-      collapseDepth:                    3
   - attic:
       padding_top:                      400
       padding_bottom:                   50
@@ -38,6 +38,7 @@ resource_options:
 // Set page (local) attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
+:debug:
 :images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
 
 //  Load Liquid procedures
@@ -46,15 +47,68 @@ resource_options:
 
 // Load page attributes
 // -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="local" %}
+{% include {{load_attributes}} scope="all" %}
 
 
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
 Creating a design for responsive tables is challenging. The approach used by
 J1 Template is based on pure CSS on top of the classic Bootstrap styles for
 simplicity and portability to be viewed best on all devices and browsers.
 
+ifdef::debug[]
+
+.Source, options NOT set
+[source, md, role="noclip"]
+----
+[cols=",", options="header", ]
+|===============================================================================
+|Bratze |Bru
+
+|Fick
+|dich
+
+|===============================================================================
+----
+
+
+.Options NOT set
+[cols=",", options="header", ]
+|===============================================================================
+|Bratze |Bru
+
+|Fick
+|dich
+
+|===============================================================================
+
+.Source, options SET
+[source, adoc, role="noclip"]
+----
+[cols="6a,6a", options="header", width="100%", role="table-responsive mt-3"]
+|===============================================================================
+|Bratze |Bru
+
+|Fick
+|dich
+
+|===============================================================================
+----
+
+.options set
+[cols="6a,6a", options="header", width="100%", role="table-responsive mt-3"]
+|===============================================================================
+|Bratze |Bru
+
+|Fick
+|dich
+
+|===============================================================================
+endif::[]
+
+
+
 == Table types
 
 But, for sure, the solution provided is a compromise. To fit the common needs

data/lib/starter_web/pages/public/learn/roundtrip/500_themes.adoc

@@ -1,19 +1,20 @@
 ---
 title:                                  Roundtrip
 tagline:                                themes
-description:                            J1 Template Roundtrip - Template Themes
+date:                                   2020-11-10 12:00:00
+description: >
+                                        The themes feature for J1 is in an experimental state for the template
+                                        system. Anyway, it makes sense to present what is possible using different
+                                        versions of Bootstrap's CSS styles for a website.
 
-tags:                                   [ Page, Roundtrip ]
-index:                                  [ Template, Roundtrip, Bootstrap, Themes ]
-categories:                             [ pages ]
+tags:                                   [ Roundtrip, Introduction ]
+categories:                             [ Theme, Module ]
 
 permalink:                              /pages/public/learn/roundtrip/themes/
 regenerate:                             false
 
 resources:                              [ rouge, clipboard ]
 resource_options:
-  - toccer:
-      collapseDepth:                    3
   - attic:
       padding_top:                      400
       padding_bottom:                   50
@@ -43,11 +44,12 @@ resource_options:
 
 // Load page attributes
 // -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="local" %}
+{% include {{load_attributes}} scope="all" %}
 
 
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
 ++++
 <!-- page_path:            {{page_path | debug}} -->
 <!-- site.source:          {{site.source | debug}} -->

data/lib/starter_web/pages/public/learn/roundtrip/600_lunr.adoc

@@ -0,0 +1,236 @@
+---
+title:                                  Lunr
+tagline:                                full index search
+date:                                   2020-11-08 12:00:00
+description: >
+                                        Learn the search query language used by Lunr. The DSL used by Lunr
+                                        is quite close to Solr to support a powerful search experience
+                                        for better result. Using search expressions with wildcards, conditions
+                                        like and|or and fuzzy search algorithms are supported.
+
+tags:                                   [ Roundtrip, Introduction ]
+categories:                             [ Search ]
+
+toc:                                    true
+scrollbar:                              false
+
+permalink:                              /pages/public/learn/roundtrip/lunr/
+regenerate:                             true
+
+resources:                              [ lunr, rouge ]
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/modules/attics/banner/lunr-banner-1280x800.jpg
+          alt:                          Lunr
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set page (local) attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+== Searching
+
+After you have built an index of your documents, the next step is to
+perform a search.
+
+The simplest way to start is to pass the text on which you want to
+search into the search method:
+
+[source, javascript]
+----
+idx.search('foo')
+----
+
+The above will return details of all documents that match the term
+“foo”. Although it looks like a string, the `search` method parses the
+string into a search query. This supports special syntax for defining
+more complex queries.
+
+Searches for multiple terms are also supported. If a document matches
+_at least_ one of the search terms, it will show in the results. The
+search terms are combined with OR.
+
+[source, javascript]
+----
+idx.search('foo bar')
+----
+
+The above example will match documents that contain either “foo” or
+“bar”. Documents that contain _both_ will score more highly and will be
+returned first.
+
+=== Scoring
+
+The score (also known as relevance) of a document is calculated by the
+https://en.wikipedia.org/wiki/Okapi_BM25[BM25] algorithm, along with
+other factors such as link:#Boosts[boosts]. You don’t need to worry too
+much about the details of how BM25 works; to summarize, the more a
+search term occurs in a single document, the more that term will
+increase that document’s score, but the more a search term occurs in the
+overall _collection_ of documents, the less that term will increase a
+document’s score.
+
+For example, let’s say you’re indexing a collection of documents about
+JavaScript testing libraries. The terms “JavaScript”, “library”, and
+“test” may occur very frequently throughout the entire collection, so
+finding a document that mentions one of these terms isn’t very
+significant. However, if you’re searching for “integration test”, only
+three documents in the collection have the term “integration” in them,
+and _one_ of them mentions “integration” many times, that will bring the
+score for that one document higher up.
+
+=== Wildcards
+
+Lunr supports wildcards when performing searches. A wildcard is
+represented as an asterisk (`*`) and can appear anywhere in a search
+term. For example, the following will match all documents with words
+beginning with “foo”:
+
+[source, javascript]
+----
+idx.search('foo*')
+----
+
+This will match all documents that end with ‘oo’:
+
+[source, javascript]
+----
+idx.search('*oo')
+----
+
+Leading wildcards, as in the above example, should be used sparingly.
+They can have a negative impact on the performance of a search,
+especially in large indexes.
+
+Finally, a wildcard can be in the middle of a term. The following will
+match any documents that contain a term that begins with “f” and ends in
+“o”:
+
+[source, javascript]
+----
+idx.search('f*o')
+----
+
+It is also worth noting that, when a search term contains a wildcard, no
+stemming is performed on the search term.
+
+=== Fields
+
+By default, Lunr will search all fields in a document for the query
+term, and it is possible to restrict a term to a specific field. The
+following example searches for the term “foo” in the field title:
+
+[source, javascript]
+----
+idx.search('title:foo')
+----
+
+The search term is prefixed with the name of the field, followed by a
+colon (`:`). The field _must_ be one of the fields defined when building
+the index. Unrecognised fields will lead to an error.
+
+Field-based searches can be combined with all other term modifiers and
+wildcards, as well as other terms. For example, to search for words
+beginning with “foo” in the title or with “bar” in any field the
+following query can be used:
+
+[source, javascript]
+----
+idx.search('title:foo* bar')
+----
+
+=== Boosts
+
+In multi-term searches, a single term may be important than others. For
+these cases Lunr supports term level boosts. Any document that matches a
+boosted term will get a higher relevance score, and appear higher up in
+the results. A boost is applied by appending a caret (`^`) and then a
+positive integer to a term.
+
+[source, javascript]
+----
+idx.search('foo^10 bar')
+----
+
+The above example weights the term “foo” 10 times higher than the term
+“bar”. The boost value can be any positive integer, and different terms
+can have different boosts:
+
+[source, javascript]
+----
+idx.search('foo^10 bar^5 baz')
+----
+
+=== Fuzzy Matches
+
+Lunr supports fuzzy matching search terms in documents, which can be
+helpful if the spelling of a term is unclear, or to increase the number
+of search results that are returned. The amount of fuzziness to allow
+when searching can also be controlled. Fuzziness is applied by appending
+a tilde (`~`) and then a positive integer to a term. The following
+search matches all documents that have a word within 1 edit distance of
+“foo”:
+
+[source, javascript]
+----
+idx.search('foo~1')
+----
+
+An edit distance of 1 allows words to match if either adding, removing,
+changing or transposing a character in the word would lead to a match.
+For example “boo” requires a single edit (replacing “f” with “b”) and
+would match, but “boot” would not as it also requires an additional “t”
+at the end.
+
+=== Term Presence
+
+By default, Lunr combines multiple terms together in a search with a
+logical OR. That is, a search for “foo bar” will match documents that
+contain “foo” or contain “bar” or contain both. This behaviour is
+controllable at the term level, i.e. the presence of each term in
+matching documents can be specified. By default each term is optional in
+a matching document, though a document must have at least one matching
+term. It is possible to specify that a term must be present in matching
+documents, or that it must be absent in matching documents.
+
+To indicate that a term must be present in matching documents the term
+should be prefixed with a plus (`+`) and to indicate that a term must be
+absent the term should be prefixed with a minus (`-`). Without either
+prefix the term’s presence in matching documents is optional.
+
+The below example searches for documents that must contain “foo”, might
+contain “bar” and must not contain “baz”:
+
+[source, javascript]
+----
+idx.search("+foo bar -baz")
+----
+
+To simulate a logical AND search of “foo AND bar” mark both terms as
+required:
+
+[source, javascript]
+----
+idx.search("+foo +bar")
+----

data/lib/starter_web/pages/public/learn/roundtrip/610_fam.adoc

@@ -0,0 +1,294 @@
+---
+title:                                  Floating Action Menu
+tagline:                                using fam buttons
+date:                                   2020-11-08 12:00:00
+description: >
+                                        A floating action button (FAB) represents the primary action/s
+                                        of a page. Multiple actions can be configured as a FAM, the
+                                        floating action menu. See FAM buttons and menus in action
+
+tags:                                   [ Roundtrip, Introduction, FAM ]
+categories:                             [ Module ]
+
+toc:                                    true
+advertising:                            false
+scrollbar:                              false
+
+image:                                  /assets/images/modules/attics/cookies-1920x1200-bw.jpg
+permalink:                              /pages/public/learn/roundtrip/fam/
+regenerate:                             true
+
+resources:                              [ lightbox, rouge, clipboard, fam ]
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/modules/attics/cookies-1920x1200-bw.jpg
+          alt:                          jekyll.1200x600-bw.jpg
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set page (local) attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+// :debug:
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="none" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// See: https://material.io/components/buttons-floating-action-button
+
+A floating action button (FAB) represents the primary action/s
+of a page. Multiple actions can be configured as a FAM, the
+floating action menu. See FAM buttons and menus in action
+
+== Floating Action Menu (FAM)
+
+If you want a fixed floating action button, you can add multiple actions
+that will appear on hover. Our demo is in the bottom righthand corner of
+the page.
+
+[source, html]
+----
+<div class="fam-btn">
+  <a class="btn-fab-floating btn-large red">
+    <i class="large material-icons">mode_edit</i>
+  </a>
+  <ul>
+    <li><a class="btn-fab-floating red"><i class="material-icons">insert_chart</i></a></li>
+    <li><a class="btn-fab-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
+    <li><a class="btn-fab-floating green"><i class="material-icons">publish</i></a></li>
+    <li><a class="btn-fab-floating blue"><i class="material-icons">attach_file</i></a></li>
+  </ul>
+</div>
+----
+
+== Initialization
+
+[source, javascript]
+----
+  document.addEventListener('DOMContentLoaded', function() {
+    var elems = document.querySelectorAll('.fam-btn');
+    var instances = j1.fam.init(elems, options);
+  });
+----
+
+or using *jQuery*
+
+[source, javascript]
+----
+  $(document).ready(function(){
+    $('.fam-btn').j1.fam();
+  });
+----
+
+=== Options
+
+[cols=",,,", options="header", ]
+|===============================================================================
+|Name |Type |Default |Description
+
+|`direction`
+|String
+|`top`
+|Direction FAM menu opens. Can be `top`, `right`, `buttom`, or `left`
+
+|`hoverEnabled`
+|Boolean
+|`true`
+|If `true`, FAM menu will open on hover instead of click
+
+|`toolbarEnabled`
+|Boolean
+|`false`
+|Enable transit the FAM into a toolbar on click
+
+|===============================================================================
+
+== Methods
+
+Because jQuery is no longer a dependency, all the methods are called on
+the plugin instance. You can get the plugin instance like this:
+
+[source, javascript]
+----
+  var instance = j1.fam.getInstance(elem);
+----
+
+or using *jQuery*
+
+[source, javascript]
+----
+  $('.fam-btn').fam('methodName');
+  $('.fam-btn').fam('methodName', paramName);
+----
+
+WARNING: You can still use the old jQuery plugin method calls.
+But you won't be able to access instance properties.
+
+=== `open()`
+
+Opens a FAM.
+
+[source, javascript]
+----
+  instance.open();
+----
+
+=== `close()`
+
+Closes a FAM.
+
+[source, javascript]
+----
+  instance.close();
+----
+
+=== `destroy()`
+
+Destroy plugin instance and teardown
+
+[source, javascript]
+----
+  instance.destroy();
+----
+
+=== Properties
+
+[cols=",,", options="header", ]
+|===============================================================================
+|Name |Type |Description
+
+|`el`
+|Element
+|The DOM element the plugin was initialized with.
+
+|`options`
+|Object
+|The options the instance was initialized with.
+
+|`isOpen`
+|Boolean
+|Describes open/close state of the FAM.
+
+|===============================================================================
+
+== Horizontal FAM
+
+Creating a horizontal FAM is easy! Just set the direction option.
+
+[source, javascript]
+----
+  document.addEventListener('DOMContentLoaded', function() {
+    var elems = document.querySelectorAll('.fam-btn');
+    var instances = j1.fam.init(elems, {
+      direction: 'left'
+    });
+  });
+----
+
+== Click-only FAM
+
+If you want to disable the hover behaviour, and instead toggle the FAM
+menu when the user clicks on the large button (works great on mobile!),
+just add the `click-to-toggle` class to the FAM.
+
+[source, javascript]
+----
+  document.addEventListener('DOMContentLoaded', function() {
+    var elems = document.querySelectorAll('.fam-btn');
+    var instances = j1.fam.init(elems, {
+      direction: 'left',
+      hoverEnabled: false
+    });
+  });
+----
+
+/////
+== FAM to Toolbar
+
+Instead of displaying individual button options, you can transition your
+FAM into a toolbar on click. Just add the `toolbar` class to the FAM.
+
+[source, javascript]
+----
+  document.addEventListener('DOMContentLoaded', function() {
+    var elems = document.querySelectorAll('.fam-btn');
+    var instances = j1.fam.init(elems, {
+      toolbarEnabled: true
+    });
+  });
+----
+
+Or using jQuery
+
+[source, javascript]
+----
+  $('.fam-btn').fam({
+    toolbarEnabled: true
+  });
+----
+/////
+
+/////
+++++
+<div class="fam-btn">
+  <a id="page_ctrl_button" class="btn-fab-floating btn-large btn-md-red raised-z5"><i class="mdi mdi-chevron-down"></i></a>
+  <ul id="page_ctrl_items">
+    <li><a id="fam_reload_page" class="btn-fab-floating btn-md-red raised-z5"><i class="mdi mdi-reload"></i></a></li>
+    <li><a id="open_mmenu_toc" class="btn-fab-floating btn-md-blue raised-z5"><i class="mdi mdi-wrap"></i></a></li>
+    <li><a id="fam_scroll_to_top" class="btn-fab-floating btn-md-green raised-z5"><i class="mdi mdi-step-backward-2 mdi-rotate-90"></i></a></li>
+    <li><a id="fam_next_section" class="btn-fab-floating btn-md-green raised-z5"><i class="mdi mdi-step-forward mdi-rotate-90"></i></a></li>
+    <li><a id="fam_previous_section" class="btn-fab-floating btn-md-green raised-z5"><i class="mdi mdi-step-backward mdi-rotate-90"></i></a></li>
+    <!--
+    <li><a id="ssm_scroll_to_bottom" class="btn-fab-floating btn-md-green raised-z5"><i class="mdi mdi-step-forward-2 mdi-rotate-90"></i></a></li>
+    -->
+  </ul>
+</div>
+++++
+
+
+++++
+<script>
+  $(document).ready(function() {
+    var FloatingActionOptions = { direction: 'top',
+                                  hoverEnabled: true,
+                                  toolbarEnabled: false };
+
+    var elems         = document.querySelectorAll('.fam-btn');
+    var instances     = j1.fam.init(elems, FloatingActionOptions);
+//  var $instances    = $('.fam-btn').j1.fam(FloatingActionOptions);
+    var $ActionButton = $('#page_ctrl_button');
+
+    if (FloatingActionOptions.hoverEnabled) {
+      $ActionButton.hover(
+        function() {
+          $('.mdi').toggleClass('mdi-chevron-down mdi-chevron-up');
+        }, function() {
+          $('.mdi').toggleClass('mdi-chevron-down mdi-chevron-up');
+        }
+      );
+    } else {
+      $ActionButton.on('click', function (e) {
+        $('.mdi').toggleClass('mdi-chevron-down mdi-chevron-up');
+      });
+    }
+
+  });
+</script>
+++++
+/////