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

--
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 email to tiddlywikide...@googlegroups.com.
To post to this group, send email to tiddly...@googlegroups.com.
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.
For more options, visit https://groups.google.com/d/optout.

--

Jeremy Ruston
mailto:jeremy...@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?

[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.

--
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 email to tiddlywikide...@googlegroups.com.
To post to this group, send email to tiddly...@googlegroups.com.
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.

For more options, visit https://groups.google.com/d/optout.

[Rich]

On Friday, April 10, 2015 at 4:21:49 AM UTC-10, Jeremy Ruston wrote:

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

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;

}

 

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.

 

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>

 

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.

 

THanks! 

[Rich]

(edit 5 minutes later when I figured out that <$> constructions needed a </$> closing tag).  I updated the test wiki at http://way.net/tmp/tw5/tabtest.html

On Sunday, April 12, 2015 at 2:37:34 AM UTC-10, Jeremy Ruston wrote:

Hi 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;

}

this worked once I figured out I needed to close the <$list> widget, thanks.

 

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>

I forgot to mention that the code is in a tiddler named tabsWidget in the test wiki .  When I just put this code in that tiddler after the tabs <$list>  it renders the tabs ok then puts a non functionioning text at the end of the tabs called " (render a selected tab)".  tabs work as before (i.e., no following of focus unless the tabs are clicked).  I'm sure I am missing something just because I am unfamiliar with tw5 still.

 

 

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

I was not able to find this setting.

 

THanks! 

again 

[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! 

[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!  

[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