Skip to content

Commit

Permalink
Add support to Sizzle
Browse files Browse the repository at this point in the history
  • Loading branch information
pure committed Dec 4, 2008
1 parent 39b41e1 commit 9da63e0
Show file tree
Hide file tree
Showing 4 changed files with 440 additions and 31 deletions.
165 changes: 165 additions & 0 deletions docs/allExamples-for-Sizzle.html
View file
@@ -0,0 +1,165 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:pure="http://beebole.com/pure">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>The Features of PURE Unobtrusive Rendering Engine for HTML</title>
<link href="css/white.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/sizzle.js"></script>
<script type="text/javascript" src="../js/pure.js"></script>
<script type="text/javascript" src="js/allExamples-for-Sizzle.js"></script>
</head>
<body class="allExamples">
<div class="links"><a href="allExamples.html">All Examples</a><br />
<a href="howToCompile.html">How to compile your html</a><br />
<a href="allExamplesCompiled.html">All Examples Compiled</a><br />
<a href="http://groups.google.com/group/Pure-Unobtrusive-Rendering-Engine/post">Post</a> or <a href="mailto:Pure-Unobtrusive-Rendering-Engine@googlegroups.com">mail us</a><br /> your feedback
</div>
<!--
/* * * * * * * * * * * * * * * * * * * * * *
* E X A M P L E 1
* * * * * * * * * * * * * * * * * * * * * */
-->
<h1>What are the features available in PURE today ?</h1>
This page groups all the features available in the last release.<br />
Click the render buttons to see the result.<br />
Look at the source of the page to see comments and usage or <a href="http://github.com/pure/pure/wikis/">have a look at the wiki</a>.
<h3>Example 1: Hello Who?</h3>
<div class="demo">
<input type="button" onclick="clickButton(this, render1);" value="render" />
<div class="htmlDoc">
<div id="hello">
Hello <span class="who">World</span>
</div>
</div>
<div id="target1"></div>
</div>
<!--
/* * * * * * * * * * * * * * * * * * * * * *
* E X A M P L E 2
* * * * * * * * * * * * * * * * * * * * * */
-->
<h3>Example 2: Iteration on a Table</h3>
<div class="demo">
<div class="htmlDoc">
<input type="button" onclick="clickButton(this, render2);" value="render" />
<table id="players1" class="players 1">
<thead>
<tr><th class="player">Player</th></tr>
</thead>
<tbody>
<tr class="context">
<td class="player context">Chloe</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--
/* * * * * * * * * * * * * * * * * * * * * *
* E X A M P L E 3
* * * * * * * * * * * * * * * * * * * * * */
-->
<h3>Example 3: Iteration on a List</h3>
<div class="demo">
<div class="htmlDoc">
<input type="button" onclick="clickButton(this, render3);" value="render" />
<!-- note the notation "data property"@"attribute name"-->
<ol id="siteList" class="teamList id@id">
<li class="player sites"><a class="name url@href" href="http://beebole.com">Beebole</a></li>
</ol>
</div>
</div>
<!--
/* * * * * * * * * * * * * * * * * * * * * *
* E X A M P L E 4
* * * * * * * * * * * * * * * * * * * * * */
-->
<h3>Example 4: Passing JS Functions as a Directive (Iteration on a table zebra like and attach events)</h3>
<div class="demo">
<div class="htmlDoc">
<input id="b4_1" type="button" onclick="clickButton(this, render4, '#b4_2');" value="render" />
<input id="b4_2" style="display:none" type="button" onclick="clickButton(this, render4, '#b4_1');" value="render with 500 lines..." />
<div class="timer"></div>
<table id="players2" class="players 2">
<thead>
<tr>
<th class="player">Player</th>
</tr>
</thead>
<tbody>
<tr class="context">
<td class="player context">Chloe</td>
</tr>
</tbody>
</table>
</div>
In addition to the zebra iteration, this example shows a way to attach events by a directive.<br />
To see those events, mouse-over the lines of the rendered table, and click on a line.<br/>
</div>
<!--
/* * * * * * * * * * * * * * * * * * * * * *
* E X A M P L E 5
* * * * * * * * * * * * * * * * * * * * * */
-->
<h3>Example 5: Nested Iteration</h3>
This was not explained in the examples. The objective here is to have a double iteration. First on teams, then on players.<br />
It shows the nested iteration and as well how a template can be included in another.
<div class="demo">
<div class="htmlDoc">
<input type="button" onclick="clickButton(this, render5);" value="render" />
<table class="scoreBoard">
<tbody>
<tr>
<td class="teamName">Team Name</td>
<td class="teamPlace">
<table class="teamList">
<thead>
<tr><th class="position">Position</th><th class="player">Player</th><th class="score">Score</th></tr>
</thead>
<tbody>
<tr class="row"><td class="position">P</td><td class="player">Chloe</td><td class="score">20</td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="transformation">
<div id="render5"></div>
</div>
</div>
<!--
/* * * * * * * * * * * * * * * * * * * * * *
* E X A M P L E 6
* * * * * * * * * * * * * * * * * * * * * */
-->
<h3>Example 6: Recursive List</h3>
<div class="demo">
<div class="htmlDoc">
<input type="button" onclick="clickButton(this, render6);" value="render" />
<ul class="treeItem">
<li class="children"><a class="name" href="#">name</a></li>
</ul>
</div>
</div>

<!--
/* * * * * * * * * * * * * * * * * * * * * *
* Hidden templates
* * * * * * * * * * * * * * * * * * * * * */
-->
<div class="templates">
<div class="timerTrace">
<table class="timerTraceTable">
<thead>
<tr><th class="timerMsg">(ms)</th><th class="timerDuration">Duration</th><th class="timerTime">Timer</th></tr>
</thead>
<tbody>
<tr class="context"><td class="timerMsg">Start</td><td class="timerDuration">0</td><td class="timerTime">0</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
230 changes: 230 additions & 0 deletions docs/js/allExamples-for-Sizzle.js
View file
@@ -0,0 +1,230 @@
/* * * * * * * * * * * * * * * * * * * * * *
* E X A M P L E 1
* * * * * * * * * * * * * * * * * * * * * */
function render1(){
$p.sizzle('div#hello').autoRender({ "who": "Mary" });}


/* * * * * * * * * * * * * * * * * * * * * *
* E X A M P L E 2
* * * * * * * * * * * * * * * * * * * * * */
function render2(){
var context = ["Alice Keasler", "Charles LeGrand", "Gary Bitemning", "Helen Moren"];
$p.sizzle('#players1').autoRender(context);}

// jQuery syntax
//$('table.players.1').autoRender(context);}

/* * * * * * * * * * * * * * * * * * * * * *
* E X A M P L E 3
* * * * * * * * * * * * * * * * * * * * * */
function render3(){
var context = {
"id": "3456",
sites: [{
"name": "Beebole","url": "http://beebole.com"}, {
"name": "BeeLit", "url": ""}, {
"name": "PURE", "url": "http://beebole.com/pure"}]};

$p.sizzle('#siteList').autoRender(context);}


// jQuery syntax
//$('ol.teamList').autoRender( context);}

/* Note:
to access the attributes of the root of the html use a directive as above for the id.
Only the name of the attribute is provided between brackets
For auto-rendering use the @ symbol as: property@attribute
i.e: url@href
*/

/* * * * * * * * * * * * * * * * * * * * * *
* E X A M P L E 4
* * * * * * * * * * * * * * * * * * * * * */
function swapStyle(obj, inOut){
obj.className = (inOut) ? 'player hover' : 'player';};

function clickLine(obj){
alert(obj.innerHTML)};

function render4(button){
// simulate a ajax-jsonp call, that will load here a static js, and call the example4CallBack function
button.value = 'loading data...';
timer.begin('loading data');
var context = ["Adrian Meador","Bryan O'Connor","Michèle Noïjû","تصبح عالميا مع يونيكود","Γέφυρα γρύλων","Chloé Ellemême","глобальных масштабах","יוצא לשוק העולמי","La \"volante\"","Todd Swift","Valerie Paige","Walter Hagelstein","Wendy Leatherbury"];
timer.log('Rendering');
var directive = {
'tbody tr[class]': function(arg){
//arg => {context:context, items:items, pos:pos, item:items[pos]};
var oddEven = (arg.pos % 2 == 0) ? 'even' : 'odd';
var firstLast = (arg.pos == 0) ? 'first' : (arg.pos == arg.items.length - 1) ? 'last' : '';
return oddEven + ' ' + firstLast;},
'tbody tr td[onclick]': "'clickLine(this)'", //show all differences of strings notationi "' '" '\'
'tbody tr td[onmouseover]': '"swapStyle(this, true);"',
'tbody tr td[onmouseout]': '\'swapStyle(this, false);\'',
'tbody tr td[style]': "\'cursor:pointer\'"}

$p.sizzle('table.players.2').autoRender(context, directive);

$p.sizzle('div.timer')[0].innerHTML = timer.end();
button.value = 'Refresh the page to render again';}

/*Note:
by default a directive replace the content of the selected node or attribute
If an append or prepend is necessary we use +
+<selector> means prepend the directive to the existing selected content
<selector>+ means append the directive to the existing selected content
Here as well is an example of attaching events to the HTML.
Not sure if there is another way of passing such objects to the transformation.
It has de advantage of not having to parse again the html to attach events after the transformation.
*/

/* * * * * * * * * * * * * * * * * * * * * *
* E X A M P L E 5
* * * * * * * * * * * * * * * * * * * * * */
var row = {
odd: 'odd',
even:'even',
decorator: function(arg){
return (arg.pos % 2 == 1) ? this.even : this.odd;}}

function lineNb(arg){
return arg.pos+1;}

function render5(){
var context = {
'teams': [{
'name':'Cats',
'players':[
{"first":"Alice","last":"Keasler", "score":14},
{"first":"","name":"", "score":0}, //show an example of space and zero
{"first":"Vicky","last":"Benoit", "score":15},
{"first":"Wayne", "last":"Dartt", "score":11}]},{

'name':'Dogs',
'players': [
{"first":"Ray","last":"Braun", "score":14},
{"first":"Aaron","last":"Ben", "score":24},
{"first":"Steven","last":"Smith", "score":1},
{"first":"Kim", "last":"Caffey", "score":19}]},{

'name':'Mices',
'players': [
{"first":"Natalie","last":"Kinney", "score":16},
{"first":"Caren","last":"Cohen", "score":3}]}]}

var scoreBoard = $p.sizzle('table.scoreBoard').mapDirective({
'tbody tr': 'team <- teams',
'td.teamName': 'team.name'});

var teamList = $p.sizzle('table.teamList', scoreBoard[0])
.mapDirective({
'tbody tr': 'player <- team.players',
'td.player': '#{player.first} (#{player.last})',
'td.score': 'player.score',
'td.position+': lineNb, //passing the pointer of a function that does not use "this"
'tbody tr[class]+': function(arg){ return row.decorator(arg) } }); //show how to wrap a method and not breack the use of "this"

$p.sizzle('td.teamPlace', scoreBoard[0])[0].innerHTML = $p.utils.outerHTML(teamList[0]); //place sub-template teamList in scoreBoard
$p.compile(scoreBoard[0], 'f5'); //compile to a function
$p.sizzle('div#render5')[0].innerHTML = $p.render('f5', context);} //place the result of the transformation to the innerHTML of div#render5

/* Note:
Here we compile the HTML to a function called f5.
This function can then be saved in a js file(using the $p.getRuntime method)
and called by the function render as above
*/

/* * * * * * * * * * * * * * * * * * * * * *
* E X A M P L E 6
* * * * * * * * * * * * * * * * * * * * * */
function render6(){

var context = {
children: [{
name:'Europe',
children:[{
name:'Belgium',
children:[{
name:'Brussels'},{
name:'Namur'},{
name:'Antwerpen'}]},{
name:'Germany'},{
name:'UK'}
]},{
name:'America',
children:[{
name:'US',
children:[{
name:'Alabama'},{
name:'Georgia'}
]},{
name:'Canada'},{
name:'Argentina'}]},{
name:'Asia'},{
name:'Africa'},{
name:'Antartica'}]};
var directive = {
'li+':function(arg){
if(arg.item.children){
return $p.compiledFunctions.tree.compiled(arg.item);}}};

$p.sizzle('ul.treeItem').compile('tree', directive, context);
$p.sizzle('ul.treeItem').render(context, 'tree');}

/*Note:
the last directive is an array instead of a string. This is useful
when we want to set various directives on the same node.
*/

//nothing with PURE here, just some utility for this page
function clickButton(obj, render){
obj.disabled = true;
obj.value = 'Refresh the page to render again';
if (arguments[2]) {
var elm = $p.sizzle(arguments[2])[0];
elm.parentNode.removeChild(elm);}
if (/Firefox/i.test(navigator.userAgent))
obj.type = 'submit';//to have buttons back when refreshing the page in FF
render(obj);
}
var timer = {
trace: [],
begin:function(msg){
this.start = 0;
this.log(msg);},

end: function(msg){
this.log(msg||'end');
if(!$p.compiledFunctions.timerTraceTable);
$p.autoCompile($p.sizzle('table.timerTraceTable')[0], 'timerTraceTable', this.trace);
return $p.render('timerTraceTable', this.trace);},

log: function(msg){
var now = function(){
var now = new Date();
return now.getTime();}

if (this.start)
this.diff = now() - this.start;
else {
this.diff = 0;
this.acc = 0;}
this.acc += this.diff;
this.start = now();
if(this.trace[this.trace.length-1]) this.trace[this.trace.length-1].timerDuration = this.diff;
this.trace.push({timerMsg:msg, timerDuration: 0, timerTime: this.acc});}}

function replace(replaced, html){
//use pure dom methods and not specific to a js library
//see the comment in example 1 for different syntax
var div = document.createElement('div');
replaced.parentNode.replaceChild(div, replaced);
div.innerHTML = html;
var replacer = div.firstChild;
div.parentNode.replaceChild(replacer, div);
return replacer;}


0 comments on commit 9da63e0

Please sign in to comment.