Files
2025-02-26 14:49:25 +07:00

218 lines
6.4 KiB
JavaScript

/**
* @namespace HTML related.
*/
ovm.html = ovm.html || {};
/**
* @function Get an HTML table corresponding to an input javascript array.
* @param input The input can be either a 1D array,
* 2D array, an array of objects or an object.
*/
ovm.html.appendCell = function(row, text)
{
var cell = row.insertCell(-1);
cell.appendChild(document.createTextNode(text));
};
/**
* @function
*/
ovm.html.appendRowForArray = function(table, input, level, maxLevel, rowHeader)
{
var row = null;
// loop through
for(var i=0; i<input.length; ++i) {
// more to come
if( typeof input[i] === 'number'
|| typeof input[i] === 'string'
|| input[i] === null
|| input[i] === undefined
|| level >= maxLevel ) {
if( !row ) {
row = table.insertRow(-1);
}
ovm.html.appendCell(row, input[i]);
}
// last level
else {
ovm.html.appendRow(table, input[i], level+i, maxLevel, rowHeader);
}
}
};
/**
* @function
*/
ovm.html.appendRowForObject = function(table, input, level, maxLevel, rowHeader)
{
var keys = Object.keys(input);
var row = null;
for( var o=0; o<keys.length; ++o ) {
// more to come
if( typeof input[keys[o]] === 'number'
|| typeof input[keys[o]] === 'string'
|| input[keys[o]] === null
|| input[keys[o]] === undefined
|| level >= maxLevel ) {
if( !row ) {
row = table.insertRow(-1);
}
if( o === 0 && rowHeader) {
ovm.html.appendCell(row, rowHeader);
}
ovm.html.appendCell(row, input[keys[o]]);
}
// last level
else {
ovm.html.appendRow(table, input[keys[o]], level+o, maxLevel, keys[o]);
}
}
// header row
// warn: need to create the header after the rest
// otherwise the data will inserted in the thead...
if( level === 2 ) {
var header = table.createTHead();
var th = header.insertRow(-1);
if( rowHeader ) {
ovm.html.appendCell(th, "");
}
for( var k=0; k<keys.length; ++k ) {
ovm.html.appendCell(th, ovm.utils.capitaliseFirstLetter(keys[k]));
}
}
};
/**
* @function
*/
ovm.html.appendRow = function(table, input, level, maxLevel, rowHeader)
{
// array
if( input instanceof Array ) {
ovm.html.appendRowForArray(table, input, level+1, maxLevel, rowHeader);
}
// object
else if( typeof input === 'object') {
ovm.html.appendRowForObject(table, input, level+1, maxLevel, rowHeader);
}
};
/**
* @function
*/
ovm.html.toTable = function(input)
{
var table = document.createElement('table');
ovm.html.appendRow(table, input, 0, 2);
return table;
};
/**
* @function
* @param term
* @param table
*/
ovm.html.filterTable = function(term, table) {
// de-highlight
ovm.html.dehighlight(table);
// split search terms
var terms = term.value.toLowerCase().split(" ");
// search
var text = 0;
var display = 0;
for (var r = 1; r < table.rows.length; ++r) {
display = '';
for (var i = 0; i < terms.length; ++i) {
text = table.rows[r].innerHTML.replace(/<[^>]+>/g, "").toLowerCase();
if (text.indexOf(terms[i]) < 0) {
display = 'none';
} else {
if (terms[i].length) {
ovm.html.highlight(terms[i], table.rows[r]);
}
}
table.rows[r].style.display = display;
}
}
};
/**
* @function Transform back each
* <span>preText <span class="highlighted">term</span> postText</span>
* into its original preText term postText
* @param container The container to de-highlight.
*/
ovm.html.dehighlight = function(container) {
for (var i = 0; i < container.childNodes.length; i++) {
var node = container.childNodes[i];
if (node.attributes
&& node.attributes['class']
&& node.attributes['class'].value === 'highlighted') {
node.parentNode.parentNode.replaceChild(
document.createTextNode(
node.parentNode.innerHTML.replace(/<[^>]+>/g, "")),
node.parentNode);
// Stop here and process next parent
return;
} else if (node.nodeType !== 3) {
// Keep going onto other elements
ovm.html.dehighlight(node);
}
}
};
/**
* @function Create a
* <span>preText <span class="highlighted">term</span> postText</span>
* around each search term
* @param term The term to highlight.
* @param container The container where to highlight the term.
*/
ovm.html.highlight = function(term, container) {
for (var i = 0; i < container.childNodes.length; i++) {
var node = container.childNodes[i];
if (node.nodeType === 3) {
// Text node
var data = node.data;
var data_low = data.toLowerCase();
if (data_low.indexOf(term) >= 0) {
//term found!
var new_node = document.createElement('span');
node.parentNode.replaceChild(new_node, node);
var result;
while ((result = data_low.indexOf(term)) !== -1) {
// before term
new_node.appendChild(document.createTextNode(
data.substr(0, result)));
// term
new_node.appendChild(ovm.html.createHighlightNode(
document.createTextNode(data.substr(
result, term.length))));
// reduce search string
data = data.substr(result + term.length);
data_low = data_low.substr(result + term.length);
}
new_node.appendChild(document.createTextNode(data));
}
} else {
// Keep going onto other elements
ovm.html.highlight(term, node);
}
}
};
/**
* @function
*/
ovm.html.createHighlightNode = function(child) {
var node = document.createElement('span');
node.setAttribute('class', 'highlighted');
node.attributes['class'].value = 'highlighted';
node.appendChild(child);
return node;
};