moparisthebest/app-UI
1
0
Fork 0
mirror of https://github.com/moparisthebest/app-UI synced 2024-12-21 23:18:52 -05:00
Code Issues Releases Wiki Activity

initial commit/work in progress

Browse Source 
this is pre-alpha quality code, but getting better by the day
This commit is contained in:
Andrew Trice 2012-03-14 15:51:01 -04:00
commit 1ab501ca87
23 changed files with 12993 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
samples/slidingView/.DS_Store vendored Normal file
View File

Binary file not shown.

46
samples/slidingView/01 - basic/index.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<title>Sliding View Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="../../../src/libs/jquery-1.7.1.js"></script>
<script src="../../../src/libs/jquery.animate-enhanced.js"></script>
<link rel="stylesheet" href="../../../src/slidingview/slidingview.css" type="text/css" />
<script src="../../../src/slidingview/slidingview.js"></script>
<script>
$(document).ready( function() {
//Setup the ViewNavigator
new SlidingView( 'sidebar', 'body' );
} );
</script>
<style>
#sidebar {
background-color: red;
padding:10px;
}
#body {
background-color: white;
padding:10px;
}
</style>
</head>
<body>
<div class="slidingview_wrapper">
<div id="sidebar">sidebar here!</div>
<div id="body">body here!</div>
</div>
</body>
</html>

113
samples/slidingView/02 - view navigators/index.html Normal file
View File

@ -0,0 +1,113 @@
<!DOCTYPE html>
<html>
<head>
<title>View Navigator Multiple Instances</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="../../../src/libs/jquery-1.7.1.js"></script>
<script src="../../../src/libs/jquery.animate-enhanced.js"></script>
<script src="../../../src/libs/iscroll.js"></script>
<script src="../../../src/libs/noClickDelay.js"></script>
<link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" />
<script src="../../../src/viewnavigator/viewnavigator.js"></script>
<link rel="stylesheet" href="../../../src/slidingview/slidingview.css" type="text/css" />
<script src="../../../src/slidingview/slidingview.js"></script>
<style>
#sidebar {
padding:0px;
overflow:hidden;
}
#body {
padding:0px;
overflow:hidden;
border-left:1px solid black;
}
</style>
<script>
$(document).ready( function() {
//Setup the default views
var leftView = getView( "left" );
leftView.backLabel = null;
var rightView = getView( "right" );
rightView.backLabel = null;
new SlidingView( 'sidebar', 'body' );
//Setup the ViewNavigator
window.leftViewNavigator = new ViewNavigator( '#sidebar' );
window.leftViewNavigator.pushView( leftView );
window.rightViewNavigator = new ViewNavigator( '#body' );
window.rightViewNavigator.pushView( rightView );
} );
function leftPushView() {
//create a view and push it onto the view navigator
var view = getView("left");
window.leftViewNavigator.pushView( view );
}
function leftPopView() {
//pop a view from the view navigator
window.leftViewNavigator.popView();
}
function rightPushView() {
//create a view and push it onto the view navigator
var view = getView("right");
window.rightViewNavigator.pushView( view );
}
function rightPopView() {
//pop a view from the view navigator
window.rightViewNavigator.popView();
}
function getView( side ) {
//create a view descriptor with random content
var bodyView = $('<div>' + Math.random().toString() + '<hr><li href="#" onclick="'+side+'PushView()" class="backLinkButton">push view</li> <li href="#" onclick="'+side+'PopView()" class="backLinkButton">pop view</li><hr>' + getMeat() + '</div>');
var links = bodyView.find('a');
/*for ( var i=0; i<links.length; i++)
{
NoClickDelay( links[i] );
}*/
return { title: side + "Default View " + parseInt(Math.random()*1000),
backLabel: "Back",
view: bodyView
};
}
function getMeat() {
//randomly generate content
//text string generated by http://baconipsum.com/
var iterations = 1 + parseInt(Math.random() * 5);
var result = "";
for ( var i = 0; i < iterations; i ++ ) {
result += "Pork chop corned beef meatloaf prosciutto flank, chuck andouille fatback hamburger cow ham turkey. Drumstick filet mignon boudin, salami beef ribs ball tip turducken frankfurter chuck. Pork chop swine chuck meatloaf capicola tri-tip. Pork belly venison bresaola flank, jerky ham hock short loin ground round corned beef salami pork filet mignon tri-tip sirloin. Tenderloin meatball corned beef, boudin brisket bresaola rump short loin tri-tip spare ribs pork belly cow.<hr>"
}
return result;
}
</script>
</head>
<body>
<div class="slidingview_wrapper">
<div id="sidebar">sidebar here!</div>
<div id="body">body here!</div>
</div>
</body>
</html>

85
samples/splitviewnavigator/01 - basic/index.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html>
<head>
<title>View Navigator Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="../../../src/libs/jquery-1.7.1.js"></script>
<script src="../../../src/libs/jquery.animate-enhanced.js"></script>
<script src="../../../src/libs/iscroll.js"></script>
<script src="../../../src/libs/noClickDelay.js"></script>
<link rel="stylesheet" href="../../../src/splitviewnavigator/splitviewnavigator.css" type="text/css" />
<script src="../../../src/splitviewnavigator/splitviewnavigator.js"></script>
<link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" />
<script src="../../../src/viewnavigator/viewnavigator.js"></script>
<script>
$(document).ready( function() {
var sidebarViewDescriptor = getSidebarView();
sidebarViewDescriptor.backLabel = null;
var bodyViewDescriptor = getBodyView();
bodyViewDescriptor.backLabel = null;
//Setup the ViewNavigator
new SplitViewNavigator( 'body' );
window.splitViewNavigator.pushSidebarView( sidebarViewDescriptor );
window.splitViewNavigator.pushBodyView( bodyViewDescriptor );
} );
function getSidebarView() {
var viewHTML = "<ul>" +
"<li onclick='pushSidebarView()' class='backLinkButton'>Push Sidebar View</li>" +
"<li onclick='window.splitViewNavigator.popSidebarView()' class='backLinkButton'>Pop Sidebar View</li>" +
"<li onclick='pushBodyView()' class='backLinkButton'>Push Body View</li>" +
"<li onclick='window.splitViewNavigator.popBodyView()' class='backLinkButton'>Pop Body View</li>" +
"</ul>";
return {
title: "Sidebar " + parseInt( Math.random() * 100 ).toString(),
backLabel: "Back",
view: $(viewHTML)
};
}
function getBodyView() {
var viewHTML = "<div>" +getMeat() + "</div>";
return {
title: "Body Content " + parseInt( Math.random() * 100 ).toString(),
backLabel: "Back",
view: $(viewHTML)
};
}
function pushSidebarView() {
window.splitViewNavigator.pushSidebarView( getSidebarView() );
}
function pushBodyView() {
window.splitViewNavigator.pushBodyView( getBodyView() );
window.splitViewNavigator.hideSidebar();
}
function getMeat() {
//randomly generate content
//text string generated by http://baconipsum.com/
var iterations = 1 + parseInt(Math.random() * 25);
var result = "";
for ( var i = 0; i < iterations; i ++ ) {
result += "Pork chop corned beef meatloaf prosciutto flank, chuck andouille fatback hamburger cow ham turkey. Drumstick filet mignon boudin, salami beef ribs ball tip turducken frankfurter chuck. Pork chop swine chuck meatloaf capicola tri-tip. Pork belly venison bresaola flank, jerky ham hock short loin ground round corned beef salami pork filet mignon tri-tip sirloin. Tenderloin meatball corned beef, boudin brisket bresaola rump short loin tri-tip spare ribs pork belly cow.<hr>"
}
return result;
}
</script>
</head>
<body></body>
</html>

1
samples/splitviewnavigator/02 - movie reviews/README Normal file
View File

@ -0,0 +1 @@
This needs to use either relaxed browser security to enable XSS and loading from local disk, or needs to be wrapped in phonegap.

BIN
samples/splitviewnavigator/02 - movie reviews/assets/tomato.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

209
samples/splitviewnavigator/02 - movie reviews/index.html Normal file
View File

@ -0,0 +1,209 @@
<!DOCTYPE html>
<html>
<head>
<title>View Navigator Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="phonegap-1.4.1.js"></script>
<script src="../../../src/libs/jquery-1.7.1.js"></script>
<script src="../../../src/libs/jquery.animate-enhanced.js"></script>
<script src="../../../src/libs/iscroll.js"></script>
<script src="../../../src/libs/noClickDelay.js"></script>
<link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" />
<script src="../../../src/viewnavigator/viewnavigator.js"></script>
<link rel="stylesheet" href="../../../src/libs/css/activityIndicator.css" type="text/css" />
<link rel="stylesheet" href="../../../src/splitviewnavigator/splitviewnavigator.css" type="text/css" />
<script src="../../../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 = "erxqmwxj75wdrgwfwgkc9vng";
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 );
setTimeout( function() {
window.splitViewNavigator.sidebarViewNavigator.refreshScroller();
}, 10 );
}
controller.renderDetails = function (index) {
var movie = controller.rootData.movies[index];
window.splitViewNavigator.hideSidebar();
window.splitViewNavigator.sidebarViewNavigator.content.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> ";
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)
};
window.splitViewNavigator.replaceBodyView( viewDescriptor );
}
$(document).ready( function() {
controller.init();
var defaultView = { title: "Rotten Tomatoes",
view: $("<div id='defaultView'><img src='assets/tomato.jpeg' /></div>")
};
//Setup the ViewNavigator
new SplitViewNavigator( 'body' );
window.splitViewNavigator.pushSidebarView( controller.rootView );
window.splitViewNavigator.pushBodyView( defaultView );
} );
</script>
</head>
<body></body>
</html>

73
samples/viewnavigator/01 - basic/index.html Normal file
View File

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<title>View Navigator Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="../../../src/libs/jquery-1.7.1.js"></script>
<script src="../../../src/libs/jquery.animate-enhanced.js"></script>
<script src="../../../src/libs/iscroll.js"></script>
<script src="../../../src/libs/noClickDelay.js"></script>
<link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" />
<script src="../../../src/viewnavigator/viewnavigator.js"></script>
<script>
$(document).ready( function() {
//Setup the default view
var defaultView = getView();
defaultView.backLabel = null;
//Setup the ViewNavigator
window.viewNavigator = new ViewNavigator( 'body' );
window.viewNavigator.pushView( defaultView );
} );
function pushView() {
//create a view and push it onto the view navigator
var view = getView();
window.viewNavigator.pushView( view );
}
function popView() {
//pop a view from the view navigator
window.viewNavigator.popView();
}
function getView() {
//create a view descriptor with random content
var bodyView = $('<div>' + Math.random().toString() + '<hr><li href="#" onclick="pushView()" class="backLinkButton">push view</li> <li href="#" onclick="popView()" class="backLinkButton">pop view</li><hr>' + getMeat() + '</div>');
var links = bodyView.find('a');
/*
for ( var i=0; i<links.length; i++)
{
NoClickDelay( links[i] );
}
*/
return { title: "Default View " + parseInt(Math.random()*1000),
backLabel: "Back",
view: bodyView
};
}
function getMeat() {
//randomly generate content
//text string generated by http://baconipsum.com/
var iterations = 1 + parseInt(Math.random() * 25);
var result = "";
for ( var i = 0; i < iterations; i ++ ) {
result += "Pork chop corned beef meatloaf prosciutto flank, chuck andouille fatback hamburger cow ham turkey. Drumstick filet mignon boudin, salami beef ribs ball tip turducken frankfurter chuck. Pork chop swine chuck meatloaf capicola tri-tip. Pork belly venison bresaola flank, jerky ham hock short loin ground round corned beef salami pork filet mignon tri-tip sirloin. Tenderloin meatball corned beef, boudin brisket bresaola rump short loin tri-tip spare ribs pork belly cow.<hr>"
}
return result;
}
</script>
</head>
<body></body>
</html>

1
samples/viewnavigator/02 - movie reviews/README Normal file
View File

@ -0,0 +1 @@
This needs to use either relaxed browser security to enable XSS and loading from local disk, or needs to be wrapped in phonegap.

205
samples/viewnavigator/02 - movie reviews/index.html Normal file
View File

@ -0,0 +1,205 @@
<!DOCTYPE html>
<html>
<head>
<title>View Navigator Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="phonegap-1.4.1.js"></script>
<script src="../../../src/libs/jquery-1.7.1.js"></script>
<script src="../../../src/libs/jquery.animate-enhanced.js"></script>
<script src="../../../src/libs/iscroll.js"></script>
<script src="../../../src/libs/noClickDelay.js"></script>
<link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" />
<script src="../../../src/viewnavigator/viewnavigator.js"></script>
<link rel="stylesheet" href="../../../src/libs/css/activityIndicator.css" type="text/css" />
<style>
* {
font-family: Arial, sans-serif;
}
#detail {
padding:10px;
}
.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;
}
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 = "erxqmwxj75wdrgwfwgkc9vng";
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 );
setTimeout( function() {
window.viewNavigator.refreshScroller();
}, 10 );
}
controller.renderDetails = function (index) {
var movie = controller.rootData.movies[index];
$( "#"+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> ";
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 movieId = movie.id;
var callback = function() {
controller.rootView.view.find( "#"+movieId ).removeClass( "listSelected" );
}
var viewDescriptor = { title: movie.title,
backLabel: "Home",
backCallback: callback,
view: $(html)
};
/*var listItems = controller.rootView.view.find( "li" );
listItems.each(function(index, li) {
var item = $(li).get(0);
NoClickDelay( item );
});*/
window.viewNavigator.pushView( viewDescriptor);
}
$(document).ready( function() {
//initialize the application controller
controller.init();
//Setup the ViewNavigator
window.viewNavigator = new ViewNavigator( 'body' );
window.viewNavigator.pushView( controller.rootView );
} );
</script>
</head>
<body></body>
</html>

114
samples/viewnavigator/03 - multi instance/index.html Normal file
View File

@ -0,0 +1,114 @@
<!DOCTYPE html>
<html>
<head>
<title>View Navigator Multiple Instances</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="../../../src/libs/jquery-1.7.1.js"></script>
<script src="../../../src/libs/jquery.animate-enhanced.js"></script>
<script src="../../../src/libs/iscroll.js"></script>
<script src="../../../src/libs/noClickDelay.js"></script>
<link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" />
<script src="../../../src/viewnavigator/viewnavigator.js"></script>
<style>
#leftDiv {
position:absolute;
top:0px;
bottom:0px;
left:0px;
width:50%;
overflow:hidden;
}
#rightDiv {
position:absolute;
top:0px;
bottom:0px;
left:50%;
right:0px;
width:50%;
border-left:1px solid red;
overflow:hidden;
}
</style>
<script>
$(document).ready( function() {
//Setup the default views
var leftView = getView( "left" );
leftView.backLabel = null;
var rightView = getView( "right" );
rightView.backLabel = null;
//Setup the ViewNavigator
window.leftViewNavigator = new ViewNavigator( '#leftDiv' );
window.leftViewNavigator.pushView( leftView );
window.rightViewNavigator = new ViewNavigator( '#rightDiv' );
window.rightViewNavigator.pushView( rightView );
} );
function leftPushView() {
//create a view and push it onto the view navigator
var view = getView("left");
window.leftViewNavigator.pushView( view );
}
function leftPopView() {
//pop a view from the view navigator
window.leftViewNavigator.popView();
}
function rightPushView() {
//create a view and push it onto the view navigator
var view = getView("right");
window.rightViewNavigator.pushView( view );
}
function rightPopView() {
//pop a view from the view navigator
window.rightViewNavigator.popView();
}
function getView( side ) {
//create a view descriptor with random content
var bodyView = $('<div>' + Math.random().toString() + '<hr><li href="#" onclick="'+side+'PushView()" class="backLinkButton">push view</li> <li href="#" onclick="'+side+'PopView()" class="backLinkButton">pop view</li><hr>' + getMeat() + '</div>');
var links = bodyView.find('a');
/*for ( var i=0; i<links.length; i++)
{
NoClickDelay( links[i] );
}*/
return { title: side + "Default View " + parseInt(Math.random()*1000),
backLabel: "Back",
view: bodyView
};
}
function getMeat() {
//randomly generate content
//text string generated by http://baconipsum.com/
var iterations = 1 + parseInt(Math.random() * 25);
var result = "";
for ( var i = 0; i < iterations; i ++ ) {
result += "Pork chop corned beef meatloaf prosciutto flank, chuck andouille fatback hamburger cow ham turkey. Drumstick filet mignon boudin, salami beef ribs ball tip turducken frankfurter chuck. Pork chop swine chuck meatloaf capicola tri-tip. Pork belly venison bresaola flank, jerky ham hock short loin ground round corned beef salami pork filet mignon tri-tip sirloin. Tenderloin meatball corned beef, boudin brisket bresaola rump short loin tri-tip spare ribs pork belly cow.<hr>"
}
return result;
}
</script>
</head>
<body>
<div id="leftDiv"></div>
<div id="rightDiv"></div>
</body>
</html>

BIN
src/libs/.DS_Store vendored Normal file
View File

Binary file not shown.

20
src/libs/css/activityIndicator.css Normal file
View File

File diff suppressed because one or more lines are too long

1076
src/libs/iscroll.js Executable file
View File

File diff suppressed because it is too large Load Diff

9266
src/libs/jquery-1.7.1.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

746
src/libs/jquery.animate-enhanced.js Normal file
View File

@ -0,0 +1,746 @@
/*
jquery.animate-enhanced plugin v0.88
---
http://github.com/benbarnett/jQuery-Animate-Enhanced
http://benbarnett.net
@benpbarnett
---
Copyright (c) 2012 Ben Barnett
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
---
Extends jQuery.animate() to automatically use CSS3 transformations where applicable.
Tested with jQuery 1.3.2+
Supports -moz-transition, -webkit-transition, -o-transition, transition
Targetted properties (for now):
- left
- top
- opacity
- width
- height
Usage (exactly the same as it would be normally):
jQuery(element).animate({left: 200}, 500, function() {
// callback
});
Changelog:
0.89 (24/1/2012):
- Adding 'avoidCSSTransitions' property. Set to true to disable entire plugin. (Issue #47)
0.88 (24/1/2012):
- Fix Issue #67 for HighchartsJS compatibility
0.87 (24/1/2012):
- Fix Issue #66 selfCSSData.original is undefined
0.86 (9/1/2012):
- Strict JS fix for undefined variable
0.85 (20/12/2011):
- Merge Pull request #57 from Kronuz
- Codebase cleaned and now passes jshint.
- Fixed a few bugs (it now saves and restores the original css transition properties).
- fadeOut() is fixed, it wasn't restoring the opacity after hiding it.
0.80 (13/09/2011):
- Issue #28 - Report $(el).is(':animated') fix
0.79 (06/09/2011):
- Issue #42 - Right negative position animation: please see issue notes on Github.
0.78 (02/09/2011):
- Issue #18 - jQuery/$ reference joys
0.77 (02/09/2011):
- Adding feature on Github issue #44 - Use 3D Transitions by default
0.76 (28/06/2011):
- Fixing issue #37 - fixed stop() method (with gotoEnd == false)
0.75 (15/06/2011):
- Fixing issue #35 to pass actual object back as context for callback
0.74 (28/05/2011):
- Fixing issue #29 to play nice with 1.6+
0.73 (05/03/2011):
- Merged Pull Request #26: Fixed issue with fadeOut() / "hide" shortcut
0.72 (05/03/2011):
- Merged Pull Request #23: Added Penner equation approximations from Matthew Lein's Ceaser, and added failsafe fallbacks
0.71 (05/03/2011):
- Merged Pull Request #24: Changes translation object to integers instead of strings to fix relative values bug with leaveTransforms = true
0.70 (17/03/2011):
- Merged Pull Request from amlw-nyt to add bottom/right handling
0.68 (15/02/2011):
- width/height fixes & queue issues resolved.
0.67 (15/02/2011):
- Code cleanups & file size improvements for compression.
0.66 (15/02/2011):
- Zero second fadeOut(), fadeIn() fixes
0.65 (01/02/2011):
- Callbacks with queue() support refactored to support element arrays
0.64 (27/01/2011):
- BUGFIX #13: .slideUp(), .slideToggle(), .slideDown() bugfixes in Webkit
0.63 (12/01/2011):
- BUGFIX #11: callbacks not firing when new value == old value
0.62 (10/01/2011):
- BUGFIX #11: queue is not a function issue fixed
0.61 (10/01/2011):
- BUGFIX #10: Negative positions converting to positive
0.60 (06/01/2011):
- Animate function rewrite in accordance with new queue system
- BUGFIX #8: Left/top position values always assumed relative rather than absolute
- BUGFIX #9: animation as last item in a chain - the chain is ignored?
- BUGFIX: width/height CSS3 transformation with left/top working
0.55 (22/12/2010):
- isEmptyObject function for <jQuery 1.4 (requires 1.3.2)
0.54a (22/12/2010):
- License changed to MIT (http://www.opensource.org/licenses/mit-license.php)
0.54 (22/12/2010):
- Removed silly check for 'jQuery UI' bailouts. Sorry.
- Scoping issues fixed - Issue #4: $(this) should give you a reference to the selector being animated.. per jquery's core animation funciton.
0.53 (17/11/2010):
- New $.translate() method to easily calculate current transformed translation
- Repeater callback bug fix for leaveTransforms:true (was constantly appending properties)
0.52 (16/11/2010):
- leaveTransforms: true bug fixes
- 'Applying' user callback function to retain 'this' context
0.51 (08/11/2010):
- Bailing out with jQuery UI. This is only so the plugin plays nice with others and is TEMPORARY.
0.50 (08/11/2010):
- Support for $.fn.stop()
- Fewer jQuery.fn entries to preserve namespace
- All references $ converted to jQuery
- jsDoc Toolkit style commenting for docs (coming soon)
0.49 (19/10/2010):
- Handling of 'undefined' errors for secondary CSS objects
- Support to enhance 'width' and 'height' properties (except shortcuts involving jQuery.fx.step, e.g slideToggle)
- Bugfix: Positioning when using avoidTransforms: true (thanks Ralf Santbergen reports)
- Bugfix: Callbacks and Scope issues
0.48 (13/10/2010):
- Checks for 3d support before applying
0.47 (12/10/2010);
- Compatible with .fadeIn(), .fadeOut()
- Use shortcuts, no duration for jQuery default or "fast" and "slow"
- Clean up callback event listeners on complete (preventing multiple callbacks)
0.46 (07/10/2010);
- Compatible with .slideUp(), .slideDown(), .slideToggle()
0.45 (06/10/2010):
- 'Zero' position bug fix (was originally translating by 0 zero pixels, i.e. no movement)
0.4 (05/10/2010):
- Iterate over multiple elements and store transforms in jQuery.data per element
- Include support for relative values (+= / -=)
- Better unit sanitization
- Performance tweaks
- Fix for optional callback function (was required)
- Applies data[translateX] and data[translateY] to elements for easy access
- Added 'easeInOutQuint' easing function for CSS transitions (requires jQuery UI for JS anims)
- Less need for leaveTransforms = true due to better position detections
*/
(function(jQuery, originalAnimateMethod, originalStopMethod) {
// ----------
// Plugin variables
// ----------
var cssTransitionProperties = ['top', 'right', 'bottom', 'left', 'opacity', 'height', 'width'],
directions = ['top', 'right', 'bottom', 'left'],
cssPrefixes = ['', '-webkit-', '-moz-', '-o-'],
pluginOptions = ['avoidTransforms', 'useTranslate3d', 'leaveTransforms'],
rfxnum = /^([+-]=)?([\d+-.]+)(.*)$/,
rupper = /([A-Z])/g,
defaultEnhanceData = {
secondary: {},
meta: {
top : 0,
right : 0,
bottom : 0,
left : 0
}
},
DATA_KEY = 'jQe',
CUBIC_BEZIER_OPEN = 'cubic-bezier(',
CUBIC_BEZIER_CLOSE = ')',
originalAnimatedFilter = null;
// ----------
// Check if this browser supports CSS3 transitions
// ----------
var thisBody = document.body || document.documentElement,
thisStyle = thisBody.style,
transitionEndEvent = (thisStyle.WebkitTransition !== undefined) ? 'webkitTransitionEnd' : (thisStyle.OTransition !== undefined) ? 'oTransitionEnd' : 'transitionend',
cssTransitionsSupported = thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.OTransition !== undefined || thisStyle.transition !== undefined,
has3D = ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()),
use3DByDefault = has3D;
// ----------
// Extended :animated filter
// ----------
if ( jQuery.expr && jQuery.expr.filters ) {
originalAnimatedFilter = jQuery.expr.filters.animated;
jQuery.expr.filters.animated = function(elem) {
return jQuery(elem).data('events') && jQuery(elem).data('events')[transitionEndEvent] ? true : originalAnimatedFilter.call(this, elem);
};
}
/**
@private
@name _interpretValue
@function
@description Interpret value ("px", "+=" and "-=" sanitisation)
@param {object} [element] The Element for current CSS analysis
@param {variant} [val] Target value
@param {string} [prop] The property we're looking at
@param {boolean} [isTransform] Is this a CSS3 transform?
*/
function _interpretValue(e, val, prop, isTransform) {
// this is a nasty fix, but we check for prop == 'd' to see if we're dealing with SVG, and abort
if (prop == "d") return;
var parts = rfxnum.exec(val),
start = e.css(prop) === 'auto' ? 0 : e.css(prop),
cleanCSSStart = typeof start == 'string' ? _cleanValue(start) : start,
cleanTarget = typeof val == 'string' ? _cleanValue(val) : val,
cleanStart = isTransform === true ? 0 : cleanCSSStart,
hidden = e.is(':hidden'),
translation = e.translation();
if (prop == 'left') cleanStart = parseInt(cleanCSSStart, 10) + translation.x;
if (prop == 'right') cleanStart = parseInt(cleanCSSStart, 10) + translation.x;
if (prop == 'top') cleanStart = parseInt(cleanCSSStart, 10) + translation.y;
if (prop == 'bottom') cleanStart = parseInt(cleanCSSStart, 10) + translation.y;
// deal with shortcuts
if (!parts && val == 'show') {
cleanStart = 1;
if (hidden) e.css({'display':'block', 'opacity': 0});
} else if (!parts && val == "hide") {
cleanStart = 0;
}
if (parts) {
var end = parseFloat(parts[2]);
// If a +=/-= token was provided, we're doing a relative animation
if (parts[1]) end = ((parts[1] === '-=' ? -1 : 1) * end) + parseInt(cleanStart, 10);
return end;
} else {
return cleanStart;
}
}
/**
@private
@name _getTranslation
@function
@description Make a translate or translate3d string
@param {integer} [x]
@param {integer} [y]
@param {boolean} [use3D] Use translate3d if available?
*/
function _getTranslation(x, y, use3D) {
return ((use3D === true || (use3DByDefault === true && use3D !== false)) && has3D) ? 'translate3d(' + x + 'px, ' + y + 'px, 0)' : 'translate(' + x + 'px,' + y + 'px)';
}
/**
@private
@name _applyCSSTransition
@function
@description Build up the CSS object
@param {object} [e] Element
@param {string} [property] Property we're dealing with
@param {integer} [duration] Duration
@param {string} [easing] Easing function
@param {variant} [value] String/integer for target value
@param {boolean} [isTransform] Is this a CSS transformation?
@param {boolean} [isTranslatable] Is this a CSS translation?
@param {boolean} [use3D] Use translate3d if available?
*/
function _applyCSSTransition(e, property, duration, easing, value, isTransform, isTranslatable, use3D) {
var eCSSData = e.data(DATA_KEY),
enhanceData = eCSSData && !_isEmptyObject(eCSSData) ? eCSSData : jQuery.extend(true, {}, defaultEnhanceData),
offsetPosition = value,
isDirection = jQuery.inArray(property, directions) > -1;
if (isDirection) {
var meta = enhanceData.meta,
cleanPropertyValue = _cleanValue(e.css(property)) || 0,
stashedProperty = property + '_o';
offsetPosition = value - cleanPropertyValue;
meta[property] = offsetPosition;
meta[stashedProperty] = e.css(property) == 'auto' ? 0 + offsetPosition : cleanPropertyValue + offsetPosition || 0;
enhanceData.meta = meta;
// fix 0 issue (transition by 0 = nothing)
if (isTranslatable && offsetPosition === 0) {
offsetPosition = 0 - meta[stashedProperty];
meta[property] = offsetPosition;
meta[stashedProperty] = 0;
}
}
// reapply data and return
return e.data(DATA_KEY, _applyCSSWithPrefix(e, enhanceData, property, duration, easing, offsetPosition, isTransform, isTranslatable, use3D));
}
/**
@private
@name _applyCSSWithPrefix
@function
@description Helper function to build up CSS properties using the various prefixes
@param {object} [cssProperties] Current CSS object to merge with
@param {string} [property]
@param {integer} [duration]
@param {string} [easing]
@param {variant} [value]
@param {boolean} [isTransform] Is this a CSS transformation?
@param {boolean} [isTranslatable] Is this a CSS translation?
@param {boolean} [use3D] Use translate3d if available?
*/
function _applyCSSWithPrefix(e, cssProperties, property, duration, easing, value, isTransform, isTranslatable, use3D) {
var saveOriginal = false,
transform = isTransform === true && isTranslatable === true;
cssProperties = cssProperties || {};
if (!cssProperties.original) {
cssProperties.original = {};
saveOriginal = true;
}
cssProperties.properties = cssProperties.properties || {};
cssProperties.secondary = cssProperties.secondary || {};
var meta = cssProperties.meta,
original = cssProperties.original,
properties = cssProperties.properties,
secondary = cssProperties.secondary;
for (var i = cssPrefixes.length - 1; i >= 0; i--) {
var tp = cssPrefixes[i] + 'transition-property',
td = cssPrefixes[i] + 'transition-duration',
tf = cssPrefixes[i] + 'transition-timing-function';
property = (transform ? cssPrefixes[i] + 'transform' : property);
if (saveOriginal) {
original[tp] = e.css(tp) || '';
original[td] = e.css(td) || '';
original[tf] = e.css(tf) || '';
}
secondary[property] = transform ? _getTranslation(meta.left, meta.top, use3D) : value;
properties[tp] = (properties[tp] ? properties[tp] + ',' : '') + property;
properties[td] = (properties[td] ? properties[td] + ',' : '') + duration + 'ms';
properties[tf] = (properties[tf] ? properties[tf] + ',' : '') + easing;
}
return cssProperties;
}
/**
@private
@name _isBoxShortcut
@function
@description Shortcut to detect if we need to step away from slideToggle, CSS accelerated transitions (to come later with fx.step support)
@param {object} [prop]
*/
function _isBoxShortcut(prop) {
for (var property in prop) {
if ((property == 'width' || property == 'height') && (prop[property] == 'show' || prop[property] == 'hide' || prop[property] == 'toggle')) {
return true;
}
}
return false;
}
/**
@private
@name _isEmptyObject
@function
@description Check if object is empty (<1.4 compatibility)
@param {object} [obj]
*/
function _isEmptyObject(obj) {
for (var i in obj) {
return false;
}
return true;
}
/**
@private
@name _cleanValue
@function
@description Remove 'px' and other artifacts
@param {variant} [val]
*/
function _cleanValue(val) {
return parseFloat(val.replace(/px/i, ''));
}
/**
@private
@name _appropriateProperty
@function
@description Function to check if property should be handled by plugin
@param {string} [prop]
@param {variant} [value]
*/
function _appropriateProperty(prop, value, element) {
var is = jQuery.inArray(prop, cssTransitionProperties) > -1;
if ((prop == 'width' || prop == 'height') && (value === parseFloat(element.css(prop)))) is = false;
return is;
}
jQuery.extend({
/**
@public
@name toggle3DByDefault
@function
@description Toggle for plugin settings to automatically use translate3d (where available). Usage: $.toggle3DByDefault
*/
toggle3DByDefault: function() {
use3DByDefault = !use3DByDefault;
}
});
/**
@public
@name translation
@function
@description Get current X and Y translations
*/
jQuery.fn.translation = function() {
if (!this[0]) {
return null;
}
var elem = this[0],
cStyle = window.getComputedStyle(elem, null),
translation = {
x: 0,
y: 0
};
if (cStyle) {
for (var i = cssPrefixes.length - 1; i >= 0; i--) {
var transform = cStyle.getPropertyValue(cssPrefixes[i] + 'transform');
if (transform && (/matrix/i).test(transform)) {
var explodedMatrix = transform.replace(/^matrix\(/i, '').split(/, |\)$/g);
translation = {
x: parseInt(explodedMatrix[4], 10),
y: parseInt(explodedMatrix[5], 10)
};
break;
}
}
}
return translation;
};
/**
@public
@name jQuery.fn.animate
@function
@description The enhanced jQuery.animate function
@param {string} [property]
@param {string} [speed]
@param {string} [easing]
@param {function} [callback]
*/
jQuery.fn.animate = function(prop, speed, easing, callback) {
prop = prop || {};
var isTranslatable = !(typeof prop['bottom'] !== 'undefined' || typeof prop['right'] !== 'undefined'),
optall = jQuery.speed(speed, easing, callback),
elements = this,
callbackQueue = 0,
propertyCallback = function() {
callbackQueue--;
if (callbackQueue === 0) {
// we're done, trigger the user callback
if (typeof optall.complete === 'function') {
optall.complete.apply(elements[0], arguments);
}
}
};
if (prop['avoidCSSTransitions'] === true || !cssTransitionsSupported || _isEmptyObject(prop) || _isBoxShortcut(prop) || optall.duration <= 0 || (jQuery.fn.animate.defaults.avoidTransforms === true && prop['avoidTransforms'] !== false)) {
return originalAnimateMethod.apply(this, arguments);
}
return this[ optall.queue === true ? 'queue' : 'each' ](function() {
var self = jQuery(this),
opt = jQuery.extend({}, optall),
cssCallback = function() {
var selfCSSData = self.data(DATA_KEY) || { original: {} },
restore = {};
// convert translations to left & top for layout
if (prop.leaveTransforms !== true) {
for (var i = cssPrefixes.length - 1; i >= 0; i--) {
restore[cssPrefixes[i] + 'transform'] = '';
}
if (isTranslatable && typeof selfCSSData.meta !== 'undefined') {
for (var j = 0, dir; (dir = directions[j]); ++j) {
restore[dir] = selfCSSData.meta[dir + '_o'] + 'px';
}
}
}
// remove transition timing functions
self.
unbind(transitionEndEvent).
css(selfCSSData.original).
css(restore).
data(DATA_KEY, null);
// if we used the fadeOut shortcut make sure elements are display:none
if (prop.opacity === 'hide') {
self.css({'display': 'none', 'opacity': ''});
}
// run the main callback function
propertyCallback.call(self);
},
easings = {
bounce: CUBIC_BEZIER_OPEN + '0.0, 0.35, .5, 1.3' + CUBIC_BEZIER_CLOSE,
linear: 'linear',
swing: 'ease-in-out',
// Penner equation approximations from Matthew Lein's Ceaser: http://matthewlein.com/ceaser/
easeInQuad: CUBIC_BEZIER_OPEN + '0.550, 0.085, 0.680, 0.530' + CUBIC_BEZIER_CLOSE,
easeInCubic: CUBIC_BEZIER_OPEN + '0.550, 0.055, 0.675, 0.190' + CUBIC_BEZIER_CLOSE,
easeInQuart: CUBIC_BEZIER_OPEN + '0.895, 0.030, 0.685, 0.220' + CUBIC_BEZIER_CLOSE,
easeInQuint: CUBIC_BEZIER_OPEN + '0.755, 0.050, 0.855, 0.060' + CUBIC_BEZIER_CLOSE,
easeInSine: CUBIC_BEZIER_OPEN + '0.470, 0.000, 0.745, 0.715' + CUBIC_BEZIER_CLOSE,
easeInExpo: CUBIC_BEZIER_OPEN + '0.950, 0.050, 0.795, 0.035' + CUBIC_BEZIER_CLOSE,
easeInCirc: CUBIC_BEZIER_OPEN + '0.600, 0.040, 0.980, 0.335' + CUBIC_BEZIER_CLOSE,
easeInBack: CUBIC_BEZIER_OPEN + '0.600, -0.280, 0.735, 0.045' + CUBIC_BEZIER_CLOSE,
easeOutQuad: CUBIC_BEZIER_OPEN + '0.250, 0.460, 0.450, 0.940' + CUBIC_BEZIER_CLOSE,
easeOutCubic: CUBIC_BEZIER_OPEN + '0.215, 0.610, 0.355, 1.000' + CUBIC_BEZIER_CLOSE,
easeOutQuart: CUBIC_BEZIER_OPEN + '0.165, 0.840, 0.440, 1.000' + CUBIC_BEZIER_CLOSE,
easeOutQuint: CUBIC_BEZIER_OPEN + '0.230, 1.000, 0.320, 1.000' + CUBIC_BEZIER_CLOSE,
easeOutSine: CUBIC_BEZIER_OPEN + '0.390, 0.575, 0.565, 1.000' + CUBIC_BEZIER_CLOSE,
easeOutExpo: CUBIC_BEZIER_OPEN + '0.190, 1.000, 0.220, 1.000' + CUBIC_BEZIER_CLOSE,
easeOutCirc: CUBIC_BEZIER_OPEN + '0.075, 0.820, 0.165, 1.000' + CUBIC_BEZIER_CLOSE,
easeOutBack: CUBIC_BEZIER_OPEN + '0.175, 0.885, 0.320, 1.275' + CUBIC_BEZIER_CLOSE,
easeInOutQuad: CUBIC_BEZIER_OPEN + '0.455, 0.030, 0.515, 0.955' + CUBIC_BEZIER_CLOSE,
easeInOutCubic: CUBIC_BEZIER_OPEN + '0.645, 0.045, 0.355, 1.000' + CUBIC_BEZIER_CLOSE,
easeInOutQuart: CUBIC_BEZIER_OPEN + '0.770, 0.000, 0.175, 1.000' + CUBIC_BEZIER_CLOSE,
easeInOutQuint: CUBIC_BEZIER_OPEN + '0.860, 0.000, 0.070, 1.000' + CUBIC_BEZIER_CLOSE,
easeInOutSine: CUBIC_BEZIER_OPEN + '0.445, 0.050, 0.550, 0.950' + CUBIC_BEZIER_CLOSE,
easeInOutExpo: CUBIC_BEZIER_OPEN + '1.000, 0.000, 0.000, 1.000' + CUBIC_BEZIER_CLOSE,
easeInOutCirc: CUBIC_BEZIER_OPEN + '0.785, 0.135, 0.150, 0.860' + CUBIC_BEZIER_CLOSE,
easeInOutBack: CUBIC_BEZIER_OPEN + '0.680, -0.550, 0.265, 1.550' + CUBIC_BEZIER_CLOSE
},
domProperties = {},
cssEasing = easings[opt.easing || 'swing'] ? easings[opt.easing || 'swing'] : opt.easing || 'swing';
// seperate out the properties for the relevant animation functions
for (var p in prop) {
if (jQuery.inArray(p, pluginOptions) === -1) {
var isDirection = jQuery.inArray(p, directions) > -1,
cleanVal = _interpretValue(self, prop[p], p, (isDirection && prop.avoidTransforms !== true));
if (prop.avoidTransforms !== true && _appropriateProperty(p, cleanVal, self)) {
_applyCSSTransition(
self,
p,
opt.duration,
cssEasing,
isDirection && prop.avoidTransforms === true ? cleanVal + 'px' : cleanVal,
isDirection && prop.avoidTransforms !== true,
isTranslatable,
prop.useTranslate3d === true);
}
else {
domProperties[p] = prop[p];
}
}
}
self.unbind(transitionEndEvent);
var selfCSSData = self.data(DATA_KEY);
if (selfCSSData && !_isEmptyObject(selfCSSData) && !_isEmptyObject(selfCSSData.secondary)) {
callbackQueue++;
self.css(selfCSSData.properties);
// store in a var to avoid any timing issues, depending on animation duration
var secondary = selfCSSData.secondary;
// has to be done in a timeout to ensure transition properties are set
setTimeout(function() {
self.bind(transitionEndEvent, cssCallback).css(secondary);
});
}
else {
// it won't get fired otherwise
opt.queue = false;
}
// fire up DOM based animations
if (!_isEmptyObject(domProperties)) {
callbackQueue++;
originalAnimateMethod.apply(self, [domProperties, {
duration: opt.duration,
easing: jQuery.easing[opt.easing] ? opt.easing : (jQuery.easing.swing ? 'swing' : 'linear'),
complete: propertyCallback,
queue: opt.queue
}]);
}
// strict JS compliance
return true;
});
};
jQuery.fn.animate.defaults = {};
/**
@public
@name jQuery.fn.stop
@function
@description The enhanced jQuery.stop function (resets transforms to left/top)
@param {boolean} [clearQueue]
@param {boolean} [gotoEnd]
@param {boolean} [leaveTransforms] Leave transforms/translations as they are? Default: false (reset translations to calculated explicit left/top props)
*/
jQuery.fn.stop = function(clearQueue, gotoEnd, leaveTransforms) {
if (!cssTransitionsSupported) return originalStopMethod.apply(this, [clearQueue, gotoEnd]);
// clear the queue?
if (clearQueue) this.queue([]);
// route to appropriate stop methods
this.each(function() {
var self = jQuery(this),
selfCSSData = self.data(DATA_KEY);
// is this a CSS transition?
if (selfCSSData && !_isEmptyObject(selfCSSData)) {
var i, restore = {};
if (gotoEnd) {
// grab end state properties
restore = selfCSSData.secondary;
if (!leaveTransforms && typeof selfCSSData.meta['left_o'] !== undefined || typeof selfCSSData.meta['top_o'] !== undefined) {
restore['left'] = typeof selfCSSData.meta['left_o'] !== undefined ? selfCSSData.meta['left_o'] : 'auto';
restore['top'] = typeof selfCSSData.meta['top_o'] !== undefined ? selfCSSData.meta['top_o'] : 'auto';
// remove the transformations
for (i = cssPrefixes.length - 1; i >= 0; i--) {
restore[cssPrefixes[i]+'transform'] = '';
}
}
} else if (!_isEmptyObject(selfCSSData.secondary)) {
var cStyle = window.getComputedStyle(self[0], null);
if (cStyle) {
// grab current properties
for (var prop in selfCSSData.secondary) {
if(selfCSSData.secondary.hasOwnProperty(prop)) {
prop = prop.replace(rupper, '-$1').toLowerCase();
restore[prop] = cStyle.getPropertyValue(prop);
// is this a matrix property? extract left and top and apply
if (!leaveTransforms && (/matrix/i).test(restore[prop])) {
var explodedMatrix = restore[prop].replace(/^matrix\(/i, '').split(/, |\)$/g);
// apply the explicit left/top props
restore['left'] = (parseFloat(explodedMatrix[4]) + parseFloat(self.css('left')) + 'px') || 'auto';
restore['top'] = (parseFloat(explodedMatrix[5]) + parseFloat(self.css('top')) + 'px') || 'auto';
// remove the transformations
for (i = cssPrefixes.length - 1; i >= 0; i--) {
restore[cssPrefixes[i]+'transform'] = '';
}
}
}
}
}
}
// remove transition timing functions
self.
unbind(transitionEndEvent).
css(selfCSSData.original).
css(restore).
data(DATA_KEY, null);
}
else {
// dom transition
originalStopMethod.apply(self, [clearQueue, gotoEnd]);
}
});
return this;
};
})(jQuery, jQuery.fn.animate, jQuery.fn.stop);

54
src/libs/noClickDelay.js Normal file
View File

@ -0,0 +1,54 @@
//original source: http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone
function NoClickDelay(el) {
this.element = typeof el == 'object' ? el : document.getElementById(el);
var self = this;
if( 'ontouchstart' in window )
this.element.addEventListener('touchstart', self, true);
}
NoClickDelay.prototype = {
handleEvent: function(e) {
switch(e.type) {
case 'touchstart': this.onTouchStart(e); break;
case 'touchmove': this.onTouchMove(e); break;
case 'touchend': this.onTouchEnd(e); break;
}
},
onTouchStart: function(e) {
e.preventDefault();
this.moved = false;
this.theTarget = document.elementFromPoint(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
if(this.theTarget.nodeType == 3) this.theTarget = theTarget.parentNode;
this.theTarget.className+= ' pressed';
//alert( this.theTarget.className );
this.element.addEventListener('touchmove', this, false);
this.element.addEventListener('touchend', this, false);
},
onTouchMove: function(e) {
this.moved = true;
this.theTarget.className = this.theTarget.className.replace(/ ?pressed/gi, '');
},
onTouchEnd: function(e) {
this.element.removeEventListener('touchmove', this, false);
this.element.removeEventListener('touchend', this, false);
if( !this.moved && this.theTarget ) {
this.theTarget.className = this.theTarget.className.replace(/ ?pressed/gi, '');
var theEvent = document.createEvent('MouseEvents');
theEvent.initEvent('click', true, true);
this.theTarget.dispatchEvent(theEvent);
}
this.theTarget = undefined;
}
};
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

51
src/slidingview/slidingview.css Normal file
View File

@ -0,0 +1,51 @@
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
body {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
overflow: hidden;
padding: 0px;
margin: 0px;
background-color:#555;
overflow:hidden;
}
.slidingview_sidebar {
position:absolute;
width:250px;
left:0px;
top:0px;
bottom:0px;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
overflow:hidden;
}
.slidingview_body {
position:absolute;
left:0px;
top:0px;
bottom:0px;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
overflow:hidden;
}
.slidingview_wrapper {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
overflow: hidden;
padding: 0px;
margin: 0px;
}

178
src/slidingview/slidingview.js Normal file
View File

@ -0,0 +1,178 @@
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
var SlidingView = function( sidebarId, bodyId ) {
window.slidingView = this;
this.gestureStarted = false;
this.bodyOffset = 0;
this.sidebarWidth = 250;
this.sidebar = $("#"+sidebarId);
this.body = $("#"+bodyId);
this.sidebar.addClass( "slidingview_sidebar" );
this.body.addClass( "slidingview_body" );
var self = this;
$(window).resize( function(event){ self.resizeContent() } );
$(this.parent).resize( function(event){ self.resizeContent() } );
if ( "onorientationchange" in window ) {
$(window).bind( "onorientationchange", function(event){ self.resizeContent() } )
}
this.resizeContent();
this.setupEventHandlers();
}
SlidingView.prototype.setupEventHandlers = function() {
this.touchSupported = ('ontouchstart' in window);
this.START_EVENT = this.touchSupported ? 'touchstart' : 'mousedown';
this.MOVE_EVENT = this.touchSupported ? 'touchmove' : 'mousemove';
this.END_EVENT = this.touchSupported ? 'touchend' : 'mouseup';
var self = this;
this.body.get()[0].addEventListener( this.START_EVENT, function( event ){ self.onTouchStart(event), true } );
}
SlidingView.prototype.onTouchStart = function(event) {
//console.log( event.type );
this.gestureStartPosition = this.getTouchCoordinates( event );
var self = this;
this.touchMoveHandler = function( event ){ self.onTouchMove(event) };
this.touchUpHandler = function( event ){ self.onTouchEnd(event) };
this.body.get()[0].addEventListener( this.MOVE_EVENT, this.touchMoveHandler );
this.body.get()[0].addEventListener( this.END_EVENT, this.touchUpHandler );
this.body.stop();
}
SlidingView.prototype.onTouchMove = function(event) {
var currentPosition = this.getTouchCoordinates( event );
if ( this.gestureStarted ) {
event.preventDefault();
event.stopPropagation();
this.updateBasedOnTouchPoints( currentPosition );
return;
}
else {
//console.log( Math.abs( currentPosition.x - this.gestureStartPosition.x ) );
//detect the gesture
if ( Math.abs( currentPosition.y - this.gestureStartPosition.y ) > 50 ) {
//dragging veritcally - ignore this gesture
this.unbindEvents();
return;
}
else if ( Math.abs( currentPosition.x - this.gestureStartPosition.x ) > 50 ) {
//dragging horizontally - let's handle this
this.gestureStarted = true;
event.preventDefault();
event.stopPropagation();
this.updateBasedOnTouchPoints( currentPosition );
return;
}
}
}
SlidingView.prototype.onTouchEnd = function(event) {
if ( this.gestureStarted ) {
this.snapToPosition();
}
this.gestureStarted = false;
this.unbindEvents();
}
SlidingView.prototype.updateBasedOnTouchPoints = function( currentPosition ) {
var deltaX = (currentPosition.x - this.gestureStartPosition.x);
var targetX = this.bodyOffset + deltaX;
targetX = Math.max( targetX, 0 );
targetX = Math.min( targetX, this.sidebarWidth );
this.bodyOffset = targetX;
//console.log( targetX );
//this.body.css("left", targetX );
console.log( this.body.css("left") );
if ( this.body.css("left") != "0px" );
this.body.css("left", "0px" );
this.body.css("-webkit-transform", "translate3d(" + targetX + "px,0,0)" );
/*if ( currentPosition != targetX ) {
this.body.stop(true,false).animate({
left:targetX,
avoidTransforms:false,
useTranslate3d: true
}, 100);
}*/
this.gestureStartPosition = currentPosition;
}
SlidingView.prototype.snapToPosition = function() {
//this.body.css("-webkit-transform", "translate3d(0,0,0)" );
this.body.css("left", "0px" );
var currentPosition = this.bodyOffset;
var halfWidth = this.sidebarWidth / 2;
var targetX;
if ( currentPosition < halfWidth ) {
targetX = 0;
}
else {
targetX = this.sidebarWidth;
}
this.bodyOffset = targetX;
//console.log( currentPosition, halfWidth, targetX );
if ( currentPosition != targetX ) {
this.body.stop(true, false).animate({
left:targetX,
avoidTransforms:false,
useTranslate3d: true
}, 100);
}
}
SlidingView.prototype.unbindEvents = function() {
this.body.get()[0].removeEventListener( this.MOVE_EVENT, this.touchMoveHandler );
this.body.get()[0].removeEventListener( this.END_EVENT, this.touchUpHandler );
}
SlidingView.prototype.getTouchCoordinates = function(event) {
if ( this.touchSupported ) {
var touchEvent = event.touches[0];
return { x:touchEvent.pageX, y:touchEvent.pageY }
}
else {
return { x:event.screenX, y:event.screenY };
}
}
SlidingView.prototype.resizeContent = function() {
var $window = $(window)
var w = $window.width();
var h = $window.height();
this.body.width( w );
}

88
src/splitviewnavigator/splitviewnavigator.css Normal file
View File

@ -0,0 +1,88 @@
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
body {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
overflow: hidden;
padding: 0px;
margin: 0px;
background-color:#555;
}
.splitViewNavigator_root {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
}
.splitViewNavigator_sidebar {
position:absolute;
overflow:hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
border-right:1px solid #999;
}
.splitViewNavigator_body {
position:absolute;
background:white;
overflow:hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
.content_overlay_visible {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
}
.content_overlay_hidden {
position:absolute;
top:-1px;
left:-1px;
width:0px;
height:0px;
display:none;
}
.sidebar_portrait {
top:0px;
bottom:0px;
left:-240px;
width:240px;
}
.body_portrait {
top:0px;
bottom:0px;
right:0px;
left:0px;
}
.sidebar_landscape {
top:0px;
bottom:0px;
left:0px;
width:240px;
}
.body_landscape {
top:0px;
bottom:0px;
right:0px;
left:240px;
}

187
src/splitviewnavigator/splitviewnavigator.js Normal file
View File

@ -0,0 +1,187 @@
var SplitViewNavigator = function( target ) {
this.animating = false;
this.animationDuration = 350;
this.animationPerformed = false;
this.uniqueId = this.guid();
this.parent = $( target );
var regexp = new RegExp("Windows Phone OS 7");
this.winPhone = (navigator.userAgent.search(regexp) >= 0);
this.rootElement = $('<div class="splitViewNavigator_root"></div>');
this.sidebarContainer = $('<div class="splitViewNavigator_sidebar"></div>');
this.contentOverlay = $('<div class="content_overlay_hidden" id="overlay'+this.uniqueId+'"></div>');
this.bodyContainer = $('<div class="splitViewNavigator_body"></div>');
this.sidebarViewNavigator = new ViewNavigator( this.sidebarContainer.get()[0] );
this.bodyViewNavigator = new ViewNavigator( this.bodyContainer.get()[0] );
/*
this.bodyHeader = $('<div class="viewNavigator_header"></div>');
this.bodyContent = $('<div class="viewNavigator_content" id="contentRoot"></div>');
this.bodyContainer.append( this.bodyHeader );
this.bodyContainer.append( this.bodyContent );
this.bodyHeaderContent = $('<div class="viewNavigator_headerContent"></div>');
this.bodyHeaderTitle = $("<div class='viewNavigator_header_title'></div>");
this.bodyHeaderContent.append( this.bodyHeaderTitle );
this.bodyHeader.append( this.bodyHeaderContent );
*/
this.toggleSidebarButton = $('<li class="viewNavigator_header_backlink backLinkButton hidden" id="toggle' + this.uniqueId + '" onclick="window.splitViewNavigator.showSidebar()">toggle</li>');
this.rootElement.append( this.bodyContainer );
this.rootElement.append( this.contentOverlay );
this.rootElement.append( this.sidebarContainer );
var self = this;
$(window).resize( function(event){ self.resizeContent() } );
$(this.parent).resize( function(event){ self.resizeContent() } );
if ( "onorientationchange" in window ) {
$(window).bind( "onorientationchange", function(event){ self.resizeContent() } )
}
this.resizeContent();
this.parent.append( this.rootElement );
this.contentOverlay.click( function(event){ self.hideSidebar() } );
new NoClickDelay( this.contentOverlay.get()[0] );
new NoClickDelay( this.toggleSidebarButton.get()[0] );
window.splitViewNavigator = this;
}
SplitViewNavigator.prototype.resizeContent = function() {
this.applyStylesByOrientation();
/*
var targetWidth = this.bodyContainer.width();
console.log( targetWidth );
if ( this.bodyHeaderContent )
this.bodyHeaderContent.width( targetWidth );
if ( this.bodyHeaderContent )
this.bodyHeaderContent.width( targetWidth );
*/
}
SplitViewNavigator.prototype.applyStylesByOrientation = function() {
var $window = $(window)
var w = $window.width();
var h = $window.height();
var orientation = (w >= h) ? "landscape" : "portrait";
this.contentOverlay.removeClass( "content_overlay_visible" ).addClass( "content_overlay_hidden" );
//landscape
if ( orientation == "landscape" && this.orientation != orientation ) {
this.sidebarContainer.removeClass( "sidebar_portrait" ).addClass( "sidebar_landscape" );
this.bodyViewNavigator.setHeaderPadding( 0 );
this.toggleSidebarButton.remove();
if ( this.animationPerformed ) {
this.sidebarContainer.css( "left", 0 );
}
this.bodyContainer.removeClass( "body_portrait" ).addClass( "body_landscape" );
}
//portrait
else if ( this.orientation != orientation ) {
this.sidebarContainer.removeClass( "sidebar_landscape" ).addClass( "sidebar_portrait" );
this.bodyViewNavigator.setHeaderPadding( "70px" );
this.bodyContainer.append( this.toggleSidebarButton );
if ( this.animationPerformed ) {
this.sidebarContainer.css( "left", -this.sidebarContainer.width() );
}
this.bodyContainer.removeClass( "body_landscape" ).addClass( "body_portrait" );
}
this.orientation = orientation;
}
SplitViewNavigator.prototype.showSidebar = function() {
this.animationPerformed = true;
if ( this.orientation == "portrait" ) {
this.contentOverlay.removeClass( "content_overlay_hidden" ).addClass( "content_overlay_visible" );
this.animating = true;
this.sidebarContainer.animate({
left:0,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration, this.animationCompleteHandler());
}
}
SplitViewNavigator.prototype.hideSidebar = function() {
if ( this.orientation == "portrait" ) {
this.contentOverlay.removeClass( "content_overlay_visible" ).addClass( "content_overlay_hidden" );
this.animating = true;
this.sidebarContainer.animate({
left:-this.sidebarContainer.width(),
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration, this.animationCompleteHandler());
}
}
SplitViewNavigator.prototype.animationCompleteHandler = function() {
var self = this;
return function() {
self.animating = false;
//self.resetScroller();
}
}
SplitViewNavigator.prototype.pushSidebarView = function( viewDescriptor ) {
this.sidebarViewNavigator.pushView( viewDescriptor );
}
SplitViewNavigator.prototype.popSidebarView = function() {
this.sidebarViewNavigator.popView();
}
SplitViewNavigator.prototype.replaceSidebarView = function( viewDescriptor ) {
this.sidebarViewNavigator.replaceView( viewDescriptor );
}
SplitViewNavigator.prototype.pushBodyView = function( viewDescriptor ) {
this.bodyViewNavigator.pushView( viewDescriptor );
}
SplitViewNavigator.prototype.popBodyView = function() {
this.bodyViewNavigator.popView();
}
SplitViewNavigator.prototype.replaceBodyView = function( viewDescriptor ) {
this.bodyViewNavigator.replaceView( viewDescriptor );
}
/*
SplitViewNavigator.prototype.setBodyView = function( viewDescriptor ) {
this.bodyHeaderTitle.text( viewDescriptor.title );
this.bodyContent.empty();
this.bodyContent.append( viewDescriptor.view );
}*/
//GUID logic from http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
SplitViewNavigator.prototype.S4 = function() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
}
SplitViewNavigator.prototype.guid = function() {
return (this.S4() + this.S4() + "-" + this.S4() + "-4" + this.S4().substr(0,3) + "-" + this.S4() + "-" + this.S4() + this.S4() + this.S4()).toLowerCase();
}

183
src/viewnavigator/viewnavigator.css Normal file
View File

@ -0,0 +1,183 @@
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
body {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
overflow: hidden;
padding: 0px;
margin: 0px;
}
.viewNavigator_root {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
background-color:666666;
}
.viewNavigator_header {
position:absolute;
top:0px;
left:0px;
right:0px;
height:46px;
overflow:hide;
padding:0px;
/*http://www.colorzilla.com/gradient-editor/*/
background: rgb(149,149,149); /* Old browsers */
background: -moz-linear-gradient(top, rgba(149,149,149,1) 0%, rgba(13,13,13,1) 46%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 53%, rgba(78,78,78,1) 76%, rgba(56,56,56,1) 87%, rgba(27,27,27,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(149,149,149,1)), color-stop(46%,rgba(13,13,13,1)), color-stop(50%,rgba(1,1,1,1)), color-stop(53%,rgba(10,10,10,1)), color-stop(76%,rgba(78,78,78,1)), color-stop(87%,rgba(56,56,56,1)), color-stop(100%,rgba(27,27,27,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */
}
.viewNavigator_header_backlink {
position:absolute;
top:0px;
left:0px;
z-index:2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
max-width:30%;
}
.viewNavigator_header_title {
position:absolute;
top:12px;
left:0%;
right:0%;
margin-left:auto;
margin-right:auto;
text-align:center;
font-weight: bold;
color: #FFFFFF;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
max-width:48%;
}
.viewNavigator_headerContent {
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
position:absolute;
}
.viewNavigator_content {
position:absolute;
top:46px;
left:0px;
right:0px;
bottom:0px;
overflow:hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
.viewNavigator_content * {
-webkit-transform: translate3d(0,0,0);
}
.viewNavigator_contentHolder {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color:white;
overflow:auto;
padding:0px;
margin:0px;
overflow: hidden;
-webkit-overflow-scrolling : touch;
}
.viewNavigator_backface {
-webkit-backface-visibility: hidden;
}
/*http://www.red-team-design.com/just-another-awesome-css3-buttons*/
.backLinkButton
{
cursor:pointer;
display: inline-block;
white-space: nowrap;
background-color: #ccc;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
border: 1px solid #777;
padding: 4px 10px;
margin: 0.5em;
font: bold Arial, Helvetica;
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: .2em;
-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
.backLinkButton:hover
{
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
background-image: -moz-linear-gradient(top, #fafafa, #ddd);
background-image: -ms-linear-gradient(top, #fafafa, #ddd);
background-image: -o-linear-gradient(top, #fafafa, #ddd);
background-image: linear-gradient(top, #fafafa, #ddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
}
.pressed,
.backLinkButton:active
{
-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
position: relative;
top: 1px;
}
.backLinkButton:focus
{
outline: 0;
background: #fafafa;
}

297
src/viewnavigator/viewnavigator.js Normal file
View File

@ -0,0 +1,297 @@
var ViewNavigator = function( target ) {
this.supportsBackKey = true; //phonegap on android only
this.animating = false;
this.animationX = 150;
this.animationDuration = 350;
this.history = [];
this.scroller = null;
this.headerPadding = 0;
this.uniqueId = this.guid();
var regexp = new RegExp("Windows Phone OS 7");
this.winPhone = (navigator.userAgent.search(regexp) >= 0);
this.rootElement = $('<div class="viewNavigator_root"></div>');
this.header = $('<div class="viewNavigator_header"></div>');
this.content = $('<div class="viewNavigator_content" id="contentRoot"></div>');
this.rootElement.append( this.header );
this.rootElement.append( this.content );
this.parent = $( target );
var self = this;
$(window).resize( function(event){ self.resizeContent() } );
$(this.parent).resize( function(event){ self.resizeContent() } );
this.parent.append( this.rootElement );
if ( window.viewNavigators == null || window.viewNavigators == undefined ) {
window.viewNavigators = {};
}
window.viewNavigators[ this.uniqueId ] = this;
if ( typeof PhoneGap != 'undefined' ) {
//backKeyViewNavigators is only used in PhoneGap on Android
if ( window.backKeyViewNavigators == null || window.backKeyViewNavigators == undefined ) {
window.backKeyViewNavigators = [];
}
if ( this.supportsBackKey ) {
window.backKeyViewNavigators.push( this );
}
}
}
ViewNavigator.prototype.replaceView = function( viewDescriptor ) {
if (this.animating)
return;
viewDescriptor.animation = "pushEffect"
//this is a hack to mimic behavior of pushView, then pop off the "current" from the history
this.history.push( viewDescriptor );
this.updateView( viewDescriptor );
this.history.pop();
this.history.pop();
this.history.push( viewDescriptor );
}
ViewNavigator.prototype.pushView = function( viewDescriptor ) {
if (this.animating)
return;
viewDescriptor.animation = "pushEffect"
this.history.push( viewDescriptor );
this.updateView( viewDescriptor );
}
ViewNavigator.prototype.popView = function() {
if (this.animating || this.history.length <= 1 )
return;
var currentViewDescriptor = this.history[ this.history.length-1];
if ( currentViewDescriptor.backCallback ) {
currentViewDescriptor.backCallback();
}
this.history.pop();
var viewDescriptor = this.history[ this.history.length-1 ];
viewDescriptor.animation = "popEffect"
this.updateView( viewDescriptor );
}
ViewNavigator.prototype.setHeaderPadding = function( amount ) {
this.headerPadding = amount;
if ( this.headerBacklink ) {
this.headerBacklink.css("left", amount);
}
}
ViewNavigator.prototype.updateView = function( viewDescriptor ) {
this.animating = true;
this.contentPendingRemove = this.contentViewHolder;
this.headerContentPendingRemove = this.headerContent;
this.headerContent = $('<div class="viewNavigator_headerContent"></div>');
this.headerTitle = $("<div class='viewNavigator_header_title'>" + viewDescriptor.title + "</div>");
this.headerContent.append( this.headerTitle );
var linkGuid = this.guid();
if ( viewDescriptor.backLabel ) {
this.headerBacklink = $('<li class="viewNavigator_header_backlink backLinkButton" id="link' + linkGuid + '" onclick="window.viewNavigators[\'' + this.uniqueId + '\'].popView()">'+ viewDescriptor.backLabel + '</li>');
this.headerContent.append( this.headerBacklink );
//this is for proper handling in splitviewnavigator
this.setHeaderPadding( this.headerPadding );
}
var id = this.guid();
this.contentViewHolder = $('<div class="viewNavigator_contentHolder" id="' + id + '"></div>');
this.contentViewHolder.append( viewDescriptor.view );
this.resizeContent();
$(this.contentPendingRemove).click(function(){ return false; });
if ( viewDescriptor.animation == "popEffect" ) {
this.contentViewHolder.css( "left", -this.contentViewHolder.width() );
this.contentViewHolder.css( "opacity", 1 );
this.content.prepend( this.contentViewHolder );
this.headerContent.css( "left", -this.animationX );
this.headerContent.css( "opacity", 0 );
this.header.append( this.headerContent );
this.contentPendingRemove.animate({
left:this.contentViewHolder.width(),
opacity:1,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration, this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ));
//remove this to change back
this.contentViewHolder.animate({
left:0,
opacity:1,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration);
this.headerContentPendingRemove.animate({
left:this.animationX,
opacity:0,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration );
this.headerContent.animate({
left:0,
opacity:1,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration );
}
else if ( this.history.length > 1 ) {
this.contentViewHolder.css( "left", this.contentViewHolder.width() );
this.contentViewHolder.css( "opacity", 1 );
this.content.append( this.contentViewHolder );
this.headerContent.css( "left", this.animationX );
this.headerContent.css( "opacity", 0 );
this.header.append( this.headerContent );
this.contentViewHolder.animate({
left:0,
opacity:1,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration, this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ));
this.contentPendingRemove.animate({
left:-this.contentViewHolder.width(),
opacity:1,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration);
this.headerContent.animate({
left:0,
opacity:1,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration );
this.headerContentPendingRemove.animate({
left:-this.animationX,
opacity:0,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration );
}
else {
this.contentViewHolder.css( "left", 0 );
this.contentViewHolder.css( "opacity", 1 );
this.content.append( this.contentViewHolder );
this.headerContent.css( "left", 0 );
this.headerContent.css( "opacity", 1 );
this.header.append( this.headerContent );
this.animating = false;
this.resetScroller();
}
if ( viewDescriptor.backLabel ) {
new NoClickDelay( this.headerBacklink.get()[0] );
}
}
ViewNavigator.prototype.resetScroller = function() {
var id = this.contentViewHolder.attr( "id" );
if ( !this.winPhone ) {
if ( this.scroller != null ) {
this.scroller.destroy();
}
if ( id ) {
var self = this;
setTimeout( function() { self.scroller = new iScroll( id ); }, 10 );
//this.scroller = new iScroll( id );
}
}
}
ViewNavigator.prototype.refreshScroller = function() {
if ( !this.winPhone ) {
if ( this.scroller != null ) {
this.scroller.refresh();
}
}
}
ViewNavigator.prototype.animationCompleteHandler = function(removalTarget, headerRemovalTarget, headerView, contentView) {
var self = this;
return function() {
self.animating = false;
self.resetScroller();
if ( removalTarget ) {
removalTarget.unbind( "click" );
removalTarget.remove();
}
if ( headerRemovalTarget ) {
headerRemovalTarget.unbind( "click" );
headerRemovalTarget.remove();
}
}
}
ViewNavigator.prototype.resizeContent = function(event) {
var targetWidth = this.parent.width();
if ( this.headerContent )
this.headerContent.width( targetWidth );
if ( this.contentViewHolder )
this.contentViewHolder.width( targetWidth );
}
//GUID logic from http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
ViewNavigator.prototype.S4 = function() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
}
ViewNavigator.prototype.guid = function() {
return (this.S4() + this.S4() + "-" + this.S4() + "-4" + this.S4().substr(0,3) + "-" + this.S4() + "-" + this.S4() + this.S4() + this.S4()).toLowerCase();
}
/* PHONEGAP INTEGRATION */
//android+phonegap specific back button support - will only work if phonegap is used on android (www.phonegap.com)
if ( typeof PhoneGap != 'undefined' ) {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("backbutton", onBackKey, false);
}
function onBackKey( event ) {
event.preventDefault();
window.viewNavigator.popView();
for ( var x=0; x<window.backKeyViewNavigators.length; x++ ) {
window.backKeyViewNavigators[x].popView();
}
}