nth-activated pseudos

nth-activated filter v2

/**
{
"title": "Nth-Activated State Filters",
"type": "selector",
"description": "Provides pseudo-classes for selecting elements based on the number of times activated",
"package": "bkardell.nth-activated",
"version": "2"
}
==========
	<h2>Nth-Activated State pseudo-class filters</h2>

	<p>Nth-Activated psudeo-classes provide a mechanism for selecting elements based on the number 
	of times the element has been activated, that is, clicked and entered the active state.</p>
        <p class="note">Note: unlike the :active state, nth-activated persists in time beyond the activation event itself.</p>
	
	<h2>Table of Contents</h2>
	<ol>
		<li><a href="#nth-activated">:-nth-activated</a></li>
	</ol>
	
	
	<h3 class="sectionnumber"><a name="nth-activated">1.  The -nth-activated pseudo-class</a></h3>
	<p>The activated pseudo class <span class="sig">:-nth-activated(<span class="arg"><em>a</em>n+<em>b</em></span>)</span>,
	is a funtional notation taking one required, simple, non-negative integer or basic (standard) 
	aN+b form algebraic expression.  It represents the number of times an element has been clicked and entered the active state.  
	</p>

	<div class="example">
		<p>Given the markup: </p>
		<pre>&lt;div class="foo"&gt;Hello&lt;/div&gt;
&lt;div class="bar"&gt;World&lt;/div&gt;
		</pre>
	   <p>and the rules:</p>
	   <pre>.foo, .bar{ background-color: red; }
.foo:-nth-activated(1){ background-color: white; } 
.bar:-nth-activated(2n){ background-color: blue; } 
</pre>
          <ul>
              <li>.bar will initially have a white background.</li>
              <li>Upon entering the active state for an odd numbered time, the background of .bar will become red (and stay that way) as the -nth-activated filter will be false.</li>
              <li>Upon entering the active state for an even numbered time, the background of .bar will become white (and stay that way) as the -nth-activated filter will be true.</li>
              <li>.foo will initially have a red background.</li>
              <li>Upon entering the active state the first time, the background of .foo will become white and stay that way as the -nth-active filter will be an exact match.</li>
              <li>Upon entering the active state any subsequent time, the background will revert to (or stay) red as the -nth-active filter will be false/not match.</li>
          </ul>
	</div>
	
**/
(function(){
    Hitch.add({
		name: '-nth-activated',
		base: '*,[data-nth-activated]',
                type: 'selector',
		filter:   function(m,args,o){
			var i = 0,
			    pArgs = args.split("n"), 
				root=pArgs[0], 
				n = args.indexOf('n') !== -1, 
				mod = (n) ? 0 : pArgs[1], 
				isNum = !isNaN(root), 
				my;			
			if(isNum || args===':-most-recent'){
				if(!m.getAttribute('data-nth-activated')){
					m.setAttribute('data-nth-activated', 1);
					m[Hitch.events.getAttacherFnName()]('click',function(){
						m.setAttribute('data-nth-activated', 1 + parseInt(m.getAttribute('data-nth-activated') || 1),10);		
						m.setAttribute('data-nth-activated-at', new Date().getTime());
					});
				} 
			}
			if(args===':-most-recent'){
				my = m.getAttribute('data-nth-activated-at') || 1; 
			    for(;i<o.siblings.length;i++){
			    	if((o.siblings[i].getAttribute('data-nth-activated-at') || (my + 1)) > my){
			    		return false;
			    	}
			    }
			    return true;
			}else if(n){
				return parseInt(m.getAttribute('data-nth-activated')  || 1, 10 ) % ( parseInt(root,10) + parseInt(mod,10) ) === 0;
					
			}else{
				return m.getAttribute('data-nth-activated') == root;
			}
				
		}    
    });
}());