loldesign_publisher 1.1.0

data/app/assets/javascripts/loldesign_publisher/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/loldesign_publisher/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/loldesign_publisher/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);

data/app/assets/javascripts/loldesign_publisher/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/loldesign_publisher/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);