j1-template 2020.0.22 → 2020.0.24

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

@@ -0,0 +1,237 @@
+---
+title:                                  Lunr
+tagline:                                full index search
+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:                                   [ Page, Roundtrip ]
+index:                                  [ Template, Roundtrip, Images ]
+categories:                             [ pages ]
+
+toc:                                    true
+scrollbar:                              false
+date:                                   2020-11-08 12:00:00
+
+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,302 @@
+---
+title:                                  Floating Action Menu
+tagline:                                using fam buttons
+description:                            using fam buttons
+
+tags:                                   [ Module, FAM ]
+index:                                  [ floating, button, menu, usage ]
+categories:                             [ pages ]
+
+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/learn/roundtrip/fam/
+regenerate:                             true
+
+resources:                              [ lightbox, rouge, clipboard, fam ]
+resource_options:
+  - toccer:
+      collapseDepth:                    3
+  - 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
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+ifdef::debug[]
+.Bratze
+[cols=",", options="header", ]
+|===============================================================================
+|Bratze |Bru
+
+|Fick
+|dich
+
+|===============================================================================
+endif::[]
+
+== 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>
+++++
+/////