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

Last change on this file since 15345 was 15345, checked in by grum, 12 years ago

feature:2638 - Compatibility with Piwigo 2.4
File size: 15.6 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        marker.info.imgTn[index]=replaceRoot(marker.info.imgTn[index]);
211      }
212    }
213  }
214
215  var replaceRoot=function(value)
216  {
217    var returned=value;
218    switch(value.charAt(0))
219    {
220      case 'G':
221        returned='./_data/i/galleries/'+value.substr(1);
222        break;
223      case 'I':
224        returned='./i.php?/galleries/'+value.substr(1);
225        break;
226      case 'P':
227        returned='./picture.php?/'+value.substr(1);
228        break;
229    }
230    return(returned);
231  }
232
233  var compareMarkers=function(m1,m2)
234  {
235    if(m1.uId<m2.uId)
236    {
237      return(-1);
238    }
239    else if(m1.uId<m2.uId)
240    {
241      return(1);
242    }
243    return(0);
244  }
245
246  this.markerInList = function(uniqueId, markerList)
247  {
248    for(var i=0;i<markerList.length;i++)
249    {
250      if(markerList[i].uId==uniqueId) return(i)
251    }
252    return(-1);
253  }
254
255  /**
256   * display the infowindow
257   *
258   * @param Marker marker : the marker
259   */
260  this.displayWindowInfo = function(marker)
261  {
262    var __this=this;
263
264    if(gmapsMM!=null && gmapsMM instanceof markupMaps) gmapsMM.closePictureInfo();
265
266    previousThumb.width=-1;
267    previousThumb.width=-1;
268
269    gmaps.currentMarker=marker;
270    gmaps.currentInfo=marker.info;
271    gmaps.infoWindow.close();
272    gmaps.infoWindow.setContent($('#iGMapsInfoWindowContent').clone().each(renameId).get(0));
273    gmaps.infoWindow.open(marker.map, marker);
274    $('#ciWALeft, #ciWARight').unbind('click');
275    $('#ciWARight').bind('click', function(event) { __this.displayPictureNext(); } );
276    $('#ciWALeft').bind('click', function(event) { __this.displayPicturePrev(); } );
277    this.displayPictureInfo(gmaps.currentInfo.displayed);
278  }
279  var renameId = function(i, e)
280  {
281    if(e.id!='') e.id='c'+e.id;
282    $(e).children().each(renameId);
283  }
284
285
286  this.closePictureInfo = function ()
287  {
288    gmaps.currentMarker=null;
289    gmaps.currentInfo=null;
290    gmaps.infoWindow.setContent('');
291    gmaps.infoWindow.close();
292    $('#ciGMIWC_img').unbind('click');
293    $('#ciWALeft, #ciWARight').unbind('click');
294  }
295
296  /**
297   *
298   */
299  this.displayPictureInfo = function(index)
300  {
301    var __index=index,
302        __this=this;
303
304    gmaps.currentInfo.displayed=index;
305    if(gmaps.currentInfo.imgName[index]=='')
306    {
307      $('#ciGMIWC_title').html('&nbsp;');
308    }
309    else
310    {
311      $('#ciGMIWC_title').html(gmaps.currentInfo.imgName[index]);
312    }
313    $('#ciGMIWC_img')
314      .attr('src', gmaps.currentInfo.imgTn[index])
315      .bind('load',
316        function (event)
317          {
318            /*
319             * this methods works but there's a terrible flick...
320             * wait to find another solution... :-/
321             * (and need to be implemented for the markupMaps object too
322             *
323            if(previousThumb.width!=-1)
324            {
325              if(previousThumb.width!=event.target.width || previousThumb.height!=event.target.height)
326              {
327                __this.displayWindowInfo(gmaps.currentMarker);
328                return(false);
329              }
330            }
331            else
332            {
333              previousThumb.width=event.target.width;
334              previousThumb.height=event.target.height;
335            }
336            */
337          }
338      );
339
340    $('#ciGMIWC_img').unbind('click');
341
342    if(gmaps.currentInfo.imgCatsUrl[index].length==1)
343    {
344      $('#ciGMIWC_img').bind('click',
345        function ()
346        {
347          window.location=replaceRoot(gmaps.currentInfo.imgCatsUrl[gmaps.currentInfo.displayed][0]);
348        }
349      );
350    }
351    else
352    {
353      $('#ciGMIWC_showcatList').html('');
354      for(var i=0;i<gmaps.currentInfo.imgCatsUrl[index].length;i++)
355      {
356        $('#ciGMIWC_showcatList')
357          .append('<li><a href="'+replaceRoot(gmaps.currentInfo.imgCatsUrl[index][i])+'">'+gmaps.currentInfo.imgCatsNames[index][i]+'</a></li>');
358      }
359      $('#ciGMIWC_img, #ciGMIWC_showcat')
360        .bind('mouseenter', function () { $('#ciGMIWC_showcat').css('display', 'block'); } )
361        .bind('mouseleave', function () { $('#ciGMIWC_showcat').css('display', 'none'); } );
362    }
363
364    if(gmaps.currentInfo.nbImg>1)
365    {
366      $('#ciGMIWC_picnum').html((index+1)+'/'+gmaps.currentInfo.nbImgTxt);
367      $('#ciWALeft, #ciWARight').css('display', 'inline-block');
368    }
369    else
370    {
371      $('#ciGMIWC_picnum').html(gmaps.currentInfo.nbImgTxt);
372      $('#ciWALeft, #ciWARight').css('display', 'none');
373    }
374  }
375
376  /**
377   *
378   */
379  this.displayPicturePrev = function()
380  {
381    gmaps.currentInfo.displayed--;
382    if(gmaps.currentInfo.displayed<0) gmaps.currentInfo.displayed=gmaps.currentInfo.nbImg-1;
383    this.displayPictureInfo(gmaps.currentInfo.displayed);
384  }
385
386  /**
387   *
388   */
389  this.displayPictureNext = function()
390  {
391    gmaps.currentInfo.displayed++;
392    if(gmaps.currentInfo.displayed>=gmaps.currentInfo.nbImg) gmaps.currentInfo.displayed=0;
393    this.displayPictureInfo(gmaps.currentInfo.displayed);
394  }
395
396
397  /**
398   * check if zoomLevel
399   */
400  this.fitToBounds = function(bounds, mapIndex)
401  {
402    gmaps.maps[mapIndex].gMap.fitBounds(bounds);
403
404    if(gmaps.maps[mapIndex].zoomLevelMaxActivated &&
405       gmaps.maps[mapIndex].gMap.getZoom() > gmaps.maps[mapIndex].zoomLevel)
406    {
407      gmaps.maps[mapIndex].gMap.setZoom(gmaps.maps[mapIndex].zoomLevel);
408    }
409  }
410
411  this.initializeMapViewport = function(mode, mapIndex)
412  {
413    var __this=this;
414
415    if(mapIndex>-1 &&
416       ($('#'+gmaps.maps[mapIndex].id+'Content').dialog('isOpen') && mode=='loaded' || mode=='open') &&
417       (gmaps.maps[mapIndex].gMap.viewportInitialized==false)
418      )
419    {
420      /*
421       * if the container is not visible when map are built, they are
422       * not initialized correctly
423       *
424       * when dialog is opened for the first time, proceed to map
425       * finalization :
426       *  - resize
427       *  - center the map
428       *  - add handlers on events 'dragend' and 'zoom_change'
429       *    allowing to reload markers according to the new viewport
430       */
431      google.maps.event.trigger(gmaps.maps[mapIndex].gMap, 'resize');
432
433      // reduce copyright size... ^_^
434      $('#'+gmaps.maps[mapIndex].id+' span, #'+gmaps.maps[mapIndex].id+' a').css('font-size', '55.0%');
435
436
437      if(gmaps.geolocated)
438      {
439        if(gmaps.maps[mapIndex].fitToBounds)
440        {
441          this.fitToBounds(gmaps.bounds, mapIndex);
442        }
443        else
444        {
445          gmaps.maps[mapIndex].gMap.setCenter(gmaps.bounds.getCenter());
446        }
447      }
448      else
449      {
450        this.fitToBounds(gmaps.maps[mapIndex].gMap.kmlFile.getDefaultViewport(), mapIndex);
451      }
452
453      google.maps.event.addListener(
454        gmaps.maps[mapIndex].gMap,
455        'dragend',
456        function()
457        {
458          __this.loadMarkers(this);
459          $('#gmapsBoundMap').css('display', 'inline');
460          $('#gmapsBoundKml').css('display', 'inline');
461        }
462      );
463
464      google.maps.event.addListener(
465        gmaps.maps[mapIndex].gMap,
466        'zoom_changed',
467        function()
468        {
469          __this.loadMarkers(this);
470          gmaps.infoWindow.close();
471          $('#gmapsBoundMap').css('display', 'inline');
472          $('#gmapsBoundKml').css('display', 'inline');
473        }
474      );
475
476      gmaps.maps[mapIndex].gMap.viewportInitialized=true;
477      this.loadMarkers(gmaps.maps[mapIndex].gMap);
478    }
479
480
481  }
482}
483
484
485
486$(window).load(
487  function ()
488  {
489    gmapsCM=new categoryMaps();
490
491    // all maps have the same initials bounds
492    initInfoWindow();
493
494    gmaps.currentInfo=null;
495    gmaps.currentMarker=null;
496
497    gmaps.bounds = new google.maps.LatLngBounds(
498      new google.maps.LatLng(gmaps.bounds.south, gmaps.bounds.west),
499      new google.maps.LatLng(gmaps.bounds.north, gmaps.bounds.east)
500    );
501
502    gmaps.infoWindow = new google.maps.InfoWindow();
503    google.maps.event.addListener(
504     gmaps.infoWindow,
505     'closeclick',
506     function () {
507       //$('body').append($('#iGMapsInfoWindowContent'));
508       gmaps.infoWindow.setContent('');
509       $('#ciGMIWC_img').unbind('click');
510     }
511    );
512
513    for(var i=0;i<gmaps.maps.length;i++)
514    {
515      // prepare google map maps
516      gmapsCM.createMap(gmaps.maps[i], i);
517
518      // if size map depends from windows size, apply new dimensions to map
519      if(gmaps.maps[i].sizeMode=='A')
520      {
521        $('#'+gmaps.maps[i].id).css(
522          {
523            width: ($(window).width()*gmaps.popupAutomaticSize)+'px',
524            height:($(window).height()*gmaps.popupAutomaticSize)+'px'
525          }
526        );
527      }
528
529      // initialize dialog box for maps
530      $('#'+gmaps.maps[i].id+'Content').dialog(
531        {
532          autoOpen:false,
533          width:$('#'+gmaps.maps[i].id).width(),
534          height:'auto',
535          modal: true,
536          closeText:'X',
537          dialogClass: 'gmapsPopup',
538          title: gmaps.maps[i].title,
539          open: function ()
540            {
541              /*
542               * initialize map on the server side (call the 'public.maps.init'
543               * function)
544               */
545              $.ajax(
546                {
547                  type: "POST",
548                  url: "plugins/GMaps/gmaps_ajax.php",
549                  async: true,
550                  data: { ajaxfct:"public.maps.init", category:gmaps.categoryId, mapId:'n' },
551                  success:
552                    function(msg)
553                    {
554                      gmaps.requestId=msg;
555                      for(var i=0;i<gmaps.maps.length;i++)
556                      {
557                        gmapsCM.initializeMapViewport('loaded', i);
558                        //initializeMapViewport('open', $(this).data('index'));
559                      }
560                    }
561                }
562              );
563            }
564        }
565      ).data('index', i);
566
567      if(gmaps.geolocated)
568      {
569        $('div.gmapsPopup div.ui-dialog-titlebar')
570        .append('<a href="#" id="gmapsBoundMap" style="display:none;"><span>&there4;</span></a>');
571        $('#gmapsBoundMap').attr('title', gmaps.lang.boundmap).bind('click', i, function(event) { gmapsCM.fitToBounds(gmaps.bounds, event.data); $(this).css('display', 'none').blur(); return(false); } );
572      }
573
574      if(gmaps.maps[i].gMap.kmlFile!=null)
575      {
576        $('div.gmapsPopup div.ui-dialog-titlebar')
577          .append('<a href="#" id="gmapsBoundKml"><span>&sim;</span></a>');
578        $('#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); } );
579      }
580
581      $('div.gmapsPopup div.ui-dialog-titlebar')
582      .append('<span id="gmapsLoading" style="display:none;"><img src="./plugins/GrumPluginClasses/icons/processing.gif"><span>'+gmaps.lang.loading+'</span></span>');
583
584      $('#ui-dialog-title-iGMapsIconContent')
585      .append('<span id="gmapsNbPhotos"></span>');
586
587
588    }
589
590  }
591);
Note: See TracBrowser for help on using the repository browser.