From 00fef249edb8874c2c22bb66f96662bb5eb6ebac Mon Sep 17 00:00:00 2001 From: sanj Date: Tue, 26 Oct 2010 00:52:03 +0200 Subject: [PATCH] bunch more stuff changed to rizk --- rizk/egypt/views.py | 11 ++ rizk/static/css/rizk.css | 175 ++++++++++++++++++++++++++ rizk/static/js/jquery.js | 2 +- rizk/static/js/rizk.js | 259 +++++++++++++++++++++++++++++++++++++++ rizk/templates/rizk.html | 95 ++++++++++++++ rizk/urls.py | 4 +- 6 files changed, 544 insertions(+), 2 deletions(-) create mode 100644 rizk/static/css/rizk.css create mode 100644 rizk/static/js/rizk.js create mode 100644 rizk/templates/rizk.html diff --git a/rizk/egypt/views.py b/rizk/egypt/views.py index fcb690b..53953a7 100644 --- a/rizk/egypt/views.py +++ b/rizk/egypt/views.py @@ -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") diff --git a/rizk/static/css/rizk.css b/rizk/static/css/rizk.css new file mode 100644 index 0000000..14fb6b3 --- /dev/null +++ b/rizk/static/css/rizk.css @@ -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; +} diff --git a/rizk/static/js/jquery.js b/rizk/static/js/jquery.js index b1bd33d..0185856 120000 --- a/rizk/static/js/jquery.js +++ b/rizk/static/js/jquery.js @@ -1 +1 @@ -jquery-1.4.2.min.js \ No newline at end of file +jquery-1.4.3.min.js \ No newline at end of file diff --git a/rizk/static/js/rizk.js b/rizk/static/js/rizk.js new file mode 100644 index 0000000..5e19cd7 --- /dev/null +++ b/rizk/static/js/rizk.js @@ -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 + "

"); + $.each(json.media.images, function(i, v) { + var 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"); + }); +}); diff --git a/rizk/templates/rizk.html b/rizk/templates/rizk.html new file mode 100644 index 0000000..69f072c --- /dev/null +++ b/rizk/templates/rizk.html @@ -0,0 +1,95 @@ + + + + + + + Placeholder for Title + + + + + + + + + + + + + + + + + + + +
+
+ {% for e in events %} +
+ {{ e.name }}
+ {{ e.start_time }} - {{ e.end_time }} +
+ {{ e.description }} +
+
+ {% endfor %} +
+
+ +
+ +
+ +
+
+ + + + + diff --git a/rizk/urls.py b/rizk/urls.py index c69da1e..0af6cd3 100644 --- a/rizk/urls.py +++ b/rizk/urls.py @@ -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'),