j1-template 2020.0.22 → 2020.0.24

data/lib/starter_web/pages/public/previewer/mdi_icons_preview.adoc

@@ -9,10 +9,11 @@ categories:                             [ pages, manuals ]
 
 permalink:                              /pages/public/previewer/mdi_font/
 regenerate:                             false
+date:                                   2020-11-08 12:00:00
 
 scrollbar:                              false
 
-resources:                              [ clipboard, rouge, mdi_previewer ]
+resources:                              [ clipboard, rouge, mdi_previewer, fam ]
 resource_options:
   - attic:
       padding_top:                      400

data/lib/starter_web/pages/public/previewer/rouge.adoc

@@ -1,6 +1,6 @@
 ---
 title:                                  Rouge
-tagline:                                themes previewer
+tagline:                                preview rouge themes
 description:                            Previewer page for J1 module rouge
 
 tags:                                   [ App, Previewer ]
@@ -10,8 +10,9 @@ categories:                             [ pages ]
 permalink:                              /pages/public/previewer/rouge/
 regenerate:                             false
 toc:                                    true
+date:                                   2020-11-08 12:00:00
 
-resources:                             [ rouge, clipboard ]
+resources:                             [ rouge, clipboard, fam ]
 resource_options:
   - attic:
       padding_top:                      400
@@ -38,6 +39,7 @@ resource_options:
 
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
 == Theme selector
 
 Make a selection of theme below to preview a theme.

data/lib/starter_web/pages/public/previewer/twitter_emoji_preview.adoc

@@ -9,10 +9,11 @@ categories:                             [ pages, Previewer ]
 
 permalink:                              /pages/public/previewer/twitter_emoji/
 regenerate:                             false
+date:                                   2020-11-08 12:00:00
 
 scrollbar:                              false
 
-resources:                              [ twemoji, twemoji_picker ]
+resources:                              [ twemoji, twemoji_picker, fam ]
 resource_options:
   - attic:
       padding_top:                      400

data/lib/starter_web/pages/public/test_pages/breadcrumbs_tester.adoc

@@ -0,0 +1,62 @@
+---
+title:                                  breadcrumbs Tester
+tagline:                                breadcrumbs
+description:                            breadcrumbs
+
+tags:                                   [ Page, Roundtrip ]
+index:                                  [ Template, Roundtrip, Images ]
+categories:                             [ pages ]
+
+toc:                                    true
+scrollbar:                              false
+date:                                   2020-11-08 12:00:00
+
+permalink:                              /pages/public/tester/breadcrumbs/
+regenerate:                             true
+
+resources:                              [ lunr ]
+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 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
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+++++
+{% include breadcrumbs.html %}
+++++
+
+== Deck of posts
+
+Bootstrap `card decks` are *not* responsive by default. Additional breakpoint
+classes for J1 Template introduce support on card decks for responsiveness.
+With the values for `break_on_XX`, the number of cards can be specified to be
+shown on a deck per *row*.

data/lib/starter_web/pages/public/test_pages/deck_of_posts.adoc

@@ -9,6 +9,7 @@ categories:                             [ pages ]
 
 toc:                                    true
 advertising:                            false
+date:                                   2020-11-08 12:00:00
 
 permalink:                              /pages/public/test_pages/deck_of_posts/
 regenerate:                             false
@@ -37,6 +38,8 @@ resource_options:
 
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+
 == Deck of posts
 
 Bootstrap `card decks` are *not* responsive by default. Additional breakpoint

data/lib/starter_web/pages/public/test_pages/floating_actions_button.adoc

@@ -0,0 +1,523 @@
+---
+title:                                  Floating Button
+tagline:                                check floating actions
+description:                            check floating actions
+
+tags:                                   [ Page, Tester ]
+index:                                  [ floating, buttons ]
+categories:                             [ pages ]
+
+fam:                                    false
+toc:                                    true
+advertising:                            false
+scrollbar:                              false
+date:                                   2020-11-08 12:00:00
+
+image:                                  /assets/images/modules/attics/cookies-1920x1200-bw.jpg
+
+permalink:                              /pages/public/test_pages/floating_buttons/
+regenerate:                             true
+
+resources:                              [ lightbox ]
+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>
+
+//  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
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+== Floating action buttons
+
+.Release Loeb Classical Library, Harvard University Press, edition, 1931
+The title *About the Ends of Goods and Evils* requires explanation. It was
+Aristotle who put the ethical problem in the form of the question, What is the
+T𝜆o or End, the supreme end of man’s endeavour, in the attainment of which his
+Good or Well-being lies?
+
+For Aristotle, Telos connoted not only *aim*, but *completion*; and he found
+the answer to his question in the complete development and right exercise of
+the faculties of man’s nature, and particularly of the distinctively human
+faculty of Reason. The life of the Intellect was the Best, the Chief Good; and
+lesser Goods were Means to the attainment of this End.
+
+Thus was introduced the notion of an ascending scale of Goods, and this affected
+the interpretation of the term Telos. Telos came to be understood as denoting
+not so much the end or aim of endeavour as the end or extreme point of a series,
+the topmost good. To this was naturally opposed an extreme of minus value,
+the topmost, or rather bottommost, evil.
+
+Hence arose the expressions 𝜏𝜆o 𝛾𝛼𝜃𝜈, 𝜏𝜆o 𝜅𝛼𝜅𝜈, *End of Goods, of Evils*, which
+occur in Philodemus, Rhetoric I, 218.8 ff. (Südhans), and are translated by
+Cicero finis bonorum et malorum.
+
+As a title for his book he throws this phrase into the plural, meaning
+*different views as to the Chief Good and Evil*. Hence in title and to some
+extent in method, the de Finibus may be compared with such modern works a
+Martineau’s Types of Ethical Theory and Sidgwick’s Methods of Ethics.
+
+[quote, Cicero · Paragraph 1.10.32, Translation by H. Rackham · Issue 1914 - De Finibus]
+____
+But I must explain to you how all this mistaken idea of denouncing
+pleasure and praising pain was born and I will give you a complete
+account of the system, and expound the actual teachings of the great
+explorer of the truth, the master-builder of human happiness.
+
+No one rejects, dislikes, or avoids pleasure itself, because it is
+pleasure, but because those who do not know how to pursue pleasure
+rationally encounter consequences that are extremely painful. Nor
+again is there anyone who loves or pursues or desires to obtain pain
+of itself, because it is pain, but because occasionally circumstances
+occur in which toil and pain can procure him some great pleasure.
+
+To take a trivial example, which of us ever undertakes laborious
+physical exercise, except to obtain some advantage from it? But who
+has any right to find fault with a man who chooses to enjoy a pleasure
+that has no annoying consequences, or one who avoids a pain that
+produces no resultant pleasure?
+____
+
+This he sets out to prove as follows: every animal, as soon as it is born,
+seeks for pleasure, and delights in it as the Chief Good, while it recoils
+from pain as the Chief Evil, and so far as possible avoids it. This it does
+as long as it remains unperverted, at the prompting of Nature’s own unbiased
+and honest verdict.
+
+Hence Epicurus refuses to admit any necessity for argument or discussion to
+prove that pleasure is desirable and pain to be avoided. These facts, he
+thinks, are perceived by the senses, as that fire is hot, snow white, honey
+sweet, none of which things need be proved by elaborate argument: it is enough
+merely to draw attention to them.
+
+For there is a difference, he holds, between formal syllogistic proof of a
+thing and a mere notice or reminder: the former is the method for discovering
+abstruse and recondite truths, the latter for indicating facts that are obvious
+and evident.
+
+Strip mankind of sensation, and nothing remains; it follows that Nature herself
+is the judge of that which is in accordance with or contrary to nature. What
+does Nature perceive or what does she judge of, beside pleasure and pain, to
+guide her actions of desire and of avoidance?
+
+++++
+
+<div class="doc-example">
+  <button type="button" class="btn bmd-btn-fab btn-primary">
+    <i class="mdi mdi-plus mdi-2x"></i>
+</div>
+
+
+<div class="fixed-action-btn direction-top">
+  <a id="fam_button" class="btn-floating btn-large btn-md-red raised-z5"><i class="mdi mdi-chevron-down"></i></a>
+  <ul id="ssm_menu">
+    <li><a id="ssm_reload_page" class="btn-floating btn-md-red raised-z5"><i class="mdi mdi-reload"></i></a></li>
+    <li><a id="ssm_toc" class="btn-floating btn-md-blue raised-z5"><i class="mdi mdi-wrap"></i></a></li>
+    <li><a id="ssm_scroll_to_top" class="btn-floating btn-md-green raised-z5"><i class="mdi mdi-step-backward-2 mdi-rotate-90"></i></a></li>
+    <li><a id="ssm_previous_section" class="btn-floating btn-md-green raised-z5"><i class="mdi mdi-step-backward mdi-rotate-90"></i></a></li>
+    <li><a id="ssm_next_section" class="btn-floating btn-md-green raised-z5"><i class="mdi  mdi-step-forward mdi-rotate-90"></i></a></li>
+    <li><a id="ssm_scroll_to_bottom" class="btn-floating btn-md-green raised-z5"><i class="mdi mdi-step-forward-2 mdi-rotate-90"></i></a></li>
+  </ul>
+</div>
+++++
+
+++++
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    var FloatingActionOptions = { direction: 'top',
+                                  hoverEnabled: false,
+                                  toolbarEnabled: true };
+
+    var elems         = document.querySelectorAll('.fixed-action-btn');
+    var instances     = j1.FloatingActionButton.init(elems, FloatingActionOptions);
+    var $ActionButton = $('#fam_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>
+++++
+
+++++
+<style>
+
+.fixed-action-btn ul {
+    left: 0;
+    right: 0;
+    text-align: center;
+    position: absolute;
+    bottom: 64px;
+    margin: 0;
+    visibility: hidden;
+    padding-left: 0;
+    list-style-type: none;
+}
+
+.btn,.btn-large,.btn-small,.btn-flat {
+    border: none;
+    border-radius: 2px;
+    display: inline-block;
+    height: 36px;
+    line-height: 36px;
+    padding: 0 16px;
+    text-transform: uppercase;
+    vertical-align: middle;
+    -webkit-tap-highlight-color: transparent
+}
+
+.btn.disabled,.disabled.btn-large,.disabled.btn-small,.btn-floating.disabled,.btn-large.disabled,.btn-small.disabled,.btn-flat.disabled,.btn:disabled,.btn-large:disabled,.btn-small:disabled,.btn-floating:disabled,.btn-large:disabled,.btn-small:disabled,.btn-flat:disabled,.btn[disabled],[disabled].btn-large,[disabled].btn-small,.btn-floating[disabled],.btn-large[disabled],.btn-small[disabled],.btn-flat[disabled] {
+    pointer-events: none;
+    background-color: #DFDFDF !important;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    color: #9F9F9F !important;
+    cursor: default
+}
+
+.btn.disabled:hover,.disabled.btn-large:hover,.disabled.btn-small:hover,.btn-floating.disabled:hover,.btn-large.disabled:hover,.btn-small.disabled:hover,.btn-flat.disabled:hover,.btn:disabled:hover,.btn-large:disabled:hover,.btn-small:disabled:hover,.btn-floating:disabled:hover,.btn-large:disabled:hover,.btn-small:disabled:hover,.btn-flat:disabled:hover,.btn[disabled]:hover,[disabled].btn-large:hover,[disabled].btn-small:hover,.btn-floating[disabled]:hover,.btn-large[disabled]:hover,.btn-small[disabled]:hover,.btn-flat[disabled]:hover {
+    background-color: #DFDFDF !important;
+    color: #9F9F9F !important
+}
+
+.btn,.btn-large,.btn-small,.btn-floating,.btn-large,.btn-small,.btn-flat {
+    font-size: 14px;
+    outline: 0
+}
+
+.btn i,.btn-large i,.btn-small i,.btn-floating i,.btn-large i,.btn-small i,.btn-flat i {
+    font-size: 1.3rem;
+    line-height: inherit
+}
+
+.btn:focus,.btn-large:focus,.btn-small:focus,.btn-floating:focus {
+    background-color: #1d7d74
+}
+
+.btn,.btn-large,.btn-small {
+    text-decoration: none;
+    color: #fff;
+    background-color: #26a69a;
+    text-align: center;
+    letter-spacing: .5px;
+    -webkit-transition: background-color .2s ease-out;
+    transition: background-color .2s ease-out;
+    cursor: pointer
+}
+
+.btn:hover,.btn-large:hover,.btn-small:hover {
+    background-color: #2bbbad
+}
+
+.btn-floating {
+    display: inline-block;
+    color: #fff;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    padding: 0;
+    background-color: #26a69a;
+    border-radius: 50%;
+    -webkit-transition: background-color .3s;
+    transition: background-color .3s;
+    cursor: pointer;
+    vertical-align: middle
+}
+
+.btn-floating:hover {
+    background-color: #26a69a
+}
+
+.btn-floating:before {
+    border-radius: 0
+}
+
+.btn-floating.btn-large {
+    width: 56px;
+    height: 56px;
+    padding: 0
+}
+
+.btn-floating.btn-large.halfway-fab {
+    bottom: -28px
+}
+
+.btn-floating.btn-large i {
+    line-height: 56px
+}
+
+.btn-floating.btn-small {
+    width: 32.4px;
+    height: 32.4px
+}
+
+.btn-floating.btn-small.halfway-fab {
+    bottom: -16.2px
+}
+
+.btn-floating.btn-small i {
+    line-height: 32.4px
+}
+
+.btn-floating.halfway-fab {
+    position: absolute;
+    right: 24px;
+    bottom: -20px
+}
+
+.btn-floating.halfway-fab.left {
+    right: auto;
+    left: 24px
+}
+
+.btn-floating i {
+    width: inherit;
+    display: inline-block;
+    text-align: center;
+    color: #fff;
+    font-size: 1.6rem;
+    line-height: 40px
+}
+
+button.btn-floating {
+    border: none
+}
+
+.fixed-action-btn {
+    position: fixed;
+    right: .5rem;
+    bottom: 1rem;
+    padding-top: 1rem;
+    margin-bottom: 0;
+    z-index: 997
+}
+
+.fixed-action-btn.active ul {
+    visibility: visible
+}
+
+.fixed-action-btn.direction-left,.fixed-action-btn.direction-right {
+    padding: 0 0 0 15px
+}
+
+.fixed-action-btn.direction-left ul,.fixed-action-btn.direction-right ul {
+    text-align: right;
+    right: 64px;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+    height: 100%;
+    left: auto;
+    width: 500px
+}
+
+.fixed-action-btn.direction-left ul li,.fixed-action-btn.direction-right ul li {
+    display: inline-block;
+    margin: 7.5px 15px 0 0
+}
+
+.fixed-action-btn.direction-right {
+    padding: 0 15px 0 0
+}
+
+.fixed-action-btn.direction-right ul {
+    text-align: left;
+    direction: rtl;
+    left: 64px;
+    right: auto
+}
+
+.fixed-action-btn.direction-right ul li {
+    margin: 7.5px 0 0 15px
+}
+
+.fixed-action-btn.direction-bottom {
+    padding: 0 0 15px 0
+}
+
+.fixed-action-btn.direction-bottom ul {
+    top: 64px;
+    bottom: auto;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: reverse;
+    -webkit-flex-direction: column-reverse;
+    -ms-flex-direction: column-reverse;
+    flex-direction: column-reverse
+}
+
+.fixed-action-btn.direction-bottom ul li {
+    margin: 15px 0 0 0
+}
+
+.fixed-action-btn.toolbar {
+    padding: 0;
+    height: 56px
+}
+
+.fixed-action-btn.toolbar.active>a i {
+    opacity: 0
+}
+
+.fixed-action-btn.toolbar ul {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    top: 0;
+    bottom: 0;
+    z-index: 1
+}
+
+.fixed-action-btn.toolbar ul li {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    display: inline-block;
+    margin: 0;
+    height: 100%;
+    -webkit-transition: none;
+    transition: none
+}
+
+.fixed-action-btn.toolbar ul li a {
+    display: block;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    color: #fff;
+    line-height: 56px;
+    z-index: 1
+}
+
+.fixed-action-btn.toolbar ul li a i {
+    line-height: inherit
+}
+
+.fixed-action-btn ul {
+    left: 0;
+    right: 0;
+    text-align: center;
+    position: absolute;
+    bottom: 64px;
+    margin: 0;
+    visibility: hidden
+}
+
+.fixed-action-btn ul li {
+    margin-bottom: 15px
+}
+
+.fixed-action-btn ul a.btn-floating {
+    opacity: 0
+}
+
+.fixed-action-btn .fab-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 40px;
+    height: 40px;
+    background-color: #26a69a;
+    border-radius: 50%;
+    -webkit-transform: scale(0);
+    transform: scale(0)
+}
+
+.btn-flat {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    background-color: transparent;
+    color: #343434;
+    cursor: pointer;
+    -webkit-transition: background-color .2s;
+    transition: background-color .2s
+}
+
+.btn-flat:focus,.btn-flat:hover {
+    -webkit-box-shadow: none;
+    box-shadow: none
+}
+
+.btn-flat:focus {
+    background-color: rgba(0,0,0,0.1)
+}
+
+.btn-flat.disabled,.btn-flat.btn-flat[disabled] {
+    background-color: transparent !important;
+    color: #b3b2b2 !important;
+    cursor: default
+}
+
+.btn-large {
+    height: 54px;
+    line-height: 54px;
+    font-size: 15px;
+    padding: 0 28px
+}
+
+.btn-large i {
+    font-size: 1.6rem
+}
+
+.btn-small {
+    height: 32.4px;
+    line-height: 32.4px;
+    font-size: 13px
+}
+
+.btn-small i {
+    font-size: 1.2rem
+}
+
+.btn-block {
+    display: block
+}
+
+</style>
+++++