rtanglao · September 18, 2010 07:32
diff --git a/rolands.endless.gastown.html b/rolands.endless.gastown.html
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
 <html> 
  <head> 
    <meta name="apple-mobile-web-app-capable" content="yes"/> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
    <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0,width=device-width"/> 
    <script src="../oni-apollo.js" type="text/javascript"></script> 
    <script type="text/sjs"> 
 // roland's hacked version, change the YQL query below and do your own
 // photo mashup!
 // see the original by oni at: http://code.onilabs.com/0.9.1/demo/flickrcities.html
 // tutorial: http://onilabs.com/blog/flickrcities-tutorial     
 require("jquery-binding").install();
 var r = require("common").supplant;
 var yql = require("yql");
 var more = $("#more");
 var cities = [{
   title: "Vancouver"
 }];

 //----------------------------------------------------------------------
 // helper functions:
 
 var per_page = 13;
 
 function loadPhotos(city, page) {
 //
  city='Vancouver';
  var q = "select * from flickr.photos.search(@begin, @amount) " +
    "where tags='cameraphone' and woe_id = '26332810' and sort='relevance' and extras='url_m' and user_id='35034347371@N01'";

  var rv = yql.query(q, {begin: page * per_page, amount: per_page, city:city});
  var photos = rv.results ? rv.results.photo: [];
  for (var i = 0, photo; photo = photos[i]; ++i) {
    more.before(r("
            <div class='blob'>
              <a target='_blank' href='http://www.flickr.com/photos/{owner}/{id}' 
                class='img' style='background-image:url({url_m})'/>
                <h3>{title}</h3>
              </a>
            </div>
            ", photo));
  }
 }
 
 function showCity(city) {
  var page = 0;
  $("#city h2").text(city);
  $("#results .blob:not(#more):not(#city)").remove();
  
  while (true) {
    waitfor {
      loadPhotos(city, page);
    }
    or {
      $("#more h2").text("Cancel lookup").addClass("working");
      more.$click();
      --page;
    }
    
    $("#more h2").html("Load more &#8230;").removeClass("working");
    waitfor {
      more.$click();
    }
    or {
      while (true) {
        $(window).$scroll();
        var frombottom = $(document).height() - $(window).height()
          - $(document).scrollTop();
        if (frombottom < 100) break;
      }
    }
    ++page;    
  }
 }
 
 function animateImages() {
  while (true) {
    var imgs = $(".img");
    var img = imgs.get(Math.floor(Math.random() * imgs.length));
    var p = [20, 20, 50, 80, 80][Math.floor(Math.random() * 5)];
    $(img).css({
      backgroundPosition: p + "% " + 50 + "%"
    });
    hold(3000);
  }
 }
 
 //----------------------------------------------------------------------
 // main program loop:
 
 while (true) {
  var cityindex = Math.floor(Math.random() * cities.length);
  waitfor {
    //showCity(cities[cityindex].title);
 	    showCity("Gastown");
  }
  or {
    animateImages();
  }
  or {
    $("#nextcity").$click();
  }
 }
 
    </script> 
    <link rel="stylesheet" type="text/css" href="flickrcities.css"/> 
    <title>Roland's Endless Gastown</title> 
  </head> 
  <body> 
    <a href="http://onilabs.com/blog/flickrcities-tutorial" style="position:absolute;top:3px;right:8px;color:#aaa">Read the Oni Apollo tutorial</a> 
    <h1>Endless <span style='font-weight:normal'>Gastown</span></h1> 
    <div id="results" class="clearfix"> 
      <div id="city" class="blob textblob"> 
        <div><h2>Loading cities &#8230;</h2></div> 
      </div> 
      <div id="more" class="blob textblob"> 
        <div><h2></h2></div> 
      </div> 
    </div> 
  </body> 
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
	<html>
	<head>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0,width=device-width"/>
	<script src="../oni-apollo.js" type="text/javascript"></script>
	<script type="text/sjs">
	// roland's hacked version, change the YQL query below and do your own
	// photo mashup!
	// see the original by oni at: http://code.onilabs.com/0.9.1/demo/flickrcities.html
	// tutorial: http://onilabs.com/blog/flickrcities-tutorial
	require("jquery-binding").install();
	var r = require("common").supplant;
	var yql = require("yql");
	var more = $("#more");
	var cities = [{
	title: "Vancouver"
	}];

	//----------------------------------------------------------------------
	// helper functions:

	var per_page = 13;

	function loadPhotos(city, page) {
	//
	city='Vancouver';
	var q = "select * from flickr.photos.search(@begin, @amount) " +
	"where tags='cameraphone' and woe_id = '26332810' and sort='relevance' and extras='url_m' and user_id='35034347371@N01'";

	var rv = yql.query(q, {begin: page * per_page, amount: per_page, city:city});
	var photos = rv.results ? rv.results.photo: [];
	for (var i = 0, photo; photo = photos[i]; ++i) {
	more.before(r("
	<div class='blob'>
	<a target='_blank' href='http://www.flickr.com/photos/{owner}/{id}'
	class='img' style='background-image:url({url_m})'/>
	<h3>{title}</h3>
	</a>
	</div>
	", photo));
	}
	}

	function showCity(city) {
	var page = 0;
	$("#city h2").text(city);
	$("#results .blob:not(#more):not(#city)").remove();

	while (true) {
	waitfor {
	loadPhotos(city, page);
	}
	or {
	$("#more h2").text("Cancel lookup").addClass("working");
	more.$click();
	--page;
	}

	$("#more h2").html("Load more …").removeClass("working");
	waitfor {
	more.$click();
	}
	or {
	while (true) {
	$(window).$scroll();
	var frombottom = $(document).height() - $(window).height()
	- $(document).scrollTop();
	if (frombottom < 100) break;
	}
	}
	++page;
	}
	}

	function animateImages() {
	while (true) {
	var imgs = $(".img");
	var img = imgs.get(Math.floor(Math.random() * imgs.length));
	var p = [20, 20, 50, 80, 80][Math.floor(Math.random() * 5)];
	$(img).css({
	backgroundPosition: p + "% " + 50 + "%"
	});
	hold(3000);
	}
	}

	//----------------------------------------------------------------------
	// main program loop:

	while (true) {
	var cityindex = Math.floor(Math.random() * cities.length);
	waitfor {
	//showCity(cities[cityindex].title);
	showCity("Gastown");
	}
	or {
	animateImages();
	}
	or {
	$("#nextcity").$click();
	}
	}

	</script>
	<link rel="stylesheet" type="text/css" href="flickrcities.css"/>
	<title>Roland's Endless Gastown</title>
	</head>
	<body>
	<a href="http://onilabs.com/blog/flickrcities-tutorial" style="position:absolute;top:3px;right:8px;color:#aaa">Read the Oni Apollo tutorial</a>
	<h1>Endless <span style='font-weight:normal'>Gastown</span></h1>
	<div id="results" class="clearfix">
	<div id="city" class="blob textblob">
	<div><h2>Loading cities …</h2></div>
	</div>
	<div id="more" class="blob textblob">
	<div><h2></h2></div>
	</div>
	</div>
	</body>
	</html>
No results found