sparrow-theme 0.1.1 → 0.1.11

data/_sass/sparrow-theme/vendor/_vendor.scss

@@ -0,0 +1,3 @@
+@import
+  "normalize"
+;

data/assets/css/main.scss

@@ -0,0 +1,7 @@
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+
+@charset "utf-8";
+
+{% include_relative sparrow-theme.scss %}

data/assets/css/sparrow-theme.scss

@@ -0,0 +1,38 @@
+// General styles
+@import
+  "bourbon",
+  "neat",
+  "sparrow-theme/vendor/normalize",
+  "sparrow-theme/base/variables",
+  "sparrow-theme/base/mixins",
+  "sparrow-theme/base/base",
+  "sparrow-theme/layout/404",
+  "sparrow-theme/layout/footer",
+  "sparrow-theme/layout/header",
+  "sparrow-theme/layout/layout",
+  "sparrow-theme/layout/page",
+  "sparrow-theme/modules/button",
+  "sparrow-theme/modules/card",
+  "sparrow-theme/modules/heroBanner",
+  "sparrow-theme/modules/modal",
+  "sparrow-theme/modules/spinner",
+  "sparrow-theme/modules/video"
+;
+
+// Search styles
+{% if site.search %}
+@import "sparrow-theme/modules/navSearch";
+{% endif %}
+
+// Catalog site styles
+{% if site.catalog %}
+@import
+  "sparrow-theme/layout/catalog",
+  "sparrow-theme/layout/component",
+  "sparrow-theme/modules/carousel",
+  "sparrow-theme/modules/componentCard",
+  "sparrow-theme/modules/actionPrompt",
+  "sparrow-theme/modules/sideNav",
+  "sparrow-theme/modules/preview"
+;
+{% endif %}

data/assets/js/scripts.js

@@ -0,0 +1,5 @@
+---
+layout: #blank to overrride default layout
+---
+
+{% include_relative sparrow-theme/sparrow-theme.js %}

data/assets/js/sparrow-theme/_partials/carousel.js

@@ -0,0 +1,24 @@
+(function ($, root, undefined) {
+  'use strict';
+
+  $(function() {
+    var prevArrow = $('.carousel__control--prev');
+    var nextArrow = $('.carousel__control--next');
+
+    $('.carousel__slides').slick({
+      prevArrow: prevArrow,
+      nextArrow: nextArrow,
+      dots: true,
+      dotsClass: 'carousel__dots',
+      responsive: [
+        {
+          breakpoint: 700,
+          settings: {
+            arrows: false,
+          }
+        }
+      ]
+    });
+  });
+
+})(jQuery, this);

data/assets/js/sparrow-theme/_partials/catalog.js

@@ -0,0 +1,226 @@
+var ComponentCard = (function() {
+  'use strict';
+
+  function ComponentCard(data) {
+    this.url = data.url;
+    this.title = data.title;
+    this.categories = data.categories;
+    this.featured = data.featured;
+    this.image = data.image;
+    this.description = data.description;
+  }
+
+  ComponentCard.prototype.renderComponentCard = function() {
+    var truncatedDesctription = this.description.substring(0, 90);
+    var card =  '<a href="' + this.url + '" class="componentCard__item componentCard__item--faded">' +
+                  '<div class="componentCard__thumbnail" style="background-image: url(' + this.image + ');"></div>' +
+                  '<div class="componentCard__content">' +
+                    '<h3 class="componentCard__title">' + this.title + '</h3>' +
+                    '<p class="componentCard__description">' + truncatedDesctription + '...</p>' +
+                  '</div>' +
+                '</a>';
+    return card;
+  };
+
+  return ComponentCard;
+})();
+
+var Catalog = (function() {
+  'use strict';
+
+  function Catalog(element, data) {
+    this.data = data;
+    this.element = element;
+    this.catalogContent = this.element.find('.catalog__items');
+    this.filterLinks = this.element.find('.sideNav__link');
+    this.carousel = this.element.find('[data-content="carousel"]');
+    this.featuredContent = this.element.find('[data-content="featured"]');
+    this.newContent = this.element.find('[data-content="new"]');
+    this.featuredCollectionContent = this.element.find('[data-content="Featured Collections"]');
+    this.allCollectionContent = this.element.find('[data-content="All Collections"]');
+    this.filteredContent = this.element.find('[data-content="filtered"]');
+    this.filteredCardContainer = this.filteredContent.find('.componentCard');
+    this.filteredContentTitle = this.filteredContent.find('.catalog__title');
+    this.isMobile = window.matchMedia('(max-width: 700px)');
+
+    this.initialize();
+  }
+
+  Catalog.prototype.initialize = function() {
+    this.bindEvents();
+    this.showFeatured();
+    this.populateFromHistory();
+    this.animateCards();
+  };
+
+  Catalog.prototype.bindEvents = function() {
+    var self = this;
+
+    $('[data-filter]').click(function(e) {
+      var target = $(e.currentTarget);
+      var filterName = target.data('filter');
+      var filterValue = target.data('value');
+      var queryString = '?n=' + filterName + '&v=' + filterValue;
+
+      window.history.pushState({}, filterValue, queryString);
+      self.changeDisplay(filterName, filterValue);
+      self.scrollToContent();
+    });
+
+    window.onpopstate = function(event) {
+      self.populateFromHistory();
+    };
+  };
+
+  Catalog.prototype.scrollToContent = function() {
+    var scrollHeight = $('.heroBanner').height() - 50;
+    $(window).scrollTop(scrollHeight);
+  };
+
+  Catalog.prototype.showFeatured = function() {
+    this.resetDisplay();
+    this.catalogContent.append(this.carousel);
+    this.catalogContent.append(this.featuredContent);
+    this.catalogContent.append(this.newContent);
+
+    this.carousel.removeClass('catalog__section--hidden');
+    this.featuredContent.removeClass('catalog__section--hidden');
+    this.newContent.removeClass('catalog__section--hidden');
+    this.filterLinks.removeClass('sideNav__link--active');
+    this.carousel.removeClass('catalog__section--faded');
+
+    var featuredData = this.filterContent('featured', 'Featured Components', this.data);
+    var newData = this.filterContent('featured', 'New and Noteworthy', this.data);
+
+    this.renderComponentList(featuredData, this.featuredContent.find('.componentCard'), 2);
+    this.renderComponentList(newData, this.newContent.find('.componentCard'), 2);
+  };
+
+  Catalog.prototype.renderComponentList = function(data, container, limit) {
+    var self = this;
+    container.empty();
+
+    $.each(data, function(index, value){
+      var component = new ComponentCard(value);
+      var card = component.renderComponentCard();
+      container.append(card);
+      if (limit) return index < limit;
+    });
+
+    this.animateCards();
+  };
+
+  Catalog.prototype.animateCards = function() {
+    var index = 0;
+    var items = $('.componentCard__item');
+    var framesPerSecond = 30;
+
+    function animate() {
+      if (index <= items.length) {
+        setTimeout(function() {
+          window.requestAnimationFrame(animate);
+          $(items[index++]).removeClass('componentCard__item--faded');
+        }, 1000 / framesPerSecond);
+      }
+    }
+
+    animate();
+  };
+
+  Catalog.prototype.resetDisplay = function() {
+    $('.componentCard__item').addClass('componentCard__item--faded');
+    this.carousel = this.carousel.detach();
+    this.featuredContent = this.featuredContent.detach();
+    this.newContent = this.newContent.detach();
+    this.featuredCollectionContent = this.featuredCollectionContent.detach();
+    this.allCollectionContent = this.allCollectionContent.detach();
+    this.filteredContent = this.filteredContent.detach();
+    this.filterLinks.removeClass('sideNav__link--active');
+  };
+
+  Catalog.prototype.changeDisplay = function(filterName, filterValue) {
+    var selectedLink = $('.sideNav__link[data-value="' + filterValue + '"]');
+
+    this.resetDisplay();
+    selectedLink.addClass('sideNav__link--active');
+
+    if (filterValue === 'Featured Collections') {
+      this.catalogContent.html(this.featuredCollectionContent);
+      this.featuredCollectionContent.removeClass('catalog__section--hidden');
+      this.animateCards();
+
+    } else if (filterValue === 'All Collections') {
+      this.catalogContent.html(this.allCollectionContent);
+      this.allCollectionContent.removeClass('catalog__section--hidden');
+      this.animateCards();
+
+    } else {
+      this.catalogContent.html(this.filteredContent);
+      this.filteredContent.removeClass('catalog__section--hidden');
+      var filteredData = this.filterContent(filterName, filterValue, this.data);
+      this.renderComponentList(filteredData, this.filteredCardContainer);
+    }
+  };
+
+  Catalog.prototype.search = function(query) {
+    var self = this;
+    var results = window.idx.search(query);
+    var searchEntries = [];
+    this.resetDisplay();
+    this.catalogContent.append(this.filteredContent);
+    this.filteredContent.removeClass('catalog__section--hidden');
+
+    window.data.then(function(loaded_data) {
+
+      if (results.length) {
+        results.forEach(function(result) {
+          searchEntries.push(loaded_data[result.ref]);
+        });
+
+        self.filteredContentTitle.text('Results for ' + query);
+        self.renderComponentList(searchEntries, self.filteredCardContainer);
+        self.animateCards();
+      } else {
+        self.filteredContentTitle.text('No results found for ' + query);
+      }
+
+      self.scrollToContent();
+    });
+  };
+
+  Catalog.prototype.populateFromHistory = function() {
+    var uri = new URI(window.location.search.toString());
+    var queryString = uri.search(true);
+
+    if (queryString.hasOwnProperty('n') && queryString.hasOwnProperty('v')) {
+      this.changeDisplay(queryString.n.toString(), queryString.v.toString());
+      if (this.isMobile.matches) this.scrollToContent();
+    } else if (queryString.hasOwnProperty('q')) {
+      this.search(queryString.q.toString());
+    } else {
+      this.showFeatured();
+    }
+  };
+
+  Catalog.prototype.filterContent = function(filterName, filterValue, data) {
+    this.filteredContentTitle.text(filterValue);
+
+    var filteredData = data.filter(function(n, i) {
+      var data = n[filterName].split(', ');
+      return data.indexOf(filterValue) !== -1;
+    });
+
+    return filteredData;
+  };
+
+  return Catalog;
+})();
+
+$(function() {
+  // Only run for catalog pages
+  if ($('.catalog').length) {
+    window.data.then(function(data) {
+      var catalog = new Catalog($('.catalog'), data);
+    });
+  }
+});

data/assets/js/sparrow-theme/_partials/copyInput.js

@@ -0,0 +1,107 @@
+var CopyNotification = (function() {
+  'use strict';
+
+  function CopyNotification(message) {
+    this.message = message;
+    this.copyInput = $('.copyInput');
+  }
+
+  CopyNotification.prototype.render = function() {
+    var copyNotification = '<div class="copyInput__notification">' + this.message + '</div>';
+    return copyNotification;
+  };
+
+  CopyNotification.prototype.animate = function() {
+    var animationEnd = 'webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend';
+    var notification = this.copyInput.find('.copyInput__notification');
+    var fired = false;
+    notification.addClass('copyInput__notification--animating');
+
+    notification.one(animationEnd, function(e) {
+      if (!fired) {
+        fired = true;
+        notification.remove();
+      }
+    });
+  };
+
+  return CopyNotification;
+})();
+
+var CopyInput = (function() {
+  function CopyInput(element) {
+    this.element = element;
+    this.copyButton = this.element.find('.copyInput__button');
+    this.copyInputText = this.element.find('.copyInput__input');
+    this.copyInputClass = '.' + this.element.attr('class');
+    this.copyInputTextClass = this.copyInputText.attr('class');
+    this.bindEvents();
+  }
+
+  CopyInput.prototype.bindEvents = function() {
+    var self = this;
+    this.copyButton.on('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      var copyTextParent = self.getClosest(this, self.copyInputClass);
+      var copyText = self.getChild(copyTextParent, self.copyInputTextClass);
+      self.copyToClipboard(copyText);
+    });
+
+    this.copyInputText.focus(function() {
+      $(this).select();
+    });
+  };
+
+  CopyInput.prototype.getClosest = function(elem, selector) {
+    var firstChar = selector.charAt(0);
+
+    // Get closest match
+    for (; elem && elem !== document; elem = elem.parentNode) {
+      if (firstChar === '.' ) {
+        if (elem.classList.contains(selector.substr(1))) {
+          return elem;
+        }
+      }
+    }
+    return false;
+  };
+
+  CopyInput.prototype.getChild = function(elem, selector) {
+    for (var i = 0; i < elem.childNodes.length; i++) {
+      if (elem.childNodes[i].className == selector) {
+        return elem.childNodes[i];
+      }
+    }
+  };
+
+  CopyInput.prototype.copyToClipboard = function(copyText) {
+    window.getSelection().removeAllRanges();
+    var range = document.createRange();
+    range.selectNode(copyText);
+    window.getSelection().addRange(range);
+
+    try {
+      var successful = document.execCommand('copy');
+      var msg = successful ? 'copied' : 'not copied';
+      var copyNotification = new CopyNotification(msg);
+      $('.copyInput__notification').remove();
+
+      this.copyButton.append(copyNotification.render());
+      copyNotification.animate();
+
+    } catch(err) {
+      alert('Oops, unable to copy');
+    }
+
+    window.getSelection().removeAllRanges();
+  };
+
+  return CopyInput;
+})();
+
+$(function() {
+  if ($('.copyInput').length) {
+    new CopyInput($('.copyInput'));
+  }
+});

data/assets/js/sparrow-theme/_partials/getData.js

@@ -0,0 +1,23 @@
+(function ($, root, undefined) {
+  'use strict';
+
+  // Initalize lunr with the fields it will be searching on
+  window.idx = lunr(function() {
+    this.ref('id');
+    {% for field in site.search.fields %}
+    this.field('{{ field.title }}'{% if field.boost %}, {boost: {{ field.boost }}}{% endif %});
+    {% endfor %}
+  });
+
+  // Download the data from the JSON file we generated
+  window.data = $.getJSON('{{ site.search.data-url }}');
+
+  // Wait for the data to load and add it to lunr
+  window.data.then(function(loaded_data){
+    $.each(loaded_data, function(index, value){
+      window.idx.add(
+        $.extend({ "id": index }, value)
+      );
+    });
+  });
+})(jQuery, this);