macro / plugin creation

[Mike]

As an experiment for the New Year, I am hoping to convert one of the
inline scripts I have been using to a plugin (a matter of learning vs
functionality)

//code//
/%
Table Highlighting for Sortable & TW Tables Version 12.19.2009
ELS simplified code structure
%/<script>
jQuery('table.sortable tbody tr').mouseover(function(){
jQuery(this).addClass('highlight');
});
jQuery('table.sortable tbody tr').mouseout(function(){
jQuery(this).removeClass('highlight');
});
jQuery('table.twtable tbody tr').mouseover(function(){
jQuery(this).addClass('highlight');
});
jQuery('table.twtable tbody tr').mouseout(function(){
jQuery(this).removeClass('highlight');
});
</script>/%
Transcluded .setStylesheet to add css rules & remove dependency on
stylesheet modifications
Modify Colors for highlight / even & odd table rows here !!
%/
<<tiddler {{
setStylesheet(
".highlight, .marked {background:"+store.getTiddlerSlice
('ColorPalette','SecondaryPale')+" !important;}\n"+
".oddRow {background-color:"+store.getTiddlerSlice
('ColorPalette','TertiaryLight')+";}\n"+
".evenRow {background-color: "+store.getTiddlerSlice
('ColorPalette','TertiaryMid')+";}\n"+
"table.sortable td.sortedCol {background:"+store.getTiddlerSlice
('ColorPalette','SecondaryLight')+";}\n"+
".viewer th, .viewer thead td, .twtable th, .twtable thead td
{background:"+store.getTiddlerSlice('ColorPalette','SecondaryMid')+";}
\n"
,"TableHighlightStyles");
"";}}>>
//end code//

I was originally thing to just dump into a systemConfig tiddler, but
after playing with it I think I need a macro. (couldn't get it to
work . . . ) Do I need to use a special syntax for the JQuery parts?
Can I create the stylesheet on load (like used in the script) or do I
need to create a shadow tiddler to hold it?

Can this be done without a macro?

Just trying to learn something new, any advise is appreciated

Thank You,

Mike

[Mark S.]

On the first part, you need to change "sortable" to "Sortable". I
don't know if the twtable class part has to be fixed -- I didn't test
that.

On the second part, I don't know if this is an error you introduced or
if its wrapping in google groups, but there's a space between the
function names and the starting parenthesis. Also, there's a ""; on
the end that shouldn't be there. When all this was straightened out,
your code works OK.

BUT ....

The first part will only apply if your script is opened/closed/
activated *after* the table is constructed. One way to obtain this
result is to paste the activation script in the tiddler below the
table. If you are doing this all the time, then you could put the code
in a separate tiddler and use a <<tiddler>> transclusion below the
tables.

The dynamic classes don't have to be invoked over and over, so
presumably you could put them at the bottom of your custom MainMenu
where they would always get applied once every time the page is
loaded.

HTH
Mark

[Michael Mahemoff]

> I was originally thing to just dump into a systemConfig tiddler, but
> after playing with it I think I need a macro.  (couldn't get it to
> work . . . )

Probably a good thing - in general, I've learned from others in the TW
community macros are generally the way to go. As a rule of thumb, if
it seems like a macro is possible, it's probably the way to go.

> Do I need to use a special syntax for the JQuery parts?

You can use jQuery to wire events for the DOM elements your macro
makes. You can call it "jQuery", but I personally prefer the
unobtrusiveness of "$". Since TiddlyWiki uses jQuery's noConflict to
disable "$" (for good reason, compatibility with plugins that use "$"
for something else), you need to reintroduce it if you want it. So I
follow FND's advice and do:

(function($) {
// all plugin code
})(jQuery);

> Can I create the stylesheet on load (like used in the script) or do I
> need to create a shadow tiddler to hold it?

You can create a section of the plugin tiddler to contain the
stylesheet shadow, and you have some code to read and apply it. (A
technique Jeremy showed me.)
http://tiddlywiki.mahemoff.com/ViewingTimesPlugin.html#ViewingTimesPlugin
does it for example (and also the jQuery thing).

var stylesheet = store.getTiddlerText(tiddler.title + "##StyleSheet");
if (stylesheet) { // check necessary because it happens more than
once for some reason
config.shadowTiddlers["StyleSheet"+tiddler.title] = stylesheet;
store.addNotification("StyleSheet"+tiddler.title, refreshStyles);
}
.....
.....
!StyleSheet
body { background: blue; }
....

[Mike]

Great Feedback :P

going macro did the trick, and it is working !
(GG did mess up the long lines in the script, and I have made the
suggested changes for that also)

I appreciate the quick & thorough feedback (a great learning exercise
for me)

Thank You !

Mike

On Jan 1, 12:06 am, Michael Mahemoff <mich...@mahemoff.com> wrote:
> > I was originally thing to just dump into a systemConfig tiddler, but
> > after playing with it I think I need a macro.  (couldn't get it to
> > work . . . )
>
> Probably a good thing - in general, I've learned from others in the TW
> community macros are generally the way to go. As a rule of thumb, if
> it seems like a macro is possible, it's probably the way to go.
>
> > Do I need to use a special syntax for the JQuery parts?
>
> You can use jQuery to wire events for the DOM elements your macro
> makes. You can call it "jQuery", but I personally prefer the
> unobtrusiveness of "$". Since TiddlyWiki uses jQuery's noConflict to
> disable "$" (for good reason, compatibility with plugins that use "$"
> for something else), you need to reintroduce it if you want it. So I
> follow FND's advice and do:
>
> (function($) {
>   // all plugin code
>
> })(jQuery);
> > Can I create the stylesheet on load (like used in the script) or do I
> > need to create a shadow tiddler to hold it?
>
> You can create a section of the plugin tiddler to contain the
> stylesheet shadow, and you have some code to read and apply it. (A

> technique Jeremy showed me.)http://tiddlywiki.mahemoff.com/ViewingTimesPlugin.html#ViewingTimesPl...

[Mike]

Strange glitch / bug. . .

If I transclude a table it works fine, but if I use the same
transclusion in a startup tiddler (DefaultTiddlers) the highlight does
not work (but the stylesheet changes do) (Loading macro via
ViewTemplate <span macro="highlight"></span>)

Non transcluded content works fine . . .
The script loaded via ViewTempalte does not have this problem . . .

Do I need to add something else to the plugin?

Thanks Again !!

Mike

[Mike]

My Example / Test Case
http://www.strm.us/tw/examples_twgg/highlightpluginexample

Any Thoughts?

I feel like I missed something simple . . .

Mike

[Mark S.]

The transcluded tiddler is displayed *after* the macro has run, so the
macro hasn't been applied to it. If you click on a tab, and then go
back, you'll notice that the highlighting now works on the transcluded
tiddler. Put the macro at the bottom of the tiddler and I think you'll
find it works every time.

Mark

On Jan 1, 9:29 am, Mike <eris...@gmail.com> wrote:
> My Example / Test Casehttp://www.strm.us/tw/examples_twgg/highlightpluginexample

[Mike]

It does work, and as a fix on my (3) default tiddlers I have added
<<highlight>> in addition to the view template macro.
I have a better understanding of what is happening, but was surprised
with the way the plugin and script acted differently.

Is their a way to change my ViewTemplate macro call so that this is
not needed? (<span macro="highlight"></span>)

Just a shot in the dark . . .

Thanks,

Mike

[Måns]

Hi Mike

> My Example / Test Casehttp://www.strm.us/tw/examples_twgg/highlightpluginexample

I like it very much!! - thanks very much for sharing - Happy new year
from Denmark..

regards Måns Mårtensson