j1-template 2020.0.21 → 2021.0.1

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>
+++++
+/////

data/lib/starter_web/pages/public/learn/roundtrip/{includes → _includes}/attributes.asciidoc

@@ -80,6 +80,12 @@ tag::data[]
 
 end::data[]
 
+
+// Images - Images from local include/images folder
+// -----------------------------------------------------------------------------
+tag::images[]
+end::images[]
+
 // PRODUCTS, local product information (e.g. release)
 // -----------------------------------------------------------------------------
 tag::products[]

data/lib/starter_web/pages/public/learn/roundtrip/{includes → _includes}/documents/100_gistblock.asciidoc

@@ -7,7 +7,7 @@ block macro `gist::` to do so.
 
 The following gist snippet is taken from {asciidoc-extensions-gist-example}[this example, window="_blank"]:
 
-//[source, adoc]
+[source, prometheus, role="noclip"]
 ----
 .Gist title
 gist::git_address[] <1>
@@ -15,6 +15,7 @@ gist::git_address[] <1>
 <1> For `git_address`, {github-gist-home}[, window="_blank"] is prepended automatically
 
 .Example of a gist block
+[source, prometheus, role="noclip"]
 ----
 .Guard setup to live preview AsciiDoc output
 gist::mojavelinux/5546622[]

data/lib/starter_web/pages/public/learn/roundtrip/{includes → _includes}/documents/410_table_3_column.asciidoc

@@ -1,6 +1,6 @@
 
 .Selected extended BS modal examples
-[cols="6a,3a,3a", options="header", width="100%", role="table-responsive-stacked-lg"]
+[cols="6a,3a,3a", options="header", width="100%", role="rtable"]
 |===============================================================================
 |Postion |Class | Example
 

data/lib/starter_web/pages/public/learn/{whats_up.adoc → where_to_go.adoc}

@@ -1,26 +1,28 @@
 ---
-title:                                  Whats up
-tagline:                                where to go
-description:                            Where to go
+title:                                  Where to go
+tagline:                                fasten your way
+date:                                   2020-11-03 12:00:00
+description: >
+                                        Where to go, Too Long; Didn't Read to fasten
+                                        your way through the preview pages of J1 Template.
 
-tags:                                   [ Page, Roundtrip ]
-index:                                  [ Start, Template, Whats, Up, Readme, TL;DR ]
-categories:                             [ pages ]
+tags:                                   [ Roundtrip, Introduction ]
+categories:                             [ Info ]
 
-permalink:                              /pages/public/learn/whats_up/
+comments:                               false
+fam_menu_id:                            open_toc
+
+permalink:                              /pages/public/learn/where_to_go/
 regenerate:                             false
-toc:                                    true
 
 resources:                              []
 resource_options:
-  - ssm:
-      mode:                             menu
   - attic:
       padding_top:                      400
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/runner-1920x1200-bw.jpg
+        - url:                          /assets/images/modules/attics/tldr-1920x800.jpg
           alt:                          Photo by Alexander Redl on Unsplash
           badge:
             type:                       unsplash
@@ -33,23 +35,27 @@ resource_options:
 // 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 (all)
+// Load page attributes
 // -----------------------------------------------------------------------------
-{% include {{load_attributes}} %}
+{% include {{load_attributes}} scope="none" %}
 
-// Page content
-// =============================================================================
 
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 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.
+a good decision you get on that page first. For sure, there is no better
+place to go.
 
-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
+Having a menu system is great. We hope the Navigator module of J1 will
+support you to explore this site, find what you 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.
 
@@ -59,16 +65,14 @@ use the English language for our international vistors (we are German),
 right (LTR), and from top to down a page. The same to all menus, sections
 and pages.
 
-To read the site it is recommended to go for LTR. Other languages, other
+To read the webpages, it is recommended to go for LTR. Other languages, other
 countries and cultures go for RTL, but currently we've *no* support for RTL
 implemented.
 
-For that reason, it was a good decision to start from here.
-
 == Whats up
 
-First of all, you've started already! The important first step in to find
-your way to Jekyll is done. Congratiulations.
+First of all, you've started already! The crucial first step in to find
+your way to Jekyll is done. Congratulations.
 
 The *Learn* section contains all you need to learn what Jekyll and J1 can do
 for your website. For your new static web - if you like.
@@ -88,10 +92,10 @@ You should go for the *Roundtrip* first. See what you will get. As an overview
 of some of the main features of *J1*. The roundtrip is a *visual* tour. No
 technical stuff, nothing academic.
 
-Let's go more deeper and make things real - and your hands dirty. We
-recomment to work on the Kickstarter *Web in a Day*. A nice one-day journey
-diving into the world of Jekyll. You'll learn a lot and at the end of that day
-you know what Jekyll, static webs and the template system J1 is all about.
+Let's go more in-depth and make things real - and your hands dirty. You dive
+into the world of Jekyll. You'll have learned a lot at the end of that
+day about what Jekyll is, static webs and the template system J1 is all
+about.
 
 You're welcome!