Added Zebra for definition list

wet-boew · Aug 15, 2012 · 53e551b · 53e551b
1 parent 5b62007
commit 53e551b
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 11 deletions.
diff --git a/build/js/css/pe-ap-ie-min.css b/build/js/css/pe-ap-ie-min.css
diff --git a/build/js/css/pe-ap-min.css b/build/js/css/pe-ap-min.css
diff --git a/build/js/pe-ap-min.js b/build/js/pe-ap-min.js
diff --git a/demos/zebra/zebra-eng.html b/demos/zebra/zebra-eng.html
@@ -420,7 +420,6 @@ <h1 id="wb-cont">Zebra striping - Web Experience Toolkit (WET)</h1>
 
 
 
-
 <div class="span-4"><section><h3>List with <code>wet-boew-zebra</code> and <code>alterwg</code> class</h3>
 <ol class="wet-boew-zebra alterwg">
 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum massa quis velit rutrum commodo.</li>
@@ -448,10 +447,53 @@ <h1 id="wb-cont">Zebra striping - Web Experience Toolkit (WET)</h1>
 </section></div>
 
 
+<div class="clear"></div>
+
+
+<div class="span-4"><section><h3>Default definition list appearance</h3>
+
+<dl>
+	<dt>Item A</dt>
+	<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum massa quis velit rutrum commodo.</dd>
+	<dt>Item B</dt>
+	<dd>Duis dictum lacus ac turpis gravida in interdum mauris adipiscing. Mauris leo lorem, lobortis eu malesuada a, molestie sed eros.</dd>
+	<dt>Item C</dt>
+	<dd>Vestibulum et dui ut velit dictum iaculis. Curabitur auctor viverra rutrum. Quisque id quam urna. Mauris quis urna in leo accumsan ultricies vitae sit amet felis.</dd>
+	<dt>Item D</dt>
+	<dd>Ut vel risus tellus. Suspendisse potenti. Sed est urna, venenatis at auctor eu, vulputate bibendum sem.</dd>
+	<dd>Aliquam erat volutpat. Maecenas aliquam dignissim urna nec viverra. Nulla fringilla fringilla orci, eget consectetur massa vulputate in. Morbi consectetur aliquam lacus, nec sollicitudin lorem molestie ut. Pellentesque scelerisque nulla eget mauris eleifend ac rutrum ligula scelerisque.</dd>
+	<dt>Item E</dt>
+	<dd>Aenean id elit in metus consectetur bibendum non at massa. Phasellus dictum varius nibh vel scelerisque. Curabitur sollicitudin purus urna, ac ullamcorper magna.</dd>
+	<dd>Phasellus accumsan risus id lacus cursus vitae fringilla sapien pulvinar. Duis viverra consectetur quam vitae pellentesque. Donec iaculis diam eget sem bibendum consequat. Nullam rhoncus bibendum lobortis. Sed consequat sagittis pharetra. Pellentesque accumsan, felis ut venenatis semper, metus odio sollicitudin libero, nec vestibulum lectus nibh vel libero. Fusce iaculis lectus vel ipsum auctor porta. Proin nec lectus augue, varius cursus orci.</dd>
+</dl>
+</section></div>
+
+<div class="span-4"><section><h3>Definition list with <code>wet-boew-zebra</code></h3>
+
+<dl class="wet-boew-zebra">
+	<dt>Item A</dt>
+	<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum massa quis velit rutrum commodo.</dd>
+	<dt>Item B</dt>
+	<dd>Duis dictum lacus ac turpis gravida in interdum mauris adipiscing. Mauris leo lorem, lobortis eu malesuada a, molestie sed eros.</dd>
+	<dt>Item C</dt>
+	<dd>Vestibulum et dui ut velit dictum iaculis. Curabitur auctor viverra rutrum. Quisque id quam urna. Mauris quis urna in leo accumsan ultricies vitae sit amet felis.</dd>
+	<dt>Item D</dt>
+	<dd>Ut vel risus tellus. Suspendisse potenti. Sed est urna, venenatis at auctor eu, vulputate bibendum sem.</dd>
+	<dd>Aliquam erat volutpat. Maecenas aliquam dignissim urna nec viverra. Nulla fringilla fringilla orci, eget consectetur massa vulputate in. Morbi consectetur aliquam lacus, nec sollicitudin lorem molestie ut. Pellentesque scelerisque nulla eget mauris eleifend ac rutrum ligula scelerisque.</dd>
+	<dt>Item E</dt>
+	<dd>Aenean id elit in metus consectetur bibendum non at massa. Phasellus dictum varius nibh vel scelerisque. Curabitur sollicitudin purus urna, ac ullamcorper magna.</dd>
+	<dd>Phasellus accumsan risus id lacus cursus vitae fringilla sapien pulvinar. Duis viverra consectetur quam vitae pellentesque. Donec iaculis diam eget sem bibendum consequat. Nullam rhoncus bibendum lobortis. Sed consequat sagittis pharetra. Pellentesque accumsan, felis ut venenatis semper, metus odio sollicitudin libero, nec vestibulum lectus nibh vel libero. Fusce iaculis lectus vel ipsum auctor porta. Proin nec lectus augue, varius cursus orci.</dd>
+</dl>
+</section></div>
+
+<div class="clear"></div>
+
+<h3>Special Note</h3>
 
+<p>The class <code>alterwg</code>, <code>nomargin</code> and <code>nohover</code> can be applied to unordered (<em>ul</em>), ordered (<em>ol</em>) and definition list (<em>dl</em>).</p>
 
 <dl id="gcwu-date-mod" role="contentinfo">
-<dt>Date modified:</dt><dd><span><time>2011-10-31</time></span></dd>
+<dt>Date modified:</dt><dd><span><time>2012-08-14</time></span></dd>
 </dl>
 <div class="clear"></div>
 <!-- MainContentEnd -->
@@ -518,4 +560,4 @@ <h1 id="wb-cont">Zebra striping - Web Experience Toolkit (WET)</h1>
 <script src="../../build/js/pe-ap-min.js"></script>
 <!-- ScriptsEnd -->
 </body>
-</html>
+</html>
diff --git a/src/js/sass/zebra.scss b/src/js/sass/zebra.scss
@@ -23,9 +23,13 @@ table {
 		margin-top:10px;
 	}
 }
-
+
+dl.wet-boew-zebra {
+	margin-left: 0px;
+}
+
 .wet-boew-zebra {
-	li {
+	li, dt, dd {
 		&.list-odd{
 			background-color:#ddd!important;
 			border:1px solid #ccc;
@@ -38,7 +42,7 @@ table {
 			background-color:#f0fcff!important;
 		}
 	}
-	&.alterwg li {
+	&.alterwg li, &.alterwg dt, &.alterwg dd {
 		&.list-odd{
 			background-color:#ddd!important;
 			border:none;
@@ -51,6 +55,25 @@ table {
 			background-color:#f0fcff!important;
 		}
 	}
+	dt, dd {
+		&.list-odd{
+			border:none;
+		}
+		&.list-even{
+			border:none;
+		}
+	}
+	dl, dd {
+		margin-left: 0px;
+	}
+	dt, dd {
+		padding: 10px;
+	}
+	dt {
+		font-weight:bold;
+		margin-top: 2px;
+	}
+
 	&.nomargin {
 		margin: 0px;
 	}
@@ -139,4 +162,4 @@ table {
 			background-color:#eee!important;
 		}
 	}
-}
+}
diff --git a/src/js/workers/zebra.js b/src/js/workers/zebra.js
@@ -212,6 +212,43 @@
 				}
 			} else if (elem.is('dl')) {
 				// Create a list based on "dt" element with their one or more "dd" after each of them
+				var lstDlItems = [],
+					isodd = false;
+					dlitem = [];
+
+				$(elem).children().each(function () {
+					var $this = $(this);
+					switch (this.nodeName.toLowerCase()) {
+					case 'dt':
+						if (isodd) {
+							isodd = false;
+						} else {
+							isodd = true;
+						}
+						dlitem = [];
+
+					case 'dd':
+						if (isodd) {
+							$this.addClass('list-odd');
+						} else {
+							$this.addClass('list-even');
+						}
+						lstDlItems.push($this.get(0));
+						$this.data().dlitem = dlitem;
+						dlitem.push($this.get(0));
+					default:
+						break;
+
+					}
+				});
+
+				if (!opts.nohover) {
+					$(lstDlItems).on('mouseover mouseout focusin focusout', function (e) {
+						e.stopPropagation();
+						$($(this).data().dlitem).toggleClass('list-hover');
+					});
+				}
+
 			} else {
 				$lis = elem.children('li');
 				parity = (elem.parents('li').length + 1) % 2;
@@ -228,4 +265,4 @@
 	};
 	window.pe = _pe;
 	return _pe;
-}(jQuery));
+}(jQuery));