js - but, wtf?
This commit is contained in:
sanj
parent
9696738479
commit
3656e9e281
|
|
@ -104,6 +104,7 @@ class Event(models.Model):
|
|||
|
||||
def get_dict(self):
|
||||
return {
|
||||
'id': self.id,
|
||||
'name': self.name,
|
||||
'description': self.description,
|
||||
'start_time': self.start_time.strftime("%Y-%m-%d"),
|
||||
|
|
@ -168,6 +169,8 @@ class YoutubeVideo(models.Model):
|
|||
|
||||
ret = {
|
||||
'info': info,
|
||||
'id': self.id,
|
||||
'url': self.url,
|
||||
'location': {
|
||||
'id': self.location.id,
|
||||
'name': self.location.name
|
||||
|
|
|
|||
|
|
@ -73,6 +73,10 @@ a img {
|
|||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.highlightedEvent {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.videoCategory {
|
||||
background: #ff6066;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,18 +69,45 @@ $(function() {
|
|||
'featureselected': onFeatureSelect,
|
||||
'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() {
|
||||
|
||||
if (typeof(console) == 'undefined') {
|
||||
console = {
|
||||
'log': function() {
|
||||
$.noop();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
$('.event').click(function(e) {
|
||||
e.stopPropagation();
|
||||
// e.stopPropagation();
|
||||
var eventId = $(this).data('id');
|
||||
$.get("eventMedia", {'id': eventId}, function(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) {
|
||||
var id = f.feature.attributes.id;
|
||||
$.get("locationMedia", {'id': f.feature.attributes.id }, function(data) {
|
||||
|
|
@ -222,7 +249,7 @@ $(function() {
|
|||
$('#aboutBtn').click();
|
||||
});
|
||||
|
||||
function getFlyoverById(id) {
|
||||
function getLocationById(id) {
|
||||
var features = jsonLayer.features;
|
||||
for (var i=0; i < features.length; i++) {
|
||||
if (features[i].attributes.id == id) {
|
||||
|
|
@ -232,16 +259,19 @@ function getFlyoverById(id) {
|
|||
return false;
|
||||
}
|
||||
|
||||
$('.flyoverImage').live("mouseover", function() {
|
||||
var id = $(this).attr("data-id");
|
||||
$('.mediaThumb').live("mouseover", function() {
|
||||
var id = $(this).attr("data-location");
|
||||
// console.log(id);
|
||||
var flyover = getFlyoverById(id);
|
||||
mapControl.select(flyover);
|
||||
currentlySelectedFeature = flyover;
|
||||
// var location = getLocationById(id);
|
||||
// mapControl.select(flyover);
|
||||
highlightFeatures([id]);
|
||||
$('#event_' + id).addClass("highlightedEvent");
|
||||
// currentlySelectedFeature = flyover;
|
||||
});
|
||||
|
||||
$('.flyoverImage').live("mouseout", function() {
|
||||
mapControl.unselect(currentlySelectedFeature);
|
||||
$('.mediaThumb').live("mouseout", function() {
|
||||
highlightFeatures([]);
|
||||
$('#event_' + id).removeClass("highlightedEvent");
|
||||
});
|
||||
|
||||
$('#submitQuestions').live("click", function() {
|
||||
|
|
|
|||
|
|
@ -18,12 +18,15 @@
|
|||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<script type="text/html" id="tmpl_images">
|
||||
<div class="imagesWrapper">
|
||||
<% if (images.length > 0) { %> Images from FlickR: <% } %> <br />
|
||||
<% for (var i=0; i<images.length;i++) { var img = images[i]; %>
|
||||
<div class="imageWrapper">
|
||||
<a href="<%= img.sizes[3].source %>" class="flyoverImage" title="<%= img.caption %>" data-id="<%= img.flyover.id %>" rel="group_<%= img.id %>">
|
||||
<img src="<%= img.sizes[0].source %>" alt="<%= img.caption %>" />
|
||||
<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.photoInfo.title %>" />
|
||||
</a>
|
||||
</div>
|
||||
<% } %>
|
||||
|
|
@ -31,11 +34,12 @@
|
|||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="tmpl_videos">
|
||||
<script type="text/html" id="tmpl_youtubes">
|
||||
<div class="videosWrapper">
|
||||
<% if (videos.length > 0) { %> Videos from YouTube: <% } %> <br />
|
||||
<% for (var i=0; i<videos.length;i++) { var vid = videos[i]; %>
|
||||
<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 %>" />
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -54,6 +58,9 @@
|
|||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="tmpl_padmas">
|
||||
|
||||
</script>
|
||||
<script type="text/html" id="tmpl_about">
|
||||
<div class="navContent" id="about">
|
||||
<div class="contentWrapper about">
|
||||
|
|
@ -68,7 +75,7 @@
|
|||
<div id="wrapper">
|
||||
<div id="timeline">
|
||||
{% 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.start_time }} - {{ e.end_time }}
|
||||
<div class="eventDescription">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user