Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added option for DOM-node-based virtualization (fixes #145) #150

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added option for DOM-node-based virtualization (fixes #145) #150

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 36 additions & 20 deletions clusterize.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,13 @@
no_data_class: 'clusterize-no-data',
no_data_text: 'No data',
keep_parity: true,
dom_mode: false,
callbacks: {}
}

// public parameters
self.options = {};
var options = ['rows_in_block', 'blocks_in_cluster', 'show_no_data_row', 'no_data_class', 'no_data_text', 'keep_parity', 'tag', 'callbacks'];
var options = ['rows_in_block', 'blocks_in_cluster', 'show_no_data_row', 'no_data_class', 'no_data_text', 'keep_parity', 'tag', 'dom_mode', 'callbacks'];
for(var i = 0, option; option = options[i]; i++) {
self.options[option] = typeof data[option] != 'undefined' && data[option] != null
? data[option]
Expand Down Expand Up @@ -104,7 +105,7 @@
self.destroy = function(clean) {
off('scroll', self.scroll_elem, scrollEv);
off('resize', window, resizeEv);
self.html((clean ? self.generateEmptyRow() : rows).join(''));
self.html((clean ? self.generateEmptyRow() : rows));
}
self.refresh = function(force) {
if(self.getRowsHeight(rows) || force) self.update(rows);
Expand Down Expand Up @@ -155,8 +156,12 @@
// fetch existing markup
fetchMarkup: function() {
var rows = [], rows_nodes = this.getChildNodes(this.content_elem);
while (rows_nodes.length) {
rows.push(rows_nodes.shift().outerHTML);
if (this.options.dom_mode) {
rows = rows_nodes;
} else {
while (rows_nodes.length) {
rows.push(rows_nodes.shift().outerHTML);
}
}
return rows;
},
Expand All @@ -166,7 +171,7 @@
opts.content_tag = this.content_elem.tagName.toLowerCase();
if( ! rows.length) return;
if(ie && ie <= 9 && ! opts.tag) opts.tag = rows[0].match(/<([^>\s/]*)/)[1].toLowerCase();
if(this.content_elem.children.length <= 1) cache.data = this.html(rows[0] + rows[0] + rows[0]);
if(this.content_elem.children.length <= 1) cache.data = this.html([rows[0]]);
if( ! opts.tag) opts.tag = this.content_elem.children[0].tagName.toLowerCase();
this.getRowsHeight(rows);
},
Expand Down Expand Up @@ -212,7 +217,7 @@
td.appendChild(no_data_content);
}
empty_row.appendChild(td || no_data_content);
return [empty_row.outerHTML];
return opts.dom_mode ? [empty_row] : [empty_row.outerHTML];
},
// generate cluster for current scroll position
generate: function (rows, cluster_num) {
Expand Down Expand Up @@ -250,7 +255,7 @@
clusterize_prefix = 'clusterize-';
tag.className = [clusterize_prefix + 'extra-row', clusterize_prefix + class_name].join(' ');
height && (tag.style.height = height + 'px');
return tag.outerHTML;
return this.options.dom_mode ? tag : tag.outerHTML;
},
// if necessary verify data changed and insert to DOM
insertToDOM: function(rows, cache) {
Expand All @@ -259,7 +264,7 @@
this.exploreEnvironment(rows, cache);
}
var data = this.generate(rows, this.getClusterNum()),
this_cluster_rows = data.rows.join(''),
this_cluster_rows = data.rows,
this_cluster_content_changed = this.checkChanges('data', this_cluster_rows, cache),
top_offset_changed = this.checkChanges('top', data.top_offset, cache),
only_bottom_offset_changed = this.checkChanges('bottom', data.bottom_offset, cache),
Expand All @@ -271,10 +276,10 @@
this.options.keep_parity && layout.push(this.renderExtraTag('keep-parity'));
layout.push(this.renderExtraTag('top-space', data.top_offset));
}
layout.push(this_cluster_rows);
layout = layout.concat(this_cluster_rows);
data.bottom_offset && layout.push(this.renderExtraTag('bottom-space', data.bottom_offset));
callbacks.clusterWillChange && callbacks.clusterWillChange();
this.html(layout.join(''));
this.html(layout);
this.options.content_tag == 'ol' && this.content_elem.setAttribute('start', data.rows_above);
this.content_elem.style['counter-increment'] = 'clusterize-counter ' + (data.rows_above-1);
callbacks.clusterChanged && callbacks.clusterChanged();
Expand All @@ -284,27 +289,38 @@
},
// unfortunately ie <= 9 does not allow to use innerHTML for table elements, so make a workaround
html: function(data) {
var content_elem = this.content_elem;
var content_elem = this.content_elem, opts = this.options;
if(ie && ie <= 9 && this.options.tag == 'tr') {
var div = document.createElement('div'), last;
div.innerHTML = '<table><tbody>' + data + '</tbody></table>';
div.innerHTML = '<table><tbody></tbody></table>';
var tbody = div.firstChild.firstChild;
if (opts.dom_mode) {
for (var i = 0, ii = data.length; i < ii; i++) {
tbody.appendChild(data[i]);
}
} else {
tbody.innerHTML = data.join('');
}
while((last = content_elem.lastChild)) {
content_elem.removeChild(last);
}
var rows_nodes = this.getChildNodes(div.firstChild.firstChild);
var rows_nodes = this.getChildNodes(tbody);
while (rows_nodes.length) {
content_elem.appendChild(rows_nodes.shift());
}
} else {
content_elem.innerHTML = data;
if (opts.dom_mode) {
while (content_elem.firstChild) content_elem.removeChild(content_elem.firstChild);
for (var i = 0, ii = data.length; i < ii; i++) {
content_elem.appendChild(data[i]);
}
} else {
content_elem.innerHTML = data.join('');
}
}
},
getChildNodes: function(tag) {
var child_nodes = tag.children, nodes = [];
for (var i = 0, ii = child_nodes.length; i < ii; i++) {
nodes.push(child_nodes[i]);
}
return nodes;
return [].slice.call(tag.children);
},
checkChanges: function(type, value, cache) {
var changed = value != cache[type];
Expand All @@ -328,4 +344,4 @@
}

return Clusterize;
}));
}));