ChrisMissal/productFeedback.js

## productFeedback.js
(function($) {

    $.productFeedback = function(element, options) {

        var defaults = {
			idPrefix: "productFeedbackElement",
			message: "Was this information helpful?",
			containerClass: "product-feedback",
			linkClass: "clickable",
			postAction: "/feedback/add",
			thanksText: "Thanks you for your feedback! We will be reviewing these and making adjustments as needed."
        };

        var plugin = this;
			plugin.settings = {},
			plugin.yes = {},
			plugin.no = {},
			$element = $(element),
			element = element;

        plugin.init = function() {
            plugin.settings = $.extend({}, defaults, options);

			var section = $element.attr("id"),
				yes = buildLink("Yes"),
				no = buildLink("No"),
				helpful = $("<div>")
					.attr("id", plugin.settings.idPrefix + "_" + section)
					.addClass(plugin.settings.containerClass)
					.text(plugin.settings.message);

			helpful.append(plugin.yes = yes);
			helpful.append(plugin.no = no);

			$element.append(helpful);
        }

		var buildLink = function (textResponse) {
			return $("<span>").text(textResponse).addClass(plugin.settings.linkClass).click(function () {
				logClick({ section: section, sku: plugin.settings.sku, response: textResponse })
			});
		};

		var feedbackReceived = function (obj) {
			$("#" + plugin.settings.idPrefix + "_" + obj.Data.Section)
				.text(plugin.settings.thanksText);
		};

		var logClick = function (feedback) {
			$.ajax({
				url: plugin.settings.postAction,
				data: { Section: feedback.section, Sku: feedback.sku, Helpful: feedback.response === "Yes" },
				type: "POST",
				dataType: "json",
				cache: false,
				success: feedbackReceived
			});
        };

        plugin.init();
    }

    $.fn.productFeedback = function(options) {

        return this.each(function() {
            if (undefined == $(this).data('productFeedback')) {
                var plugin = new $.productFeedback(this, options);
                $(this).data('productFeedback', plugin);
            }
        });
    }

})(jQuery);

## productFeedback.js.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>productFeedback.js tests</title>
    <link rel="stylesheet" href="qunit.css" type="text/css" />
	<style type="text/css">
	.ac_container { margin-left: -9999px; }
	</style>
</head>
<body>
	<h1 id="qunit-header">productFeedback.js tests</h1>
	<h2 id="qunit-banner"></h2>
	<h2 id="qunit-userAgent"></h2>
	<ol id="qunit-tests"></ol>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="qunit.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {

		module("Plugin text tests");

		test("default message should be provided if message not provided", function () {

			var element = $("<p>").productFeedback();
			var defaultMessage = element.data("productFeedback").settings.message;
			var containsText = element.text().indexOf(defaultMessage) !== -1;

			equal(containsText, true, "contains default message: [" + defaultMessage + "]");
		});

		test("custom message should be set if passed in", function () {

			var expectedMessage = "tell us something!";
			var element = $("<div>").productFeedback({ message: expectedMessage });
			var containsText = element.text().indexOf(expectedMessage) !== -1;

			equal(containsText, true);
		});

		test("element should have a 'Yes' and a 'No' span", function () {

			var element = $("<div>").productFeedback();
			var plugin = element.data("productFeedback");

			equal(element.find("span").length, 2);
			equal(plugin.yes.text(), "Yes");
			equal(plugin.no.text(), "No");
		});

		module("Attribute tests");

		test("element should be added with an expected ID", function () {

			var element = $("<span id=\"test\">").productFeedback();
				$("#test-block").hide().append(element);

			var defaultIdPrefix = element.data("productFeedback").settings.idPrefix;
			var expectedId = defaultIdPrefix + "_test";
			var feedbackElement = $("#" + expectedId);

			equal(feedbackElement.length, 1, "");
		});

		test("Yes and No should have default class", function () {

			var element = $("<p>").productFeedback();
			var plugin = element.data("productFeedback");
			var defaultClass = plugin.settings.linkClass;

			equal(plugin.yes.attr("class"), defaultClass);
		});
	});

	</script>

	<div id="test-block"></div>

    <script type="text/javascript" src="/content/js/productFeedback.js"></script>
</body>
</html>
	(function($) {

	$.productFeedback = function(element, options) {

	var defaults = {
	idPrefix: "productFeedbackElement",
	message: "Was this information helpful?",
	containerClass: "product-feedback",
	linkClass: "clickable",
	postAction: "/feedback/add",
	thanksText: "Thanks you for your feedback! We will be reviewing these and making adjustments as needed."
	};

	var plugin = this;
	plugin.settings = {},
	plugin.yes = {},
	plugin.no = {},
	$element = $(element),
	element = element;

	plugin.init = function() {
	plugin.settings = $.extend({}, defaults, options);

	var section = $element.attr("id"),
	yes = buildLink("Yes"),
	no = buildLink("No"),
	helpful = $("<div>")
	.attr("id", plugin.settings.idPrefix + "_" + section)
	.addClass(plugin.settings.containerClass)
	.text(plugin.settings.message);

	helpful.append(plugin.yes = yes);
	helpful.append(plugin.no = no);

	$element.append(helpful);
	}

	var buildLink = function (textResponse) {
	return $("<span>").text(textResponse).addClass(plugin.settings.linkClass).click(function () {
	logClick({ section: section, sku: plugin.settings.sku, response: textResponse })
	});
	};

	var feedbackReceived = function (obj) {
	$("#" + plugin.settings.idPrefix + "_" + obj.Data.Section)
	.text(plugin.settings.thanksText);
	};

	var logClick = function (feedback) {
	$.ajax({
	url: plugin.settings.postAction,
	data: { Section: feedback.section, Sku: feedback.sku, Helpful: feedback.response === "Yes" },
	type: "POST",
	dataType: "json",
	cache: false,
	success: feedbackReceived
	});
	};

	plugin.init();
	}

	$.fn.productFeedback = function(options) {

	return this.each(function() {
	if (undefined == $(this).data('productFeedback')) {
	var plugin = new $.productFeedback(this, options);
	$(this).data('productFeedback', plugin);
	}
	});
	}

	})(jQuery);
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
	<title>productFeedback.js tests</title>
	<link rel="stylesheet" href="qunit.css" type="text/css" />
	<style type="text/css">
	.ac_container { margin-left: -9999px; }
	</style>
	</head>
	<body>
	<h1 id="qunit-header">productFeedback.js tests</h1>
	<h2 id="qunit-banner"></h2>
	<h2 id="qunit-userAgent"></h2>
	<ol id="qunit-tests"></ol>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="qunit.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {

	module("Plugin text tests");

	test("default message should be provided if message not provided", function () {

	var element = $("<p>").productFeedback();
	var defaultMessage = element.data("productFeedback").settings.message;
	var containsText = element.text().indexOf(defaultMessage) !== -1;

	equal(containsText, true, "contains default message: [" + defaultMessage + "]");
	});

	test("custom message should be set if passed in", function () {

	var expectedMessage = "tell us something!";
	var element = $("<div>").productFeedback({ message: expectedMessage });
	var containsText = element.text().indexOf(expectedMessage) !== -1;

	equal(containsText, true);
	});

	test("element should have a 'Yes' and a 'No' span", function () {

	var element = $("<div>").productFeedback();
	var plugin = element.data("productFeedback");

	equal(element.find("span").length, 2);
	equal(plugin.yes.text(), "Yes");
	equal(plugin.no.text(), "No");
	});

	module("Attribute tests");

	test("element should be added with an expected ID", function () {

	var element = $("<span id=\"test\">").productFeedback();
	$("#test-block").hide().append(element);

	var defaultIdPrefix = element.data("productFeedback").settings.idPrefix;
	var expectedId = defaultIdPrefix + "_test";
	var feedbackElement = $("#" + expectedId);

	equal(feedbackElement.length, 1, "");
	});

	test("Yes and No should have default class", function () {

	var element = $("<p>").productFeedback();
	var plugin = element.data("productFeedback");
	var defaultClass = plugin.settings.linkClass;

	equal(plugin.yes.attr("class"), defaultClass);
	});
	});

	</script>

	<div id="test-block"></div>

	<script type="text/javascript" src="/content/js/productFeedback.js"></script>
	</body>
	</html>