root/extensions/GMaps/templates/gmaps_dialog_area_choose.tpl @ 7308

{known_script id="jquery.ui" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.core.packed.js"}
{known_script id="jquery.ui.dialog" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.dialog.packed.js"}
{known_script id="maps.google.com/api" src="http://maps.google.com/maps/api/js?sensor=false"}


{literal}
<script type="text/javascript">

/**
 * include this template in a page and use dialogChooseGMapsBox.show({options}) to display
 * the dialog box
 *
 */
dialogChooseGMapsBox = function()
{
  var bounds = {
        north:0,
        south:0,
        east:0,
        west:0
      },
      requestId = '',
      callId=0,
      dialogGMapsOptions = {
        id:'',
        eventOk:null,
        cBuilder:null,
        gMap:null,
      };


  /**
   * initialize the dialog box
   */
  var initDialogBox = function()
  {
    initializeMap();

    $.ajax(
      {
        type: "POST",
        url: "plugins/GMaps/gmaps_ajax.php",
        async: true,
        data: { ajaxfct:"public.maps.init", category:0 },
        success: function (msg)
          {
            requestId=msg;
          }
      }
    );

    $("#iDialogGMapsChoose")
    .dialog(
      {
        autoOpen: false,
        resizable: false,
        width:$(window).width()*0.8,
        height:$(window).height()*0.8,
        modal: true,
        draggable:true,
        dialogClass: 'gcBgTabSheet gcBorder',
        title: '{/literal}{"gmaps_choose_geographic_area"|@translate}{literal}',
        open: function(event, ui)
        {
          google.maps.event.trigger(dialogGMapsOptions.gMap, 'resize');

          if(bounds.north!=0 && bounds.south!=0 && bounds.east!=0 && bounds.west!=0)
          {
            dialogGMapsOptions.gMap.fitBounds(
              new google.maps.LatLngBounds(
                new google.maps.LatLng(bounds.south, bounds.west),
                new google.maps.LatLng(bounds.north, bounds.east)
              )
            );
          }
          else
          {
            dialogGMapsOptions.gMap.setZoom(2);
            dialogGMapsOptions.gMap.setCenter(new google.maps.LatLng(0, 0));
            updateBounds();
          }

          loadMarkers();
        },
        buttons:
        {
          '{/literal}{"gmaps_ok"|@translate}{literal}':
            function()
            {
              updateBounds();

              if(dialogGMapsOptions.cBuilder!=null)
              {
                setCBuilderItem(dialogGMapsOptions.id, bounds, requestId);
              }

              if(dialogGMapsOptions.eventOk!=null)
              {
                dialogGMapsOptions.eventOk(dialogGMapsOptions.id, bounds, requestId);
              }


              $(this).dialog('close');
            },
          '{/literal}{"gmaps_cancel"|@translate}{literal}':
            function()
            {
              $(this).dialog('close');
            }
        }
      }
    );

  }


  /**
   * initialize the map
   */
  var initializeMap = function ()
  {
    var latlng=new google.maps.LatLng(0, 0);

    var map = new google.maps.Map($("#iDialogGMapsMap").get(0),
      {
        mapTypeId:google.maps.MapTypeId.HYBRID,
        zoom:2,
        center:latlng,
        navigationControl: true,
        navigationControlOptions:
          {
            style:google.maps.NavigationControlStyle.ZOOM_PAN,
          },
        scaleControl: true,
        streetViewControl: false,
        mapTypeControl:true,
        mapTypeControlOptions:
          {
            style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
          },
        markerTitle:'',
      }
    );

    map.markers=new Array();
    dialogGMapsOptions.gMap=map;

    google.maps.event.addListener(
      dialogGMapsOptions.gMap,
      'dragend',
      function()
      {
        updateBounds();
        loadMarkers();
      }
    );

    google.maps.event.addListener(
      dialogGMapsOptions.gMap,
      'zoom_changed',
      function()
      {
        updateBounds();
        loadMarkers();
      }
    );
  }


  /**
   * update the bounds properties from the map bounds
   */
  var updateBounds = function ()
  {
    var mapBounds=dialogGMapsOptions.gMap.getBounds();
    bounds.north=mapBounds.getNorthEast().lat();
    bounds.south=mapBounds.getSouthWest().lat();
    bounds.east=mapBounds.getNorthEast().lng();
    bounds.west=mapBounds.getSouthWest().lng();
  }

  /**
   * set the request Id
   */
  var setRequestId = function(msg)
  {
    dialogGMapsOptions.requestId=msg;
    requestId=msg;
    dialogGMapsOptions.requestId=msg;
  }


  /**
   * load markers from the server
   */
  var loadMarkers = function ()
  {
    callId++;

    datas={
      requestId:requestId,
      callId:callId,
      bounds:{
          north:bounds.north,
          east:bounds.east,
          south:bounds.south,
          west:bounds.west
        },
      width:$(dialogGMapsOptions.gMap.getDiv()).width(),
      height:$(dialogGMapsOptions.gMap.getDiv()).height(),
      distanceTreshold:20,
      levelInfo:0
    }

    $('#iDialogGMapNfo').html('<img src="./plugins/GrumPluginClasses/icons/processing.gif"><span>{/literal}{"gmaps_loading"|@translate}{literal}</span>');

    $.ajax(
      {
        type: "POST",
        url: "plugins/GMaps/gmaps_ajax.php",
        async: true,
        data: { ajaxfct:"public.maps.getMarkers", datas:datas },
        success:
          function(msg)
          {
            tmp=$.parseJSON(msg);
            if(tmp.callId==callId)
            {
              tmp.markers.sort(compareMarkers);
              applyMarkers(tmp.markers);
              $('#iDialogGMapNfo').html(tmp.datas.nbPhotos);
            }
          }
      }
    );
  }

  /**
   * apply markers to map
   *
   * @param Array markers : array of markers properties
   *                        each marker is an object with properties :
   *                          latitude, longitude, nbImages
   */
  function applyMarkers(markers)
  {
    /*
     * deleting markers from the map only if they are not in the new list
     */
    if(dialogGMapsOptions.gMap.markers.length>0)
    {
      var i=0;
      while(i<dialogGMapsOptions.gMap.markers.length)
      {
        newListIndex=markerInList(dialogGMapsOptions.gMap.markers[i].uId, markers);
        if(newListIndex==-1)
        {
          dialogGMapsOptions.gMap.markers[i].marker.setMap(null);
          dialogGMapsOptions.gMap.markers.splice(i, 1);
        }
        else
        {
          markers.splice(newListIndex,1);
          i++;
        }
      }
    }

    /*
     * add new markers on the map
     */
    for(var i=0;i<markers.length;i++)
    {
      var marker = new google.maps.Marker(
        {
          position:new google.maps.LatLng(markers[i].lat, markers[i].lng),
          map: dialogGMapsOptions.gMap,
          title:markers[i].nbImgTxt
        }
      );

      marker.info=markers[i];
      marker.info.displayed=0;

      dialogGMapsOptions.gMap.markers.push(
        {
          marker:marker,
          uId:markers[i].uId
        }
      );
    }
  }

  function compareMarkers(m1,m2)
  {
    if(m1.uId<m2.uId)
    {
      return(-1);
    }
    else if(m1.uId<m2.uId)
    {
      return(1);
    }
    return(0);
  }

  function markerInList(uId, markerList)
  {
    for(var i=0;i<markerList.length;i++)
    {
      if(markerList[i].uId==uId) return(i)
    }
    return(-1);
  }


  /**
   * the show() function display and manage a dialog box to choose
   * a geographic area
   *
   * @param options : properties to manage the dialog box
   *                  - bounds : an object with properties 'north', 'south', 'east'
   *                             and 'west'
   *                  - id : a string to identify a DOM object ; this parameter
   *                         is given to the callback when the OK button is pushed
   *                  - eventOK : a callback function, with 2 parameters : id of
   *                              the given DOM object and the bounds object
   *                  - cBuilder : a criteriaBuilder object
   *                               if set, the dialog box manage automaticaly
   *                               the criteria builder interface
   */
  this.show = function (options)
  {
    showDialog(options);
  }

  /**
   * private function used to show the dialog box
   */
  var showDialog = function(options)
  {
    if(options.bounds!=null)
    {
      bounds=options.bounds;
    }
    else
    {
      bounds={
        north:0,
        south:0,
        east:0,
        west:0
      };
    }

    if(options.id!=null)
    {
      dialogGMapsOptions.id=options.id;
    }
    else
    {
      dialogGMapsOptions.id='';
    }

    if(options.eventOk!=null)
    {
      dialogGMapsOptions.eventOk=options.eventOk;
    }

    if(options.cBuilder!=null)
    {
      dialogGMapsOptions.cBuilder=options.cBuilder;
      dialogGMapsOptions.cBuilder.doAction('setOptions',
        {
          onEdit:function (e) { editGA(e.data); },
          onDelete:function (e) { deleteGA(e.data); },
        }
      );
    }

    $("#iDialogGMapsChoose").dialog('open');
  }



  /**
   * manage the 'edit' button from criteria builder interface
   * @param String itemId : the itemId
   */
  var editGA = function (itemId)
  {
    extraData=dialogGMapsOptions.cBuilder.doAction('getExtraData', itemId);
    showDialog(
      {
        id:itemId,
        bounds:extraData.param.bounds,
        requestId:extraData.param.requestId
      }
    );
  }

  /**
   * manage the 'delete' button from criteria builder interface
   * @param String itemId : the itemId
   */
  var deleteGA = function (itemId)
  {
    dialogGMapsOptions.cBuilder.doAction('delete', itemId);
  }

  /**
   * set the content for the cBuilder item
   */
  var setCBuilderItem = function(id, bounds)
  {

    var content="<div>{/literal}{'gmaps_geographic_coords_between'|@translate}{literal}<br>";
    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>";

    if(bounds.east<bounds.west)
    {
      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>";
    }
    else
    {
      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>";
    }
    content+="</div>";


    if(id=='')
    {
      //no id:add a new item in the list
      dialogGMapsOptions.cBuilder.doAction('add', content, criteriaBuilder.makeExtendedData('GMaps', {bounds:$.extend({}, bounds), requestId:requestId } ) );
    }
    else
    {
      // update item
      dialogGMapsOptions.cBuilder.doAction('edit', id,  content, criteriaBuilder.makeExtendedData('GMaps', {bounds:$.extend({}, bounds), requestId:requestId } ) );
    }
  }

  /**
   * convert a decimal degree to D°M'S'
   * note : negative values are converted in positive values, assuming North/South
   * and East/West are managed outside this function
   *
   * @param Float $value : the value to convert
   * @return String : value converted in DMS
   */
  var DDtoDMS = function (value)
  {
    value=Math.abs(value);
    degrees=Math.floor(value);
    tmp=(value-degrees)*60;
    minutes=Math.floor(tmp);
    seconds=Math.round((tmp-minutes)*6000)/100;
    return(degrees+"° "+minutes+"' "+seconds+'"');
  }

  initDialogBox();
}


</script>
{/literal}

<div id="iDialogGMapsChoose" style='display:none;'>
  <div id='iDialogGMapNfo'>&nbsp;</div>
  <div id='iDialogGMapsMap' style='width:95%; height:95%;margin-left:auto;margin-right:auto;border:1px solid;'></div>
</div>