Suggestion for wikifying NestedSliders labels
MilchFlasche
Nested sliders are really convenient and almost essential, and I really
like this plugin of Eric.
It uses such syntax:
+++^width of popup^[label|tooltip]
Texts...
===
which is very simple and clear. However, I found that any markup
outside this syntax would affect both the label and the inner texts.
For example, if I want to make the label like a reference link, I would
have to put "^^" (superscript by character markup of TW) before and
after the whole nested slider markups; this would render the label in
superscripts, but the texts inside the slider or popup are also
affected.
So I wonder is it possible to allow wiki markups inside the brackets [
] to affect the label only? Thus I could write like this:
+++^21%^[^^Note^^]
texts of the note...
===
and only the label "Note" becomes superscript, not the texts inside.
Cheers.
[tags: suggestion, NestedSlidersPlugin]
Eric Shulman
> Texts...
> ===
You left out a whole bunch of stuff!!! This is the complete syntax for
NestedSliders:
++++(cookiename)!!!!!^width^*{{class{[label=key|tooltip]}}}>...
content goes here
===
(see http://www.TiddlyTools.com/#NestedSlidersPlugin for documentation)
> However, I found that any markup
> outside this syntax would affect both the label and the inner texts.
> For example, if I want to make the label like a reference link, I would
> have to put "^^" (superscript by character markup of TW) before and
> after the whole nested slider markups; this would render the label in
> superscripts, but the texts inside the slider or popup are also
> affected.
> So I wonder is it possible to allow wiki markups inside the brackets [
> ] to affect the label only? Thus I could write like this:
Although it might seem reasonable to "wikify the label", this is simply
not the case...
While using simple *formatting* markup could make sense, what happens
if the label is, for example, a WikiWord? Does clicking the label open
the slider or open the tiddler? There's no way to know which action
you want to occur when someone clicks the label.
It gets worse: what happens if the label is a macro? This might seem
useful on the face of it (such as using <<today>> to make a slider
label with the current date). BUT... it would also permit <<tiddler
FooBar>>, making the entire contents of a tiddler into a slider label!
Just suppose that tiddler has a large table or an <html> form in it...
YUCK!
AND... if we were to wikify() the label, you could even put an entire
nested slider declaration INSIDE the label... this would be a big
mess!!
It seems that, for your purposes, you don't really need to parse *full*
wiki syntax. What you really want is control for *some* kinds of text
formatting in the slider label:
Specifically, take note of the syntax for the slider label:
{{class{[label=key|tooltip]}}}
To style the label, you should define a CSS class (in your StyleSheet)
.super { vertical-align:super; }
and then use like this:
+++{{super{[label|tip]}}}
text
===
ALSO...
if CSS class styling simply isn't enough, you can *assign HTML directly
to the label* by using the following InlineJavascript technique:
+++[label]
text
===
<script>place.lastChild.button.innerHTML="..."</script>
where:
* "place" is the div containing the inline script (i.e., the tiddler
element)
* "lastChild" is the last element added to the tiddler div prior to the
script (i.e., the slider "panel" div)
* "button" is a custom attribute added to all slider panels and refers
to the label element associated with the slider panel.
* "innerHTML" - assigning a string of HTML syntax to this property
causes the browser to actually PARSE the html and render DOM elements.
Thus, using your example from above, you would instead write it this
way:
+++^21%^[Note]
texts of the note...
===
<script>place.lastChild.button.innerHTML="<sup>Note</sup>";</script>
Note that for simple style 'tweaks', you could also assign directly to
the label's style attributes instead of assigning and rendering HTML:
+++^21%^[Note]
texts of the note...
===
<script>place.lastChild.button.style.verticalAlign="super";</script>
HTH,
-e
Eric Shulman
TiddlyTools / ELS Design Studios
MilchFlasche
Eric Shulman wrote:
> > +++^width of popup^[label|tooltip]
> > Texts...
> > ===
>
> You left out a whole bunch of stuff!!! This is the complete syntax for
> NestedSliders:
>
> ++++(cookiename)!!!!!^width^*{{class{[label=key|tooltip]}}}>...
> content goes here
> ===
> (see http://www.TiddlyTools.com/#NestedSlidersPlugin for documentation)
>
Wow, I'm so sorry, I must have skipped something important to me. I
admit that I was a bit simplifying when quoting the syntax rules, and I
even didn't notice in the new documentation that the new custom class
markup is also available in NestedSliderPlugin syntax!
> It seems that, for your purposes, you don't really need to parse *full*
> wiki syntax. What you really want is control for *some* kinds of text
> formatting in the slider label:
Yes, yes, you've got it right ^_^
>
> Specifically, take note of the syntax for the slider label:
> {{class{[label=key|tooltip]}}}
> To style the label, you should define a CSS class (in your StyleSheet)
> .super { vertical-align:super; }
> and then use like this:
> +++{{super{[label|tip]}}}
> text
> ===
>
> HTH,
> -e
> Eric Shulman
> TiddlyTools / ELS Design Studios
Okay, now I know I can use this markup to style the label separately,
and I'll try it out. Thank you for your detailed explanation :)
Cheers.