js/pMap.js

   1 /**
   2  * Holds the definition and the creation of the imageMap object
   3  * @author Martynas Mickevicius <mmartynas@gmail.com>
   4  * @package phpMyAdmin
   5  */
   6
   7 /**
   8  * responsible for showing tooltips above the image chart
   9  */
  10 var imageMap = {
  11     'mouseMoved': function(event, cont) {
  12         // return if no imageMap set
  13         // this can happen if server has no json
  14         if (!this.imageMap) {
  15             return;
  16         }
  17
  18         // get mouse coordinated relative to image
  19         var mouseX = event.pageX - cont.offsetLeft;
  20         var mouseY = event.pageY - cont.offsetTop;
  21
  22         //console.log("X: " + mouseX + ", Y: " + mouseY);
  23
  24         /* Check if we are flying over a map zone
  25         * Lets use the following method to check if a given
  26         * point is in any convex polygon.
  27         * http://www.programmingforums.org/post168124-3.html
  28         */
  29         var found = false;
  30         for (var key = 0; key < this.imageMap.length; key++)
  31         {
  32             var seriesName = this.imageMap[key]['n'];
  33             var seriesValue = this.imageMap[key]['v'];
  34
  35             var signSum = 0;
  36             for (var i = 0; i < this.imageMap[key]['p'].length; i++)
  37             {
  38                 var index1;
  39                 var index2;
  40
  41                 if (i == this.imageMap[key]['p'].length - 1)
  42                 {
  43                     index1 = i;
  44                     index2 = 0;
  45                 }
  46                 else
  47                 {
  48                     index1 = i;
  49                     index2 = i+1;
  50                 }
  51                 var result = this.getDeterminant(
  52                     this.imageMap[key]['p'][index1][0],
  53                     this.imageMap[key]['p'][index1][1],
  54                     this.imageMap[key]['p'][index2][0],
  55                     this.imageMap[key]['p'][index2][1],
  56                     mouseX,
  57                     mouseY
  58                 );
  59                 if (result > 0) { signSum += 1; } else { signSum += -1; }
  60             }
  61
  62             if (Math.abs(signSum) == this.imageMap[key]['p'].length)
  63             {
  64                 found = true;
  65                 if (this.currentKey != key)
  66                 {
  67                     this.tooltip.show();
  68                     this.tooltip.title(seriesName);
  69                     this.tooltip.text(seriesValue);
  70                     this.currentKey = key;
  71                 }
  72                 this.tooltip.move(mouseX + 20, mouseY + 20);
  73             }
  74         }
  75         if (!found && this.currentKey != -1 )
  76         {
  77             this.tooltip.hide();
  78             this.currentKey = -1;
  79         }
  80     },
  81
  82     'getDeterminant': function (X1, Y1, X2, Y2, X3, Y3) {
  83         return (X2*Y3 - X3*Y2) - (X1*Y3 - X3*Y1) + (X1*Y2 - X2*Y1);
  84     },
  85
  86     'loadImageMap': function(map) {
  87         this.imageMap = JSON.parse(map);
  88         for (key in this.imageMap)
  89         {
  90             // FIXME
  91             // without this loop image map does not work
  92             // on IE8 in the status page
  93         }
  94     },
  95
  96     'init': function() {
  97         this.tooltip.init();
  98
  99         $("div#chart").bind('mousemove',function(e) {
 100             imageMap.mouseMoved(e, this);
 101         });
 102
 103         this.tooltip.attach("div#chart");
 104
 105         this.currentKey = -1;
 106     },
 107
 108     'tooltip': {
 109         'init': function () {
 110             this.el = $('<div></div>');
 111             this.el.css('position', 'absolute');
 112             this.el.css('font-family', 'tahoma');
 113             this.el.css('background-color', '#373737');
 114             this.el.css('color', '#BEBEBE');
 115             this.el.css('padding', '3px');
 116
 117             var title = $('<p></p>');
 118             title.attr('id', 'title');
 119             title.css('margin', '0px');
 120             title.css('padding', '3px');
 121             title.css('background-color', '#606060');
 122             title.css('text-align', 'center');
 123             title.html('Title');
 124             this.el.append(title);
 125
 126             var text = $('<p></p>');
 127             text.attr('id', 'text');
 128             text.css('margin', '0');
 129             text.html('Text');
 130             this.el.append(text);
 131
 132             this.hide();
 133         },
 134
 135         'attach': function (element) {
 136             $(element).prepend(this.el);
 137         },
 138
 139         'move': function (x, y) {
 140             this.el.css('margin-left', x);
 141             this.el.css('margin-top', y);
 142         },
 143
 144         'hide': function () {
 145             this.el.css('display', 'none');
 146         },
 147
 148         'show': function () {
 149             this.el.css('display', 'block');
 150         },
 151
 152         'title': function (title) {
 153             this.el.find("p#title").html(title);
 154         },
 155
 156         'text': function (text) {
 157             this.el.find("p#text").html(text.replace(/;/g, "<br />"));
 158         }
 159     }
 160 };
 161
 162 $(document).ready(function() {
 163     imageMap.init();
 164 });