Made extraction of DOM element classes compatible with IE9 (fixes snowplow#418)

Author: fblundun

src/js/forms.js

@@ -124,7 +124,7 @@ object.getFormTrackingManager = function (core, trackerId, contextAdder) {
 			var elt = e.target;
 			var type = elt.nodeName.toUpperCase() === 'INPUT' ? elt.type : null;
 			var value = (elt.type === 'checkbox' && !elt.checked) ? null : elt.value;
-			core.trackFormChange(getParentFormName(elt), getFormElementName(elt), elt.nodeName, type, lodash.map(elt.classList), value, contextAdder(context));
+			core.trackFormChange(getParentFormName(elt), getFormElementName(elt), elt.nodeName, type, helpers.getCssClasses(elt), value, contextAdder(context));
 		};
 	}
 
@@ -135,7 +135,7 @@ object.getFormTrackingManager = function (core, trackerId, contextAdder) {
 		return function (e) {
 			var elt = e.target;
 			var innerElements = getInnerFormElements(elt);
-			core.trackFormSubmission(getFormElementName(elt), lodash.map(elt.classList), innerElements, contextAdder(context));
+			core.trackFormSubmission(getFormElementName(elt), helpers.getCssClasses(elt), innerElements, contextAdder(context));
 		};
 	}
 

src/js/lib/helpers.js

@@ -158,11 +158,18 @@
 		}
 	};
 
+	/**
+	 * List the classes of a DOM element without using elt.classList (for compatibility with IE 9)
+	 */
+	object.getCssClasses = function (elt) {
+		return elt.className.match(/\S+/g);
+	};
+
 	/*
 	 * Check whether an element has at least one class from a given list
 	 */
 	function checkClass(elt, classList) {
-		var classes = lodash.map(elt.classList),
+		var classes = object.getCssClasses(elt),
 			i;
 
 		for (i = 0; i < classes.length; i++) {

src/js/links.js

@@ -91,7 +91,7 @@ object.getLinkTrackingManager = function (core, trackerId, contextAdder) {
 			if (!scriptProtocol.test(sourceHref)) {
 
 				elementId = sourceElement.id;
-				elementClasses = lodash.map(sourceElement.classList);
+				elementClasses = helpers.getCssClasses(sourceElement);
 				elementTarget = sourceElement.target;
 				elementContent = linkTrackingContent ? sourceElement.innerHTML : null;
 
@@ -155,7 +155,7 @@ object.getLinkTrackingManager = function (core, trackerId, contextAdder) {
 	 * Used to determine whether clicks on that link should be tracked
 	 */
 	function checkLink(linkElement, specifiedClasses) {
-		var linkClasses = lodash.map(linkElement.classList),
+		var linkClasses = helpers.getCssClasses(linkElement),
 			i;
 
 		for (i = 0; i < linkClasses.length; i++) {

tests/nonfunctional/helpers.js

@@ -98,4 +98,16 @@ define([
 			assert.equal(actual, expected);
 		},
 	});
+
+	registerSuite({
+		name: "getCssClasses test",
+		"Tokenize a DOM element's className field": function () {
+			var element = {
+				className: '   the  quick   brown_fox-jumps/over\nthe\t\tlazy   dog  '
+			};
+			var expected = ['the', 'quick', 'brown_fox-jumps/over', 'the', 'lazy', 'dog'];
+			var actual = helpers.getCssClasses(element);
+			assert.deepEqual(actual, expected);
+		},
+	});
 });