Skip to content

Commit

Permalink
Customization on Zebra for ol and ul list
Browse files Browse the repository at this point in the history
  • Loading branch information
@duboisp
duboisp committed Aug 14, 2012
1 parent 60e1a1f commit 429e72f
Show file tree
Hide file tree
Showing 7 changed files with 128 additions and 34 deletions.
2 changes: 1 addition & 1 deletion build/js/css/pe-ap-ie-min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/js/css/pe-ap-min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/js/pe-ap-min.js
View file

Large diffs are not rendered by default.

35 changes: 34 additions & 1 deletion demos/zebra/zebra-eng.html
View file
Expand Up @@ -415,7 +415,40 @@ <h1 id="wb-cont">Zebra striping - Web Experience Toolkit (WET)</h1>
</li>
</ol>
</section></div>
</section>

<div class="clear"></div>




<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>
<li>Duis dictum lacus ac turpis gravida in interdum mauris adipiscing. Mauris leo lorem, lobortis eu malesuada a, molestie sed eros.</li>
<li>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.</li>
<li>Ut vel risus tellus. Suspendisse potenti. Sed est urna, venenatis at auctor eu, vulputate bibendum sem.</li>
<li>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.</li>
<li>Aenean id elit in metus consectetur bibendum non at massa. Phasellus dictum varius nibh vel scelerisque. Curabitur sollicitudin purus urna, ac ullamcorper magna.</li>
<li>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.</li>
</ol>
</section></div>



<div class="span-4"><section><h3>List with <code>wet-boew-zebra</code>, <code>alterwg</code>, <code>nomargin</code> and <code>nohover</code> class</h3>
<ol class="wet-boew-zebra alterwg nomargin nohover">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum massa quis velit rutrum commodo.</li>
<li>Duis dictum lacus ac turpis gravida in interdum mauris adipiscing. Mauris leo lorem, lobortis eu malesuada a, molestie sed eros.</li>
<li>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.</li>
<li>Ut vel risus tellus. Suspendisse potenti. Sed est urna, venenatis at auctor eu, vulputate bibendum sem.</li>
<li>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.</li>
<li>Aenean id elit in metus consectetur bibendum non at massa. Phasellus dictum varius nibh vel scelerisque. Curabitur sollicitudin purus urna, ac ullamcorper magna.</li>
<li>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.</li>
</ol>
</section></div>




<dl id="gcwu-date-mod" role="contentinfo">
<dt>Date modified:</dt><dd><span><time>2011-10-31</time></span></dd>
Expand Down
42 changes: 41 additions & 1 deletion demos/zebra/zebra-fra.html
View file
Expand Up @@ -414,7 +414,47 @@ <h1 id="wb-cont">Rayage du zèbre</h1>
</li>
</ol>
</section></div>
</section>




<div class="clear"></div>




<div class="span-4"><section><h3>Liste avec la classe &#171;&#160;<code lang="en">wet-boew-zebra</code>&#160;&#187; et &#171;&#160;<code lang="en">alterwg</code>&#160;&#187;</h3>
<ol class="wet-boew-zebra alterwg">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum massa quis velit rutrum commodo.</li>
<li>Duis dictum lacus ac turpis gravida in interdum mauris adipiscing. Mauris leo lorem, lobortis eu malesuada a, molestie sed eros.</li>
<li>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.</li>
<li>Ut vel risus tellus. Suspendisse potenti. Sed est urna, venenatis at auctor eu, vulputate bibendum sem.</li>
<li>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.</li>
<li>Aenean id elit in metus consectetur bibendum non at massa. Phasellus dictum varius nibh vel scelerisque. Curabitur sollicitudin purus urna, ac ullamcorper magna.</li>
<li>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.</li>
</ol>
</section></div>



<div class="span-4"><section><h3>Liste avec la classe &#171;&#160;<code lang="en">wet-boew-zebra</code>&#160;&#187;, &#171;&#160;<code lang="en">alterwg</code>&#160;&#187;, &#171;&#160;<code lang="en">nomargin</code>&#160;&#187; et &#171;&#160;<code lang="en">nohover</code>&#160;&#187;</h3>
<ol class="wet-boew-zebra alterwg nomargin nohover">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum massa quis velit rutrum commodo.</li>
<li>Duis dictum lacus ac turpis gravida in interdum mauris adipiscing. Mauris leo lorem, lobortis eu malesuada a, molestie sed eros.</li>
<li>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.</li>
<li>Ut vel risus tellus. Suspendisse potenti. Sed est urna, venenatis at auctor eu, vulputate bibendum sem.</li>
<li>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.</li>
<li>Aenean id elit in metus consectetur bibendum non at massa. Phasellus dictum varius nibh vel scelerisque. Curabitur sollicitudin purus urna, ac ullamcorper magna.</li>
<li>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.</li>
</ol>
</section></div>








<dl id="gcwu-date-mod" role="contentinfo">
<dt>Date de modification&#160;:</dt><dd><span><time>2011-10-31</time></span></dd>
Expand Down
16 changes: 16 additions & 0 deletions src/js/sass/zebra.scss
View file
Expand Up @@ -38,6 +38,22 @@ table {
background-color:#f0fcff!important;
}
}
&.alterwg li {
&.list-odd{
background-color:#ddd!important;
border:none;
}
&.list-even{
background-color:#fff!important;
border:none;
}
&.list-hover{
background-color:#f0fcff!important;
}
}
&.nomargin {
margin: 0px;
}
th{
background-color:#eee;
border:1px solid #ccc;
Expand Down
63 changes: 34 additions & 29 deletions src/js/workers/zebra.js
View file
Expand Up @@ -25,32 +25,33 @@
overrides,
getCellHeaders,
autoRemoveTimeout;
// Defaults Options
opts = {
noheaderhighlight: false,
norowheaderhighlight: false,
nocolheaderhighlight: false,
columnhighlight: false,
nohover: false
};
// Option to force to do not get header highlight
overrides = {
noheaderhighlight: elem.hasClass("noheaderhighlight") ? true : undefined,
norowheaderhighlight: elem.hasClass("norowheaderhighlight") ? true : undefined,
nocolheaderhighlight: elem.hasClass("nocolheaderhighlight") ? true : undefined,
columnhighlight: elem.hasClass("columnhighlight") ? true : undefined,
nohover: elem.hasClass("nohover") ? true : undefined
};
// Extend the defaults with settings passed through settings.js (wet_boew_zebra), class-based overrides and the data attribute
//$.metadata.setType("attr", "data-wet-boew");
if (typeof wet_boew_zebra !== 'undefined' && wet_boew_zebra !== null) {
$.extend(opts, wet_boew_zebra, overrides); //, elem.metadata());
} else {
$.extend(opts, overrides); //, elem.metadata());
}
if (opts.norowheaderhighlight && opts.nocolheaderhighlight) {
opts.noheaderhighlight = true;
}
if (elem.is('table')) {
// Defaults
opts = {
noheaderhighlight: false,
norowheaderhighlight: false,
nocolheaderhighlight: false,
columnhighlight: false
};
// Option to force to do not get header highlight
overrides = {
noheaderhighlight: elem.hasClass("noheaderhighlight") ? true : undefined,
norowheaderhighlight: elem.hasClass("norowheaderhighlight") ? true : undefined,
nocolheaderhighlight: elem.hasClass("nocolheaderhighlight") ? true : undefined,
columnhighlight: elem.hasClass("columnhighlight") ? true : undefined
};
// Extend the defaults with settings passed through settings.js (wet_boew_zebra), class-based overrides and the data attribute
//$.metadata.setType("attr", "data-wet-boew");
if (typeof wet_boew_zebra !== 'undefined' && wet_boew_zebra !== null) {
$.extend(opts, wet_boew_zebra, overrides); //, elem.metadata());
} else {
$.extend(opts, overrides); //, elem.metadata());
}
if (opts.norowheaderhighlight && opts.nocolheaderhighlight) {
opts.noheaderhighlight = true;
}

// Parse the table
if (!$(elem).data().tblparser) {
_pe.fn.parsertable._exec($(elem));
Expand Down Expand Up @@ -209,15 +210,19 @@
$($cols).filter(':odd').addClass('table-even');
$($cols).filter(':even').addClass('table-odd');
}
} else if (elem.is('dl')) {
// Create a list based on "dt" element with their one or more "dd" after each of them
} else {
$lis = elem.children('li');
parity = (elem.parents('li').length + 1) % 2;
$lis.filter(':odd').addClass(parity === 0 ? 'list-odd' : 'list-even');
$lis.filter(':even').addClass(parity === 1 ? 'list-odd' : 'list-even');
$lis.on('mouseover mouseout focusin focusout', function (e) {
e.stopPropagation();
$(this).toggleClass('list-hover');
});
if (!opts.nohover) {
$lis.on('mouseover mouseout focusin focusout', function (e) {
e.stopPropagation();
$(this).toggleClass('list-hover');
});
}
}
} // end of exec
};
Expand Down

0 comments on commit 429e72f

Please sign in to comment.