---
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 DIVIDER banner
      -------------------------------------------------------------------------- {% endcomment %}
      {% when 'divider_banner' %}
      <div class="row banner-divider"></div>


      {% comment %} Collect TEASER banner
      -------------------------------------------------------------------------- {% endcomment %}
      {% when 'teaser_banner' %}

      <div class="banner-teaser {{id}}-background">
        <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 %}

              {% assign patreon_enabled     = true %}
              {% assign patreon_home        = 'https://www.patreon.com' %}
              {% assign pledge_url          = 'join' %}
              {% assign vanity              = 'jekyll_one' %}
              {% assign pledge_button_text  = 'Become a Patron' %}

              {% capture payment_url %}{{patreon_home}}/{{pledge_url}}/{{vanity}}{% endcapture %}

              {% 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 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>
                  </div>
                </div>
              {% endif %}

          {% endfor %}
          {% comment %} END boxes
          ---------------------------------------------------------------------- {% endcomment %}

        </div>
      </div>

      {% comment %} Reset element 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 %}

      {% comment %} END TEASER banner
      -------------------------------------------------------------------------- {% endcomment %}

      {% comment %} Collect IMAGE banner
      -------------------------------------------------------------------------- {% endcomment %}
      {% when 'image_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 enabled           = value %}                   {% endif %}
              {% if key == 'gridify' %}               {% assign gridify           = value %}                   {% endif %}
              {% if key == 'gridifier' %}             {% assign gridifier         = value %}                   {% endif %}
              {% if key == 'darken' %}                {% assign darken            = value %}                   {% endif %}
              {% if key == 'size_y' %}                {% assign size_y            = value %}                   {% endif %}
              {% if key == 'background_image' %}      {% assign background_image  = value %}                   {% endif %}
            {% endfor %}
          {% endfor %}

          {% if enabled %}

            {% capture darken %}0.{{darken}}{% endcapture %}

            {% comment %} Set STYLE tags
            -------------------------------------------------------------------- {% endcomment %}
            $('head').append(
              "<style>
                .{{id}}-image{background:url("{{background_image}}"); min-height: {{size_y}}px; background-position: center;  background-repeat: no-repeat; background-size: cover; }
                /* .{{id}}-image:before{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;{% if gridify == true %}background: url("{{gridifier}}") repeat;{% endif %}} */
                /* .{{id}}-image:after{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:rgba(0,0,0,{{darken}})} */
              </style>"
            );

            <div class="panel-fluid">
              <div class="row no-gutters {{id}}-image"></div>
            </div>

          {% endif %}
        {% endfor %}
        {% comment %} END boxes
        ------------------------------------------------------------------------ {% endcomment %}

        {% comment %} Reset element 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_size        = nil %}
        {% assign box_background_image       = nil %}

        {% comment %} END IMAGE 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 == 'size_y' %}                {% assign box_background_size       = value %}                   {% endif %}
              {% if key == 'background_image' %}      {% assign box_background_image      = 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 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_size %}       {% assign size_y            = box_background_size %}       {% endif %}
            {% if box_background_image %}      {% assign background_image  = box_background_image %}      {% 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}}"); min-height: {{size_y}}px; background-attachment: fixed; background-position: center;  background-repeat: no-repeat; background-size: cover; }
                .{{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 == true %}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: 2;position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; padding: 20px; text-align: center; }
                .{{id}}-parallax-quote-in p{color:{{text_color}};font-size:200%;text-transform:uppercase;}
                {% if box_text %}
                .{{id}}-parallax-quote-in p:after,.{{id}}-parallax-quote-in p:before{content:' " ';}
                {% endif %}
                .{{id}}-parallax-quote-in small{color:{{cite_color}};font-size:100%;font-weight:600;}
                .{{id}}-parallax-quote:after{background: rgba(0,0,0,{{darken}})}
              </style>"
            );

            <!-- div class="{{container_class}} j1-banner-block" -->
              <div class="panel-fluid">
              <div class="row no-gutters {{id}}-parallax-quote {{id}}-parallaxBg">
                <div class="col-md-12 col-xs-12 {{id}}-parallax-quote-in">
                  {% if box_text %} <p>{{box_text}}</p>{% endif %}
                  {% if box_text %}<i>{{box_cite}}</i>{% endif %}
                </div>
              </div>
            </div>

          {% endif %}
        {% endfor %}
        {% comment %} END boxes
        ------------------------------------------------------------------------ {% endcomment %}

        {% comment %} Reset element 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_size        = nil %}
        {% assign box_background_image       = 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 %}