Sliders in TW5

[Yakov]

Hello all, hi Jeremy,

I've got a small proposal for TiddlyWiki 5. Sorry, I haven't dug much, only took a look at TW5 at the main site [1] to make sure what I propose is not the case.

In TiddlyWiki classic, sliders have somewhat bulky syntax, especially when a slider opens something in the same tiddler. But we also have NestedSlidersPlugin from Eric [2], which simplifies this much. My proposal is to support partially NestedSlidersPlugin's syntax in TW5:

+++(cookie)[label]
content
===

This would:
* be simple and clean
* ease a bit migration of content from TW classic to TW5
* may be ease implementation of NestedSlidersPlugin in TW5

Best regards,
Yakov

[1] http://five.tiddlywiki.com/
[2] http://tiddlytools.com/#NestedSlidersPlugin

[Jeremy Ruston]

Hi Yakov

Thanks for the feedback. I'm keen to add syntax for some higher level constructs like sliders, and have been thinking along similar lines. I would like to throw in some related open questions that might be useful to explore.

First, a bit of background. In TW5, sliders and several other interactive features are composed from two simpler widgets working together: the 'button' widget can change the value of a tiddler in response to a click, and the 'reveal' widget shows or hides a block of text depending on whether a tiddler has a given value.

Here's an example of a raw slider in TW5:

<$button popup="StateTiddler">Open</$button>

<$reveal type="nomatch" state="StateTiddler" text="">

This is the text that will be hid or shown

</$reveal>

If you paste that into a tiddler, open the tiddler called "StateTiddler" and then click the "open" button, you'll see the value of the tiddler change.

Obviously, the syntax above is a bit clumsy for everyday use. The primary alternative is to define and use a macro that encapsulates the slider functionality. For example:

\define slider(caption,state,text)

<$button popup="$state$">$caption$</$button>

<$reveal type="nomatch" state="$state$" text="">

$text$

</$reveal>

\end

<<slider "Open" "StateTiddler" "This is the text that will be hid or shown">>

So, what you're suggesting is essentially to devise a wikitext syntax that can be parsed and rendered as that <$button>/<$reveal> combination. Along the same lines, I'm interested in wikitext syntax for tabs, which are actually implemented as a set of interleaved sliders. I've been considering something like this:

__|Title|__

Some content to go in this tab

__|Title2|__

More content

____(statetiddler)

The end of the tab control

('statetiddler' denotes the tiddler that contains the state of the tab control -- the information that was stored in a cookie in TWClassic)

Now, I'm wondering if the syntax for sliders and tabs could be or should be in any sort of harmony?

Because sliders can be represented as macros so neatly, I'm wondering about providing a special type of parser rule that basically maps a regexp to a macro invocation.

One could imagine such a rule being encoded like this:

regexp: \+\+\+\(([a-zA-Z0-9-_]+)\)\[([a-zA-Z0-9-_]+)\]\n([a-zA-Z0-9-_]+)\n===

macro: slider

params: state caption text

In practice,  the regexp would need to be more complicated than that, but you get the idea. Hopefully a lot easier than authoring a full blown JS module.

What do you think?

Best wishes

Jeremy

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Jeremy Ruston
mailto:jeremy...@gmail.com

[PMario]

I personally prefer text that can be read without needing to click buttons. ..and.. text "hidden" inside Tabs and Sliders can not be printed. So I'd like to have something like this

ContentTiddler
! tab one
some text

! tab two
some more text

DisplayTiddler
<<useSectionsAsTabs ContentTiddler StatusTiddler defaultTab:2>>

<<useSectionAsSlider "ContentTiddler##tab two" StatusTiddler default:open>>


So ContentTiddler can be nicely printed and DisplayTiddler can do what ever you want with transcluding stuff from ContentTiddler

-m

[Yakov]

Hi Jeremy,

среда, 3 июля 2013 г., 23:16:39 UTC+4 пользователь Jeremy Ruston написал:

Hi Yakov

Thanks for the feedback. I'm keen to add syntax for some higher level constructs like sliders, and have been thinking along similar lines. I would like to throw in some related open questions that might be useful to explore.

First, a bit of background. In TW5, sliders and several other interactive features are composed from two simpler widgets working together: the 'button' widget can change the value of a tiddler in response to a click, and the 'reveal' widget shows or hides a block of text depending on whether a tiddler has a given value.

That's nice, I'd use separate buttons and contents in one of my TWs were TW5.

Here's an example of a raw slider in TW5:

<$button popup="StateTiddler">Open</$button>

<$reveal type="nomatch" state="StateTiddler" text="">

This is the text that will be hid or shown

</$reveal>

If you paste that into a tiddler, open the tiddler called "StateTiddler" and then click the "open" button, you'll see the value of the tiddler change.

Obviously, the syntax above is a bit clumsy for everyday use. The primary alternative is to define and use a macro that encapsulates the slider functionality. For example:

\define slider(caption,state,text)

<$button popup="$state$">$caption$</$button>

<$reveal type="nomatch" state="$state$" text="">

$text$

</$reveal>

\end

<<slider "Open" "StateTiddler" "This is the text that will be hid or shown">>

So, what you're suggesting is essentially to devise a wikitext syntax that can be parsed and rendered as that <$button>/<$reveal> combination. Along the same lines, I'm interested in wikitext syntax for tabs, which are actually implemented as a set of interleaved sliders. I've been considering something like this:

__|Title|__

Some content to go in this tab

__|Title2|__

More content

____(statetiddler)

The end of the tab control

('statetiddler' denotes the tiddler that contains the state of the tab control -- the information that was stored in a cookie in TWClassic)

Now, I'm wondering if the syntax for sliders and tabs could be or should be in any sort of harmony?

Well, I suppose this can be done in a quite simple way:

+++[label tab 1]
contents of the tab 1
+++[label tab 2]
contents of the tab 2
...
===

I guess one would hardly need "tabs" with one tab; and, at least in Eric's implementation, nested sliders can't be used one inside another.

Because sliders can be represented as macros so neatly, I'm wondering about providing a special type of parser rule that basically maps a regexp to a macro invocation.

One could imagine such a rule being encoded like this:

regexp: \+\+\+\(([a-zA-Z0-9-_]+)\)\[([a-zA-Z0-9-_]+)\]\n([a-zA-Z0-9-_]+)\n===

macro: slider

params: state caption text

In practice,  the regexp would need to be more complicated than that, but you get the idea. Hopefully a lot easier than authoring a full blown JS module.

Well, I guess the implementation can be grabbed right from the NestedSlidersPlugin (with "unnecessary" part removed), although I don't know how those "rules" are processed and whether they have names/can be hijacked (I mean, if Eric reimplements NestedSliderPlugin for TW5, it should substitute a simpler "rule").

Best regards,
Yakov.

[Stephan Hradek]

Hi Jeremy!

I started to use this macro, which I adopted from your example:

\define Comment(text)
<$button class="note" popup="$:/state/Comments"><img src="data:image/gif;base64,R0lGODdhEAAQAIACAAAAAOroMSwAAAAAEAAQAAACFYyPqcutAKN0tCYJrN4HRw5eWEiGBQA7"/></$button>
<$reveal type="nomatch" text="" default="" state="$:/state/Comments" animate="yes">
<div class="Comments">$text$</div>
</$reveal>
\end

It is called like this:

<<Comment
    "I don't see the [[advantage]] here for obvious reason:

     * Doesn't fit
     * Awful color"
>>

(example on skeeve.tiddlyspot.com)

Of course the "*" don't render as a bulleted list, while o.t.o.h. [[advantage]] does link to a tiddler.

Is there any (easy) way to be able to reveal wikitext? Or is there any way to supply wikitext to a macro?

If not, maybe this would be a way to achieve it?

<<Comment>>
I don't see the [[advantage]] here for obvious reason:

* Doesn't fit
* Awful color
<</Comment>>

A macro should then be able to access the content somehow, like, for example:

\define Comment()
<$button class="note" popup="$:/state/Comments"><img src="data:image/gif;base64,R0lGODdhEAAQAIACAAAAAOroMSwAAAAAEAAQAAACFYyPqcutAKN0tCYJrN4HRw5eWEiGBQA7"/></$button>
<$reveal type="nomatch" text="" default="" state="$:/state/Comments" animate="yes">
<div class="Comments">$_CONTENT_$</div>
</$reveal>
\end

Where "$_CONTENT_$" would then be the formatted (wikified) HTML content.

But I think this would require current macros to be written like this:

<<Macro "with" "parameter" />>

[Eric Shulman]

I guess one would hardly need "tabs" with one tab; and, at least in Eric's implementation, nested sliders can't be used one inside another

Yes they can... that's why they are called *nested* sliders!

+++[click this]>

   content

   +++[second level slider]>

       more content

      +++[third level slider]>

          even more content

      ===

   ===

===

[Jeremy Ruston]

Hi Stephan

Of course the "*" don't render as a bulleted list, while o.t.o.h. [[advantage]] does link to a tiddler.

All that's going on is that the DIV containing the $text$ doesn't have a newline after the opening tag, and so the content of the DIV is being parsed in inline mode, which means that block syntax like bullet lists don't get parsed.

The solution is to add a newline after the opening tag:

\define Comment(text)

<$button class="note" popup="$:/state/Comments"><img src="data:image/gif;base64,R0lGODdhEAAQAIACAAAAAOroMSwAAAAAEAAQAAACFYyPqcutAKN0tCYJrN4HRw5eWEiGBQA7"/></$button>

<$reveal type="nomatch" text="" default="" state="$:/state/Comments" animate="yes">

<div class="Comments">

$text$

</div>

</$reveal>

\end

 

But I think this would require current macros to be written like this:

<<Macro "with" "parameter" />>

This is indeed the main tradeoff between the syntax for widgets and macros. Macros trade a simpler syntax for the inability to have content, while widgets adopt the HTML model of hierarchical containment, which is rich but fiddly.

Best wishes

Jeremy

 

[Stephan Hradek]

GREAT! Thanks, Jeremy.

What I additionally noticed: As soon as I click inside such a revealed section, it is hidden again. Is this intended?

[Jeremy Ruston]

That's also fixed in alpha.15

Best wishes

Jeremy

—
jeremy...@gmail.com

[Yakov]

Hi Eric,

понедельник, 18 ноября 2013 г., 12:59:29 UTC+4 пользователь Eric Shulman написал:

Recently, I've noticed that in some cases this works as expected, indeed. However, a while ago I've been trying trees of nested sliders and got different syntax bugs in each situation -- that's probably why I remembered that as "not supported". Unfortunately, I don't have a consistent series of tests, but quick tweaking brought me this markup which is not represented correctly:

* +++[something]
text
*  more text +++[more]
  details
  ===
===

Sorry for misleading comments.

Best regards,
Yakov.

[Eric Shulman]

Recently, I've noticed that in some cases this works as expected, indeed. However, a while ago I've been trying trees of nested sliders and got different syntax bugs in each situation -- that's probably why I remembered that as "not supported". Unfortunately, I don't have a consistent series of tests, but quick tweaking brought me this markup which is not represented correctly:

* +++[something]
text
*  more text +++[more]
  details
  ===
===

The problem is with a conflict between bullet items and nested slider syntax.  Both are "line mode" syntax, which means they expect a terminating newline.  In your example, the outer nested slider works as expected, but the inner one seems to be "broken" and the closing "===" syntax is displayed as regular text instead of creating the inner slider.

A quick experiment confirms that it is this interaction of line-mode formatting: if you start the inner nested slider on a separate line by adding a newline after "more text", like this:

* +++[something]

text

* more text

+++[more]

  details

===

===

then it parses correctly and the nesting works as intended.  Of course, this also changes the layout of the content, so it's not really a solution for your specific use case... but it does illustrate where the problem lies.  Fortuately, there is a workaround that *does* solve the problem: add a 'dummy' CSS wrapper around the inner bullet item AND content... like this:

* +++[something]

text

*{{dummy{more text +++[more]

  details

===}}}

===

(note: you can use any CSS classname you want... "dummy" is just a placeholder.  In fact, the classname doesn't even need to be defined, because the only purpose it to create the *wrapper* itself, rather than applying any specific styles to the content.)

This technique also works as a general solution for using *multi-line* content with bullet items, and can even work with *numbered* bullets:

-----------------------

# {{foo{This is the first line of a bullet item that has multi-line content

containing line-mode formats like headings:

!like this one

and blank lines:

and nested sliders

+++[click me]>

   hello world

===

and even tables:

|this table|is indented to the|

|proper bullet item|level|

}}}

# This is the second bullet item

# etc.

-----------------------

enjoy,

-e

Eric Shulman

TiddlyTools / ELS Design Studios

HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...

   http://TiddlyTools.github.com/fundraising.html#MakeADonation

Professional TiddlyWiki Consulting Services...

Analysis, Design, and Custom Solutions:

   http://www.TiddlyTools.com/#Contact

[Andy Unrein]

I have two wikis that have made extensive use of http://tiddlytools.com/#NestedSlidersPlugin

I'm unclear on the conclusion of this discussion -- is there a macro in TW5 that will enable my tiddlers with +++[x] ... === syntax to render correctly without any changes?

[PMario]

On Saturday, February 22, 2014 9:30:48 PM UTC+1, Andy Unrein wrote:

I have two wikis that have made extensive use of http://tiddlytools.com/#NestedSlidersPlugin

I'm unclear on the conclusion of this discussion -- is there a macro in TW5 that will enable my tiddlers with +++[x] ... === syntax to render correctly without any changes?

No there isn't.
-m