[pLog-svn] r4714 - in plog/trunk: js/location templates/admin templates/admin/chooser templates/misc
oscar at devel.lifetype.net
oscar at devel.lifetype.net
Sun Feb 11 11:47:05 EST 2007
Author: oscar
Date: 2007-02-11 11:47:04 -0500 (Sun, 11 Feb 2007)
New Revision: 4714
Modified:
plog/trunk/js/location/location.js
plog/trunk/templates/admin/chooser/location.template
plog/trunk/templates/admin/editpost.template
plog/trunk/templates/misc/location.template
Log:
Moved the javascript code for the location chooser and display to the Lifetype.UI.Location class
Modified: plog/trunk/js/location/location.js
===================================================================
--- plog/trunk/js/location/location.js 2007-02-11 14:01:46 UTC (rev 4713)
+++ plog/trunk/js/location/location.js 2007-02-11 16:47:04 UTC (rev 4714)
@@ -1,155 +1,168 @@
/**
- * The markerMode variable defines whether we can have multiple markers or
- * more than one marker at the same time: 1 = one marker, any other value = multiple markers
+ * Main constructor of the class
*/
-var markerMode = 1;
+Lifetype.UI.Location = function()
+{
+ // nothing to do
+ this.id = "map";
+}
/**
- * Whether to show our custom control with the list of pre-defined locations
+ * Location selector
*/
-var useCustomLocationControl = true;
+Lifetype.UI.Location.prototype =
+{
+ // constructor of the class
+ /**
+ * The markerMode variable defines whether we can have multiple markers or
+ * more than one marker at the same time: 1 = one marker, any other value = multiple markers
+ */
+ markerMode: 1,
-/**
- * Whether to show the little display with the latitude and the longitude
- */
-var useCustomLatitudeAndLongitudeDisplay = true;
+ /**
+ * Whether to show our custom control with the list of pre-defined locations
+ */
+ useCustomLocationControl: true,
-/**
- * Array of predefined locations to show in the custom control
- */
-var locations = new Array(
- new Array( "0,0", "-- Select --" )
-);
+ /**
+ * Whether to show the little display with the latitude and the longitude
+ */
+ useCustomLatitudeAndLongitudeDisplay: true,
-/**
- * messages
- */
-var locationLocaleNoMarkerHasBeenSetYet = "No marker has been set yet";
-var locationLocaleNoDescriptionError = "Please type a description for the new location";
+ /**
+ * Array of predefined locations to show in the custom control
+ */
+ locations: Array(
+ Array( "0,0", "-- Select --" )
+ ),
-/**
- * Used to control whether the marker is already in place or not, please
- * do not modify these
- */
-var markerAdded = false;
-var markerLat = 0;
-var markerLong = 0;
-var markerDesc = "";
-var globalMarker = new GMarker( new GLatLng(0,0));
+ /**
+ * messages
+ */
+ locationLocaleNoMarkerHasBeenSetYet: "No marker has been set yet",
+ locationLocaleNoDescriptionError: "Please type a description for the new location",
+ /**
+ * Used to control whether the marker is already in place or not, please
+ * do not modify these
+ */
+ markerAdded: false,
+ markerLat: 0,
+ markerLong: 0,
+ markerDesc: "",
+ globalMarker: new GMarker( new GLatLng(0,0)),
+
+ /**
+ * Whether we're in display-only mode or we are allowed
+ * to move the marker around
+ */
+ displayOnlyMode: false,
+
+ /**
+ * The global GMap2 object, please do not modify this
+ */
+ map: null
+}
+
/**
- * Whether we're in display-only mode or we are allowed
- * to move the marker around
+ * Initializes and renders the selector
*/
-var displayOnlyMode = false;
+Lifetype.UI.Location.prototype.init = function()
+{
+ if (GBrowserIsCompatible()) {
+ mapOpts = { mapTypes: new Array( G_HYBRID_MAP ) };
+ this.map = new GMap2(document.getElementById( "map" ), mapOpts );
+ // place the centre of the map somewhere in the middle of the atlantic ocean
+ if( this.markerLat != 0 || this.markerLong != 0 ) {
+ this.map.setCenter( new GLatLng( this.markerLat, this.markerLong ), 13 );
+ this.ClickHandler( null, new GLatLng( this.markerLat, this.markerLong ));
+ }
+ else {
+ this.map.setCenter( new GLatLng(37.160316, -38.671875), 2 );
+ }
+
+ // add two controls to our map
+ this.map.addControl(new GLargeMapControl());
+ this.map.addControl(new GMapTypeControl());
+ if( this.useCustomLocationControl )
+ this.map.addControl(new Lifetype.UI.Location.SelectorControl( this ));
+ if( this.useCustomLatitudeAndLongitudeDisplay )
+ this.map.addControl(new Lifetype.UI.Location.LatitudeAndLongitudeDisplayControl());
+
+ // add a click listener
+ if( !this.displayOnlyMode ) {
+ GEvent.addListener( this.map, "click", this.ClickHandler );
+ //YAHOO.util.Event.addListener( this.map, "click", this.ClickHandler, this, true );
+ }
+
+ // save a link to ourselves in the map object
+ this.map.locationSelector = this;
+ }
+}
/**
- * The global GMap2 object, please do not modify this
+ * Handles clicks
*/
-var map;
+Lifetype.UI.Location.prototype.ClickHandler = function( marker, point )
+{
+ // this is a bit silly but it works... Google's even handler
+ // will set 'this' to the map while we need it to
+ // refer to our Lifetype.UI.Location object or else
+ // we won't find our properties...
+ if( this.id == undefined )
+ var o = this.locationSelector;
+ else
+ var o = this;
-function LocationChooserClickHandler( marker, point )
-{
if( !point )
return;
// remove the marker if it was already there
- if( markerMode != 1 ) {
+ if( o.markerMode != 1 ) {
lat = document.getElementById('lat');
lng = document.getElementById('long');
lat.value = point.lat();
lng.value = point.lng();
- map.addOverlay( new GMarker( point ));
+ o.map.addOverlay( new GMarker( point ));
}
else {
- if( markerAdded ) {
- map.removeOverlay( globalMarker );
- markerAdded = false;
+ if( o.markerAdded ) {
+ o.map.removeOverlay( o.globalMarker );
+ o.markerAdded = false;
}
- if( !markerAdded ) {
+ if( !o.markerAdded ) {
lat = document.getElementById('lat');
lng = document.getElementById('long');
- lat.value=point.lat();
- lng.value=point.lng();
- globalMarker= new GMarker( point );
- markerLat = point.lat();
- markerLong = point.lng();
- map.addOverlay( globalMarker );
- markerAdded = true;
- map.setCenter( point );
- if( markerDesc ) {
- markerDesc = markerDesc + "<br/>" + markerLat + ", " + markerLong;
+ lat.value = point.lat();
+ lng.value = point.lng();
+ o.globalMarker = new GMarker( point );
+ o.markerLat = point.lat();
+ o.markerLong = point.lng();
+ o.map.addOverlay( o.globalMarker );
+ o.markerAdded = true;
+ o.map.setCenter( point );
+ if( o.markerDesc ) {
+ o.markerDesc = o.markerDesc + "<br/>" + o.markerLat + ", " + o.markerLong;
}
else {
- markerDesc =
- markerDesc = markerLat + ", " + markerLong;
+ o.markerDesc = o.markerLat + ", " + o.markerLong;
}
- // add the info window
- GEvent.addListener(globalMarker, "click", function() {
- globalMarker.openInfoWindowHtml( markerDesc );
+ // add the info window
+ GEvent.addListener( o.globalMarker, "click", function() {
+ o.globalMarker.openInfoWindowHtml( o.markerDesc );
});
- globalMarker.openInfoWindowHtml( markerDesc );
+ o.globalMarker.openInfoWindowHtml( o.markerDesc );
}
}
}
-function LocationChooserLoad()
-{
- if (GBrowserIsCompatible()) {
- mapOpts = { mapTypes: new Array( G_HYBRID_MAP ) };
- map = new GMap2(document.getElementById("map"), mapOpts );
- // place the centre of the map somewhere in the middle of the atlantic ocean
- if( markerLat != 0 || markerLong != 0 ) {
- map.setCenter( new GLatLng( markerLat, markerLong ), 13 );
- LocationChooserClickHandler( null, new GLatLng( markerLat, markerLong ));
- }
- else {
- map.setCenter( new GLatLng(37.160316, -38.671875), 2 );
- }
-
- // loop over all the locations and add them to the map as info windows
-
-
-
- // add two controls to our map
- map.addControl(new GLargeMapControl());
- map.addControl(new GMapTypeControl());
- if( useCustomLocationControl )
- map.addControl(new LifetypeLocationSelectorControl());
- if( useCustomLatitudeAndLongitudeDisplay )
- map.addControl(new LifetypeLatitudeAndLongitudeDisplayControl());
-
- // add a click listener
- if( !displayOnlyMode ) {
- GEvent.addListener(map, "click", LocationChooserClickHandler );
- }
- }
-}
-
/**
- * Jumps to a location when selected in the drop-down list
- * This function is an event handler that handles the on-change event of the drop-down
- * list with pre-defined locations
+ * Sends the location information back to the calling window
*/
-function LocationChooserMyLocation( event )
-{
- // get access to the element that fired the event
- element = event.currentTarget;
- // get the string with the coordinates from the selector
- var coordString = element.options[element.selectedIndex].value;
- // split them in latitude and longitude
- var coords = coordString.split(",");
- if( coords[0] != 0 && coords[1] != 0 ) {
- // set them to the map
- map.setCenter( new GLatLng( coords[0], coords[1] ));
- LocationChooserClickHandler( null, new GLatLng( coords[0], coords[1] ));
- }
-}
-
-function LocationChooserAddLocation()
+Lifetype.UI.Location.prototype.AddLocation = function()
{
- if( !markerAdded ) {
- window.alert( locationLocaleNoMarkerHasBeenSetYet );
+ if( !this.markerAdded ) {
+ window.alert( this.locationLocaleNoMarkerHasBeenSetYet );
return false;
}
@@ -157,7 +170,7 @@
locationList = parent.opener.document.getElementById("locationId");
// is the location already in the list?
- currentLatLng = new GLatLng(markerLat, markerLong);
+ currentLatLng = new GLatLng( this.markerLat, this.markerLong);
for( i = 0; i < locationList.options.length; i++ ) {
coords = locationList.options[i].value.split(",");
optLatLng = new GLatLng( coords[0], coords[1] );
@@ -170,7 +183,7 @@
// get the description and quit if empty
locationDesc = document.getElementById( "locationDesc" );
if( locationDesc.value == "" ) {
- window.alert( locationLocaleNoDescriptionError );
+ window.alert( this.locationLocaleNoDescriptionError );
return false;
}
@@ -180,8 +193,8 @@
// if not, then we have to add it
opt = parent.opener.document.createElement( "option" );
- opt.text = locationDesc.value + " (" + markerLat + "," + markerLong + ")";
- opt.value = markerLat + "," + markerLong;
+ opt.text = locationDesc.value;
+ opt.value = this.markerLat + "," + this.markerLong;
locationList.options[locationList.options.length - 1] = opt;
// add the "add new" option
@@ -194,9 +207,9 @@
locationList.selectedIndex = locationList.options.length - 1;
locationLatitude = parent.opener.document.getElementById("locationLat");
- locationLatitude.value = markerLat;
+ locationLatitude.value = this.markerLat;
locationLongitude = parent.opener.document.getElementById("locationLong");
- locationLongitude.value = markerLong;
+ locationLongitude.value = this.markerLong;
locationDesc = parent.opener.document.getElementById("locationDesc");
newLocationDesc = document.getElementById( "locationDesc" );
locationDesc.value = newLocationDesc.value;
@@ -207,25 +220,34 @@
///////////////////////////////////////////////////
// code for the custom location selector
///////////////////////////////////////////////////
-function LifetypeLocationSelectorControl() {
+
+Lifetype.UI.Location.SelectorControl = function( locationSelector )
+{
+ this.locations = locationSelector.locations;
+ this.locationSelector = locationSelector;
}
-LifetypeLocationSelectorControl.prototype = new GControl();
+Lifetype.UI.Location.SelectorControl.prototype = new GControl();
-// Creates a one DIV for each of the buttons and places them in a container
-// DIV which is returned as our control element. We add the control to
-// to the map container and return the element for the map class to
-// position properly.
-LifetypeLocationSelectorControl.prototype.initialize = function(map) {
+/**
+ * Creates a one DIV for each of the buttons and places them in a container
+ * DIV which is returned as our control element. We add the control to
+ * to the map container and return the element for the map class to
+ * position properly.
+ */
+Lifetype.UI.Location.SelectorControl.prototype.initialize = function( map )
+{
+ this.map = map;
+
var container = document.createElement("div");
- list = document.createElement("select");
+ list = document.createElement("select");
// traverse the array with predefined locations
- for( i = 0; i < locations.length; i++ ) {
+ for( i = 0; i < this.locations.length; i++ ) {
// build the option
opt = document.createElement( "option" );
- data = locations[i];
+ data = this.locations[i];
opt.text = data[1];
opt.value = data[0];
// and add it to the list
@@ -240,33 +262,60 @@
}
// add an onclick event
- GEvent.addDomListener( list, "change", LocationChooserMyLocation );
+ //GEvent.addDomListener( list, "change", this.setMyLocation );
+ YAHOO.util.Event.addListener( list, "change", this.setMyLocation, this, true );
+ // save a reference to ourselves in the select object, so that we can retrieve a reference
+ // later on because we're going to need it...
+ list.locationSelector = this;
+
// add the container to the map
container.appendChild( list );
map.getContainer().appendChild(container);
return container;
}
-// By default, the control will appear in the top left corner of the
-// map with 7 pixels of padding.
-LifetypeLocationSelectorControl.prototype.getDefaultPosition = function() {
- return new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(7, 7));
+/**
+ * Jumps to a location when selected in the drop-down list
+ * This function is an event handler that handles the on-change event of the drop-down
+ * list with pre-defined locations
+ */
+Lifetype.UI.Location.SelectorControl.prototype.setMyLocation = function( event )
+{
+ // get access to the element that fired the event
+ element = event.currentTarget;
+ // get the string with the coordinates from the selector
+ var coordString = element.options[element.selectedIndex].value;
+ // split them in latitude and longitude
+ var coords = coordString.split(",");
+ if( coords[0] != 0 && coords[1] != 0 ) {
+ // set them to the map
+ this.locationSelector.map.setCenter( new GLatLng( coords[0], coords[1] ));
+ this.locationSelector.ClickHandler( null, new GLatLng( coords[0], coords[1] ));
+ }
}
-/////
-// shows the latitude and longitude on the top right corner
-////
-function LifetypeLatitudeAndLongitudeDisplayControl() {
+/**
+ * By default, the control will appear in the top left corner of the
+ * map with 7 pixels of padding.
+ */
+Lifetype.UI.Location.SelectorControl.prototype.getDefaultPosition = function()
+{
+ return new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(7, 7));
}
-LifetypeLatitudeAndLongitudeDisplayControl.prototype = new GControl();
+Lifetype.UI.Location.LatitudeAndLongitudeDisplayControl = function() {}
-// Creates a one DIV for each of the buttons and places them in a container
-// DIV which is returned as our control element. We add the control to
-// to the map container and return the element for the map class to
-// position properly.
-LifetypeLatitudeAndLongitudeDisplayControl.prototype.initialize = function(map) {
+Lifetype.UI.Location.LatitudeAndLongitudeDisplayControl.prototype = new GControl();
+
+/**
+ * Creates a one DIV for each of the buttons and places them in a container
+ * DIV which is returned as our control element. We add the control to
+ * to the map container and return the element for the map class to
+ * position properly.
+ */
+Lifetype.UI.Location.LatitudeAndLongitudeDisplayControl.prototype.initialize = function(map)
+{
var container = document.createElement("div");
text = document.createElement( "input" );
@@ -286,8 +335,11 @@
return container;
}
-// By default, the control will appear in the top left corner of the
-// map with 7 pixels of padding.
-LifetypeLatitudeAndLongitudeDisplayControl.prototype.getDefaultPosition = function() {
+/**
+ * By default, the control will appear in the top left corner of the
+ * map with 7 pixels of padding.
+ */
+Lifetype.UI.Location.LatitudeAndLongitudeDisplayControl.prototype.getDefaultPosition = function()
+{
return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7));
}
\ No newline at end of file
Modified: plog/trunk/templates/admin/chooser/location.template
===================================================================
--- plog/trunk/templates/admin/chooser/location.template 2007-02-11 14:01:46 UTC (rev 4713)
+++ plog/trunk/templates/admin/chooser/location.template 2007-02-11 16:47:04 UTC (rev 4714)
@@ -3,32 +3,42 @@
type="text/javascript"></script>
<script type="text/javascript" src="js/location/location.js"></script>
<script type="text/javascript">
- var locations = new Array(
+
+ // create the global object
+ l = new Lifetype.UI.Location();
+
+ l.locations = new Array(
new Array( "0,0", "-- {$locale->tr("select")} --" )
{foreach from=$locations item=loc name=locationsLoop}
{if $smarty.foreach.locationsLoop.first},{/if}
new Array( "{$loc->getLatitude()},{$loc->getLongitude()}", "{$loc->getDescription()}" ){if !$smarty.foreach.locationsLoop.last},{/if}
{/foreach}
);
+
+ {if $mode==2}
+ l.markerLat = '{$startLatitude}';
+ l.markerLong = '{$startLongitude}';
+ l.markerDesc = '{$startDescription}';
+ l.useCustomLocationControl = false;
+ l.displayOnlyMode = true;
// localized messages
- var locationLocaleNoMarkerHasBeenSetYet = "{$locale->tr("error_no_marker_set")}";
- var locationLocaleNoDescriptionError = "{$locale->tr("error_no_description_set")}";
-
- {if $mode==2}
- var markerLat = '{$startLatitude}';
- var markerLong = '{$startLongitude}';
- var markerDesc = '{$startDescription}';
- var useCustomLocationControl = false;
- var displayOnlyMode = true;
+ l.locationLocaleNoMarkerHasBeenSetYet = "{$locale->tr("error_no_marker_set")}";
+ l.locationLocaleNoDescriptionError = "{$locale->tr("error_no_description_set")}";
{/if}
+ {literal}
+ YAHOO.util.Event.addListener( window, "load", function() {
+ l.init();
+ });
+ YAHOO.util.Event.addListener( window, "unload", GUnload());
+ {/literal}
</script>
- <body onload="LocationChooserLoad()" onunload="GUnload()" style="padding:0;margin:0">
+ <body style="padding:0;margin:0">
<div id="map" style="width: 590px; height: 500px;margin:0;margin-bottom:5px;padding:0;"></div>
{if $mode==1}
<div id="data" style="width:100%;padding-left:10px">
Description:
<input type="text" name="locationDesc" value="" id="locationDesc" style="width:60%" >
- <input type="button" onClick="if( LocationChooserAddLocation()) window.close(); " value="{$locale->tr("add_location")}" />
+ <input type="button" onClick="if( l.AddLocation()) window.close(); " value="{$locale->tr("add_location")}" />
</div>
{/if}
<input type="hidden" name="lat" value="" id="lat" />
Modified: plog/trunk/templates/admin/editpost.template
===================================================================
--- plog/trunk/templates/admin/editpost.template 2007-02-11 14:01:46 UTC (rev 4713)
+++ plog/trunk/templates/admin/editpost.template 2007-02-11 16:47:04 UTC (rev 4714)
@@ -110,6 +110,16 @@
{/foreach}
</select>
</div>
+
+ {if $location_data_enabled}
+ <!-- location selector, this should only appear if location data is enabled -->
+ <div class="field">
+ <label for="locId">{$locale->tr("location")}</label>
+ <span class="required"*</span>
+ <div class="formHelp">{$locale->tr("article_location_help")}</div>
+ {location_chooser blogId=$blog->getId() addNewString=$locale->tr("add_new") showDisplayLink=1 default=$location}
+ </div>
+ {/if}
<div class="field">
<label for="postCategories[]">{$locale->tr("categories")}</label>
Modified: plog/trunk/templates/misc/location.template
===================================================================
--- plog/trunk/templates/misc/location.template 2007-02-11 14:01:46 UTC (rev 4713)
+++ plog/trunk/templates/misc/location.template 2007-02-11 16:47:04 UTC (rev 4714)
@@ -1,44 +1,46 @@
-{assign var=htmlarea value=$blogsettings->getValue("htmlarea_enabled")}
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset={$locale->getCharset()}"/>
<link rel="stylesheet" href="styles/admin.css" type="text/css" />
<title>{$locale->tr("location")}</title>
- <script type="text/javascript" src="js/ui/common.js"></script>
- <script type="text/javascript" src="js/ui/forms.js"></script>
+ <!-- Google Maps library -->
<script src="http://maps.google.com/maps?file=api&v=2&key={$google_maps_api_key}" type="text/javascript"></script>
+ <!-- Yahoo UI Library -->
+ <script type="text/javascript" src="js/yui/yahoo/yahoo-min.js"></script>
+ <script type="text/javascript" src="js/yui/dom/dom-min.js"></script>
+ <script type="text/javascript" src="js/yui/event/event-min.js"></script>
+ <!-- Lifetype UI library -->
+ <script type="text/javascript" src="js/ui/core.js"></script>
<script type="text/javascript" src="js/location/location.js"></script>
<script type="text/javascript">
- var locations = new Array(
- new Array( "0,0", "-- {$locale->tr("select")} --" )
- {foreach from=$locations item=loc name=locationsLoop}
- {if $smarty.foreach.locationsLoop.first},{/if}
- new Array( "{$loc->getLatitude()},{$loc->getLongitude()}", "{$loc->getDescription()}" ){if !$smarty.foreach.locationsLoop.last},{/if}
- {/foreach}
- );
+ // create the global object
+ l = new Lifetype.UI.Location();
+
// localized messages
var locationLocaleNoMarkerHasBeenSetYet = "{$locale->tr("error_no_marker_set")}";
var locationLocaleNoDescriptionError = "{$locale->tr("error_no_description_set")}";
-
- var markerLat = '{$startLatitude}';
- var markerLong = '{$startLongitude}';
- var markerDesc = '{$startDescription}';
- var useCustomLocationControl = false;
- var displayOnlyMode = true;
+
+ // properties of the location object
+ l.markerLat = '{$startLatitude}';
+ l.markerLong = '{$startLongitude}';
+ l.markerDesc = '{$startDescription}';
+ l.useCustomLocationControl = false;
+ l.displayOnlyMode = true;
+ // localized messages
+ l.locationLocaleNoMarkerHasBeenSetYet = "{$locale->tr("error_no_marker_set")}";
+ l.locationLocaleNoDescriptionError = "{$locale->tr("error_no_description_set")}";
+ {literal}
+ YAHOO.util.Event.addListener( window, "load", function() {
+ l.init();
+ });
+ YAHOO.util.Event.addListener( window, "unload", GUnload());
+ {/literal}
</script>
</head>
<body>
- <body onload="LocationChooserLoad()" onunload="GUnload()" style="padding:0;margin:0">
+ <body style="padding:0;margin:0">
<div id="map" style="width: {$width}px; height: {$height}px;margin:0;margin-bottom:5px;padding:0;"></div>
- {if $mode==1}
- <div id="data" style="width:100%;padding-left:10px">
- Description:
- <input type="text" name="locationDesc" value="" id="locationDesc" style="width:60%" >
- <input type="button" onClick="if( LocationChooserAddLocation()) window.close(); " value="{$locale->tr("add_location")}" />
- </div>
- {/if}
<input type="hidden" name="lat" value="" id="lat" />
<input type="hidden" name="long" value="" id="long" />
</body>
More information about the pLog-svn
mailing list