library/js/clickmap.js

   1 var clickmap = function( args ) {
   2
   3         var f = true;
   4         var counter = 0;
   5
   6         var fn_buildMarker = function( x, y, pos, annotation ) {
   7             var legendItem = $("<li class='legend-item'><b>" + pos + "</b> " + decodeURIComponent(annotation) + "</li>");
   8                 $(".legend .body ul").append( legendItem );
   9
  10                 var marker = $(".marker-template").clone();
  11                     marker.attr("data-x", x).attr("data-y", y).attr("data-pos", pos).attr("id", new Date().getTime() ).attr("class", "marker")
  12                           .attr("style", "left:" + x + "px; top:" + y + "px;" )
  13                           .find("span.count").text( pos );
  14                     marker.mouseenter( function() { f = true; } )
  15                           .mouseleave( function() { f = false; } )
  16             .attr("title", annotation ? decodeURIComponent(annotation) : "" )
  17                           .show()
  18                           .click( function() { $(this).remove(); legendItem.remove(); f = false; } );
  19                 return marker;
  20         };
  21
  22         var fn_isnumber = function(num) { return !isNaN( parseInt( num ) ); }
  23
  24         var fn_clear = function() {
  25                 $(".marker").remove();
  26                 $(".legend-item").remove();
  27                 counter = 0;
  28         };
  29
  30         var fn_load = function( container, val ) {
  31                 fn_clear();
  32                 if ( !val ) return;
  33                 var coordinates = val.split("}");
  34                 for ( var i = 0; i < coordinates.length; i++ ) {
  35                         var coordinate = coordinates[i];
  36                         if ( coordinate ) {
  37                                 var info = coordinate.split("^");
  38                                 var x = info[0]; var y = info[1]; var label = info[2]; var detail = info[3];
  39                                 var marker = fn_buildMarker( x, y, label, detail );
  40                                 container.append(marker);
  41                                 if ( fn_isnumber(label) ) {
  42                                         counter = parseInt(label);
  43                                 }
  44                         }
  45                 }
  46         };
  47
  48         var fn_save = function() {
  49                 var val = "";
  50                 $(".marker").each( function() {
  51                         var marker = $(this);
  52                         val += marker.attr("data-x") + "^" + marker.attr("data-y") + "^" + marker.attr("data-pos") + "^" + encodeURIComponent(marker.attr("title")) + "}";
  53                 });
  54                 $("#data").attr("value", val);
  55                 $("#submitForm").submit();
  56         };
  57
  58
  59         //// main
  60         var dropdownOptions = args.dropdownOptions;
  61         var options = dropdownOptions.options;
  62         var optionsLabel = dropdownOptions.label;
  63         var container = args.container;
  64         var data = args.data;
  65         var hideNav = args.hideNav;
  66
  67         container.mousemove( function() { f = true; });
  68
  69         if ( !hideNav ) {
  70             container.click ( function(e) {
  71                     if ( !f ) return;
  72                     var x = e.pageX - this.offsetLeft - 5;
  73                     var y = e.pageY - this.offsetTop - 5;
  74                     var dialog = $( ".dialog-form" ).clone();
  75                     dialog.find(".label").val( counter + 1 );
  76                     var hasOptions = typeof(options) != "undefined";
  77                     if ( hasOptions ) {
  78                             dialog.find("label[for='options']").text( typeof(optionsLabel) != "undefined" ? optionsLabel : "Select one"  );
  79                             var select = dialog.find("select[name='options']");
  80                             for ( var attr in options ) {
  81                                     if ( options.hasOwnProperty(attr) ) {
  82                                             select.append("<option value='" + attr + "'>" + options[attr] + "</option>");
  83                                     }
  84                             }
  85                     } else {
  86                             dialog.find("label[for='options']").remove();
  87                             dialog.find("select[name='options']").remove();
  88                     }
  89
  90                     var do_marker = function() {
  91                             if ( dialog.saved ) {
  92                                     var newcounter = dialog.find(".label").val();
  93                                     var notes = encodeURIComponent(dialog.find(".detail").val());
  94                                     var selectedOption = encodeURIComponent(dialog.find("select[name='options']").val());
  95                                     var combinedNotes = "";
  96                                     if ( selectedOption) {
  97                                             combinedNotes = options[selectedOption];
  98                                     }
  99                                     if ( selectedOption && notes ) {
 100                                             combinedNotes += "%3A%20";
 101                                     }
 102                                     if ( notes ) {
 103                                             combinedNotes += notes;
 104                                     }
 105
 106                                     var marker = fn_buildMarker( x, y, newcounter, combinedNotes );
 107                                     container.append(marker);
 108                                     if ( fn_isnumber(newcounter) ) { counter++; }
 109                             }
 110                             dialog.remove();
 111                     };
 112
 113                     dialog.dialog({
 114                             title: "Information",
 115                             autoOpen: false, height: hasOptions? 345 : 300, width: 350, modal:true,
 116                             open: function() { dialog.find(".detail").focus(); },
 117                             buttons: {
 118                                     "Save": function() { dialog.saved = true; $(this).dialog("close"); },
 119                                     "Cancel": function() { $(this).dialog("close"); }
 120                             },
 121                             close: do_marker
 122                     });
 123                     dialog.dialog("open");
 124             });
 125
 126         }
 127         var btn_clear = $("#btn_clear");
 128         btn_clear.click( fn_clear );
 129
 130         var btn_save = $("#btn_save");
 131         btn_save.click( fn_save );
 132
 133         fn_load( container, data );
 134
 135         if ( hideNav ) {
 136             $(".nav").hide();
 137         };
 138 };
 139
 140