Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added examples of "folding sidebar" using oriDomi open source toolkit
- Loading branch information
Showing
7 changed files
with
1,118 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -1,4 +1,4 @@ | |||
html, body { height:100%; } |
|
||
body { | body { | ||
padding:0; | padding:0; | ||
margin:0; | margin:0; | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -0,0 +1,106 @@ | |||
<!DOCTYPE html> | |||
<html xmlns="http://www.w3.org/1999/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 src="../../../src/libs/oriDomi.js"></script> | |||
|
|||
|
|||
<script> | |||
|
|||
var sv; | |||
$(document).ready( function() { | |||
|
|||
//Setup the ViewNavigator | |||
sv = new SlidingView( 'sidebar', 'body' ); | |||
sv.sidebarWidth = 420; | |||
sv.sidebar.oriDomi({ hPanels: 1, vPanels: 2, speed:1, perspective:800, shadingIntensity:4 }); | |||
sv.sidebar.oriDomi( 'accordion', 90 ); | |||
sv.sidebar.bind( "slidingViewProgress", function(event, data) { | |||
|
|||
var fudge = 1 | |||
var half = data.max/2; | |||
if ( data.current < half ) { | |||
fudge = (data.current)/half | |||
} else if ( data.current > half ) { | |||
fudge = (half-(data.current-half))/half | |||
} | |||
fudge *= 15 | |||
|
|||
var angle = 90-((90*(data.current/data.max))); | |||
//console.log( (angle+fudge) ); | |||
|
|||
if ( (angle+fudge) > 0 ) { | |||
|
|||
sv.sidebar.oriDomi( 'restoreOriDomi' ); | |||
sv.sidebar.oriDomi( 'accordion', (angle+fudge) ); | |||
} | |||
else { | |||
sv.sidebar.oriDomi( 'restoreDOM' ); | |||
} | |||
}); | |||
} ); | |||
|
|||
function sidebarClick() { | |||
var color = '#' + parseInt(Math.random()*0xFFFFFF).toString(16); | |||
console.log(color); | |||
$('#sidebar').css('color', color ); | |||
} | |||
|
|||
|
|||
</script> | |||
|
|||
<style> | |||
|
|||
body { | |||
background: #ccc; | |||
} | |||
|
|||
#sidebar { | |||
width:400px; | |||
height:100%; | |||
padding:10px; | |||
background-image:url('https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcTqUiE7E5eQ8bhHensKUtTt2hzd61ogIcYppKKYHfCIE1Gr_rMv6g'); | |||
background-color: red; | |||
padding:10px; | |||
font-size:36pt; | |||
} | |||
|
|||
#body { | |||
background-color: #555; | |||
padding:10px; | |||
text-align:center; | |||
background-image: url('https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcS_aG-7AMK8jYO8eHxkCVqpBHmZnGsNzCBB873ee-wiJYQ75yUcZA'); | |||
} | |||
|
|||
a{ | |||
color:white; | |||
} | |||
</style> | |||
|
|||
</head> | |||
<body> | |||
|
|||
<div class="slidingview_wrapper"> | |||
<div id="sidebar"> | |||
<button ontouchstart="sidebarClick()">Tap To Change Text Color</button> | |||
<hr/> | |||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis, lorem nec vestibulum placerat, turpis nunc porttitor urna, non consectetur mauris eros vitae urna. Vestibulum at augue nisi. Suspendisse lobortis, libero vel adipiscing egestas, quam mi rhoncus justo, id imperdiet ligula nibh porta massa. | |||
|
|||
</div> | |||
<div id="body"> | |||
<h1 style="color:white; font-size:50pt;">Swipe horizontally to reveal the sidebar</h1> | |||
<p style="color:white;">Created with <a href="http://oridomi.com/">http://oridomi.com/</a>, works on iOS devices.</p> | |||
|
|||
<img src="http://incubator.apache.org/cordova/images/cordova_256.png" /> | |||
</div> | |||
</div> | |||
|
|||
</body> | |||
</html> |
163 changes: 163 additions & 0 deletions
163
samples/03 - slidingView/05 - oridomi w viewnav/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -0,0 +1,163 @@ | |||
<!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> | |||
<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> | |||
<script src="../../../src/libs/oriDomi.js"></script> | |||
|
|||
|
|||
<style> | |||
|
|||
body { | |||
background: #eee; | |||
padding:0px; | |||
overflow:hidden; | |||
border-left:1px solid black; | |||
} | |||
|
|||
#sidebar { | |||
width:420px; | |||
padding:0px; | |||
overflow:hidden; | |||
height:100%; | |||
} | |||
|
|||
#sidebar .viewNavigator_header { | |||
background: #333; | |||
} | |||
|
|||
#sidebar .viewNavigator_contentHolder, | |||
#sidebar .viewNavigator_content { | |||
background: #bbb; | |||
} | |||
|
|||
</style> | |||
|
|||
<script> | |||
|
|||
var sv; | |||
$(document).ready( function() { | |||
|
|||
//Setup the ViewNavigator | |||
//Setup the default views | |||
var leftView = getView( "left" ); | |||
leftView.backLabel = null; | |||
|
|||
var rightView = getView( "right" ); | |||
rightView.backLabel = null; | |||
|
|||
|
|||
sv = 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 ); | |||
|
|||
//setup oridomi | |||
sv.sidebarWidth = 420; | |||
sv.sidebar.oriDomi({ hPanels: 1, vPanels: 2, speed:1, perspective:800, shadingIntensity:4 }); | |||
sv.sidebar.oriDomi( 'accordion', 90 ); | |||
sv.sidebar.bind( "slidingViewProgress", function(event, data) { | |||
|
|||
var fudge = 1 | |||
var half = data.max/2; | |||
if ( data.current < half ) { | |||
fudge = (data.current)/half | |||
} else if ( data.current > half ) { | |||
fudge = (half-(data.current-half))/half | |||
} | |||
fudge *= 15 | |||
|
|||
var angle = 90-((90*(data.current/data.max))); | |||
//console.log( (angle+fudge) ); | |||
|
|||
if ( (angle+fudge) > 0 ) { | |||
|
|||
sv.sidebar.oriDomi( 'restoreOriDomi' ); | |||
sv.sidebar.oriDomi( 'accordion', (angle+fudge) ); | |||
} | |||
else { | |||
sv.sidebar.oriDomi( 'restoreDOM' ); | |||
} | |||
}); | |||
} ); | |||
|
|||
function sidebarClick() { | |||
var color = '#' + parseInt(Math.random()*0xFFFFFF).toString(16); | |||
console.log(color); | |||
$('#sidebar').css('color', color ); | |||
} | |||
|
|||
|
|||
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="viewNavigator_backButton">push view</li> <li href="#" onclick="'+side+'PopView()" class="viewNavigator_backButton">pop view</li><hr>' + getMeat() + '</div>'); | |||
var links = bodyView.find('a'); | |||
|
|||
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"></div> | |||
<div id="body"></div> | |||
</div> | |||
|
|||
</body> | |||
</html> |
Oops, something went wrong.