CAMP/rizk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

js - but, wtf?

Browse Source
This commit is contained in:
sanj 2010-10-26 02:33:39 +02:00
parent 9696738479
commit 3656e9e281
4 changed files with 59 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
rizk/egypt/models.py
View File

@ -104,6 +104,7 @@ class Event(models.Model):
def get_dict(self): def get_dict(self):
return { return {
'id': self.id,
'name': self.name, 'name': self.name,
'description': self.description, 'description': self.description,
'start_time': self.start_time.strftime("%Y-%m-%d"), 'start_time': self.start_time.strftime("%Y-%m-%d"),
@ -168,6 +169,8 @@ class YoutubeVideo(models.Model):
ret = { ret = {
'info': info, 'info': info,
'id': self.id,
'url': self.url,
'location': { 'location': {
'id': self.location.id, 'id': self.location.id,
'name': self.location.name 'name': self.location.name

4
rizk/static/css/rizk.css
View File

@ -73,6 +73,10 @@ a img {
margin-top: 10px; margin-top: 10px;
} }
.highlightedEvent {
color: red;
}
.videoCategory { .videoCategory {
background: #ff6066; background: #ff6066;
} }

50
rizk/static/js/rizk.js
View File

@ -68,19 +68,46 @@ $(function() {
layers[1].events.on({ layers[1].events.on({
'featureselected': onFeatureSelect, 'featureselected': onFeatureSelect,
'featureunselected': onFeatureUnselect 'featureunselected': onFeatureUnselect
}); });
$.getJSON("geojson", {}, function(geojson) {
var currFeatures = jsonLayer.features;
jsonLayer.removeFeatures(currFeatures);
jsonLayer.addFeatures(geojson_format.read(geojson));
var maxExtent = jsonLayer.getDataExtent();
map.zoomToExtent(maxExtent);
});
}); });
$(function() { $(function() {
if (typeof(console) == 'undefined') {
console = {
'log': function() {
$.noop();
}
};
}
$('.event').click(function(e) { $('.event').click(function(e) {
e.stopPropagation(); // e.stopPropagation();
var eventId = $(this).data('id'); var eventId = $(this).data('id');
$.get("eventMedia", {'id': eventId}, function(data) { $.get("eventMedia", {'id': eventId}, function(data) {
console.log(data); console.log(data);
displayMedia(data);
}); });
}); });
}); });
function displayMedia(data) {
// console.log(data);
var imagesHtml = tmpl("tmpl_images", {'images': data.images });
var youtubeHtml = tmpl("tmpl_youtubes", {'videos': data.yvideos });
var padmaHtml = tmpl("tmpl_padmas", {'videos': data.pvideos });
var html = imagesHtml + youtubeHtml + padmaHtml;
$('#media').html(html);
$('.imagesWrapper a').colorbox();
}
function onFeatureSelect(f) { function onFeatureSelect(f) {
var id = f.feature.attributes.id; var id = f.feature.attributes.id;
$.get("locationMedia", {'id': f.feature.attributes.id }, function(data) { $.get("locationMedia", {'id': f.feature.attributes.id }, function(data) {
@ -222,7 +249,7 @@ $(function() {
$('#aboutBtn').click(); $('#aboutBtn').click();
}); });
function getFlyoverById(id) { function getLocationById(id) {
var features = jsonLayer.features; var features = jsonLayer.features;
for (var i=0; i < features.length; i++) { for (var i=0; i < features.length; i++) {
if (features[i].attributes.id == id) { if (features[i].attributes.id == id) {
@ -232,16 +259,19 @@ function getFlyoverById(id) {
return false; return false;
} }
$('.flyoverImage').live("mouseover", function() { $('.mediaThumb').live("mouseover", function() {
var id = $(this).attr("data-id"); var id = $(this).attr("data-location");
// console.log(id); // console.log(id);
var flyover = getFlyoverById(id); // var location = getLocationById(id);
mapControl.select(flyover); // mapControl.select(flyover);
currentlySelectedFeature = flyover; highlightFeatures([id]);
$('#event_' + id).addClass("highlightedEvent");
// currentlySelectedFeature = flyover;
}); });
$('.flyoverImage').live("mouseout", function() { $('.mediaThumb').live("mouseout", function() {
mapControl.unselect(currentlySelectedFeature); highlightFeatures([]);
$('#event_' + id).removeClass("highlightedEvent");
}); });
$('#submitQuestions').live("click", function() { $('#submitQuestions').live("click", function() {

17
rizk/templates/rizk.html
View File

@ -18,12 +18,15 @@
</head> </head>
<body> <body>
<script type="text/html" id="tmpl_images"> <script type="text/html" id="tmpl_images">
<div class="imagesWrapper"> <div class="imagesWrapper">
<% if (images.length > 0) { %> Images from FlickR: <% } %> <br />
<% for (var i=0; i<images.length;i++) { var img = images[i]; %> <% for (var i=0; i<images.length;i++) { var img = images[i]; %>
<div class="imageWrapper"> <div class="imageWrapper">
<a href="<%= img.sizes[3].source %>" class="flyoverImage" title="<%= img.caption %>" data-id="<%= img.flyover.id %>" rel="group_<%= img.id %>"> <a href="<%= img.sizes[3].source %>" class="flickrImage mediaThumb" title="<%= img.photoInfo.title %>" data-id="<%= img.id %>" data-location="<%= img.location.id %>" data-event="<%= img.event.id %>" rel="group_<%= img.id %>">
<img src="<%= img.sizes[0].source %>" alt="<%= img.caption %>" /> <img src="<%= img.sizes[0].source %>" alt="<%= img.photoInfo.title %>" />
</a> </a>
</div> </div>
<% } %> <% } %>
@ -31,11 +34,12 @@
</div> </div>
</script> </script>
<script type="text/html" id="tmpl_videos"> <script type="text/html" id="tmpl_youtubes">
<div class="videosWrapper"> <div class="videosWrapper">
<% if (videos.length > 0) { %> Videos from YouTube: <% } %> <br />
<% for (var i=0; i<videos.length;i++) { var vid = videos[i]; %> <% for (var i=0; i<videos.length;i++) { var vid = videos[i]; %>
<div class="videoWrapper"> <div class="videoWrapper">
<a href="#" class="flyoverVideo flyoverImage" title="<%= vid.info.description %>" data-id="<%= vid.flyover.id %>" rel="group_<%= vid.id %>"> <a href="vid.url" target="_blank" class="youtubeVideo mediaThumb" title="<%= vid.info.description %>" data-id="<%= vid.id %>" data-event="<%= vid.event.id %>" data-location="<%= vid.location.id %>" rel="group_<%= vid.id %>">
<img src="<%= vid.info.thumbnail %>" alt="<%= vid.info.description %>" /> <img src="<%= vid.info.thumbnail %>" alt="<%= vid.info.description %>" />
</a> </a>
</div> </div>
@ -54,6 +58,9 @@
</div> </div>
</script> </script>
<script type="text/html" id="tmpl_padmas">
</script>
<script type="text/html" id="tmpl_about"> <script type="text/html" id="tmpl_about">
<div class="navContent" id="about"> <div class="navContent" id="about">
<div class="contentWrapper about"> <div class="contentWrapper about">
@ -68,7 +75,7 @@
<div id="wrapper"> <div id="wrapper">
<div id="timeline"> <div id="timeline">
{% for e in events %} {% for e in events %}
<div class="event" data-id="{{ e.id }}"> <div class="event" data-id="{{ e.id }}" id="event_{{ e.id }}">
{{ e.name }} <br /> {{ e.name }} <br />
{{ e.start_time }} - {{ e.end_time }} {{ e.start_time }} - {{ e.end_time }}
<div class="eventDescription"> <div class="eventDescription">