1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>parseInputMap - ImageMap Tests</title>
6    <link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.17.1.css">
7</head>
8<body>
9<div id="qunit"></div>
10<div id="qunit-fixture"></div>
11<script src="//code.jquery.com/qunit/qunit-1.17.1.js"></script>
12<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
13<script src="../../jquery.rwdImageMaps.js"></script>
14<script src="../../script.js"></script>
15
16<form>
17<textarea id="wiki__text">
18</textarea>
19</form>
20
21<script>
22    function getTestMsg(expected, actual){
23        return " should be between " + (expected-1) + " and " + (expected+1) + ", and is " + actual + ".";
24    }
25    QUnit.module( "parseInputMap", {
26        setup: function( ) {
27            DOKU_BASE = /(.*?)lib\/plugins/.exec(window.location.href)[1];
28            var xmlHttp = new XMLHttpRequest();
29            xmlHttp.open( "GET", DOKU_BASE , false);
30            xmlHttp.send();
31            JSINFO = [];
32            JSINFO['plugin_imagemap_mldummy'] = /plugin_imagemap_mldummy":"(.*?)"/.exec(xmlHttp.responseText)[1];
33            this.nsdivider = /wiki\\?(.)dokuwiki-128.png/.exec(JSINFO['plugin_imagemap_mldummy'])[1];
34
35            imagemap = new Imagemap();
36            var fade = document.createElement('div');
37            fade.id = 'imagemap_fade';
38            fade.className = 'imagemap_black_overlay';
39            var $myeditor =  jQuery('#'.concat("wiki__text"));
40            var myeditor = $myeditor[0];
41            myeditor.form.parentNode.appendChild(fade);
42
43            var debugElement = document.createElement('div');
44            debugElement.innerHTML='<textarea style="/*display: none;*/" id="imagemap_debug" name="user_eingabe" cols="80" rows="10"></textarea>';
45            var popup = document.createElement('div');
46            popup.id = 'imagemap_light';
47            popup.className = 'imagemap_white_overlay';
48            var tableElement= document.createElement('div');
49            tableElement.innerHTML=''
50            + '<form>'
51            + '<input type="hidden" name="id" value="' + 'Some:ID' + '">'
52            + '<table id="imageMapTable" border=1 cellspacing=0 cellpadding=5>'
53            + '<tr><th>Nr</th><th>X1</th><th>Y1</th><th>Width</th><th>Height</th><th>URL</th><th>Text</th><th>Remove</th></tr>'
54            + '</table>'
55            + '</form>'
56            + unescape("<button onClick=\"imagemap.writeOutput();document.getElementById('imagemap_light').style.display='none';document.getElementById('imagemap_fade').style.display='none';\">Uebernehmen</button><br />")
57            + unescape("<button onClick=\"document.getElementById('imagemap_light').style.display='none';document.getElementById('imagemap_fade').style.display='none';\">Abbrechen</button><br />")
58            + '<textarea id="output" name="user_eingabe" cols="80" rows="10"></textarea>';
59
60            var cElement = document.createElement('canvas');
61            cElement.id = 'canvas';
62            cElement.setAttribute("width", "450");
63            cElement.setAttribute("height", "250");
64            if (typeof(G_vmlCanvasManager) != 'undefined') //IE :-(
65                G_vmlCanvasManager.initElement(cElement);
66            popup.appendChild(cElement);
67            popup.appendChild(debugElement);
68            popup.appendChild(tableElement);
69            myeditor.form.parentNode.appendChild(popup);
70            imagemap.init(myeditor);
71        }, teardown: function( ) {
72        }
73    });
74    QUnit.test( "simple map", function( assert ) {
75        var line1 = "{{map>wiki:dokuwiki-128.png|Bild1422548401308}}\n";
76        var line2 = "   * [[foo|bar@ 20,15,100,40]]\n";
77        var line3 = "{{<map}}";
78        var result = imagemap.parseInput(line1 + line2 + line3);
79        assert.equal(result, true, "We expect this map to be accepted" );
80        assert.equal(imagemap.img.src, DOKU_BASE +'lib/exe/fetch.php?media=wiki' + this.nsdivider + 'dokuwiki-128.png', 'image source');
81        assert.equal(imagemap.filenameWiki,"wiki:dokuwiki-128.png",'filenameWiki');
82        assert.equal(imagemap.areas[0].x1,20,'x1');
83        assert.equal(imagemap.areas[0].y1,15,'y1');
84        assert.equal(imagemap.areas[0].width,80,'width');
85        assert.equal(imagemap.areas[0].height,25,'height');
86        assert.equal(imagemap.areas[0].url,'foo','url');
87        assert.equal(imagemap.areas[0].text,'bar','text');
88    });
89
90    QUnit.test( "resized map", function( assert ) {
91        //var line1 = '{{map>512px-catstalkprey.jpg?300&nocache|Bild1422545263962}}\n';
92        var line1 = "{{map>wiki:dokuwiki-128.png?300&nocache|Bild1422548401308}}\n";
93        var line2 = '   * [[foo|bar@ 47,35,234,94]]\n';
94        var line3 = '{{<map}}';
95        var result = imagemap.parseInput(line1 + line2 + line3);
96        assert.equal(result, true, "We expect this map to be accepted" );
97        assert.equal(imagemap.img.src, DOKU_BASE +'lib/exe/fetch.php?media=wiki' + this.nsdivider + 'dokuwiki-128.png&nocache', 'image source');
98        assert.equal(imagemap.filenameWiki,"wiki:dokuwiki-128.png?300&nocache",'filenameWiki');
99
100        var expected = 20;
101        var actual = imagemap.areas[0].x1;
102        assert.ok(expected-1<=actual&&actual<=expected+1,'x1' + getTestMsg(expected, actual));
103        assert.ok(typeof actual === 'number', "x1 should be of type 'number' and is of type '" + typeof actual+"'.");
104
105        expected = 15;
106        actual = imagemap.areas[0].y1;
107        assert.ok(expected-1<=actual&&actual<=expected+1,'y1' + getTestMsg(expected, actual));
108        assert.ok(typeof actual === 'number', "y1 should be of type 'number' and is of type '" + typeof actual+"'.");
109
110        expected = 80;
111        actual = imagemap.areas[0].width;
112        assert.ok(expected-1<=actual&&actual<=expected+1,'width' + getTestMsg(expected, actual));
113        assert.ok(typeof actual === 'number', "width should be of type 'number' and is of type '" + typeof actual+"'.");
114
115        expected = 25;
116        actual = imagemap.areas[0].height;
117        assert.ok(expected-1<=actual&&actual<=expected+1,'height' + getTestMsg(expected, actual));
118        assert.ok(typeof actual === 'number', "height should be of type 'number' and is of type '" + typeof actual+"'.");
119
120        assert.equal(imagemap.areas[0].url,'foo','url');
121        assert.equal(imagemap.areas[0].text,'bar','text');
122    });
123
124
125</script>
126</body>
127</html>
128
129
130<form>
131    <input type="hidden" name="id" value="' + 'foo' + '">
132    <table id="imageMapTable" border=1 cellspacing=0 cellpadding=5>
133        <tr><th>Nr</th><th>X1</th><th>Y1</th><th>Width</th><th>Height</th><th>URL</th><th>Text</th><th>Remove</th></tr>
134    </table>
135</form>
136<textarea id="output" name="user_eingabe" cols="80" rows="10"></textarea>
137