staple 0.0.2

data/source/javascripts/staple/accordion.js

@@ -0,0 +1,5 @@
+$('.js-accordion-trigger').bind('click', function(e){
+  jQuery(this).parent().find('.submenu').slideToggle('fast');  // apply the toggle to the ul
+  jQuery(this).parent().toggleClass('is-expanded');
+  e.preventDefault();
+});

data/source/javascripts/staple/accordion_tabs.js

@@ -0,0 +1,19 @@
+$(document).ready(function () {
+  $('.accordion-tabs').each(function(index) {
+    $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
+  });
+
+  $('.accordion-tabs').on('click', 'li > a', function(event) {
+    if (!$(this).hasClass('is-active')) {
+      event.preventDefault();
+      var accordionTabs = $(this).closest('.accordion-tabs');
+      accordionTabs.find('.is-open').removeClass('is-open').hide();
+
+      $(this).next().toggleClass('is-open').toggle();
+      accordionTabs.find('.is-active').removeClass('is-active');
+      $(this).addClass('is-active');
+    } else {
+      event.preventDefault();
+    }
+  });
+});

data/source/javascripts/staple/accordion_tabs_minimal.js

@@ -0,0 +1,19 @@
+$(document).ready(function () {
+  $('.accordion-tabs-minimal').each(function(index) {
+    $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
+  });
+
+  $('.accordion-tabs-minimal').on('click', 'li > a', function(event) {
+    if (!$(this).hasClass('is-active')) {
+      event.preventDefault();
+      var accordionTabs = $(this).closest('.accordion-tabs-minimal')
+      accordionTabs.find('.is-open').removeClass('is-open').hide();
+
+      $(this).next().toggleClass('is-open').toggle();
+      accordionTabs.find('.is-active').removeClass('is-active');
+      $(this).addClass('is-active');
+    } else {
+      event.preventDefault();
+    }
+  });
+});

data/source/javascripts/staple/centered_navigation.js

@@ -0,0 +1,14 @@
+$(document).ready(function() {
+  var menu = $('.centered-navigation-menu');
+  var menuToggle = $('.centered-navigation-menu-button');
+  var signUp = $('.sign-up');
+
+  $(menuToggle).on('click', function(e) {
+    e.preventDefault();
+    menu.slideToggle(function(){
+      if(menu.is(':hidden')) {
+        menu.removeAttr('style');
+      }
+    });
+  });
+});

data/source/javascripts/staple/dropdown.js

@@ -0,0 +1,9 @@
+$(document).ready(function(){
+  $(".dropdown-button").click(function(){
+    $(".menu").toggleClass("show-menu");
+    $(".menu > li").click(function(){
+      $(".dropdown-button").html($(this).html());
+      $(".menu").removeClass("show-menu");
+    });
+  });  
+});

data/source/javascripts/staple/expander.js

@@ -0,0 +1,53 @@
+var Expander;
+
+Expander = (function() {
+  Expander.selector = '.expander';
+  Expander.toggleSelector = '.expander-toggle';
+  Expander.contentSelector = '.expander-content';
+  Expander.enhancedClass = 'js-expander';
+  Expander.expandedClass = 'expanded';
+
+  Expander.enhance = function() {
+    var thisClass;
+    thisClass = this;
+    return $(this.selector).each(function() {
+      return new thisClass(this).enhance();
+    });
+  };
+
+  function Expander(element) {
+    this._element = $(element);
+    this._toggleElement = this._element.find(this.constructor.toggleSelector);
+    this._contentElement = this._element.find(this.constructor.contentSelector);
+  }
+
+  Expander.prototype.enhance = function() {
+    this._element.addClass(this.constructor.enhancedClass);
+    this._buildUI();
+    return this._bindEvents();
+  };
+
+  Expander.prototype._buildUI = function() {
+    return this._contentElement.hide();
+  };
+
+  Expander.prototype._bindEvents = function() {
+    return this._toggleElement.click((function(_this) {
+      return function() {
+        return _this._toggleContent();
+      };
+    })(this));
+  };
+
+  Expander.prototype._toggleContent = function() {
+    this._contentElement.toggle();
+    return this._element.toggleClass(this.constructor.expandedClass);
+  };
+
+  return Expander;
+
+})();
+
+$(function() {
+  return Expander.enhance();
+});

data/source/javascripts/staple/navigation.js

@@ -0,0 +1,23 @@
+$(document).ready(function() {
+  var menu = $('#navigation-menu');
+  var menuToggle = $('#js-mobile-menu');
+  var signUp = $('.sign-up');
+
+  $(menuToggle).on('click', function(e) {
+    e.preventDefault();
+    menu.slideToggle(function(){
+      if(menu.is(':hidden')) {
+        menu.removeAttr('style');
+      }
+    });
+  });
+
+  // underline under the active nav item
+  $(".nav .nav-link").click(function() {
+    $(".nav .nav-link").each(function() {
+      $(this).removeClass("active-nav-item");
+    });
+    $(this).addClass("active-nav-item");
+    $(".nav .more").removeClass("active-nav-item");
+  });
+});

data/source/javascripts/staple/search_tools.js

@@ -0,0 +1,110 @@
+var Filter = (function() {
+  function Filter(element) {
+    this._element = $(element);
+    this._optionsContainer = this._element.find(this.constructor.optionsContainerSelector);
+  }
+
+  Filter.selector = '.filter';
+  Filter.optionsContainerSelector = '> div';
+  Filter.hideOptionsClass = 'hide-options';
+
+  Filter.enhance = function() {
+    var klass = this;
+
+    return $(klass.selector).each(function() {
+      return new klass(this).enhance();
+    });
+  };
+
+  Filter.prototype.enhance = function() {
+    this._buildUI();
+    this._bindEvents();
+  };
+
+  Filter.prototype._buildUI = function() {
+    this._summaryElement = $('<label></label>').
+      addClass('summary').
+      attr('data-role', 'summary').
+      prependTo(this._optionsContainer);
+
+    this._clearSelectionButton = $('<button></button>').
+      text('Clear').
+      attr('type', 'button').
+      insertAfter(this._summaryElement);
+
+    this._optionsContainer.addClass(this.constructor.hideOptionsClass);
+    this._updateSummary();
+  };
+
+  Filter.prototype._bindEvents = function() {
+    var self = this;
+
+    this._summaryElement.click(function() {
+      self._toggleOptions();
+    });
+
+    this._clearSelectionButton.click(function() {
+      self._clearSelection();
+    });
+
+    this._checkboxes().change(function() {
+      self._updateSummary();
+    });
+
+    $('body').click(function(e) {
+      var inFilter = $(e.target).closest(self.constructor.selector).length > 0;
+
+      if (!inFilter) {
+        self._allOptionsContainers().addClass(self.constructor.hideOptionsClass);
+      }
+    });
+  };
+
+  Filter.prototype._toggleOptions = function() {
+    this._allOptionsContainers().
+      not(this._optionsContainer).
+      addClass(this.constructor.hideOptionsClass);
+
+    this._optionsContainer.toggleClass(this.constructor.hideOptionsClass);
+  };
+
+  Filter.prototype._updateSummary = function() {
+    var summary = 'All';
+    var checked = this._checkboxes().filter(':checked');
+
+    if (checked.length > 0) {
+      summary = this._labelsFor(checked).join(', ');
+    }
+
+    this._summaryElement.text(summary);
+  };
+
+  Filter.prototype._clearSelection = function() {
+    this._checkboxes().each(function() {
+      $(this).prop('checked', false);
+    });
+
+    this._updateSummary();
+  };
+
+  Filter.prototype._checkboxes = function() {
+    return this._element.find(':checkbox');
+  };
+
+  Filter.prototype._labelsFor = function(inputs) {
+    return inputs.map(function() {
+      var id = $(this).attr('id');
+      return $("label[for='" + id + "']").text();
+    }).get();
+  };
+
+  Filter.prototype._allOptionsContainers = function() {
+    return $(this.constructor.selector + " " + this.constructor.optionsContainerSelector);
+  };
+
+  return Filter;
+})();
+
+$(function() {
+  Filter.enhance();
+});

data/source/javascripts/staple/sliding_menu.js

@@ -0,0 +1,13 @@
+$(document).ready(function(){
+  $('.js-menu-trigger').on('click touchstart', function(e){
+    $('.js-menu').toggleClass('is-visible');
+    $('.js-menu-screen').toggleClass('is-visible');
+    e.preventDefault();
+  });
+
+  $('.js-menu-screen').on('click touchstart', function(e){
+    $('.js-menu').toggleClass('is-visible');
+    $('.js-menu-screen').toggleClass('is-visible');
+    e.preventDefault();
+  });
+});

data/source/javascripts/staple/vertical_tabs.js

@@ -0,0 +1,32 @@
+$(".js-vertical-tab-content").hide();
+$(".js-vertical-tab-content:first").show();
+
+/* if in tab mode */
+$(".js-vertical-tab").click(function(event) {
+  event.preventDefault();
+
+  $(".js-vertical-tab-content").hide();
+  var activeTab = $(this).attr("rel");
+  $("#"+activeTab).show();
+
+  $(".js-vertical-tab").removeClass("is-active");
+  $(this).addClass("is-active");
+
+  $(".js-vertical-tab-accordion-heading").removeClass("is-active");
+  $(".js-vertical-tab-accordion-heading[rel^='"+activeTab+"']").addClass("is-active");
+});
+
+/* if in accordion mode */
+$(".js-vertical-tab-accordion-heading").click(function(event) {
+  event.preventDefault();
+
+  $(".js-vertical-tab-content").hide();
+  var accordion_activeTab = $(this).attr("rel");
+  $("#"+accordion_activeTab).show();
+
+  $(".js-vertical-tab-accordion-heading").removeClass("is-active");
+  $(this).addClass("is-active");
+
+  $(".js-vertical-tab").removeClass("is-active");
+  $(".js-vertical-tab[rel^='"+accordion_activeTab+"']").addClass("is-active");
+});

data/source/layouts/layout.erb

@@ -0,0 +1 @@
+<%= yield %>

data/source/refills-hero.html.erb

@@ -0,0 +1,7 @@
+<div class="refills-header">
+  <div class="refills-logo">
+    <img src="/images/refills-logo.svg" alt="Refills logo">
+  </div>
+  <h2><span>Refills</span> are prepackaged patterns and components, built on top of <a href="http://www.bourbon.io">Bourbon</a>, <a href="http://bitters.bourbon.io/">Bitters</a>, and <a href="http://neat.bourbon.io/">Neat</a>.</h2>
+  <p>Managed by <a href="http://www.thoughtbot.com">thoughtbot</a>, instructions at <a href="https://github.com/thoughtbot/refills">GitHub</a></p>
+</div>

data/source/refills-menu.html.erb

@@ -0,0 +1,5 @@
+<ul class="refills-menu">
+  <li class="menu-item patterns"><%= link_to 'Patterns', '/index.html' %></li>
+  <li class="menu-item components"><%= link_to 'Components', '/components.html' %></li>
+  <li class="menu-item type-systems"><%= link_to 'Type Systems', '/type-systems.html' %></li>
+</ul>

data/source/refills-page-scripts.html.erb

@@ -0,0 +1,66 @@
+<!-- Type System tabs -->
+<script>
+  var $tabs, $toggles, ACTIVE_CLASS;
+
+  ACTIVE_CLASS = 'js-is-active';
+
+  $tabs = $("[data-role='tab']");
+
+  $toggles = $tabs.find("[data-role='link']");
+
+  $toggles.on('click', function(event) {
+    var $tab, $toggle;
+    event.preventDefault();
+    $toggle = $(this);
+    $tab = $toggle.closest($tabs);
+    if (!$tab.hasClass(ACTIVE_CLASS)) {
+      $tabs.removeClass(ACTIVE_CLASS);
+      return $tab.addClass(ACTIVE_CLASS);
+    }
+  });
+</script>
+
+<!-- Show Code -->
+<script>
+  $('a.js-show-code').on('click', function(e){
+    $(this).hide();
+    $(this).siblings('.js-hide-code').css('display', 'inline-block');
+    $(this).parent().siblings('.snippets-table').show();
+    e.preventDefault();
+  })
+
+  $('a.js-hide-code').on('click', function(e) {
+    $(this).hide();
+    $(this).siblings('.js-show-code').css("display", "inline-block");
+    $(this).parent().siblings('.snippets-table').hide();
+    e.preventDefault();
+  });
+</script>
+
+<!-- Copy Code -->
+<script>
+  $(document).ready( function() {
+    client = new ZeroClipboard($('.copy-source'), {moviePath: '/images/ZeroClipboard.swf'})
+    client.on('dataRequested', function(client, args) {
+      code = $(this).siblings('pre').text();
+      client.setText(code);
+    });
+  });
+</script>
+
+<script>
+  $(document).ready(function(){
+
+    $('.js-menu-trigger-refills').on('click touchstart', function(e){
+      $('.er_toc').toggleClass('is-visible');
+      $('.js-menu-screen-refills').toggleClass('is-visible');
+      e.preventDefault();
+    });
+
+    $('.js-menu-screen-refills').on('click touchstart', function(e){
+      $('.er_toc').toggleClass('is-visible');
+      $('.js-menu-screen-refills').toggleClass('is-visible');
+      e.preventDefault();
+    });
+  });
+</script>

data/source/stylesheets/_bourbon-nav.scss

@@ -0,0 +1,86 @@
+$bourbon-nav-background-color: #5B5E63;
+
+nav.bourbon {
+  @include clearfix;
+  background-color: $bourbon-nav-background-color;
+  padding: 0 2em 0 1em;
+
+  @include media(max-width em(510)){
+    padding: 0;
+  };
+
+  ul {
+    text-align: center;
+
+    @include media(em(901)) {
+      float: left;
+      text-align: left;
+    };
+  }
+
+  li {
+    display: inline-block;
+  }
+
+  a {
+    background-position: 1em center;
+    background-repeat: no-repeat;
+    color: #fff;
+    display: inline-block;
+    font-weight: bold;
+    padding: 1em 1em 1em 3em;
+
+    @include media(max-width em(515)) {
+      padding: .75em .5em;
+      text-align: center;
+    };
+
+    @include media(max-width em(900)){
+      display: block;
+    };
+
+    &:hover {
+      background-color: darken($bourbon-nav-background-color, 10);
+      color: #fff;
+    }
+
+    &.current {
+      background-color: darken($bourbon-nav-background-color, 5);
+    }
+
+    $sites: bourbon, neat, bitters, refills;
+
+    @each $site in $sites {
+      &.#{$site} {
+        background-image: url('/images/bourbon-nav/#{$site}.png');
+
+        @include hidpi {
+          background-image: url('/images/bourbon-nav/#{$site}@2x.png');
+          background-size: 20%;
+        }
+
+        @include media(max-width em(515)) {
+          background-image: none;
+        };
+      }
+    }
+  }
+
+  h1 {
+    color: rgba(#fff, .6);
+    float: right;
+    font-size: 1em;
+
+    @include media(max-width em(900)){
+      display: none;
+    };
+
+    a {
+      padding: 1em 0;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+}