mirror of
https://github.com/moparisthebest/app-UI
synced 2024-11-01 16:05:04 -04:00
233 lines
9.0 KiB
HTML
233 lines
9.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>View Navigator Sample</title>
|
||
|
|
<meta name="viewport" content="width=device-width, user-scalable=no">
|
||
|
|
|
||
|
|
<script src="phonegap-1.4.1.js"></script>
|
||
|
|
|
||
|
|
<script src="libs/jquery-1.7.1.js"></script>
|
||
|
|
<script src="libs/jquery.animate-enhanced.js"></script>
|
||
|
|
<script src="libs/iscroll.js"></script>
|
||
|
|
<script src="libs/noClickDelay.js"></script>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="viewnavigator/viewnavigator.css" type="text/css" />
|
||
|
|
<script src="viewnavigator/viewnavigator.js"></script>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="libs/css/activityIndicator.css" type="text/css" />
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="splitviewnavigator/splitviewnavigator.css" type="text/css" />
|
||
|
|
<script src="splitviewnavigator/splitviewnavigator.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
* {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
#detail {
|
||
|
|
padding:10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#defaultView {
|
||
|
|
text-align:center;
|
||
|
|
padding-top:100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.moviePoster {
|
||
|
|
float:right;
|
||
|
|
width:120px;
|
||
|
|
height:178px;
|
||
|
|
overflow:hidden;
|
||
|
|
margin:10px;
|
||
|
|
padding:2px;
|
||
|
|
border:1px solid #999999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.listSelected {
|
||
|
|
background-color:#424242;
|
||
|
|
background-image:-webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9));
|
||
|
|
background-image:-moz-linear-gradient(top, #0069d6, #999da9);
|
||
|
|
background-image:-o-linear-gradient(top, #0069d6, #999da9);
|
||
|
|
color: #FFF;
|
||
|
|
font-weight:bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul,li {
|
||
|
|
padding:0;
|
||
|
|
margin:0;
|
||
|
|
border:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.viewNavigator_contentHolder li {
|
||
|
|
padding:0 10px;
|
||
|
|
border-bottom:1px solid #ccc;
|
||
|
|
height:40px; line-height:40px;
|
||
|
|
font-weight:normal;
|
||
|
|
cursor:pointer;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
-o-text-overflow: ellipsis;
|
||
|
|
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#detail li {
|
||
|
|
|
||
|
|
white-space: normal;
|
||
|
|
overflow: visible;
|
||
|
|
height:auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script type="text/javascript" charset="utf-8">
|
||
|
|
|
||
|
|
var API_KEY = "put your rotten tomatoes API key here";
|
||
|
|
|
||
|
|
var sampleData;
|
||
|
|
|
||
|
|
/* ==================== Controller ==================== */
|
||
|
|
|
||
|
|
var controller = {
|
||
|
|
data : []
|
||
|
|
};
|
||
|
|
|
||
|
|
controller.init = function () {
|
||
|
|
var url = "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json?limit=25&country=us&apikey=" + API_KEY;
|
||
|
|
console.log( url );
|
||
|
|
|
||
|
|
this.rootView = { title: "Rotten Tomatoes",
|
||
|
|
backLabel: null,
|
||
|
|
view: $("<div id='rootView'><div class='activityIndicator'></div></div>")
|
||
|
|
};
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: url,
|
||
|
|
dataType: "json",
|
||
|
|
success: function(data, textStatus, jqXHR) {
|
||
|
|
|
||
|
|
controller.rootData = data;
|
||
|
|
controller.renderDefaultView();
|
||
|
|
|
||
|
|
},
|
||
|
|
error: function(jqXHR, textStatus, errorThrown) {
|
||
|
|
alert("error")
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return;
|
||
|
|
};
|
||
|
|
|
||
|
|
controller.renderDefaultView = function () {
|
||
|
|
this.rootView.view.children().remove();
|
||
|
|
var html = "<ul>";
|
||
|
|
for ( var i = 0; i < controller.rootData.movies.length; i ++ )
|
||
|
|
{
|
||
|
|
var movie = controller.rootData.movies[i];
|
||
|
|
html += "<li id='" + movie.id + "'onclick='controller.renderDetails(\"" + i + "\")'>" + movie.title + "</li>";
|
||
|
|
}
|
||
|
|
html += "</ul>";
|
||
|
|
this.rootView.view.html( html );
|
||
|
|
if ( controller.tabletView ) {
|
||
|
|
setTimeout( function() {
|
||
|
|
window.splitViewNavigator.sidebarViewNavigator.refreshScroller();
|
||
|
|
}, 10 );
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
controller.renderDetails = function (index) {
|
||
|
|
var movie = controller.rootData.movies[index];
|
||
|
|
|
||
|
|
if ( controller.tabletView ) {
|
||
|
|
window.splitViewNavigator.hideSidebar();
|
||
|
|
window.splitViewNavigator.sidebarViewNavigator.content.find( "li" ).each(function(index) {
|
||
|
|
$(this).removeClass( "listSelected" );
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
controller.rootView.view.find( "li" ).each(function(index) {
|
||
|
|
$(this).removeClass( "listSelected" );
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
$( "#"+movie.id ).addClass( "listSelected" );
|
||
|
|
|
||
|
|
var html = "<div id='detail'>";
|
||
|
|
html += "<h1>" + movie.title + "</h1>";
|
||
|
|
html += "<p><strong>" + movie.mpaa_rating + "</strong>, " + movie.runtime + "min. - (" + movie.year + ")</p>";
|
||
|
|
html += "<img src=\"" + movie.posters.profile + "\" class='moviePoster'>";
|
||
|
|
html += "<p>" + movie.synopsis + "</p>";
|
||
|
|
html += "<h3>Ratings:</h3><p>";
|
||
|
|
html += "<strong>Audience:</strong> " + movie.ratings.audience_score + " - " + movie.ratings.audience_rating + "<br>"
|
||
|
|
html += "<strong>Critics:</strong> " + movie.ratings.critics_score + " - " + movie.ratings.critics_rating + "<br>"
|
||
|
|
html += "</p>"
|
||
|
|
html += "<h4>What the critics say:</h4><p>" + movie.critics_consensus + "</p>";
|
||
|
|
html += "<h3>Cast:</h3><p><ul>";
|
||
|
|
|
||
|
|
for ( var i = 0; i < movie.abridged_cast.length; i ++ )
|
||
|
|
{
|
||
|
|
var actor = movie.abridged_cast[i];
|
||
|
|
html += "<li><strong>" + actor.name + ":</strong> ";
|
||
|
|
|
||
|
|
if ( actor.characters ) {
|
||
|
|
for ( var j = 0; j < actor.characters.length; j ++ )
|
||
|
|
{
|
||
|
|
if ( j > 0 ) { html += ", " };
|
||
|
|
html += actor.characters[j];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
html += "</li>";
|
||
|
|
}
|
||
|
|
|
||
|
|
html += "</ul></p>";
|
||
|
|
|
||
|
|
html += "</div>";
|
||
|
|
|
||
|
|
var viewDescriptor = { title: movie.title,
|
||
|
|
view: $(html)
|
||
|
|
};
|
||
|
|
|
||
|
|
if ( controller.tabletView ) {
|
||
|
|
window.splitViewNavigator.replaceBodyView( viewDescriptor );
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
viewDescriptor.backLabel = "Back";
|
||
|
|
window.viewNavigator.pushView( viewDescriptor );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
$(document).ready( function() {
|
||
|
|
|
||
|
|
controller.init();
|
||
|
|
var _w = Math.max( $(window).width(), $(window).height() );
|
||
|
|
var _h = Math.min( $(window).width(), $(window).height() );
|
||
|
|
controller.tabletView = (_w >= 1000 && _h >= 600);
|
||
|
|
|
||
|
|
var defaultView = { title: "Rotten Tomatoes",
|
||
|
|
view: $("<div id='defaultView'><img src='assets/tomato.jpeg' /></div>")
|
||
|
|
};
|
||
|
|
|
||
|
|
if ( controller.tabletView ) {
|
||
|
|
//Setup the ViewNavigator
|
||
|
|
new SplitViewNavigator( 'body', "Movies" );
|
||
|
|
window.splitViewNavigator.pushSidebarView( controller.rootView );
|
||
|
|
window.splitViewNavigator.pushBodyView( defaultView );
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
//phone view
|
||
|
|
window.viewNavigator = new ViewNavigator( 'body', "Movies" );
|
||
|
|
window.viewNavigator.pushView( controller.rootView );
|
||
|
|
}
|
||
|
|
} );
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body></body>
|
||
|
|
</html>
|