square-ads/squareAds.html at master · javiermatos/square-ads · 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
126
127
128
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Square Ads</title>
    <script type="text/javascript">

        function SquareImage(aHref, imgSrc, size) {
            this.size = size;

            this.a = document.createElement('a');
            this.a.href = aHref;
            this.a.target = '_blank';

            this.canvas = document.createElement('canvas');
            this.canvas.width = size;
            this.canvas.height = size;

            this.img = new Image();
            this.img.src = imgSrc;
            this.imgLoaded = false;

            this.img.addEventListener('load', function () {
                this.imgLoaded = true;
                this.drawResize();
            }.bind(this), false);

            this.a.appendChild(this.canvas);
        }

        function getRealImageSize(img) {
            var sw = (img.height === 150) ? img.width-17 : img.width;
            var sh = (img.width === 150) ? img.height-17 : img.height;
            return [sw, sh];
        }

        SquareImage.prototype.drawResize = function (size) {
            this.size = size || this.size;

            this.canvas.width = this.size;
            this.canvas.height = this.size;

            if (this.imgLoaded && this.canvas.getContext) {
                var context = this.canvas.getContext('2d');
                context.clearRect(0, 0, this.canvas.width, this.canvas.height);

                //var imgSize = getRealImageSize(this.img);
                var imgSize = [this.img.width, this.img.height];
                var maxDim = (imgSize[0] > imgSize[1]) ? imgSize[0] : imgSize[1];
                var ratio = this.size / maxDim;

                var dWidth = Math.floor(imgSize[0] * ratio);
                var dHeight = Math.floor(imgSize[1] * ratio);

                var sx = Math.floor((this.canvas.width - dWidth) / 2);
                var sy = Math.floor((this.canvas.height - dHeight) / 2);

                context.drawImage(this.img, 0, 0, imgSize[0], imgSize[1], sx, sy, dWidth, dHeight);
            }
            return this;
        };

        SquareImage.prototype.setMargin = function (size) {
            this.a.style.margin = "0 0 0 "+size+"px";
            return this;
        };

        SquareImage.prototype.getElement = function () {
            return this.a;
        };

        var squareImages = [];

        function draw() {
            var minSize = 120;
            var maxSize = 150;
            var minMargin = 10;
            var numRows = 2;
            var i, len;

            var width = document.body.clientWidth;
            var rowNumAds = Math.floor((width + minMargin) / (minSize + minMargin));
            var numAds = rowNumAds * numRows;
            var size = minSize + Math.floor((width - rowNumAds * (minSize + minMargin) + minMargin) / rowNumAds);
            size = Math.min(size, maxSize);
            var margin = Math.floor((width - rowNumAds * size) / (rowNumAds - 1));

            var squareAds = document.getElementById('ads');

            // Append/remove elements
            if (squareAds.childElementCount > numAds) {
                // Remove ads
                for (i = numAds, len = squareAds.childElementCount; i < len; i++) {
                    squareAds.removeChild(squareImages[i].getElement());
                }
            }
            else if (squareAds.childElementCount < numAds) {
                // Initialize more ads if required
                for (i = squareImages.length; i < numAds; i++) {
                    squareImages.push(new SquareImage(
                        'http://google.es',
                        'http://lorempixel.com/150/150/?seed='+Math.random(),
                        size
                    ));
                }
                // Append ads
                for (i = squareAds.childElementCount, len = numAds; i < len; i++) {
                    squareAds.appendChild(squareImages[i].getElement());
                }
            }

            // Resize ads
            for (i = 0, len = numAds; i < len; i++) {
                squareImages[i].drawResize(size);
                squareImages[i].setMargin((i % rowNumAds !== 0) ? margin : 0);
            }
        }

    </script>
    <style type="text/css">
        body { margin: 0; }
        canvas { background-color: grey; }
    </style>
</head>
<body onload="draw();" onresize="draw();">
<div id="ads"></div>
</body>
</html>