Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #4 from davelaser/master

New Request Handlers for Ajax content, and UI now includes Google Static Maps API for Hotels
  • Loading branch information...
commit 014cb9ab00fc3670d3d201c1c8031c130afddfde 2 parents 77193b4 + 7819fef
@carl-razorfish authored
View
14 static/css/mashup.css
@@ -4,7 +4,7 @@ body{background:#eeeeee;}
.wrapper {width:960px; margin-left:auto; margin-right:auto; font:normal 12px Arial,Helvetica,sans-serif; }
.banner {width:975px; height:88px; background:#EC008C; padding-top:20px;-webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px;}
.nav {width:925px; height:22px; border-bottom:5px solid #666;background:#000;color:#EC008C; padding:11px 25px 5px 25px;}
-.content {width:938px;background:#fff; padding:10px 10px 10px 25px;color:#000; border:1px solid #000; overflow:hidden;}
+.content {width:938px; min-height:700px; background:#fff; padding:10px 10px 10px 25px;color:#000; border:1px solid #000; overflow:hidden;}
.footer {width:955px; height:22px;background:#000; padding:11px 10px 5px 10px; color:#fff;-webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px;}
.white {color:#fff;}
a,
@@ -44,3 +44,15 @@ dl {border:1px solid #EC008C; -webkit-border-radius: 5px; padding:6px 3px 0px 5p
-webkit-transition-delay: initial, initial, initial, initial, initial, initial;
-webkit-border-radius: 5px;
}
+
+.temp-content {
+ opacity:0;
+ position:absolute;
+ top:-10000em;
+ left:-10000em;
+}
+
+.map img {
+ height:0px;
+ opacity:0;
+}
View
2  static/js/ajax-submit.js
@@ -53,6 +53,8 @@ RIA.AjaxSubmit = new Class({
}
}).morph({"opacity":1});
this.content.setStyle("background", "#fff");
+
+ RIA.MapHandler.init();
},
requestFailure: function(e) {
Log.error({method:"requestFailure", error:e});
View
14 static/js/map-handler.js
@@ -0,0 +1,14 @@
+RIA.MapHandler = {
+ init: function() {
+ document.getElements(".show-map").each(function(mapLink) {
+
+ mapLink.addEvents({
+ "click": function(e) {
+ e.preventDefault();
+ var map = mapLink.getParent("dl").getElement(".map img"), size = map.getSize();
+ map.getStyle("opacity") > 0 ? map.morph({"opacity":0, "height":"0px"}) : map.morph({"opacity":1, "height":"150px"});
+ }
+ })
+ });
+ }
+}
View
12 static/js/mashup.js
@@ -8,11 +8,13 @@ RIA = {
}
},
Class : {
- Article : function() {
+ Article : function() {
+
this.article = arguments[0];
this.init = function() {
- this.feed = this.article.dataset['feed'];
+ this.feed = this.article.get("data-feed");
+ Log.info(this.feed)
if (!this.feed) return;
this.id = this.article.id;
this.get();
@@ -28,9 +30,9 @@ RIA = {
};
(function() {
- var articles = document.querySelectorAll('article[data-feed]');
+ var articles = document.getElements('article[data-feed]');
for (var i=0,article; article=articles[i]; i++) {
- new RIA.Class.Article(article);
+ new RIA.Class.Article(article);
}
})();
@@ -48,4 +50,4 @@ function news(data) {
html.push('<h3><a href="'+item.webUrl+'" rel="external">'+item.fields.headline+'</a></h3>'+item.fields.trailText);
}
RIA.fn.populateContainer('news',html);
-}
+}
View
122 templates/content.html
@@ -1,61 +1,63 @@
+<header>
+ <h1>Welcome to {{ name }}</h1>
+</header>
+<section class="intro"><p>We have collected some information which may be useful to you if you are thinking of visiting {{ name }}.</p></section>
+<article class="city-break">
- <header>
- <h1>Welcome to {{ name }}</h1>
- </header>
- <article class="intro"><p>We have collected some information which may be useful to you if you are thinking of visiting {{ name }}.</p></article>
- <article class="city-break">
-
- <h2>Top city break</h2>
- <dl>
- <dt>Hotel:<dt>
- <dd>{{city_break.HotelName}}<dd>
- <dt>Departure:<dt>
- <dd>{{city_break.OutboundAirports}}<dd>
- <dt>Destination: <dt>
- <dd>{{city_break.InboundAirports}}<dd>
- <dt>Price:<dt>
- <dd>{{city_break.Total}}<dd>
- </dl>
- </article>
- <article class="flights">
- <h2>Top flight to {{ name }}</h2>
- <dl>
- <dt>Name:</dt>
- <dd>{{ cheapest_flight.inbound_flight}}</dd>
- <dt>Departure:</dt>
- <dd>{{ cheapest_flight.inbound_depart}}</dd>
- <dt>Arrival:</dt>
- <dd>{{ cheapest_flight.inbound_arrive }}</dd>
- <dt>Price:</dt>
- <dd>&#163;{{ cheapest_flight.price }}</dd>
- </dl>
- <h2>Compare</h2>
- <dl>
- {% for flight in all_flights %}
- <dt>Airline:</dt>
- <dd>{{ flight.airline }}</dd>
- <dt>Price:</dt>
- <dd>&#163;{{ flight.price}}</dd>
- {% endfor %}
- </dl>
- </article>
- <article class="hotels">
- <h2>Best deals for Hotels in {{ name }}</h2>
- {% for hotel in hotels %}
- <dl>
- <dt>Name:<dt>
- <dd>{{hotel.Name}}<dd>
- <dt>Address:<dt>
- <dd>{{hotel.Address}}<dd>
- <dt>Phone:<dt>
- <dd>{{hotel.Phone}}<dd>
- <dt>Price:<dt>
- <dd>&#163;{{hotel.Price}}<dd>
- </dl>
- {% endfor %}
- </article>
- <article class="info">
- <h2>Useful info about {{ name }}</h2>
- <article id="weather" data-feed="{{ weather }}"></article>
- <article id="news" data-feed="{{ news }}"></article>
- </article>
+ <h2>Top city break</h2>
+ <dl>
+ <dt>Hotel:<dt>
+ <dd>{{city_break.HotelName}}<dd>
+ <dt>Departure:<dt>
+ <dd>{{city_break.OutboundAirports}}<dd>
+ <dt>Destination: <dt>
+ <dd>{{city_break.InboundAirports}}<dd>
+ <dt>Price:<dt>
+ <dd>{{city_break.Total}}<dd>
+ </dl>
+</article>
+<article class="flights">
+ <h2>Top flight to {{ name }}</h2>
+ <dl>
+ <dt>Name:</dt>
+ <dd>{{ cheapest_flight.inbound_flight}}</dd>
+ <dt>Departure:</dt>
+ <dd>{{ cheapest_flight.inbound_depart}}</dd>
+ <dt>Arrival:</dt>
+ <dd>{{ cheapest_flight.inbound_arrive }}</dd>
+ <dt>Price:</dt>
+ <dd>&#163;{{ cheapest_flight.price }}</dd>
+ </dl>
+ <h2>Compare</h2>
+ <dl>
+ {% for flight in all_flights %}
+ <dt>Airline:</dt>
+ <dd>{{ flight.airline }}</dd>
+ <dt>Price:</dt>
+ <dd>&#163;{{ flight.price}}</dd>
+ {% endfor %}
+ </dl>
+</article>
+<article class="hotels">
+ <h2>Best deals for Hotels in {{ name }}</h2>
+ {% for hotel in hotels %}
+ <dl>
+ <dt>Name:<dt>
+ <dd>{{hotel.Name}}<dd>
+ <dt>Address:<dt>
+ <dd>{{hotel.Address}}<dd>
+ <dt>Phone:<dt>
+ <dd>{{hotel.Phone}}<dd>
+ <dt>Price:<dt>
+ <dd>&#163;{{hotel.Price}}<dd>
+ <dt><a href="#" class="show-map">Map:</a></dt>
+ <dd class="map"><a href="http://maps.google.co.uk/maps?rls=en&amp;q={{ hotel.Name|urlencode }}+{{hotel.Address|urlencode}}" rel="external" target="_blank"><img src="http://maps.google.com/maps/api/staticmap?size=225x150&amp;zoom=13&amp;maptype=roadmap&amp;markers=size:mid%7Ccolor:blue%7C{{hotel.Address|urlencode}}&amp;sensor=false" alt="{{hotel.Name}}" /></a></dd>
+ </dl>
+
+ {% endfor %}
+</article>
+<article class="info">
+ <h2>Useful info about {{ name }}</h2>
+ <article id="weather" data-feed="{{ weather }}"></article>
+ <article id="news" data-feed="{{ news }}"></article>
+</article>
View
82 templates/mashup.html
@@ -3,14 +3,6 @@
{% block meta %}
<link rel="stylesheet" href="/static/css/mashup.css">
<link rel="shortcut icon" type="image/x-icon" href="http://cdn.lastminute.com/site/favicon.ico?skin=engb.lastminute.com" />
-<style type="text/css">
- .temp-content {
- opacity:0;
- position:absolute;
- top:-10000em;
- left:-10000em;
- }
-</style>
{% endblock %}
{% block content %}
<body>
@@ -27,70 +19,10 @@
<button id="submit" type="submit">Go</button>
</form>
</nav>
- <div id="content" class="content" style="min-height:800px">
- <div>
- <header>
- <h1>Welcome to {{ name }}</h1>
- </header>
- <article class="intro"><p>We have collected some information which may be useful to you if you are thinking of visiting {{ name }}.</p></article>
- <article class="city-break">
-
- <h2>Top city break</h2>
- <dl>
- <dt>Hotel:<dt>
- <dd>{{city_break.HotelName}}<dd>
- <dt>Departure:<dt>
- <dd>{{city_break.OutboundAirports}}<dd>
- <dt>Destination: <dt>
- <dd>{{city_break.InboundAirports}}<dd>
- <dt>Price:<dt>
- <dd>{{city_break.Total}}<dd>
- </dl>
- </article>
- <article class="flights">
- <h2>Top flight to {{ name }}</h2>
- <dl>
- <dt>Name:</dt>
- <dd>{{ cheapest_flight.inbound_flight}}</dd>
- <dt>Departure:</dt>
- <dd>{{ cheapest_flight.inbound_depart}}</dd>
- <dt>Arrival:</dt>
- <dd>{{ cheapest_flight.inbound_arrive }}</dd>
- <dt>Price:</dt>
- <dd>&#163;{{ cheapest_flight.price }}</dd>
- </dl>
- <h2>Compare</h2>
- <dl>
- {% for flight in all_flights %}
- <dt>Airline:</dt>
- <dd>{{ flight.airline }}</dd>
- <dt>Price:</dt>
- <dd>&#163;{{ flight.price}}</dd>
- {% endfor %}
- </dl>
- </article>
- <article class="hotels">
- <h2>Best deals for Hotels in {{ name }}</h2>
- {% for hotel in hotels %}
- <dl>
- <dt>Name:<dt>
- <dd>{{hotel.Name}}<dd>
- <dt>Address:<dt>
- <dd>{{hotel.Address}}<dd>
- <dt>Phone:<dt>
- <dd>{{hotel.Phone}}<dd>
- <dt>Price:<dt>
- <dd>&#163;{{hotel.Price}}<dd>
- </dl>
- {% endfor %}
- </article>
- <article class="info">
- <h2>Useful info about {{ name }}</h2>
- <article id="weather" data-feed="{{ weather }}"></article>
- <article id="news" data-feed="{{ news }}"></article>
- </article>
-
- </div>
+ <div id="content" class="content">
+ <div>
+ {% include "content.html" %}
+ </div>
</div>
<footer class="footer">
2011&copy;
@@ -100,11 +32,13 @@
<script src="/static/js/mootools-core-1.3.2.js"></script>
<script src="/static/js/log.js"></script>
<script src="/static/js/mashup.js"></script>
+ <script src="/static/js/map-handler.js"></script>
<script src="/static/js/ajax-submit.js"></script>
<script type="text/javascript">
//<![CDATA[
- RIA.Init = new RIA.AjaxSubmit();
+ RIA.MapHandler.init();
+ RIA.Init = new RIA.AjaxSubmit();
//]]>
</script>
</body>
-{% endblock %}
+{% endblock %}
Please sign in to comment.
Something went wrong with that request. Please try again.