gumby_on_rails 0.0.1

data/app/assets/javascripts/gumby/libs/ui/gumby.tabs.js

@@ -0,0 +1,80 @@
+/**
+* Gumby Tabs
+*/
+!function($) {
+
+	'use strict';
+
+	function Tabs($el) {
+
+		Gumby.debug('Initializing Tabs', $el);
+
+		this.$el = $el;
+		this.$nav = this.$el.find('> ul.tab-nav > li');
+		this.$content = this.$el.children('.tab-content');
+
+		var scope = this;
+
+		// listen for click event on tab nav and custom gumby set event
+		this.$nav.children('a').on(Gumby.click, function(e) {
+			e.preventDefault();
+			scope.click($(this));
+		});
+
+		// listen for gumby.set value for dynamically set tabs
+		this.$el.on('gumby.set', function(e, index) {
+			Gumby.debug('Set event triggered', scope.$el);
+			scope.set(e, index);
+		});
+	}
+
+	// handle tab nav click event
+	Tabs.prototype.click = function($this) {
+		// index of item to activate
+		var index = $this.parent().index();
+
+		if(this.$nav.eq(index).add(this.$content.eq(index)).hasClass('active')) {
+			return;
+		}
+
+		Gumby.debug('Setting active tab to '+index, this.$el);
+
+		// deactivate other tab navigation and content
+		this.$nav.add(this.$content).removeClass('active');
+
+		// activate this tab nav link and content
+		this.$nav.eq(index).add(this.$content.eq(index)).addClass('active');
+
+		// trigger gumby.change event and pass current active tab index
+		Gumby.debug('Triggering onChange event', this.$el);
+		this.$el.trigger('gumby.onChange', index);
+	};
+
+	// set specific tab
+	Tabs.prototype.set = function(e, index) {
+		this.$nav.eq(index).find('a').trigger(Gumby.click);
+	};
+
+	// add initialisation
+	Gumby.addInitalisation('tabs', function() {
+		$('.tabs').each(function() {
+			var $this = $(this);
+			// this element has already been initialized
+			if($this.data('isTabs')) {
+				return true;
+			}
+			// mark element as initialized
+			$this.data('isTabs', true);
+			new Tabs($this);
+		});
+	});
+
+	// register UI module
+	Gumby.UIModule({
+		module: 'tabs',
+		events: ['onChange', 'set'],
+		init: function() {
+			Gumby.initialize('tabs');
+		}
+	});
+}(jQuery);

data/app/assets/javascripts/gumby/libs/ui/gumby.toggleswitch.js

@@ -0,0 +1,264 @@
+/**
+* Gumby Toggles/Switches
+*/
+!function($) {
+
+	'use strict';
+
+	// Toggle constructor
+	function Toggle($el) {
+		this.$el = $($el);
+		this.targets = [];
+		this.on = '';
+		this.className = '';
+		this.self = false;
+
+		if(this.$el.length) {
+			Gumby.debug('Initializing Toggle', $el);
+			this.init();
+		}
+	}
+
+	// Switch constructor
+	function Switch($el) {
+		this.$el = $($el);
+		this.targets = [];
+		this.on = '';
+		this.className = '';
+		this.self = false;
+
+		if(this.$el.length) {
+			Gumby.debug('Initializing Switch', $el);
+			this.init();
+		}
+	}
+
+	// intialise toggles, switches will inherit method
+	Toggle.prototype.init = function() {
+		var scope = this;
+
+		// set up module based on attributes
+		this.setup();
+
+		// bind to specified event and trigger
+		this.$el.on(this.on, function(e) {
+			e.preventDefault();
+			scope.trigger(scope.triggered);
+
+		// listen for gumby.trigger to dynamically trigger toggle/switch
+		}).on('gumby.trigger', function() {
+			Gumby.debug('Trigger event triggered', scope.$el);
+			scope.trigger(scope.triggered);
+		// re-initialize module
+		}).on('gumby.initialize', function() {
+			Gumby.debug('Re-initializing '+scope.constructor, $el);
+			scope.setup();
+		});
+	};
+
+	// set up module based on attributes
+	Toggle.prototype.setup = function() {
+		this.targets = this.parseTargets();
+		this.on = Gumby.selectAttr.apply(this.$el, ['on']) || Gumby.click;
+		this.className = Gumby.selectAttr.apply(this.$el, ['classname']) || 'active';
+		this.self = Gumby.selectAttr.apply(this.$el, ['self']) === 'false';
+	};
+
+	// parse data-for attribute, switches will inherit method
+	Toggle.prototype.parseTargets = function() {
+		var targetStr = Gumby.selectAttr.apply(this.$el, ['trigger']),
+			secondaryTargets = 0,
+			targets = [];
+
+		// no targets so return false
+		if(!targetStr) {
+			return false;
+		}
+
+		secondaryTargets = targetStr.indexOf('|');
+
+		// no secondary targets specified so return single target
+		if(secondaryTargets === -1) {
+			if(!this.checkTargets([targetStr])) {
+				return false;
+			}
+			return [$(targetStr)];
+		}
+
+		// return array of both targets, split and return 0, 1
+		targets = targetStr.split('|');
+		if(!this.checkTargets(targets)) {
+			return false;
+		}
+		return targets.length > 1 ? [$(targets[0]), $(targets[1])] : [$(targets[0])];
+	};
+
+	Toggle.prototype.checkTargets = function(targets) {
+		var i = 0;
+
+		for(i; i < targets.length; i++) {
+			if(targets[i] && !$(targets[i]).length) {
+				Gumby.error('Cannot find '+this.constructor.name+' target: '+targets[i]);
+				return false;
+			}
+		}
+
+		return true;
+	};
+
+	// call triggered event and pass target data
+	Toggle.prototype.triggered = function() {
+		// trigger gumby.onTrigger event and pass array of target status data
+		Gumby.debug('Triggering onTrigger event', this.$el);
+		this.$el.trigger('gumby.onTrigger', [this.$el.hasClass(this.className)]);
+	};
+
+	// Switch object inherits from Toggle
+	Switch.prototype = new Toggle();
+	Switch.prototype.constructor = Switch;
+
+	// Toggle specific trigger method
+	Toggle.prototype.trigger = function(cb) {
+
+		Gumby.debug('Triggering Toggle', this.$el);
+
+		var $target;
+
+		// no targets just toggle active class on toggle
+		if(!this.targets) {
+			this.$el.toggleClass(this.className);
+
+		// combine single target with toggle and toggle active class
+		} else if(this.targets.length == 1) {
+			this.$el.add(this.targets[0]).toggleClass(this.className);
+
+		// if two targets check active state of first
+		// always combine toggle and first target
+		} else if(this.targets.length > 1) {
+			if(this.targets[0].hasClass(this.className)) {
+				$target = this.targets[0];
+				
+				// add this element to it unless gumby-self set
+				if(!this.self) {
+					$target = $target.add(this.$el);
+				}
+
+				$target.removeClass(this.className);
+				this.targets[1].addClass(this.className);
+			} else {
+				$target = this.targets[0];
+				
+				// add this element to it unless gumby-self set
+				if(!this.self) {
+					$target = $target.add(this.$el);
+				}
+
+				$target.addClass(this.className);
+				this.targets[1].removeClass(this.className);
+			}
+		}
+
+		// call event handler here, applying scope of object Switch/Toggle
+		if(cb && typeof cb === 'function') {
+			cb.apply(this);
+		}
+	};
+
+	// Switch specific trigger method
+	Switch.prototype.trigger = function(cb) {
+
+		Gumby.debug('Triggering Switch', this.$el);
+
+		var $target;
+
+		// no targets just add active class to switch
+		if(!this.targets) {
+			this.$el.addClass(this.className);
+
+		// combine single target with switch and add active class
+		} else if(this.targets.length == 1) {
+			$target = this.targets[0];
+				
+			// add this element to it unless gumby-self set
+			if(!this.self) {
+				$target = $target.add(this.$el);
+			}
+
+			$target.addClass(this.className);
+
+		// if two targets check active state of first
+		// always combine switch and first target
+		} else if(this.targets.length > 1) {
+			$target = this.targets[0];
+				
+			// add this element to it unless gumby-self set
+			if(!this.self) {
+				$target = $target.add(this.$el);
+			}
+
+			$target.addClass(this.className);
+			this.targets[1].removeClass(this.className);
+		}
+
+		// call event handler here, applying scope of object Switch/Toggle
+		if(cb && typeof cb === 'function') {
+			cb.apply(this);
+		}
+	};
+
+	// add toggle initialisation
+	Gumby.addInitalisation('toggles', function(all) {
+		$('.toggle').each(function() {
+			var $this = $(this);
+
+			// this element has already been initialized
+			// and we're only initializing new modules
+			if($this.data('isToggle') && !all) {
+				return true;
+
+			// this element has already been initialized
+			// and we need to reinitialize it
+			} else if($this.data('isToggle') && all) {
+				$this.trigger('gumby.initialize');
+			}
+
+			// mark element as initialized
+			$this.data('isToggle', true);
+			new Toggle($this);
+		});
+	});
+
+	// add switches initialisation
+	Gumby.addInitalisation('switches', function(all) {
+		$('.switch').each(function() {
+			var $this = $(this);
+
+			// this element has already been initialized
+			// and we're only initializing new modules
+			if($this.data('isSwitch') && !all) {
+				return true;
+
+			// this element has already been initialized
+			// and we need to reinitialize it
+			} else if($this.data('isSwitch') && all) {
+				$this.trigger('gumby.initialize');
+				return true;
+			}
+
+			// mark element as initialized
+			$this.data('isSwitch', true);
+			new Switch($this);
+		});
+	});
+
+	// register UI module
+	Gumby.UIModule({
+		module: 'toggleswitch',
+		events: ['initialize', 'trigger', 'onTrigger'],
+		init: function() {
+			// Run initialize methods
+			Gumby.initialize('switches');
+			Gumby.initialize('toggles');
+		}
+	});
+}(jQuery);

data/app/assets/javascripts/gumby/libs/ui/jquery.validation.js

@@ -0,0 +1,142 @@
+/**
+* Gumby jQuery Validation Plugin
+*/
+!function($) {
+
+	'use strict';
+
+	function Validation($this, req) {
+
+		if(Gumby) {
+			Gumby.debug('Initializing Validation', $this);
+		}
+
+		// input and holder .field
+		this.$this = $this;
+		this.$field = this.$this.parents('.field');
+
+		// supplied validation function with default length check
+		this.req = req || function() {
+			return !!this.$this.val().length;
+		};
+
+		// reference to this class
+		var scope = this;
+
+		// checkboxes and radio buttons use gumby.onChange event to validate
+		if(this.$this.is('[type=checkbox], [type=radio]')) {
+			this.$field = this.$this.parent('label');
+			this.$field.on('gumby.onChange', function() {
+				scope.validate();
+			});
+
+		// selects validate on change
+		} else if(this.$this.is('select')) {
+			this.$field = this.$this.parents('.picker');
+			this.$field.on('change', function() {
+				scope.validate();
+			});
+
+		// others (text input, textarea) use blur
+		} else {
+			this.$this.on('blur', function(e) {
+				// ignore tab
+				if(e.which !== 9) {
+					scope.validate();
+				}
+			});
+		}
+	}
+
+	// validate field
+	Validation.prototype.validate = function() {
+
+		var result = this.req(this.$this);
+
+		// failed
+		if(!result) {
+			this.$field.removeClass('success').addClass('danger');
+
+		// passed
+		} else {
+		//} else if(this.$field.hasClass('danger')) {
+			this.$field.removeClass('danger').addClass('success');
+		}
+
+		return result;
+	};
+
+	// jQuery plugin definition
+	$.fn.validation = function(options) {
+
+		var // extend params with defaults
+			settings = $.extend({
+				submit : false,
+				fail: false,
+				required : []
+			}, options),
+			// store validation objects
+			validations = [];
+
+		// init each form plugin is called on
+		return this.each(function() {
+
+			// no required fields so plugin is pointless
+			if(!settings.required.length) {
+				return false;
+			}
+
+			var $this = $(this),
+				reqLength = settings.required.length,
+				i;
+
+			// loop round each required field and instantiate new validation object
+			for(i = 0; i < reqLength; i++) {
+				validations.push(new Validation(
+					$this.find('[name="'+settings.required[i].name+'"]'),
+					settings.required[i].validate || false
+				));
+			}
+
+			// hijack submit event
+			$this.on('submit', function(e) {
+
+				// reference to whole form pass/fail
+				var failed = false;
+
+				// if no passed attribute found we should halt form submit
+				if(!$this.data('passed')) {
+					e.preventDefault();
+
+					// loop round validation objects and validate each
+					var reqLength = validations.length, i;
+					for(i = 0; i < reqLength; i++) {
+						if(!validations[i].validate()) {
+							failed = true;
+						}
+					}
+
+					// passed
+					if(!failed) {
+						// if submit method present call that otherwise submit form
+						if(settings.submit && typeof settings.submit === 'function') {
+							settings.submit($this.serializeArray());
+							return;
+						}
+
+						// store passed bool and re-submit
+						$this.data('passed', true).submit();
+
+						// failed
+						} else {
+						// call fail method if present
+						if(settings.fail && typeof settings.fail === 'function') {
+							settings.fail();
+							return;
+						}
+					}
+				}
+			});
+		});
+	};
+}(jQuery);

data/app/assets/javascripts/gumby/main.js

@@ -0,0 +1,23 @@
+// Gumby is ready to go
+Gumby.ready(function() {
+	Gumby.log('Gumby is ready to go...', Gumby.dump());
+
+	// placeholder polyfil
+	if(Gumby.isOldie || Gumby.$dom.find('html').hasClass('ie9')) {
+		$('input, textarea').placeholder();
+	}
+
+	// skip link and toggle on one element
+	// when the skip link completes, trigger the switch
+	$('#skip-switch').on('gumby.onComplete', function() {
+		$(this).trigger('gumby.trigger');
+	});
+
+// Oldie document loaded
+}).oldie(function() {
+	Gumby.warn("This is an oldie browser...");
+
+// Touch devices loaded
+}).touch(function() {
+	Gumby.log("This is a touch enabled device...");
+});

data/app/assets/javascripts/gumby/plugins.js

@@ -0,0 +1,4 @@
+/*! http://mths.be/placeholder v2.0.7 by @mathias */
+;(function(f,h,$){var a='placeholder' in h.createElement('input'),d='placeholder' in h.createElement('textarea'),i=$.fn,c=$.valHooks,k,j;if(a&&d){j=i.placeholder=function(){return this};j.input=j.textarea=true}else{j=i.placeholder=function(){var l=this;l.filter((a?'textarea':':input')+'[placeholder]').not('.placeholder').bind({'focus.placeholder':b,'blur.placeholder':e}).data('placeholder-enabled',true).trigger('blur.placeholder');return l};j.input=a;j.textarea=d;k={get:function(m){var l=$(m);return l.data('placeholder-enabled')&&l.hasClass('placeholder')?'':m.value},set:function(m,n){var l=$(m);if(!l.data('placeholder-enabled')){return m.value=n}if(n==''){m.value=n;if(m!=h.activeElement){e.call(m)}}else{if(l.hasClass('placeholder')){b.call(m,true,n)||(m.value=n)}else{m.value=n}}return l}};a||(c.input=k);d||(c.textarea=k);$(function(){$(h).delegate('form','submit.placeholder',function(){var l=$('.placeholder',this).each(b);setTimeout(function(){l.each(e)},10)})});$(f).bind('beforeunload.placeholder',function(){$('.placeholder').each(function(){this.value=''})})}function g(m){var l={},n=/^jQuery\d+$/;$.each(m.attributes,function(p,o){if(o.specified&&!n.test(o.name)){l[o.name]=o.value}});return l}function b(m,n){var l=this,o=$(l);if(l.value==o.attr('placeholder')&&o.hasClass('placeholder')){if(o.data('placeholder-password')){o=o.hide().next().show().attr('id',o.removeAttr('id').data('placeholder-id'));if(m===true){return o[0].value=n}o.focus()}else{l.value='';o.removeClass('placeholder');l==h.activeElement&&l.select()}}}function e(){var q,l=this,p=$(l),m=p,o=this.id;if(l.value==''){if(l.type=='password'){if(!p.data('placeholder-textinput')){try{q=p.clone().attr({type:'text'})}catch(n){q=$('<input>').attr($.extend(g(this),{type:'text'}))}q.removeAttr('name').data({'placeholder-password':true,'placeholder-id':o}).bind('focus.placeholder',b);p.data({'placeholder-textinput':q,'placeholder-id':o}).before(q)}p=p.removeAttr('id').hide().prev().attr('id',o).show()}p.addClass('placeholder');p[0].value=p.attr('placeholder')}else{p.removeClass('placeholder')}}}(this,document,jQuery));
+
+// place any jQuery/helper plugins in here, instead of separate, slower script files.

data/app/assets/javascripts/gumby.all.js

@@ -0,0 +1,19 @@
+//= require jquery
+//= require gumby/libs/modernizr-2.6.2.min.js
+//= require gumby/libs/gumby.js
+//= require gumby/libs/ui/gumby.checkbox.js
+//= require gumby/libs/ui/gumby.fixed.js
+//= require gumby/libs/ui/gumby.navbar.js
+//= require gumby/libs/ui/gumby.radiobtn.js
+//= require gumby/libs/ui/gumby.retina.js
+//= require gumby/libs/ui/gumby.skiplink.js
+//= require gumby/libs/ui/gumby.tabs.js
+//= require gumby/libs/ui/gumby.toggleswitch.js
+//= require gumby/libs/ui/jquery.validation.js
+//= require gumby/libs/extensions/gumby.comments.js
+//= require gumby/libs/extensions/gumby.fittext.js
+//= require gumby/libs/extensions/gumby.images.js
+//= require gumby/libs/extensions/gumby.inview.js
+//= require gumby/libs/extensions/gumby.parallax.js
+//= require gumby/libs/extensions/gumby.shuffle.js
+//= require gumby/libs/gumby.init.js

data/app/assets/javascripts/gumby.js

@@ -0,0 +1,13 @@
+//= require jquery
+//= require gumby/libs/modernizr-2.6.2.min.js
+//= require gumby/libs/gumby.js
+//= require gumby/libs/ui/gumby.checkbox.js
+//= require gumby/libs/ui/gumby.fixed.js
+//= require gumby/libs/ui/gumby.navbar.js
+//= require gumby/libs/ui/gumby.radiobtn.js
+//= require gumby/libs/ui/gumby.retina.js
+//= require gumby/libs/ui/gumby.skiplink.js
+//= require gumby/libs/ui/gumby.tabs.js
+//= require gumby/libs/ui/gumby.toggleswitch.js
+//= require gumby/libs/ui/jquery.validation.js
+//= require gumby/libs/gumby.init.js

data/app/assets/stylesheets/gumby/_base.scss

@@ -0,0 +1,49 @@
+/* Base Styles */
+
+@import "compass/typography/vertical_rhythm";
+@include establish-baseline;
+
+* { @include box-sizing(border-box); }
+
+body {
+  background: $global-bg-color;
+  font-family: $font-family;
+  font-weight: $body-font-weight;
+  color: $body-font-color;
+  position: relative;
+  -webkit-font-smoothing: $font-smoothing;
+  -moz-osx-font-smoothing: grayscale;
+  @include respond(all-phones) {
+    -webkit-text-size-adjust: none;
+    -ms-text-size-adjust: none;
+    width: 100%;
+    min-width: 0;
+  }
+}
+
+html, body {
+  height: 100%;
+}
+
+.hide {
+  display: none;
+}
+
+.hide.active, .show {
+  display: block;
+}
+
+// include all entypo icon classes
+@include icon(all);
+
+// .fixed elements will be static at supplied breakpoint
+// set arg to false for permanent .fixed elements
+@include fixed(portrait-tablets);
+
+.text-center { @extend %text-center; }
+.text-left { @extend %text-left; }
+.text-right { @extend %text-right; }
+// Partial to align Text Left or Right
+%text-center { text-align: center; }
+%text-left { text-align: left; }
+%text-right { text-align: right; }

data/app/assets/stylesheets/gumby/_custom.scss

@@ -0,0 +1 @@
+// Your custom SCSS should be written here...

data/app/assets/stylesheets/gumby/_fonts.scss

@@ -0,0 +1,28 @@
+/* Fonts */
+
+// Import Google Web Fonts
+@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
+
+
+// Set local icon font
+@font-face {
+  font-family: '#{$icons}';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../fonts/icons/#{$icons}.eot);
+  src: url('../fonts/gumby/icons/#{$icons}.eot?#iefix') format('ie9-skip-eot'),
+       url('../fonts/gumby/icons/#{$icons}.woff') format('woff'),
+       url('../fonts/gumby/icons/#{$icons}.ttf')  format('truetype');
+}
+
+// To include your own, local copies of fonts, use the following template
+//
+//@font-face {
+//  font-family: '#{$some-font-variable}';
+//  font-style: normal;
+//  font-weight: 400;
+//  src: url(../fonts/icons/#{$some-font-variable}.eot);
+//  src: url('../fonts/icons/#{$some-font-variable}.eot?#iefix') format('ie9-skip-eot'),
+//       url('../fonts/icons/#{$some-font-variable}.woff') format('woff'),
+//       url('../fonts/icons/#{$some-font-variable}.ttf')  format('truetype');
+//}