218 lines
6.4 KiB
JavaScript
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;
|
|
};
|