cableFinder.js

gistfile1.txt

(function () {
	"use strict";
	/*jslint nomen: true */

	var $,
		_,

		$init = function () {
			/*global ccs_jq: false, ccs_underscore: false*/
			$ = $ || ccs_jq;
			_ = _ || ccs_underscore;
		},

		exportFunction = function (name, f) {
			/*global window: false */
			window[name] = function () {
				$init();
				f.apply(this, arguments);
			};
		},

		$create = function (elementName, properties) {
			properties = properties || {};
			return $("<" + elementName + "/>", properties);
		},

		$createText = function (text) {
			/*global document: false */
			return $(document.createTextNode(text));
		},

		wrapHandler = function (handler) {
			return function () {
				/*global setTimeout: false */
				var self = this,
					args = arguments;

				setTimeout(function () {
					handler.apply(self, args);
				}, 1);

				return false;
			};
		},

		$results = function () {
			return $("#results");
		},

		$filters = function () {
			return $("#ccs-cc-filters");
		},

		sizes = {
			a: { min: 0, max: 1, name: "1' or less" },
			b: { min: 1, max: 3, name: "1' to 3'" },
			c: { min: 3, max: 6, name: "3' to 6'" },
			d: { min: 6, max: 12, name: "6' to 12'" },
			e: { min: 12, max: 24, name: "12' or above" }
		},

		activateConnectorMenu = function (elem) {
			$(elem).closest(".finder-step2").find(".finder-connectorstep-container").removeClass("activeSelect");
			$(elem).closest(".finder-connectorstep-container").addClass("activeSelect");
		},

		currentCables,
		currentFilteredCables,

		showCables = function () {
			var cables = currentFilteredCables,
				results = $results(),
				ul = $create("ul"),
				lis = _.map(cables, function (cable) {
					var dl = $create("dl");
					return $create("li").append(dl.append.apply(dl, _.flatten(_.map(cable, function (value, key) {
						return [$create("dt").text(key), $create("dd").text(value)];
					}))));
				});

			results.empty().append(ul.append.apply(ul, lis));
		},

		recalculateFilters = function (cables) {
		},

		onFiltersChange = function () {
			var _checkedSizes = _.chain($filters().find("input[name='size']:checked")).map(function (input) { return sizes[$(input).val()]; }),
				_checkedColors = _.chain($filters().find("input[name='color']:checked")).map(function (input) { return $(input).val(); }),
				_checkedManufacturers = _.chain($filters().find("input[name='manufacturer']:checked")).map(function (input) { return $(input).val(); }),
				filtersData = [
					{ comparer: function (cable, filterValue) { return filterValue.min <= cable.cableLength && cable.cableLength < filterValue.max; }, _values: _checkedSizes },
					{ comparer: function (cable, filterValue) { return cable.color === filterValue; }, _values: _checkedColors },
					{ comparer: function (cable, filterValue) { return cable.manufacturer === filterValue; }, _values: _checkedManufacturers }
				];

			currentFilteredCables = _.filter(currentCables, function (cable) {
				return _.reduce(filtersData, function (memo, filter) {
					return memo && filter._values.reduce(function (memo, filterValue) {
						return memo || filter.comparer(cable, filterValue);
					}, false).value();
				}, true);
			});
			showCables();
		},

		showFilters = function () {
			var _sizes = _.chain(sizes)
					.map(function (size, key) { return { title: size.name, value: key }; }),
				_colors = _.chain(currentCables)
					.map(function (cable) { return cable.color; })
					.sort()
					.uniq(true)
					.map(function (color) { return { title: color.toUpperCase(), value: color }; }),
				_manufacturers = _.chain(currentCables)
					.map(function (cable) { return cable.manufacturer; })
					.sort()
					.uniq(true)
					.map(function (manufacturer) { return { title: manufacturer.toUpperCase(), value: manufacturer }; }),
				filtersData = [
					{ title: "Select some length diapasons", name: "size", values: _sizes },
					{ title: "Select some colors", name: "color", values: _colors },
					{ title: "Select some manufacturers", name: "manufacturer", values: _manufacturers }
				];

			_.chain($filters())
				.tap(function ($filters) { $filters.empty(); })
				.tap(function ($filters) {
					$filters.append.apply($filters, _.map(filtersData, function (filter) {
						return _.tap($create("fieldset"), function ($fieldset) {
							$fieldset
								.append($createText(filter.title))
								.append(
									$create("div")
										.append($create("a", { text: "All", href: "#" }).on("click", wrapHandler(function () {
											$fieldset.find("input[type='checkbox']").attr({ checked: true });
											onFiltersChange();
										})))
										.append($createText(" | "))
										.append($create("a", { text: "None", href: "#" }).on("click", wrapHandler(function () {
											$fieldset.find("input[type='checkbox']").attr({ checked: false });
											onFiltersChange();
										})))
								)
								.append.apply($fieldset, filter.values.map(function (filterValue) {
									return $create("label").append(
										$create("div").append(
											$create("input", { type: "checkbox", name: filter.name, value: filterValue.value, checked: true })
												.on("change click", onFiltersChange)
										).append($createText(" " + filterValue.title))
									);
								}).value());
						});
					}));
				});
		},

		processCables = function (cables) {
			currentCables = cables;
			showFilters();

			currentFilteredCables = cables;
			showCables();
			recalculateFilters();
		},

		clearCables = function () {
			var results = $("#results");
			currentCables = null;
			currentFilteredCables = null;
			results.empty().text("Not all steps have been performed");
		};

	exportFunction("processCables", processCables);
	exportFunction("clearCables", clearCables);
	exportFunction("activateConnectorMenu", activateConnectorMenu);
}());