added Location.css_class and Location.direction methods.

these methods can be overridden by subclasses, making it much easier to customize the appearance of the embedded html fragments.
StepOneInc · Aug 25, 2010 · 0938c22 · 0938c22
1 parent f3c636f
commit 0938c22
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 9 deletions.
diff --git a/locations/models.py b/locations/models.py
@@ -46,6 +46,15 @@ class Location(models.Model):
     class Meta:
         abstract = True
 
+    # choices for the Location.direction method.
+    # (values stolen from label-overlay.js)
+    class Direction:
+        CENTER = "center"
+        ABOVE  = "above"
+        RIGHT  = "right"
+        BELOW  = "below"
+        LEFT   = "left"
+
     def __unicode__(self):
         """
         """
@@ -120,6 +129,25 @@ def label(self):
 
         return unicode(self)
 
+    @property
+    def css_class(self):
+        """
+        Return the CSS class name of the label overlay. This method
+        should be overriden by subclasses wishing to customize the
+        appearance of the embedded HTML fragment.
+        """
+
+        return "bubble"
+
+    @property
+    def direction(self):
+        """
+        Return the direction which the embedded HTML fragment should be
+        offset from the anchor point. Return one of Location.Direction.
+        """
+
+        return self.Direction.ABOVE
+
 
 #class Country(Location):
 #    name = models.CharField(max_length=100)

diff --git a/locations/static/javascripts/label-overlay.js b/locations/static/javascripts/label-overlay.js
@@ -10,11 +10,10 @@ adammck.maps = adammck.maps || {};
         this.arrow_   = null;
 
         this.paneName  = "overlayImage";
-        this.className = "label";
+        this.className = "bubble";
         this.content   = null;
         this.minZoom   = 0;
         this.maxZoom   = 99;
-        this.skin      = namespace.Label.Skin.BUBBLE;
         this.direction = namespace.Label.Direction.ABOVE;
         this.setValues(options);
 
@@ -57,16 +56,12 @@ adammck.maps = adammck.maps || {};
         "LEFT":   "left"
     };
 
-    namespace.Label.Skin = {
-        "BUBBLE": "bubble"
-    };
-
     namespace.Label.prototype =
         new google.maps.OverlayView();
 
     namespace.Label.prototype.onAdd = function() {
         this.wrapper_ = document.createElement("div");
-        this.wrapper_.className = "label-wrapper " + this.skin + " " + this.direction;
+        this.wrapper_.className = "label-wrapper " + this.className + " " + this.direction;
 
         this.arrow_ = document.createElement("div");
         this.arrow_.className = "arrow";

diff --git a/locations/static/javascripts/map.js b/locations/static/javascripts/map.js
@@ -26,7 +26,8 @@ jQuery(function() {
                     "map": map,
                     "content": loc.html(),
                     "position": new google.maps.LatLng(lat, lng),
-                    "direction": adammck.maps.Label.Direction.CENTER
+                    "direction": loc.attr("direction"),
+                    "className": loc.attr("class")
                 });
 
                 bounds.extend(label.position);

diff --git a/locations/templates/locations/dashboard.html b/locations/templates/locations/dashboard.html
@@ -60,7 +60,7 @@ <h2>Map</h2>
 		<div class="container"></div>
 
 		<ul class="labels">{% for type in location_types %}{% for location in type.locations %}
-			<li lat="{{ location.point.latitude }}" lng="{{ location.point.longitude }}">
+			<li class="{{ location.css_class }}" direction="{{ location.direction }}" lat="{{ location.point.latitude }}" lng="{{ location.point.longitude }}">
 				{{ location.as_html }}
 			</li>{% endfor %}{% endfor %}
 		</ul>