Nominal/striper.js
author Christian Urban <urbanc@in.tum.de>
Fri, 19 Jul 2019 11:38:54 +0100
changeset 579 58c09367912e
parent 408 0afff550c157
permissions -rw-r--r--
updated
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
408
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
     1
// Splintered striper 1.3
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
     2
// reworking of Zebra Tables and similar methods which works not only for tables and even/odd rows,
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
     3
// but as a general DOM means of assigning any number of classes to children of a parent element.
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
     4
// Patrick H. Lauke aka redux / www.splintered.co.uk
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
     5
// Distributed under the Creative Commons Attribution-ShareAlike license - http://creativecommons.org/licenses/by-sa/2.0/
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
     6
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
     7
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
     8
/*
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
     9
 * Summary:      Core experiment function that applies any number of classes to all child elements
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    10
 *               contained in all occurences of a parent element (either with or without a specific class)
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    11
 * Parameters:   parentElementTag - parent tag name
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    12
 *               parentElementClass - class assigned to the parent; if null, all parentElementTag elements will be affected
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    13
 *               childElementTag -  tag name of the child elements to apply the styles to
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    14
 *               styleClasses - comma separated list of any number of style classes (using 2 classes gives the classic "zebra" effect)
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    15
 * Return:       none
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    16
 */
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    17
function striper(parentElementTag, parentElementClass, childElementTag, styleClasses)
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    18
{
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    19
	var i=0,currentParent,currentChild;
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    20
	// capability and sanity check
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    21
	if ((document.getElementsByTagName)&&(parentElementTag)&&(childElementTag)&&(styleClasses)) {
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    22
		// turn the comma separate list of classes into an array
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    23
		var styles = styleClasses.split(',');
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    24
		// get an array of all parent tags
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    25
		var parentItems = document.getElementsByTagName(parentElementTag);
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    26
		// loop through all parent elements
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    27
		while (currentParent = parentItems[i++]) {
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    28
			// if parentElementClass was null, or if the current parent's class matches the specified class
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    29
			if ((parentElementClass == null)||(currentParent.className == parentElementClass)) {
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    30
				var j=0,k=0;
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    31
				// get all child elements in the current parent element
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    32
				var childItems = currentParent.getElementsByTagName(childElementTag);
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    33
				// loop through all child elements
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    34
				while (currentChild = childItems[j++]) {
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    35
					// based on the current element and the number of styles in the array, work out which class to apply
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    36
					k = (j+(styles.length-1)) % styles.length;
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    37
					// add the class to the child element - if any other classes were already present, they're kept intact
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    38
					currentChild.className = currentChild.className+" "+styles[k];
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    39
				}
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    40
			}
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    41
		}
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    42
	}
0afff550c157 updated
Christian Urban <christian dot urban at kcl dot ac dot uk>
parents:
diff changeset
    43
}