jonchretien/card-flipper.html

## card-flipper.html
<!doctype html>
<html>
  <head>
    <title>Card Effects</title>
    <meta charset="UTF-8">
    <style>
    * {
      margin: 0;
      padding: 0;
    }

    .shell {
      font-size: 0;
    }

    .card-container {
      display: inline-block;
      height: 50px;
      position: relative;
      width: 25%;
      -webkit-perspective: 800px;
         -moz-perspective: 800px;
          -ms-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
    }

    .card {
      height: 100%;
      position: absolute;
      width: 100%;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
          -ms-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
          -ms-transition: -ms-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
    }

    .card.flipped {
      -webkit-transform: rotateY(180deg);
         -moz-transform: rotateY(180deg);
          -ms-transform: rotateY(180deg);
           -o-transform: rotateY(180deg);
              transform: rotateY(180deg);
    }

    .card figure {
      display: block;
      height: 100%;
      line-height: 260px;
      position: absolute;
      text-align: center;
      width: 100%;
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
          -ms-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }

    .card .back {
      -webkit-transform: rotateY(180deg);
         -moz-transform: rotateY(180deg);
          -ms-transform: rotateY(180deg);
           -o-transform: rotateY(180deg);
              transform: rotateY(180deg);
    }
    </style>
  </head>
  <body>

    <div class="shell"></div>

    <template id="card-template">
      <section class="card-container">
        <div class="card">
          <figure class="front"></figure>
          <figure class="back"></figure>
        </div>
      </section>
    </template>

    <script>
      (function() {

        'use strict';

        /**
         * @overview Triggers animation for cards.
         */
        var CardFlipper = {

          /**
           * Contains defaults.
           * @type {Object}
           */
          config: {
            cards: 150,
            error: 'Oh snap! Your browser doesn\'t support HTML templates.',
            fx: 'flipped',
            template: 'card-template',
            wrapper: '.shell'
          },

          /**
           * Sets up Initializer.
           */
          init: function() {
            // store variables
            this.cards = this.config.cards;
            this.error = this.config.error;
            this.fx = this.config.fx;
            this.template = this.config.template;
            this.wrapper = document.querySelector(this.config.wrapper);

            this.detectFeatureSupport();
          },

          /**
           * Detects template support.
           */
          detectTemplateSupport: function() {
            return 'content' in document.createElement('template');
          },

          /**
           * Runs support tests to determine if app will work with the user's browser.
           * Displays alerts if browser doesn't meet requirements.
           */
          detectFeatureSupport: function() {
            if (this.detectTemplateSupport()) {
              this.run();
            } else {
              this.displayErrorMessage();
            }
          },

          /**
           * Displays error message if browser doesn't meet requirements.
           */
          displayErrorMessage: function() {
            var heading = document.createElement('h1');
            heading.appendChild(document.createTextNode(this.error));
            document.querySelector('body').appendChild(heading);
          },

          /**
           * Runs app.
           */
          run: function() {
            this.insertTemplateContent(this.template, this.cards);
            this.bindEventHandlers();
          },

          /**
           * Generates multiple elements based off of template tag.
           *
           * @param {String} template - DOM id.
           * @param {Number} num - The number of elements to generate.
           */
          insertTemplateContent: function(template, num) {
            var fragment = document.createDocumentFragment(),
                tmpl = document.getElementById(template),
                cloned;

            for (var i = 0; i < num; i++) {
              cloned = tmpl.content.cloneNode(true);
              fragment.appendChild(cloned);
            }

            this.wrapper.appendChild(fragment);
          },

          /**
           * Handles event delegation.
           */
          bindEventHandlers: function() {
            this.wrapper.addEventListener('mouseover', this.getEventTarget.bind(this), false);
          },

          /**
           * Detects the target element.
           * Firefox and IE access the target element different.
           * e.target, and event.srcElement, respectively.
           *
           * @param {Object} event - The event triggered.
           */
          getEventTarget: function(event) {
            var target = event ? event.target : window.event.srcElement;
            if (target.tagName.toLowerCase() === 'figure') {
              this.flipCards(event.target.parentNode);
            }
          },

          /**
           * Stores a series of colors and keeps track of which one was used last.
           *
           * @returns {String}
           */
          getNextColor: function() {
            if (typeof(this.count) === 'undefined') {
              this.count = 0;
            }
            var colors = ['#aa4643', '#89a54e', '#80699b', '#3d96ae', '#db843d', '#92a8cd', '#a47d7c', '#b5ca92', '#4572a7'];
            return colors[this.count++ % colors.length];
          },

          /**
           * Applies animation effects to cards.
           *
           * @param {Object} el - The target element.
           */
          flipCards: function(el) {
            el.style.backgroundColor = this.getNextColor();
            el.classList.toggle(this.fx);
          }

        };

        document.addEventListener('DOMContentLoaded', function() {
          CardFlipper.init();
        }, false);

      })();
    </script>

  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Card Effects</title>
	<meta charset="UTF-8">
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	.shell {
	font-size: 0;
	}

	.card-container {
	display: inline-block;
	height: 50px;
	position: relative;
	width: 25%;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-ms-perspective: 800px;
	-o-perspective: 800px;
	perspective: 800px;
	}

	.card {
	height: 100%;
	position: absolute;
	width: 100%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-ms-transition: -ms-transform 1s;
	-o-transition: -o-transform 1s;
	transition: transform 1s;
	}

	.card.flipped {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
	}

	.card figure {
	display: block;
	height: 100%;
	line-height: 260px;
	position: absolute;
	text-align: center;
	width: 100%;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	}

	.card .back {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
	}
	</style>
	</head>
	<body>

	<div class="shell"></div>

	<template id="card-template">
	<section class="card-container">
	<div class="card">
	<figure class="front"></figure>
	<figure class="back"></figure>
	</div>
	</section>
	</template>

	<script>
	(function() {

	'use strict';

	/**
	* @overview Triggers animation for cards.
	*/
	var CardFlipper = {

	/**
	* Contains defaults.
	* @type {Object}
	*/
	config: {
	cards: 150,
	error: 'Oh snap! Your browser doesn\'t support HTML templates.',
	fx: 'flipped',
	template: 'card-template',
	wrapper: '.shell'
	},

	/**
	* Sets up Initializer.
	*/
	init: function() {
	// store variables
	this.cards = this.config.cards;
	this.error = this.config.error;
	this.fx = this.config.fx;
	this.template = this.config.template;
	this.wrapper = document.querySelector(this.config.wrapper);

	this.detectFeatureSupport();
	},

	/**
	* Detects template support.
	*/
	detectTemplateSupport: function() {
	return 'content' in document.createElement('template');
	},

	/**
	* Runs support tests to determine if app will work with the user's browser.
	* Displays alerts if browser doesn't meet requirements.
	*/
	detectFeatureSupport: function() {
	if (this.detectTemplateSupport()) {
	this.run();
	} else {
	this.displayErrorMessage();
	}
	},

	/**
	* Displays error message if browser doesn't meet requirements.
	*/
	displayErrorMessage: function() {
	var heading = document.createElement('h1');
	heading.appendChild(document.createTextNode(this.error));
	document.querySelector('body').appendChild(heading);
	},

	/**
	* Runs app.
	*/
	run: function() {
	this.insertTemplateContent(this.template, this.cards);
	this.bindEventHandlers();
	},

	/**
	* Generates multiple elements based off of template tag.
	*
	* @param {String} template - DOM id.
	* @param {Number} num - The number of elements to generate.
	*/
	insertTemplateContent: function(template, num) {
	var fragment = document.createDocumentFragment(),
	tmpl = document.getElementById(template),
	cloned;

	for (var i = 0; i < num; i++) {
	cloned = tmpl.content.cloneNode(true);
	fragment.appendChild(cloned);
	}

	this.wrapper.appendChild(fragment);
	},

	/**
	* Handles event delegation.
	*/
	bindEventHandlers: function() {
	this.wrapper.addEventListener('mouseover', this.getEventTarget.bind(this), false);
	},

	/**
	* Detects the target element.
	* Firefox and IE access the target element different.
	* e.target, and event.srcElement, respectively.
	*
	* @param {Object} event - The event triggered.
	*/
	getEventTarget: function(event) {
	var target = event ? event.target : window.event.srcElement;
	if (target.tagName.toLowerCase() === 'figure') {
	this.flipCards(event.target.parentNode);
	}
	},

	/**
	* Stores a series of colors and keeps track of which one was used last.
	*
	* @returns {String}
	*/
	getNextColor: function() {
	if (typeof(this.count) === 'undefined') {
	this.count = 0;
	}
	var colors = ['#aa4643', '#89a54e', '#80699b', '#3d96ae', '#db843d', '#92a8cd', '#a47d7c', '#b5ca92', '#4572a7'];
	return colors[this.count++ % colors.length];
	},

	/**
	* Applies animation effects to cards.
	*
	* @param {Object} el - The target element.
	*/
	flipCards: function(el) {
	el.style.backgroundColor = this.getNextColor();
	el.classList.toggle(this.fx);
	}

	};

	document.addEventListener('DOMContentLoaded', function() {
	CardFlipper.init();
	}, false);

	})();
	</script>

	</body>
	</html>