Skip to content

Commit

Permalink
Overhaul of cards approach to take advantage of position fixed suppor…
Browse files Browse the repository at this point in the history 
…t in ios5 and android, but still having trouble with scroll position in chats. Android not scrolling even though test page does. Also fixes issue with intermittent errors with using the google API by using async plugin.
  • Loading branch information
@jrburke
jrburke committed Oct 31, 2011
1 parent 9c23041 commit 2d83d64
Show file tree
Hide file tree
Showing 7 changed files with 279 additions and 241 deletions.
Binary file modified phonegap/android/bin/resources.ap_
View file
Binary file not shown.
136 changes: 68 additions & 68 deletions phonegap/www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,88 +8,88 @@
<script data-main="js/index" src="js/require.js"></script>
</head>
<body>
<div id="cardContainer">
<div id="cards">
<div data-cardid="signIn" title="Sign In" class="card noiscroll">
<div class="scroller">
<!-- a class="homeNav browserSignIn" data-nonav="nonav" href="#browserSignIn">Sign In With BrowserID</a -->
<form class="signInForm" action="#">
<input type="text" name="displayName" value="" placeholder="name">
<input type="email" name="email" value="" placeholder="email">
<input type="submit" name="go" value"Go">
</form>
</div>
<div id="cards">
<div data-cardid="signIn" title="Sign In" class="card noiscroll">
<div class="scroller">
<!-- a class="homeNav browserSignIn" data-nonav="nonav" href="#browserSignIn">Sign In With BrowserID</a -->
<form class="signInForm" action="#">
<input type="text" name="displayName" value="" placeholder="name">
<input type="email" name="email" value="" placeholder="email">
<input type="submit" name="go" value"Go">
</form>
</div>
<div data-cardid="start" title="submarine" class="card noiscroll">
<div class="scroller">
<a class="homeNav" href="#shareLocation">Share Location With...</a>
<div class="shareInfo">
<div class="photo" data-bind="photo"></div>
<div class="displayName" data-bind="displayName"></div>
<div class="phoneNumber" data-bind="phoneNumber"></div>
</div>
</div>
<div data-cardid="start" title="submarine" class="card noiscroll">
<div class="scroller">
<a class="homeNav" href="#shareLocation">Share Location With...</a>
<div class="shareInfo">
<div class="photo" data-bind="photo"></div>
<div class="displayName" data-bind="displayName"></div>
<div class="phoneNumber" data-bind="phoneNumber"></div>
</div>
</div>
<div data-cardid="inviteStart" title="submarine invite" class="card noiscroll">
<div class="scroller">
<div class="inviter">
Do you want to use submarine to help find and chat with
<span data-bind="displayName"></span>?
</div>
<a class="conversationLink" href="#conversation?id=">Yes</a>
</div>
<div data-cardid="inviteStart" title="submarine invite" class="card noiscroll">
<div class="scroller">
<div class="inviter">
Do you want to use submarine to help find and chat with
<span data-bind="displayName"></span>?
</div>
<a class="conversationLink" href="#conversation?id=">Yes</a>
</div>
<div data-cardid="peeps" title="Private" class="card conversations">
<div class="subHeader hbox">
<div class="boxFlex">
<input id="search" type="text" placeholder="search people">
</div>
<button class="search">search</button>
<button class="button" data-href="#listUsersForAddPeep">add contact</button>
</div>
<div class="scroller" data-childclass="peepSummary">
</div>
<div data-cardid="peeps" title="Private" class="card conversations">
<div class="subHeader hbox">
<div class="boxFlex">
<input id="search" type="text" placeholder="search people">
</div>
<button class="search">search</button>
<button class="button" data-href="#listUsersForAddPeep">add contact</button>
</div>
<div data-cardid="notifications" title="Notifications" class="card">
<div class="scroller" data-childaddedyou="personLink">
</div>
<div class="scroller" data-childclass="peepSummary">
</div>
<div data-cardid="listUsersForAddPeep" title="Add Peep" class="card">
<div class="scroller" data-childclass="addPeepLink">
</div>
</div>
<div data-cardid="notifications" title="Notifications" class="card">
<div class="scroller" data-childaddedyou="personLink">
</div>
<div data-cardid="user" class="card">
<div class="scroller">
<div class="peepInfo">
<img class="peepInfoPic" data-bind="pic" data-attr="src" src="i/face2.png">
<span data-bind="name" class="peepInfoName"></span>
</div>
<div class="peepConversations" data-childclass="convListItem">
</div>
<form data-class="compose"></form>
<span class="addToChatMessage hidden">This person needs to add you before you can chat with them.</span>
<form class="addPeepButtonForm hidden">
<input type="hidden" name="peepId" value="" data-bind="id" data-attr="value">
<button class="">Add</button>
</form>
</div>
</div>
<div data-cardid="listUsersForAddPeep" title="Add Peep" class="card">
<div class="scroller" data-childclass="addPeepLink">
</div>
<div data-cardid="conversation" title="Conversation" class="card">
<div class="scroller">
<div class="location">
<span class="avatar"><img src="i/face2.png" class="avatar" data-bind="from.pic" data-attr="src"/></span>
<span class="name" data-bind="from.name"></span>
is <span class="dist"></span> km away.
</div>
<div class="conversationMessages" data-childclass="message">
</div>
</div>
<div data-cardid="user" class="card">
<div class="scroller">
<div class="peepInfo">
<img class="peepInfoPic" data-bind="pic" data-attr="src" src="i/face2.png">
<span data-bind="name" class="peepInfoName"></span>
</div>
<div class="peepConversations" data-childclass="convListItem">
</div>
<form data-class="compose"></form>
<span class="addToChatMessage hidden">This person needs to add you before you can chat with them.</span>
<form class="addPeepButtonForm hidden">
<input type="hidden" name="peepId" value="" data-bind="id" data-attr="value">
<button class="">Add</button>
</form>
</div>
<div data-cardid="compose" title="Compose" class="card">
<div class="scroller">
<form data-class="compose"></form>
</div>
<div data-cardid="conversation" title="Conversation" class="card">
<div class="scroller">
<div class="location">
<span class="avatar"><img src="i/face2.png" class="avatar" data-bind="from.pic" data-attr="src"/></span>
<span class="name" data-bind="from.name"></span>
is <span class="dist"></span> km away.
</div>
<div class="conversationMessages" data-childclass="message">
</div>
</div>
<div class="cardFooter">
<form data-class="compose"></form>
</div>
</div>
<div data-cardid="compose" title="Compose" class="card">
<div class="scroller">
<form data-class="compose"></form>
</div>
</div>
</div>
Expand Down
34 changes: 34 additions & 0 deletions phonegap/www/js/async.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/** @license
* RequireJS plugin for async dependency load like JSONP and Google Maps
* Author: Miller Medeiros
* Version: 0.1.0 (2011/03/23)
* Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
*/
define(function(){

function injectScript(src){
var s, t;
s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = src;
t = document.getElementsByTagName('script')[0]; t.parentNode.insertBefore(s,t);
}

function formatUrl(name, id){
var paramRegex = /!(.+)/,
url = name.replace(paramRegex, ''),
param = (paramRegex.test(name))? name.replace(/.+!/, '') : 'callback'; //default param name is 'callback'
url += (url.indexOf('?') < 0)? '?' : '&';
return url + param +'='+ id;
}

return{
load : function(name, req, onLoad, config){
if(config.isBuild){
onLoad(null); //avoid errors on the optimizer
}else{
var id = '__mm_asynch_req__'+ (+new Date());
window[id] = onLoad; //create a global variable that stores onLoad so callback function can define new module after async load
injectScript(formatUrl(name, id));
}
}
};
});
Loading

0 comments on commit 2d83d64

Please sign in to comment.