Rewrite accordion widget in vanilla Javascript
This commit is contained in:
8
assets/js/components/accordion.js
Normal file
8
assets/js/components/accordion.js
Normal 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();
|
||||
}
|
||||
});
|
||||
@@ -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: {
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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>');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user