Rewrite accordion widget in vanilla Javascript

This commit is contained in:
Frederic Guillot
2016-11-25 18:26:10 -05:00
parent ff844a9a04
commit f73d369dd0
19 changed files with 218 additions and 165 deletions

View File

@@ -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();
}
});

View File

@@ -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: {

View File

@@ -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: {

View File

@@ -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: {

View File

@@ -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: {

View File

@@ -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: {

View File

@@ -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: {

View File

@@ -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: {

View File

@@ -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: {

View File

@@ -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>');
}
});
}

View File

@@ -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() {