Matthew Burrows mattjburrows

## Require JS global property module
define(function() {
    // Set the privately scoped object.
    // Its properties are modified via the get / set methods returned from the module.
    // We can keep values private by setting the 'private' part to true and set the 'value' part as the property value.
    var helper = {
            foo: {
                'private': true,
                'value': 'Private var'
            },
            classes: {

## CSS animation and transition listeners
var CSSListeners = function(opts) {
        this._init(opts);
    };
    CSSListeners.prototype.addEvent = function(el, cb) {
        var self = this;
        el.addEventListener(this.prefix, cb, false);
    };
    CSSListeners.prototype.removeEvent = function(el, cb) {
        var self = this;
        el.removeEventListener(this.prefix, cb, false);

## JS prefix generator
function getPrefix(prefixes) {
    var div = document.createElement('div');
    // Check to see if we are dealing with an array.
    if(Object.prototype.toString.call(prefixes) === '[object Array]') {
        var max = prefixes.length;
        while(max--) {
            if(prefixes[max] in div.style) {
                return prefixes[max];
            }
        }

## Swipe listeners
SwipeControl = function (opts) {
    this.opts = opts;
    this._init(opts);
};
SwipeControl.prototype.setListeners = function () {
    var self       = this,
        hasTouch   = 'ontouchstart' in window,
        startEvent = hasTouch ? 'touchstart' : 'mousedown',
        moveEvent  = hasTouch ? 'touchmove' : 'mousemove',
        endEvent   = hasTouch ? 'touchend' : 'mouseup';

## index.html (snippet 1.1)
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;" charset="utf-8">
        <title>CSS3 Animated Swipe Gallery</title>
        <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no">
        <!-- Here is where we include the stylesheet. -->
        <link rel="stylesheet" href="screen.css">
    </head>
    <body>

## app.js (snippet 2.1)
(function(window, document, undefined) {

    // Variable that we are going to store our functionality onto.
    var App = {};
    // Store the slide count.
    App.slideCount = 8;
    // Store a reference to the active slide.
    App.active = 0;
    // Store references to CSS classes for easy maintenance.
    App.classes = {

## screen.css (snippet 3.1)
// Gallery specific styles.
.gallery-module {
  position: relative;
  background-color: #fafafa;
  border-bottom: 1px solid white;
}
.gallery-module .gallery-module__wrapper {
  *zoom: 1;
}
.gallery-module .gallery-module__wrapper:before,

## app.js (snippet 4.1)
/*
 *
 * Add this under App.animating property declaration.
 *
 */
App.SwipeControl = function (opts) {
    this.opts = opts;
    this._init(opts);
};
App.SwipeControl.prototype.setListeners = function () {

## app.js (snippet 5.1)
/*
 *
 * Add the following functions above the var App = {}; declaration.
 *
 */
function fetchComputedStyle(el, prop, pseudo) {
    return window.getComputedStyle(el, (pseudo || null)).getPropertyValue(prop);
};

function calculateAspectRatio(width, height, ar) {

## Rem mixin
@mixin rem($property, $px, $base: 16px) {
    // Convert the baseline into rems
    $rem: $base / 1rem;
    // Print the first line in pixel values
    #{$property}: $px;
    // If there is only one (numeric) value, return the property/value line for it.
    @if type-of($px) == "number" {
        #{$property}: $px / $rem;
    }
    @else {
	define(function() {
	// Set the privately scoped object.
	// Its properties are modified via the get / set methods returned from the module.
	// We can keep values private by setting the 'private' part to true and set the 'value' part as the property value.
	var helper = {
	foo: {
	'private': true,
	'value': 'Private var'
	},
	classes: {
	var CSSListeners = function(opts) {
	this._init(opts);
	};
	CSSListeners.prototype.addEvent = function(el, cb) {
	var self = this;
	el.addEventListener(this.prefix, cb, false);
	};
	CSSListeners.prototype.removeEvent = function(el, cb) {
	var self = this;
	el.removeEventListener(this.prefix, cb, false);
	function getPrefix(prefixes) {
	var div = document.createElement('div');
	// Check to see if we are dealing with an array.
	if(Object.prototype.toString.call(prefixes) === '[object Array]') {
	var max = prefixes.length;
	while(max--) {
	if(prefixes[max] in div.style) {
	return prefixes[max];
	}
	}
	SwipeControl = function (opts) {
	this.opts = opts;
	this._init(opts);
	};
	SwipeControl.prototype.setListeners = function () {
	var self = this,
	hasTouch = 'ontouchstart' in window,
	startEvent = hasTouch ? 'touchstart' : 'mousedown',
	moveEvent = hasTouch ? 'touchmove' : 'mousemove',
	endEvent = hasTouch ? 'touchend' : 'mouseup';
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html;" charset="utf-8">
	<title>CSS3 Animated Swipe Gallery</title>
	<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no">
	<!-- Here is where we include the stylesheet. -->
	<link rel="stylesheet" href="screen.css">
	</head>
	<body>
	(function(window, document, undefined) {

	// Variable that we are going to store our functionality onto.
	var App = {};
	// Store the slide count.
	App.slideCount = 8;
	// Store a reference to the active slide.
	App.active = 0;
	// Store references to CSS classes for easy maintenance.
	App.classes = {
	// Gallery specific styles.
	.gallery-module {
	position: relative;
	background-color: #fafafa;
	border-bottom: 1px solid white;
	}
	.gallery-module .gallery-module__wrapper {
	*zoom: 1;
	}
	.gallery-module .gallery-module__wrapper:before,
	/*
	*
	* Add this under App.animating property declaration.
	*
	*/
	App.SwipeControl = function (opts) {
	this.opts = opts;
	this._init(opts);
	};
	App.SwipeControl.prototype.setListeners = function () {
	/*
	*
	* Add the following functions above the var App = {}; declaration.
	*
	*/
	function fetchComputedStyle(el, prop, pseudo) {
	return window.getComputedStyle(el, (pseudo \|\| null)).getPropertyValue(prop);
	};

	function calculateAspectRatio(width, height, ar) {
	@mixin rem($property, $px, $base: 16px) {
	// Convert the baseline into rems
	$rem: $base / 1rem;
	// Print the first line in pixel values
	#{$property}: $px;
	// If there is only one (numeric) value, return the property/value line for it.
	@if type-of($px) == "number" {
	#{$property}: $px / $rem;
	}
	@else {