source: extensions/GMaps/templates/gmaps_dialog_area_choose.tpl @ 7141

Last change on this file since 7141 was 7141, checked in by grum, 13 years ago

fix js&css bugs with IE8

  • Property svn:executable set to *
File size: 11.9 KB
Line 
1{known_script id="jquery.ui" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.core.packed.js"}
2{known_script id="jquery.ui.dialog" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.dialog.packed.js"}
3{known_script id="maps.google.com/api" src="http://maps.google.com/maps/api/js?sensor=false"}
4
5
6{literal}
7<script type="text/javascript">
8
9/**
10 * include this template in a page and use dialogChooseGMapsBox.show({options}) to display
11 * the dialog box
12 *
13 */
14dialogChooseGMapsBox = function()
15{
16  var bounds = {
17    north:0,
18    south:0,
19    east:0,
20    west:0
21  }
22  var requestId = '';
23
24  var dialogGMapsOptions = {
25      id:'',
26      eventOk:null,
27      cBuilder:null,
28      gMap:null,
29    };
30
31
32  /**
33   * initialize the dialog box
34   */
35  var initDialogBox = function()
36  {
37    initializeMap();
38
39    $.ajax(
40      {
41        type: "POST",
42        url: "plugins/GMaps/gmaps_ajax.php",
43        async: true,
44        data: { ajaxfct:"public.maps.init", category:0 },
45        success: function (msg)
46          {
47            requestId=msg;
48          }
49      }
50    );
51
52    $("#iDialogGMapsChoose")
53    .dialog(
54      {
55        autoOpen: false,
56        resizable: false,
57        width:$(window).width()*0.8,
58        height:$(window).height()*0.8,
59        modal: true,
60        draggable:true,
61        dialogClass: 'gcBgTabSheet gcBorder',
62        title: '{/literal}{"gmaps_choose_geographic_area"|@translate}{literal}',
63        open: function(event, ui)
64        {
65          google.maps.event.trigger(dialogGMapsOptions.gMap, 'resize');
66
67          if(bounds.north!=0 && bounds.south!=0 && bounds.east!=0 && bounds.west!=0)
68          {
69            dialogGMapsOptions.gMap.fitBounds(
70              new google.maps.LatLngBounds(
71                new google.maps.LatLng(bounds.south, bounds.west),
72                new google.maps.LatLng(bounds.north, bounds.east)
73              )
74            );
75          }
76          else
77          {
78            dialogGMapsOptions.gMap.setZoom(2);
79            dialogGMapsOptions.gMap.setCenter(new google.maps.LatLng(0, 0));
80            updateBounds();
81          }
82
83          loadMarkers();
84        },
85        buttons:
86        {
87          '{/literal}{"gmaps_ok"|@translate}{literal}':
88            function()
89            {
90              updateBounds();
91
92              if(dialogGMapsOptions.cBuilder!=null)
93              {
94                setCBuilderItem(dialogGMapsOptions.id, bounds, requestId);
95              }
96
97              if(dialogGMapsOptions.eventOk!=null)
98              {
99                dialogGMapsOptions.eventOk(dialogGMapsOptions.id, bounds, requestId);
100              }
101
102
103              $(this).dialog('close');
104            },
105          '{/literal}{"gmaps_cancel"|@translate}{literal}':
106            function()
107            {
108              $(this).dialog('close');
109            }
110        }
111      }
112    );
113
114  }
115
116
117  /**
118   * initialize the map
119   */
120  var initializeMap = function ()
121  {
122    var latlng=new google.maps.LatLng(0, 0);
123
124    var map = new google.maps.Map($("#iDialogGMapsMap").get(0),
125      {
126        mapTypeId:google.maps.MapTypeId.HYBRID,
127        zoom:2,
128        center:latlng,
129        navigationControl: true,
130        navigationControlOptions:
131          {
132            style:google.maps.NavigationControlStyle.ZOOM_PAN,
133          },
134        scaleControl: true,
135        mapTypeControl:true,
136        mapTypeControlOptions:
137          {
138            style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
139          },
140        markerTitle:'',
141      }
142    );
143
144    map.markers=new Array();
145    dialogGMapsOptions.gMap=map;
146
147    google.maps.event.addListener(
148      dialogGMapsOptions.gMap,
149      'dragend',
150      function()
151      {
152        updateBounds();
153        loadMarkers();
154      }
155    );
156
157    google.maps.event.addListener(
158      dialogGMapsOptions.gMap,
159      'zoom_changed',
160      function()
161      {
162        updateBounds();
163        loadMarkers();
164      }
165    );
166  }
167
168
169  /**
170   * update the bounds properties from the map bounds
171   */
172  var updateBounds = function ()
173  {
174    var mapBounds=dialogGMapsOptions.gMap.getBounds();
175    bounds.north=mapBounds.getNorthEast().lat();
176    bounds.south=mapBounds.getSouthWest().lat();
177    bounds.east=mapBounds.getNorthEast().lng();
178    bounds.west=mapBounds.getSouthWest().lng();
179  }
180
181  /**
182   * set the request Id
183   */
184  var setRequestId = function(msg)
185  {
186    dialogGMapsOptions.requestId=msg;
187    requestId=msg;
188    dialogGMapsOptions.requestId=msg;
189  }
190
191
192  /**
193   * load markers from the server
194   */
195  function loadMarkers()
196  {
197    datas={
198      requestId:requestId,
199      bounds:{
200          north:bounds.north,
201          east:bounds.east,
202          south:bounds.south,
203          west:bounds.west
204        },
205      width:$(dialogGMapsOptions.gMap.getDiv()).width(),
206      height:$(dialogGMapsOptions.gMap.getDiv()).height(),
207      distanceTreshold:20,
208      levelInfo:0
209    }
210
211    $('#iDialogGMapNfo').html('<img src="./plugins/GrumPluginClasses/icons/processing.gif"><span>{/literal}{"gmaps_loading"|@translate}{literal}</span>');
212    $('#iDialogGMapWaiting').css(
213      {
214        width:$('#iDialogGMapsMap').width()+'px',
215        height:$('#iDialogGMapsMap').height()+'px',
216        top:(1+$('#iDialogGMapsMap').position().top)+'px',
217        left:(1+$('#iDialogGMapsMap').position().left)+'px',
218        display:'block'
219      }
220    );
221
222    $.ajax(
223      {
224        type: "POST",
225        url: "plugins/GMaps/gmaps_ajax.php",
226        async: true,
227        data: { ajaxfct:"public.maps.getMarkers", datas:datas },
228        success:
229          function(msg)
230          {
231            tmp=$.parseJSON(msg);
232            tmp.markers.sort(compareMarkers);
233            applyMarkers(tmp.markers);
234            $('#iDialogGMapNfo').html(tmp.datas.nbPhotos);
235            $('#iDialogGMapWaiting').css('display', 'none');
236          }
237      }
238    );
239  }
240
241  /**
242   * apply markers to map
243   *
244   * @param Array markers : array of markers properties
245   *                        each marker is an object with properties :
246   *                          latitude, longitude, nbImages
247   */
248  function applyMarkers(markers)
249  {
250    /*
251     * deleting markers from the map only if they are not in the new list
252     */
253    if(dialogGMapsOptions.gMap.markers.length>0)
254    {
255      var i=0;
256      while(i<dialogGMapsOptions.gMap.markers.length)
257      {
258        newListIndex=markerInList(dialogGMapsOptions.gMap.markers[i].uniqueId, markers);
259        if(newListIndex==-1)
260        {
261          dialogGMapsOptions.gMap.markers[i].marker.setMap(null);
262          dialogGMapsOptions.gMap.markers.splice(i, 1);
263        }
264        else
265        {
266          markers.splice(newListIndex,1);
267          i++;
268        }
269      }
270    }
271
272    /*
273     * add new markers on the map
274     */
275    for(var i=0;i<markers.length;i++)
276    {
277      var marker = new google.maps.Marker(
278        {
279          position:new google.maps.LatLng(markers[i].lat, markers[i].lng),
280          map: dialogGMapsOptions.gMap,
281          title:markers[i].nbImgTxt
282        }
283      );
284
285      marker.info=markers[i];
286      marker.info.displayed=0;
287
288      dialogGMapsOptions.gMap.markers.push(
289        {
290          marker:marker,
291          uniqueId:markers[i].uniqueId
292        }
293      );
294    }
295  }
296
297  function compareMarkers(m1,m2)
298  {
299    if(m1.uniqueId<m2.uniqueId)
300    {
301      return(-1);
302    }
303    else if(m1.uniqueId<m2.uniqueId)
304    {
305      return(1);
306    }
307    return(0);
308  }
309
310  function markerInList(uniqueId, markerList)
311  {
312    for(var i=0;i<markerList.length;i++)
313    {
314      if(markerList[i].uniqueId==uniqueId) return(i)
315    }
316    return(-1);
317  }
318
319
320  /**
321   * the show() function display and manage a dialog box to choose
322   * a geographic area
323   *
324   * @param options : properties to manage the dialog box
325   *                  - bounds : an object with properties 'north', 'south', 'east'
326   *                             and 'west'
327   *                  - id : a string to identify a DOM object ; this parameter
328   *                         is given to the callback when the OK button is pushed
329   *                  - eventOK : a callback function, with 2 parameters : id of
330   *                              the given DOM object and the bounds object
331   *                  - cBuilder : a criteriaBuilder object
332   *                               if set, the dialog box manage automaticaly
333   *                               the criteria builder interface
334   */
335  this.show = function (options)
336  {
337    showDialog(options);
338  }
339
340  /**
341   * private function used to show the dialog box
342   */
343  var showDialog = function(options)
344  {
345    if(options.bounds!=null)
346    {
347      bounds=options.bounds;
348    }
349    else
350    {
351      bounds={
352        north:0,
353        south:0,
354        east:0,
355        west:0
356      };
357    }
358
359    if(options.id!=null)
360    {
361      dialogGMapsOptions.id=options.id;
362    }
363    else
364    {
365      dialogGMapsOptions.id='';
366    }
367
368    if(options.eventOk!=null)
369    {
370      dialogGMapsOptions.eventOk=options.eventOk;
371    }
372
373    if(options.cBuilder!=null)
374    {
375      dialogGMapsOptions.cBuilder=options.cBuilder;
376      dialogGMapsOptions.cBuilder.doAction('setOptions',
377        {
378          onEdit:function (e) { editGA(e.data); },
379          onDelete:function (e) { deleteGA(e.data); },
380        }
381      );
382    }
383
384    $("#iDialogGMapsChoose").dialog('open');
385  }
386
387
388
389  /**
390   * manage the 'edit' button from criteria builder interface
391   * @param String itemId : the itemId
392   */
393  var editGA = function (itemId)
394  {
395    extraData=dialogGMapsOptions.cBuilder.doAction('getExtraData', itemId);
396    showDialog(
397      {
398        id:itemId,
399        bounds:extraData.param.bounds,
400        requestId:extraData.param.requestId
401      }
402    );
403  }
404
405  /**
406   * manage the 'delete' button from criteria builder interface
407   * @param String itemId : the itemId
408   */
409  var deleteGA = function (itemId)
410  {
411    dialogGMapsOptions.cBuilder.doAction('delete', itemId);
412  }
413
414  /**
415   * set the content for the cBuilder item
416   */
417  var setCBuilderItem = function(id, bounds)
418  {
419
420    var content="<div>{/literal}{'gmaps_geographic_coords_between'|@translate}{literal}<br>";
421    content+="<span style='margin-left:20px;'>&bull;&nbsp;"+DDtoDMS(bounds.south)+" {/literal}{'gmaps_south'|@translate} {'gmaps_and'|@translate} "+DDtoDMS(bounds.north)+" {'gmaps_north'|@translate}{literal}</span><br>";
422
423    if(bounds.east<bounds.west)
424    {
425      content+="<span style='margin-left:20px;'>&bull;&nbsp;"+DDtoDMS(bounds.east)+" {/literal}{'gmaps_east'|@translate} {'gmaps_and'|@translate} "+DDtoDMS(bounds.west)+" {'gmaps_west'|@translate}{literal}</span>";
426    }
427    else
428    {
429      content+="<span style='margin-left:20px;'>&bull;&nbsp;"+DDtoDMS(bounds.west)+" {/literal}{'gmaps_west'|@translate} {'gmaps_and'|@translate} "+DDtoDMS(bounds.east)+" {'gmaps_east'|@translate}{literal}</span>";
430    }
431    content+="</div>";
432
433
434    if(id=='')
435    {
436      //no id:add a new item in the list
437      dialogGMapsOptions.cBuilder.doAction('add', content, criteriaBuilder.makeExtendedData('GMaps', {bounds:$.extend({}, bounds), requestId:requestId } ) );
438    }
439    else
440    {
441      // update item
442      dialogGMapsOptions.cBuilder.doAction('edit', id,  content, criteriaBuilder.makeExtendedData('GMaps', {bounds:$.extend({}, bounds), requestId:requestId } ) );
443    }
444  }
445
446  /**
447   * convert a decimal degree to D°M'S'
448   * note : negative values are converted in positive values, assuming North/South
449   * and East/West are managed outside this function
450   *
451   * @param Float $value : the value to convert
452   * @return String : value converted in DMS
453   */
454  var DDtoDMS = function (value)
455  {
456    value=Math.abs(value);
457    degrees=Math.floor(value);
458    tmp=(value-degrees)*60;
459    minutes=Math.floor(tmp);
460    seconds=Math.round((tmp-minutes)*6000)/100;
461    return(degrees+"° "+minutes+"' "+seconds+'"');
462  }
463
464  initDialogBox();
465}
466
467
468</script>
469{/literal}
470
471<div id="iDialogGMapsChoose" style='display:none;'>
472  <div id='iDialogGMapNfo'>&nbsp;</div>
473  <div id='iDialogGMapsMap' style='width:95%; height:95%;margin-left:auto;margin-right:auto;border:1px solid;'></div>
474  <div id='iDialogGMapWaiting' style="display:none;"></div>
475</div>
476
477
Note: See TracBrowser for help on using the repository browser.