j1_template_mde 2018.4.10

data/lib/starter_web/assets/data/authclient.html

@@ -0,0 +1,371 @@
+---
+regenerate:                             true 
+---
+{% capture cache %}
+
+{% comment %}
+ # -----------------------------------------------------------------------------
+ #  ~/assets/data/authclient.html
+ #  Liquid PROCEDURE to generate the HTML (data) portion of all modals used
+ #  by J1AuthClient
+ #
+ #  Product/Info:
+ #  https://jekyll-one.com
+ #
+ #  Copyright (C) 2019 Juergen Adams
+ #
+ #  J1 Template is licensed under the MIT License.
+ #  See: https://github.com/jekyll-one/j1_template_mde/blob/master/LICENSE
+ #
+ # -----------------------------------------------------------------------------
+ #  Test data:
+ #   liquid_var: {{ liquid_var | debug }}
+ #   authclient_options: {{ authclient_options | debug }}
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Liquid procedures
+-------------------------------------------------------------------------------- {% endcomment %}
+{% capture select_color     %}themes/{{site.template.name}}/procedures/global/select_color.proc{% endcapture %}
+{% capture select_icon_size %}themes/{{site.template.name}}/procedures/global/select_icon_size.proc{% endcapture %}
+
+{% comment %} Set config files
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign navigator_config            = site.data.modules.j1_navigator %}
+{% assign nav_defaults                = navigator_config.defaults %}
+
+{% comment %} Set config data
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign nav_authclient_default      = nav_defaults.nav_authclient %}
+{% assign nav_authclient_config       = navigator_config.nav_authclient %}
+
+{% comment %} Set config options
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign authclient_options          = nav_authclient_default | merge: nav_authclient_config %}
+{% assign providers                   = site.j1_auth.provider.activated %}
+{% assign active_provider             = site.j1_auth.provider.activated[0] %}
+
+
+{% comment %} Liquid var initialization
+-------------------------------------------------------------------------------- {% endcomment %}
+
+{% comment %} Set auth_client properties
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign icon_family                 = authclient_options.icon_family | downcase %}
+{% assign signin_icon                 = authclient_options.signin_icon %}
+{% assign signout_icon                = authclient_options.signout_icon %}
+
+{% assign signin_modal_title          = authclient_options.auth_signin_modal.title %}
+{% assign signin_modal_body_text      = authclient_options.auth_signin_modal.body_text %}
+{% assign signout_modal_title         = authclient_options.auth_signout_modal.title %}
+{% assign signout_modal_body_text     = authclient_options.auth_signout_modal.body_text %}
+
+{% if providers contains 'disqus' %}
+  {% assign auth_disqus_enabled       = true %}
+  {% assign auth_disqus_id            = authclient_options.auth_disqus.id %}
+  {% assign auth_disqus_title         = authclient_options.auth_disqus.title | downcase %}
+  {% assign auth_disqus_text          = authclient_options.auth_disqus.text %}
+{% else %}
+  {% assign auth_disqus_enabled       = false %}
+{% endif %}
+
+{% if providers contains 'github' %}
+  {% assign auth_github_enabled       = true %}
+  {% assign auth_github_id            = authclient_options.auth_github.id %}
+  {% assign auth_github_title         = authclient_options.auth_github.title | downcase %}
+  {% assign auth_github_text          = authclient_options.auth_github.text %}
+{% else %}
+  {% assign auth_github_enabled       = false %}
+{% endif %}
+
+{% if providers contains 'facebook' %}
+  {% assign auth_facebook_enabled     = true %}
+  {% assign auth_facebook_id          = authclient_options.auth_facebook.id %}
+  {% assign auth_facebook_title       = authclient_options.auth_facebook.title | downcase %}
+  {% assign auth_facebook_text        = authclient_options.auth_facebook.text %}
+{% else %}
+  {% assign auth_facebook_enabled     = false %}
+{% endif %}
+
+{% if providers contains 'twitter' %}
+  {% assign auth_twitter_enabled      = true %}
+  {% assign auth_twitter_id           = authclient_options.auth_twitter.id %}
+  {% assign auth_twitter_title        = authclient_options.auth_twitter.title | downcase %}
+  {% assign auth_twitter_text         = authclient_options.auth_twitter.text %}
+{% else %}
+  {% assign auth_twitter_enabled      = false %}
+{% endif %}
+
+{% if providers contains 'patreon' %} 
+  {% assign auth_patreon_enabled      = true %}
+  {% assign auth_patreon_id           = authclient_options.auth_patreon.id %}
+  {% assign auth_patreon_title        = authclient_options.auth_patreon.title | downcase %}
+  {% assign auth_patreon_text         = authclient_options.auth_patreon.text %}
+{% else %}
+  {% assign auth_patreon_enabled      = false %}
+{% endif %}
+
+{% if authclient_options.icon_family == 'FontAwesome' or authclient_options.icon_family == 'FontAwesome4' or authclient_options.icon_family == 'FontAwesome5' %}
+  {% assign icon_family = 'fa' %}
+{% elsif authclient_options.icon_family == 'MDI' or authclient_options.icon_family == 'Material Design Icons'%}
+  {% assign icon_family = 'mdi' %}
+{% else %}
+  {% assign icon_family = 'mdi' %}
+{% endif %}
+
+{% include {{select_color}} color=authclient_options.icon_color fallback="#9E9E9E" %}
+{% capture icon_color %}style="color:{{color}}"{% endcapture %}
+
+{% include {{select_icon_size}} family=authclient_options.icon_family size=authclient_options.icon_size %}
+{% assign icon_size = size %}
+
+{% comment %} Main
+-------------------------------------------------------------------------------- {% endcomment %}
+{% if authclient_options.enabled %}
+
+  {% comment %} Modal SignIn
+  ------------------------------------------------------------------------------ {% endcomment %}
+  <!-- [INFO   ] [j1.authclient.html                  ] [START: Modal signin|signup] -->
+  <div class="modal fade" id="modalOmniSignIn" tabindex="-1" role="dialog" aria-labelledby="modalOmniSignIn" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-notify modal-info" role="document">
+      
+      <!-- Content -->
+      <div class="modal-content">
+
+        <!--Header-->
+        <div class="modal-header">
+          <p class="lead">{{signin_modal_title}}</p>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-light mdi-48px"></i>
+          </button>
+        </div>
+
+        <!-- Body -->
+        <div class="modal-body mr-5 ml-5 mb-0">
+          <div class="text-center">
+            <i class="mdi mdi-4x mdi-login mdi-rotateIn mb-1"></i>
+          </div>
+          <p style="text-align: justify;">{{signin_modal_body_text}}</p>
+          <h5 class="mt-1 mb-3 notoc">Available options</h5>
+
+          <!-- Modal nav pills -->
+          <div class="row ml-2 mr-2">
+            <ul class="nav nav-pills nav-pills-icons mt-2" role="tablist">
+
+            {% comment %} Array used to order the (provider) tabs
+            -------------------------------------------------------------------- {% endcomment %}
+            {% for provider in providers %}
+
+              {% if provider == active_provider %}
+                {% assign active_flag = " active" %}
+              {% else %}
+                {% assign active_flag = "" %}
+              {% endif %}
+
+              {% if provider == 'disqus' and auth_disqus_enabled %}
+              <li class="nav-item">
+                <a class="nav-link{{active_flag}}" href="#h-tabs-{{ auth_disqus_id }}" role="tab" data-toggle="tab" aria-expanded="false" aria-selected="false">
+                  <i class="mdi mdi-disqus mt-1 mb-2"></i> {{ auth_disqus_title }}
+                </a>
+              </li>
+              {% endif %}
+
+              {% if provider == 'github' and auth_github_enabled %}
+              <li class="nav-item">
+                <a class="nav-link{{active_flag}}" href="#h-tabs-{{ auth_github_id }}" role="tab" data-toggle="tab" aria-expanded="false" aria-selected="true">
+                  <i class="mdi mdi-github-circle mt-1 mb-2"></i> {{ auth_github_title }}
+                </a>
+              </li>
+              {% endif %}
+
+              {% if provider == 'facebook' and auth_facebook_enabled %}
+              <li class="nav-item">
+                <a class="nav-link{{active_flag}}" href="#h-tabs-{{ auth_facebook_id }}" role="tab" data-toggle="tab" aria-expanded="false" aria-selected="false">
+                  <i class="mdi mdi-facebook mt-1 mb-2"></i> {{ auth_facebook_title }}
+                </a>
+              </li>
+              {% endif %}
+
+              {% if provider == 'twitter' and auth_twitter_enabled %}
+              <li class="nav-item">
+                <a class="nav-link{{active_flag}}" href="#h-tabs-{{ auth_twitter_id }}" role="tab" data-toggle="tab" aria-expanded="false" aria-selected="false">
+                  <i class="mdi mdi-twitter mt-1 mb-2"></i> {{ auth_twitter_title }}
+                </a>
+              </li>
+              {% endif %}
+
+              {% if provider == 'patreon' and auth_patreon_enabled %}
+              <li class="nav-item">
+                <a class="nav-link{{active_flag}}" href="#h-tabs-{{ auth_patreon_id }}" role="tab" data-toggle="tab" aria-expanded="true" aria-selected="false">
+                  <i class="mdi">
+                    <svg width="40px" height="40px" viewBox="0 0 569 546" version="1.1"><g><circle fill="#F96854" id="Oval" cx="362.589996" cy="204.589996" r="204.589996"></circle><rect fill="#052D49" id="Rectangle" x="0" y="0" width="100" height="545.799988"></rect></g></svg>
+                  </i> {{ auth_patreon_title }}
+                </a>
+              </li>
+              {% endif %}
+
+            {% endfor %}
+            </ul>
+            
+            <div class="tab-content tab-space">
+            {% for provider in providers %}
+
+              {% if provider == active_provider %}
+                {% assign active_flag = " active" %}
+              {% else %}
+                {% assign active_flag = "" %}
+              {% endif %}
+
+              {% if provider == 'disqus' and auth_disqus_enabled %}
+                <div class="tab-pane{{active_flag}}" id="h-tabs-{{ auth_disqus_id }}">{{ auth_disqus_text }}</div>
+              {% endif %}
+              {% if provider == 'github' and auth_github_enabled %}
+                <div class="tab-pane{{active_flag}}" id="h-tabs-{{ auth_github_id }}">{{ auth_github_text }}</div>
+              {% endif %}
+              {% if provider == 'facebook' and auth_facebook_enabled %}
+                <div class="tab-pane{{active_flag}}" id="h-tabs-{{ auth_facebook_id }}">{{ auth_facebook_text }}</div>
+              {% endif %}
+              {% if provider == 'patreon' and auth_patreon_enabled %}
+                <div class="tab-pane{{active_flag}}" id="h-tabs-{{ auth_patreon_id }}">{{ auth_patreon_text }}</div>
+              {% endif %}
+              {% if provider == 'twitter' and auth_twitter_enabled %}
+                <div class="tab-pane{{active_flag}}" id="h-tabs-{{ auth_twitter_id }}">{{ auth_twitter_text }}</div>
+              {% endif %}
+            {% endfor %}
+            </div>
+
+          </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="modal-footer justify-content-right">
+          <a type="button" id="signInButton" class="btn btn-primary-modal mr-2" data-dismiss="modal">
+            <i class="mdi mdi-18px mdi-light mdi-login"></i>
+            Yes, please
+          </a>
+          <a type="button" id="exitButton" class="btn btn-outline-secondary-modal" data-dismiss="modal">
+            No, thanks
+          </a>
+        </div>
+      </div>
+      <!-- END Content -->
+
+    </div>
+  </div> <!-- Modal SignIn -->
+  <!-- [INFO   ] [j1.authclient.html                  ] [END: Modal signin] -->
+
+  {% comment %} Modal SignOut
+  ------------------------------------------------------------------------------ {% endcomment %}
+  <!-- [INFO   ] [j1.authclient.html                  ] [START: Modal signout] -->
+  <div class="modal fade top" id="modalOmniSignOut" tabindex="-1" role="dialog" aria-labelledby="modalOmniSignOut" aria-hidden="true" data-backdrop="false">
+    <div class="modal-dialog modal-lg modal-notify modal-warning" role="document">
+      <!-- Content -->
+      <div class="modal-content">
+        <!--Header-->
+        <div class="modal-header">
+          <p class="lead">{{signout_modal_title}}</p>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <i class="mdi mdi-close mdi-light mdi-48px"></i>
+          </button>
+        </div>
+        <!-- Body -->
+        <div class="modal-body mr-5 ml-5 mb-0">
+          <div class="text-center">
+            <i class="mdi mdi-4x mdi-logout mdi-rotateIn mb-1"></i>
+          </div>
+
+          <!-- User info placed dynamically -->
+          <div id="user_state_info" class="text-left mb-3">
+            <h4 class="user-info">You are signed in to provider: </h4>
+          </div>
+
+          <p style="text-align: justify;">{{signout_modal_body_text}}</p>
+
+          <h5 class="mt-1 mb-3 notoc">Available options</h5>
+          <form id="authclient-form" class="form-horizontal">
+            <div class="mdc-list-group">
+              <div class="ml-5 mt-0 mr-0 mb-5">
+
+                <div class="switch">
+                  <label>
+                    <input id="providerSignOut" name="providerSignOut" type="checkbox">
+                    <span class="bmd-switch-track"></span>
+                    SignOut completely (Provider)
+                  </label>
+                </div>
+
+              </div>
+            </div>
+          </form>
+
+        </div>
+
+        <!-- Footer -->
+        <div class="modal-footer">
+          <a type="button" id="signOutButton" class="btn btn-primary-modal mr-2" data-dismiss="modal">Yes, please</a>
+          <a type="button" id="exitButton" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+        </div>
+      </div>
+      <!-- END Content -->
+    </div>
+  </div> <!-- Modal SignOut -->
+
+  {% comment %} Modal UserStateInfo
+  ------------------------------------------------------------------------------ {% endcomment %}
+  <!-- [INFO   ] [j1.authclient.html                  ] [START: Modal SIDE INFO signed in] -->
+  <div class="modal fade right" id="sideModalAlreadySigneIn" tabindex="-1" role="dialog" aria-labelledby="sideModalAlreadySigneIn" aria-hidden="true" data-backdrop="false">
+    <div class="modal-dialog modal-side modal-top-right modal-notify modal-success" role="document">
+      <!-- Content -->
+      <div class="modal-content">
+        <!--Header-->
+        <div class="modal-header">
+          <p class="lead">Info</p>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <i class="mdi mdi-close mdi-light mdi-48px"></i>
+          </button>
+        </div>
+        <!-- Body -->
+        <div class="modal-body">
+          <div class="text-center">
+            <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+            <p>You're already signed in
+            </p>
+          </div>
+        </div>
+        <!-- Footer -->
+        <div class="modal-footer justify-content-center">
+          <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">OK</a>
+        </div>
+      </div>
+      <!-- END Content -->
+    </div>
+  </div> <!-- END Modal UserStateInfo -->
+  <!-- [INFO   ] [j1.authclient.html                  ] [END: Modal SIDE INFO signed in] -->
+
+  {% comment %} Modal TOP INFO signed in
+  ----------------------------------------------------------------------------
+  <!-- [INFO   ] [j1.authclient.html                  ] [START: Modal TOP INFO signed in] -->
+  <div class="modal fade top" id="modalTopInfoSignedIn" tabindex="-1" role="dialog" aria-labelledby="modalTopInfoSignedIn" aria-hidden="true" data-backdrop="false">
+    <div class="modal-dialog modal-frame modal-top modal-notify modal-info" role="document">
+      <!-- Content -->
+      <div class="modal-content">
+        <!-- Body -->
+        <div class="modal-body">
+          <div class="row px-4">
+            <p class="pt-1 pr-2">You're already signed in</p>
+            <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal"OK</a>
+          </div>
+        </div>
+      </div>
+      <!-- END Content -->
+    </div>
+  </div>
+  <!-- [INFO   ] [j1.authclient.html                  ] [END: Modal TOP INFO signed in] -->
+  ---------------------------------------------------------------------------- {% endcomment %}
+
+{% endif %}
+
+{% endcapture %}
+
+{{ cache | strip_empty_lines }}
+{% assign cache = nil %}

data/lib/starter_web/assets/data/banner.html

@@ -0,0 +1,350 @@
+---
+regenerate:                             false 
+---
+{% capture cache %}
+
+{% comment %}
+ # -----------------------------------------------------------------------------
+ #  ~/assets/data/banner.html
+ #  Liquid procedure to generate HTML (data) for all BANNER configured for
+ #  (fragmented) AJAX load
+ #
+ #  Product/Info:
+ #  https://jekyll-one.com
+ #
+ #  Copyright (C) 2019 Juergen Adams
+ #
+ #  J1 Template is licensed under the MIT License.
+ #  See: https://github.com/jekyll-one/j1_template_mde/blob/master/LICENSE
+ #
+ # -----------------------------------------------------------------------------
+ #  Test data:
+ #    {{ variable | debug }}
+ #
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Liquid procedures
+--------------------------------------------------------------- {% endcomment %}
+{% capture select_color     %}themes/{{site.template.name}}/procedures/global/select_color.proc{% endcapture %}
+{% capture select_icon_size %}themes/{{site.template.name}}/procedures/global/select_icon_size.proc{% endcapture %}
+{% capture create_bs_button %}themes/{{site.template.name}}/procedures/global/create_bs_button.proc{% endcapture %}
+{% capture news_box %}themes/{{site.template.name}}/modules/footers/boxes/news_box.proc{% endcapture %}
+
+{% comment %} Liquid var initialization
+--------------------------------------------------------------- {% endcomment %}
+{% assign banner_config = site.data.modules.j1_banner.banners %}
+{% capture banner_config_file %}~/_data/modules/j1_banner.yml{% endcapture %}
+
+
+{% comment %} Main
+--------------------------------------------------------------- {% endcomment %}
+{% for items in banner_config %}
+  {% for banners in items %}
+
+    {% for banner in banners %}
+        {% for item in banner %}
+          {% assign key = item[0] %}
+          {% assign value = item[1] %}
+          {% if key == 'id' %}          {% assign id          = value %}            {% endif %}
+          {% if key == 'enabled' %}     {% assign enabled     = value %}            {% endif %}
+          {% if key == 'type' %}        {% assign type        = value %}            {% endif %}
+          {% if key == 'icon_family' %} {% assign icon_family = value | downcase %} {% endif %}
+          {% if key == 'style' %}       {% assign style       = value %}            {% endif %}
+          {% if key == 'raised' %}      {% assign raised      = value %}            {% endif %}
+          {% if key == 'lane_span' %}   {% assign lane_span   = value %}            {% endif %}
+          {% if key == 'buttons' %}     {% assign buttons     = value %}            {% endif %}
+          {% if key == 'boxes' %}       {% assign boxes       = value %}            {% endif %}
+        {% endfor %}
+    {% endfor %}
+
+    {% if raised %}
+      {% capture box_raised %}raised-z{{raised}}{% endcapture %}
+    {% else %}
+      {% assign box_raised = 'raised-z3' %}
+    {% endif %}
+
+    {% if icon_family == 'fontawesome' %}
+      {% assign icon_family = 'fa' %}
+    {% elsif icon_family == 'mdi'%}
+      {% assign icon_family = 'mdi' %}
+    {% elsif icon_family == 'zmdi'%}
+      {% assign icon_family = 'zmdi' %}
+    {% endif %}
+
+    {% include {{select_icon_size}} family=icon_family size=icon_size %}
+    {% assign icon_size = size %}
+
+    {% if lane_span == 'fixed' %}
+      {% assign container_class = 'container' %}
+    {% elsif lane_span == 'fluid' %}
+      {% assign container_class = 'container-fluid' %}
+    {% else %}
+      {% assign container_class = 'container' %}
+    {% endif %}
+
+
+    <!-- BANNER {{id}} -->
+    <!-- +++++++++++++++++++++++++ -->
+
+    {% if enabled %}
+    <div id="{{id}}">
+    {% case type %}
+
+      {% comment %} Collect TEASER banner
+      --------------------------------------------------------- {% endcomment %}
+      {% when 'teaser_banner' %}
+
+      <div class="banner-teaser">
+        <div class="{{container_class}} j1-banner-block">
+
+            {% assign box_items = boxes | size %}
+            {% for box in boxes %}
+
+              {% for items in box %}
+                {% for item in items[1] %}
+                  {% assign key   = item[0] %}
+                  {% assign value = item[1] %}
+                  {% if key == 'enabled' %}     {% assign box_enabled      = value %}                   {% endif %}
+                  {% if key == 'width' %}       {% assign box_width        = value %}                   {% endif %}
+                  {% if key == 'type' %}        {% assign box_type         = value %}                   {% endif %}
+                  {% if key == 'icon' %}        {% assign icon             = value %}                   {% endif %}
+                  {% if key == 'icon_size' %}   {% assign icon_size        = value %}                   {% endif %}
+                  {% if key == 'icon_color' %}  {% assign icon_color       = value %}                   {% endif %}
+                  {% if key == 'image_path' %}  {% assign box_image_path   = value %}                   {% endif %}
+                  {% if key == 'animate' %}     {% assign box_animate      = value %}                   {% endif %}
+                  {% if key == 'title' %}       {% assign box_title        = value | strip_newlines%}   {% endif %}
+                  {% if key == 'description' %} {% assign box_description  = value | strip_newlines%}   {% endif %}
+                  {% if key == 'tagline' %}     {% assign box_tagline      = value | strip_newlines%}   {% endif %}
+                  {% if key == 'text' %}        {% assign box_text         = value | strip_newlines %}  {% endif %}
+                  {% if key == 'buttons' %}     {% assign box_buttons      = value %}                   {% endif %}
+                {% endfor %}
+                {% if box_enabled == false %} {% assign box_items = box_items | minus:1 %} {% endif %}
+              {% endfor %}
+
+              {% if box_icon_color %}
+                {% include {{select_color}} color=box_icon_color fallback="#fff" %}
+                {% assign box_icon_color = color %}
+                {% capture box_icon_color %}style="color:{{box_icon_color}}" %}{% endcapture %}
+              {% else %}
+                {% assign box_icon_color = '' %}
+              {% endif %}
+
+              {% include {{select_icon_size}} family=icon_family size=icon_size %}
+              {% assign icon_size = size %}
+
+              {% if box_width %}
+                {% assign box_enabled = true %}
+                {% assign box_width_md = box_width %}
+              {% else %}
+                {% assign box_width_md = 12 | divided_by: box_items %}
+              {% endif %}
+
+              {% if box_animate %}
+                {% assign box_animate = box_animate %}
+              {% else %}
+                {% assign box_animate = '' %}
+              {% endif %}
+
+              {% if box_type == 'text' and box_enabled %}
+                {% if box_animate %} {% capture animate %}animated {{box_animate}}{% endcapture %} {% endif %}
+                <div class="row">
+                  <div class="col-md-{{box_width_md}} col-md-offset-1 col-sm-{{box_width_md}} col-sm-offset-1 col-xs-{{box_width_md}} col-xs-offset-1 {{animate}}">
+                    <h3 class="title">{{box_title}}</h3>
+                    <p class="description">{{box_description}}</p>
+                    <p class="tagline mt-4">{{box_tagline}}</p>
+                  </div>
+                </div>
+                <div class="row btn-row mt-4">
+                  <div class="col-md-{{box_width_md}} col-md-offset-1 col-sm-{{box_width_md}} col-sm-offset-1 col-xs-{{box_width_md | plus:2}}">
+                  {% for button_hash in box_buttons %}
+                    {% include {{create_bs_button}} button_data=button_hash button_type="link" %}
+                    {{bs_button_html}}
+                  {% endfor %}
+                  </div>
+                </div>
+              {% endif %}
+
+          {% endfor %}
+          {% comment %} END boxes
+          ----------------------------------------------------- {% endcomment %}
+
+        </div>
+      </div>
+
+      {% assign box_enabled    = nil %}
+      {% assign box_width      = nil %}
+      {% assign box_type       = nil %}
+      {% assign box_icon       = nil %}
+      {% assign box_icon_color = nil %}
+      {% assign box_icon_size  = nil %}
+      {% assign box_image_path = nil %}
+      {% assign box_animate    = nil %}
+      {% assign box_title      = nil %}
+      {% assign box_tagline    = nil %}
+      {% assign box_text       = nil %}
+      {% assign box_buttons    = nil %}
+      {% assign box_width_md   = nil %}
+
+    {% comment %} END TEASER banner
+    ----------------------------------------------------------- {% endcomment %}
+
+
+    {% comment %} Collect PARALLAX banner
+    ----------------------------------------------------------- {% endcomment %}
+    {% when 'parallax_banner' %}
+
+      {% for box in boxes %}
+
+        {% for items in box %}
+          {% for item in items[1] %}
+            {% assign key   = item[0] %}
+            {% assign value = item[1] %}
+            {% if key == 'enabled' %}               {% assign box_enabled               = value %}                   {% endif %}
+            {% if key == 'type' %}                  {% assign box_type                  = value %}                   {% endif %}
+            {% if key == 'cite_text' %}             {% assign box_text                  = value | strip_newlines %}  {% endif %}
+            {% if key == 'cite' %}                  {% assign box_cite                  = value | strip_newlines %}  {% endif %}
+            {% if key == 'text_color' %}            {% assign box_text_color            = value %}                   {% endif %}
+            {% if key == 'cite_color' %}            {% assign box_cite_color            = value %}                   {% endif %}
+            {% if key == 'gridify' %}               {% assign box_gridify               = value %}                   {% endif %}
+            {% if key == 'gridifier' %}             {% assign box_gridifier             = value %}                   {% endif %}
+            {% if key == 'darken' %}                {% assign box_darken                = value %}                   {% endif %}
+            {% if key == 'background_image' %}      {% assign box_background_image      = value %}                   {% endif %}
+            {% if key == 'background_position_x' %} {% assign box_background_position_x = value %}                   {% endif %}
+            {% if key == 'background_position_y' %} {% assign box_background_position_y = value %}                   {% endif %}
+          {% endfor %}
+        {% endfor %}
+
+        {% if box_type == 'quote' and box_enabled %}
+
+          {% comment %} Set banner DEFAULTS
+          ----------------------------------------------------- {% endcomment %}
+
+          {% assign parallax_defaults     = site.data.modules.j1_parallax.parallax_quote %}
+          {% assign background_image      = parallax_defaults.background %}
+          {% assign background_pos_x      = parallax_defaults.background_pos_x %}
+          {% assign background_pos_y      = parallax_defaults.background_pos_y %}
+          {% assign gridify               = parallax_defaults.gridify %}
+          {% assign gridifier             = parallax_defaults.gridifier %}
+          {% assign text_color            = parallax_defaults.text_color %}
+          {% assign cite_color            = parallax_defaults.cite_color %}
+          {% assign darken                = parallax_defaults.darken %}
+
+          {% comment %} Set banner VALUES
+          ----------------------------------------------------- {% endcomment %}
+
+          {% if box_gridify %}               {% assign gridify           = box_gridify %}               {% endif %}
+          {% if box_gridifier %}             {% assign gridifier         = box_gridifier %}             {% endif %}
+          {% if box_darken %}                {% assign darken            = box_darken %}                {% endif %}
+          {% if box_text_color %}            {% assign text_color        = box_text_color %}            {% endif %}
+          {% if box_cite_color %}            {% assign cite_color        = box_cite_color %}            {% endif %}
+          {% if box_background_image %}      {% assign background_image  = box_background_image %}      {% endif %}
+          {% if box_background_position_x %} {% assign background_pos_x  = box_background_position_x %} {% endif %}
+          {% if box_background_position_y %} {% assign background_pos_y  = box_background_position_y %} {% endif %}
+
+          {% capture darken %}0.{{darken}}{% endcapture %}
+
+          {% include {{select_color}} color=text_color fallback="#FAFAFA" %}
+          {% assign text_color = color %}
+
+          {% include {{select_color}} color=cite_color fallback="#FAFAFA" %}
+          {% assign cite_color = color %}
+
+          {% comment %} Set individual STYLE tags
+          ----------------------------------------------------- {% endcomment %}
+          $('head').append(
+            "<style>
+              .{{id}}-parallaxBg{background:url({{background_image}}) 50% 0 repeat fixed}
+              .{{id}}-parallax-quote{color:#fff;padding:100px 0;position:relative;text-align:center}
+              .{{id}}-parallax-quote:before{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;{% if gridify %}background:url({{gridifier}}) repeat;{% endif %}}
+              .{{id}}-parallax-quote:after{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:rgba(0,0,0,{{darken}})}
+              .{{id}}-parallax-quote-in{z-index:1;position:relative}
+              .{{id}}-parallax-quote-in p{color:{{text_color}};font-size:200%;text-transform:uppercase;}
+              .{{id}}-parallax-quote-in p:after,.{{id}}-parallax-quote-in p:before{content:' " ';}
+              .{{id}}-parallax-quote-in small{color:{{cite_color}};font-size:100%;font-weight:600;}
+              .{{id}}-parallax-quote:after{background: rgba(0,0,0,{{darken}})}
+              .{{id}}-parallaxBg{background: url({{background_image}} {{background_pos_x}} {{background_pos_y}} repeat fixed}
+            </style>"
+          );
+
+          <div class="{{container_class}} j1-banner-block">
+            <div class="row no-gutters {{id}}-parallax-quote {{id}}-parallaxBg">
+              <div class="col-md-12 col-xs-12 {{id}}-parallax-quote-in">
+                <p>{{box_text}}</p>
+                <i>{{box_cite}}</i>
+              </div>
+            </div>
+          </div>
+
+        {% endif %}
+      {% endfor %}
+      {% comment %} END boxes {% endcomment %}
+
+        {% comment %} Reset elements variables
+        ------------------------------------------------------- {% endcomment %}
+
+        {% assign box_enabled                = nil %}
+        {% assign box_width                  = nil %}
+        {% assign box_type                   = nil %}
+        {% assign box_icon                   = nil %}
+        {% assign box_icon_color             = nil %}
+        {% assign box_icon_size              = nil %}
+        {% assign box_image_path             = nil %}
+        {% assign box_animate                = nil %}
+        {% assign box_title                  = nil %}
+        {% assign box_tagline                = nil %}
+        {% assign box_text                   = nil %}
+        {% assign box_buttons                = nil %}
+        {% assign box_width_md               = nil %}
+        {% assign box_cite                   = nil %}
+        {% assign box_gridifye               = nil %}
+        {% assign box_darken                 = nil %}
+        {% assign box_background_image       = nil %}
+        {% assign box_background-position-x  = nil %}
+        {% assign box_background-position-y  = nil %}
+
+      {% comment %} END PARALLAX banner
+      --------------------------------------------------------- {% endcomment %}
+
+      {% comment %} Collect EXEPTION banner: given type NOT found
+      --------------------------------------------------------- {% endcomment %}
+      {% else %}
+        <div class="row">
+          <div class="col-md-6 col-md-offset-3">
+            <div class="box raised-z10 mt-5">
+              <div class="content content-danger">
+                <h4 class="notoc">
+                  <i class="zmdi zmdi-alert-triangle zmdi-hc-3x pl-3"></i>
+                  Banner <i>{{type}}</i> not found
+                </h4>
+                <h4 class="notoc box-title">Check your configuration</h4>
+                <div class="box-description">
+                  Don't worry about this. May you've a typo in the banner's configuration.
+                  Check the banner config file for the unknown type. A line contains
+                  something wrong like:
+                  <div class="mt-2 mb-2">
+                    <b>id: {{id}}</b><br />
+                    <b>type: {{type}}</b>
+                  </div>
+                  Have a look at:
+                  <div class="mb-5">
+                    <h5 class="notoc">{{banner_config_file}}</h5>
+                  </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      {% comment %} END EXEPTION banner
+      --------------------------------------------------------- {% endcomment %}
+
+    {% endcase %}
+    </div> <!-- End banner {{ id }} -->
+    {% endif %} {% comment %} endif enabled {% endcomment %}
+
+  {% endfor %}
+{% endfor %}
+
+{% endcapture %}
+
+{{ cache | strip_empty_lines }}
+{% assign cache = nil %}