AS1024
/
Kanboard-Prod
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
No known key found for this signature in database
GPG Key ID: 92D77191BA7FBC99
19 changed files with 218 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/js/app.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
assets/js/components/accordion.js Normal file
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();
}
});

2
assets/js/components/chart-project-avg-time-column.js
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: {

2
assets/js/components/chart-project-burndown.js
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: {

2
assets/js/components/chart-project-cumulative-flow.js
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: {

2
assets/js/components/chart-project-lead-cycle-time.js
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: {

2
assets/js/components/chart-project-task-distribution.js
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: {

2
assets/js/components/chart-project-time-comparison.js
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: {

2
assets/js/components/chart-project-user-distribution.js
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: {

2
assets/js/components/chart-task-time-column.js
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: {

2
assets/js/components/external-task-view.js
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>');
}
});
}

20
assets/js/components/text-editor.js
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() {

5
assets/js/core/bootstrap.js vendored Normal file
View File

@ -0,0 +1,5 @@
document.addEventListener('DOMContentLoaded', function () {
KB.render();
KB.listen();
});

120
assets/js/core/dom.js Normal file
View File

@ -0,0 +1,120 @@
KB.dom = function (tag) {
function DomManipulation(tag) {
var element = typeof tag === 'string' ? document.createElement(tag) : tag;
this.attr = function (attribute, value) {
if (value !== null) {
element.setAttribute(attribute, value);
}
return this;
};
this.hide = function () {
element.style.display = 'none';
return this;
};
this.show = function () {
element.style.display = 'block';
return this;
};
this.toggle = function () {
if (element.style.display === 'none') {
this.show();
} else{
this.hide();
}
return this;
};
this.click = function (callback) {
element.onclick = function (e) {
e.preventDefault();
callback();
};
return this;
};
this.add = function (node) {
element.appendChild(node);
return this;
};
this.html = function (html) {
element.innerHTML = html;
return this;
};
this.text = function (text) {
element.appendChild(document.createTextNode(text));
return this;
};
this.addClass = function (className) {
element.classList.add(className);
return this;
};
this.removeClass = function (className) {
element.classList.remove(className);
return this;
};
this.toggleClass = function (className) {
element.classList.toggle(className);
return this;
};
this.hasClass = function (className) {
return element.classList.contains(className);
};
this.parent = function (selector) {
for (; element && element !== document; element = element.parentNode) {
if (element.matches(selector)) {
return element;
}
}
return null;
};
this.child = function (selector) {
return element.querySelector(selector);
};
this.for = function (tag, list) {
for (var i = 0; i < list.length; i++) {
var dict = list[i];
if (typeof dict !== 'object') {
element.appendChild(KB.dom(tag).text(dict).build());
} else {
var node = KB.dom(tag);
for (var attribute in dict) {
if (dict.hasOwnProperty(attribute) && attribute in this && typeof this[attribute] === 'function') {
node[attribute](dict[attribute]);
} else {
node.attr(attribute, dict[attribute]);
}
}
element.appendChild(node.build());
}
}
return this;
};
this.build = function () {
return element;
};
}
return new DomManipulation(tag);
};

60
assets/js/core/kb.js Normal file
View File

@ -0,0 +1,60 @@
'use strict';
var KB = {
components: {},
utils: {},
clickEvents: {}
};
KB.onClick = function (selector, callback) {
this.clickEvents[selector] = callback;
};
KB.listen = function () {
var self = this;
function onClick(e) {
for (var selector in self.clickEvents) {
if (self.clickEvents.hasOwnProperty(selector) && e.target.matches(selector)) {
e.preventDefault();
self.clickEvents[selector](e);
}
}
}
document.addEventListener('click', onClick, false);
};
KB.component = function (name, object) {
this.components[name] = object;
};
KB.render = function () {
for (var name in this.components) {
var elementList = document.querySelectorAll('.js-' + name);
for (var i = 0; i < elementList.length; i++) {
if (this.components.hasOwnProperty(name)) {
var object = this.components[name];
var component = new object(elementList[i], JSON.parse(elementList[i].dataset.params));
component.render();
elementList[i].className = elementList[i].className + '-rendered';
}
}
}
};
KB.utils.formatDuration = function (d) {
if (d >= 86400) {
return Math.round(d/86400) + "d";
}
else if (d >= 3600) {
return Math.round(d/3600) + "h";
}
else if (d >= 60) {
return Math.round(d/60) + "m";
}
return d + "s";
};

18
assets/js/src/Accordion.js
View File

@ -1,18 +0,0 @@
Kanboard.Accordion = function(app) {
this.app = app;
};
Kanboard.Accordion.prototype.listen = function() {
$(document).on("click", ".accordion-toggle", function(e) {
var section = $(this).parents(".accordion-section");
e.preventDefault();
if (section.hasClass("accordion-collapsed")) {
section.find(".accordion-content").show();
section.removeClass("accordion-collapsed");
} else {
section.find(".accordion-content").hide();
section.addClass("accordion-collapsed");
}
});
};

2
assets/js/src/Bootstrap.js
View File

@ -3,6 +3,4 @@ var _KB = null;
jQuery(document).ready(function() {
_KB = new Kanboard.App();
_KB.execute();
KB.render();
});

123
assets/js/src/Namespace.js
View File

@ -1,126 +1,3 @@
'use strict';
var Kanboard = {};
var KB = {
components: {},
utils: {}
};
KB.component = function (name, object) {
this.components[name] = object;
};
KB.render = function () {
for (var name in this.components) {
var elementList = document.querySelectorAll('.js-' + name);
for (var i = 0; i < elementList.length; i++) {
var object = this.components[name];
var component = new object(elementList[i], JSON.parse(elementList[i].dataset.params));
component.render();
elementList[i].className = elementList[i].className + '-rendered';
}
}
};
KB.el = function (tag) {
function DOMBuilder(tag) {
var element = typeof tag === 'string' ? document.createElement(tag) : tag;
this.attr = function (attribute, value) {
if (value !== null) {
element.setAttribute(attribute, value);
}
return this;
};
this.hide = function () {
element.style.display = 'none';
return this;
};
this.show = function () {
element.style.display = 'block';
return this;
};
this.toggle = function () {
if (element.style.display === 'none') {
this.show();
} else{
this.hide();
}
return this;
};
this.click = function (callback) {
element.onclick = function (e) {
e.preventDefault();
callback();
};
return this;
};
this.add = function (node) {
element.appendChild(node);
return this;
};
this.html = function (html) {
element.innerHTML = html;
return this;
};
this.text = function (text) {
element.appendChild(document.createTextNode(text));
return this;
};
this.for = function (tag, list) {
for (var i = 0; i < list.length; i++) {
var dict = list[i];
if (typeof dict !== 'object') {
element.appendChild(KB.el(tag).text(dict).build());
} else {
var node = KB.el(tag);
for (var attribute in dict) {
if (attribute in this && typeof this[attribute] === 'function') {
node[attribute](dict[attribute]);
} else {
node.attr(attribute, dict[attribute]);
}
}
element.appendChild(node.build());
}
}
return this;
};
this.build = function () {
return element;
};
}
return new DOMBuilder(tag);
};
KB.utils.formatDuration = function(d) {
if (d >= 86400) {
return Math.round(d/86400) + "d";
}
else if (d >= 3600) {
return Math.round(d/3600) + "h";
}
else if (d >= 60) {
return Math.round(d/60) + "m";
}
return d + "s";
};

5
gulpfile.js
View File

@ -7,10 +7,13 @@ var strip = require('gulp-strip-comments');
var src = {
js: [
'assets/js/core/kb.js',
'assets/js/core/dom.js',
'assets/js/components/*.js',
'assets/js/core/bootstrap.js',
'assets/js/src/Namespace.js',
'assets/js/src/!(Namespace|Bootstrap|BoardDragAndDrop)*.js',
'assets/js/src/BoardDragAndDrop.js',
'assets/js/components/*.js',
'assets/js/src/Bootstrap.js'
]
};