greypants

UPDATE: It's a gem!

This helper has finally been moved into a gem called nav_lynx!

https://github.com/vigetlabs/nav_lynx

http://rubygems.org/gems/nav_lynx

Thanks to @brianjlandau and @reagent for getting that set up and tested!

Behold, the nav_link:

greypants

// Full Blog Post: http://viget.com/extend/time-based-animation
// requestAnimationFrame() polyfill: https://gist.github.com/1579671

window.APP = window.APP || {};

APP.pause = function() {
	window.cancelAnimationFrame(APP.core.animationFrame);
};

APP.play = function() {

greypants

/* 
	Check scroll position on a timer
	Instead it's much better to use some form of a timer to check every X milliseconds OR to attach a scroll event and only run your code after a delay (or even after a given number of executions - and then a delay).
	http://ejohn.org/blog/learning-from-twitter/
*/
var didScroll = false;

var handleScroll = function() {
	if ( didScroll ) {
		didScroll = false;

greypants

var preloadImages = function(imageSources, callback) {

	var images = [];

	var tryCallback = function() {
		var allImagesLoaded = (function(){
			for (var i = images.length; i--;) {
				if(!images[i].isLoaded){
					return false;
				}

greypants

Basic Tracking

data-track

To add basic event tracking to an element on the page, add this attribute with the appropriate values you'd like to send, separated by pipes |.

<button data-track="category|action|opt_label|opt_value|opt_noninteraction">
	Basic Tracking
</button>

Optional attributes

greypants

function jsonEqual (a, b) {
  return JSON.stringify(a) === JSON.stringify(b)
}

function originalIfUnchanged(state, nextState) {
  if(state === nextState) {
    return state
  }

  return jsonEqual(state, nextState) ? state : nextState

greypants

// ======================================================================
// Animation.scss
// - Contains helpers for keyframes animation in css3
// - Only functionally with Sass 3.2.0 Alpha and Compass 0.13.alpha
// ======================================================================

@mixin animation-name($name) {
  -webkit-animation-name: $name;
  -moz-animation-name: $name;
  -ms-animation-name: $name;

greypants

<button class="button -blue -large -rounded overrides -disable -right">I'm a button!</button>

greypants

/*
 * 'Highly configurable' mutable plugin boilerplate
 * Author: @markdalgleish
 * Further changes, comments: @addyosmani
 * Licensed under the MIT license
 */

// Note that with this pattern, as per Alex Sexton's, the plugin logic
// hasn't been nested in a jQuery plugin. Instead, we just use
// jQuery for its instantiation.

greypants

APP = {
	init: function() {
		// Check for controller and action js
		var body = document.body;
		var controllerJs = this[body.getAttribute("data-controller")];
		var actionJs = controllerJs ? controllerJs[body.getAttribute("data-action")] : false;

		// Cache global vars
		this.$body = $(body);