(function (window) {
let MinimalCards = function (wrapper, options) {
let self = this;
self.wrapper = wrapper;
if (options.pagination) {
if (!(options.pagination instanceof Object)) options.pagination = {};
if (!(options.pagination.length)) options.pagination.length = 10;
self.current_page = 1;
}
options.headers.forEach(function (h) {
if (h.sortable) {
if (!(h.sortable instanceof Object)) {
h.sortable = {};
} else if (h.sortable.active) {
self.current_sort_column = h;
}
}
if (h.filterable) {
if (!(h.filterable instanceof Object)) {
h.filterable = {};
} else if (h.filterable.active) {
self.current_filter_column = h;
}
}
});
if (! self.current_sort_column) {
self.current_sort_column = options.headers.find( h => h.sortable );
self.current_sort_column.sortable.active = true;
self.current_sort_column.sortable.direction = 'asc';
}
if (! self.current_filter_column) {
self.current_filter_column = options.headers.find( h => h.filterable );
self.current_filter_column.filterable.active = true;
}
options.length_options ||= [4, 8, 12, 16, 20];
self.options = options;
self.data = options.data || [];
["pagination", "pagination_first", "pagination_prev", "pagination_last", "pagination_next"].forEach(function (c) {
self[c] = [];
});
self.init();
return self;
}, context = {}, current;
MinimalCards.prototype = {
init: function () {
let self = this;
if (self.options.fetch_data) {
self.fetch({
type: "GET",
endpoint: self.options.fetch_data.endpoint,
cb: function (res) {
self.data = res.data;
self.render();
}
});
} else if (self.options.serverside) {
// ...
} else self.render();
},
fetch: function (options) {
let self = this;
if (options.type.match(/^(POST|PUT|DELETE)$/)) {
// ...
} else if (options.type == 'GET') {
if (options.params) options.endpoint += self.urlEncode(options.params);
fetch(options.endpoint)
.then(response => response.json)
.then(options.cb)
.catch(options.ecb);
}
},
urlEncode: function (params) {
let string = '';
if (!params) return string;
for (let key in params) {
if (string !== '') string += '&';
string += key + '=' + encodeURIComponent(params[key]);
}
return '?' + string;
},
createNode: function (options, wrapper, next) {
let self = this;
let node;
if (options.tag) node = document.createElement(options.tag)
else if (wrapper) {
node = wrapper;
wrapper = undefined;
} else return console.warn("No tag or wrapper node passed to createNode");
if (options.class) self.addClass(node, options.class);
if (options.text) node.innerText = options.text;
if (options.value) node.value = options.value;
if (options.id) node.id = options.id;
if (options.attributes) self.setAttributes(node, options.attributes);
if (options.styles) self.addStyles(node, options.styles);
if (options.children) options.children.forEach(function (c) {
let child;
if (c instanceof HTMLElement) child = node.appendChild(c)
else child = self.createNode(c, node, next);
if ( c.return ) next = child;
});
if (options.events) self.addEvents(node, options.events);
if (wrapper) {
if (wrapper instanceof Array) wrapper.forEach(function (w) {
let n = node.cloneNode(true);
if (options.events) self.addEvents(n, options.events);
w.appendChild(n);
})
else {
wrapper.appendChild(node);
}
}
return next || node;
},
setAttributes: function (node, attributes) {
let self = this;
((node instanceof Array) ? node : [ node ]).forEach(function (n) {
for (let attr in attributes) {
if (attr.match(new RegExp('^(disabled|required|selected|checked)$'))) n[attr] = attributes[attr];
else n.setAttribute(attr, attributes[attr]);
}
});
return self;
},
removeAttributes: function (node, attributes) {
let self = this;
if (attributes instanceof Array) {
attributes.forEach( function (a) {
self.removeAttributes(node, a);
});
return self;
}
((node instanceof Array) ? node : [node]).forEach(function (n) {
n.removeAttribute(attributes);
});
return self;
},
addStyles: function (node, styles) {
let self = this;
((node instanceof Array) ? node : [node]).forEach(function (n) {
for (let style in styles) {
n.style[style] = styles[style];
}
});
return self;
},
removeStyles: function (node, styles) {
let self = this;
((node instanceof Array) ? node : [node]).forEach(function (n) {
styles.forEach(s => delete node.style[s]);
});
return self;
},
addClass: function (node, cls) {
let self = this;
if (!node) return;
if (cls instanceof Array) {
cls.forEach(function (c) {
self.addClass(node, c);
});
return self;
}
((node instanceof Array) ? node : [node]).forEach(function (n) {
n.classList.add(cls);
});
return self;
},
removeClass: function (node, cls) {
let self = this;
if (!node) return;
if (cls instanceof Array) {
cls.forEach(function (c) {
self.removeClass(node, c);
});
return self;
}
((node instanceof Array) ? node : [node]).forEach(function (n) {
n.classList.remove(cls);
});
return self;
},
formData: function (form) {
let self = this;
let data = {}, error_fields = '';
for (var i = 0; i < form.elements.length; i++) {
var field = form.elements[i];
self.triggerEvent("keyup", field);
if (field.getAttribute('required')) self.triggerEvent("change", field);
if ( field.name !== undefined && field.name !== '') {
var val = (field.type == "radio" || field.type == "checkbox" ? (field.checked ? field.value !== "" && field.value !== 'on' ? field.value : true : false) : field.value);
if ( val !== undefined && val !== '') data[field.name] = val;
}
if (field.getAttribute("data-error")) error_fields += (error_fields ? ', ' : '') + field.parentNode.querySelector('label').innerText;
}
return error_fields ? error_fields : data;
},
addEvents: function (node, events) {
let self = this;
if (!node) return;
((node instanceof Array) ? node : [node]).forEach(function (n) {
for (let evt in events) {
n.addEventListener(evt, events[evt]);
}
});
return self;
},
clear: function (node) {
((node instanceof Array) ? node : [ node ]).forEach(function (n) {
n.innerHTML = '';
});
return self;
},
clone: function (struct) {
return JSON.parse(JSON.stringify(struct));
},
render: function () {
let self = this;
console.log(self);
self.renderHeader();
self.renderBody();
self.renderFooter();
self.renderCardModal();
},
renderHeader: function () {
let self = this;
let title = self.createNode({
tag: "div",
class: "minimal-card-title",
children: [
{
tag: "h1",
text: self.options.placeholders.title
},
{
tag: "p",
text: self.options.placeholders.description
},
]
}, self.wrapper);
let header = self.createNode({
tag: "div",
class: "minimal-card-header"
}, self.wrapper);
let left = self.createNode({
tag: "div",
class: "minimal-card-header-left"
}, header);
if (self.options.pagination) {
self.header_pagination = self.createNode({
tag: "div",
class: "minimal-card-pagination"
}, left);
self.renderPagination(self.header_pagination);
}
if (self.options.create) {
self.createNode({
tag: "button",
text: self.options.placeholders.create,
events: {
click: function (evt) {
evt.preventDefault();
self.cardModal.open({
type: "create"
});
}
}
}, left);
}
let right = self.createNode({
tag: "div",
class: "minimal-card-header-right"
}, header);
let sort_options = [], filter_options = [];
self.options.headers.forEach(function (h) {
let o = {
tag: "option",
value: h.name,
text: self.options.placeholders[h.name],
attributes: {}
};
if (h.sortable) {
let c = self.clone(o);
if (self.current_sort_column.name == h.name) c.attributes.selected = true;
sort_options.push(c);
}
if (h.filterable) {
if (self.current_filter_column.name == h.name) o.attributes.selected = true;
filter_options.push(o);
}
});
self.createNode({
tag: "div",
class: "minimal-card-sort",
children: [
{
tag: "label",
text: self.options.placeholders.sort
},
{
tag: "select",
class: "minimal-card-select",
children: sort_options,
events: {
change: function (evt) {
let value = evt.target.value;
let current = self.current_sort_column;
current.sortable.active = false;
let next = self.options.headers.find( n => n.name == value);
next.sortable.direction = current.sortable.direction;
next.sortable.active = true;
self.current_sort_column = next;
self.redrawCards();
}
}
},
{
tag: "select",
class: "minimal-card-select",
children: [
{
tag: "option",
text: self.options.placeholders.ascending,
value: "asc",
attributes: {
selected: self.current_sort_column.sortable.direction == 'asc' ? true : false
}
},
{
tag: "option",
text: self.options.placeholders.descending,
value: "desc",
attributes: {
selected: self.current_sort_column.sortable.direction == 'desc' ? true : false
}
},
],
events: {
change: function (evt) {
evt.preventDefault();
self.current_sort_column.sortable.direction = evt.target.value;
self.redrawCards();
}
}
}
],
}, right);
self.createNode({
tag: "div",
class: "minimal-card-filter",
children: [
{
tag: "label",
text: self.options.placeholders.filter
},
{
tag: "select",
class: "minimal-card-select",
children: filter_options,
events: {
change: function (evt) {
let value = evt.target.value;
let current = self.options.headers.find(n => n.filterable && n.filterable.active);
current.filterable.active = false;
let next = self.options.headers.find(n => n.name === value);
next.filterable.text = current.filterable.text;
next.filterable.active = true;
self.current_filter_column = next;
self.redrawCards();
}
}
},
{
tag: "input",
attributes: {
type: "search",
},
events: {
keyup: function (evt) {
let value = evt.target.value;
// TODO some check for valid input.
self.current_filter_column.filterable.text = value;
self.redrawCards();
}
}
}
]
}, right);
},
renderBody: function () {
let self = this;
self.body = self.createNode({
tag: "div",
class: "minimal-card-body"
}, self.wrapper);
if (self.options.data) self.renderRows(self.options.data);
},
renderFooter: function () {
let self = this;
let footer = self.createNode({
tag: "div",
class: "minimal-card-footer"
}, self.wrapper);
if (self.options.pagination) {
self.footer_pagination = self.createNode({
tag: "div",
class: "minimal-card-pagination"
}, footer);
self.renderPagination(self.footer_pagination);
}
},
renderCardModal: function () {
alert('TODO');
},
renderPagination: function (wrapper) {
let self = this;
let length = self.options.pagination.length;
let filtered = self.options.pagination.filtered;
if (!filtered) filtered = self.data.length;
let total_pages = Math.ceil(filtered / length) || 1;
self.pagination_first.push(self.createNode({
tag: "button",
children: self.iconOrText('first'),
attributes: {
disabled: true
},
events: {
click: function (evt) {
evt.preventDefault();
self.current_page = 1;
self.redrawCards();
}
}
}, wrapper));
self.pagination_prev.push(self.createNode({
tag: "button",
children: self.iconOrText('previous'),
attributes: {
disabled: true
},
events: {
click: function (evt) {
evt.preventDefault();
self.current_page--;
self.redrawCards();
}
}
}, wrapper));
self.pagination.push(self.createNode({
tag: "div",
class: "minimal-card-pagination-pages"
}, wrapper));
self.renderPaginationPages(total_pages);
self.pagination_next.push(self.createNode({
tag: "button",
children: self.iconOrText('next'),
attributes: {
disabled: total_pages > 1 ? false : true
},
events: {
click: function (evt) {
evt.preventDefault();
self.current_page++;
self.redrawCards();
}
}
}, wrapper));
self.pagination_next.push(self.createNode({
tag: "button",
children: self.iconOrText('last'),
attributes: {
disabled: total_pages > 1 ? false : true
},
events: {
click: function (evt) {
evt.preventDefault();
self.current_page = self.total_pages;
self.redrawCards();
}
}
}, wrapper));
let options = self.calculateLengthOptions();
self.createNode({
tag: "select",
class: "minimal-card-pagination-length",
children: options,
events: {
change: function (evt) {
self.options.pagination.length = parseInt(evt.target.value);
let new_total = self.options.pagination.total_pages || Math.ceil(self.data.length / self.options.pagination.length) || 1;
if (self.current_page > new_total) self.current_page = new_total;
self.wrapper.querySelectorAll('.minimal-card-pagination-length option[value="' + evt.target.value + '"]').forEach(function (p) {
p.selected = true;
});
self.redrawCards();
}
}
}, wrapper);
},
renderPaginationPages: function (total_pages) {
let self = this;
self.total_pages = total_pages;
self.clear(self.pagination);
let show = document.body.clientWidth > 500 ? 7 : 3;
let half = ((show - 1) / 2);
let start = self.current_page - half, last = self.current_page + half;
if (start <= 0) {
start = 1;
last = show;
}
if (last >= total_pages) {
last = total_pages;
start = (last - show) + 1;
if (start <= 0) start = 1;
}
for (let i = start; i <= last; i++) {
let p = {
tag: "button",
text: i,
events: {
click: function (evt) {
evt.preventDefault();
self.current_page = parseInt(evt.target.innerText);
self.redrawCards();
}
}
};
if ( i == self.current_page ) {
p.class = "minimal-card-current-page";
}
self.createNode(p, self.pagination);
}
},
redrawPagination: function () {
let self = this;
let length = self.options.pagination.length;
let cp = self.current_page;
let total = self.options.pagination.total;
let filtered = self.options.pagination.filtered;
if ( ! total ) total = filtered = self.data.length;
let tp = Math.ceil(filtered / length) || 1;
self.renderPaginationPages(tp);
if (cp == 1) {
self.setAttributes(self.pagination_first, { disabled: true });
self.setAttributes(self.pagination_prev, { disabled: true });
} else {
self.setAttributes(self.pagination_first, { disabled: false });
self.setAttributes(self.pagination_prev, { disabled: false });
}
if (cp == tp) {
self.setAttributes(self.pagination_next, { disabled: true });
self.setAttributes(self.pagination_last, { disabled: true });
} else {
self.setAttributes(self.pagination_next, { disabled: false });
self.setAttributes(self.pagination_last, { disabled: false });
}
},
calculateLengthOptions: function () {
let self = this;
let options = [];
self.options.length_options.forEach(function (n) {
let o = {
tag: "option",
text: n,
value: n
};
if (self.options.pagination.length == n) {
o.attributes = {};
o.attributes.selected = true;
}
options.push(o);
});
return options;
},
renderRows: function (data) {
let self = this;
if (!data) data = self.data;
if (!self.options.serverside) data = self.clientSide(data);
if (self.options.pagination) {
let current_page = self.current_page;
let length = self.options.pagination.length;
let start = length * (current_page - 1);
for (let i = start; i < start + length; i++) {
if (!data[i]) break;
self.renderRow(data[i]);
}
self.redrawPagination();
} else {
data.forEach(d => self.renderRow(d));
}
},
renderRow: function (row) {
let self = this;
let wrapper_classes = ["minimal-card-row"];
if (self.options.edit) wrapper_classes.push('minimal-card-row-editable');
let children = [];
if (self.options.delete) {
children.push({
tag: "div",
class: "minimal-card-row-delete",
children: [
{
tag: "button",
text: self.options.placeholders.delete,
events: {
click: function (evt) {
evt.preventDefault();
evt.stopPropagation();
self.cardModal.open({
type: "delete",
item: row
});
}
}
}
]
});
}
children.push({
tag: "div",
return: true,
class: "minimal-card-row-content"
});
let r = self.createNode({
tag: "div",
class: wrapper_classes,
events: {
click: function (evt) {
evt.preventDefault();
if (self.options.edit) self.cardModal.open({
type: "edit",
item: row
});
}
},
children: children
}, self.body);
self.options.headers.forEach(function (h) {
self.renderRowCell(r, h, row, 0);
});
},
renderRowCell: function (wrapper, header, row, no_info) {
let self = this;
if (header.no_render) return;
if (self.options.remove_empty && (row[header.name] === undefined | row[header.name] == '')) return;
let attr = {}, info = self.options.placeholders[header.name + '_info'];
if (!no_info && info) attr["data-tooltip-inline"] = info;
let cell = self.createNode({
tag: "div",
class: "minimal-card-row-cell",
children: [
{
tag: "b",
class: "minimal-card-row-cell-header",
text: self.options.placeholders[header.name],
attributes: attr
},
{
tag: "span",
text: row[header.name]
}
]
}, wrapper);
},
clientSide: function (data) {
let self = this;
let filter_column = self.current_filter_column;
if (
!self.currently_filtered
|| self.currently_filtered.name !== filter_column.name
|| self.currently_filtered.filterable.text !== filter_column.filterable.text
) {
if (filter_column.filterable.text == "" || filter_column.filterable.text == undefined)
self.filtered_data = undefined;
else {
data = data.filter(a => (new String(a[filter_column.name]).indexOf(filter_column.filterable.text)) + 1);
self.currently_filtered = self.clone(filter_column);
self.filtered_data = data;
}
} else data = self.filtered_data;
let sort_column = self.current_sort_column;
if (
!self.currently_sorted
|| self.currently_sorted.name !== sort_column.name
|| self.currently_sorted.sortable.directrion !== sort_column.sortable.direction
) {
let [ret1, ret2] = sort_column.sortable.direction == 'asc' ? [ 1, -1] : [-1, 1];
data = data.sort(function (a, b) {
if ( a[sort_column.name] > b[sort_column.name] ) {
return ret1;
}
return ret2;
});
if (filter_column.filterable.text) self.filtered_data = data;
else self.data = data;
self.currently_sorted = self.clone(sort_column);
}
return data;
},
iconOrText: function (type) {
let self = this;
return [
( self.options.icon_mode
? {
tag: "i",
class: self.options.placeholders[type]
} : {
tag: "span",
text: self.options.placeholders[type]
}
)
];
},
redrawCards: function () {
let self = this;
self.clear(self.body);
if (self.options.serverside) {
// TODO
} else {
self.renderRows();
}
},
renderCardModal: function () {
let self = this;
if (self.cardModal) return self.cardModal;
let modal_wrapper = self.createNode({
tag: "div",
class: [ "minimal-card-modal-wrapper", "minimal-card-modal-hide" ]
}, self.wrapper);
let modal = self.createNode({
tag: "div",
class: "minimal-card-modal"
}, modal_wrapper);
let header = self.createNode({
tag: "div",
class: "minimal-card-modal-header"
}, modal);
let title = self.createNode({
tag: "h2",
text: "Modal Title"
}, header);
let close = self.createNode({
tag: "div",
class: "minimal-card-close-modal",
children: self.iconOrText('close'),
events: {
click: function (evt) {
evt.preventDefault();
self.cardModal.close();
}
}
}, header);
let body = self.createNode({
tag: "form",
class: "minimal-card-modal-body",
events: {
submit: function (evt) {
evt.preventDefault();
self.cardModal.save();
}
}
}, modal);
self.createNode({
tag: "p",
text: "Some demo text for the modal"
}, body);
let footer = self.createNode({
tag: "div",
class: "minimal-card-modal-footer"
}, modal);
let save = self.createNode({
tag: "button",
class: "minimal-card-button-transparent",
children: self.iconOrText('save'),
events: {
click: function (evt) {
evt.preventDefault();
self.cardModal.save();
}
}
}, footer);
let cancel = self.createNode({
tag: "button",
class: "minimal-card-button-transparent",
children: self.iconOrText('cancel'),
events: {
click: function (evt) {
evt.preventDefault();
self.cardModal.close();
}
}
}, footer);
self.cardModal = {
modal: modal_wrapper,
title: title,
body: body,
item: undefined,
type: undefined,
open: function (options) {
this.type = options.type;
this.item = options.item;
this.body.innerHTML = '';
let bind_cb = self.options[this.type].render.bind(self);
bind_cb(this.body, this.item);
this.modal.classList.remove('minimal-card-modal-hide');
},
save: function () {
let data = self.formData(this.body);
let bind_cb = self.options[this.type].cb.bind(self);
bind_cb(data, this.body, this.item);
this.close();
},
close: function () {
this.modal.classList.add('minimal-card-modal-hide');
}
};
}
};
let strings = [
'Rock',
'Paper',
'Scissor',
'Card',
'Okay',
'Yet',
'Another',
'UI',
'Add',
'More',
'Strings',
'Foo',
'Bar',
'Zap',
'Pow',
'Thing',
'The',
'Great',
'New'
];
let versions = [
'0.01',
'0.02',
'0.03',
'0.04',
'0.05',
'0.06',
'0.07',
'0.08',
'0.09',
'0.10'
];
let status = [
'new',
'old',
'latest',
];
function random_string (length) {
length = Math.floor(Math.random()*length) + 1;
let string = '';
for (let i = 0; i < length; i++) {
if (string) string += ' ';
string += strings[Math.floor(Math.random()*strings.length)];
}
return string;
}
function generate_test_data () {
let data = {};
data.name = random_string(10);
data.status = status[Math.floor(Math.random()*status.length)];
data.abstract = random_string(50);
data.version_numified = versions[Math.floor(Math.random()*versions.length)];
return data;
}
let data = [];
for (let i = 0; i < 2000; i++) {
data.push(generate_test_data());
}
let wrapper = document.querySelector('#my-cards');
let options = {
create: {
render: function (form) {
let self = this;
console.log(self);
self.createNode(
{
tag: "p",
text: "Render your create form"
}, form
);
},
cb: function (data) {
let self = this;
alert('create a new item');
self.redrawCards();
}
},
edit: {
render: function (form, item) {
let self = this;
self.createNode(
{
tag: "p",
text: "Render your edit form"
}, form
);
},
cb: function (data) {
let self = this;
alert('edit an existing item');
self.redrawCards();
}
},
delete: {
render: function (form, item) {
let self = this;
self.createNode(
{
tag: "p",
text: "Render your delete form"
}, form
);
},
cb: function (data) {
let self = this;
alert('delete an existing item');
self.redrawCards();
}
},
pagination: { length: 8 },
placeholders: {
title: "Minimal Cards",
description: "A responsive minimal cards widget where you can sort, filter and paginate results",
sort: "Sort",
filter: "Search",
ascending: "Ascending",
descending: "Descending",
name: "Name",
status: "Status",
abstract: "Abstract",
version_numified: "Version",
first: "<<",
previous: "<",
next: ">",
last: ">>",
save: "Save",
cancel: "Cancel",
close: 'x',
create: '+ create',
delete: 'x',
},
headers: [
{
name: "name",
sortable: 1,
filterable: 1
},
{
name: "status",
sortable: 1,
filterable: 1
},
{
name: "abstract",
sortable: 1,
filterable: 1
},
{
name: "version_numified",
sortable: 1,
filterable: 1
},
],
data: data,
};
new MinimalCards(wrapper, options);
})(window);
!
