j1-template 2020.0.25 → 2021.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 16fb722040381e9d4b4e9b8e32538791fcaa6dfb0d463326c8fde78e7cf2c5c3
-  data.tar.gz: 751d96f914fbaff0c6b235aaa54ee0be0d6fe423aacdc48c658b2a971f7549b3
+  metadata.gz: 8c117fd0f5e2938a14137ad1ed0758ad85de6ca7dbfdd0b630a60ab98dbf3ce1
+  data.tar.gz: ec0a0fb9c01b4e07c7a0118f992a832f0d878b408fbc9697bc8ceaa27a33db6f
 SHA512:
-  metadata.gz: 3bb7f732a04768e473a645eac989402abfbb5b0930f02c867306ffe69db689fa50947d393a1a8c9818cd8f26f0353e6f5d8ba471f14445ccf1b8a7ba4965d9c9
-  data.tar.gz: 7c90c0713cb26846f93cb1741bb08386e041708482e9f6a1ccb567c5b6d2491494de2f80e1ee03d8bcfe2f01b1f40565bf5cd0840f8e89b1444bdb7b484a6983
+  metadata.gz: 72525ff02792cddd0b86eaeec8351fa3b7a4b57d0aafe6e01199ac0af8473371c8bfbda7bb2842bc12437c8d3c652830e6196ac6343020bc9f28f1fb7de073b4
+  data.tar.gz: 20f0175dd97f8d012d14f5690b73af3079efe05c667f4f8ae0a85e7595e1fcd5a65c57615d19d4a533127708fbeaae21296d8a27cf723c7ebe3687fd950b1e5c

data/_includes/themes/j1/modules/attics/generator.html

@@ -119,7 +119,7 @@
 {% comment %} Main
 -------------------------------------------------------------------------------- {% endcomment %}
 {% if attic %}
-  <!-- [INFO   ] [j1.attic.generator.html             ] [ place attic detected: {{attic}} ] -->
+  <!-- [INFO   ] [j1.modules.attics.generator.html             ] [ place attic detected: {{attic}} ] -->
 
  {% comment %} Place attic detected
  ------------------------------------------------------------------------------- {% endcomment %}

data/assets/data/carousel.json

@@ -42,28 +42,20 @@ regenerate:                             true
 {% comment %} Process YML config data
 ================================================================================ {% endcomment %}
 
-{% comment %} Set config files
--------------------------------------------------------------------------------- {% endcomment %}
-{% assign apps                      = site.data.apps %}
-
 {% comment %} Set config data
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign environment               = site.environment %}
-
-{% assign carousel_config_defaults  = apps.defaults.carousel.defaults %}
-{% assign carousel_config_settings  = apps.carousel.settings %}
+{% assign environment         = site.environment %}
 
-{% comment %} Set config options
+{% comment %} Set config files
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign carousel_config           = carousel_config_defaults | merge: carousel_config_settings %}
+{% assign apps                = site.data.apps %}
 
-{% assign production = false %}
-{% if environment == 'prod' or environment == 'production' %}
-  {% assign production = true %}
-{% endif %}
+{% comment %} Set config data (carousel settings only)
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign carousel_settings   = apps.carousel.settings %}
 
 {
-  {% for item in carousel_config.carousel %}
+  {% for item in carousel_settings.carousel %}
     "{{item.show.id}}" : [
     {% if item.show.type == 'image' %}
       {% for image in item.show.images %}

data/assets/themes/j1/adapter/js/carousel.js

@@ -86,6 +86,7 @@ j1.adapter['carousel'] = (function (j1, window) {
   var _this;
   var logger;
   var logText;
+  var dragging      = false;
 
   // ---------------------------------------------------------------------------
   // Helper functions
@@ -143,7 +144,13 @@ j1.adapter['carousel'] = (function (j1, window) {
               {% assign slider_title  = item.show.title %}
               {% assign slider_type   = item.show.type %}
               {% assign parallax      = item.show.parallax %}
-              {% assign css_classes   = item.show.css_classes %}
+              {% assign padding       = item.show.padding %}
+              {% assign text_color    = item.show.text_color %}
+              {% assign font_size     = item.show.font_size %}
+              {% assign font_weight   = item.show.font_weight %}
+              {% assign background    = item.show.background %}
+              {% assign darken        = item.show.darken %}
+              {% assign gridify       = item.show.gridify %}
               {% assign lazyLoad      = item.show.lightbox %}
 
               // Create an Carousel INSTANCE if slider on id: {{slider_id}} exists
@@ -175,26 +182,63 @@ j1.adapter['carousel'] = (function (j1, window) {
                   {% assign slide_border = "" %}
                 {% endif %}
 
-                // Place HTML markup for the title
+                // place HTML markup for the title
                 {% if slider_title %}
                 var slider_title = '<div class="slider-title">{{slider_title}}</div>';
                 $('#{{slider_id}}').before(slider_title);
                 {% endif %}
 
-                // place parallax styles
+                // set space between the slides
+                $('head').append('<style>.{{slider_id}}-item{margin: {{slide_space}}px;}</style>');
+
+                // place additional parallax styles if enabled
                 {% if parallax %}
-                  $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax{background:url(/assets/images/quotes/default.png) 50% 0 repeat fixed}</style>');
-                  $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax{padding:75px 0 75px 25px;position:relative}</style>');
-                  $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax{color:#e5e5e5;font-size:1.5rem;font-weight:400}</style>');
-                  $('head').append('<!-- style>.parallax-slider__owl_demo_text_carousel_parallax{text-align:center}</style -->');
-                  $('head').append('<!-- style>.parallax-slider__owl_demo_text_carousel_parallax{text-transform:uppercase}</style -->');
-                  $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax:before{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:url(/assets/images/modules/patterns/gridtile.png) repeat;}</style>');
-                  $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax:after{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:rgba(0,0,0,0.3)}</style>');
-                {% endif %}
 
-                $('head').append('<style>.{{slider_id}}-item{margin: {{slide_space}}px;}</style>');
-                //$('.{{slider_id}}-item').parent().addClass('owl-carousel');
-                //$('.owl-carousel .item').css('margin','{{slide_space}}px');
+                  {% if padding %}
+                  $('head').append('<style>#{{slider_id}}{padding:{{padding}};position:relative}</style>');
+                  {% else %}
+                  $('head').append('<style>#{{slider_id}}{padding:50px 0 50px 25px;position:relative}</style>');
+                  {% endif %}
+
+                  {% if cover %}
+                  $('head').append('<style>#{{slider_id}}{background-size: cover}</style>');
+                  {% endif %}
+
+                  {% if background %}
+                  $('head').append('<style>#{{slider_id}}{background:url({{background}}) 50% 0 repeat fixed}</style>');
+                  {% else %}
+                  $('head').append('<style>#{{slider_id}}{background:url(/assets/images/quotes/default.png) 50% 0 repeat fixed}</style>');
+                  {% endif %}
+
+                  {% if darken %}
+                  $('head').append('<style>#{{slider_id}}:after{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:rgba(0,0,0,0.{{darken}})}</style>');
+                  {% else %}
+                  $('head').append('<style>#{{slider_id}}:after{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:rgba(0,0,0,0.2)}</style>');
+                  {% endif %}
+
+                  {% if text_color %}
+                  $('#{{slider_id}}').addClass('mdi-{{text_color}}');
+                  {% else %}
+                  $('#{{slider_id}}').addClass('mdi-md-grey-100');
+                  {% endif %}
+
+                  {% if font_size %}
+                  $('head').append('<style>#{{slider_id}}{font-size:{{font_size}}}</style>');
+                  {% else %}
+                  $('head').append('<style>#{{slider_id}}{font-size:1.5rem}</style>');
+                  {% endif %}
+
+                  {% if font_weight %}
+                  $('head').append('<style>#{{slider_id}}{font-weight:{{font_weight}}}</style>');
+                  {% else %}
+                  $('head').append('<style>#{{slider_id}}{font-weight:400}</style>');
+                  {% endif %}
+
+                  {% if gridify %}
+                  $('head').append('<style>#{{slider_id}}:before{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:url(/assets/images/modules/patterns/gridtile.png) repeat;}</style>');
+                  {% endif %}
+
+                {% endif %}
 
                 // Initialize individual show parameters
                 /* eslint-disable */
@@ -212,32 +256,26 @@ j1.adapter['carousel'] = (function (j1, window) {
                 /* eslint-enable */
 
                 // Initialize instance variable (for later access)
-                //{{slider_id}} = $('#{{slider_id}}').data('owlCarousel');
-
                 j1['{{slider_id}}'] = $('#{{slider_id}}').data('owlCarousel');
 
-                // jQuery show data functions
+                // custom show data functions (each slide show)
                 function customDataSuccess_{{forloop.index}}(data){
                   var content = '';
                   for (var i in data['{{slider_id}}']) {
-                    {% if slider_type == 'image' %}
-                    var lb          = data['{{slider_id}}'][i].lb;
-                    var lb_caption  = data['{{slider_id}}'][i].lb_caption;
-                    var img         = data['{{slider_id}}'][i].img;
-                    var alt         = data['{{slider_id}}'][i].alt;
-                    {% endif %}
+
                     {% if slider_type == 'text' %}
                     var text        = data['{{slider_id}}'][i].text;
                     {% endif %}
+
                     var href        = data['{{slider_id}}'][i].href;
-                    {% if  css_classes %}
-                    var css_classes = 'class="{{css_classes}}";';
-                    {% else %}
-                    var css_classes = '';
-                    {% endif %}
 
                     {% if slider_type == 'image' %}
-                    // If lightbox is enabled (preference over href)
+                    var lb          = data['{{slider_id}}'][i].lb;
+                    var lb_caption  = data['{{slider_id}}'][i].lb_caption;
+                    var img         = data['{{slider_id}}'][i].img;
+                    var alt         = data['{{slider_id}}'][i].alt;
+
+                    // if lightbox is enabled (preference over href)
                     if (lb) {
                       if (lb_caption) {
                         content += '\t\t' + '<div class="item {{slider_id}}-item {{slide_border}}">'+ '\n';
@@ -254,9 +292,9 @@ j1.adapter['carousel'] = (function (j1, window) {
                         content += '<a class="item" href="' +img+ '" ' + 'data-lightbox="{{slider_id}}"> <img class="lazyOwl" data-src="' +img+ '" alt="' +alt+ '">' + ' </a>';
                       }
                     } else if (href) {
-                        content += '<div class="item">' + '<img ' +css_classes+ ' src="' +img+ '" alt="' +alt+ '">' + '</div>';
+                        content += '<div class="item">' + '<img src="' +img+ '" alt="' +alt+ '">' + '</div>';
                     } else {
-                        content += '<div class="item">' + '<img ' +css_classes+ ' src="' +img+ '" alt="' +alt+ '">' + '</div>';
+                        content += '<div class="item">' + '<img src="' +img+ '" alt="' +alt+ '">' + '</div>';
                     }
                     {% endif %}
 
@@ -324,7 +362,332 @@ j1.adapter['carousel'] = (function (j1, window) {
     // -------------------------------------------------------------------------
     getState: function () {
       return _this.state;
-    } // END getState
+    }, // END getState
+
+    // -----------------------------------------------------------------------
+    //  Caption text animation (currently NOT used)
+    // -----------------------------------------------------------------------
+
+    // -------------------------------------------------------------------------
+    // fadeIn()
+    // Animation (caption): fadeIn
+    // -------------------------------------------------------------------------
+    fadeIn: function (id, options) {
+      $(id + '.active .caption .fadeIn-1').stop().delay(options.delay)
+      .animate({
+        opacity:      options.opacity
+      }, {
+        duration:     options.duration,
+        easing:       options.easing
+      });
+      $(id + '.active .caption .fadeIn-2').stop().delay(options.delay+200)
+      .animate({
+        opacity:      options.opacity
+      }, {
+        duration:     options.duration,
+          easing:     options.easing
+      });
+      $(id + '.active .caption .fadeIn-3').stop().delay(options.delay+500)
+      .animate({
+        opacity:      options.opacity
+      }, {
+        duration:     options.duration,
+        easing:       options.easing
+      });
+    },
+
+    // -------------------------------------------------------------------------
+    // fadeInUp()
+    // Animation (caption): fadeInUp
+    // -------------------------------------------------------------------------
+    fadeInUp: function (id, options) {
+      $(id + '.active .caption .fadeInUp-1')
+      .stop()
+      .delay(options.delay)
+      .animate({
+        opacity:      options.opacity,
+        top:          options.top
+      }, {
+        duration:     options.duration,
+        easing:       options.easing
+      });
+      $(id + '.active .caption .fadeInUp-2')
+      .stop()
+      .delay(options.delay+200)
+      .animate({
+        opacity:      options.opacity,
+        top:          options.top
+      }, {
+        duration: 800,
+        easing: "easeOutCubic"
+      });
+      $(id + '.active .caption .fadeInUp-3')
+      .stop()
+      .delay(options.delay+500)
+      .animate({
+        opacity:      options.opacity,
+        top:          options.top
+      }, {
+        duration:     options.duration,
+        easing:       options.easing
+      });
+    },
+
+    // -------------------------------------------------------------------------
+    // fadeInRight()
+    // Animation (caption): fadeInRight
+    // -------------------------------------------------------------------------
+    fadeInRight: function (id, options) {
+      $(id + '.active .caption .fadeInRight-1')
+      .stop()
+      .delay(options.delay)
+      .animate({
+        opacity:      options.opacity,
+        left:         options.left
+      }, {
+        duration:     options.duration,
+        easing:       options.easing
+      });
+      $(id + '.active .caption .fadeInRight-2')
+      .stop()
+      .delay(options.delay+200)
+      .animate({
+        opacity:      options.opacity,
+        left:         options.left
+      }, {
+        duration:     options.duration,
+        easing:       options.easing
+      });
+      $(id + '.active .caption .fadeInRight-3')
+      .stop()
+      .delay(options.delay+500)
+      .animate({
+        opacity:      options.opacity,
+        left:         options.left
+      }, {
+        duration:     options.duration,
+        easing:       options.easing
+      });
+    },
+
+    // -------------------------------------------------------------------------
+    // fadeInDown()
+    // Animation (caption): fadeInDown
+    // -------------------------------------------------------------------------
+    fadeInDown: function (id, options) {
+      $('#item-1').backstretch();
+      $(id + '.active .caption .fadeInDown-1')
+      .stop()
+      .delay(options.delay)
+      .animate({
+        opacity:      options.opacity,
+        top:          options.top
+      }, {
+        duration:     options.duration,
+        easing:       options.easing
+      });
+      $(id + '.active .caption .fadeInDown-2')
+      .stop()
+      .delay(options.delay+200)
+      .animate({
+        opacity:      options.opacity,
+        top:          options.top
+      }, {
+        duration:     options.duration,
+        easing:       options.easing
+      });
+      $(id + '.active .caption .fadeInDown-3')
+      .stop()
+      .delay(options.delay+500)
+      .animate({
+        opacity:      options.opacity,
+        top:          options.top
+      }, {
+        duration:     options.duration,
+        easing:       options.easing
+      });
+    },
+
+    // -------------------------------------------------------------------------
+    // fadeInLeft()
+    // Animation (caption): fadeInLeft
+    // -------------------------------------------------------------------------
+    fadeInLeft: function (id, options) {
+      $('#item-2').backstretch();
+      $(id + '.active .caption .fadeInLeft-1')
+      .stop()
+      .delay(500)
+      .animate({
+        opacity:      options.opacity,
+        top:          options.left
+      }, {
+        duration:     options.duration,
+        easing:       options.easing
+      });
+      $(id + '.active .caption .fadeInLeft-2')
+      .stop()
+      .delay(700)
+      .animate({
+        opacity:      options.opacity,
+        top:          options.left
+      }, {
+        duration:     options.duration,
+        easing:       options.easing
+      });
+      $(id + '.active .caption .fadeInLeft-3')
+      .stop()
+      .delay(1000)
+      .animate({
+        opacity:      options.opacity,
+        top:          options.left
+      }, {
+        duration:     options.duration,
+        easing:       options.easing
+      });
+    },
+
+    // -------------------------------------------------------------------------
+    // fadeInReset()
+    // Reset animation (caption): fadeIn
+    // -------------------------------------------------------------------------
+    fadeInReset: function (id, options) {
+      if (!options.dragging) {
+        $(id + '.caption .fadeIn-1,' +
+          id + '.caption .fadeIn-2,' +
+          id + '.caption .fadeIn-3')
+        .stop()
+        .delay(options.delay)
+        .animate({
+            opacity:  options.opacity
+        }, {
+            duration: options.duration,
+            easing:   options.easing
+        });
+      } else {
+        $(id + '.caption .fadeIn-1,' +
+          id + '.caption .fadeIn-2,' +
+          id + '.caption .fadeIn-3')
+        .css({
+            opacity:  options.opacity
+        });
+      }
+    }, // END fadeOut
+
+    // -------------------------------------------------------------------------
+    // fadeInUpReset()
+    // Reset animation (caption): fadeInUp
+    // -------------------------------------------------------------------------
+    fadeInUpReset: function (id, options) {
+      if (!options.dragging) {
+        $(id + '.caption .fadeInUp-1,' +
+          id + '.caption .fadeInUp-2,' +
+          id + '.caption .fadeInUp-3')
+        .stop()
+        .delay(options.delay)
+        .animate({
+            opacity:  options.opacity,
+            top:      options.top
+        }, {
+          duration:   options.duration,
+          easing:     options.easing
+        });
+      } else {
+        $(id + '.caption .fadeInUp-1', +
+          id + '.caption .fadeInUp-2,' +
+          id + '.caption .fadeInUp-3')
+        .css({
+            opacity:  options.opacity,
+            top:      options.top
+        });
+      }
+    }, // END fadeInUpReset
+
+    // -------------------------------------------------------------------------
+    // fadeInRightReset()
+    // Reset animation (caption): fadeInRight
+    // -------------------------------------------------------------------------
+    fadeInRightReset: function (id, options) {
+      if (!options.dragging) {
+        $(id + '.caption .fadeInRight-1,' +
+          id + '.caption .fadeInRight-2,' +
+          id + '.caption .fadeInRight-3')
+        .stop()
+        .delay(options.delay)
+        .animate({
+            opacity:  options.opacity,
+            left:     options.left
+        }, {
+          duration:   options.duration,
+          easing:     options.easing
+        });
+      } else {
+        $(id + '.caption .fadeInRight-1,' +
+          id + '.caption .fadeInRight-2,' +
+          id + '.caption .fadeInRight-3')
+        .css({
+            opacity:  options.opacity,
+            left:     options.left
+        });
+      }
+    }, // END fadeInRightReset
+
+    // -------------------------------------------------------------------------
+    // fadeOutDown()
+    // Reset animation (caption): fadeInDown
+    // -------------------------------------------------------------------------
+    fadeInDownReset: function (id, options) {
+      if (!options.dragging) {
+        $(id + '.caption .fadeInDown-1,' +
+          id + '.caption .fadeInDown-2,' +
+          id + '.caption .fadeInDown-3')
+        .stop()
+        .delay(options.delay)
+        .animate({
+            opacity:  options.opacity,
+            top:      options.top
+        }, {
+            duration: options.duration,
+            easing:   options.easing
+        });
+      } else {
+        $(id + '.caption .fadeInDown-1,' +
+          id + '.caption .fadeInDown-2,' +
+          id + '.caption .fadeInDown-3')
+        .css({
+            opacity:  options.opacity,
+            top:      options.transitionTypes
+        });
+      }
+    }, // END fadeOutDown
+
+    // -------------------------------------------------------------------------
+    // fadeInLeftReset()
+    // Reset animation (caption): fadeInLeft
+    // -------------------------------------------------------------------------
+    fadeInLeftReset: function (id, options) {
+      if (!options.dragging) {
+        $(id + '.caption .fadeInLeft-1,' +
+          id + '.caption .fadeInLeft-2,' +
+          id + '.caption .fadeInLeft-3')
+        .stop()
+        .delay(options.delay)
+        .animate({
+            opacity:  options.opacity,
+            left:     options.left
+        }, {
+          duration:   options.duration,
+          easing:     options.easing
+        });
+      } else {
+        $(id + '.caption .fadeInLeft-1,' +
+          id + '.caption .fadeInLeft-2,' +
+          id + '.caption .fadeInLeft-3')
+        .css({
+            opacity:  options.opacity,
+            left:     options.left
+        });
+      }
+    }, // END fadeInLeftReset
 
   }; // END return