new version 0.9

complete overhaul  of most elements

app/Editor/assets/js/AnimOnScroll.js

@@ -0,0 +1,178 @@
+/**
+ * animOnScroll.js v1.0.0
+ * http://www.codrops.com
+ *
+ * Licensed under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ * 
+ * Copyright 2013, Codrops
+ * http://www.codrops.com
+ */
+;( function( window ) {
+
+	'use strict';
+
+	var docElem = window.document.documentElement;
+
+	function getViewportH() {
+		var client = docElem['clientHeight'],
+			inner = window['innerHeight'];
+
+		if( client < inner )
+			return inner;
+		else
+			return client;
+	}
+
+	function scrollY() {
+		return window.pageYOffset || docElem.scrollTop;
+	}
+
+	// http://stackoverflow.com/a/5598797/989439
+	function getOffset( el ) {
+		var offsetTop = 0, offsetLeft = 0;
+		do {
+			if ( !isNaN( el.offsetTop ) ) {
+				offsetTop += el.offsetTop;
+			}
+			if ( !isNaN( el.offsetLeft ) ) {
+				offsetLeft += el.offsetLeft;
+			}
+		} while( el = el.offsetParent )
+
+		return {
+			top : offsetTop,
+			left : offsetLeft
+		}
+	}
+
+	function inViewport( el, h ) {
+		var elH = el.offsetHeight,
+			scrolled = scrollY(),
+			viewed = scrolled + getViewportH(),
+			elTop = getOffset(el).top,
+			elBottom = elTop + elH,
+			// if 0, the element is considered in the viewport as soon as it enters.
+			// if 1, the element is considered in the viewport only when it's fully inside
+			// value in percentage (1 >= h >= 0)
+			h = h || 0;
+
+		return (elTop + elH * h) <= viewed && (elBottom - elH * h) >= scrolled;
+	}
+
+	function extend( a, b ) {
+		for( var key in b ) { 
+			if( b.hasOwnProperty( key ) ) {
+				a[key] = b[key];
+			}
+		}
+		return a;
+	}
+
+	function AnimOnScroll( el, options ) {	
+		this.el = el;
+		this.options = extend( this.defaults, options );
+		this._init();
+	}
+
+	AnimOnScroll.prototype = {
+		defaults : {
+			// Minimum and a maximum duration of the animation (random value is chosen)
+			minDuration : 0,
+			maxDuration : 0,
+			// The viewportFactor defines how much of the appearing item has to be visible in order to trigger the animation
+			// if we'd use a value of 0, this would mean that it would add the animation class as soon as the item is in the viewport. 
+			// If we were to use the value of 1, the animation would only be triggered when we see all of the item in the viewport (100% of it)
+			viewportFactor : 0
+		},
+		_init : function() {
+			this.items = Array.prototype.slice.call( document.querySelectorAll( '#' + this.el.id + ' > li' ) );
+			this.itemsCount = this.items.length;
+			this.itemsRenderedCount = 0;
+			this.didScroll = false;
+
+			var self = this;
+
+			imagesLoaded( this.el, function() {
+
+				// initialize masonry
+				new Masonry( self.el, {
+					itemSelector: 'li',
+					transitionDuration : 0
+				} );
+
+				if( Modernizr.cssanimations ) {
+					// the items already shown...
+					self.items.forEach( function( el, i ) {
+						if( inViewport( el ) ) {
+							self._checkTotalRendered();
+							classie.add( el, 'shown' );
+						}
+					} );
+
+					// animate on scroll the items inside the viewport
+					window.addEventListener( 'scroll', function() {
+						self._onScrollFn();
+					}, false );
+					window.addEventListener( 'resize', function() {
+						self._resizeHandler();
+					}, false );
+				}
+
+			});
+		},
+		_onScrollFn : function() {
+			var self = this;
+			if( !this.didScroll ) {
+				this.didScroll = true;
+				setTimeout( function() { self._scrollPage(); }, 60 );
+			}
+		},
+		_scrollPage : function() {
+			var self = this;
+			this.items.forEach( function( el, i ) {
+				if( !classie.has( el, 'shown' ) && !classie.has( el, 'animate' ) && inViewport( el, self.options.viewportFactor ) ) {
+					setTimeout( function() {
+						var perspY = scrollY() + getViewportH() / 2;
+						self.el.style.WebkitPerspectiveOrigin = '50% ' + perspY + 'px';
+						self.el.style.MozPerspectiveOrigin = '50% ' + perspY + 'px';
+						self.el.style.perspectiveOrigin = '50% ' + perspY + 'px';
+
+						self._checkTotalRendered();
+
+						if( self.options.minDuration && self.options.maxDuration ) {
+							var randDuration = ( Math.random() * ( self.options.maxDuration - self.options.minDuration ) + self.options.minDuration ) + 's';
+							el.style.WebkitAnimationDuration = randDuration;
+							el.style.MozAnimationDuration = randDuration;
+							el.style.animationDuration = randDuration;
+						}
+
+						classie.add( el, 'animate' );
+					}, 25 );
+				}
+			});
+			this.didScroll = false;
+		},
+		_resizeHandler : function() {
+			var self = this;
+			function delayed() {
+				self._scrollPage();
+				self.resizeTimeout = null;
+			}
+			if ( this.resizeTimeout ) {
+				clearTimeout( this.resizeTimeout );
+			}
+			this.resizeTimeout = setTimeout( delayed, 1000 );
+		},
+		_checkTotalRendered : function() {
+			++this.itemsRenderedCount;
+			if( this.itemsRenderedCount === this.itemsCount ) {
+				window.removeEventListener( 'scroll', this._onScrollFn );
+			}
+		}
+	}
+
+	// add to global namespace
+	window.AnimOnScroll = AnimOnScroll;
+
+} )( window );

app/Editor/assets/js/application.js

@@ -0,0 +1,39 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+!function ($) {
+  $(function(){
+
+    $('.tooltip-demo').tooltip({
+      selector: "[data-toggle=tooltip]",
+      container: "body"
+    });
+
+	$("input[type='number']").stepper();
+
+	$(".selecter_1").selecter();
+
+	$(".selecter_2").selecter();
+
+	$(".selecter_3").selecter();
+
+	$(".selecter_4").selecter();
+
+	$(".selecter_5").selecter();
+
+	$(".selecter_6").selecter();
+
+    $('.checkbox input').iCheck({
+        checkboxClass: 'icheckbox_flat',
+        increaseArea: '20%'
+    });
+
+    $('.radio input').iCheck({
+        radioClass: 'iradio_flat',
+        increaseArea: '20%'
+    });
+    $('#accordion1').collapse();
+    $('#accordion2').collapse();
+  })
+}(window.jQuery)

app/Editor/assets/js/classie.js

@@ -0,0 +1,70 @@
+/*!
+ * classie - class helper functions
+ * from bonzo https://github.com/ded/bonzo
+ * 
+ * classie.has( elem, 'my-class' ) -> true/false
+ * classie.add( elem, 'my-new-class' )
+ * classie.remove( elem, 'my-unwanted-class' )
+ * classie.toggle( elem, 'my-class' )
+ */
+
+/*jshint browser: true, strict: true, undef: true */
+
+( function( window ) {
+
+'use strict';
+
+// class helper functions from bonzo https://github.com/ded/bonzo
+
+function classReg( className ) {
+  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
+}
+
+// classList support for class management
+// altho to be fair, the api sucks because it won't accept multiple classes at once
+var hasClass, addClass, removeClass;
+
+if ( 'classList' in document.documentElement ) {
+  hasClass = function( elem, c ) {
+    return elem.classList.contains( c );
+  };
+  addClass = function( elem, c ) {
+    elem.classList.add( c );
+  };
+  removeClass = function( elem, c ) {
+    elem.classList.remove( c );
+  };
+}
+else {
+  hasClass = function( elem, c ) {
+    return classReg( c ).test( elem.className );
+  };
+  addClass = function( elem, c ) {
+    if ( !hasClass( elem, c ) ) {
+      elem.className = elem.className + ' ' + c;
+    }
+  };
+  removeClass = function( elem, c ) {
+    elem.className = elem.className.replace( classReg( c ), ' ' );
+  };
+}
+
+function toggleClass( elem, c ) {
+  var fn = hasClass( elem, c ) ? removeClass : addClass;
+  fn( elem, c );
+}
+
+window.classie = {
+  // full names
+  hasClass: hasClass,
+  addClass: addClass,
+  removeClass: removeClass,
+  toggleClass: toggleClass,
+  // short names
+  has: hasClass,
+  add: addClass,
+  remove: removeClass,
+  toggle: toggleClass
+};
+
+})( window );