Html dom building (#6490)

Replaces #6179 and builds HTML legend strings using dom nodes rather than building up an HTML string directly.

diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js
index de418e7edbc7eb09ec4577b9c73bb0892fcbabdb..7cee5444457a7b4781070636c58ec60804ada1e2 100644 (file)
--- a/src/controllers/controller.doughnut.js
+++ b/src/controllers/controller.doughnut.js
@@ -22,25 +22,25 @@ defaults._set('doughnut', {
                mode: 'single'
        },
        legendCallback: function(chart) {
-               var text = [];
-               text.push('<ul class="' + chart.id + '-legend">');
-
+               var list = document.createElement('ul');
                var data = chart.data;
                var datasets = data.datasets;
                var labels = data.labels;
+               var i, ilen, listItem, listItemSpan;
 
+               list.setAttribute('class', chart.id + '-legend');
                if (datasets.length) {
-                       for (var i = 0; i < datasets[0].data.length; ++i) {
-                               text.push('<li><span style="background-color:' + datasets[0].backgroundColor[i] + '"></span>');
+                       for (i = 0, ilen = datasets[0].data.length; i < ilen; ++i) {
+                               listItem = list.appendChild(document.createElement('li'));
+                               listItemSpan = listItem.appendChild(document.createElement('span'));
+                               listItemSpan.style.backgroundColor = datasets[0].backgroundColor[i];
                                if (labels[i]) {
-                                       text.push(labels[i]);
+                                       listItem.appendChild(document.createTextNode(labels[i]));
                                }
-                               text.push('</li>');
                        }
                }
 
-               text.push('</ul>');
-               return text.join('');
+               return list.outerHTML;
        },
        legend: {
                labels: {

diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js
index 1e0e30ba2dd6264ef09b2143d6234020225c3c64..76ca3b70cae6430fe5ef74cc825b6790cfc16110 100644 (file)
--- a/src/controllers/controller.polarArea.js
+++ b/src/controllers/controller.polarArea.js
@@ -32,25 +32,25 @@ defaults._set('polarArea', {
 
        startAngle: -0.5 * Math.PI,
        legendCallback: function(chart) {
-               var text = [];
-               text.push('<ul class="' + chart.id + '-legend">');
-
+               var list = document.createElement('ul');
                var data = chart.data;
                var datasets = data.datasets;
                var labels = data.labels;
+               var i, ilen, listItem, listItemSpan;
 
+               list.setAttribute('class', chart.id + '-legend');
                if (datasets.length) {
-                       for (var i = 0; i < datasets[0].data.length; ++i) {
-                               text.push('<li><span style="background-color:' + datasets[0].backgroundColor[i] + '"></span>');
+                       for (i = 0, ilen = datasets[0].data.length; i < ilen; ++i) {
+                               listItem = list.appendChild(document.createElement('li'));
+                               listItemSpan = listItem.appendChild(document.createElement('span'));
+                               listItemSpan.style.backgroundColor = datasets[0].backgroundColor[i];
                                if (labels[i]) {
-                                       text.push(labels[i]);
+                                       listItem.appendChild(document.createTextNode(labels[i]));
                                }
-                               text.push('</li>');
                        }
                }
 
-               text.push('</ul>');
-               return text.join('');
+               return list.outerHTML;
        },
        legend: {
                labels: {

diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js
index 91ff07a20bd18940210b28036e7d3f311d271c74..dc5b9325d6f3eb4b56a720c2187153f7e45f0fe7 100644 (file)
--- a/src/plugins/plugin.legend.js
+++ b/src/plugins/plugin.legend.js
@@ -78,17 +78,22 @@ defaults._set('global', {
        },
 
        legendCallback: function(chart) {
-               var text = [];
-               text.push('<ul class="' + chart.id + '-legend">');
-               for (var i = 0; i < chart.data.datasets.length; i++) {
-                       text.push('<li><span style="background-color:' + chart.data.datasets[i].backgroundColor + '"></span>');
-                       if (chart.data.datasets[i].label) {
-                               text.push(chart.data.datasets[i].label);
+               var list = document.createElement('ul');
+               var datasets = chart.data.datasets;
+               var i, ilen, listItem, listItemSpan;
+
+               list.setAttribute('class', chart.id + '-legend');
+
+               for (i = 0, ilen = datasets.length; i < ilen; i++) {
+                       listItem = list.appendChild(document.createElement('li'));
+                       listItemSpan = listItem.appendChild(document.createElement('span'));
+                       listItemSpan.style.backgroundColor = datasets[i].backgroundColor;
+                       if (datasets[i].label) {
+                               listItem.appendChild(document.createTextNode(datasets[i].label));
                        }
-                       text.push('</li>');
                }
-               text.push('</ul>');
-               return text.join('');
+
+               return list.outerHTML;
        }
 });
 

diff --git a/test/specs/global.defaults.tests.js b/test/specs/global.defaults.tests.js
index a01284c1a0b3060321a3703f81a67ae0bcace0bb..afef1aabf2ac0644a7939163f8cf116ef56dad0e 100644 (file)
--- a/test/specs/global.defaults.tests.js
+++ b/test/specs/global.defaults.tests.js
@@ -102,7 +102,7 @@ describe('Default Configs', function() {
                                options: config
                        });
 
-                       var expectedLegend = '<ul class="' + chart.id + '-legend"><li><span style="background-color:red"></span>label1</li><li><span style="background-color:green"></span>label2</li></ul>';
+                       var expectedLegend = '<ul class="' + chart.id + '-legend"><li><span style="background-color: red;"></span>label1</li><li><span style="background-color: green;"></span>label2</li></ul>';
                        expect(chart.generateLegend()).toBe(expectedLegend);
                });
 
@@ -218,7 +218,7 @@ describe('Default Configs', function() {
                                options: config
                        });
 
-                       var expectedLegend = '<ul class="' + chart.id + '-legend"><li><span style="background-color:red"></span>label1</li><li><span style="background-color:green"></span>label2</li></ul>';
+                       var expectedLegend = '<ul class="' + chart.id + '-legend"><li><span style="background-color: red;"></span>label1</li><li><span style="background-color: green;"></span>label2</li></ul>';
                        expect(chart.generateLegend()).toBe(expectedLegend);
                });