RecalculateImageMap/RecalculateImageMap.js at master · WouterSpaak/RecalculateImageMap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
/**
 *  Class RecalculateMap
 *
 *  Recalculates coordinates of an image map
 *
 *  @param HTMLElement image
 *      image on which the map is used
 *  @param HTMLElement mapElement
 *      image map
 */
function RecalculateImageMap(image, mapElement) {

    this.image               = image;

    this.newWidth            = image.width;
    this.newHeight           = image.height;

    this.oldWidth            = image.width;
    this.oldHeight           = image.height;

    var imageData            = image.dataset;

    this.originalWidth       = parseInt(imageData.originalwidth);
    this.originalHeight      = parseInt(imageData.originalheight);

    this.element             = mapElement;
    this.areas               = this.element.querySelectorAll('area');

    this.originalCoordinates = [];

    this.reset               = false;

    var _this                = this;

    var arrayToString        = function(arr) {
        return arr.join(',');
    }

    var getOriginalCoordinates = function() {
        var coords = [];

        for(var i = 0; i < _this.areas.length; i++) {

            var arr = _this.areas[i].coords.split(',');
            var arrNumbers = [];

            for(var j = 0; j < arr.length; j++) {
                arrNumbers.push(parseInt(arr[j]));
            }

            coords.push(arrNumbers);
        }

        return coords;
    }

    var newX = function(num) {
        return Math.floor((_this.newWidth * _this.originalCoordinates[num][0]) / _this.originalWidth);
    }

    var newY = function(num) {
        return Math.floor((_this.newHeight * _this.originalCoordinates[num][1]) / _this.originalHeight);
    }

    var newR = function(num) {
        return Math.floor(_this.originalCoordinates[num][2] - ((_this.originalHeight - _this.newHeight)/50));
    }

    var newValues = function(num) {
        var newArray = [
            newX(num),
            newY(num),
            newR(num)
        ];
        return arrayToString(newArray);
    }

    var modifyAreas = function(newValueArray) {
        for(var i = 0; i < _this.areas.length; i++) {
            _this.areas[i].coords = newValueArray[i];
        }
    }

    var evaluate = function() {
        _this.newWidth  = _this.image.width;
        _this.newHeight = _this.image.height;

        if(_this.newWidth !== _this.oldWidth || _this.newHeight !== _this.oldHeight) {
            _this.oldWidth  = _this.newWidth;
            _this.oldHeight = _this.newHeight;
            return true;
        } else {
            return false;
        }
    }

    var recalculate = function() {
        if(evaluate()) {
            var newValueArray = [];
            for(var i = 0; i < _this.areas.length; i++) {
                newValueArray[i] = newValues(i);
            }

            modifyAreas(newValueArray);
        }
    }

    this.init = function() {
        _this.originalCoordinates = getOriginalCoordinates();

        if(_this.reset === false) {
            var newValueArray = [];
            for(var i = 0; i < _this.areas.length; i++) {
                newValueArray[i] = newValues(i);
            }
            modifyAreas(newValueArray);

            _this.reset = true;
        }

        window.onresize = function() {
            recalculate();
        }
    }
}