Skip to content

Commit

Permalink
added scrolling for Interfaces menu in iOS 5
Browse files Browse the repository at this point in the history
  • Loading branch information
@charlieroberts-rit
charlieroberts-rit committed Sep 16, 2011
1 parent 6d3705a commit da5afe0
Show file tree
Hide file tree
Showing 5 changed files with 55 additions and 641 deletions.
6 changes: 3 additions & 3 deletions iOS/Control/Control.xcodeproj/project.pbxproj
View file
Expand Up @@ -622,7 +622,7 @@
"\"$(SRCROOT)/\"../PhoneGapLib/**",
);
INFOPLIST_FILE = "Control-Info.plist";
IPHONEOS_DEPLOYMENT_TARGET = 4.2;
IPHONEOS_DEPLOYMENT_TARGET = 5.0;
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)\"",
Expand Down Expand Up @@ -654,7 +654,7 @@
"\"$(SRCROOT)/\"../PhoneGapLib/**",
);
INFOPLIST_FILE = "Control-Info.plist";
IPHONEOS_DEPLOYMENT_TARGET = 4.2;
IPHONEOS_DEPLOYMENT_TARGET = 5.0;
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)\"",
Expand Down Expand Up @@ -747,7 +747,7 @@
"\"$(SRCROOT)/\"../PhoneGapLib/**",
);
INFOPLIST_FILE = "Control-Info.plist";
IPHONEOS_DEPLOYMENT_TARGET = 4.2;
IPHONEOS_DEPLOYMENT_TARGET = 5.0;
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)\"",
Expand Down
7 changes: 4 additions & 3 deletions www/css/master.css
View file
Expand Up @@ -25,6 +25,7 @@ b { font-weight: bold; }
/*-webkit-transition: height .2s linear;*/
}


#Interface { display: block; }

li { color: #fff; }
Expand Down Expand Up @@ -76,7 +77,7 @@ h3 { font-weight: normal !important; text-shadow: none !important}}
padding: .5em;
}

ul li { font-size: 1em; }
ul li { font-size: 1em; display:block; height:35px;}

.destinationListItem {
height: 1.75em !important;
Expand All @@ -89,8 +90,8 @@ ul li { font-size: 1em; }
}

.interfaceListItem {
height: 1.5em !important;
line-height: 1.5em !important;
height: 2em !important;
line-height: 2em !important;
}

.destinationImage {
Expand Down
64 changes: 30 additions & 34 deletions www/index.html
View file
Expand Up @@ -15,24 +15,15 @@

<script type="text/javascript" charset="utf-8" src="js/phonegap-uncompressed.js"></script>
<script type="text/javascript" charset="utf-8" src="js/keyevent.js"></script>
<!--<link rel="stylesheet" href="css/jquery.mobile.scrollview.css" />-->

<!--<link rel="stylesheet" href="css/iscroll.css" type="text/css" media="screen" charset="utf-8">-->

<!--<script type="text/javascript" charset="utf-8" src="js/NativeControls.js"></script>-->
<!-- on android
<!-- on android
<script type="text/javascript" charset="utf-8" src="js/keyevent.js"></script>
-->

<!-- jQuery -->
<script src="js/jquery-1.5.js"></script>
<script src="js/jquery.mobile-1.0a3.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<!--<script src="js/jquery.mobile.scrollview.js"></script>
<script src="js/scrollview.js"></script>-->

<!-- iScroll: scrolling table views for webkit interface: http://cubiq.org/iscroll -->
<!--<script type="text/javascript" src="js/iscroll.js"></script>-->
<script src="js/touch-scroll.js"></script>

<!-- Lawnchair. used to persistently store json files. http://brianleroux.github.com/lawnchair/ -->
<script type="text/javascript" src="lawnchair/src/Lawnchair.js"></script>
Expand Down Expand Up @@ -64,27 +55,32 @@
<script type="text/javascript" src="js/ControlCompass.js"></script>
<script type="text/javascript" src="js/ControlGyro.js"></script>

<!--
<script type="text/javascript" src="js/AudioInput.js"></script>-->

<!--<script type="text/javascript" src="../../interfaces/test.js"></script>-->
<!--<script type="text/javascript" src="js/AudioInput.js"></script>-->

<script type="text/javascript" charset="utf-8">
var pages, control, interfaceScroller, destinationScroller, interfaceManager, destinationManager, _protocol;
function preventBehavior(e) { // prevent scrolling
e.preventDefault();
//console.log("target = " + e.target + " :: " + $(e.target).attr("id"));
if($(e.target).is("div")) {
e.preventDefault();
}else{
//console.log("list height = " + $(e.target).parent().height() + " :: wrapper height = " + $("#wrapper").height());
if($(e.target).is("li") && $(e.target).parent().height() < $("#wrapper").height()) {
e.preventDefault();
}
}
};

PhoneGap.addConstructor(function(){
init();
});

function init() {
console.log("CONSTRUCTOR");
document.addEventListener("touchmove", preventBehavior, false); // prevents webkit from scrolling DNR
//console.log("interface name = *******" + window.loadedInterfaceName);
// console.log("window.TEST.pages = " + window.TEST.pages);

//document.addEventListener("touchmove", preventBehavior, false); // prevents webkit from scrolling DNR
$("body").bind('touchmove', preventBehavior);
//$("body").unbind('touchmove', preventBehavior);

//$("#Interfaces").bind('touchmove', preventBehavior, true);
control = new Control();

interfaceManager = new InterfaceManager();
Expand All @@ -99,18 +95,13 @@
destinationManager = new DestinationManager();
destinationManager.init();



document.addEventListener('orientationChanged', control.onRotation, false);

//interfaceScroller = new iScroll('interfaceScroller');
//destinationScroller = new iScroll('destinationScroller');
//preferencesScroller = new iScroll('preferencesScroller');

// PhoneGap.exec("Device.setRotation", "portrait");
// PhoneGap.exec("Device.setRotation", "portrait");

preferencesManager = new PreferencesManager();
console.log("end of constructor");
wrapMe();
}

function autolockToggle() {
Expand All @@ -120,15 +111,20 @@
if(device.platform == 'iPhone') PhoneGap.exec("Device.autolockToggle", autolock);
preferences.save({key:"autolock", shouldAutolock:autolock});
}

function wrapMe() {
console.log("device height = " + device.height + " header height = " + $('#header').height() + " footer height = " + $('#ftr').height());
$('#wrapper').height(screen.height - $('#header').height() - $('#ftr').height());
}

</script>
</head>

<body id="stage" onload="init();control.init();" style="background-color:#000; -webkit-user-select: none;" class="theme">
<body id="stage" onload="init();control.init();" style="background-color:#000; -webkit-user-select: none; overflow:hidden;" class="theme">


<div data-role="page" id="Interfaces" data-theme="a">
<div class="ui-bar-a ui-header " data-role="header" id="header" data-backbtn="false">
<div class="ui-bar-a ui-header " data-role="header" id="header" data-backbtn="false" style="z-index:100">
<a href="#" id="interfaceEditBtn" style="padding-top:.5em; width:4em; height:1.75em;" class="ui-btn-left ui-btn ui-btn-corner-all ui-btn-up-a" ontouchend="interfaceManager.editInterfaceList()">Edit</a>
<h1 class="ui-title">Interfaces</h1>
<div style="display:inline; position:absolute; top:.5em; right:.75em;">
Expand All @@ -137,8 +133,8 @@ <h1 class="ui-title">Interfaces</h1>
</div>
</div>

<div data-role="content">
<ul id="interfaceList" data-role="listview" data-theme="g"></ul>
<div id="wrapper" data-role="content" style="overflow-y: scroll; -webkit-overflow-scrolling: touch;">
<ul id="interfaceList" data-theme="g" data-role="listview" style=""></ul>
</div>
</div>

Expand Down Expand Up @@ -209,11 +205,11 @@ <h1>Info</h1>

<!--<div style="display:block; position:fixed; top: 100px; left: 100px; width:50px; height:50px; background-color:#f00; z-index:100;" ontouchend="window.location.reload(true)"><h2>RELOAD</h2></div>-->

<div data-role="footer" data-id="foo1" data-position="fixed" class="ftr ui-bar-a ui-footer ui-footer-fixed ui-fixed-overlay" role="contentinfo" style=" border-top-width:0;bottom:0px">
<div data-role="footer" id="ftr" data-id="foo1" data-position="fixed" class="ftr ui-bar-a ui-footer ui-footer-fixed ui-fixed-overlay" role="contentinfo" style=" border-top-width:0;bottom:0px">
<div data-role="navbar" class="ui-navbar ui-navbar-noicons" role="navigation">
<ul class="ui-navbar-noicons ui-grid-c" style="border-top-width:0;">
<li class="ui-block-a" style=" border-top-width:0;">
<a href="#Interfaces" ontouchstart="control.changeTab(document.getElementById('Interfaces'));$.mobile.changePage('#Interfaces');" class="ui-btn ui-btn-up-a" style=" border-top-width:0;" data-theme="a">
<a href="#" ontouchend="$.mobile.changePage('#Interfaces');" class="ui-btn ui-btn-up-a" style=" border-top-width:0;" data-theme="a">
<span class="ui-btn-inner"><span class="ui-btn-text" style="font-size:1em">Interfaces</span></span>
</a>
</li>
Expand Down
24 changes: 18 additions & 6 deletions www/js/InterfaceManager.js
View file
Expand Up @@ -160,7 +160,7 @@ function InterfaceManager() {
interfaceManager.interfaceFiles.all(function(r) { interfaceManager.createInterfaceListWithArray(r); });
window.isLoadingInterfaces = false;
}
this.createInterfaceListWithArray = function(listArray) {
var list = document.getElementById('interfaceList');
var count = 0;
Expand All @@ -169,15 +169,27 @@ function InterfaceManager() {
var r = listArray[i];
var item = document.createElement('li');

item.style.borderBottom = "1px solid #666";
item.style.fontWeight = "normal";
item.setAttribute("ontouchend", "$.mobile.changePage('#SelectedInterfacePage');interfaceManager.highlight("+(count++)+"); interfaceManager.selectInterfaceFromList('" + r.key + "');");
function _touchend(_key, _count) {
return function(e) {
interfaceManager.highlight(_count);
interfaceManager.selectInterfaceFromList(_key);
}
}

$(item).bind("tap", _touchend(r.key, count++));

item.innerHTML = r.key;
$(item).addClass('destinationListItem');
$(item).addClass('interfaceListItem');

$(item).css({
"border-bottom" : "1px solid #666",
"font-weight" : "normal"
});

$(item).addClass('destinationListItem interfaceListItem');

list.appendChild(item);
}

$(list).listview('refresh');
}

Expand Down

0 comments on commit da5afe0

Please sign in to comment.