Time-pseudos

time-pseudos.js

/**
{
"title": "Timed State Filters",
"type": "selector",
"description": "Provides pseudo-classes for selecting elements based on the approximate time since their appearance in the tree.",
"package": "bkardell.time",
"version": "1"
}
==========
	<h2>Timed State pseudo-class filters</h2>

	<p>Time psudeo-classes provide a mechanism to select elements based on approximate duration of 
		time that they have been in the tree and local clock times.</p>
	
	<h2>Table of Contents</h2>
	<ol>
		<li><a href="#elapsed">:-time-elapsed</a></li>
		<li><a href="#after">:-time-after</a></li>
	</ol>
	
	
	<h3 class="sectionnumber"><a name="elapsed">1.  The -time-elapsed pseudo-class</a></h3>
	<p>The elapsed pseudo class <span class="sig">:-time-elapsed(<span class="arg">milliseconds</span>)</span>,
	is a funtional notation taking one optional non-negative integer argument representing a number 
	milliseconds since the element's original appearance in the tree.  
	</p>

	<div class="example">
		<p>Given the markup: </p>
		<ol>
			<li><code>&lt;div class="foo"&gt;Hello&lt;div&gt;World&lt;/div&gt;&lt;/div&gt;</code></li>
	   </ol>
	   <p>and the rules:</p>
	   <ol>
			<li><code>.foo div{ display: none; }</code></li>
			<li><code>.foo div:-time-elapsed(2000){ display: block;  }</code>
		   </li>
		</ol>
		<p>The text "world" will become visible after approximately 2 seconds.</code></p>
	</div>
	
	
	<h3 class="sectionnumber"><a name="after">2.  The -time-after pseudo-class</a></h3>

	<p>The after pseudo class <span class="sig">:-time-after(hh,mm)</span>,
	is a funtional notation taking two non-negative integer arguments representing hours and minutes
	in military time.  The rules is true if, upon checking, the user's local time is <em>after</em>
	the time specified.  The page itself triggers a check on roughly 30 second intervals.
	</p>
	<div class="example">
		<p>Example: </p>
		<p>Given the rules:</p>
		<pre>body{ background: url('morning.png'); }
body:-time-after(12,00){ background: url('afternoon.png'); }
body:-time-after(17,00){ background: url('nighttime.png'); }</pre>
		<ul>
			<li>If the user's local time is before noon, the background will use morning.png</li>
			<li>If the user's local time is after noon but before 5pm, the background will use afternoon.png</li>		
			<li>If the user's local time is after 5pm, the background will use nightime.png</li>
		</ul>
	</div>
**/
(function(){
	var timers = {}, 
	     clickIds = 1, 
	     attach = (document.addEventListener) ? document.addEventListener : document.attachEvent, 
	     originalDate = new Date(), 
	     hours = originalDate.getHours(), 
	     minutes = originalDate.getMinutes(), 
	     afters = [];
	     setInterval( function(){
	     	var t = new Date();
			hours = t.getHours();
			minutes = t.getMinutes();
			for(var i=0;i<afters.length;i++){
				afters[i].setAttribute('data-time-after',hours + ":" + minutes);
			}
		}, 30000);
		
    Hitch.add([{
		name: '-time-elapsed',
		base: '*,[data-time-elapsed]',
        type: 'selector',
		filter:   function(m,args){
			var ms = args, repeat = false;		
			if(!isNaN(ms)){
				if(!timers[ms]){ 
					timers[ms] = setTimeout(function(){
						m.setAttribute('data-time-elapsed', ms);
					},ms);
				}		   
			}
			return m.getAttribute('data-time-elapsed') == ms;
		}
    }, {
		name: '-time-after',
		base: '*,[data-time-after]',
        type: 'selector',
		filter:   function(el,args){
			var strArgs = args.split(","), h=strArgs[0] || 0, m = strArgs[1] || 0;			
			if(!isNaN(h) && !isNaN(m)){
				h = parseInt(h,10);
				m = parseInt(m,10);
				if(afters.indexOf(el) === -1){ afters.push(el); }
			}else{
				h = 0;
				m = 0;
			}
			return (hours > h) || (hours === h) && (minutes > m);
		}    
    }]);
}());