j1_template 2019.4.8 → 2019.4.10

data/lib/starter_web/assets/_data/panel.new.html

@@ -0,0 +1,498 @@
+---
+regenerate:                             true
+---
+{% capture cache %}
+
+{% comment %}
+ # -----------------------------------------------------------------------------
+ # ~/assets/data/panel.html
+ # Liquid procedure to generate HTML (data) for all panel configured for
+ # (fragmented) AJAX load
+ #
+ # Product/Info:
+ # https://jekyll.one
+ #
+ # Copyright (C) 2019 Juergen Adams
+ #
+ # J1 Template is licensed under the MIT License.
+ # See: https://github.com/jekyll-one-org/j1_template/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 %} Set global settings
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign environment = site.environment %}
+{% assign debug       = false %}
+
+
+{% comment %} Process YML config data
+================================================================================ {% endcomment %}
+
+{% comment %} Set config files
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign panel_config_defaults = site.data.blocks.defaults.panel %}
+{% assign panel_config_settings = site.data.blocks.panel %}
+
+{% comment %} Set config data
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign panel_config_defaults = panel_config_defaults.defaults %}
+{% assign panel_config_settings = panel_config_settings.settings %}
+
+{% comment %} Set HELPER variables
+-------------------------------------------------------------------------------- {% endcomment %}
+{% capture panel_config_file_name %}~/_data/modules/panel.yml{% endcapture %}
+
+{% comment %} Main
+================================================================================ {% endcomment %}
+{% for items in panel_config_settings %}
+  {% assign key             = items[0] %}
+  {% assign value           = items[1] %}
+  {% assign panel_config    = value %}
+
+  {% for items in panel_config %}
+    {% for panels in items %}
+
+      {% if debug %} panels: {{ panels }} {% endif %}
+
+      {% comment %} parse settings for MAIN keys
+      -------------------------------------------------------------------------- {% endcomment %}
+      {% for panel in panels %}
+        {% assign data_type = panel | is_type %}
+        {% if data_type == 'hash' %}
+          {% assign panel_settings  = panel %}
+
+          {% assign id              = panel_settings.id %}
+          {% assign enabled         = panel_settings.enabled %}
+          {% assign type            = panel_settings.type %}
+          {% assign icon_family     = panel_settings.icon_family | downcase %}
+          {% assign style           = panel_settings.style %}
+          {% assign raised          = panel_settings.raised %}
+          {% assign lane_span       = panel_settings.lane_span %}
+          {% assign title           = panel_settings.title|strip_newlines %}
+          {% assign tagline         = panel_settings.tagline|strip_newlines %}
+          {% assign buttons         = panel_settings.buttons %}
+          {% assign header          = panel_settings.header %}
+          {% assign cards           = panel_settings.cards %}
+        {% endif %}
+      {% endfor %}
+
+      {% if lane_span == 'fixed' %}
+        {% assign container_class = 'container j1-panel-block' %}
+      {% elsif lane_span == 'fluid' %}
+        {% assign container_class = 'container-fluid j1-panel-block' %}
+      {% else %}
+        {% assign container_class = 'container j1-panel-block' %}
+      {% endif %}
+
+      {% assign row_class = 'row j1-panel-block' %}
+
+      {% if style == 'flat' %}
+        {% assign card_style = 'card-flat' %}
+      {% else %}
+        {% assign card_style = '' %}
+      {% endif %}
+
+      {% if raised %}
+        {% capture card_raised %}raised-z{{raised}}{% endcapture %}
+      {% else %}
+        {% assign card_raised = 'raised-z3' %}
+      {% endif %}
+
+      {% if icon_family == 'fontawesome' or icon_family == 'fontawesome5' or icon_family == 'fa'%}
+        {% assign icon_family = 'fa' %}
+      {% elsif icon_family == 'mdi' %}
+        {% assign icon_family = 'mdi' %}
+      {% else'%}
+        {% assign icon_family = 'mdi' %}
+      {% endif %}
+
+
+      {% comment %} process current panel
+      -------------------------------------------------------------------------- {% endcomment %}
+      {% if panel_settings.enabled %}
+
+        {% case panel_settings.type %}
+
+        {% comment %} Collect INTRO panel
+        ------------------------------------------------------------------------ {% endcomment %}
+        {% when 'intro' %}
+        {% assign panel_options = panel_config_defaults.intro | merge: panel_settings %}
+        {% if debug %}<!-- panel_options:  {{panel_options}} -->{% endif %}
+        <!-- Panel {{panel_settings.id}} -->
+        <!-- section id="{{panel_settings.id}} class="{{panel_settings.background}}" -->
+        <section id="{{panel_settings.id}}>
+          <div class="container">
+
+            <!-- Heading -->
+            <!-- div class="row {{panel_settings.id}}-background}}" -->
+            <div class="row">
+              <div class="col-lg-9">
+                <div class="{{panel_settings.animate}}">
+                  <h1 class="g-color-black g-font-weight-500 g-mb-2">{{panel_settings.title}}</h1>
+                  <p class="tagline"><b>{{panel_settings.tagline}}</b></p>
+                  <div class="d-inline-block g-width-30 g-height-2 g-bg-primary g-mb-2"></div>
+                  <p class="lead mb-0">{{panel_settings.description}}</p>
+                </div>
+              </div>
+            </div>
+            <!-- End Heading -->
+
+            <!-- Cards -->
+            <div class="row mb-5">
+            {% assign card_items = cards | size %}
+            {% for card in cards %}
+
+              {% for items in card %}
+                {% for item in items[1] %}
+                  {% assign key   = item[0] %}
+                  {% assign value = item[1] %}
+                  {% if key == 'enabled' %}     {% assign card_enabled      = value %}                   {% endif %}
+                  {% if key == 'type' %}        {% assign card_type         = value %}                   {% endif %}
+                  {% if key == 'icon' %}        {% assign card_icon         = value %}                   {% endif %}
+                  {% if key == 'icon_size' %}   {% assign card_icon_size    = value %}                   {% endif %}
+                  {% if key == 'icon_color' %}  {% assign card_icon_color   = value %}                   {% endif %}
+                  {% if key == 'title' %}       {% assign card_title        = value | strip_newlines%}   {% endif %}
+                  {% if key == 'tagline' %}     {% assign card_tagline      = value | strip_newlines%}   {% endif %}
+                  {% if key == 'text' %}        {% assign card_text         = value | strip_newlines %}  {% endif %}
+                  {% if key == 'buttons' %}     {% assign card_buttons      = value %}                   {% endif %}
+                {% endfor %}
+                {% if card_enabled == false %} {% assign card_items = card_items | minus:1 %} {% endif %}
+              {% endfor %}
+
+              {% assign card_width_md = 12 | divided_by: card_items %}
+
+              {% include {{select_icon_size}} family=icon_family size=icon_size %}
+              {% assign icon_size = size %}
+
+              {% if card_width %}
+                {% assign card_enabled = true %}
+                {% assign card_width_md = card_width %}
+              {% else %}
+                {% assign card_width_md = 12 | divided_by: card_items %}
+              {% endif %}
+
+              {% if card_animate %}
+                {% assign card_animate = card_animate %}
+              {% else %}
+                {% assign card_animate = '' %}
+              {% endif %}
+
+              {% comment %} extract link for card icon
+              -------------------------------------------------------------- {% endcomment %}
+              {% for items in card_buttons %} {% for item in items %}
+                {% if item[0] == 'button' %}
+                  {% for elm in item[1] %}
+                    {% assign key   = elm[0] %}
+                    {% assign value = elm[1] %}
+                    {% if key == 'href' %} {% assign card_href = value %} {% endif %}
+                  {% endfor %}
+                {% endif %}
+              {% endfor %} {% endfor %}
+
+              {% comment %} TODO: Style should be configurable
+              -------------------------------------------------------------- {% endcomment %}
+              {% assign card_style  = 'flat' %}
+
+              {% if card_type == 'text' and card_enabled and card_style == 'flat' %}
+              {% assign card_raised = 'raised-z0' %}
+
+              <!-- Card Block -->
+              <div class="col-md-{{card_width_md}} col-sm-{{card_width_md}} col-xs-12">
+                <div class="media g-mb-15 {{card_raised}}">
+
+                  <div class="d-flex mr-4">
+                    <span class="g-color-primary">
+                      <i class="{{icon_family}} {{icon_family}}-{{card_icon}} {{icon_family}}-{{card_icon_size}} {{icon_family}}-{{card_icon_color}}"></i>
+                    </span>
+                  </div>
+
+                  <div class="media-body">
+                    <h3 class="h5 g-color-black g-font-weight-600 mt-3 mb-20">{{card_title}}</h3>
+                    <p class="g-color-gray-dark-v4 g-line-height-1_4">{{card_text}}</p>
+
+                    {% for data in card_buttons %} {% for item in data %} {% for button in item[1] %}
+                      {% assign key   = button[0] %}
+                      {% assign value = button[1] %}
+                      {% if key == 'text' %}       {% assign button_text       = value %} {% endif %}
+                      {% if key == 'class' %}      {% assign button_class      = value %} {% endif %}
+                      {% if key == 'icon' %}       {% assign button_icon       = value %} {% endif %}
+                      {% if key == 'icon_color' %} {% assign button_icon_color = value %} {% endif %}
+                      {% if key == 'icon_size' %}  {% assign button_icon_size  = value %} {% endif %}
+                      {% if key == 'href' %}       {% assign button_href       = value %} {% endif %}
+                      {% if key == 'target' %}     {% assign button_target     = value %} {% endif %}
+                    {% endfor %} {% endfor %}{% endfor %}
+
+                    <a class="g-color-main g-color-primary--hover g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="{{button_href}}">{{button_text}}</a -->
+                  </div>
+
+                </div>
+              {% endif %}
+              </div>
+              <!-- End Card Block -->
+              {% endfor %}
+              {% comment %} END cards
+              ------------------------------------------------------------------ {% endcomment %}
+            </div>
+            <!-- End Cards -->
+
+          </div>
+        </section>
+        <!-- End Panel {{panel_settings.id}} -->
+
+        {% comment %} Reset element variables (already processed)
+        ------------------------------------------------------------------------ {% endcomment %}
+        {% assign panel_settings = nil %}
+
+
+        {% comment %} Collect SERVICE panel
+        ------------------------------------------------------------------------ {% endcomment %}
+        {% when 'service' %}
+        {% if debug %}<!-- panel_defaults:  {{panel_config_defaults.service}} -->{% endif %}
+        {% if debug %}<!-- panel_settings:  {{panel_settings}} -->{% endif %}
+        {% assign panel_options = panel_config_defaults.service | merge: panel_settings %}
+        {% if debug %}<!-- panel_options:  {{panel_options}} -->{% endif %}
+        <div id="{{panel_settings.id}}">
+          <div class="{{container_class}}">
+            <div class="row">
+
+            {% if panel_settings.header.enabled %}
+              <!-- service header -->
+              <!-- div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 mb-3" -->
+              <div class="col-md-12 col-sm-12 col-xs-12 mb-3">
+                <h2 class="title text-center">{{panel_settings.header.title}}</h2>
+                <div class="tagline text-justify"> <p>{{panel_settings.header.description}}</p> </div>
+              </div>
+              <!-- end service header -->
+            {% endif %}
+
+            {% assign card_items = cards | size %}
+
+            {% for card in cards %}
+
+              {% for items in card %}
+                {% for item in items[1] %}
+                  {% assign key   = item[0] %}
+                  {% assign value = item[1] %}
+                  {% if key == 'enabled' %}     {% assign card_enabled    = value %}                  {% endif %}
+                  {% if key == 'width' %}       {% assign card_width      = value %}                  {% endif %}
+                  {% if key == 'type' %}        {% assign card_type       = value %}                  {% endif %}
+                  {% if key == 'href' %}        {% assign card_href       = value %}                  {% endif %}
+                  {% if key == 'icon' %}        {% assign card_icon       = value %}                  {% endif %}
+                  {% if key == 'icon_family' %} {% assign icon_family     = value %}                  {% endif %}
+                  {% if key == 'icon_size' %}   {% assign icon_size       = value %}                  {% endif %}
+                  {% if key == 'icon_color' %}  {% assign icon_color      = value %}                  {% endif %}
+                  {% if key == 'title' %}       {% assign card_title      = value | strip_newlines %} {% endif %}
+                  {% if key == 'tagline' %}     {% assign card_tagline    = value | strip_newlines %} {% endif %}
+                  {% if key == 'text' %}        {% assign card_text       = value | strip_newlines %} {% endif %}
+                  {% if key == 'services' %}    {% assign services        = value %}                  {% endif %}
+                {% endfor %}
+                {% if card_enabled == false %} {% assign card_items = card_items | minus:1 %} {% endif %}
+              {% endfor %}
+              {% assign card_width_md = 12 | divided_by: card_items %}
+
+              {% if card_type == "service" and card_enabled %}
+                <div class="col-md-{{card_width_md}} col-sm-{{card_width_md}} col-xs-12">
+                  <div class="card card-flat card-profile mb-0 raised-z0">
+
+                    <div class="card-icon">
+                      <a href="{{card_href}}">
+                        <i class="card-icon-rectangle raised-z0 {{icon_family}} {{icon_family}}-{{card_icon}} {{icon_family}}-{{card_icon_size}} {{icon_family}}-{{card_icon_color}} card-icon-background-no-color card-icon-{{icon_family}}"></i>
+                      </a>
+                    </div>
+
+                    <div class="content">
+                      <h6 class="notoc category text-gray">{{card_title}}</h6>
+                      <h4 class="notoc card-title">{{card_tagline}}</h4>
+                      <p class="card-description">{{card_text}}</p>
+
+                      <div class="card-footer">
+                        <ul class="service-list list-unstyled">
+                          {% for list in services %}
+                            <li><a href="{{list.service.href}}">{{list.service.title}}</a></li>
+                          {% endfor %}
+                        </ul>
+                      </div>
+                    </div>
+
+                  </div>
+                </div>
+                <!-- end service card -->
+              {% endif %}
+
+            {% endfor %}
+            {% comment %} END cards
+            ---------------------------------------------------------------------- {% endcomment %}
+            </div>
+          </div>
+        </div>
+
+        {% comment %} Reset element variables (already processed)
+        ------------------------------------------------------------------------ {% endcomment %}
+        {% assign panel_settings = nil %}
+
+        {% comment %} END SERVICES panel
+        ------------------------------------------------------------------------ {% endcomment %}
+
+
+        {% comment %} Collect NEWS panel
+        ------------------------------------------------------------------------ {% endcomment %}
+        {% when 'news' %}
+
+        {% assign panel_options = panel_config_defaults.news | merge: panel_settings %}
+        {% if debug %}<!-- panel_options:  {{panel_options}} -->{% endif %}
+        <section id="{{panel_settings.id}}">
+          <div class="container g-bg-secondary">
+
+            {% if panel_options.title %}
+            <!-- Heading -->
+            <div class="row g-mb-20 {{panel_settings.background}}">
+              <div class="col-lg-9">
+                <div class="{{panel_settings.animate}}">
+                  <h1 class="h2 g-color-black g-font-weight-600 mb-2">{{panel_options.title}}</h1>
+                  <p class="tagline"><b>{{panel_options.tagline}}</b></p>
+                  <div class="d-inline-block g-width-30 g-height-2 g-bg-primary mb-2"></div>
+                  <p class=" lead mb-0">{{panel_options.description}}</p>
+                </div>
+              </div>
+            </div>
+            <!-- End Heading -->
+            {% endif %}
+
+            {% assign header_available  = false %}
+            {% assign card_items        = panel_options.cards | size %}
+
+            {% for card in panel_options.cards %}
+              {% for items in card %}
+                {% for item in items[1] %}
+                  {% assign key   = item[0] %}
+                  {% assign value = item[1] %}
+                  {% if key == 'enabled' %}       {% assign card_enabled  = value %} {% endif %}
+                  {% if key == 'type' %}          {% assign card_type     = value %} {% endif %}
+                  {% if key == 'style' %}         {% assign card_style    = value %} {% endif %}
+                  {% if key == 'raised' %}        {% assign card_raised   = value %} {% endif %}
+                  {% if key == 'category' %}      {% assign post_category = value %} {% endif %}
+                  {% if key == 'max_posts' %}     {% assign posts_max     = value %} {% endif %}
+                  {% if key == 'truncatewords' %} {% assign truncatewords = value %} {% endif %}
+                  {% if key == 'buttons' %}       {% assign card_buttons  = value %} {% endif %}
+                {% endfor %}
+                {% if card_enabled == false %}
+                  {% assign card_items = card_items | minus:1 %}
+                {% endif %}
+              {% endfor %}
+
+              {% assign posts_written     = 0 %}
+              {% assign last_post_written = false %}
+              {% assign card_width = 12 | divided_by: posts_max %}
+
+              <!-- Recent posts -->
+              <div class="row">
+              {% for post in site.posts %} {% for category in post.categories %}
+                {% if posts_written == posts_max %} {% assign last_post_written = true %} {% break %}{% endif %}
+
+                {% if category == post_category and last_post_written != true %}
+                  {% assign posts_written = posts_written | plus:'1' %}
+                  <!-- Post -->
+                  <div class="col-md-{{card_width}} col-sm-{{card_width}} col-xs-12">
+                    <article>
+                      {% if post.image %}
+                        <img class="img-fluid w-100" src="{{post.image}}" alt="{{post.title}}">
+                        {% assign post_width = '80x' %}
+                      {% else %}
+                        <img class="g-mt-50" src="" alt="">
+                        {% assign post_width = '100x' %}
+                      {% endif %}
+                      <div class="g-width-{{post_width}} g-bg-white g-pos-rel g-z-index-1 g-pa-20 g-mt-minus-50 mx-auto">
+                        <span class="d-block g-color-gray-dark-v4 g-font-weight-600 g-font-size-12 text-uppercase mb-2">{{post.date|date:"%Y %B, %e"}}</span>
+                        <h2 class="h5 g-color-black g-font-weight-600 g-line-height-1_2 mb-3">
+                          <a class="u-link-v5 g-color-black g-color-primary--hover g-cursor-pointer" href="{{post.url}}">{{post.title}}</a>
+                        </h2>
+                        <!-- Excerpt -->
+                        <p class="g-color-gray-dark-v4 g-line-height-1_4">
+                          {{post.excerpt|truncatewords:30|remove:'<div class="paragraph">'|remove:'</div>'|remove:'<p>'|remove:'</p>'}}
+                        </p>
+                        <!-- End Excerpt -->
+                        <a class="g-color-main g-color-primary--hover g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="{{post.url}}"><b>Read more ...</b></a>
+                      </div>
+                    </article>
+                   </div>
+                   <!-- End Post -->
+                {% endif %}
+
+              {% endfor %} {% endfor %}
+              </div>
+              <!-- End recent posts -->
+            {% endfor %}
+
+          </div>
+          <!-- END container -->
+        </section>
+        <!-- End news panel: {{panel_settings.id}} -->
+
+        {% comment %} Reset element variables (already processed)
+        ------------------------------------------------------------------------ {% endcomment %}
+        {% assign panel_settings = nil %}
+
+        {% comment %} END NEWS panel
+        ------------------------------------------------------------------------ {% endcomment %}
+
+        {% else %}
+        {% comment %} Collect EXCEPTION panel: given type NOT found
+        ------------------------------------------------------------------------ {% endcomment %}
+        {% unless panel_settings.id == 'exception_container' %}
+        <div id="exception_container">
+          <div id="{{panel_settings.id}}" class="container-fluid no-padding">
+            <div class="col-md-12 col-sm-12 col-xs-12 no-padding">
+              <div class="box">
+                <div class="content content-danger">
+                  <h2 class="notoc">
+                    <i class="mdi mdi-alarm-light mdi-3x mdi-md-red mr-1"></i>
+                    panel of type <big>{{panel_settings.type}}</big> not found
+                  </h2>
+                  <h4 class="notoc box-title">Check your configuration at {{panel_config_file_name}}</h4>
+                  <div class="box-description">
+                    Don't worry about this. Maybe you've a typo in the panel configuration.
+                    Check the panel config file for the unknown type. <br />
+                    Check for something wrong like:
+                    <div class="mt-2 mb-2">
+                      <b>id:       {{panel_settings.id}}</b>  <br />
+                      <b>type:     {{panel_settings.type}}</b> <br />
+                      <b>comment:  {{panel_settings.comment}}</b>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div> <!-- End panel {{panel_settings.id}} -->
+        </div> <!-- End exception_container -->
+        {% endunless %}
+
+        {% comment %} Reset element variables (already processed)
+        ------------------------------------------------------------------------ {% endcomment %}
+        {% assign panel_settings = nil %}
+
+        {% comment %} END EXEPTION panel
+        ------------------------------------------------------------------------ {% endcomment %}
+
+        {% endcase %}
+      {% endif %} {% comment %} endif enabled {% endcomment %}
+
+    {% endfor %}  {% comment %} END panels {% endcomment %}
+  {% endfor %}  {% comment %} END panel_config {% endcomment %}
+{% endfor %}  {% comment %} END panel_config_settings {% endcomment %}
+
+{% endcapture %}
+
+{{ cache | pretty_print | remove:'<html><body>' | remove:'</body></html>' | strip_empty_lines }}
+{% assign cache = nil %}