forever_style_guide 1.2.5 → 1.2.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 31310b9d9e8e32ad781eabec941689e8834664be
-  data.tar.gz: 5f105595e889188ada75ef775231a87606a1740c
+  metadata.gz: 6ee3b90280750fbf42f60df90a5db0c1b348fc02
+  data.tar.gz: a5f63c59647e138ab326a99e4fdf82269114f311
 SHA512:
-  metadata.gz: b99b00f8a691b75586fa5c7f6c0d940061858684694ce4d22ffc55c0983608c054ab3be8483dabafa7eca316cd7eb3d433fb7119f97d63a159e55aada1bf4361
-  data.tar.gz: 8a9b8ec030c338a0c6f6c7c19e434e3c060cba160473aba2be339a334be083b3dfcbff97c26ce7299f20364320332fe6a78ae97d9e8f1d3a5583adfe532a4316
+  metadata.gz: 1fae8b927a6e97338f7e191c5b07ba66beb3e27d727436513cfa0210558ca18d7b63f6bfa935fb373978347e948f88c8efd13613c43ac665234d65acdf6268c3
+  data.tar.gz: 2ccd4ecd6252732497306f0e7a5d29909bb657b64314d323ff14643504039d81c297be67031673fce2c7b5ea57967ab2b87138dd7bfd9d23aa19fe49c5268d52

data/app/assets/javascripts/forever_style_guide/hero-blur.js

@@ -313,110 +313,119 @@
 })(
   typeof define === 'function' && define.amd
     ? define
-    : function (r, factory) { factory(jQuery); }
+    : function (r, factory) { factory(jQuery);
+  }
 );
 
-// percentage of 'x' position of center of focus for bg scaling
-var xFocus = 0.8;
-var yFocus = 0.5;
-var blurGenerated = false;
-
-var updateHeroPosition = function() {
-  var $source = $('.hero-blur');
-  var $blur = $(".hero-blur-block");
-
-  var imgWidth = $blur.attr('data-hero-width');
-  var imgHeight = $blur.attr('data-hero-height');
-  var imgScale = imgHeight / imgWidth;
-  var heroScale = $source.outerHeight() / $source.outerWidth();
-
-  // how many scaled pixels are on/off the viewport
-  var imgOnScreenX = (imgScale / heroScale) * imgWidth;
-  var imgOffScreenX = imgWidth - imgOnScreenX;
-  var imgOnScreenY = (imgScale / heroScale) * imgHeight;
-  var imgOffScreenY = imgHeight - imgOnScreenY;
-
-  var viewFactorX = imgOffScreenX / imgOnScreenX;
-  var viewFactorY = Math.abs(imgOffScreenY / imgOnScreenY);
-
-  // how many actual pixels are on/off the viewport
-  var heroOnScreenX = $source.outerWidth();
-  var heroOffScreenX = heroOnScreenX * viewFactorX;
-
-  var heroOnScreenY = $source.outerHeight();
-  var heroOffScreenY = heroOnScreenY * viewFactorY;
-
-  var offsetBlurY = $source.offset().top - $blur.offset().top;
-  var offsetBlurX = $source.offset().left - $blur.offset().left;
-
-  if (heroScale >= imgScale) {
-    //console.log("image is wider than screen", heroOnScreenX, imgOffScreenX, heroOnScreenX, heroOffScreenX, viewFactorX, heroOnScreenY);
-    offsetBlurX -= heroOffScreenX * xFocus;
-    $blur.css('background-size', (heroOnScreenX + heroOffScreenX) + 'px ' + heroOnScreenY + "px");
-  } else {
-    //console.log("image is taller than screen", imgOnScreenY, imgOffScreenY, heroOnScreenY, heroOffScreenY, viewFactorY);
-    $blur.css('background-size',  heroOnScreenX + 'px auto');
-  }
 
-  $source.css('background-position', (xFocus * 100) + '% ' + '0%');
-  $blur.css('background-position', (offsetBlurX) + 'px ' + (offsetBlurY) + 'px');
-};
+(function UpdateHeroModule (elem) {
 
+  // percentage of 'x' position of center of focus for bg scaling
+  var xFocus = 0.8;
+  var yFocus = 0.5;
 
-var generateHeroBlur = function(done) {
-  $('.hero-blur-block').blurjs({
-    source: '.hero-blur',
-    radius: 40,
-    overlay: 'rgba(255,255,255,0.7)'
-  }).on('loaded', function(e, canvas) {
-    //console.log('loaded');
-    done(e, canvas);
-  });
-};
+  this.blurGenerated = false;
+  this.windowWidth = $(window).width();
+
+  this.updateHeroPosition = function updateHeroPosition() {
+    var $source = $('.hero-blur');
+    var $blur = $(".hero-block-blur");
+
+    var imgWidth = $blur.attr('data-hero-width');
+    var imgHeight = $blur.attr('data-hero-height');
+    var imgScale = imgHeight / imgWidth;
+    var heroScale = $source.outerHeight() / $source.outerWidth();
+
+    // how many scaled pixels are on/off the viewport
+    var imgOnScreenX = (imgScale / heroScale) * imgWidth;
+    var imgOffScreenX = imgWidth - imgOnScreenX;
+    var imgOnScreenY = (imgScale / heroScale) * imgHeight;
+    var imgOffScreenY = imgHeight - imgOnScreenY;
+
+    var viewFactorX = imgOffScreenX / imgOnScreenX;
+    var viewFactorY = Math.abs(imgOffScreenY / imgOnScreenY);
+
+    // how many actual pixels are on/off the viewport
+    var heroOnScreenX = $source.outerWidth();
+    var heroOffScreenX = heroOnScreenX * viewFactorX;
+
+    var heroOnScreenY = $source.outerHeight();
+    var heroOffScreenY = heroOnScreenY * viewFactorY;
+
+    var offsetBlurY = $source.offset().top - $blur.offset().top;
+    var offsetBlurX = $source.offset().left - $blur.offset().left;
+
+    if (heroScale >= imgScale) {
+      //console.log("image is wider than screen", heroOnScreenX, imgOffScreenX, heroOnScreenX, heroOffScreenX, viewFactorX, heroOnScreenY);
+      offsetBlurX -= heroOffScreenX * xFocus;
+      $blur.css('background-size', (heroOnScreenX + heroOffScreenX) + 'px ' + heroOnScreenY + "px");
+    } else {
+      //console.log("image is taller than screen", imgOnScreenY, imgOffScreenY, heroOnScreenY, heroOffScreenY, viewFactorY);
+      $blur.css('background-size',  heroOnScreenX + 'px auto');
+    }
+
+    $source.css('background-position', (xFocus * 100) + '% ' + '0%');
+    $blur.css('background-position', (offsetBlurX) + 'px ' + (offsetBlurY) + 'px');
+  };
+
+  this.generateHeroBlur = function(done) {
+    $('.hero-block-blur').blurjs({
+      source: '.hero-blur',
+      radius: 30,
+      overlay: 'rgba(255,255,255,0.8)'
+    }).on('loaded', function(e, canvas) {
+      done(e, canvas);
+    });
+  };
+
+  this.initialize = function() {
+    $(".hero-blur").addClass('hero-blur-visible');
+
+    this.generateHeroBlur(function(e, canvas) {
+      this.blurGenerated = true;
+      // initializes position upon load
+      $(e.target).addClass('hero-block-blur-visible');
+      this.updateHeroPosition();
+    });
+
+    this.updateHeroPosition();
+  };
+
+  elem.UpdateHeroModule = this;
+})(window);
 
 // initialize
 $(function() {
-  $(".hero-blur").addClass('hero-blur-visible');
+  // prevents a race condition where var heroOnScreenY = $source.outerHeight(); above returns an incorrect height
+  setTimeout(function() {
+    window.UpdateHeroModule.initialize();
+  }, 100);
 
   // mobile images will use optimized image fallback
   if ($(window).width() <= 768) {
-    $(".hero-blur-block-side").addClass('hero-blur-block-visible');
+    $(".hero-blur").addClass('hero-blur-visible');
+    $(".hero-block-side .hero-block-blur").addClass('hero-block-blur-visible');
   }
-
-  generateHeroBlur(function(e, canvas) {
-    blurGenerated = true;
-    // initializes position upon load
-    $(e.target).addClass('hero-blur-block-visible');
-    updateHeroPosition();
-  });
-
-  updateHeroPosition();
 });
 
-var windowWidth = $(window).width();
 
 $(window).resize(function() {
+  var updateHeroModule = window.UpdateHeroModule;
 
   // Check window width has actually changed and it's not just iOS triggering a resize event on scroll
-  if ($(window).width() != windowWidth) {
-    updateHeroPosition();
+  if ($(window).width() != updateHeroModule.windowWidth) {
+    updateHeroModule.updateHeroPosition();
     // Update the window width for next time
-    windowWidth = $(window).width();
+    updateHeroModule.windowWidth = $(window).width();
   }
 
   // if mobile optimized image was loaded, now generate a proper blur image (mostly for local testing)
-  if (!blurGenerated && $(window).width() >= 768) {
-    blurGenerated = true;
-    $(".hero-blur-block").removeClass('hero-blur-block-visible');
-    generateHeroBlur(function(e, canvas) {
-      $(e.target).addClass('hero-blur-block-visible');
-      updateHeroPosition();
+  if (!updateHeroModule.blurGenerated && $(window).width() >= 768) {
+    updateHeroModule.blurGenerated = true;
+    $(".hero-block-blur").removeClass('hero-block-blur-visible');
+    updateHeroModule.generateHeroBlur(function(e, canvas) {
+      $(e.target).addClass('hero-block-blur-visible');
+      updateHeroModule.updateHeroPosition();
     });
   }
-
-});
-
-$(window).scroll(function() {
-  // enables fixed display behavior
-  //updateHeroPosition();
 });

data/app/assets/javascripts/forever_style_guide/list-toggle.js

@@ -1,8 +1,18 @@
 $(function () {
   $(".list-group-toggle-trigger").click(function (e) {
     e.preventDefault();
-    $(this).next('.list-group-item-child').toggleClass("is-open");
-    $("i",this).toggleClass("fa-plus fa-minus");
-    $(this).toggleClass("is-open");
+    $(this).next('.list-group-item-child').toggleClass("is_open");
+    $("i", this).toggleClass("fa-plus fa-minus");
   })
 });
+
+$(function () {
+  var activeListItems = $('.list-group-link-is_active');
+
+  if ($(activeListItems).length) {
+    $(activeListItems).append('<i class="fa fa-times"></i>');
+    $(activeListItems).parents('.list-group-item-child').addClass('is_open');
+    $(activeListItems).parents('.list-group-item').addClass('is_active');
+    $(activeListItems).parents('.list-group-item').find('.list-group-toggle-trigger .fa').toggleClass("fa-plus fa-minus");
+  }
+});

data/app/assets/stylesheets/forever_style_guide/modules/_all.scss

@@ -14,6 +14,8 @@
 @import "select";
 @import "checkbox";
 @import "hero";
+@import "hero-block";
+@import "hero-product";
 @import "hero-blur";
 @import "progress";
 @import "dropdown-menu";

data/app/assets/stylesheets/forever_style_guide/modules/_button.scss

@@ -190,6 +190,15 @@
 
   // Because of Action buttons particular formatting, it requires some special positioning adjustments
   &.btn-action {
+
+    &.btn-link {
+      &:hover,
+      &:active,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+
     .btn-action-label {
       margin: 0;
       padding-top: 0px;

data/app/assets/stylesheets/forever_style_guide/modules/_hero-block.scss

@@ -0,0 +1,82 @@
+.hero-block {
+  background-size: cover;
+  padding: 30px;
+}
+.hero-block-title {
+  font-size: 35px;
+  color: color('white');
+  text-shadow: color('gray-700') 0 2px 10px !important;
+
+  @media (min-width: $screen-sm) {
+    font-size: 40px;
+  }
+  @media (min-width: $screen-lg) {
+    font-size: 50px;
+  }
+}
+.hero-block-description {
+  color: color('white');
+  text-shadow: color('gray-700') 0 1px 5px !important;
+}
+
+.hero-block-side {
+  width: 400px;
+  margin-top: 0;
+  margin-left: 50px;
+  padding: 30px;
+
+  @media (max-width: $screen-sm) {
+    width: 100%;
+    margin: 0;
+  }
+  @media (min-width: $screen-lg) {
+    margin-bottom: 0;
+  }
+  @media (min-width: $screen-xl) {
+    width: 500px;
+    padding-top: 50px;
+    padding-bottom: 50px;
+    margin-bottom: 0;
+  }
+  @media (min-width: $screen-xxl) {
+    width: 600px;
+    padding-top: 140px;
+    padding-bottom: 140px;
+  }
+
+  .hero-block-description {
+    margin-top: 40px;
+    padding-top: 40px;
+    padding-bottom: 50px;
+    color: color('gray-700');
+    line-height: 1.4;
+    text-align: left;
+    text-shadow: none !important;
+    border-top: 1px solid color('gray-600');
+    border-bottom: 1px solid color('gray-600');
+
+    @media (max-width: $screen-sm) {
+      margin-top: 20px;
+      padding-top: 20px;
+      padding-bottom: 20px;
+    }
+  }
+}
+.hero-block-cta {
+  margin-top: 5px;
+
+  // for hero CTAs layout in between xs -> sm breakpoints
+  @media (max-width: 580px) {
+    width: 100%;
+  }
+}
+.hero-block-cta-justified {
+  width: 250px;
+}
+.hero-block-actions {
+  text-align: left;
+
+  @media (max-width: $screen-sm) {
+    text-align: center;
+  }
+}

data/app/assets/stylesheets/forever_style_guide/modules/_hero-blur.scss

@@ -9,7 +9,7 @@
   @include transition-timing-function(ease-in);
 }
 
-.hero-blur-block {
+.hero-block-blur {
   position: relative;
   margin-top: 150px;
   opacity: 0;
@@ -22,126 +22,15 @@
     margin-top: 250px;
     margin-bottom: 50px;
   }
-  @media(min-width: $screen-xl) {
+  @media (min-width: $screen-xl) {
     margin-top: 300px;
     margin-bottom: 100px;
   }
+  &.hero-block-side {
+    @extend .hero-block-side;
+  }
 }
-.hero-blur-block-visible,
+.hero-block-blur-visible,
 .hero-blur-visible {
   opacity: 1.0;
 }
-
-.hero-block {
-  background-size: cover;
-  padding: 30px;
-}
-
-.hero-blur-block-side {
-  width: 400px;
-  margin-top: 0;
-  margin-left: 50px;
-  padding: 30px;
-
-  @media (max-width: $screen-sm) {
-    width: 100%;
-    margin: 0;
-  }
-  @media (min-width: $screen-lg) {
-    margin-bottom: 0;
-  }
-  @media (min-width: $screen-xl) {
-    width: 500px;
-    padding-top: 50px;
-    padding-bottom: 50px;
-    margin-bottom: 0;
-  }
-  @media (min-width: $screen-xxl) {
-    width: 600px;
-    padding-top: 140px;
-    padding-bottom: 140px;
-  }
-
-  .hero-block-description {
-    margin-top: 40px;
-    padding-top: 40px;
-    padding-bottom: 50px;
-    color: color('gray-700');
-    line-height: 1.4;
-    text-align: left;
-    text-shadow: none !important;
-    border-top: 1px solid color('gray-600');
-    border-bottom: 1px solid color('gray-600');
-
-    @media (max-width: $screen-sm) {
-      text-align: center;
-    }
-    @media (max-width: $screen-xs) {
-      border: 0;
-      padding-top: 20px;
-      padding-bottom: 20px;
-    }
-  }
-}
-
-.hero-block-title {
-  font-size: 35px;
-  color: color('white');
-  text-shadow: color('gray-700') 0 2px 10px !important;
-
-  @media (min-width: $screen-sm) {
-    font-size: 40px;
-  }
-  @media (min-width: $screen-lg) {
-    font-size: 50px;
-  }
-}
-.hero-block-description {
-  color: color('white');
-  text-shadow: color('gray-700') 0 1px 5px !important;
-}
-.hero-block-cta {
-  margin-top: 5px;
-
-  // for hero CTAs layout in between xs -> sm breakpoints
-  @media (max-width: 580px) {
-    width: 100%;
-  }
-}
-.hero-block-cta-justified {
-  width: 250px;
-}
-
-.hero-product-logo {
-  margin-left: 0;
-  padding-top: 40px;
-
-  @media (max-width: $screen-sm) {
-    position: relative;
-    padding: 0;
-    margin: auto;
-    width: 100%;
-    max-width: 500px;
-  }
-
-  .hero-product-details {
-    font-size: font-size(500);
-    padding: 30px 10px;
-
-    @media (max-width: $screen-sm) {
-      font-size: font-size(400);
-      padding: 20px 0;
-    }
-  }
-}
-.hero-product-logo-block {
-  height: 100px;
-}
-
-.hero-block-actions {
-  text-align: left;
-
-  @media (max-width: $screen-sm) {
-    text-align: center;
-  }
-}