Timber Tutorial | Final JS File

timber-js-final

/* Simple jQuery Equal Heights @version 1.5.1. Copyright (c) 2013 Matt Banks. Dual licensed under the MIT and GPL licenses. */
!function(a){a.fn.equalHeights=function(){var b=0,c=a(this);return c.each(function(){var c=a(this).innerHeight();c>b&&(b=c)}),c.css("height",b)},a("[data-equal]").each(function(){var b=a(this),c=b.data("equal");b.find(c).equalHeights()})}(jQuery);

window.timber = window.timber || {};

timber.cache = {
  // General
  html: $('html'),
  body: $('body'),
  equalHeight: $('.equal-height'),
  breadcrumbs: $('.breadcrumb'),

  // Navigation
  menuToggle: $('.menu-toggle'),

  // Home Page
  carousel: $('.flexslider'),

  // Product Page
  mainImage: $('#productPhotoImg'),
  thumbImages: $('#productThumbs').find('a.product-photo-thumb'),
  newImage: null,
  shareButtons: $('.social-sharing'),

  // Collection Pages
  collectionFilters: $('#collectionFilters'),
  toggleFilterBtn: $('#toggleFilters')
}

timber.init = function () {
  timber.cache.html.removeClass('no-js').addClass('js');

  // Run on load
  timber.toggleMenu();
  timber.flexslider();
  timber.productImageSwitch();
  timber.equalHeights();
  timber.toggleFilters();

  timber.socialSharing();
}

timber.toggleMenu = function () {
  timber.cache.menuToggle.on('click', function() {
    timber.cache.body.toggleClass('show-nav');
  });
}

timber.flexslider = function () {
  if ( timber.cache.carousel.length ) {
    timber.cache.carousel.flexslider({
      animation: 'slide',
      slideshowSpeed: 5500,
      animationSpeed: 500,
      pauseOnHover: true,
      keyboard: false
    });
  }
}

timber.productImageSwitch = function () {
  if ( !timber.cache.thumbImages.length ) {
    return;
  }

  // Switch the main image with one of the thumbnails
  // Note: this does not change the variant selected, just the image
  timber.cache.thumbImages.on('click', function(e) {
    e.preventDefault();
    timber.cache.newImage = $(this).attr('href');
    timber.cache.mainImage.attr({ src: timber.cache.newImage });
  });
}

timber.socialSharing = function () {
  var permalink = timber.cache.shareButtons.data('permalink'),
      shareButtons = timber.cache.shareButtons.find('a'),
      socialCounts = timber.cache.shareButtons.find('span.share-count');

  {% if settings.social_sharing_products or settings.social_sharing_blog %}
    // Get share stats from respective APIs

    var fbLink = $('.share-facebook'),
        twitLink = $('.share-twitter'),
        pinLink = $('.share-pinterest'),
        googleLink = $('.share-google'),
        fbShares, twitShares, pinShares, googleShares;

    if ( fbLink.length ) {
      $.getJSON('//graph.facebook.com/?id=' + permalink + '&callback=?', function(data) {
        fbShares = data.shares;
        if (!fbShares) {
          fbShares = 0;
        }
        fbLink.find('.share-count').text(fbShares).addClass('is-loaded');
      });
    };

    if ( twitLink.length ) {
      $.getJSON('//cdn.api.twitter.com/1/urls/count.json?url=' + permalink + '&callback=?', function(data) {
        twitShares = data.count;
        twitLink.find('.share-count').text(twitShares).addClass('is-loaded');
      });
    };

    if ( pinLink.length ) {
      $.getJSON('//api.pinterest.com/v1/urls/count.json?url=' + permalink + '&callback=?', function(data) {
        pinShares = data.count;
        pinLink.find('.share-count').text(pinShares).addClass('is-loaded');
      });
    };

    if ( googleLink.length ) {
      // Can't currently get Google+ count with JS
      googleLink.find('.share-count').addClass('is-loaded');
    };
  {% endif %}

  {% if settings.social_sharing_products or settings.social_sharing_blog %}
    // Share popups
    shareButtons.on('click', function(e) {
      e.preventDefault();
      var el = $(this),
          popup = el.attr('class'),
          link = el.attr('href'),
          w = 700,
          h = 400;

      // Set popup sizes
      switch (popup) {
        case 'share-twitter':
          h = 300;
          break;
        case 'share-fancy':
          w = 480;
          h = 720;
          break;
        case 'share-google':
          w = 500;
          break;
      }

      window.open(link, popup, 'width=' + w + ', height=' + h);
    });
  {% endif %}
}

timber.equalHeights = function () {
  if ( timber.cache.equalHeight.length ) {
    // Short timeout to let fonts load
    setTimeout(function() {
      timber.cache.equalHeight.equalHeights();
    }, 200);
  }
}

timber.toggleFilters = function () {
  if ( !timber.cache.collectionFilters.length ) {
    return;
  }

  timber.cache.toggleFilterBtn.on('click', function() {
    timber.cache.toggleFilterBtn.toggleClass('is-active');
    timber.cache.collectionFilters.slideToggle(200);

    // Scroll to top of filters if user is down the page a bit
    if ( $(window).scrollTop() > timber.cache.breadcrumbs.offset().top ) {
      $('html, body').animate({
        scrollTop: timber.cache.breadcrumbs.offset().top
      });
    }
  });
}

// Initialize Timber's JS on docready
$(function() {
  window.timber.init();
});