Permalink
Browse files

Merge branch 'master' of github.com:spbooks/mobile1

  • Loading branch information...
2 parents b6538b6 + 1e84593 commit 92e2dfe42e4f49ec696fd083793e313a615791e4 @makenosound makenosound committed Apr 18, 2011
@@ -85,7 +85,7 @@ <h2>
<a href="tel:1-408-555-5555">
Call in a sighting!
</a>
- </h2><span class="details"><strong class="time-ago">Let us know if you've see any on famous.</strong></span>
+ </h2><span class="details"><strong class="time-ago">Let us know if you've see any one famous.</strong></span>
</li>
<li>
<h2>
@@ -88,15 +88,17 @@
// Ex 04-01c - Hook up links to hijack
$("#tab-bar a").click("click", function(e){
e.preventDefault();
- var url = e.currentTarget;
- loadPage(url, $(this).attr("data-load"));
+ var url = e.target.href;
+ var pageName = $(this).attr("data-load");
+
+ loadPage(url, pageName);
});
});
// Ex 04-01b - function for loading
function loadPage(url, pageName, trans) {
- $("#pages #" + pageName).load(url + " #wrapper", function(){
+ $("#pages #" + pageName).load(url + "?" + new Date().getTime() + " #wrapper", function(){
$("body").attr("id", "page-" + pageName);
transition(this, trans || "show", false);
});
@@ -101,6 +101,17 @@ <h2>${name}</h2>
</li>
</script>
+<!-- For jQ tmpl 2 -->
+<script id="tmpl-tweet" type="text/x-jquery-tmpl">
+ <li>
+ <img src="${profile_image_url}" alt="${from_user}">
+ <h2>${from_user}</h2>
+ <span class="details">
+ ${text}
+ </span>
+ </li>
+</script>
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
if(!window.jQuery){
@@ -112,6 +123,17 @@ <h2>${name}</h2>
<script type="text/javascript">
$(document).ready(function(){
+/* // Ex 04-02aa - inlining
+ $.getJSON("../data/spots.js", function(data) {
+ var html = "";
+ for(var i = 0; i < data.length; i++) {
+ html += "<li>";
+ html += "<h2>" + data[i].name + "</h2>";
+ html += "</li>";
+ }
+ $("#spots-list").append(html);
+ transition("#spots", "show");
+ });*/
/*
// Ex 04-02a - simple tempatltes
$.getJSON("../data/spots.js", function(data){
@@ -128,15 +150,24 @@ <h2>${name}</h2>
transition("#spots", "show");
});
*/
- // Ex 04-02b - loading data with tempalting system
+ /*// Ex 04-02b - loading data with tempalting system
$.getJSON("../data/spots.js", function(data){
$("#tmplSpots")
.tmpl(data)
.appendTo("#spots-list");
transition("#spots", "show");
});
-
-
+ */
+ //http://search.twitter.com/search.json?q=celeb+spotting
+ // Ex 04-02c - twitter tmpl.
+ var twitQuery = "celeb+spotting",
+ twitUrl = "http://search.twitter.com/search.json?q=";
+ $.getJSON(twitUrl + twitQuery + "&callback=?", function(data){
+ $("#tmpl-tweet")
+ .tmpl(data.results)
+ .appendTo("#spots-list");
+ transition("#spots", "show");
+ });
// Ex 04-01c - Hook up links to hijack
@@ -161,7 +192,7 @@ <h2>${name}</h2>
function loadPage(url, pageName, trans) {
$("#pages #" + pageName).load(url + " #wrapper", function(){
$("body").attr("id", "page-" + pageName);
- transition(this, trans || "show", false);
+ transition(this, trans || "flip", false);
});
};
View
@@ -23,20 +23,28 @@
#pages > div.current {
display: block;
}
- #header {
- position: relative;
+
+
+ #gallery {
+ background-color: #800;
+ height: 300px;
}
- #header .back{
+ #gallery > div {
+ position:absolute;
+ top: 0;
+ left: 0;
display: none;
+
+ border:1px solid black;
+ -webkit-box-sizing: border-box;
+ height: 200px;
+ width: 100%;
+ background-color: #050;
}
- #page-spot .back{
- display: block !important;
- }
-
- #gallery {
- background-color: #800;
- height: 100px;
+ #gallery > div.current {
+ display: block;
}
+
</style>
</head>
<body>
@@ -68,7 +76,11 @@ <h1>Spots</h1>
<div id="photos" class="current">
<!-- "Edit" content -->
<div id="gallery">
- <div id="photo"></div>
+ <div class="current">1</div>
+ <div>2</div>
+ <div>3</div>
+ <div>4</div>
+ <div>5a</div>
</div>
</div>
</div>
@@ -84,41 +96,69 @@ <h1>Spots</h1>
<script type="text/javascript">
// Swipe left & right
- var xStart,
- yStart;//,
- // timeStart;
+ var xStart;
$("#gallery").bind({
- "touchstart": function(e){
+ "touchstart mousedown": function(e) {
e.preventDefault();
- var touchs = e.originalEvent.changedTouches[ 0 ]
- xStart = e.pageX && e.pageX > 0 ? e.pageX : e.originalEvent.changedTouches[ 0 ].pageX;
- yStart = e.originalEvent.changedTouches[ 0 ].pageY;
- // timeStart = new Date().getTime();
+ var event = e.originalEvent,
+ touch = event.targetTouches ? event.targetTouches[0] : e;
+
+ xStart = touch.pageX;
},
- "touchend": function(e){
- /*
- if(new Date().getTime() - timeStart > 500 ){
- return;
- }*/
-
- var newX = e.pageX && e.pageX > 0 ? e.pageX : e.originalEvent.changedTouches[ 0 ].pageX,
- newY = e.pageY && e.pageY > 0 ? e.pageY : e.originalEvent.changedTouches[ 0 ].pageY,
- diffX = newX - xStart,
- diffY = newY - yStart;
- if( Math.abs( diffX ) > 30 && Math.abs( diffY ) < 30){
- xStart = 0;
+ "touchend mouseup": function(e) {
+ var event = e.originalEvent,
+ touch = event.changedTouches ? event.changedTouches[0] : e,
+ diffX = touch.pageX - xStart;
+
+ // See if we swiped!
+ if(Math.abs(diffX) > 30) {
if( diffX > 0 ){
- alert("swipe right");
- } else {
- alert("swipe left");
+ rotatePic(false);
+ }
+ else {
+ rotatePic(true);
}
}
},
- "touchmove": function(e){
+ "touchmove": function(e) {
e.preventDefault();
}
});
+ function rotatePic(isLeft) {
+ var photos = $("#gallery > div"),
+ current = photos.siblings(".current"),
+ next;
+
+ if(isLeft) {
+ next = current.next();
+ }
+ else {
+ next = current.prev();
+ }
+ if(next.length === 0){
+ return;
+ }
+
+ transition(next, current, "push", !isLeft);
+ }
+
+ function transition(toPage, fromPage, type, reverse) {
+ var toPage = $(toPage),
+ fromPage = $(fromPage),
+ reverse = reverse ? "reverse" : "";
+
+ if(toPage.hasClass("current") || toPage === fromPage) {
+ return;
+ };
+ toPage
+ .addClass("current " + type + " in " + reverse)
+ .one("webkitAnimationEnd", function(){
+ fromPage.removeClass("current " + type + " out " + reverse);
+ toPage.removeClass(type + " in " + reverse);
+ });
+ fromPage.addClass(type + " out " + reverse);
+ }
</script>
</body>
</html>
@@ -120,7 +120,51 @@ <h1>About Us!</h1>
<script type="text/javascript" src="../javascripts/vendor/jquery.tmpl.min" ></script>
<script type="text/javascript" src="../javascripts/vendor/modernizr-1.7.min.js"></script>
<script type="text/javascript">
-
+
+var lastX,
+ lastY,
+ lastZ,
+ lastShake = new Date().getTime(),
+ threshold = 10;
+
+$(window).bind("devicemotion", function(e){
+ var motionEvent = e.originalEvent,
+ accel = motionEvent.accelerationIncludingGravity,
+ x = accel.x,
+ y = accel.y,
+ z = accel.z;
+
+ $("body").html(
+ "x:" + x + "<br/>" +
+ "y:" + y + "<br/>" +
+ "z:" + z
+ );
+
+
+ if(lastX !== null && lastY !== null && lastZ !== null) {
+
+ var diffX = Math.abs(x - lastX),
+ diffY = Math.abs(y - lastY),
+ diffZ = Math.abs(z - lastZ);
+
+ if (diffX > threshold && diffY > threshold ||
+ diffX > threshold && diffZ > threshold ||
+ diffY > threshold && diffZ > threshold) {
+ var now = new Date().getTime(),
+ diffTime = now - lastShake;
+
+ if (diffTime > 500) {
+ alert("Shaken!");
+ lastShake = now;
+ }
+ }
+ }
+
+ // Replace for next time
+ lastX = x;
+ lastY = y;
+ lastZ = z;
+});
</script>
</body>
</html>
@@ -66,7 +66,9 @@ <h1>Spots</h1>
<div id="spots" class="current">
<!-- "Spots" content -->
<div id="geo-map"></div>
- <span class="button">!!!</span>
+ <span id="geo-stop" class="button">
+ Lost sight of celeb
+ </span>
</div>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
@@ -159,17 +161,30 @@ <h1>Spots</h1>
title:"You are here!"
});
map.setCenter(posLatLng);
+
},
function(error) {
// Failed to get location
- alert(error);
+ var msg = "Error.";
+ switch(error.code) {
+ case error.PERMISSION_DENIED:
+ msg = "Ooops. You have disallowed our app!";
+ break;
+ case error.POSITION_UNAVAILABLE:
+ msg = "Sorry, we couldn't get your location.";
+ break;
+ case error.TIMEOUT:
+ msg = "Sorry, fetch timeout expired.";
+ break;
+ }
+ alert(msg);
}
);
- function buttonClickHandler() {
- // Cancel the updates when the user clicks a button.
- navigator.geolocation.clearWatch(watchId);
- }
+ $("#geo-stop").click(function(){
+ alert("Thanks for your personal data!");
+ navigator.geolocation.clearWatch(watchId);
+ });
});
</script>
No changes.
@@ -97,6 +97,30 @@ <h2><a href="star.html">Bobs Yarunkle</a></h2>
}
</script>
<script type="text/javascript" src="../javascripts/vendor/modernizr-1.7.min.js"></script>
+ <script type="text/javascript">
+var cache = window.applicationCache,
+ cacheStatusValues = [
+ "uncached", "idle", "checking",
+ "downloading", "updateready", "obsolete"
+ ];
+$(cache).bind({
+ "cached checking downloading error noupdate obsolete progress updateready":
+ function(e){
+ var msg = "event: " + e.type + ", ";
+ msg += "online: " + (navigator.onLine) ? "yes" : "no";
+ msg += ", status: " + cacheStatusValues[cache.status];
+ if (e.type == 'error' && navigator.onLine) {
+ msg+= ' (probably a syntax error in manifest)';
+ }
+ // Print the message
+ console.log(msg);
+ }
+});
+
+$(cache).bind("updateready", function(){
+ cache.swapCache();
+});
+ </script>
</body>
</html>
@@ -1,5 +1,5 @@
CACHE MANIFEST
-# v0.2
+# v0.11
06-01-cache-manifest.html
Oops, something went wrong.

0 comments on commit 92e2dfe

Please sign in to comment.