Re: examples.js - filter/highlight
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 {
Re: examples.js - filter/highlight
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 -~--~~~~--~~--~--~---
Re: examples.js - filter/highlight
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
On May 1, 12:12 pm, larryk...@yahoo.com wrote:
> Hi,
>
> The filter code, along with most all of timeline is courtesy of David H.
>
> I'm sending this from the road, so I don't have access to the src. My
> recollection is that the filtermatcher function returns true or false for
> event to be included or not. Your code sample shows where the fultermatcher
> function is registered with timeline, you are not showing the implementation
> of the filtermatcher function itself.
>
> To change the sense of the filter function, just change the function by
> inverting its output value. You don't need to change timeline itself, just
> your function. Hope this is clear, ask if not.
>
> Regards,
> Larry
>
> Sent via BlackBerry from T-Mobile
>
> -Original Message-
> From: contemplative
>
> Date: Mon, 27 Apr 2009 14:53:27
> To: SIMILE Widgets
> Subject: examples.js - filter/highlight
>
> I have been very pleased with the functionality offered by the filter
> routines. Many thanks to the author (whoever that might be).
>
> What I want to do is invert the action of the filter, such that it
> hides that which I type in, leaving unmatched events visible.
>
> I am afraid my coding skills lie primarily in perl, not javascript
> however. Thus, if there is someone who could point me in the right
> direction, I am pretty sure I can modify my own copy of examples.js to
> do what I would like it to do.
>
> Following is the piece that I think does the work, but I don't know
> how:
> 104 for (var i = 0; i < bandIndices.length; i++) {
> 105 var bandIndex = bandIndices[i];
> 106 timeline.getBand(bandIndex).getEventPainter
> ().setFilterMatcher(filterMatcher);
> 107 timeline.getBand(bandIndex).getEventPainter
> ().setHighlightMatcher(highlightMatcher);
> 108 }
> 109 timeline.paint();
>
> Thanks in advance for any constructive input.
>
> wes
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
Re: examples.js - filter/highlight
Hi,
The filter code, along with most all of timeline is courtesy of David H.
I'm sending this from the road, so I don't have access to the src. My
recollection is that the filtermatcher function returns true or false for event
to be included or not. Your code sample shows where the fultermatcher function
is registered with timeline, you are not showing the implementation of the
filtermatcher function itself.
To change the sense of the filter function, just change the function by
inverting its output value. You don't need to change timeline itself, just your
function. Hope this is clear, ask if not.
Regards,
Larry
Sent via BlackBerry from T-Mobile
-Original Message-
From: contemplative
Date: Mon, 27 Apr 2009 14:53:27
To: SIMILE Widgets
Subject: examples.js - filter/highlight
I have been very pleased with the functionality offered by the filter
routines. Many thanks to the author (whoever that might be).
What I want to do is invert the action of the filter, such that it
hides that which I type in, leaving unmatched events visible.
I am afraid my coding skills lie primarily in perl, not javascript
however. Thus, if there is someone who could point me in the right
direction, I am pretty sure I can modify my own copy of examples.js to
do what I would like it to do.
Following is the piece that I think does the work, but I don't know
how:
104for (var i = 0; i < bandIndices.length; i++) {
105var bandIndex = bandIndices[i];
106timeline.getBand(bandIndex).getEventPainter
().setFilterMatcher(filterMatcher);
107timeline.getBand(bandIndex).getEventPainter
().setHighlightMatcher(highlightMatcher);
108}
109timeline.paint();
Thanks in advance for any constructive input.
wes
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
examples.js - filter/highlight
I have been very pleased with the functionality offered by the filter
routines. Many thanks to the author (whoever that might be).
What I want to do is invert the action of the filter, such that it
hides that which I type in, leaving unmatched events visible.
I am afraid my coding skills lie primarily in perl, not javascript
however. Thus, if there is someone who could point me in the right
direction, I am pretty sure I can modify my own copy of examples.js to
do what I would like it to do.
Following is the piece that I think does the work, but I don't know
how:
104for (var i = 0; i < bandIndices.length; i++) {
105var bandIndex = bandIndices[i];
106timeline.getBand(bandIndex).getEventPainter
().setFilterMatcher(filterMatcher);
107timeline.getBand(bandIndex).getEventPainter
().setHighlightMatcher(highlightMatcher);
108}
109timeline.paint();
Thanks in advance for any constructive input.
wes
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
