source: extensions/GMaps/js/gmapsCategory.js @ 12204

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

fix bugs
bug:2346 - Preview / next arrow do not work with [gmaps] tag in description
bug:2063 - Incompatibility with slideshow mode
File size: 15.5 KB
Line 
1/**
2 * -----------------------------------------------------------------------------
3 * file: gmapsCategory.js
4 * file version: 1.2.2
5 * date: 2011-09-23
6 */
7
8 var gmapsCM=null,
9     gmapsMM=null;
10
11function categoryMaps()
12{
13  var markerImgProp = [
14        null,
15        { w:32, h:32, x:15, y:31 }, // s01
16        { w:32, h:32, x:15, y:31 }, // s02
17        { w:32, h:32, x:10, y:31 }, // s03
18        { w:30, h:40, x:4, y:39 } // s04
19      ],
20      previousThumb={width:-1, height:-1};
21
22
23
24  /**
25   * create the map
26   *
27   * @param Object properties : map properties
28   * @param Integer gmapsIndex : index in the map list
29   */
30  this.createMap = function(properties, gmapsIndex)
31  {
32    var map = new google.maps.Map($("#"+properties.id).get(0),
33      {
34        backgroundColor:'#ffffff',
35        mapTypeId: properties.mapType,
36        zoom: properties.zoomLevel,
37        center: gmaps.bounds.getCenter(),
38        navigationControl: (properties.navigationControl==-1)?false:true,
39        scrollwheel: (properties.navigationControl==-1)?false:true,
40        scaleControl: (properties.scaleControl=='n')?false:true,
41        streetViewControl: (properties.streetViewControl=='n')?false:true,
42        mapTypeControl:(properties.mapTypeControl==-1)?false:true,
43        mapTypeControlOptions:
44          {
45            style:properties.mapTypeControl
46          },
47        markerTitle:''
48      }
49    );
50
51    if(properties.kmlFileUrl!='')
52    {
53      kmlFile = new google.maps.KmlLayer(properties.kmlFileUrl,
54        {
55          preserveViewport:true
56        }
57      );
58      kmlFile.setMap(map);
59    }
60    else
61    {
62      kmlFile=null;
63    }
64
65    re=/^mS(\d\d)_.*/i;
66    iM=re.exec(properties.markerImg);
67    if(iM!=null) iM=new Number(iM[1]);
68
69    if(iM!=null)
70    {
71      map.markerImg = new google.maps.MarkerImage('plugins/GMaps/img/'+properties.markerImg,
72          new google.maps.Size(markerImgProp[iM].w, markerImgProp[iM].h),
73          new google.maps.Point(0,0),
74          new google.maps.Point(markerImgProp[iM].x, markerImgProp[iM].y));
75    }
76    else
77    {
78      map.markerImg = null;
79    }
80
81    map.kmlFile=kmlFile;
82    map.markers=new Array();
83    map.gmapsIndex=gmapsIndex;
84    map.viewportInitialized=false;
85    map.callId=0;
86    properties.gMap=map;
87  }
88
89  /**
90   * load markers from the server
91   *
92   * @param Map map : the map
93   */
94  this.loadMarkers = function(map)
95  {
96    var __this=this;
97    map.callId++;
98
99    datas={
100      requestId:gmaps.requestId,
101      callId:map.callId,
102      bounds:{
103          north:map.getBounds().getNorthEast().lat(),
104          east:map.getBounds().getNorthEast().lng(),
105          south:map.getBounds().getSouthWest().lat(),
106          west:map.getBounds().getSouthWest().lng()
107        },
108      width:$(map.getDiv()).width(),
109      height:$(map.getDiv()).height(),
110      distanceTreshold:20,
111      loadIndex:map.gmapsIndex,
112    };
113
114
115    $('#gmapsLoading').css('display', 'inline-block');
116    $('#gmapsNbPhotos').html('');
117
118    $.ajax(
119      {
120        type: "POST",
121        url: "plugins/GMaps/gmaps_ajax.php",
122        async: true,
123        data: { ajaxfct:"public.maps.getMarkers", datas:datas },
124        success:
125          function(msg)
126          {
127            tmp=$.parseJSON(msg);
128            if(gmaps.maps[tmp.loadIndex].gMap.callId==tmp.callId)
129            {
130              tmp.markers.sort(compareMarkers);
131              __this.applyMarkers(gmaps.maps[tmp.loadIndex].gMap, tmp.markers);
132              $('#gmapsLoading').css('display', 'none');
133              $('#gmapsNbPhotos').html('['+tmp.datas.nbPhotos+']');
134            }
135          }
136      }
137    );
138  }
139
140  /**
141   * apply markers to map
142   *
143   * @param Map map : the google map object
144   * @param Array markers : array of markers properties
145   *                        each marker is an object with properties :
146   *                          latitude, longitude, nbImg
147   */
148  this.applyMarkers = function(map, markers)
149  {
150    var __this=this;
151
152    /*
153     * deleting markers from the map only if they are not in the new list
154     */
155    if(map.markers.length>0)
156    {
157      var i=0;
158      while(i<map.markers.length)
159      {
160        newListIndex=this.markerInList(map.markers[i].uId, markers);
161        if(newListIndex==-1)
162        {
163          map.markers[i].marker.setMap(null);
164          map.markers.splice(i, 1);
165        }
166        else
167        {
168          markers.splice(newListIndex,1);
169          i++;
170        }
171      }
172    }
173
174    /*
175     * add new markers on the map
176     */
177    for(var i=0;i<markers.length;i++)
178    {
179      var marker = new google.maps.Marker(
180        {
181          position:new google.maps.LatLng(markers[i].lat, markers[i].lng),
182          map: map,
183          title:markers[i].nbImgTxt
184        }
185      );
186
187      if(map.markerImg!=null) marker.setIcon(map.markerImg);
188
189      marker.info=markers[i];
190      marker.info.displayed=0;
191
192      map.markers.push(
193        {
194          marker:marker,
195          uId:markers[i].uId
196        }
197      );
198
199      google.maps.event.addListener(
200        marker,
201        'click',
202        function ()
203        {
204          __this.displayWindowInfo(this);
205        }
206      );
207
208      for(var index=0;index<marker.info.imgTn.length;index++)
209      {
210        switch(marker.info.imgTn[index].charAt(0))
211        {
212          case 'G':
213            marker.info.imgTn[index]='./galleries/'+marker.info.imgTn[index].substr(1);
214            break;
215          case 'U':
216            marker.info.imgTn[index]='./upload/'+marker.info.imgTn[index].substr(1);
217            break;
218        }
219      }
220    }
221  }
222
223  var compareMarkers=function(m1,m2)
224  {
225    if(m1.uId<m2.uId)
226    {
227      return(-1);
228    }
229    else if(m1.uId<m2.uId)
230    {
231      return(1);
232    }
233    return(0);
234  }
235
236  this.markerInList = function(uniqueId, markerList)
237  {
238    for(var i=0;i<markerList.length;i++)
239    {
240      if(markerList[i].uId==uniqueId) return(i)
241    }
242    return(-1);
243  }
244
245  /**
246   * display the infowindow
247   *
248   * @param Marker marker : the marker
249   */
250  this.displayWindowInfo = function(marker)
251  {
252    var __this=this;
253
254    if(gmapsMM!=null && gmapsMM instanceof markupMaps) gmapsMM.closePictureInfo();
255
256    previousThumb.width=-1;
257    previousThumb.width=-1;
258
259    gmaps.currentMarker=marker;
260    gmaps.currentInfo=marker.info;
261    gmaps.infoWindow.close();
262    gmaps.infoWindow.setContent($('#iGMapsInfoWindowContent').clone().each(renameId).get(0));
263    gmaps.infoWindow.open(marker.map, marker);
264    $('#ciWALeft, #ciWARight').unbind('click');
265    $('#ciWARight').bind('click', function(event) { __this.displayPictureNext(); } );
266    $('#ciWALeft').bind('click', function(event) { __this.displayPicturePrev(); } );
267    this.displayPictureInfo(gmaps.currentInfo.displayed);
268  }
269  var renameId = function(i, e)
270  {
271    if(e.id!='') e.id='c'+e.id;
272    $(e).children().each(renameId);
273  }
274
275
276  this.closePictureInfo = function ()
277  {
278    gmaps.currentMarker=null;
279    gmaps.currentInfo=null;
280    gmaps.infoWindow.setContent('');
281    gmaps.infoWindow.close();
282    $('#ciGMIWC_img').unbind('click');
283    $('#ciWALeft, #ciWARight').unbind('click');
284  }
285
286  /**
287   *
288   */
289  this.displayPictureInfo = function(index)
290  {
291    var __index=index,
292        __this=this;
293
294    gmaps.currentInfo.displayed=index;
295    if(gmaps.currentInfo.imgName[index]=='')
296    {
297      $('#ciGMIWC_title').html('&nbsp;');
298    }
299    else
300    {
301      $('#ciGMIWC_title').html(gmaps.currentInfo.imgName[index]);
302    }
303    $('#ciGMIWC_img')
304      .attr('src', gmaps.currentInfo.imgTn[index])
305      .bind('load',
306        function (event)
307          {
308            /*
309             * this methods works but there's a terrible flick...
310             * wait to find another solution... :-/
311             * (and need to be implemented for the markupMaps object too
312             *
313            if(previousThumb.width!=-1)
314            {
315              if(previousThumb.width!=event.target.width || previousThumb.height!=event.target.height)
316              {
317                __this.displayWindowInfo(gmaps.currentMarker);
318                return(false);
319              }
320            }
321            else
322            {
323              previousThumb.width=event.target.width;
324              previousThumb.height=event.target.height;
325            }
326            */
327          }
328      );
329
330    $('#ciGMIWC_img').unbind('click');
331
332    if(gmaps.currentInfo.imgCatsUrl[index].length==1)
333    {
334      $('#ciGMIWC_img').bind('click',
335        function ()
336        {
337          window.location=gmaps.currentInfo.imgCatsUrl[gmaps.currentInfo.displayed][0];
338        }
339      );
340    }
341    else
342    {
343      $('#ciGMIWC_showcatList').html('');
344      for(var i=0;i<gmaps.currentInfo.imgCatsUrl[index].length;i++)
345      {
346        $('#ciGMIWC_showcatList')
347          .append('<li><a href="'+gmaps.currentInfo.imgCatsUrl[index][i]+'">'+gmaps.currentInfo.imgCatsNames[index][i]+'</a></li>');
348      }
349      $('#ciGMIWC_img, #ciGMIWC_showcat')
350        .bind('mouseenter', function () { $('#ciGMIWC_showcat').css('display', 'block'); } )
351        .bind('mouseleave', function () { $('#ciGMIWC_showcat').css('display', 'none'); } );
352    }
353
354    if(gmaps.currentInfo.nbImg>1)
355    {
356      $('#ciGMIWC_picnum').html((index+1)+'/'+gmaps.currentInfo.nbImgTxt);
357      $('#ciWALeft, #ciWARight').css('display', 'inline-block');
358    }
359    else
360    {
361      $('#ciGMIWC_picnum').html(gmaps.currentInfo.nbImgTxt);
362      $('#ciWALeft, #ciWARight').css('display', 'none');
363    }
364  }
365
366  /**
367   *
368   */
369  this.displayPicturePrev = function()
370  {
371    gmaps.currentInfo.displayed--;
372    if(gmaps.currentInfo.displayed<0) gmaps.currentInfo.displayed=gmaps.currentInfo.nbImg-1;
373    this.displayPictureInfo(gmaps.currentInfo.displayed);
374  }
375
376  /**
377   *
378   */
379  this.displayPictureNext = function()
380  {
381    gmaps.currentInfo.displayed++;
382    if(gmaps.currentInfo.displayed>=gmaps.currentInfo.nbImg) gmaps.currentInfo.displayed=0;
383    this.displayPictureInfo(gmaps.currentInfo.displayed);
384  }
385
386
387  /**
388   * check if zoomLevel
389   */
390  this.fitToBounds = function(bounds, mapIndex)
391  {
392    gmaps.maps[mapIndex].gMap.fitBounds(bounds);
393
394    if(gmaps.maps[mapIndex].zoomLevelMaxActivated &&
395       gmaps.maps[mapIndex].gMap.getZoom() > gmaps.maps[mapIndex].zoomLevel)
396    {
397      gmaps.maps[mapIndex].gMap.setZoom(gmaps.maps[mapIndex].zoomLevel);
398    }
399  }
400
401  this.initializeMapViewport = function(mode, mapIndex)
402  {
403    var __this=this;
404
405    if(mapIndex>-1 &&
406       ($('#'+gmaps.maps[mapIndex].id+'Content').dialog('isOpen') && mode=='loaded' || mode=='open') &&
407       (gmaps.maps[mapIndex].gMap.viewportInitialized==false)
408      )
409    {
410      /*
411       * if the container is not visible when map are built, they are
412       * not initialized correctly
413       *
414       * when dialog is opened for the first time, proceed to map
415       * finalization :
416       *  - resize
417       *  - center the map
418       *  - add handlers on events 'dragend' and 'zoom_change'
419       *    allowing to reload markers according to the new viewport
420       */
421      google.maps.event.trigger(gmaps.maps[mapIndex].gMap, 'resize');
422
423      // reduce copyright size... ^_^
424      $('#'+gmaps.maps[mapIndex].id+' span, #'+gmaps.maps[mapIndex].id+' a').css('font-size', '55.0%');
425
426
427      if(gmaps.geolocated)
428      {
429        if(gmaps.maps[mapIndex].fitToBounds)
430        {
431          this.fitToBounds(gmaps.bounds, mapIndex);
432        }
433        else
434        {
435          gmaps.maps[mapIndex].gMap.setCenter(gmaps.bounds.getCenter());
436        }
437      }
438      else
439      {
440        this.fitToBounds(gmaps.maps[mapIndex].gMap.kmlFile.getDefaultViewport(), mapIndex);
441      }
442
443      google.maps.event.addListener(
444        gmaps.maps[mapIndex].gMap,
445        'dragend',
446        function()
447        {
448          __this.loadMarkers(this);
449          $('#gmapsBoundMap').css('display', 'inline');
450          $('#gmapsBoundKml').css('display', 'inline');
451        }
452      );
453
454      google.maps.event.addListener(
455        gmaps.maps[mapIndex].gMap,
456        'zoom_changed',
457        function()
458        {
459          __this.loadMarkers(this);
460          gmaps.infoWindow.close();
461          $('#gmapsBoundMap').css('display', 'inline');
462          $('#gmapsBoundKml').css('display', 'inline');
463        }
464      );
465
466      gmaps.maps[mapIndex].gMap.viewportInitialized=true;
467      this.loadMarkers(gmaps.maps[mapIndex].gMap);
468    }
469
470
471  }
472}
473
474
475
476$(window).load(
477  function ()
478  {
479    gmapsCM=new categoryMaps();
480
481    // all maps have the same initials bounds
482    initInfoWindow();
483
484    gmaps.currentInfo=null;
485    gmaps.currentMarker=null;
486
487    gmaps.bounds = new google.maps.LatLngBounds(
488      new google.maps.LatLng(gmaps.bounds.south, gmaps.bounds.west),
489      new google.maps.LatLng(gmaps.bounds.north, gmaps.bounds.east)
490    );
491
492    gmaps.infoWindow = new google.maps.InfoWindow();
493    google.maps.event.addListener(
494     gmaps.infoWindow,
495     'closeclick',
496     function () {
497       //$('body').append($('#iGMapsInfoWindowContent'));
498       gmaps.infoWindow.setContent('');
499       $('#ciGMIWC_img').unbind('click');
500     }
501    );
502
503    for(var i=0;i<gmaps.maps.length;i++)
504    {
505      // prepare google map maps
506      gmapsCM.createMap(gmaps.maps[i], i);
507
508      // if size map depends from windows size, apply new dimensions to map
509      if(gmaps.maps[i].sizeMode=='A')
510      {
511        $('#'+gmaps.maps[i].id).css(
512          {
513            width: ($(window).width()*gmaps.popupAutomaticSize)+'px',
514            height:($(window).height()*gmaps.popupAutomaticSize)+'px'
515          }
516        );
517      }
518
519      // initialize dialog box for maps
520      $('#'+gmaps.maps[i].id+'Content').dialog(
521        {
522          autoOpen:false,
523          width:$('#'+gmaps.maps[i].id).width(),
524          height:'auto',
525          modal: true,
526          closeText:'X',
527          dialogClass: 'gmapsPopup',
528          title: gmaps.maps[i].title,
529          open: function ()
530            {
531              /*
532               * initialize map on the server side (call the 'public.maps.init'
533               * function)
534               */
535              $.ajax(
536                {
537                  type: "POST",
538                  url: "plugins/GMaps/gmaps_ajax.php",
539                  async: true,
540                  data: { ajaxfct:"public.maps.init", category:gmaps.categoryId, mapId:'n' },
541                  success:
542                    function(msg)
543                    {
544                      gmaps.requestId=msg;
545                      for(var i=0;i<gmaps.maps.length;i++)
546                      {
547                        gmapsCM.initializeMapViewport('loaded', i);
548                        //initializeMapViewport('open', $(this).data('index'));
549                      }
550                    }
551                }
552              );
553            }
554        }
555      ).data('index', i);
556
557      if(gmaps.geolocated)
558      {
559        $('div.gmapsPopup div.ui-dialog-titlebar')
560        .append('<a href="#" id="gmapsBoundMap" style="display:none;"><span>&there4;</span></a>');
561        $('#gmapsBoundMap').attr('title', gmaps.lang.boundmap).bind('click', i, function(event) { gmapsCM.fitToBounds(gmaps.bounds, event.data); $(this).css('display', 'none').blur(); return(false); } );
562      }
563
564      if(gmaps.maps[i].gMap.kmlFile!=null)
565      {
566        $('div.gmapsPopup div.ui-dialog-titlebar')
567          .append('<a href="#" id="gmapsBoundKml"><span>&sim;</span></a>');
568        $('#gmapsBoundKml').attr('title', gmaps.lang.boundkml).bind('click', i, function(event) { gmapsCM.fitToBounds(gmaps.maps[event.data].gMap.kmlFile.getDefaultViewport(), event.data); $(this).css('display', 'none').blur(); return(false); } );
569      }
570
571      $('div.gmapsPopup div.ui-dialog-titlebar')
572      .append('<span id="gmapsLoading" style="display:none;"><img src="./plugins/GrumPluginClasses/icons/processing.gif"><span>'+gmaps.lang.loading+'</span></span>');
573
574      $('#ui-dialog-title-iGMapsIconContent')
575      .append('<span id="gmapsNbPhotos"></span>');
576
577
578    }
579
580  }
581);
Note: See TracBrowser for help on using the repository browser.