Rewrite accordion widget in vanilla Javascript

11 files changed, 27 insertions, 19 deletions

diff --git a/assets/js/components/accordion.js b/assets/js/components/accordion.js
new file mode 100644
index 00000000..518d0768
--- /dev/null
+++ b/assets/js/components/accordion.js
@@ -0,0 +1,8 @@
+KB.onClick('.accordion-toggle', function(e) {
+    var section = KB.dom(e.target).parent('.accordion-section');
+
+    if (section) {
+        KB.dom(section).toggleClass('accordion-collapsed');
+        KB.dom(KB.dom(section).child('.accordion-content')).toggle();
+    }
+});
diff --git a/assets/js/components/chart-project-avg-time-column.js b/assets/js/components/chart-project-avg-time-column.js
index 74fe31de..18564367 100644
--- a/assets/js/components/chart-project-avg-time-column.js
+++ b/assets/js/components/chart-project-avg-time-column.js
@@ -10,7 +10,7 @@ KB.component('chart-project-avg-time-column', function (containerElement, option
             categories.push(metrics[column_id].title);
         }
 
-        KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
+        KB.dom(containerElement).add(KB.dom('div').attr('id', 'chart').build());
 
         c3.generate({
             data: {
diff --git a/assets/js/components/chart-project-burndown.js b/assets/js/components/chart-project-burndown.js
index 34a01e4a..59dc861e 100644
--- a/assets/js/components/chart-project-burndown.js
+++ b/assets/js/components/chart-project-burndown.js
@@ -33,7 +33,7 @@ KB.component('chart-project-burndown', function (containerElement, options) {
             }
         }
 
-        KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
+        KB.dom(containerElement).add(KB.dom('div').attr('id', 'chart').build());
 
         c3.generate({
             data: {
diff --git a/assets/js/components/chart-project-cumulative-flow.js b/assets/js/components/chart-project-cumulative-flow.js
index aa150397..2c8a5682 100644
--- a/assets/js/components/chart-project-cumulative-flow.js
+++ b/assets/js/components/chart-project-cumulative-flow.js
@@ -30,7 +30,7 @@ KB.component('chart-project-cumulative-flow', function (containerElement, option
             }
         }
 
-        KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
+        KB.dom(containerElement).add(KB.dom('div').attr('id', 'chart').build());
 
         c3.generate({
             data: {
diff --git a/assets/js/components/chart-project-lead-cycle-time.js b/assets/js/components/chart-project-lead-cycle-time.js
index a81937ff..208f7ce6 100644
--- a/assets/js/components/chart-project-lead-cycle-time.js
+++ b/assets/js/components/chart-project-lead-cycle-time.js
@@ -20,7 +20,7 @@ KB.component('chart-project-lead-cycle-time', function (containerElement, option
             categories.push(metrics[i].day);
         }
 
-        KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
+        KB.dom(containerElement).add(KB.dom('div').attr('id', 'chart').build());
 
         c3.generate({
             data: {
diff --git a/assets/js/components/chart-project-task-distribution.js b/assets/js/components/chart-project-task-distribution.js
index 982aaf7f..3f48d230 100644
--- a/assets/js/components/chart-project-task-distribution.js
+++ b/assets/js/components/chart-project-task-distribution.js
@@ -7,7 +7,7 @@ KB.component('chart-project-task-distribution', function (containerElement, opti
             columns.push([options.metrics[i].column_title, options.metrics[i].nb_tasks]);
         }
 
-        KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
+        KB.dom(containerElement).add(KB.dom('div').attr('id', 'chart').build());
 
         c3.generate({
             data: {
diff --git a/assets/js/components/chart-project-time-comparison.js b/assets/js/components/chart-project-time-comparison.js
index a110e6b4..e4b31a13 100644
--- a/assets/js/components/chart-project-time-comparison.js
+++ b/assets/js/components/chart-project-time-comparison.js
@@ -11,7 +11,7 @@ KB.component('chart-project-time-comparison', function (containerElement, option
             categories.push(status === 'open' ? options.labelOpen : options.labelClosed);
         }
 
-        KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
+        KB.dom(containerElement).add(KB.dom('div').attr('id', 'chart').build());
 
         c3.generate({
             data: {
diff --git a/assets/js/components/chart-project-user-distribution.js b/assets/js/components/chart-project-user-distribution.js
index 8ab61799..d3c88d56 100644
--- a/assets/js/components/chart-project-user-distribution.js
+++ b/assets/js/components/chart-project-user-distribution.js
@@ -7,7 +7,7 @@ KB.component('chart-project-user-distribution', function (containerElement, opti
             columns.push([options.metrics[i].user, options.metrics[i].nb_tasks]);
         }
 
-        KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
+        KB.dom(containerElement).add(KB.dom('div').attr('id', 'chart').build());
 
         c3.generate({
             data: {
diff --git a/assets/js/components/chart-task-time-column.js b/assets/js/components/chart-task-time-column.js
index 02426748..887d24d4 100644
--- a/assets/js/components/chart-task-time-column.js
+++ b/assets/js/components/chart-task-time-column.js
@@ -10,7 +10,7 @@ KB.component('chart-task-time-column', function (containerElement, options) {
             categories.push(metrics[i].title);
         }
 
-        KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
+        KB.dom(containerElement).add(KB.dom('div').attr('id', 'chart').build());
 
         c3.generate({
             data: {
diff --git a/assets/js/components/external-task-view.js b/assets/js/components/external-task-view.js
index b63e79d3..cad57f8b 100644
--- a/assets/js/components/external-task-view.js
+++ b/assets/js/components/external-task-view.js
@@ -5,7 +5,7 @@ KB.component('external-task-view', function (containerElement, options) {
             cache: false,
             url: options.url,
             success: function(data) {
-                KB.el(containerElement).html('<div id="external-task-view">' + data + '</div>');
+                KB.dom(containerElement).html('<div id="external-task-view">' + data + '</div>');
             }
         });
     }
diff --git a/assets/js/components/text-editor.js b/assets/js/components/text-editor.js
index 5011318b..5268bc4d 100644
--- a/assets/js/components/text-editor.js
+++ b/assets/js/components/text-editor.js
@@ -5,7 +5,7 @@ KB.component('text-editor', function (containerElement, options) {
         writeModeElement = buildWriteMode();
         viewModeElement = buildViewMode();
 
-        containerElement.appendChild(KB.el('div')
+        containerElement.appendChild(KB.dom('div')
             .attr('class', 'text-editor')
             .add(viewModeElement)
             .add(writeModeElement)
@@ -13,18 +13,18 @@ KB.component('text-editor', function (containerElement, options) {
     };
 
     function buildViewMode() {
-        var toolbarElement = KB.el('div')
+        var toolbarElement = KB.dom('div')
             .attr('class', 'text-editor-toolbar')
             .for('a', [
                 {href: '#', html: '<i class="fa fa-pencil-square-o fa-fw"></i> ' + options.labelWrite, click: function() { toggleViewMode(); }}
             ])
             .build();
 
-        previewElement = KB.el('div')
+        previewElement = KB.dom('div')
             .attr('class', 'text-editor-preview-area markdown')
             .build();
 
-        return KB.el('div')
+        return KB.dom('div')
             .attr('class', 'text-editor-view-mode')
             .add(toolbarElement)
             .add(previewElement)
@@ -33,7 +33,7 @@ KB.component('text-editor', function (containerElement, options) {
     }
 
     function buildWriteMode() {
-        var toolbarElement = KB.el('div')
+        var toolbarElement = KB.dom('div')
             .attr('class', 'text-editor-toolbar')
             .for('a', [
                 {href: '#', html: '<i class="fa fa-eye fa-fw"></i> ' + options.labelPreview, click: function() { toggleViewMode(); }},
@@ -46,7 +46,7 @@ KB.component('text-editor', function (containerElement, options) {
             ])
             .build();
 
-        textarea = KB.el('textarea')
+        textarea = KB.dom('textarea')
             .attr('name', options.name)
             .attr('tabindex', options.tabindex || '-1')
             .attr('required', options.required || false)
@@ -55,7 +55,7 @@ KB.component('text-editor', function (containerElement, options) {
             .text(options.text)
             .build();
 
-        return KB.el('div')
+        return KB.dom('div')
             .attr('class', 'text-editor-write-mode')
             .add(toolbarElement)
             .add(textarea)
@@ -63,9 +63,9 @@ KB.component('text-editor', function (containerElement, options) {
     }
 
     function toggleViewMode() {
-        KB.el(previewElement).html(marked(textarea.value, {sanitize: true}));
-        KB.el(viewModeElement).toggle();
-        KB.el(writeModeElement).toggle();
+        KB.dom(previewElement).html(marked(textarea.value, {sanitize: true}));
+        KB.dom(viewModeElement).toggle();
+        KB.dom(writeModeElement).toggle();
     }
 
     function getSelectedText() {