bunch more stuff changed to rizk
This commit is contained in:
sanj
parent
b0653d2c95
commit
00fef249ed
|
|
@ -35,6 +35,17 @@ def flyover(request):
|
|||
}
|
||||
return render_to_json_response(d)
|
||||
|
||||
def getEventMedia(request):
|
||||
id = request.GET['id']
|
||||
event = get_object_or_404(Event, pk=id)
|
||||
# eventData = json.dumps(event.get_dict())
|
||||
return render_to_json_response(event.get_media())
|
||||
|
||||
def getLocationMedia(request):
|
||||
id = request.GET['id']
|
||||
location = get_object_or_404(Location, pk=id)
|
||||
return render_to_json_response(location.get_media())
|
||||
|
||||
def email_experiences(request):
|
||||
if not request.POST:
|
||||
return HttpResponse("0")
|
||||
|
|
|
|||
175
rizk/static/css/rizk.css
Normal file
175
rizk/static/css/rizk.css
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #999;
|
||||
background: -moz-radial-gradient(45px 45px 45deg, circle cover,
|
||||
#ABAE71 0%, #CDD53F 100%, #E6F215 95%);
|
||||
background: -webkit-gradient(radial, 45px 45px 45deg, circle cover,
|
||||
#ABAE71 0%, #CDD53F 100%, #E6F215 95%);
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a img {
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
#categories {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 60%;
|
||||
left: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#categories table {
|
||||
height: 200px;
|
||||
width: 60%;
|
||||
margin-left: 20%;
|
||||
-moz-box-shadow: 0px 0px 1em;
|
||||
-webkit-box-shadow: 0px 0px 1em;
|
||||
box-shadow: 0px 0px 1em;
|
||||
}
|
||||
|
||||
#categories table tr {
|
||||
|
||||
}
|
||||
|
||||
#categories table tr td {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background: #000 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.imageCategory {
|
||||
background: #ffd055;
|
||||
}
|
||||
|
||||
.imageWrapper {
|
||||
float: left;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.videoWrapper {
|
||||
float: left;
|
||||
width: 400px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.videoWrapper img {
|
||||
width: 340px;
|
||||
}
|
||||
|
||||
.imagesWrapper {
|
||||
overflow: auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.videoCategory {
|
||||
background: #ff6066;
|
||||
}
|
||||
|
||||
.textCategory {
|
||||
background: #69fd6c;
|
||||
}
|
||||
|
||||
.audioCategory {
|
||||
background: #7d69fd;
|
||||
}
|
||||
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 220px;
|
||||
bottom: 10px;
|
||||
right: 40%;
|
||||
left: 10px;
|
||||
-moz-box-shadow: 0px 0px 1em;
|
||||
-webkit-box-shadow: 0px 0px 1em;
|
||||
box-shadow: 0px 0px 1em;
|
||||
|
||||
}
|
||||
|
||||
#buttons {
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
top: 1%;
|
||||
height: 3%;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
#buttons .navButton {
|
||||
width: 8%;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
border: 1px solid #fff;
|
||||
background: #6BDCE1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navSelected {
|
||||
background: #fff !important;
|
||||
border: 1px solid #68dce1 !important;
|
||||
}
|
||||
|
||||
|
||||
#media {
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
width: 36%;
|
||||
height: 90%;
|
||||
overflow-y: auto;
|
||||
top: 5%;
|
||||
bottom: 5%;
|
||||
-moz-box-shadow: 0px 0px 1.5em;
|
||||
-webkit-box-shadow: 0px 0px 1.5em;
|
||||
box-shadow: 0px 0px 1.5em;
|
||||
}
|
||||
|
||||
.imageWrapper .mapSelect img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.videoWrapper .mapSelect img {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.textsWrapper .mapSelect {
|
||||
color: #141BB4;
|
||||
}
|
||||
|
||||
.textWrapper {
|
||||
font-family: Arial, Verdana, Georgia, sans-serif;
|
||||
padding: 4px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.contentWrapper {
|
||||
height: 96%;
|
||||
margin-top: 2%;
|
||||
margin-bottom: 2%;
|
||||
/* overflow: auto; */
|
||||
width: 94%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-family: Arial, Verdana, Georgia, sans-serif;
|
||||
}
|
||||
|
||||
.questionWrapper {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.answer textarea {
|
||||
width: 80%;
|
||||
height: 100px;
|
||||
}
|
||||
2
rizk/static/js/jquery.js
vendored
2
rizk/static/js/jquery.js
vendored
|
|
@ -1 +1 @@
|
|||
jquery-1.4.2.min.js
|
||||
jquery-1.4.3.min.js
|
||||
259
rizk/static/js/rizk.js
Normal file
259
rizk/static/js/rizk.js
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
var map, currentlySelectedFeature, jsonLayer, mapControl, zoomControl;
|
||||
|
||||
// Simple JavaScript Templating
|
||||
// John Resig - http://ejohn.org/ - MIT Licensed
|
||||
(function(){
|
||||
var cache = {};
|
||||
|
||||
this.tmpl = function tmpl(str, data){
|
||||
// Figure out if we're getting a template, or if we need to
|
||||
// load the template - and be sure to cache the result.
|
||||
var fn = !/\W/.test(str) ?
|
||||
cache[str] = cache[str] ||
|
||||
tmpl(document.getElementById(str).innerHTML) :
|
||||
|
||||
// Generate a reusable function that will serve as a template
|
||||
// generator (and which will be cached).
|
||||
new Function("obj",
|
||||
"var p=[],print=function(){p.push.apply(p,arguments);};" +
|
||||
|
||||
// Introduce the data as local variables using with(){}
|
||||
"with(obj){p.push('" +
|
||||
|
||||
// Convert the template into pure JavaScript
|
||||
str
|
||||
.replace(/[\r\t\n]/g, " ")
|
||||
.split("<%").join("\t")
|
||||
.replace(/((^|%>)[^\t]*)'/g, "$1\r")
|
||||
.replace(/\t=(.*?)%>/g, "',$1,'")
|
||||
.split("\t").join("');")
|
||||
.split("%>").join("p.push('")
|
||||
.split("\r").join("\\'")
|
||||
+ "');}return p.join('');");
|
||||
|
||||
// Provide some basic currying to the user
|
||||
return data ? fn( data ) : fn;
|
||||
};
|
||||
})();
|
||||
|
||||
|
||||
$(function() {
|
||||
var center = new OpenLayers.LonLat(31.171903605890201, 30.9636998440801);
|
||||
map = new OpenLayers.Map('map');
|
||||
var layers = [];
|
||||
layers[0] = new OpenLayers.Layer.Google(
|
||||
"Google Streets", // the default
|
||||
{numZoomLevels: 20, isBaseLayer: true}
|
||||
);
|
||||
geojson_format = new OpenLayers.Format.GeoJSON();
|
||||
//yes, jsonLayer is global. Yes, I know it's wrong.
|
||||
/*
|
||||
var symbolizer = OpenLayers.Util.applyDefaults(
|
||||
{fillColor: 'green', opacity: 0.5, strokeColor: '#000', cursor: 'pointer'},
|
||||
OpenLayers.Feature.Vector.style["default"]);
|
||||
defaultStyles = new OpenLayers.StyleMap({"default": symbolizer, "selected": symbolizer});
|
||||
*/
|
||||
jsonLayer = layers[1] = new OpenLayers.Layer.Vector({'geometryType': 'Point'});
|
||||
// map.addLayer(vector_layer);
|
||||
map.addLayers(layers);
|
||||
map.setCenter(center, 12);
|
||||
|
||||
// mapControl = new OpenLayers.Control.SelectFeature(layers[1], {hover: true});
|
||||
mapControl = new OpenLayers.Control.SelectFeature(layers[1], {hover: true});
|
||||
zoomControl = new OpenLayers.Control.ZoomToMaxExtent();
|
||||
map.addControl(mapControl);
|
||||
// map.addControl(zoomControl);
|
||||
mapControl.activate();
|
||||
// zoomControl.activate();
|
||||
layers[1].events.on({
|
||||
'featureselected': onFeatureSelect,
|
||||
'featureunselected': onFeatureUnselect
|
||||
});
|
||||
});
|
||||
|
||||
$(function() {
|
||||
$('.event').click(function(e) {
|
||||
e.stopPropagation();
|
||||
var eventId = $(this).data('id');
|
||||
$.get("eventMedia", {'id': eventId}, function(data) {
|
||||
console.log(data);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function onFeatureSelect(f) {
|
||||
var id = f.feature.attributes.id;
|
||||
$.get("locationMedia", {'id': f.feature.attributes.id }, function(data) {
|
||||
console.log(data);
|
||||
});
|
||||
// $('img').removeClass('mapSelect');
|
||||
// $('[data-id=' + id + ']').addClass("mapSelect");
|
||||
/*
|
||||
var id = f.feature.attributes.id;
|
||||
$.getJSON("flyover", {'id': id}, function(json) {
|
||||
$('#media').html(json.name + "<br /><br />");
|
||||
$.each(json.media.images, function(i, v) {
|
||||
var img = $('<img />').attr("src", v.url).css({'width': '100px', 'height': '100px'});
|
||||
$('#media').append(img);
|
||||
});
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
function onFeatureUnselect(f) {
|
||||
var id = f.feature.attributes.id;
|
||||
// $('[data-id=' + id + ']').removeClass("mapSelect");
|
||||
}
|
||||
|
||||
//will highlight the feature id's passed in arr
|
||||
function highlightFeatures(arr) {
|
||||
var features = jsonLayer.features;
|
||||
for (var f in features) {
|
||||
if (features.hasOwnProperty(f)) {
|
||||
if ($.inArray(features[f].attributes.id, arr) != -1) {
|
||||
features[f].attributes.highlighted = 1;
|
||||
} else {
|
||||
features[f].attributes.highlighted = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
highlightSelected();
|
||||
}
|
||||
|
||||
//Function to actually highlight features marked with highlighted = 1
|
||||
function highlightSelected() {
|
||||
// alert("foo");
|
||||
var lookup = {
|
||||
0: {opacity: 0.3, strokeWidth: 0.4},
|
||||
1: {opacity: 1, strokeWidth: 3, strokeOpacity: 0.6, strokeColor: '#5B00FF'}
|
||||
}
|
||||
// console.log(defaultStyles);
|
||||
defaultStyles.addUniqueValueRules("default", "highlighted", lookup);
|
||||
jsonLayer.redraw();
|
||||
// console.log(jsonLayer);
|
||||
return true;
|
||||
}
|
||||
|
||||
//When user mouses over an image, highlight that point on the map.
|
||||
function mouseOverImage(id) {
|
||||
var features = jsonLayer.features;
|
||||
for (var f in features) {
|
||||
if (features.hasOwnProperty(f)) {
|
||||
if (features[f].attributes.id == id) {
|
||||
features[f].attributes.mousedover = 1;
|
||||
} else {
|
||||
features[f].attributes.mousedover = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
var lookup = {
|
||||
0: {opacity: 0.3},
|
||||
1: {strokeWidth: 6, strokeColor: '#1E90FF', strokeOpacity: 0.9}
|
||||
}
|
||||
defaultStyles.addUniqueValueRules("default", "mousedover", lookup);
|
||||
jsonLayer.redraw();
|
||||
}
|
||||
|
||||
$(function() {
|
||||
$('td').click(function() {
|
||||
$('td').removeClass('selected');
|
||||
$('.navButton').removeClass('navSelected');
|
||||
var catName = $(this).text();
|
||||
var type = $(this).attr("class").replace("Category", "");
|
||||
$(this).addClass('selected');
|
||||
var id = $(this).attr("data-id");
|
||||
$('#media').html("Loading " + type + "s for " + catName + " .. please wait..");
|
||||
$.getJSON("category", {'id': id, 'type': type}, function(json) {
|
||||
// alert(type);
|
||||
var arr = [];
|
||||
var features = json.flyovers;
|
||||
var currFeatures = jsonLayer.features;
|
||||
jsonLayer.removeFeatures(currFeatures);
|
||||
jsonLayer.addFeatures(geojson_format.read(features));
|
||||
var maxExtent = jsonLayer.getDataExtent();
|
||||
map.zoomToExtent(maxExtent);
|
||||
// console.log(maxExtent);
|
||||
switch(type.toLowerCase()) {
|
||||
|
||||
case "image":
|
||||
var html = tmpl("tmpl_images", {'images': json.images});
|
||||
$('#media').html(html);
|
||||
$('.imageWrapper a').colorbox();
|
||||
break;
|
||||
|
||||
case "video":
|
||||
var html = tmpl("tmpl_videos", {'videos': json.videos});
|
||||
$('#media').html(html);
|
||||
var i = 0;
|
||||
$('.videoWrapper').each(function() {
|
||||
var videoData = json.videos[i];
|
||||
$(this).data("videoData", videoData);
|
||||
i++;
|
||||
});
|
||||
$('.videoWrapper > a').click(function(e) {
|
||||
e.preventDefault();
|
||||
var data = $(this).closest(".videoWrapper").data("videoData");
|
||||
var embedCode = data.info.embed;
|
||||
$.colorbox({html: embedCode});
|
||||
});
|
||||
|
||||
case "text":
|
||||
var html = tmpl("tmpl_texts", {'texts': json.texts});
|
||||
$('#media').html(html);
|
||||
|
||||
default:
|
||||
$.noop();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$(function() {
|
||||
$('.navButton').click(function() {
|
||||
$('.selected').removeClass('selected');
|
||||
$('.navSelected').removeClass('navSelected');
|
||||
$(this).addClass('navSelected');
|
||||
// var html = $('#' + $(this).attr("data-target")).html();
|
||||
var html = tmpl('tmpl_' + $(this).attr('data-target'), {});
|
||||
$('#media').html(html);
|
||||
});
|
||||
|
||||
//trigger click on "About" on page load:
|
||||
$('#aboutBtn').click();
|
||||
});
|
||||
|
||||
function getFlyoverById(id) {
|
||||
var features = jsonLayer.features;
|
||||
for (var i=0; i < features.length; i++) {
|
||||
if (features[i].attributes.id == id) {
|
||||
return features[i];
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
$('.flyoverImage').live("mouseover", function() {
|
||||
var id = $(this).attr("data-id");
|
||||
// console.log(id);
|
||||
var flyover = getFlyoverById(id);
|
||||
mapControl.select(flyover);
|
||||
currentlySelectedFeature = flyover;
|
||||
});
|
||||
|
||||
$('.flyoverImage').live("mouseout", function() {
|
||||
mapControl.unselect(currentlySelectedFeature);
|
||||
});
|
||||
|
||||
$('#submitQuestions').live("click", function() {
|
||||
$(this).attr("disabled", "disabled");
|
||||
$(this).text("Thanks!");
|
||||
$.post("/email_experiences", {
|
||||
'1problems': $('#1problems').val(),
|
||||
'2like': $('#2like').val(),
|
||||
'3stories': $('#3stories').val(),
|
||||
'name': $('#name').val(),
|
||||
'email': $('#email').val()
|
||||
}, function(response) {
|
||||
$('#media').html("Thanks! Your response has been emailed to andrew dot harris at ucl.ac.uk");
|
||||
});
|
||||
});
|
||||
95
rizk/templates/rizk.html
Normal file
95
rizk/templates/rizk.html
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
|
||||
<!-- <meta name="keywords" content="Flyovers, Mumbai, Construction, Traffic, overpass, skywalk" />
|
||||
<meta name="title" content="Vertical Urbanism" />
|
||||
<meta name="description" content="This site maps the landscapes of elevated road highways – flyovers – and elevated pedestrian walkways – skywalks – across the Mumbai Metropolitan Region in Western India." /> -->
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/rizk.css" />
|
||||
<title>Placeholder for Title</title>
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/colorbox.css" />
|
||||
<script type="text/javascript" src="/static/js/jquery.js"></script>
|
||||
<script type="text/javascript" src="/static/js/jquery.colorbox-min.js"></script>
|
||||
<script type="text/javascript" src="/static/js/openlayers/OpenLayers.js"></script>
|
||||
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAsn1j-ZGGtRgZ9aMJPCZbRxTEwe8r4EmncxniwLCEI2F-aeUoNRTBAUi3uvVAsZpLkcO78Ryd18Hfaw'></script>
|
||||
|
||||
<script type="text/javascript" src="/static/js/rizk.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/html" id="tmpl_images">
|
||||
<div class="imagesWrapper">
|
||||
<% 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>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="tmpl_videos">
|
||||
<div class="videosWrapper">
|
||||
<% 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 %>">
|
||||
<img src="<%= vid.info.thumbnail %>" alt="<%= vid.info.description %>" />
|
||||
</a>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="tmpl_texts">
|
||||
<div class="textsWrapper">
|
||||
<% for (var i=0; i<texts.length;i++) { var txt = texts[i]; %>
|
||||
<p class="textWrapper flyoverImage" data-id="<%= txt.flyover.id %>">
|
||||
<%= txt.text %>
|
||||
</p>
|
||||
<% } %>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="tmpl_about">
|
||||
<div class="navContent" id="about">
|
||||
<div class="contentWrapper about">
|
||||
|
||||
<p>
|
||||
Placeholder for about content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<div id="wrapper">
|
||||
<div id="timeline">
|
||||
{% for e in events %}
|
||||
<div class="event" data-id="{{ e.id }}">
|
||||
{{ e.name }} <br />
|
||||
{{ e.start_time }} - {{ e.end_time }}
|
||||
<div class="eventDescription">
|
||||
{{ e.description }}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div id="map">
|
||||
|
||||
</div>
|
||||
<div id="buttons">
|
||||
<a class="navButton" href="Javascript:$.noop()" data-target="about" id="aboutBtn">About</a>
|
||||
<a class="navButton" href="Javascript:$.noop()" data-target="questions" id="questionsBtn">Experiences</a>
|
||||
</div>
|
||||
<div id="media">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -13,7 +13,9 @@ urlpatterns = patterns('',
|
|||
# to INSTALLED_APPS to enable admin documentation:
|
||||
# (r'^admin/doc/', include('django.contrib.admindocs.urls')),
|
||||
(r'^$', 'egypt.views.index'),
|
||||
# (r'^geojson$', 'flyovers.views.geojson'),
|
||||
(r'^eventMedia', 'egypt.views.getEventMedia'),
|
||||
(r'^locationMedia', 'egypt.views.getLocationMedia'),
|
||||
(r'^geojson$', 'egypt.views.geojson'),
|
||||
# (r'^flyover$', 'flyovers.views.flyover'),
|
||||
# (r'^category$', 'flyovers.views.category'),
|
||||
# (r'^email_experiences$', 'flyovers.views.email_experiences'),
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user