Welcome, Guest. Please Login
Tinderbox
  News:
IMPORTANT MESSAGE! This forum has now been replaced by a new forum at http://forum.eastgate.com and no further posting or member registration is allowed. The forum is still accessible via read-only access for reference purposes. If you wish to discuss content here, please use the new forum. N.B. - posting in the new forum requires a fresh registration in the new forum (sorry - member data can't be ported).
  HomeHelpSearchLogin  
 
Pages: 1 2 3 ... 6
Send Topic Print
Making an HTML outline (expandable/contractible) (Read 84915 times)
Marcelo Mirage
Full Member
*
Offline



Posts: 133
Brazil
Making an HTML outline (expandable/contractible)
Apr 19th, 2009, 9:59pm
 
I couldn't find this specific project in the forum (I may have overlooked it):

How could we go about creating an html page outline? Not editable, of course, but expandable and contractible? So as to have the same basic abilities of an outliner application?

I'm thinking in the lines of Stretchtext ( natematias.com/stretchtext/ ), with a few adjustments to the original project (there are a few issues that have to be addressed, like overlapping text when two expandable paragraphs are opened simultaneously and some minor formatting problems).

However, TB's 4.6.2 version doesn't seem to export Nathan's Tinderbox sample of stretchtext correctly, (I might be doing something wrong, who knows)... has anyone updated the code?

If not stretchtext, does anyone have another solution?

====
On a second note: this is my first post in this forum. But I have been with you guys for a while.
My regards to you all!


Back to top
 
 
Marcelo Mirage Marcelo Mirage MMUmeda misantropov@yahoo.com   IP Logged
Mark Bernstein
YaBB Administrator
*
Offline

designer of
Tinderbox

Posts: 2871
Eastgate Systems, Inc.
Re: Making an HTML outline (expandable/contractible)
Reply #1 - Apr 19th, 2009, 11:07pm
 
Updating Nathan's stretchtext demo should be easy.  And I've done a collapsible outline demo at several Tinderbox weekends, too, using a related but more primitive technique.  (I use something similar for the book cover popups at markbernstein.org.)

Much depends on exactly what you want to do.  Have you a particular javascript in mind?  Or a Web page style?  Are you starting from scratch?

The best approach, I think, is to figure out what sort of HTML you want, and then you'll see how to get Tinderbox to give you the HTML.  So, let us know more about where you'd like to go, and we'll work out a path.

FWIW, I'll be writing a bit more about stretchtext shortly.  I can't quite yet, because its related to a paper for Hypertext '09, and the conference deserves first crack at the work. But that will be coming along shortly.
Back to top
 
 
WWW   IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Making an HTML outline (expandable/contractible)
Reply #2 - Apr 20th, 2009, 4:55am
 
I think I've found the breaks. These aren't a fault of the original author, TB has moved on meaning some code renders differently or not at all.

Problem #1. In export template "prefix-suffix.html", v4.6.2 doesn't like this line:

^if(#linkedFrom(Prefix/Suffix))^

...as it treats the slash in the prototype note's title as a division, to no useful result (no HTML ouptput). However, the code works if you re-write the line as:

^if(#linkedFrom("Prefix/Suffix"))^

...or, as #codes are now depreacted, as...

^if(linkedFrom("Prefix/Suffix"))^

FWIW, a clearer way to write the above - as it show the actual evaluation being made - is:

^if($Prototype=="Prefix/Suffix")^

...noting that the '==' equality operator is syntax new to v4.6+. The 'margin-notes', 'prefix-suffix', and 'subheading' templates all make this slightly oblique use of #linkedFrom to test for the current note's prototype.

Problem #2. Unless you publish to the supplied export folder - thus overwriting the supplied example, your output will lack an 'elements' sub-folder holding at JS and CSS files needed. For now, simply copy paste the 'elements' folder to your output folder.

Personally, I've moved away from external templates unless many different TBXs will share the same templates; of course editing one template to fix an issue will affect all ouptput using it which may - or may not - be desirable depending on your needs and style of work.

I also prefer to keep the CSS as exportable notes so I can quickly find and check code. However, with the JS files as above if you are sharing the code across many TBXs' output then there may be more sense in manually placing the code in the export location; you're unlikely to be editing the JS code as much/often. If you are using a modern JS framework (Prototype, jQuery, MooTools, etc.) then the size if the JS libraries may outweigh your TBX HTML output so internal storage in the TBX would bulk your document unnecessarily. All of which goes to show there's no single 'right' way to to things with TB export!

Problem #3. Image export. When I first tried the export in v4.6.2, the image used in the exported 'Writing Tinderbox Stretchtext' note export edit's image to a different name/location than the HTML page expected.  I did wonder if it was some side effect of the alias of 'including images' confusing TB.  Aliases now export as separate files and I'm not sure if that was true when Nathan wrote his example. I can't repeat the problem, so may be if you export a second time this issue will go away! Tip: when writing a doc like this it can be handy to explicitly note the TB version used - though I'm as guilty as anyone of forgetting to do this in my examples.

Problem #4. Less a problem than a puzzle. I can see no apparent need for the alias of the 'Prefix/Suffix' prototype in the 'System Prototypes' container.  I don't think it does any harm, but nor do I think it should be there.
Back to top
 
« Last Edit: Apr 20th, 2009, 5:07am by Mark Anderson »  

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Marcelo Mirage
Full Member
*
Offline



Posts: 133
Brazil
Re: Making an HTML outline (expandable/contractible)
Reply #3 - Apr 20th, 2009, 10:42am
 
to Mark B.,

Hmm... what I want, what I want... at first, let's try a simple: clicking on a disclosure triangle next to each entry that would expand/contract the level immediately below, just like an ordinary outliner.  

Yes, I'm starting from scratch. The idea is to have a basic setup to be used whenever I need to share an outline-structured document. HTML format is ideal because it's compatible with all platforms and so no special app. is required.

Can this be done without javascript? I'd like to learn that.

But hey, in Steve's sonnet http://steveersinghaus.com/stretchpoem/poem.html that dissolving effect, looks smooth! Wouldn't hurt to learn that one too.

I don't really have a specific project in mind, Mark, I just want to find, explore (and hopefully master) a few different techniques.

========

to Mark A.,

Thanks, man. I'll implement the corrections you pointed out. I'm really attracted to the stretchtext concept. It does suggest a ground-breaking approach to reading, writing, and presenting text.

Cheers!
Back to top
 
 
Marcelo Mirage Marcelo Mirage MMUmeda misantropov@yahoo.com   IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Making an HTML outline (expandable/contractible)
Reply #4 - Apr 20th, 2009, 11:03am
 
@Marcelo. It sounds as it you want an outline with headings that have hidden 'contents' that's shown/hidden on a mouse-click. If that's the case, IMO, stretch text seems a too-complex solution as it's attempting to resolve a different problem; you'll end up doing a lot of content surgery that's not directly related to your output needs. If you read Nathan's original notes, the demo isn't written for nesting more than 2 (more?) levels, certainly not N levels [added later]:
Quote:
With the default template, expandable paragraphs may be nested two-deep. With modification to the CSS, deeper levels of nesting can be possible.


I'd also add one more question - how much data are you looking to export?.  If you do everything in one browser page you may find that if it's a lot (not a fixed figure!) the page may not perform as you want.

My initial guess is you want a recusing template where each note is output as a heading that when clicked shows/hides its body copy ($Text) and the headings for it's children - allowing drill-down. CSS is used to mirror outline level by increasing the left margin for each level.

The bits that get harder are expand-all and collapse all with will need some JavaScript DOM functions to loop through the document showing/hiding stuff.

Anyhow, it's easiest to draw out what functionality you need/want before passing samples around.
Back to top
 
« Last Edit: Apr 20th, 2009, 12:35pm by Mark Anderson »  

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Making an HTML outline (expandable/contractible)
Reply #5 - Apr 20th, 2009, 11:36am
 
Actually, if you use nested lists (<ul> tags, etc.) it saves you having to think about indenting. You can see the principle, in the site map page for aTbRef. The latter page is 164kb - big for a web page. Imagine the page  size if each listed item included (hidden) inline content.
Back to top
 
 

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Marcelo Mirage
Full Member
*
Offline



Posts: 133
Brazil
Re: Making an HTML outline (expandable/contractible)
Reply #6 - Apr 20th, 2009, 11:59am
 
Collapsible outlines are truly an amazing didactic tool. One could, theoretically, fit a rather fancy summary of, say, a Dostoievsky's novel, in a single page!

I like to demonstrate to my students the notion of multiple substructures within a complex literary work, which helps them visualize the work as a whole when levels are collapsed OR explore it in finer detail as needed, when expanded. The possibilty of synthesis and analysis within a single text... a revolutionary resource, indeed! Only a century ago, this could arguably be considered the critic's impossible holy grail.
Back to top
 
 
Marcelo Mirage Marcelo Mirage MMUmeda misantropov@yahoo.com   IP Logged
Marcelo Mirage
Full Member
*
Offline



Posts: 133
Brazil
Re: Making an HTML outline (expandable/contractible)
Reply #7 - Apr 20th, 2009, 12:10pm
 
@Mark A.

But yes, Mark, I'm thinking of nested lists, at first, but also, later on, the possibility of embedding stretchtext's resources, like marginal note, images, etc.

I'm thinking of this single page as a FANCY document. In sum, something just like Nathan's document, with this one additional resource: the "N levels" you mentioned.
Back to top
 
 
Marcelo Mirage Marcelo Mirage MMUmeda misantropov@yahoo.com   IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Making an HTML outline (expandable/contractible)
Reply #8 - Apr 20th, 2009, 12:24pm
 
That's fine but be aware that at some point page size, host resources or browser memory leaks (if not careful with DOM scripting) may limit extensibility. How many notes are we talking about? 10s, 100s, 1000s?
Back to top
 
« Last Edit: Apr 20th, 2009, 12:33pm by Mark Anderson »  

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Marcelo Mirage
Full Member
*
Offline



Posts: 133
Brazil
Re: Making an HTML outline (expandable/contractible)
Reply #9 - Apr 20th, 2009, 4:06pm
 
Mark A.: Quote:
It sounds as if you want an outline with headings that have hidden 'contents' that's shown/hidden on a mouse-click
.

I'm not sure I understand what you mean. If I did, then "yes": each heading would be a note's name, just like in TB's Outline view. Each can be shown/hidden on a mouse click.


As for the number of notes... I have no idea, Mark, since I don't have a particular theme in mind, but only the structure itself. It can in theory go well beyond the hundreds, or no more than a few dozen.

I want to make clear, friends, I'm proposing this as a general case study, not a particular task, with  specific content. If I can understand how it's done, I can post a tutorial on the technique. That's my primary intention. The technique must be flexible enough so as to adapt to many different situations.





Back to top
 
 
Marcelo Mirage Marcelo Mirage MMUmeda misantropov@yahoo.com   IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Making an HTML outline (expandable/contractible)
Reply #10 - Apr 20th, 2009, 6:21pm
 
If you do go the collapsible oultline route, this article might be useful. You'd need to expand the JS to add showing of title & text vs. title alone but the article is a good starting point using unobtrusive JS methods making your HTML templates simpler to write.
Back to top
 
 

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Marcelo Mirage
Full Member
*
Offline



Posts: 133
Brazil
Re: Making an HTML outline (expandable/contractible)
Reply #11 - Apr 20th, 2009, 7:43pm
 
Highly informative article, Mark, thanks. Lots to chew on.
Back to top
 
 
Marcelo Mirage Marcelo Mirage MMUmeda misantropov@yahoo.com   IP Logged
Marcelo Mirage
Full Member
*
Offline



Posts: 133
Brazil
Re: Making an HTML outline (expandable/contractible)
Reply #12 - Apr 20th, 2009, 8:41pm
 
@Mark B.: Quote:
And I've done a collapsible outline demo at several Tinderbox weekends, too, using a related but more primitive technique.


Can you show us how?
Back to top
 
 
Marcelo Mirage Marcelo Mirage MMUmeda misantropov@yahoo.com   IP Logged
Marcelo Mirage
Full Member
*
Offline



Posts: 133
Brazil
Re: Making an HTML outline (expandable/contractible)
Reply #13 - Apr 20th, 2009, 8:58pm
 
Ok, here's what I have in mind so far:

We'd only use the notes' names for the outline. I think the $Text could be used for something else, but I don't have any ideas yet.


- "N" levels are not really necessary, on second thought. I think root + 3 levels down is good enough. 4 levels should give us enough depth of analysis.

- So, if we're dealing with, say, a book summary, root level would contain introductions, chapters and appendices. Level 1 would be for the major topics within the chapters. Levels 2 and 3, for eventual expansion of the topics. But all levels would not consist of more than one phrase or two. That's where marginal notes come in: if a topic deserves further expansion (whole paragraph comments, images, sidenotes, etc.), we'd click on a linked word in the outline and a marginal note would appear on the right side (like in Nathan's layout) -- I never liked popup windows, they're distracting, they disrupt the reading flow.


Back to top
 
 
Marcelo Mirage Marcelo Mirage MMUmeda misantropov@yahoo.com   IP Logged
Johnnie Wilcox - mistersquid
Full Member
*
Offline



Posts: 84
San Francisco, CA
Re: Making an HTML outline (expandable/contractible)
Reply #14 - Apr 20th, 2009, 10:01pm
 
There is no reason you couldn't have a practically unlimited number of "stretchtext" links that load into iframes. What this would mean is that the initial load of the HTML page could be as small as you want for initial presentation. The disclosure of certain passages would then load on-demand and in-place. This is precisely what I do for the links marked "load" in my zombie bibliography. (For example, the link for "Anonymous. A "Capitalistic Sublime?." and the second and third links for Balibar.)

I would like to offer more information than simply to say "it's possible," but it will take time to put together a proper tutorial/walkthrough. The Tinderbox document, the HTML templates, and the JavaScript code are considerably complex and will take time to abstract for general purposes.

As Mark B. suggests, put together the requisite HTML and JavaScript first. Then abstract that structure into Tinderbox. If you do it right, you will be able to add new items by merely assigning a prototype and adding text. (That is, all the gory HTML and JavaScript details can [and should] be templatized and [consequently] automatically and uniquely generated.)
Back to top
 
« Last Edit: Apr 20th, 2009, 10:06pm by Johnnie Wilcox - mistersquid »  
  IP Logged
Pages: 1 2 3 ... 6
Send Topic Print