[twdev] old tabbar plugin for TW5? I can get some of the behavior but now stuck.

[Rich]

Hi,
I am looking to get the old tabbar plugin behavior for the soryview from
TW5. THe idea is that instead of a story view in a line down the page, the
open tiddlers are all tabbed. Example in TWC is at
http://way.net/FiddlyWiki. I can get the basic idea from creating a
tiddler with the content
<<tabs "[list[$:/StoryList]]" "" "$:/state/tab" "" "">>
although I am not sure what the third parameter actually does and the view
does not have the current tiddler open until I click on a tab, and I have
not even considered editing yet and it creates a recursion error because it
shows the tiddler as part of the story view and I don't know how to hide
it. I got the story view to work as a tabbed view by substituting the
above in the PageTemplate shadow tiddler, but it made everything basically
unstable and uneditable. I would like to edit within the tabbed view as
well as view. THe tab order would show the order of opening the tabs, with
the oldest at the top row left. The top-orbottom issue of opening becomes
moot, replaced by putting the current tiddler in "front" obviously, but
retaining the tab order. (I tried having the open tab always be the top
left tab, but that was disorienting)

How difficult would it be for me to put together a plugin to make a tabbed
view for TW5? If it is copy+paste as far as code goes, or macro language
that is documented in tiddly wiki I can probably do it, but if it is
serious javascript I am out of luck. Would anyone be willing to put the
code together for this if it is beyond my weak skill set?

[Jeremy Ruston]

Hi Rich

It's not hard to make something that's quite similar to the old tabbed
view. There are two parts:

* Use the zoomin storyview
* Rather than using the <<tabs>> macro, manually create the HTML structure
of the tabs themselves (ie excluding the boy), using the existing CSS tabs
classes. You'd use a <$list> widget with a filter of [list[$:/StoryList]]
* Position the tabs at the top of the story river by putting them into a
tiddler tagged $:/tags/AboveStory

Good luck! Feel free to ask any further questions,

Best wishes

Jeremy

Post by Rich
Hi,
I am looking to get the old tabbar plugin behavior for the soryview from
TW5. THe idea is that instead of a story view in a line down the page, the
open tiddlers are all tabbed. Example in TWC is at
http://way.net/FiddlyWiki. I can get the basic idea from creating a
tiddler with the content
<<tabs "[list[$:/StoryList]]" "" "$:/state/tab" "" "">>
although I am not sure what the third parameter actually does and the view
does not have the current tiddler open until I click on a tab, and I have
not even considered editing yet and it creates a recursion error because it
shows the tiddler as part of the story view and I don't know how to hide
it. I got the story view to work as a tabbed view by substituting the
above in the PageTemplate shadow tiddler, but it made everything basically
unstable and uneditable. I would like to edit within the tabbed view as
well as view. THe tab order would show the order of opening the tabs, with
the oldest at the top row left. The top-orbottom issue of opening becomes
moot, replaced by putting the current tiddler in "front" obviously, but
retaining the tab order. (I tried having the open tab always be the top
left tab, but that was disorienting)
How difficult would it be for me to put together a plugin to make a tabbed
view for TW5? If it is copy+paste as far as code goes, or macro language
that is documented in tiddly wiki I can probably do it, but if it is
serious javascript I am out of luck. Would anyone be willing to put the
code together for this if it is beyond my weak skill set?
--
You received this message because you are subscribed to the Google Groups
"TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an
Visit this group at http://groups.google.com/group/tiddlywikidev.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywikidev/7f009974-c9ff-4348-a0b3-0cde97e50c11%40googlegroups.com
<https://groups.google.com/d/msgid/tiddlywikidev/7f009974-c9ff-4348-a0b3-0cde97e50c11%40googlegroups.com?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/d/optout.

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

[Rich]

Yay! that worked. I have just spent an hour trying to figure out how to
style it so there is some space between the tiddler titles (once I get
that, I think I'll eventually be able to theme the tabs). I got as far as
it has something to do with story-backdrop, tc-tiddlywink, and
tc-tiddlywink-resolve but I am lost as to where to put the padding. I
looked in the vanilla theme, but could not figure out anything that worked.
I got it to put the padding in the right place in the developer console,
but can't figure out where that needs to go to make it permanent. I am
guessing a theme, so I guess I'll read up on that. Help?

Post by Rich
Hi,
I am looking to get the old tabbar plugin behavior for the soryview from
TW5. THe idea is that instead of a story view in a line down the page, the
open tiddlers are all tabbed. Example in TWC is at
http://way.net/FiddlyWiki. I can get the basic idea from creating a
tiddler with the content
<<tabs "[list[$:/StoryList]]" "" "$:/state/tab" "" "">>
although I am not sure what the third parameter actually does and the view
does not have the current tiddler open until I click on a tab, and I have
not even considered editing yet and it creates a recursion error because it
shows the tiddler as part of the story view and I don't know how to hide
it. I got the story view to work as a tabbed view by substituting the
above in the PageTemplate shadow tiddler, but it made everything basically
unstable and uneditable. I would like to edit within the tabbed view as
well as view. THe tab order would show the order of opening the tabs, with
the oldest at the top row left. The top-orbottom issue of opening becomes
moot, replaced by putting the current tiddler in "front" obviously, but
retaining the tab order. (I tried having the open tab always be the top
left tab, but that was disorienting)
How difficult would it be for me to put together a plugin to make a tabbed
view for TW5? If it is copy+paste as far as code goes, or macro language
that is documented in tiddly wiki I can probably do it, but if it is
serious javascript I am out of luck. Would anyone be willing to put the
code together for this if it is beyond my weak skill set?

[Jeremy Ruston]

Hi Rich

Can you share what you've got so far? Perhaps by uploading a demo wiki to
TiddlySpot:

http://tiddlywiki.com/#Saving%20on%20TiddlySpot

Best wishes

Jeremy.

Post by Rich
Yay! that worked. I have just spent an hour trying to figure out how to
style it so there is some space between the tiddler titles (once I get
that, I think I'll eventually be able to theme the tabs). I got as far as
it has something to do with story-backdrop, tc-tiddlywink, and
tc-tiddlywink-resolve but I am lost as to where to put the padding. I
looked in the vanilla theme, but could not figure out anything that worked.
I got it to put the padding in the right place in the developer console,
but can't figure out where that needs to go to make it permanent. I am
guessing a theme, so I guess I'll read up on that. Help?

Post by Rich
Hi,
I am looking to get the old tabbar plugin behavior for the soryview from
TW5. THe idea is that instead of a story view in a line down the page, the
open tiddlers are all tabbed. Example in TWC is at
http://way.net/FiddlyWiki. I can get the basic idea from creating a
tiddler with the content
<<tabs "[list[$:/StoryList]]" "" "$:/state/tab" "" "">>
although I am not sure what the third parameter actually does and the
view does not have the current tiddler open until I click on a tab, and I
have not even considered editing yet and it creates a recursion error
because it shows the tiddler as part of the story view and I don't know how
to hide it. I got the story view to work as a tabbed view by substituting
the above in the PageTemplate shadow tiddler, but it made everything
basically unstable and uneditable. I would like to edit within the tabbed
view as well as view. THe tab order would show the order of opening the
tabs, with the oldest at the top row left. The top-orbottom issue of
opening becomes moot, replaced by putting the current tiddler in "front"
obviously, but retaining the tab order. (I tried having the open tab
always be the top left tab, but that was disorienting)
How difficult would it be for me to put together a plugin to make a
tabbed view for TW5? If it is copy+paste as far as code goes, or macro
language that is documented in tiddly wiki I can probably do it, but if it
is serious javascript I am out of luck. Would anyone be willing to put the
code together for this if it is beyond my weak skill set?
--

You received this message because you are subscribed to the Google Groups
"TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an
Visit this group at http://groups.google.com/group/tiddlywikidev.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywikidev/34a6d6d5-4599-4fde-b79d-a4b99b8808d3%40googlegroups.com
<https://groups.google.com/d/msgid/tiddlywikidev/34a6d6d5-4599-4fde-b79d-a4b99b8808d3%40googlegroups.com?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/d/optout.

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

[Rich]

Post by Jeremy Ruston
Hi Rich
http://tiddlywiki.com/#Saving%20on%20TiddlySpot
Jeremy, Thanks for your help. I made some progress on the theming. the

tiddlywiki is at http://way.net/tmp/tw5/tabtest.html. All the theming I
have done is in the tiddler
$:/themes/tiddlywiki/vanilla/rcradd

I have a few questions/problems, but it is mostly usable now.

1. long tiddlers break so the tab appears on two lines, but anywhere I have
figured to put white-space:nowrap; makes the whol backdrop not wrap.
Instead I want the tiddler links not to wrap inside their tab, but to wrap
tabs (not their content) in the .story-backdrop. I cannot figure out how.
2. in firefox, the tabs have a little dotted line around them when focused.
Chrome does not do this. is there any way to get rid of it or is it a
built in feature of firefox?
3. When a tiddler is opened, the focus of the tab does not go to the
tiddler. focus on the tab only works when the tab itself is clicked. Any
way to have the focus of the tab follow the open tiddler?
4. what would I need to do to the rcradd tiddler to make it apply to all
themes (i.e. become a plugin)

THanks!

[Jeremy Ruston]

Hi Rich

Post by Rich
1. long tiddlers break so the tab appears on two lines, but anywhere I
have figured to put white-space:nowrap; makes the whol backdrop not wrap.
Instead I want the tiddler links not to wrap inside their tab, but to wrap
tabs (not their content) in the .story-backdrop. I cannot figure out how.

Try wrapping the tabs in a class with <div class="story-tabs">, and add the
following CSS:

.story-tabs a {
white-space:nowrap;
display: inline-block;
}

Post by Rich
2. in firefox, the tabs have a little dotted line around them when
focused. Chrome does not do this. is there any way to get rid of it or is
it a built in feature of firefox?

That's the browser attempting to provide keyboard compatibility. I'm not
sure of the best way to disable it.

Post by Rich
3. When a tiddler is opened, the focus of the tab does not go to the
tiddler. focus on the tab only works when the tab itself is clicked. Any
way to have the focus of the tab follow the open tiddler?

The system tiddler $:/HistoryList has a field called "current-tiddler" that
keeps track of the title of the tiddler that was most recently navigated
to. You can use this value to conditionally render the current tab
differently according to whether it is selected:

<$reveal state="$:/HistoryList!!current-tiddler" type="match"
text=<<currentTiddler>>>
(render a selected tab)
</$reveal>
<$reveal state="$:/HistoryList!!current-tiddler" type="nomatch"
text=<<currentTiddler>>>
(render an unselected tab)
</$reveal>

Post by Rich
4. what would I need to do to the rcradd tiddler to make it apply to all
themes (i.e. become a plugin)

It should work with any theme as is. The fact that you've named the
stylesheet with the $:/themes/tiddlywiki/vanilla/ prefix doesn't actually
make the stylesheet be part of the vanilla theme.

By the way, you may want to set the animation speed to zero to remove the
animation when switching tabs.

Best wishes

Jeremy.

Post by Rich
THanks!

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

[Rich]

Post by Jeremy Ruston
Hi Rich

Post by Rich
1. long tiddlers break so the tab appears on two lines, but anywhere I
have figured to put white-space:nowrap; makes the whol backdrop not wrap.
Instead I want the tiddler links not to wrap inside their tab, but to wrap
tabs (not their content) in the .story-backdrop. I cannot figure out how.

Try wrapping the tabs in a class with <div class="story-tabs">, and add
.story-tabs a {
white-space:nowrap;
display: inline-block;
}

I wrapped the content of the tiddler as described, but when I put an end to
the div (</div>) it blanked out the tabs and just displayed a row of
"<div>'s instead. If I leave off the end tag, it shows the tabs, but in a
vertical stack. I'm sure I'm missing something about using <div> in wiki
text, but could not find anything in the docs after a quick search.

Post by Jeremy Ruston
3. When a tiddler is opened, the focus of the tab does not go to the

Post by Rich
tiddler. focus on the tab only works when the tab itself is clicked. Any
way to have the focus of the tab follow the open tiddler?

The system tiddler $:/HistoryList has a field called "current-tiddler"
that keeps track of the title of the tiddler that was most recently
navigated to. You can use this value to conditionally render the current
<$reveal state="$:/HistoryList!!current-tiddler" type="match"
text=<<currentTiddler>>>
(render a selected tab)
</$reveal>
<$reveal state="$:/HistoryList!!current-tiddler" type="nomatch"
text=<<currentTiddler>>>
(render an unselected tab)
</$reveal>

I forgot to mention that the code is in a tiddler named tabsWidget in the test
wiki <http://way.net/tmp/tw5/tabtest.html>. When I just put this code in
that tiddler it removes the tabs that were generated by "<$list
filter="[list[$:/StoryList]]">" I'm sure I am missing something simple due
to my lack of familiarity with tw5

Post by Jeremy Ruston
By the way, you may want to set the animation speed to zero to remove the
animation when switching tabs.

ok

Post by Jeremy Ruston
THanks!
again
--
Jeremy Ruston

[Leo Staley]

THANK YOU FOR POSTING THIS.

I've been wanting this from day one and is one of the remaining things
keeping me back from jumping over to TW5. Please reply when you get it
working well!

Post by Rich
Hi,
I am looking to get the old tabbar plugin behavior for the soryview from
TW5. THe idea is that instead of a story view in a line down the page, the
open tiddlers are all tabbed. Example in TWC is at
http://way.net/FiddlyWiki. I can get the basic idea from creating a
tiddler with the content
<<tabs "[list[$:/StoryList]]" "" "$:/state/tab" "" "">>
although I am not sure what the third parameter actually does and the view
does not have the current tiddler open until I click on a tab, and I have
not even considered editing yet and it creates a recursion error because it
shows the tiddler as part of the story view and I don't know how to hide
it. I got the story view to work as a tabbed view by substituting the
above in the PageTemplate shadow tiddler, but it made everything basically
unstable and uneditable. I would like to edit within the tabbed view as
well as view. THe tab order would show the order of opening the tabs, with
the oldest at the top row left. The top-orbottom issue of opening becomes
moot, replaced by putting the current tiddler in "front" obviously, but
retaining the tab order. (I tried having the open tab always be the top
left tab, but that was disorienting)
How difficult would it be for me to put together a plugin to make a tabbed
view for TW5? If it is copy+paste as far as code goes, or macro language
that is documented in tiddly wiki I can probably do it, but if it is
serious javascript I am out of luck. Would anyone be willing to put the
code together for this if it is beyond my weak skill set?

[Rich]

Hi Leo and anyone else interested, I opened a github repo
at https://github.com/rcrath/TW5-TabStory/issues to try and put this plugin
together with my limited skill set and unlimited ability to ask for help!

Post by Leo Staley
THANK YOU FOR POSTING THIS.
I've been wanting this from day one and is one of the remaining things
keeping me back from jumping over to TW5. Please reply when you get it
working well!

Post by Rich
Hi,
I am looking to get the old tabbar plugin behavior for the soryview from
TW5. THe idea is that instead of a story view in a line down the page, the
open tiddlers are all tabbed. Example in TWC is at
http://way.net/FiddlyWiki. I can get the basic idea from creating a
tiddler with the content
<<tabs "[list[$:/StoryList]]" "" "$:/state/tab" "" "">>
although I am not sure what the third parameter actually does and the
view does not have the current tiddler open until I click on a tab, and I
have not even considered editing yet and it creates a recursion error
because it shows the tiddler as part of the story view and I don't know how
to hide it. I got the story view to work as a tabbed view by substituting
the above in the PageTemplate shadow tiddler, but it made everything
basically unstable and uneditable. I would like to edit within the tabbed
view as well as view. THe tab order would show the order of opening the
tabs, with the oldest at the top row left. The top-orbottom issue of
opening becomes moot, replaced by putting the current tiddler in "front"
obviously, but retaining the tab order. (I tried having the open tab
always be the top left tab, but that was disorienting)
How difficult would it be for me to put together a plugin to make a
tabbed view for TW5? If it is copy+paste as far as code goes, or macro
language that is documented in tiddly wiki I can probably do it, but if it
is serious javascript I am out of luck. Would anyone be willing to put the
code together for this if it is beyond my weak skill set?

[Leo Staley]

Hey Rich!

On the off chance that you're not already aware of it, the somewhat
incomplete breadcrumbs implementation (not a plugin? ) by Ton Gerner, will
almost certainly be quite useful to cross reference how he did things to
help get your version working.

http://tw5breadcrumbs.tiddlyspot.com/

One noteable feature in that one, is that there are x buttons in the
tabs/breadcrumbs themselves to close them directly from there.

I'd love to see that feature implemented here as well.

cheers,

Leo

Hi Leo and anyone else interested, I opened a github repo at
https://github.com/rcrath/TW5-TabStory/issues to try and put this plugin
together with my limited skill set and unlimited ability to ask for help!

Post by Leo Staley
THANK YOU FOR POSTING THIS.
I've been wanting this from day one and is one of the remaining things
keeping me back from jumping over to TW5. Please reply when you get it
working well!

Post by Rich
Hi,
I am looking to get the old tabbar plugin behavior for the soryview from
TW5. THe idea is that instead of a story view in a line down the page, the
open tiddlers are all tabbed. Example in TWC is at
http://way.net/FiddlyWiki. I can get the basic idea from creating a
tiddler with the content
<<tabs "[list[$:/StoryList]]" "" "$:/state/tab" "" "">>
although I am not sure what the third parameter actually does and the
view does not have the current tiddler open until I click on a tab, and I
have not even considered editing yet and it creates a recursion error
because it shows the tiddler as part of the story view and I don't know how
to hide it. I got the story view to work as a tabbed view by substituting
the above in the PageTemplate shadow tiddler, but it made everything
basically unstable and uneditable. I would like to edit within the tabbed
view as well as view. THe tab order would show the order of opening the
tabs, with the oldest at the top row left. The top-orbottom issue of
opening becomes moot, replaced by putting the current tiddler in "front"
obviously, but retaining the tab order. (I tried having the open tab
always be the top left tab, but that was disorienting)
How difficult would it be for me to put together a plugin to make a
tabbed view for TW5? If it is copy+paste as far as code goes, or macro
language that is documented in tiddly wiki I can probably do it, but if it
is serious javascript I am out of luck. Would anyone be willing to put the
code together for this if it is beyond my weak skill set?