gumby-framework 0.0.1

data/vendor/assets/javascripts/ui/gumby.fixed.js

@@ -0,0 +1,111 @@
+/**
+* Gumby Fixed
+*/
+!function() {
+
+	'use strict';
+
+	function Fixed($el) {
+		this.$el = $el;
+		this.$holder = Gumby.selectAttr.apply(this.$el, ['holder']);
+		this.fixedPoint = Gumby.selectAttr.apply(this.$el, ['fixed']);
+		this.unfixPoint = false;
+
+		// if holder attr set then create jQuery object
+		// otherwise use window for scrolling cals
+		if(this.$holder) {
+			this.$holder = $(this.$holder);
+		} else {
+			this.$holder = $(window);
+		}
+
+		// fix/unfix points specified
+		if(this.fixedPoint.indexOf('|') > -1) {
+			var points = this.fixedPoint.split('|');
+			this.fixedPoint = points[0];
+			this.unfixPoint = points[1];
+		}
+
+		// parse possible parameters
+		this.fixedPoint = this.parseAttrValue(this.fixedPoint);
+		if(this.unfixPoint) {
+			this.unfixPoint = this.parseAttrValue(this.unfixPoint);
+		}
+
+		var scope = this;
+		this.$holder.scroll(function() {
+			scope.scroll();
+		});
+	}
+
+	// handle scroll event on window/specified holder
+	Fixed.prototype.scroll = function() {
+		var offset = this.$holder.scrollTop(),
+			fixedPoint = this.fixedPoint,
+			unfixPoint = this.unfixPoint,
+			endPoint = this.endPoint;
+
+		// if fixed point, unfix point or end point are DOM fragements
+		// then re-calculate values as could have been updated
+		fixedPoint = fixedPoint instanceof jQuery ? this.fixedPoint.offset().top : this.fixedPoint;
+		unfixPoint = unfixPoint instanceof jQuery ? this.unfixPoint.offset().top : this.unfixPoint;
+
+		// ensure unfix point is never reached if not set
+		if(!unfixPoint) {
+			unfixPoint = offset * 2;
+		}
+
+		// scrolled past fixed point and no fixed class present
+		if((offset >= fixedPoint) && (offset < unfixPoint)  && !this.$el.hasClass('fixed')) {
+			this.$el.addClass('fixed').trigger('gumby.onFixed');
+
+		// before fixed point, pass 0 to onUnfixed event
+		} else if((offset <= fixedPoint) && this.$el.hasClass('fixed')) {
+			this.$el.removeClass('fixed').trigger('gumby.onUnfixed', 0);
+		}
+
+		// after unfix point, pass 1 to onUnfixed event
+		// separate conditional as should override
+		if(unfixPoint && (offset >= unfixPoint) && this.$el.hasClass('fixed')) {
+			this.$el.removeClass('fixed').trigger('gumby.onUnfixed', 1);
+		}
+	};
+
+	// parse attribute values, could be px, top, selector
+	Fixed.prototype.parseAttrValue = function(attr) {
+		// px value fixed point
+		if($.isNumeric(attr)) {
+			return Number(attr);
+		// 'top' string fixed point
+		} else if(attr === 'top') {
+			return this.$el.offset().top;
+		// selector specified
+		} else {
+			var $el = $(attr);
+			return $el.length ? $el : false;
+		}
+	};
+
+	// add initialisation
+	Gumby.addInitalisation('fixed', function() {
+		$('[data-fixed],[gumby-fixed],[fixed]').each(function() {
+			var $this = $(this);
+			// this element has already been initialized
+			if($this.data('isFixed')) {
+				return true;
+			}
+			// mark element as initialized
+			$this.data('isFixed', true);
+			new Fixed($this);
+		});
+	});
+
+	// register UI module
+	Gumby.UIModule({
+		module: 'fixed',
+		events: ['onFixed', 'onUnfixed'],
+		init: function() {
+			Gumby.initialize('fixed');
+		}
+	});
+}();

data/vendor/assets/javascripts/ui/gumby.radiobtn.js

@@ -0,0 +1,81 @@
+/**
+* Gumby RadioBtn
+*/
+!function() {
+
+	'use strict';
+
+	function RadioBtn($el) {
+
+		this.$el = $el;
+		var scope = this;
+
+		// listen for click event and custom gumby check event
+		this.$el.on(Gumby.click, function(e) {
+			scope.click(e);
+		}).on('gumby.check', function() {
+			scope.update();
+		});
+
+		// update any .checked checkboxes on load
+		if(scope.$el.hasClass('checked')) {
+			scope.update();
+		}
+	}
+
+	// handle radio button click event
+	RadioBtn.prototype.click = function(e) {
+
+		// element responsible for event trigger
+		var $target = $(e.target);
+
+		// prevent propagation
+		e.stopPropagation();
+
+		// prevent radio button checking, we'll do that manually
+		e.preventDefault();
+
+		// check radio button
+		this.update();
+	};
+
+	// check radio button, uncheck all others in name group
+	RadioBtn.prototype.update = function() {
+		var // this specific radio button
+			$input = this.$el.find('input[type=radio]'),
+			// the group of radio buttons
+			group = 'input[name="'+$input.attr('name')+'"]';
+
+		// uncheck radio buttons in same group - uncheck input, remove checked class, remove <i>
+		$('.radio').has(group).removeClass('checked')
+				   .find('input').attr('checked', false).end()
+				   .find('i').remove();
+
+		// check this radio button - check input, add checked class, append <i>
+		$input.attr('checked', true);
+		this.$el.append('<i class="icon-dot" />').addClass('checked').trigger('gumby.onChange');
+	};
+
+	// add initialisation
+	Gumby.addInitalisation('radiobtns', function() {
+		$('.radio').each(function() {
+			var $this = $(this);
+			// this element has already been initialized
+			if($this.data('isRadioBtn')) {
+				return true;
+			}
+			// mark element as initialized
+			$this.data('isRadioBtn', true);
+			new RadioBtn($this);
+		});
+	});
+
+	// register UI module
+	Gumby.UIModule({
+		module: 'radiobtn',
+		events: ['onChange', 'check'],
+		init: function() {
+			Gumby.initialize('radiobtns');
+		}
+	});
+}();

data/vendor/assets/javascripts/ui/gumby.retina.js

@@ -0,0 +1,74 @@
+/**
+* Gumby Retina
+*/
+!function() {
+
+	'use strict';
+
+	function Retina($el) {
+		this.$el = $el;
+		this.imageSrc = this.$el.attr('src');
+		this.retinaSrc = this.fetchRetinaImage();
+		this.$retinaImg = $(new Image());
+
+		var scope = this
+
+		// image src not valid
+		if(!this.retinaSrc) {
+			return false;
+		}
+
+		// load retina image
+		this.$retinaImg.attr('src', this.retinaSrc).load(function() {
+			scope.retinaImageLoaded();
+		});
+	}
+
+	// fetch retina src by appending '@2x' to image string before extension
+	Retina.prototype.fetchRetinaImage = function() {
+		var imgSrc = this.imageSrc,
+			index = this.imageSrc.search(/(\.|\/)(gif|jpe?g|png)$/i);
+
+		// image src is not valid
+		if(index < 0) {
+			return false;
+		}
+
+		// return retina src
+		return imgSrc.substr(0, index) + '@2x' + imgSrc.substr(index, imgSrc.length);
+	};
+
+	// once retina image loaded swap original src
+	Retina.prototype.retinaImageLoaded = function() {
+		this.$el.attr('src', this.$retinaImg.attr('src')).trigger('gumby.onRetina');
+	};
+
+	// add initialisation
+	Gumby.addInitalisation('retina', function() {
+
+		// this module is for retina devices only
+		if(!window.devicePixelRatio || window.devicePixelRatio <= 1) {
+			return;
+		}
+
+		$('img[data-retina],img[gumby-retina],img[retina]').each(function() {
+			var $this = $(this);
+			// this element has already been initialized
+			if($this.data('isRetina')) {
+				return true;
+			}
+			// mark element as initialized
+			$this.data('isRetina', true);
+			new Retina($this);
+		});
+	});
+
+	// register UI module
+	Gumby.UIModule({
+		module: 'retina',
+		events: ['onRetina'],
+		init: function() {
+			Gumby.initialize('retina');
+		}
+	});
+}();

data/vendor/assets/javascripts/ui/gumby.skiplink.js

@@ -0,0 +1,113 @@
+/**
+* Gumby SkipLink
+*/
+!function() {
+
+	'use strict';
+
+	function SkipLink($el) {
+
+		this.$el = $el;
+		this.animateElement = $.browser.webkit ? 'body' : 'html';
+		this.targetPos = 0;
+		this.duration = Number(Gumby.selectAttr.apply(this.$el, ['duration'])) || 200;
+		this.offset = Gumby.selectAttr.apply(this.$el, ['offset']) || false;
+		this.easing = Gumby.selectAttr.apply(this.$el, ['easing']) || 'swing';
+
+		var scope = this;
+
+		// skip to target element on click or trigger of gumby.skipTo event
+		this.$el.on(Gumby.click+' gumby.skip', function(e) {
+			e.preventDefault();
+			// calculate target on each click
+			// other UI interactions could effect this
+			scope.calculateTarget();
+		});
+	}
+
+	// calculate target px point to skip to
+	SkipLink.prototype.calculateTarget = function() {
+
+		var scope = this,
+			target = Gumby.selectAttr.apply(this.$el, ['goto']),
+			$target;
+
+		// 'top' specified so target is 0px
+		if(target == 'top') {
+			this.targetPos = 0;
+
+		// px point specified
+		} else if($.isNumeric(target)) {
+			this.targetPos = Number(target);
+		} else {
+
+			// check for element with target as selector
+			$target = $(target);
+
+			// target does not exist, we need a target
+			if(!$target) {
+				return false;
+			}
+
+			this.targetPos = $target.offset().top;
+		}
+
+		// skip to target
+		this.skipTo();
+	};
+
+	// animate body, html scrollTop value to target px point
+	SkipLink.prototype.skipTo = function() {
+		var scope = this;
+
+		// slide to position of target
+		$(scope.animateElement).animate({
+			'scrollTop' : this.calculateOffset()
+		}, this.duration, this.easing, function() {
+			scope.$el.trigger('gumby.onComplete');
+		});
+	};
+
+	// calculate offset with current target point
+	SkipLink.prototype.calculateOffset = function() {
+		// no offset so return target here
+		if(!this.offset) {
+			return this.targetPos;
+		}
+
+		// negative / positive
+		var op = this.offset.substr(0, 1),
+			off = Number(this.offset.substr(1, this.offset.length));
+
+		// subtract offset from target position
+		if(op === '-') {
+			return this.targetPos - off;
+		// add offset to target position
+		} else if(op === '+') {
+			return this.targetPos + off;
+		}
+	};
+
+	// add initialisation
+	Gumby.addInitalisation('skiplinks', function() {
+		$('.skiplink > a, .skip').each(function() {
+			var $this = $(this);
+			// this element has already been initialized
+			if($this.data('isSkipLink')) {
+				return true;
+			}
+			// mark element as initialized
+			$this.data('isSkipLink', true);
+			new SkipLink($this);
+		});
+	});
+
+	// register UI module
+	Gumby.UIModule({
+		module: 'skiplink',
+		events: ['onComplete', 'skip'],
+		init: function() {
+			Gumby.initialize('skiplinks');
+		}
+	});
+}();

data/vendor/assets/javascripts/ui/gumby.tabs.js

@@ -0,0 +1,70 @@
+/**
+* Gumby Tabs
+*/
+!function() {
+
+	'use strict';
+
+	function Tabs($el) {
+
+		this.$el = $el;
+		this.$nav = this.$el.find('ul.tab-nav > li');
+		this.$content = this.$el.find('.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) {
+			scope.set(e, index);
+		});
+	}
+
+	// handle tab nav click event
+	Tabs.prototype.click = function($this) {
+		// index of item to activate
+		var index = $this.parent().index();
+
+		// 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
+		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');
+		}
+	});
+}();