Skip to content

Commit

Permalink
added template for jquery templates
Browse files Browse the repository at this point in the history
  • Loading branch information
m.bova committed Sep 21, 2015
1 parent bf6bcbc commit 2d60919
Show file tree
Hide file tree
Showing 18 changed files with 1,142 additions and 206 deletions.
70 changes: 70 additions & 0 deletions POC/w2/1/index2.JQuery.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<h1>Super Yahoo pipes</h1>

<style>
#errors-block {
color: red;
}
</style>

    <script type="text/javascript" src="jquery-1.4.4.js"></script>
    <script type="text/javascript" src="jquery.tmpl.js"></script>

</head>
<body>
<div id="news">
</div>

    <script type="text/javascript">
        // Create an array of books
//         var books = [
//             { title: "ASP.NET 4 Unleashed", price: 37.79, picture: "1.jpg" },
//             { title: "ASP.NET MVC Unleashed", price: 44.99, picture: "2.jpg" },
//             { title: "ASP.NET Kick Start", price: 4.00, picture: "3.jpg" },
//             { title: "ASP.NET MVC Unleashed iPhone", price: 44.99, picture: "4.jpg" },
//         ];

        // Render the books using the template
//         $("#bookTemplate").tmpl(books).appendTo("#news"); 
    </script> 

    <script id="bookTemplate" type="text/x-jQuery-tmpl">
        <div>
            <h2>${title}</h2>
        </div>
    </script>

<script type="text/javascript">
// -----------------------------------------------------------------------------------------
// receive news from yahoo server
// -----------------------------------------------------------------------------------------
window.onload = function () {
//Create a SCRIPT element.
var script = document.createElement("script");
//Set the Type.
script.type = "text/javascript";
//Set the source to the URL the JSON Service.
script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
//Append the script element to the HEAD section.
document.getElementsByTagName("head")[0].appendChild(script);
};

// -----------------------------------------------------------------------------------------
// Display all received news on the page
// -----------------------------------------------------------------------------------------
function DisplayNews(response) {
var i;
////
console.log(response);
console.log(response.value.items);
// for(i = 0; i < response.count; i++) {
// CreateMainDivBlock(i);
// FillArticle(i, response);
// }
$("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
}
    </script>
</body>
</html>
62 changes: 62 additions & 0 deletions POC/w2/10/index2.JQuery.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery.tmpl.js"></script>
<h1>Super Yahoo pipes</h1>
</head>
<body>
<div id="news">
</div>
<script id="bookTemplate" type="text/x-jQuery-tmpl">
<div id="article-${count()}">
<div id="img-${count()}"><img height="50" id="image-${count()}" src=
${enclosure.url}
width="50"></div>
<div id="title-${count()}">
${title}
</div>
<div id="summary-${count()}">
${description}
</div>20
<div id="lnk-${count()}">
<a href=${link}
id="article-link-${count()}">-&gt;</a>
</div>
</div>
</script>
<script type="text/javascript">
var iii = 0;
function count()
{
return iii++;
}
</script>
<script type="text/javascript">
// TODO
// 1 - use jqury instead js
// 2 - use just one global variable
// -----------------------------------------------------------------------------------------
// receive news from yahoo server
// -----------------------------------------------------------------------------------------
window.onload = function () {
//Create a SCRIPT element.
var script = document.createElement("script");
//Set the Type.
script.type = "text/javascript";
//Set the source to the URL the JSON Service.
script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
//Append the script element to the HEAD section.
//document.getElementsByTagName("head")[0].appendChild(script);
$('head')[0].appendChild(script);
};

// -----------------------------------------------------------------------------------------
// Display all received news on the page
// -----------------------------------------------------------------------------------------
function DisplayNews(response) {
$("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
}
    </script>
</body>
</html>
55 changes: 55 additions & 0 deletions POC/w2/11/index2.JQuery.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery.tmpl.js"></script>
<h1>Super Yahoo pipes</h1>
</head>
<body>
<div id="news">
</div>
<script id="bookTemplate" type="text/x-jQuery-tmpl">
<div id="article">
<div id="img"><img height="50" id="image" src=
${enclosure.url}
width="50"></div>
<div id="title">
${title}
</div>
<div id="summary">
${description}
</div>20
<div id="lnk">
<a href=${link}
id="article-link">-&gt;</a>
</div>
</div>
</script>
<script type="text/javascript">
// TODO
// 1 - use jqury instead js
// 2 - use just one global variable
// -----------------------------------------------------------------------------------------
// receive news from yahoo server
// -----------------------------------------------------------------------------------------
window.onload = function () {
//Create a SCRIPT element.
var script = document.createElement("script");
//Set the Type.
script.type = "text/javascript";
//Set the source to the URL the JSON Service.
script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
//Append the script element to the HEAD section.
//document.getElementsByTagName("head")[0].appendChild(script);
$('head')[0].appendChild(script);
};

// -----------------------------------------------------------------------------------------
// Display all received news on the page
// -----------------------------------------------------------------------------------------
function DisplayNews(response) {
$("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
}
    </script>
</body>
</html>
103 changes: 103 additions & 0 deletions POC/w2/12_/index2.JQuery.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery.tmpl.js"></script>
<h1>Super Yahoo pipes</h1>
</head>
<body>
<div id="news">
</div>
<script id="bookTemplate" type="text/x-jQuery-tmpl">
<div id="article" onclick="ProcessDivOnClick(this);">
<div id="img"><img height="50" id="image" src=
${enclosure.url}
width="50"></div>
<div id="title">
${title}
</div>
<div id="summary">
${description}
</div>20
<div id="lnk">
<a href=${link}
id="article-link">-&gt;</a>
</div>
</div>
</script>
<script type="text/javascript">
// -----------------------------------------------------------------------------------
// Show/hide elements on click in parent div
// -----------------------------------------------------------------------------------
var ProcessDivOnClick = function(e) {

console.log("here");
var elem = e;
/*
<div id="article" onclick="ProcessDivOnClick(this);">
<div id="img"><img height="50" id="image" src="http://www.nasa.gov/sites/default/files/thumbnails/image/wolf_ast_2015162_lrg.jpg" width="50">
</div>
<div id="title"> Eruption of Wolf Volcano, Galapagos Islands </div>
<div id="summary"> In late May 2015, the highest volcano in the Galapagos Islands, Wolf volcano, erupted for the first time in 33 years. The wide image and closeup of Wolf was acquired on June 11, 2015, by the ASTER instrument on NASA's Terra satellite. The false-color images combine near-infrared, red, and green light (ASTER bands 3-2-1). </div>20
<div id="lnk"> <a href="http://www.nasa.gov/image-feature/eruption-of-wolf-volcano-galapagos-islands" id="article-link">-&gt;</a> </div>
</div>
*/
//
console.log(elem);

var jqElem = $(this);
//
console.log(jqElem);
var lnk = jqElem.find('#lnk');
console.log(lnk);
lnk.hide();

/*
var elemId = e.srcElement.id;
// image-1
////console.log(elemId);
var res = elemId.split("-");
var clickedId = res[1];
console.log(clickedId);
*/

///console.log("Clicked!!!");
/*
var visible = document.getElementById("article-link-"+clickedId).style.visibility;
if(visible === 'visible') {
document.getElementById("article-link-"+clickedId).style.visibility = 'hidden';
document.getElementById("summary-"+clickedId).style.visibility = 'hidden';
} else {
document.getElementById("article-link-"+clickedId).style.visibility = 'visible';
document.getElementById("summary-"+clickedId).style.visibility = 'visible';
}
*/
}

// TODO
// 1 - use jqury instead js
// 2 - use just one global variable
// -----------------------------------------------------------------------------------------
// receive news from yahoo server
// -----------------------------------------------------------------------------------------
window.onload = function () {
//Create a SCRIPT element.
var script = document.createElement("script");
//Set the Type.
script.type = "text/javascript";
//Set the source to the URL the JSON Service.
script.src = "http://pipes.yahoo.com/pipes/pipe.run?_id=e9a2e77dffb3205d035c4e311d77bbe6&_render=json&_callback=DisplayNews";
//Append the script element to the HEAD section.
//document.getElementsByTagName("head")[0].appendChild(script);
$('head')[0].appendChild(script);
};

// -----------------------------------------------------------------------------------------
// Display all received news on the page
// -----------------------------------------------------------------------------------------
function DisplayNews(response) {
$("#bookTemplate").tmpl(response.value.items).appendTo("#news"); 
}
    </script>
</body>
</html>
Loading

0 comments on commit 2d60919

Please sign in to comment.