TWOutlier (TOC based Outliner for TW5)

[Mark S.]

This is an experimental TOC-based outliner for TW5.

You will need the most recent TW (maybe it works in 5.1.14, but didn't test).

Your theme should be tweaked for a fluid story river and a fixed sidebar. You will probably want to use it without the sidebar most of the time.

Probably you will want to use this in an empty TW, since it will litter your TW with documentation tiddlers. Drag and drop the package into your target TW5. If there is any popular response, maybe I will upgrade it to a plugin.

Start with the TWOutlier tiddler to learn more about the reasons and usage for TWOutlier.

Compared with commercial outliner projects, TWOutlier doesn't have as many features, (thus it is an "outlier-outliner"), but does have these advantages:

• Free (as in beer)
• Doesn't need internet
• Works on older tablets
• Leverages TiddlyWiki Editor
• Should use images just like TW5
  

It doesn't look as nice as the project Dave Gifford has going, but it does have the advantage of allowing tiddlers to be edited right where they are displayed. Links are internal to the TOC structure, helping to focus attention inside the outline.

Have fun,
-- Mark

[TonyM]

Mark,

I like this, it has a polished look and it helps the imagination of whats possible grow, although simple in its own way.

One somewhat powerful improvement would be to getting it fully working on "Open in New Window" so it can be an Index to the side

• With the ability to open the tiddler in the main story

I have a few ideas I am exploring I plan to make it visible on any tiddler if that tiddler has children with a toggle,

I have a lot more ideas so if you want to develop it beyond its current model "ping me"

Regards

Tony

[Mark S.]

I'm not sure what scenario you are thinking of.

When you click on the indexed items in the TOC, a linkcatcher widget sets the value of a specified tiddler to the value of the link. That value is then used on the right side of the TOC to display the specified link tiddler. If you wanted to, you could make a separate tiddler that transcluded the tiddler previously specified. You could make that tiddler appear in it's own window. The thing is, I'm not sure what problem that solves.

BTW, after one of your other posts, I realized that the "sortby" field isn't really necessary. Users can just use the tag pill to rearrange tiddler order among sibling tiddlers in the TOC.

Thanks!
-- Mark

[TonyM]

Mark,

By scenario I think you are referring to "Open in New Window" With the ability to open the tiddler in the main story

Given it works as a TOC but also provides in place editing, if we could make it work on Open in New Window, On my Desktop I would have the outline open and be able to either review the completed result but edit tiddlers in the main browser window, or the reverse. It will certainly help working with large numbers of tiddlers. It helps provide a powerful work environment. Just open TableOfContents in a new window to see what I mean.

The Truth is (as is common for me and TiddlyWiki) I can see a wide range of possibilities I would like to pursue inspired by your code. I was planing something in this direction for a very different reason - easy tabs.

With your permission my I use and possibly rewrite your code towards these new ideas? I will Include an acknowledgement if desired.

Regards

Tony

[David Gifford]

Hi Mark

Nice looking! And simply a very different tool - not to mention way more practical - than my little experiment.

I added this to the TiddlyWiki toolmap (https://dynalist.io/d/zUP-nIWu2FFoXH-oM7L7d9DM) under both the 'Navigation - table of contents' and the 'Writing and editing tools - Note taking' sections. The link is to this Google Group thread currently. If you give it a permanent location, let me know and I will gladly update the link.

Blessings, Dave

[Mark S.]

If you want to use it, go ahead. Putting something like "Derived from code by MAS" would be a nice touch.

The whirlwind explanation for the bits of the code that matter. When you click on a link in the index (left side) a tiddler is set that is used by the panel on the right side. The problem is that the link has only 1 name, but since the target tiddler might be in an edited state, it may need to be invoked as "Draft of ....". So the code takes the original link name, checks for the draft state, and accordingly displays with either the viewtemplate or the edittemplate. In addition, everything is wrapped internally with the navigation widget to prevent tiddlers from opening outside the TOC tree. Not sure how much of that will be needed for your concepts. Let me know if you have any questions.

Good luck!
-- Mark

[Greg Molyneux]

Tony,

Related to the feature set you're discussing, you might find it useful to look at this bit of code:

https://groups.google.com/forum/#!topic/tiddlywiki/Qw5sjePXfr0

Which allows notes/content to be dragged into a separate open window, for direct inclusion in your TiddlyWiki.  Incorporating this code with the beautiful outliner example provided by Mark would be a perfect extension to TW.  Other extensions with capabilities that would be amazing (potentially with some more friendly UI changes) to integrate with this would be the SidebarExporter, the Rearranger, and SlidesnStories, all from here:

http://slidesnstories.tiddlyspot.com/

I've borrowed code and plugins heavily from this site, and am very grateful to Jan for putting them out there.  Many of the shiny bits there are cobbled together from code by others, and I've used bits of each of their work as well - see the Footnotes plugin as an example.

On a related topic: there's a reason David is using Dynalist to compile all these bits of shiny things for TW - it just works, and it's easy.  If more people with the technical skills to do so would put these bits together, and present usable solutions "out of the box", TW could quickly move from a hobbyist tool to a mainstream productivity tool - well, several different (and compatible) productivity tools actually.  A little coordination of some of the tools like Cardo, Dropboard, TiddlyMap, this TOC based outliner, and the TWRocketDock linked above would allow a varying number of TW files, each focused on different tasks/purposes/data, to exchange and reference each others data/appointments/outlines/content of all types as needed by the user.

The great strength of TW - the many developers each putting out great pieces to solve their own particular issue - is also it's great weakness.  Each piece in itself is amazing, but the coordination of these unique pieces into usable full-featured TW implementations, suitable for a given task, is beyond what most non-coders are willing or able to do.  I'd love to have a capable open outliner, with which I could view/relate/modify/reorganize data in a capable mind mapping/diagramming tool.  Then take that data and organize tasks and projects on a kanban type board.  Then take items from that board and reference them in my GTD TW implementaion with dates, resource lists, contacts, etc.  All of these components exist now, but getting them to work well together is in many ways beyond my limited ability, and that of most non-technical users.

I've digressed a bit from the subject of the thread, for which I apologize.  I would like to thank all of the people developing for TW - those I've mentioned above and many others I haven't - for their wonderful contributions.  Thanks also David for the great resource on Dynalist - it's fantastic to see all the things TW is capable of.  Tony, I'm looking forward to anything you put out based on Mark's impressive example - there's a lot of potential here.

again, thanks to all:
Greg

[Mark S.]

Hi Greg, Tony,

On Friday, May 4, 2018 at 9:18:58 AM UTC-7, Greg Molyneux wrote:

Tony,

Related to the feature set you're discussing, you might find it useful to look at this bit of code:

https://groups.google.com/forum/#!topic/tiddlywiki/Qw5sjePXfr0

It looks nice but it's doing something behind the scenes unnecessarily resource intensive. Various actions work at a crawl unless you also have the main tab on top -- in which case what is the point?

I made a much simpler, (and uglier, admittedly) separate-window tool that can be used for notes (but not that fancy drag/drop stuff) Just put this in a tiddler:

<$select tiddler="$:/state/side-edit-tiddler" tag="input">
<$list filter="[!is[system]sort[title]]">
<option value=<<currentTiddler>>><$text text=<<currentTiddler>>/></option>
</$list>
</$select>

Then open the tiddler in it's own window. From the drop-down list pick the tiddler you want to work in. Now you can take notes in a floating notepad.

 there's a reason David is using Dynalist to compile all these bits of shiny things for TW - it just works, and it's easy.

Yeah, but for $96-$120 bucks a year it should do more than "just work" ! It should also make coffee and give back rubs.

The TWO mini-app is pretty easy, IMHO. Used with TiddlyWiki In the Sky it becomes a viable substitute for SimpleNote, but providing notebook-like structure.

Using TWO you can set up "Notebooks" in order to categorize the information you wish to capture.

One of the things that bothers me about TiddlyWiki, Evernote, and Simplenotes is that creating notes and tagging isn't really enough. There's a lingering worry that you're going to forget that you saved stuff in the first place. Being able to create a tree or outline structure is kind of a way to help your mental "wiki" remember what all you've put in your actual Wiki. But that may be just me. The "NoteStorm"  app was my default TW back with in the days of TWC. It provided some structure that helped keep your thinking primed.

I'd love to have a
capable open outliner, with which I could view/relate/modify/reorganize data in a capable mind mapping/diagramming tool.  Then take that data and organize tasks and projects on a kanban type board.  Then take items from that board and reference them in my GTD TW implementaion with dates, resource lists, contacts, etc.  All of these components exist now, but getting them to work well together is in many ways beyond my limited ability, and that of most non-technical users.

I think you'd have to start with a specific end-product in mind, and then get various people to agree to work on it together. But I don't know what central target product would be compelling enough for everyone to aim for. In addition, many of the amazing things you see don't work together because they're based on 3rd party JS libraries, where the differences might be nearly impossible to work out.

-- Mark

[Greg Molyneux]

Mark,

Thanks for the reply, I appreciate the involvement and enthusiasm you guys show for TW.

The code you provided is a great hint, and fewer resources is always a good thing.  The resource usage issue is good to know, as the point of a tool like this is agile information transfer.  One of the things I liked about the TWRocketDock implementation was its ability to create new tiddlers on the fly, and edit as you go.  Combining this capacity with the TWO outlining capability in a separate window would be a killer research/note taking tool.

The main features in Dynalist are free, including list/outline functionality we're considering here.  I totally agree with you about the price of the paid product, and I won't be subscribing any time soon.  That said, even some of the paid features can be accomplished in TW right now - if one has the technical aptitude.  Dynalist is exactly the kind of a refined product I'm talking about being implemented in TW that would easily draw new people.

I completely agree with you about a tree or outline structure being important to an app like TW (or Evernote, or ...).  I think that combining TWO with capabilities like those demonstrated in the Rearranger, SlidesnStories, and SidebarExporter plugins I mentioned makes TW an Evernote and Dynalist killer (for me, at least), especially as you mentioned, when combined with TiddlyWiki in the Sky capabilities or similar access methods.

I think you're absolutely right - starting with a particular end product in mind is vital for the kind of functionality I'm talking about.  In fact, I'd go farther and say that a suite of "products", meaning two or three types of TiddlyWikis, each able to interact on and reference the data from the other's tiddlers would be possible, if the project were properly coordinated.  This is exactly the kind of project I was alluding to.  The problem with my little fantasy is that (from the perspective of a non-coder on the outside looking in), a project like TiddlyWiki, and it's resulting thousand other little plugins, is a bit like herding cats.

You're right, many of these things are based on 3rd party JS libraries that are incompatible, but I'm not convinced that's the largest hurdle.  Each TiddlyWiki "app" in my fantasy project could integrate the libraries necessary for that app, but the common thread between every TiddlyWiki implementation is the tiddler.  The much more serious problem from my perspective is a lack of commonality in data structures within the tiddlers - unique field names, tag names, and schemes for handling this data in each individual plugin.  I'd suggest that this is the larger hurdle in crafting a more unified "app" based on TiddlyWiki.  At least that's been the primary hurdle for me while trying to incorporate pieces from various developers code.

That said, I do think that getting the various developers to work together on common standards for a given "application" would largely solve the integration problems I have.  I can't see any reason the data structure used in Dropboard and TiddlyMap couldn't be integrated in a common way, for example.  While one may have extended sets of fields or tags that the other doesn't utilize (and vice versa), if they each began with a common set, there's great potential for interaction and interoperability on the same data set (tiddlers).  That would also lead to the potential for the "application suite" of compatible TiddlyWikis customized to specific purposes as I described in my last post.

In any case, thank you for that useful snippet of code and the discussion.  I really do appreciate your work, and that of the other devs working in their own areas of interest.  I look forward to seeing any further development of the TWO idea, as I think it is an indispensable capability for apps like TiddlyWiki.

thanks again
Greg

[David Gifford]

Here is something I was playing with a week ago or so. Table of contents using the tocP plugin, with a few tweaks, and placed in a left sidebar using the Panflex macro.

http://giffmex.org/experiments/ltoc.anatomy.of.the.soul.thompson.html

David Gifford

Mexico team leader, Mexico City

Resonate Global Mission
Engaging People. Embracing Christ.
A Ministry of the Christian Reformed Church
resonateglobalmission.org

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/ol_3zvGPbk8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+unsubscribe@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/3b9502e8-3efc-483a-be69-f6daeb821517%40googlegroups.com.

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

[David Gifford]

forgot to mention that the tocP plugin has the option for expandable tocs and the other options in the normal toc. Just a matter of editing the tiddler tocP to

<div class="tocp tc-table-of-contents">
<<tocP-selective-expandable tocP>>
</div>

David Gifford

Mexico team leader, Mexico City

Resonate Global Mission
Engaging People. Embracing Christ.
A Ministry of the Christian Reformed Church
resonateglobalmission.org

[@TiddlyTweeter]

Ciao Mark S. & all

Mark S. wrote:

One of the things that bothers me about TiddlyWiki, Evernote, and Simplenotes is that creating notes and tagging isn't really enough. There's a lingering worry that you're going to forget that you saved stuff in the first place. Being able to create a tree or outline structure is kind of a way to help your mental "wiki" remember what all you've put in your actual Wiki. But that may be just me. The "NoteStorm"  app was my default TW back with in the days of TWC. It provided some structure that helped keep your thinking primed.

Great observation. IMO the fundamental "matching" between human cognition and some computed organisation ("how to organise me", in this context) is a long-term saga.

Part of the issue is that many of the apps. are developed from "what works" -- I'm un-convined that just because it works its actually a good optimal match to real human process. I often have the uneasy feeling we are matching IT, rather than IT matches us. I think that is a good example of that.

@TiddlyTweeter

[@TiddlyTweeter]

Ciao Mark S. & all

Mark S. wrote:

I think you'd have to start with a specific end-product in mind, and then get various people to agree to work on it together.

I think that is an excellent idea.

But I don't know what central target product would be compelling enough for everyone to aim for.

Right. But perhaps that is part of such a process?

Partly because I don't like programming & am not good at it, I incline to "final function" questions, rather than programatic ones, like: "What should it look like? What am I trying to do? Why? What are its main outputs? What are the steps to that?"

I do think EXPLICIT design thoughts are incredibly helpful in both generating an agenda of work needed and more accurately know if something is likely possible.

Also, I WONDER, if a "development of a whole TW app." more explicitly in public could simultaneously provide better "documentation by example?"

Best wishes
Josiah

[TonyM]

Greg,

I truely understand what you are asking for and I believe it's achievable in principle.

I have not reached into javascript yet but not sure I need to, but I plan to put the developer hat on soon.

I have contributed to others work by asking for minor changes that keep their solutions somewhat interoperable. An outliner based on heirachical tagging is a good example. The items tagged by a given tag can form a stack on drop boards kanban view.

My design approach is to build solutions that sit on top of tiddlywiki not in it. This includes queue or list management, tiddler disposition, fields as 1st class citizens and designer views using a variation on an outliner. All of these should be able to live in the same wiki including with my first plugin mymenus (and other plugins) and to do this they should leverage the native way to do things. If we all write solutions on top of the native structure they should interopperate. Another way is to make solutions sit to the side of the native methods not compromising other solutions.

I have only started on this journey so it will take time before I can collaborate to set design criteria to ensure such interoperability. Least of all to prove the validity of an approach.

This is also a costly (in time) venture, and the results will always be presented on an open source platform with multiple ways to copy and reuse my own and others intelectual output, I am all for this but only recently discovered a possible way to earn a return. That is basicaly being an expert in the tiddlywiki eco system and always contributing to it (user and developer) but being in a position to rapidly develop bespoke or goobal solutions. I will never be in competition with the comunity only with alternative platforms out there. The truth is if we build our own development frameworks, methods, patterns in collaboration with the community we all grow, by sharing, this exists for the core but not so much for end sooutions. Yet if we are expert and tiddlywiki use grows there will always be non experts we can help, and people who want to commission solutions.

Further it would be nice if we could crowd source solutions off each other with a return or prize to the solution provider, this would help fund developers translate what they know to what we share. It is easy to see the effort it takes to translate a bespoke solution into an easy to use plugin, even more so if it can opperate in the eco system without compromising interopperability.

Just a bit of where my thinkng is at.

Background. Sick of being an employee I am striking out on my own, I have very little income and hundreds of possible sucess vectors, I hope tiddlywiki will be one of them. This freedom must come to an end if I can not mak a "right livelihood" from tiddlywiki, my consulting, trouble shooting, cloud solutions, website design, support and hosting.

Am I deluded about tiddlywiki, is my belief in it just apparent sucess that makes me feel good?

Regards
Tony

[TonyM]

Mark and Josiah,

Focusing on practical results drive some of us, or all of us some of the time. However a diverse approach in a community is always better. Given the way I think, I can gererate a thousand posible solutions/applications or end states, I have hundreds listed in a tiddlywiki, many partialy complete but I can see which are hard or time consuming and my journey is one of continuose improvement to have in place the fundimental tools, each of which once developed open the gates to rapidly developing hundreds of more solutions. Of course I write proof of concept examples which can look like end states but personaly I profit more from finding systemic or structural or ecosystem solutions.

Many of the best solutions have already taken the same approach given the main product of development so far has being plugins rather than editions.

Yes more editions, more solutions on the shelf all makes sence, I will help you with that and if you can champion and inspire them please do, we need this, but with all humility you also need people like me or people who build powerful plugins who look and carry tiddlywiki even further forward like Jeds multiuser, noteself, evans formula plugin and my dreams to mention a few.

Regards
Tony

[Mohammad]

Hello Mark,

 I am using this nice code to build  tutorial for Fortran 2008. My questions are

Is it possible to have a fixed tiddler height inside Outline tiddler?  It means the code change the font size to keep the whole contents of  tiddler in view?

Cheers

Mohammad

[Mark S.]

Are we talking about viewing contents, or when editing?

If editing, you can use the standard edit tool to change the height of the box. If viewing ... maybe there is some CSS that will allow scrolling. I hope it's the former ;-)

-- Mark

[Mohammad]

Mark,

 I mean in view time!

One example I borrowed from here

https://manual.calibre-ebook.com/gui.html#the-search-interface

The TOC here of course acts like a sidebar menu which we have in TW. But the point is when you scroll down the page by end (here for a long tiddler) you have the TOC in view and simply you can click on the next topic. The other thing here is if you have a long table of content the sidebar gets a vertical scroll bar to have it in view again.

In summary you have a fixed height for TOC and always it is in view! No matter how long is content of page (tiddler) you view

• One more question: It seems you cannot have more than one Outline here? Am I right? If so, isn't it better to able to have several outline with different tag in the same TW file? 

What do you think?

[Mark S.]

I'll answer the 2nd part. Have to think about the first part.

You can have all the Notebooks (that's what I call them and tag them with "Notebook").

Just make a new tiddler and paste in :

<$macrocall
    $name="twoutlier"
    tag="TWOutlier"

    selectedTiddler="$:/temp/toc/selectedTiddler"
    unselectedText="<p>Select a topic in the table of contents. Click the arrow to expand a topic.</p>"
    missingText="<p>Missing tiddler.</p>"
template="$:/core/ui/ViewTemplate"
/>

You need to provide a new root tag and a new "selectedTiddler" value.

Have you looked at Dave Gifford's NoteSlam -- it might have more features?

Good luck!
-- Mark

[Mark S.]

See if this works. Be sure to backup first. Replace the main outlier macro with:

\define tagascurrent() [[$(currentTiddler)$]]
\define draft() Draft of '$(currentTiddler)$'
\define draftcreated() Draft of '$(currentTiddler)$'!!created
\define drafttrans() {{Draft of '$(currentTiddler)$'||$:/core/ui/EditTemplate}}
\define twolink(link) <$navigator story="$:/StoryList">[[$link$]]</$navigator>
\define twoutlier(tag,sort:"",selectedTiddler:"$:/temp/toc/selectedTiddler",unselectedText,missingText,template:"")
<$tiddler tiddler={{$selectedTiddler$}}>
<div class="tc-tabbed-table-of-contents">
<$linkcatcher to="$selectedTiddler$">
<div class="tc-table-of-contents">
<$macrocall $name="toc-selective-expandable" tag="""$tag$""" sort="""$sort$""" itemClassFilter=<<toc-tabbed-selected-item-filter selectedTiddler:"""$selectedTiddler$""">>/>
</div>
</$linkcatcher>
<div class="tc-tabbed-table-of-contents-content">
<$reveal state="""$selectedTiddler$""" type="nomatch" text="">
<$navigator story="story" history="history" openLinkFromInsideRiver="top">
<$linkcatcher to="$selectedTiddler$">

<$list filter="[all[current]]" >
<$reveal state=<<draftcreated>> type="nomatch" text="">
<<drafttrans>>
</$reveal>
<$reveal state=<<draftcreated>> type="match" text="" class="MAS_scroll" >
{{||$:/core/ui/ViewTemplate}}
<$edit-text tiddler="$:/newitem" tag="input" size="30" default="Child name here" placeholder="Child name here"/>
&nbsp;<$button>
<$action-createtiddler $basetitle={{$:/newitem}} tags=<<tagascurrent>> $savetitle="""$selectedTiddler$""" />
New child</$button> <br/>Sort by: <$edit-text field="sortby" tag="input" size="5" default="01" placeholder="Sort priority"/>
</$reveal>
</$list>

</$linkcatcher>
</$navigator>
</$reveal>
<$reveal state="""$selectedTiddler$""" type="match" text="">
$unselectedText$
</$reveal>
</div>
</div>
</$tiddler>
\end

All this did was to an inject a new class. Then make a stylesheet (tag $:/tags/Stylesheet) like:

.MAS_scroll .tc-tiddler-body {
overflow: auto;
height:300px;
}

Change the height to whatever default height you want. The bad news is that this will be the minimum size of all tiddlers from now on. Any tiddler longer than the specified height will have a scroll bar.

Good luck!

-- Mark

On Sunday, June 10, 2018 at 8:05:14 PM UTC-7, Mohammad wrote:

[Mark S.]

Ok -- forget the macro change. It looks like it can be done just by adding a stylesheet with this content:

.tc-tabbed-table-of-contents-content .tc-tiddler-body {
overflow: auto;
height:200px;
}

Change height to whatever minimum tiddler body height you want.

-- Mark

[Mohammad]

Hello Mark,

 Sorry for this late reply. Thank you for your effort.

It works for me now! I did some customization.

Cheers

Mohammad

[Mohammad]

Mark,

 Is there any simple way to turn off or hide the textbox and create child button at the bottom at the end?

As you recommended, NoteSlam is more specific for TOC and outliner, but your code is great to have several 

small but related texts (like turorial, instruction, ...) in the same TW.

Thank you

[Mark S.]

A quick way to do that would to be wrap the button and edit field in a reveal widget. So that part of the code would look like:

<$reveal state="$:/MAS/newChildOptions" type="match" text="show">

<$edit-text tiddler="$:/newitem" tag="input" size="30" default="Child name here" placeholder="Child name here"/>
&nbsp;<$button>
<$action-createtiddler $basetitle={{$:/newitem}} tags=<

<tagascurrent>> $savetitle="""$selectedTiddler$""" />
New child</$button> <br/>Sort by: <$edit-text field="sortby" tag="input" size="5" default="01" placeholder="Sort priority"/>
</$reveal>

Then change $:/MAS/newChildOptions to "show" to show the buttons or anything else to hide the buttons.

Good luck!
-- Mark

[Mohammad]

Thank you Mark!

Cheers

Mohammad