Bootstrap templates

- event mockup
- login page

locpick/field.py

@@ -0,0 +1,93 @@
+from django.db import models
+from django.template import loader
+
+from locpick import settings
+from locpick.widget import LocationPickerWidget
+
+
+class LocationField(models.CharField):
+
+    def __init__(self, *args, **kwargs):
+        kwargs['max_length'] = 100
+        return super(LocationField, self).__init__(*args, **kwargs)
+
+    def formfield(self, **kwargs):
+        kwargs['widget'] = LocationPickerWidget
+        return super(LocationField, self).formfield(**kwargs)
+
+    def contribute_to_class(self, cls, name):
+        super(LocationField, self).contribute_to_class(cls, name)
+        setattr(cls, self.name, LocationFieldDescriptor(self))
+
+
+class LocationFieldDescriptor(object):
+
+    def __init__(self, field):
+        self.field = field
+
+    def __get__(self, instance=None, owner=None):
+        if instance is None:
+            raise AttributeError(
+                "The '%s' attribute can only be accessed from %s instances."
+                % (self.field.name, owner.__name__))
+        return Map(instance.__dict__[self.field.name])
+
+    def __set__(self, instance, value):
+        instance.__dict__[self.field.name] = value
+
+
+class Map(object):
+
+    def __init__(self, value):
+        self.value = value
+        self.position = 49.340119, 10.890325
+        self.center = 49.340119, 10.890325
+        self.zoom = 4
+        if value:
+            values = value.split(',')
+            self.zoom = int(values.pop())
+            values = [str(float(it)) for it in values]
+            self.position = values[0], values[1]
+            self.center = values[2], values[3]
+
+    def __str__(self):
+        return str(self.value)
+
+    def __unicode__(self):
+        return unicode(self.value)
+
+    def __repr__(self):
+        return unicode(self)
+
+    def __nonzero__(self):
+        return bool(self.value)
+
+    def render_map(self, width=settings.DEFAULT_MAP_WIDTH, height=settings.DEFAULT_MAP_HEIGHT):
+        return loader.render_to_string(
+            'locpick/map.html',
+            {
+                'id': id(self),
+                'map': self,
+                'width': width,
+                'height': height,
+            }
+        )
+
+    @property
+    def external_url(self):
+        return "http://maps.google.com/?ll=%s,%s&z=%s&q=%s,%s" % (
+            self.center[0],
+            self.center[1],
+            self.zoom,
+            self.position[0],
+            self.position[1],
+        )
+
+
+
+try:
+    from south.modelsinspector import add_introspection_rules
+except ImportError:
+    pass
+else:
+    add_introspection_rules([], [r"^locpick\.field\.LocationField"])

locpick/settings.py

@@ -0,0 +1,6 @@
+from django.conf import settings
+
+
+DEFAULT_MAP_WIDTH = getattr(settings, 'LOCPICK_DEFAULT_MAP_WIDTH', 600)
+DEFAULT_MAP_HEIGHT = getattr(settings, 'LOCPICK_DEFAULT_MAP_HEIGHT', 300)
+

locpick/static/locpick/jquery.location_picker.js

@@ -0,0 +1,166 @@
+//#google.load("maps", "2");
+
+/*$(document).unload(function(){
+    GUnload();
+});
+*/
+
+$(document).ready(function(){
+	$("input.location_picker").each(function (i) {
+		var geocoder = new google.maps.Geocoder();
+		var map = $('<div>');
+		var input = this;
+		map.addClass("location_picker_map");
+		map.attr('id', 'location_picker_map');
+		$(this).css('display','none');
+		var search_field = $('<input type=textbox style="margin-left: 10em; width: 20em">');
+		var search_button = $('<input type="button" value="Search">')
+		search_field.attr('id', 'location_picker_search')
+		$(this).parent().append(map);
+		$(this).parent().append($('<br>'));
+		$(this).parent().append(search_field);
+		$(this).parent().append(search_button);
+
+
+		if (this.value.split(',').length == 5) {
+			values = this.value.split(',');
+			var position = new google.maps.LatLng(values[0], values[1]);
+			var center = new google.maps.LatLng(values[2], values[3]);
+			var zoom = parseInt(values[4]);
+		} else {
+			var center = new google.maps.LatLng(49.340119,10.890325);
+			var position = new google.maps.LatLng(49.340119,10.890325);
+			var zoom = 17;
+			this.value = position.lat()
+			            + ',' + position.lng()
+			            + ',' + center.lat()
+			            + ',' + center.lng()
+			            + ',' + zoom;
+		}
+		
+	    geocoder.geocode({'latLng': position}, function(results, status) {
+	      if (status == google.maps.GeocoderStatus.OK) {
+	        if (results[0]) {
+	           document.getElementById('location_picker_search').value = results[0].formatted_address ;
+	        }
+	      }
+	    });
+
+
+
+		var myOptions = {
+			zoom: zoom,
+			center: center,
+			mapTypeId: google.maps.MapTypeId.HYBRID
+		};
+		var gmap = new google.maps.Map(document.getElementById("location_picker_map"), myOptions);
+
+		if (position != null) {
+			var marker = new google.maps.Marker({
+				position: position,
+				map: gmap,
+			});
+		} else {
+			var marker = null;
+		}
+
+		function geoCode(){
+			var address = document.getElementById("location_picker_search").value;
+			geocoder.geocode( { 'address': address}, function(results, status) {
+				if (status == google.maps.GeocoderStatus.OK) {
+					var latLon = results[0].geometry.location;
+					gmap.setCenter(latLon);
+					if (marker == null){
+						marker = new google.maps.Marker({
+							position: latLon,
+							map: gmap,
+						});
+					} else {
+						marker.setPosition(latLon);
+					}
+					updateInput();
+				} else {
+					alert("Geocode was not successful for the following reason: " + status);
+				}
+			});
+		};
+		search_button.click(function() {
+			result = geoCode();
+		});
+		search_field.bind('keydown', function(e) {
+			var code = (e.keyCode ? e.keyCode : e.which);
+			if (code == 13) { //Enter keycode
+				geoCode();
+				return false;
+			}
+		});
+
+		function updateInput(){
+			if (marker == null){
+				return;
+			}
+			var pos = marker.getPosition();
+			input.value = pos.lat()
+			            + ',' + pos.lng()
+			            + ',' + gmap.getCenter().lat()
+			            + ',' + gmap.getCenter().lng()
+			            + ',' + gmap.getZoom();
+		}
+		google.maps.event.addListener(gmap, 'click', function(event) {
+			if (marker == null) {
+				marker = new google.maps.Marker({
+					position: event.latLng,
+					map: gmap,
+				});
+			} else {
+				marker.setPosition(event.latLng);
+			}
+			updateInput();
+		});
+
+		google.maps.event.addListener(gmap, 'center_changed', function(event) {
+			updateInput();
+		});
+		google.maps.event.addListener(gmap, 'zoom_changed', function(event) {
+			updateInput();
+		});
+
+		function HomeControl(controlDiv, gmap) {
+
+			controlDiv.style.padding = '5px';
+
+			// Set CSS for the control border
+			var controlUI = document.createElement('DIV');
+			controlUI.style.backgroundColor = 'white';
+			controlUI.style.borderStyle = 'solid';
+			controlUI.style.borderWidth = '1px';
+			controlUI.style.cursor = 'pointer';
+			controlUI.style.textAlign = 'center';
+			controlUI.title = 'Click to remove the marker';
+			controlDiv.appendChild(controlUI);
+
+			// Set CSS for the control interior
+			var controlText = document.createElement('DIV');
+			controlText.style.fontFamily = 'sans-serif';
+			controlText.style.fontSize = '12px';
+			controlText.style.paddingLeft = '4px';
+			controlText.style.paddingRight = '4px';
+			controlText.innerHTML = 'Clear';
+			controlUI.appendChild(controlText);
+
+			// Setup the click event listeners: simply set the map to Chicago
+			google.maps.event.addDomListener(controlUI, 'click', function() {
+				if (marker != null){
+					marker.setMap(null);
+					marker = null;
+					input.value = '';
+				}
+			});
+		}
+		var homeControlDiv = document.createElement('DIV');
+		var homeControl = new HomeControl(homeControlDiv, gmap);
+
+		homeControlDiv.index = 1;
+		gmap.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
+	});
+});

locpick/static/locpick/location_picker.css

@@ -0,0 +1,7 @@
+.location_picker_map {
+  width: 600px;
+  height: 400px;
+  border: 1px solid black;
+  padding: 2px;
+  display: inline-block;
+}

locpick/templates/locpick/map.html

@@ -0,0 +1,25 @@
+<div id='locpick_map_canvas_{{id}}' style="width:{{width}}px; height:{{height}}px">
+
+<script type="text/javascript">
+  ( function() {
+  function initialize() {
+    var center = new google.maps.LatLng({{map.center.0}}, {{map.center.1}});
+    var position = new google.maps.LatLng({{map.position.0}}, {{map.position.1}});
+    var myOptions = {
+      zoom: {{map.zoom}},
+      center: center,
+      mapTypeId: google.maps.MapTypeId.HYBRID
+    };
+    var map = new google.maps.Map(document.getElementById("locpick_map_canvas_{{id}}"), myOptions);
+    var marker = new google.maps.Marker({
+        position: position,
+        map: map
+    });
+  }
+
+  initialize();
+  })();
+
+</script>
+
+</div>

locpick/templatetags/gmap.py

@@ -0,0 +1,28 @@
+from django import template
+
+from locpick import settings
+
+
+register = template.Library()
+
+
+class LocpickNode(template.Node):
+    def __init__(self, field, width=settings.DEFAULT_MAP_WIDTH, height=settings.DEFAULT_MAP_HEIGHT):
+        self.field_name = field
+        self.width = width
+        self.height = height
+
+    def render(self, context):
+        field = template.Variable(self.field_name).resolve(context)
+        return field.render_map(width=self.width, height=self.height)
+
+
+@register.tag
+def gmap(parser, token):
+    bits = token.split_contents()
+    if len(bits) == 2:
+        return LocpickNode(field=bits[1])
+    elif len(bits) == 4:
+        return LocpickNode(field=bits[1], width=bits[2], height=bits[3])
+    else:
+        raise template.TemplateSyntaxError('{% locpick instance.location_field %} or {% locpick instance.location_field WIDTH HEIGHT %}')

locpick/widget.py

@@ -0,0 +1,33 @@
+from django import forms
+from django.conf import settings
+
+
+if hasattr(settings, 'LOCPICK_STATIC_URL'):
+    STATIC_URL = settings.LOCPICK_STATIC_URL
+else:
+    STATIC_URL = settings.STATIC_URL + 'locpick/'
+
+
+class LocationPickerWidget(forms.TextInput):
+    class Media:
+        css = {
+            'all': (
+                STATIC_URL + 'location_picker.css',
+            )
+        }
+        js = (
+            'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js',
+            'http://maps.google.com/maps/api/js?sensor=false',
+            STATIC_URL + 'jquery.location_picker.js',
+        )
+
+    def __init__(self, language=None, attrs=None):
+        self.language = language or settings.LANGUAGE_CODE[:2]
+        super(LocationPickerWidget, self).__init__(attrs=attrs)
+
+    def render(self, name, value, attrs=None):
+        if None == attrs:
+            attrs = {}
+        attrs['class'] = 'location_picker'
+        return super(LocationPickerWidget, self).render(name, value, attrs)
+