X-Git-Url: http://git.onelab.eu/?a=blobdiff_plain;f=plugins%2Fgooglemap%2Fgooglemap.js;h=8c3c09582f074e910ac40559922c635aef767dd2;hb=f89424cffcb881206feeb0506705c470d4a73092;hp=2b0b88acd2cdaac5444c1e60e2cdf097967f4666;hpb=c0c7175e6883ad9bc746692e7c71202e64ec2351;p=myslice.git diff --git a/plugins/googlemap/googlemap.js b/plugins/googlemap/googlemap.js index 2b0b88ac..8c3c0958 100644 --- a/plugins/googlemap/googlemap.js +++ b/plugins/googlemap/googlemap.js @@ -4,278 +4,351 @@ * License: GPLv3 */ -// xxx TODO -- this one could use a bit of cleaning like what was done for the first plugins -// especially wrt using 'instance' and 'data' in such a confusing way +/* + * It's a best practice to pass jQuery to an IIFE (Immediately Invoked Function + * Expression) that maps it to the dollar sign so it can't be overwritten by + * another library in the scope of its execution. + */ -(function( jQuery ){ +(function($){ - var methods = { - init : function( options ) { + // routing calls + jQuery.fn.GoogleMap = function( method ) { + if ( methods[method] ) { + return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); + } else if ( typeof method === 'object' || ! method ) { + return methods.init.apply( this, arguments ); + } else { + jQuery.error( 'Method ' + method + ' does not exist on jQuery.GoogleMap' ); + } + }; - return this.each(function(){ - - var $this = jQuery(this), - data = $this.data('GoogleMap'), GoogleMap = jQuery('
', {text : $this.attr('title')}); - - // If the plugin hasn't been initialized yet - if ( ! data ) { + /*************************************************************************** + * Public methods + ***************************************************************************/ + + var methods = { + + /** + * @brief Plugin initialization + * @param options : an associative array of setting values + * @return : a jQuery collection of objects on which the plugin is + * applied, which allows to maintain chainability of calls + */ + init : function( options ) { + + return this.each(function(){ - /* Plugin initialization */ + var $this = $(this); - //google.load('maps', '3', { other_params: 'sensor=false' }); - //google.setOnLoadCallback(initialize); + /* An object that will hold private variables and methods */ + var plugin = new GoogleMaps(options); + $this.data('Manifold', plugin); - $this.data('map', null); - $this.data('markerCluster', null); - $this.data('markers', []); + plugin.initialize(); - var myLatlng = new google.maps.LatLng(options.latitude, options.longitude); - var myOptions = { - zoom: options.zoom, - center: myLatlng, - mapTypeId: google.maps.MapTypeId.ROADMAP - } - - var map = new google.maps.Map(document.getElementById("map"), myOptions); - $this.data('map', map); + /* Events */ + $this.on('show.GoogleMaps', methods.show); + + $this.set_query_handler(options.query_uuid, plugin.query_handler); + $this.set_record_handler(options.query_uuid, plugin.record_handler); + $this.set_record_handler(options.query_all_uuid, plugin.record_handler_all); + + }); // this.each + }, // init + + /** + * @brief Plugin destruction + * @return : a jQuery collection of objects on which the plugin is + * applied, which allows to maintain chainability of calls + */ + destroy : function( ) { + + return this.each(function() { + var $this = $(this); + var hazelnut = $this.data('Manifold'); - /* End of plugin initialization */ + // Unbind all events using namespacing + $(window).unbind('Manifold'); - jQuery(this).data('GoogleMap', { - plugin_uuid: options.plugin_uuid, - query_uuid: options.query_uuid, - target : $this, - current_resources: Array(), - GoogleMap : GoogleMap + // Remove associated data + hazelnut.remove(); + $this.removeData('Manifold'); }); - /* Events */ - $this.on('show.GoogleMaps', methods.show); - - - /* Subscribe to query updates */ - jQuery.subscribe('/results/' + options.query_uuid + '/changed', {instance: $this}, update_map); - jQuery.subscribe('/update-set/' + options.query_uuid, {instance: $this}, on_resource_changed); - jQuery.subscribe('/query/' + options.query_uuid + '/changed', {instance: $this}, query_changed); - - //data = jQuery(this).data(); - - // TODO: Change the status of a node based on the actions in GoogleMap plugin or in other plugins (e.g. DataTables) - // Can we publish a value in results row['sliver'] ??? - // Today, the value is attached or undefined - // But can we think about a added/removed status ??? - // This plugin would update the map based on the results published - - } - }); - }, - destroy : function( ) { - - return this.each(function(){ - var $this = jQuery(this), data = $this.data('GoogleMap'); - jQuery(window).unbind('GoogleMap'); - data.GoogleMap.remove(); - $this.removeData('GoogleMap'); - }) - - }, -/* - reposition : function( ) { // ... }, - update : function( ) { // ... }, - hide : function( ) { // ... }, -*/ - show : function( content ) { - google.maps.event.trigger(map, 'resize'); - } - }; + }, // destroy - jQuery.fn.GoogleMap = function( method ) { - /* Method calling logic */ - if ( methods[method] ) { - return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); - } else if ( typeof method === 'object' || ! method ) { - return methods.init.apply( this, arguments ); - } else { - jQuery.error( 'Method ' + method + ' does not exist on jQuery.GoogleMap' ); - } + show : function( ) { + google.maps.event.trigger(map, 'resize'); + } // show - }; + }; // var methods; - /* Private methods */ - function query_changed(e,query){ - var data = e.data.instance.data(); - /* Compare current and advertised query to get added and removed fields */ - previous_query=data.current_query; - /* Save the query as the current query */ - data.current_query=query; - - var rows=[]; - if(typeof(data.results)!="undefined" && data.results.length>0){ - jQuery.each(data.results, function(i, row){ - jQuery.each(query.filter, function (idx, filter){ - if(get_value(row[filter[0]])==filter[2]){ - rows.push(row); - } - }); - }); - data.markerCluster=[]; - data.markers=[]; - var myLatlng = new google.maps.LatLng(34.397, 150.644); - var myOptions = { - zoom: 2, - center: myLatlng, - mapTypeId: google.maps.MapTypeId.ROADMAP - } - map = new google.maps.Map(jQuery('#map')[0],myOptions); - data.map=map; - //map.clearMarkers(); - update_map(e, rows); - } - } - function update_map(e, rows) { - var data = e.data.instance.data(); - var instance_ = e.data.instance; - //$plugindiv.closest('.need-spin').spin(false); - instance_.closest('.need-spin').spin(false); + /*************************************************************************** + * Plugin object + ***************************************************************************/ + function GoogleMaps(options) + { + /* member variables */ + this.options = options; - if (rows === undefined || !rows || rows.length==0) { - messages.warning ("Empty result in googlemap.update_map - nothing to show"); - return; - } + // query status + this.received_all = false; + this.received_set = false; + this.in_set_buffer = Array(); + + var object = this; + + /** + */ + this.initialize = function() { + this.map = null; + this.markerCluster = null; + this.markers = []; + this.coords = new Array(); - if(rows.length==0) { - rows=data.results; + var myLatlng = new google.maps.LatLng(options.latitude, options.longitude); + var myOptions = { + zoom: options.zoom, + center: myLatlng, + mapTypeId: google.maps.MapTypeId.ROADMAP } + + this.map = new google.maps.Map(document.getElementById("map"), myOptions); + this.infowindow = new google.maps.InfoWindow(); + } - if(typeof(data.results)=="undefined" || data.results==null){ - data.results=rows; + /** + */ + this.new_record = function(record) + { + + // get the coordinates + var latitude=get_value(record['latitude']); + var longitude=get_value(record['longitude']); + var hash = latitude + longitude; + + // check to see if we've seen this hash before + if(this.coords[hash] == null) { + // get coordinate object + var myLatlng = new google.maps.LatLng(latitude, longitude); + // store an indicator that we've seen this point before + this.coords[hash] = 1; + } else { + // add some randomness to this point 1500 = 100 meters, 15000 = 10 meters + var lat = latitude + (Math.random() -.5) / 1500; + var lng = longitude + (Math.random() -.5) / 1500; + + // get the coordinate object + var myLatlng = new google.maps.LatLng(lat, lng); + } + // If the node is attached to the slice, action will be Remove; else action will be add to slice + if (typeof(record['sliver']) != 'undefined') { + data.current_resources.push(record['urn']); + action="del"; + action_class="ui-icon-circle-minus"; + action_message="Remove from slice"; + }else{ + action="add"; + action_class="ui-icon-circle-plus"; + action_message="Add to slice"; + } + // XXX not working + if (!(record['latitude'])) { + return true; } - var map = data.map; - var markerCluster = data.markerCluster; - var markers = data.markers; - var coords = new Array(); - var infowindow = new google.maps.InfoWindow(); - /* - if(typeof(markers)!="undefined" && markers.length>0){ - map.clearMarkers(); - }*/ - - data.current_resources = Array(); - - jQuery.each(data.results, function(i, result){ - // get the coordinates - var latitude=get_value(result['latitude']); - var longitude=get_value(result['longitude']); - var hash = latitude + longitude; - - // check to see if we've seen this hash before - if(coords[hash] == null) { - // get coordinate object - var myLatlng = new google.maps.LatLng(latitude, longitude); - // store an indicator that we've seen this point before - coords[hash] = 1; - } else { - // add some randomness to this point 1500 = 100 meters, 15000 = 10 meters - var lat = latitude + (Math.random() -.5) / 1500; - var lng = longitude + (Math.random() -.5) / 1500; - - // get the coordinate object - var myLatlng = new google.maps.LatLng(lat, lng); - } - // If the node is attached to the slice, action will be Remove; else action will be add to slice - if (typeof(result['sliver']) != 'undefined') { - data.current_resources.push(result['urn']); - action="del"; - action_class="ui-icon-circle-minus"; - action_message="Remove from slice"; - }else{ - action="add"; - action_class="ui-icon-circle-plus"; - action_message="Add to slice"; - } - // XXX not working - if (!(result['latitude'])) { - return true; - } - //jQuery(".map-button").click(button_click); - if(jQuery.inArray(result,rows)>-1){ - var marker = new google.maps.Marker({ - position: myLatlng, - title: get_value(result['ip']), - // This should be done by the rendering - content: '

Agent: ' + get_value(result['ip']) + ' (' + get_value(result['urn']) + ')
Platform: ' + get_value(result['platform'])+'

' + - '
'+ - ''+action_message+ - '
' - }); - - google.maps.event.addListener(marker, 'click', function() { - infowindow.content = this.content; - infowindow.open(map, this); - // onload of the infowindow on the map, bind a click on a button - google.maps.event.addListener(infowindow, 'domready', function() { - jQuery('.map-button').unbind('click'); - jQuery(".map-button").click({instance: instance_}, button_click); - }); - }); - markers.push(marker); + //jQuery(".map-button").click(button_click); + //if(jQuery.inArray(record, rows)>-1){ + var marker = new google.maps.Marker({ + position: myLatlng, + title: get_value(record['hostname']), + // This should be done by the rendering + content: '

Agent: ' + get_value(record['ip']) + ' (' + get_value(record['resource_hrn']) + ')
Platform: ' + get_value(record['platform'])+'

' + + '
'+ + ''+action_message+ + '
' + }); + + this.addInfoWindow(marker, object.map); + object.markers.push(marker); + //} + + }; + + this.addInfoWindow = function(marker, map) { + google.maps.event.addListener(marker, 'click', function () { + if(object.infowindow){ + object.infowindow.close(); } + object.infowindow.setContent(marker.content);// = new google.maps.InfoWindow({ content: marker.content }); + object.infowindow.open(map, marker); + // onload of the infowindow on the map, bind a click on a button + google.maps.event.addListener(object.infowindow, 'domready', function() { + jQuery('.map-button').unbind('click'); +// jQuery(".map-button").click({instance: instance_, infoWindow: object.infowindow}, button_click); + }); }); - markerCluster = new MarkerClusterer(map, markers, {zoomOnClick: false}); - google.maps.event.addListener(markerCluster, "clusterclick", function (cluster) { - var markers = cluster.getMarkers(); - var bounds = new google.maps.LatLngBounds(); - /* - * date: 24/05/2012 - * author: lbaron - * Firefox JS Error - replaced $.each by JQuery.each - */ - jQuery.each(markers, function(i, marker){ - bounds.extend(marker.getPosition()); + } + + + this.set_checkbox = function(record) + { + // XXX urn should be replaced by the key + // XXX we should enforce that both queries have the same key !! + //checkbox_id = "#hazelnut-checkbox-" + object.options.plugin_uuid + "-" + unfold.escape_id(record[ELEMENT_KEY].replace(/\\/g, '')) + //$(checkbox_id, object.table.fnGetNodes()).attr('checked', true); + } + + this.record_handler = function(e, event_type, record) + { + // elements in set + switch(event_type) { + case NEW_RECORD: + /* NOTE in fact we are doing a join here */ + if (object.received_all) + // update checkbox for record + object.set_checkbox(record); + else + // store for later update of checkboxes + object.in_set_buffer.push(record); + break; + case CLEAR_RECORDS: + // nothing to do here + break; + case IN_PROGRESS: + manifold.spin($(this)); + break; + case DONE: + if (object.received_all) + manifold.spin($(this), false); + object.received_set = true; + break; + } + }; + + this.record_handler_all = function(e, event_type, record) + { + // all elements + switch(event_type) { + case NEW_RECORD: + // Add the record to the table + object.new_record(record); + break; + case CLEAR_RECORDS: + // object.table.fnClearTable(); + break; + case IN_PROGRESS: + manifold.spin($(this)); + break; + case DONE: + + // MarkerClusterer + object.markerCluster = new MarkerClusterer(object.map, object.markers, {zoomOnClick: false}); + google.maps.event.addListener(object.markerCluster, "clusterclick", function (cluster) { + var markers = cluster.getMarkers(); + var bounds = new google.maps.LatLngBounds(); + /* + * date: 24/05/2012 + * author: lbaron + * Firefox JS Error - replaced $.each by JQuery.each + */ + jQuery.each(markers, function(i, marker){ + bounds.extend(marker.getPosition()); + }); + + //map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); + object.map.fitBounds(bounds); }); - //map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); - map.fitBounds(bounds); - }); - data.markerCluster=markerCluster; + + if (object.received_set) { + /* XXX needed ? XXX We uncheck all checkboxes ... */ + $("[id^='datatables-checkbox-" + object.options.plugin_uuid +"']").attr('checked', false); + + /* ... and check the ones specified in the resource list */ + $.each(object.in_set_buffer, function(i, record) { + object.set_checkbox(record); + }); + + manifold.spin($(this), false); + } + object.received_all = true; + break; + } + }; + + + this.query_handler = function(e, event_type, query) + { + // This replaces the complex set_query function + // The plugin does not need to remember the query anymore + switch(event_type) { + // Filters + case FILTER_ADDED: + case FILTER_REMOVED: + case CLEAR_FILTERS: + // XXX Here we might need to maintain the list of filters ! + /* Process updates in filters / current_query must be updated before this call for filtering ! */ + object.table.fnDraw(); + break; + + // Fields + /* Hide/unhide columns to match added/removed fields */ + case FIELD_ADDED: + var object = this; + $.each(added_fields, function (index, field) { + var index = object.getColIndex(field,cols); + if(index != -1) + object.table.fnSetColumnVis(index, true); + }); + break; + case FIELD_REMOVED: + var object = this; + $.each(removed_fields, function (index, field) { + var index = object.getColIndex(field,cols); + if(index != -1) + object.table.fnSetColumnVis(index, false); + }); + break; + case CLEAR_FIELDS: + alert('GoogleMaps::clear_fields() not implemented'); + break; + } // switch + + } + function button_click(e){ - var data = e.data.instance.data().GoogleMap; var op_value=this.id.split("/"); if(op_value.length>0){ - jQuery.publish('selected', op_value[0]+'/'+op_value[1]); var value = op_value[1]; - - if (op_value[0] == 'add') { - data.current_resources.push(value); - } else { - tmp = jQuery.grep(data.current_resources, function(x) { return x != value; }); - data.current_resources = tmp; - } - - /* inform slice that our selected resources have changed */ - jQuery.publish('/update-set/' + data.query_uuid, [data.current_resources, true, e.data.instance]); + manifold.raise_event(object.options.query_uuid, (op_value[0] == 'add')?SET_ADD:SET_REMOVED, value); } - } - - function on_resource_changed(e, resources, instance) - { - /* TODO OPENLAB : this query determines which checkboxes must be checked */ - if (instance == e.data.instance) - return; - data = e.data.instance.data().GoogleMap; - - previous_resources = data.current_resources; - data.current_resources = resources; - - /* TODO We uncheck all checkboxes ... */ - //jQuery('datatables-checkbox-' + data.options.plugin_uuid).attr('checked', false); - /* ... and check the ones specified in the resource list */ - //jQuery.each(data.current_resources, function(index, urn) { - // jQuery('#datatables-checkbox-' + data.options.plugin_uuid + "-" + urn).attr('checked', true) - //}); - - } + } // function button_click() + } + + // clear and replace +// jQuery.each(data.results, function(i, row){ +// jQuery.each(query.filter, function (idx, filter){ +// if(get_value(row[filter[0]])==filter[2]){ +// rows.push(row); +// } +// }); +// }); +// data.markerCluster=[]; +// data.markers=[]; +// var myLatlng = new google.maps.LatLng(34.397, 150.644); +// var myOptions = { +// zoom: 2, +// center: myLatlng, +// mapTypeId: google.maps.MapTypeId.ROADMAP +// } +// map = new google.maps.Map(jQuery('#map')[0],myOptions); +// data.map=map; +// //map.clearMarkers(); +// update_map(e, rows); +// } +// } })( jQuery );