gumby_on_rails 0.0.1

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

@@ -0,0 +1,240 @@
+/**
+* Gumby Fixed
+*/
+!function($) {
+
+	'use strict';
+
+	function Fixed($el) {
+
+		Gumby.debug('Initializing Fixed Position', $el);
+
+		this.$el = $el;
+
+		this.$window = $(window);
+		this.fixedPoint = '';
+		this.pinPoint = false;
+		this.fixedPointjQ = false;
+		this.pinPointjQ = false;
+		this.offset = 0;
+		this.pinOffset = 0;
+		this.top = 0;
+		this.constrainEl = true;
+		this.state = false;
+		this.measurements = {
+			left: 0,
+			width: 0
+		};
+
+		// set up module based on attributes
+		this.setup();
+
+		var scope = this;
+
+		// monitor scroll and update fixed elements accordingly
+		this.$window.on('scroll load', function() {
+			scope.monitorScroll();
+		});
+
+		// reinitialize event listener
+		this.$el.on('gumby.initialize', function() {
+			Gumby.debug('Re-initializing Fixed Position', $el);
+			scope.setup();
+			scope.monitorScroll();
+		});
+	}
+
+	// set up module based on attributes
+	Fixed.prototype.setup = function() {
+		var scope = this;
+
+		this.fixedPoint = this.parseAttrValue(Gumby.selectAttr.apply(this.$el, ['fixed']));
+
+		// pin point is optional
+		this.pinPoint = Gumby.selectAttr.apply(this.$el, ['pin']) || false;
+
+		// offset from fixed point
+		this.offset = Number(Gumby.selectAttr.apply(this.$el, ['offset'])) || 0;
+
+		// offset from pin point
+		this.pinOffset = Number(Gumby.selectAttr.apply(this.$el, ['pinoffset'])) || 0;
+
+		// top position when fixed
+		this.top = Number(Gumby.selectAttr.apply(this.$el, ['top'])) || 0;
+
+		// constrain can be turned off
+		this.constrainEl = Gumby.selectAttr.apply(this.$el, ['constrain']) || true;
+		if(this.constrainEl === 'false') {
+			this.constrainEl = false;
+		}
+
+		// reference to the parent, row/column
+		this.$parent = this.$el.parents('.columns, .column, .row');
+		this.$parent = this.$parent.length ? this.$parent.first() : false;
+		this.parentRow = this.$parent ? !!this.$parent.hasClass('row') : false;
+
+		// if optional pin point set then parse now
+		if(this.pinPoint) {
+			this.pinPoint = this.parseAttrValue(this.pinPoint);
+		}
+
+		this.fixedPointjQ = this.fixedPoint instanceof jQuery;
+		this.pinPointjQ = this.pinPoint instanceof jQuery;
+
+		// if we have a parent constrain dimenions
+		if(this.$parent && this.constrainEl) {
+			// measure up
+			this.measure();
+			// and on resize reset measurement
+			this.$window.resize(function() {
+				if(scope.state) {
+					scope.measure();
+					scope.constrain();
+				}
+			});
+		}
+	};
+
+	// monitor scroll and trigger changes based on position
+	Fixed.prototype.monitorScroll = function() {
+		var scrollAmount = this.$window.scrollTop(),
+			// recalculate selector attributes as position may have changed
+			fixedPoint = this.fixedPointjQ ? this.fixedPoint.offset().top : this.fixedPoint,
+			pinPoint = false,
+			timer;
+
+		// if a pin point is set recalculate
+		if(this.pinPoint) {
+			pinPoint = this.pinPointjQ ? this.pinPoint.offset().top : this.pinPoint;
+		}
+
+		// apply offsets
+		if(this.offset) { fixedPoint -= this.offset; }
+		if(this.pinOffset) { pinPoint -= this.pinOffset; }
+
+		// fix it
+		if((scrollAmount >= fixedPoint) && this.state !== 'fixed') {
+			if(!pinPoint || scrollAmount < pinPoint) {
+				this.fix();
+			}
+		// unfix it
+		} else if(scrollAmount < fixedPoint && this.state === 'fixed') {
+			this.unfix();
+
+		// pin it
+		} else if(pinPoint && scrollAmount >= pinPoint && this.state !== 'pinned') {
+			this.pin();
+		}
+	};
+
+	// fix the element and update state
+	Fixed.prototype.fix = function() {
+		Gumby.debug('Element has been fixed', this.$el);
+		Gumby.debug('Triggering onFixed event', this.$el);
+
+		this.state = 'fixed';
+		this.$el.css({
+			'top' : this.top
+		}).addClass('fixed').removeClass('unfixed pinned').trigger('gumby.onFixed');
+
+		// if we have a parent constrain dimenions
+		if(this.$parent) {
+			this.constrain();
+		}
+	};
+
+	// unfix the element and update state
+	Fixed.prototype.unfix = function() {
+		Gumby.debug('Element has been unfixed', this.$el);
+		Gumby.debug('Triggering onUnfixed event', this.$el);
+
+		this.state = 'unfixed';
+		this.$el.addClass('unfixed').removeClass('fixed pinned').trigger('gumby.onUnfixed');
+	};
+
+	// pin the element in position
+	Fixed.prototype.pin = function() {
+		Gumby.debug('Element has been pinned', this.$el);
+		Gumby.debug('Triggering onPinned event', this.$el);
+		this.state = 'pinned';
+		this.$el.css({
+			'top' : this.$el.offset().top
+		}).addClass('pinned fixed').removeClass('unfixed').trigger('gumby.onPinned');
+	};
+
+	// constrain elements dimensions to match width/height
+	Fixed.prototype.constrain = function() {
+		Gumby.debug("Constraining element", this.$el);
+		this.$el.css({
+			left: this.measurements.left,
+			width: this.measurements.width
+		});
+	};
+
+	// measure up the parent for constraining
+	Fixed.prototype.measure = function() {
+		var parentPadding;
+
+		this.measurements.left = this.$parent.offset().left;
+		this.measurements.width = this.$parent.width();
+
+		// if element has a parent row then need to consider padding
+		if(this.parentRow) {
+			parentPadding = Number(this.$parent.css('paddingLeft').replace(/px/, ''));
+			if(parentPadding) {
+				this.measurements.left += parentPadding;
+			}
+		}
+	};
+
+	// 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);
+			if(!$el.length) {
+				Gumby.error('Cannot find Fixed target: '+attr);
+				return false;
+			}
+			return $el;
+		}
+	};
+
+	// add initialisation
+	Gumby.addInitalisation('fixed', function(all) {
+		$('[data-fixed],[gumby-fixed],[fixed]').each(function() {
+			var $this = $(this);
+
+			// this element has already been initialized
+			// and we're only initializing new modules
+			if($this.data('isFixed') && !all) {
+				return true;
+
+			// this element has already been initialized
+			// and we need to reinitialize it
+			} else if($this.data('isFixed') && all) {
+				$this.trigger('gumby.initialize');
+				return true;
+			}
+
+			// mark element as initialized
+			$this.data('isFixed', true);
+			new Fixed($this);
+		});
+	});
+
+	// register UI module
+	Gumby.UIModule({
+		module: 'fixed',
+		events: ['initialize', 'onFixed', 'onUnfixed'],
+		init: function() {
+			Gumby.initialize('fixed');
+		}
+	});
+}(jQuery);

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

@@ -0,0 +1,115 @@
+/**
+* Gumby Navbar
+*/
+!function($) {
+
+	'use strict';
+
+	// define and init module on touch enabled devices only
+	if(!Gumby.gumbyTouch) {
+		return;
+	}
+
+	function Navbar($el) {
+
+		Gumby.debug('Initializing Navbar', $el);
+
+		this.$el = $el;
+		this.$dropDowns = this.$el.find('li:has(.dropdown)');
+		var scope = this;
+
+		var persist = this.$el.attr('gumby-persist');
+		if(typeof persist === 'undefined' && persist !== 'false') {
+			this.$el.find('li:not(:has(.dropdown)) a').on(Gumby.click, function() {
+				scope.$el.find('ul').removeClass('active');
+			});
+		}
+
+		// when navbar items
+		this.$dropDowns
+		// are tapped hide/show dropdowns
+		.on(Gumby.click, this.toggleDropdown)
+		// are swiped right open link
+		.on('swiperight', this.openLink);
+
+		// if there's a link set
+		if(this.$dropDowns.children('a').attr('href') !== '#') {
+			// append an icon
+			this.$dropDowns.children('a').append('<i class="icon-popup"></i>').children('i')
+			// and bind to click event to open link
+			.on(Gumby.click, this.openLink);
+		}
+
+		// override with childlinks
+		this.$el.find('li:not(:has(.dropdown)) a[href]').on(Gumby.click, this.openLink);
+	}
+
+	Navbar.prototype.toggleDropdown = function(e) {
+		e.preventDefault();
+
+		if($(this).parents('.dropdown')) {
+			e.stopImmediatePropagation();
+		}
+
+		if($(e.target).is('i')) {
+			return;
+		}
+
+		var $this = $(this);
+
+		if($this.hasClass('active')) {
+			$this.removeClass('active');
+		} else {
+			$this.addClass('active');
+		}
+	};
+
+	// handle opening list item link
+	Navbar.prototype.openLink = function(e) {
+		e.preventDefault();
+
+		var $this = $(this),
+			$el = $this, href;
+
+		// tapped icon
+		if($this.is('i')) {
+			$el = $this.parent('a');
+		// swiped li
+		} else if($this.is('li')) {
+			$el = $this.children('a');
+		}
+
+		href = $el.attr('href');
+
+		// open in new window
+		if($el.attr('target') == 'blank') {
+			window.open(href);
+		// regular relocation
+		} else {
+			window.location = href;
+		}
+	};
+
+	// add initialisation
+	Gumby.addInitalisation('navbar', function() {
+		$('.navbar').each(function() {
+			var $this = $(this);
+			// this element has already been initialized
+			if($this.data('isNavbar')) {
+				return true;
+			}
+			// mark element as initialized
+			$this.data('isNavbar', true);
+			new Navbar($this);
+		});
+	});
+
+	// register UI module
+	Gumby.UIModule({
+		module: 'navbar',
+		events: [],
+		init: function() {
+			Gumby.initialize('navbar');
+		}
+	});
+}(jQuery);

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

@@ -0,0 +1,90 @@
+/**
+* Gumby RadioBtn
+*/
+!function($) {
+
+	'use strict';
+
+	function RadioBtn($el) {
+
+		Gumby.debug('Initializing Radio Button', $el);
+
+		this.$el = $el;
+		this.$input = this.$el.find('input[type=radio]');
+
+		var scope = this;
+
+		// listen for click event and custom gumby check event
+		this.$el.on(Gumby.click, function(e) {
+			// prevent radio button checking, we'll do that manually
+			e.preventDefault();
+
+			// do nothing if radio is disabled
+            if (scope.$input.is('[disabled]')) {
+                return;
+            }
+
+			// check radio button
+			scope.update();
+		}).on('gumby.check', function() {
+			Gumby.debug('Check event triggered', scope.$el);
+			scope.update();
+		});
+
+		// update any prechecked on load
+		if(this.$input.prop('checked') || this.$el.hasClass('checked')) {
+			scope.update(true);
+		}
+	}
+
+	// check radio button, uncheck all others in name group
+	RadioBtn.prototype.update = function() {
+
+		// already checked so no need to update
+		if(this.$el.hasClass('checked') && this.$input.prop('checked') && this.$el.find('i.icon-dot').length) {
+			return;
+		}
+
+		Gumby.debug('Updating Radio Button group', this.$el);
+
+		var $span = this.$el.find('span'),
+			// the group of radio buttons
+			group = 'input[name="'+this.$input.attr('name')+'"]';
+
+		// uncheck radio buttons in same group - uncheck input, remove checked class, remove <i>
+		$('.radio').has(group).removeClass('checked')
+				.find('input').prop('checked', false).end()
+				.find('i').remove();
+
+		// check this radio button - check input, add checked class, append <i>
+		this.$input.prop('checked', true);
+		$span.append('<i class="icon-dot" />');
+
+		Gumby.debug('Triggering onCheck event', this.$el);
+
+		this.$el.addClass('checked').trigger('gumby.onCheck');
+	};
+
+	// add initialisation
+	Gumby.addInitalisation('radiobtn', 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: ['onCheck', 'check'],
+		init: function() {
+			Gumby.initialize('radiobtn');
+		}
+	});
+}(jQuery);

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

@@ -0,0 +1,81 @@
+/**
+* Gumby Retina
+*/
+!function($) {
+
+	'use strict';
+
+	function Retina($el) {
+		
+		Gumby.debug('Initializing 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();
+		}).error(function() {
+			Gumby.error('Couln\'t load retina image: '+scope.retinaSrc);
+		});
+	}
+
+	// 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() {
+		Gumby.debug('Swapping image for retina version', this.$el);
+		Gumby.debug('Triggering onRetina event', this.$el);
+		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');
+		}
+	});
+}(jQuery);

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

@@ -0,0 +1,157 @@
+/**
+* Gumby SkipLink
+*/
+!function($) {
+
+	'use strict';
+
+	function SkipLink($el) {
+
+		Gumby.debug('Initializing Skiplink', $el);
+
+		this.$el = $el;
+		this.targetPos = 0;
+		this.duration = 0;
+		this.offset = false;
+		this.easing = '';
+		this.update = false;
+
+		// set up module based on attributes
+		this.setup();
+
+		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();
+
+			if(e.namespace === 'skip') {
+				Gumby.debug('Skip event triggered', scope.$el);
+			}
+
+			// calculate target on each click if update var set to true
+			if(scope.update) {
+				scope.calculateTarget(scope.skipTo);
+
+			// skip straight to target
+			} else {
+				scope.skipTo();
+			}
+		}).on('gumby.initialize', function() {
+			Gumby.debug('Re-initializing Skiplink', scope.$el);
+			scope.setup();
+		});
+	}
+
+	// set up module based on attributes
+	SkipLink.prototype.setup = function() {
+		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';
+		this.update = Gumby.selectAttr.apply(this.$el, ['update']) ? true : false;
+
+		this.calculateTarget();
+	};
+
+	// calculate target px point to skip to
+	SkipLink.prototype.calculateTarget = function(cb) {
+
+		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.length) {
+				Gumby.error('Cannot find skiplink target: '+target);
+				return false;
+			}
+
+			this.targetPos = $target.offset().top;
+		}
+
+		if(cb) {
+			cb.apply(this);
+		}
+	};
+
+	// animate body, html scrollTop value to target px point
+	SkipLink.prototype.skipTo = function() {
+		
+		Gumby.debug('Skipping to target', this.$el);
+
+		var scope = this;
+
+		// slide to position of target
+		$('html,body').animate({
+			'scrollTop' : this.calculateOffset()
+		}, this.duration, this.easing).promise().done(function() {
+
+			Gumby.debug('Triggering onComplete event', scope.$el);
+			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('skiplink', function(all) {
+		$('.skiplink > a, .skip').each(function() {
+			var $this = $(this);
+
+			// this element has already been initialized
+			// and we're only initializing new modules
+			if($this.data('isSkipLink') && !all) {
+				return true;
+
+			// this element has already been initialized
+			// and we need to reinitialize it
+			} else if($this.data('isSkipLink') && all) {
+				$this.trigger('gumby.initialize');
+				return true;
+			}
+
+			// mark element as initialized
+			$this.data('isSkipLink', true);
+			new SkipLink($this);
+		});
+	});
+
+	// register UI module
+	Gumby.UIModule({
+		module: 'skiplink',
+		events: ['initialize', 'onComplete', 'skip'],
+		init: function() {
+			Gumby.initialize('skiplink');
+		}
+	});
+}(jQuery);