fuelux-rails 0.0.1

data/vendor/assets/javascripts/fuelux/pillbox.js

@@ -0,0 +1,69 @@
+/*
+ * Fuel UX Pillbox
+ * https://github.com/ExactTarget/fuelux
+ *
+ * Copyright (c) 2012 ExactTarget
+ * Licensed under the MIT license.
+ */
+
+!function ($) {
+
+	// PILLBOX CONSTRUCTOR AND PROTOTYPE
+
+	var Pillbox = function (element, options) {
+		this.$element = $(element);
+		this.options = $.extend({}, $.fn.pillbox.defaults, options);
+		this.$element.on('click', 'li', $.proxy(this.itemclicked, this));
+	};
+
+	Pillbox.prototype = {
+		constructor: Pillbox,
+
+		items: function() {
+			return this.$element.find('li').map(function() {
+				var $this = $(this);
+				return $.extend({ text: $this.text() }, $this.data());
+			}).get();
+		},
+
+		itemclicked: function (e) {
+			$(e.currentTarget).remove();
+			e.preventDefault();
+		}
+	};
+
+
+	// PILLBOX PLUGIN DEFINITION
+
+	$.fn.pillbox = function (option) {
+		var methodReturn;
+
+		var $set = this.each(function () {
+			var $this = $(this);
+			var data = $this.data('pillbox');
+			var options = typeof option === 'object' && option;
+
+			if (!data) $this.data('pillbox', (data = new Pillbox(this, options)));
+			if (typeof option === 'string') methodReturn = data[option]();
+		});
+
+		return (methodReturn === undefined) ? $set : methodReturn;
+	};
+
+	$.fn.pillbox.defaults = {};
+
+	$.fn.pillbox.Constructor = Pillbox;
+
+
+	// PILLBOX DATA-API
+
+	$(function () {
+		$('body').on('mousedown.pillbox.data-api', '.pillbox', function (e) {
+			var $this = $(this);
+			if ($this.data('pillbox')) return;
+			$this.pillbox($this.data());
+		});
+	});
+	
+}(window.jQuery);
+

data/vendor/assets/javascripts/fuelux/search.js

@@ -0,0 +1,100 @@
+/*
+ * Fuel UX Search
+ * https://github.com/ExactTarget/fuelux
+ *
+ * Copyright (c) 2012 ExactTarget
+ * Licensed under the MIT license.
+ */
+
+!function ($) {
+
+
+	// SEARCH CONSTRUCTOR AND PROTOTYPE
+
+	var Search = function (element, options) {
+		this.$element = $(element);
+		this.options = $.extend({}, $.fn.search.defaults, options);
+		this.$element.find('button').on('click', $.proxy(this.buttonclicked, this));
+		this.$input = this.$element.find('input').on('keyup', $.proxy(this.keypressed, this));
+		this.$icon = this.$element.find('i');
+		this.activeSearch = '';
+	};
+
+	Search.prototype = {
+
+		constructor: Search,
+
+		search: function (searchText) {
+			this.$icon.attr('class', 'icon-remove');
+			this.activeSearch = searchText;
+			this.$element.trigger('searched', searchText);
+		},
+
+		clear: function () {
+			this.$icon.attr('class', 'icon-search');
+			this.activeSearch = '';
+			this.$input.val('');
+			this.$element.trigger('cleared');
+		},
+
+		action: function () {
+			var val = this.$input.val();
+			var inputEmptyOrUnchanged = val === '' || val === this.activeSearch;
+
+			if (this.activeSearch && inputEmptyOrUnchanged) {
+				this.clear();
+			} else if (val) {
+				this.search(val);
+			}
+		},
+
+		buttonclicked: function (e) {
+			e.preventDefault();
+			this.action();
+		},
+
+		keypressed: function (e) {
+			var val, inputPresentAndUnchanged;
+
+			if (e.which === 13) {
+				e.preventDefault();
+				this.action();
+			} else {
+				val = this.$input.val();
+				inputPresentAndUnchanged = val && (val === this.activeSearch);
+				this.$icon.attr('class', inputPresentAndUnchanged ? 'icon-remove' : 'icon-search');
+			}
+		}
+
+	};
+
+
+	// SEARCH PLUGIN DEFINITION
+
+	$.fn.search = function (option) {
+		return this.each(function () {
+			var $this = $(this);
+			var data = $this.data('search');
+			var options = typeof option === 'object' && option;
+
+			if (!data) $this.data('search', (data = new Search(this, options)));
+			if (typeof option === 'string') data[option]();
+		});
+	};
+
+	$.fn.search.defaults = {};
+
+	$.fn.search.Constructor = Search;
+
+
+	// SEARCH DATA-API
+
+	$(function () {
+		$('body').on('mousedown.search.data-api', '.search', function () {
+			var $this = $(this);
+			if ($this.data('search')) return;
+			$this.search($this.data());
+		});
+	});
+
+}(window.jQuery);

data/vendor/assets/javascripts/fuelux/spinner.js

@@ -0,0 +1,183 @@
+/*
+ * Fuel UX Spinner
+ * https://github.com/ExactTarget/fuelux
+ *
+ * Copyright (c) 2012 ExactTarget
+ * Licensed under the MIT license.
+ */
+
+!function ($) {
+
+
+	// SPINNER CONSTRUCTOR AND PROTOTYPE
+
+	var Spinner = function (element, options) {
+		this.$element = $(element);
+		this.options = $.extend({}, $.fn.spinner.defaults, options);
+		this.$input = this.$element.find('.spinner-input');
+		this.$element.on('keyup', this.$input, $.proxy(this.change, this));
+
+		if (this.options.hold) {
+			this.$element.on('mousedown', '.spinner-up', $.proxy(function() { this.startSpin(true); } , this));
+			this.$element.on('mouseup', '.spinner-up, .spinner-down', $.proxy(this.stopSpin, this));
+			this.$element.on('mouseout', '.spinner-up, .spinner-down', $.proxy(this.stopSpin, this));
+			this.$element.on('mousedown', '.spinner-down', $.proxy(function() {this.startSpin(false);} , this));
+		} else {
+			this.$element.on('click', '.spinner-up', $.proxy(function() { this.step(true); } , this));
+			this.$element.on('click', '.spinner-down', $.proxy(function() { this.step(false); }, this));
+		}
+
+		this.switches = {
+			count: 1,
+			enabled: true
+		};
+
+		if (this.options.speed === 'medium') {
+			this.switches.speed = 300;
+		} else if (this.options.speed === 'fast') {
+			this.switches.speed = 100;
+		} else {
+			this.switches.speed = 500;
+		}
+
+		this.render();
+
+		if (this.options.disabled) {
+			this.disable();
+		}
+	};
+
+	Spinner.prototype = {
+		constructor: Spinner,
+
+		render: function () {
+			this.$input.val(this.options.value);
+			this.$input.attr('maxlength',(this.options.max + '').split('').length);
+		},
+
+		change: function () {
+			var newVal = this.$input.val();
+
+			if(newVal/1){
+				this.options.value = newVal/1;
+			}else{
+				newVal = newVal.replace(/[^0-9]/g,'');
+				this.$input.val(newVal);
+				this.options.value = newVal/1;
+			}
+
+			this.$element.trigger('change');
+		},
+
+		stopSpin: function () {
+			clearTimeout(this.switches.timeout);
+			this.switches.count = 1;
+			this.$element.trigger('change');
+		},
+
+		startSpin: function (type) {
+
+			if (!this.options.disabled) {
+				var divisor = this.switches.count;
+
+				if (divisor === 1) {
+					this.step(type);
+					divisor = 1;
+				} else if (divisor < 3){
+					divisor = 1.5;
+				} else if (divisor < 8){
+					divisor = 2.5;
+				} else {
+					divisor = 4;
+				}
+
+				this.switches.timeout = setTimeout($.proxy(function() {this.iterator(type);} ,this),this.switches.speed/divisor);
+				this.switches.count++;
+			}
+		},
+
+		iterator: function (type) {
+			this.step(type);
+			this.startSpin(type);
+		},
+
+		step: function (dir) {
+			var curValue = this.options.value;
+			var limValue = dir ? this.options.max : this.options.min;
+
+			if ((dir ? curValue < limValue : curValue > limValue)) {
+				var newVal = curValue + (dir ? 1 : -1) * this.options.step;
+
+				if (dir ? newVal > limValue : newVal < limValue) {
+					this.value(limValue);
+				} else {
+					this.value(newVal);
+				}
+			}
+		},
+
+		value: function (value) {
+			if (value) {
+				this.options.value = value;
+				this.$input.val(value);
+				return this;
+			} else {
+				return this.options.value;
+			}
+		},
+
+		disable: function () {
+			this.options.disabled = true;
+			this.$input.attr('disabled','');
+			this.$element.find('button').addClass('disabled');
+		},
+
+		enable: function () {
+			this.options.disabled = false;
+			this.$input.removeAttr("disabled");
+			this.$element.find('button').removeClass('disabled');
+		}
+	};
+
+
+	// SPINNER PLUGIN DEFINITION
+
+	$.fn.spinner = function (option,value) {
+		var methodReturn;
+
+		var $set = this.each(function () {
+			var $this = $(this);
+			var data = $this.data('spinner');
+			var options = typeof option === 'object' && option;
+
+			if (!data) $this.data('spinner', (data = new Spinner(this, options)));
+			if (typeof option === 'string') methodReturn = data[option](value);
+		});
+
+		return (methodReturn === undefined) ? $set : methodReturn;
+	};
+
+	$.fn.spinner.defaults = {
+		value: 1,
+		min: 1,
+		max: 999,
+		step: 1,
+		hold: true,
+		speed: 'medium',
+		disabled: false
+	};
+
+	$.fn.spinner.Constructor = Spinner;
+
+
+	// SPINNER DATA-API
+
+	$(function () {
+		$('body').on('mousedown.spinner.data-api', '.spinner', function (e) {
+			var $this = $(this);
+			if ($this.data('.spinner')) return;
+			$this.spinner($this.data());
+		});
+	});
+
+}(window.jQuery);

data/vendor/toolkit/fuelux.less

@@ -0,0 +1,5 @@
+// Fuel UX controls
+@import "fuelux/combobox.less";
+@import "fuelux/datagrid.less";
+@import "fuelux/pillbox.less";
+@import "fuelux/spinner.less";

data/vendor/toolkit/fuelux/combobox.less

@@ -0,0 +1,5 @@
+.combobox {
+	a {
+		font-size: @baseFontSize;
+	}
+}

data/vendor/toolkit/fuelux/datagrid.less

@@ -0,0 +1,98 @@
+@tableBackgroundAccentDark: darken(@tableBackgroundAccent, 8%);
+
+.datagrid {
+
+	thead {
+
+		background-color: @tableBackgroundAccent;
+
+		.datagrid-header-title {
+			float: left;
+			line-height: 28px;
+			font-weight: normal;
+			font-size: 14px;
+			margin-right: 10px;
+		}
+
+		.datagrid-header-left {
+			float: left;
+		}
+
+		.datagrid-header-right {
+			float: right;
+		}
+
+		.sorted {
+			.gradientBar(@tableBackgroundAccent, @tableBackgroundAccentDark, @textColor, 'none');
+
+			i {
+				float: right;
+				margin-top: 2px;
+			}
+		}
+
+		.sortable {
+			cursor: pointer;
+
+			&:hover {
+				.gradientBar(@tableBackgroundAccent, @tableBackgroundAccentDark, @textColor, 'none');
+			}
+		}
+
+	}
+
+	tfoot {
+
+		background-color: @tableBackgroundAccent;
+
+		.datagrid-footer-left {
+
+			float: left;
+
+			.grid-controls {
+				margin-top: 7px;
+
+				select {
+					margin: 0 5px 1px;
+					width: 60px;
+				}
+
+				span {
+					font-weight: normal;
+				}
+			}
+
+		}
+
+		.datagrid-footer-right {
+
+			float: right;
+
+			.grid-pager {
+				> span {
+					font-weight: normal;
+					position: relative;
+					top: 8px;
+				}
+
+				.dropdown-menu {
+					min-width: 50px;
+				}
+
+				.combobox {
+					display: inline-block;
+					position: relative;
+					top: -2px;
+				}
+
+				> button {
+					position: relative;
+					top: 7px;
+				}
+			}
+
+		}
+
+	}
+
+}