Will give it my best shot here Jon. First I just overloaded the
perfromFiltering function, but then decided that I needed just a bit
more.
I added a check box to the right of the filter input boxes.
Based on the value of the check box, the perfromFiltering function
either runs as usual, or inverts its output.
Adjusted the number of characters required to start the filtering to 3
to prevent the 'flicker' on gets when filtering inverted.
There is a lot more that I want to do, but as I mentioned, I am slow
at this because of a lack javascript experience. I
have found that I do as much as possible on the server side in perl.
For example, I do almost all the formatting of bubble
contents on the server side before sending back as XML. As such, it
is pretty easy to format info in the bubble as a table
and provide id's which I hope to later be able to use to provide
"summary" info of those elements which are still available
after filtering. Any, I am wandering on about this, so.....
Following is the example.js as it now appears with just a few
comments. I hope it is appropriate to post it this way.
Hope this is helpful.
function centerSimileAjax(date) {
tl.getBand(0).setCenterVisibleDate
(SimileAjax.DateTime.parseGregorianDateTime(date));
}
function setupFilterHighlightControls(div, timeline, bandIndices,
theme) {
var table = document.createElement("table");
var tr = table.insertRow(0);
var td = tr.insertCell(0);
td.innerHTML = "Filter:";
td = tr.insertCell(1);
td.innerHTML = "Highlight:";
var handler = function(elmt, evt, target) {
onKeyPress(timeline, bandIndices, table);
};
tr = table.insertRow(1);
tr.style.verticalAlign = "top";
td = tr.insertCell(0);
var input = document.createElement("input");
input.type = "text";
SimileAjax.DOM.registerEvent(input, "keypress", handler);
td.appendChild(input);
for (var i = 0; i < theme.event.highlightColors.length; i++) {
td = tr.insertCell(i + 1);
input = document.createElement("input");
input.type = "text";
SimileAjax.DOM.registerEvent(input, "keypress", handler);
td.appendChild(input);
var divColor = document.createElement("div");
divColor.style.height = "0.5em";
divColor.style.background = theme.event.highlightColors[i];
td.appendChild(divColor);
}
td = tr.insertCell(tr.cells.length);
var button = document.createElement("button");
button.innerHTML = "Clear All";
SimileAjax.DOM.registerEvent(button, "click", function() {
clearAll(timeline, bandIndices, table);
});
td.appendChild(button);
//attempt to add a radio button to invert the filter
td = tr.insertCell(tr.cells.length);
var cb = document.createElement("input");
cb.id = "f_invert";
cb.setAttribute("type", "checkbox");
cb.setAttribute("name", "Invert Filter");
cb.setAttribute("value", "invert");
td.appendChild(cb);
//added by wes
div.appendChild(table);
}
var timerID = null;
function onKeyPress(timeline, bandIndices, table) {
if (timerID != null) {
window.clearTimeout(timerID);
}
timerID = window.setTimeout(function() {
performFiltering(timeline, bandIndices, table);
}, 300);
}
function cleanString(s) {
return s.replace(/^\s+/, '').replace(/\s+$/, '');
}
function performFiltering(timeline, bandIndices, table) {
timerID = null;
var tr = table.rows[1];
var text = cleanString(tr.cells[0].firstChild.value);
// var filterMatcher = null; //original filterMatcher function
// if (text.length > 0) {
// var regex = new RegExp(text, "i");
// filterMatcher = function(evt) {
// return regex.test(evt.getText()) || regex.test
(evt.getDescription());
// };
// }
var filterMatcher = null; //my version of the filterMatcher
function
if (text.length > 3) { //bump this up to 3 to prevent
flicker
var regex = new RegExp(text, "i");
filterMatcher = function(evt) {
var invert = document.getElementById
("f_invert").checked //chkbox value
var match = regex.test(evt.getText()) || regex.test
(evt.getDescription());
if (invert == true) { //simply invert the results of
the
function if chkbox
if (match == true) {
return false;
} else {
return true;
}
} else { //otherwise just filter as normal
return regex.test(evt.getText()) || regex.test
(evt.getDescription());
}
};
}
var regexes = [];
var hasHighlights = false;
for (var x = 1; x < tr.cells.length - 1; x++) {
var input = tr.cells[x].firstChild;
var text2 = cleanString(input.value);
if (text2.length > 0) {
hasHighlights = true;
regexes.push(new RegExp(text2, "i"));
} else {
regexes.push(null);
}
}
var highlightMatcher = hasHighlights ? function(evt) {
var text = evt.getText();
var description = evt.getDescription();
for (var x = 0; x < regexes.length; x++) {
var regex = regexes[x];
if (regex != null && (regex.test(text) || regex.test
(description))) {
return x;
}
}
return -1;
} : null;
for (var i = 0; i < bandIndices.length; i++) {
var bandIndex = bandIndices[i];
timeline.getBand(bandIndex).getEventPainter().setFilterMatcher
(filterMatcher);
timeline.getBand(bandIndex).getEventPainter
().setHighlightMatcher(highlightMatcher);
}
timeline.paint();
}
function clearAll(timeline, bandIndices, table) {
var tr = table.rows[1];
for (var x = 0; x < tr.cells.length - 1; x++) {
tr.cells[x].firstChild.value = "";
}
for (var i = 0; i < bandIndices.length; i++) {
var bandIndex = bandIndices[i];
timeline.getBand(bandIndex).getEventPainter().setFilterMatcher
(null);
timeline.getBand(bandIndex).getEventPainter
().setHighlightMatcher(null);
}
timeline.paint();
}
On May 5, 5:06 pm, Jon Crump <jjcr...@u.washington.edu> w,rote:
> On Sat, 2 May 2009, contemplative wrote:
>
> > Thanks Larry,
> > That did it. I just overloaded the performFiltering function and that
> > did the trick.
> > Appreciate you help and for pointing out that David H. did the
> > original work.
>
> > Regards
> > wes
>
> I would find your modification of performFiltering instructive. Could you
> share your solution with us?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To post to this group, send email to simile-widgets@googlegroups.com
To unsubscribe from this group, send email to
simile-widgets+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en
-~----------~----~----~----~------~----~------~--~---
