gumby 0.0.1

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

@@ -0,0 +1,206 @@
+/**
+* Gumby Fixed
+*/
+!function() {
+
+	'use strict';
+
+	function Fixed($el) {
+		this.$el = $el;
+
+		this.fixedPoint = '';
+		this.pinPoint = 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
+		$(window).on('scroll load', function() {
+			scope.monitorScroll();
+		});
+
+		// reinitialize event listener
+		this.$el.on('gumby.initialize', function() {
+			scope.setup();
+		});
+	}
+
+	// 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);
+		}
+
+		// if we have a parent constrain dimenions
+		if(this.$parent && this.constrainEl) {
+			// measure up
+			this.measure();
+			// and on resize reset measurement
+			$(window).resize(function() {
+				if(scope.state) {
+					scope.measure();
+					scope.constrain();
+				}
+			});
+		}
+	};
+
+	// monitor scroll and trigger changes based on position
+	Fixed.prototype.monitorScroll = function() {
+		var scrollAmount = $(window).scrollTop(),
+			// recalculate selector attributes as position may have changed
+			fixedPoint = this.fixedPoint instanceof jQuery ? this.fixedPoint.offset().top : this.fixedPoint,
+			pinPoint = false;
+
+		// if a pin point is set recalculate
+		if(this.pinPoint) {
+			pinPoint = this.pinPoint instanceof jQuery ? 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() {
+		this.state = 'fixed';
+		this.$el.css({
+			'top' : 0 + 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() {
+		this.state = 'unfixed';
+		this.$el.addClass('unfixed').removeClass('fixed pinned').trigger('gumby.onUnfixed');
+	};
+
+	// pin the element in position
+	Fixed.prototype.pin = function() {
+		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() {
+		this.$el.css({
+			left: this.measurements.left,
+			width: this.measurements.width
+		});
+	};
+
+	// measure up the parent for constraining
+	Fixed.prototype.measure = function() {
+		var offsets = this.$parent.offset(), parentPadding;
+
+		this.measurements.left = offsets.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);
+			return $el;
+		}
+	};
+
+	// 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.navbar.js

@@ -0,0 +1,115 @@
+/**
+* Gumby Navbar
+*/
+!function() {
+
+	'use strict';
+
+	var $html = Gumby.$dom.find('html');
+
+	// define and init module on touch enabled devices only
+	// when we are at tablet size or smaller
+	if(!Modernizr.touch || $(window).width() > Gumby.breakpoint) {
+
+		// add Gumby no touch class
+		$html.addClass('gumby-no-touch');
+		return;
+	}
+
+	// add Gumby touch class
+	$html.addClass('gumby-touch');
+
+	function Navbar($el) {
+		this.$el = $el;
+		this.$dropDowns = this.$el.find('li:has(.dropdown)');
+		var scope = this;
+
+		// when navbar items
+		this.$dropDowns
+		// are tapped hide/show dropdowns
+		.on('tap', 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('tap', this.openLink);
+		}
+
+		// on mousemove and touchstart toggle modernizr classes and disable/enable this module
+		// workaround for Pixel and other multi input devices
+		$(window).on('mousemove touchstart', function(e) {
+			e.stopImmediatePropagation();
+			if(e.type === 'mousemove') {
+				scope.$dropDowns.on('mouseover mouseout', scope.toggleDropdown);
+			}
+		});
+	}
+
+	Navbar.prototype.toggleDropdown = function(e) {
+		// prevent click from triggering here too
+		e.stopImmediatePropagation();
+		e.preventDefault();
+
+		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.stopImmediatePropagation();
+		e.preventDefault();
+
+		var $this = $(this),
+			$el, 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('navbars', 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('navbars');
+		}
+	});
+}();

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

@@ -0,0 +1,74 @@
+/**
+* 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) {
+			// prevent propagation
+			e.stopImmediatePropagation();
+
+			// prevent radio button checking, we'll do that manually
+			e.preventDefault();
+
+			// check radio button
+			scope.update();
+		}).on('gumby.check', function() {
+			scope.update();
+		});
+
+		// update any .checked checkboxes on load
+		if(scope.$el.hasClass('checked')) {
+			scope.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]'),
+			$span = this.$el.find('span'),
+			// 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').prop('checked', false).end()
+				.find('i').remove();
+
+		// check this radio button - check input, add checked class, append <i>
+		$input.prop('checked', true);
+		$span.append('<i class="icon-dot" />');
+		this.$el.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');
+		}
+	});
+}();