init
This commit is contained in:
@@ -0,0 +1,217 @@
|
||||
/**
|
||||
* @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;
|
||||
};
|
||||
Reference in New Issue
Block a user