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 4 ... 6
Send Topic Print
Making an HTML outline (expandable/contractible) (Read 84880 times)
Marcelo Mirage
Full Member
*
Offline



Posts: 133
Brazil
Re: Making an HTML outline (expandable/contractible)
Reply #15 - Apr 20th, 2009, 10:32pm
 
@Johnnie: Just finished checking your Zombie page. Nice use of timeline, great colors! The layout is just the way I like it, clean. Good job, man!

As for my personal project, there's no rush. I'll be gathering info here and there and will eventually figure it out. But I think a tutorial on this topic would cover a lot of ground and could be useful to the community, so I'll make one in the end...

I'm beginning to see a split in my project: one, a simple way to create an html page mimicking a basic outliner (expand/contract each list item). Two, a more complex project which would combine this outliner with stretchtext's resources.

But first things first.
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 #16 - Apr 20th, 2009, 11:00pm
 
@Johnnie: offtopic, I know, but I just wanted to let you know I greatly admire your work in http://wilcox.cx/courses/20084/theory/syllabus/daily. Beautiful. Paradigmatic, really. I have mentioned and shown your page to my colleagues down here as a model for a great syllabus. Thank you.
Back to top
 
« Last Edit: Apr 20th, 2009, 11:01pm by Marcelo Mirage »  
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 #17 - Apr 21st, 2009, 5:25am
 
To help get you started with the outline export, I've just made a small demo TBX. I've included stub CSS and JavaScript library files - they expert but are empty save a comment.  This should help you to experiment without worry too much about where such code lives - see the 'how to use' note in the demo.

For those new to HTML export a 'gotcha' to watch for is that while TB will export a new page if the source note content has changed there are some instances where it may not export a new page when you expect one:
  • The changed note data is in a note included via the export template.
  • The changes made only exist in the template.
When experimenting with TB and HTML export, it is thus often useful to dump all, or affected pages of, the previous HTML export before doing a new export to ensure your most recent changes are correctly exported; this applies regardless of whether the templates are notes or external files.

[Notes:
- It was written in v4.6.2, using v4.6+ syntax. With a review of the export template code, it should be possible to make it work with older TB versions.
-In the demo, the secondary template ('sitemap-titles') uses a ^setRoot()^ call as a workaround for a current glitch. If this is fixed, it may be necessary to remove that code - the give-away will be if the link generated points to the wrong export location.]


Actually, I believe that Tinderbox does always export changes, even under the circumstances discussed here.  --MB
Back to top
 
« Last Edit: Apr 21st, 2009, 11:18am by Mark Bernstein »  

--
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 #18 - Apr 21st, 2009, 9:48am
 
@Mark A.:

Thank you, Mark! Although the export result, as it is, doesn't give use us the option for each child to be hidden or shown -- you state: Quote:
The templates supplied may easily be adapted either to show more content, e.g. note text as well as title, and/or to add interactivity such as showing/hiding elements within the outline.
--, so it is certainly a step forward!  So I'll be playing with the templates to find out how one can add the show/hide interaction.

Once again, thank you for your effort!
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 #19 - Apr 21st, 2009, 9:52am
 
@Mark A.: Quote:
For those new to HTML export a 'gotcha' to watch for is that while TB will export a new page if the source note content has changed there are some instances where it may not export a new page when you expect one:
The changed note data is in a note included via the export template.
The changes made only exist in the template.
When experimenting with TB and HTML export, it is thus often useful to dump all, or affected pages of, the previous HTML export before doing a new export to ensure your most recent changes are correctly exported; this applies regardless of whether the templates are notes or external files.
.


This SHOULD be corrected, right? Or what's the use of the updated export behavior if we can't always rely on it?

I never had that problem with my updated exports, but it's great that you pointed out, since I'd never suspect that if anything went wrong.

I believe that you can rely on updated export behavior. --MB
Back to top
 
« Last Edit: Apr 21st, 2009, 11:19am by Mark Bernstein »  
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 #20 - Apr 21st, 2009, 11:25am
 
I see Mark B's already commented in the foot of your last post - I'd take his comments over mine!

My 'demo' from earlier today isn't a formally maintained document, just something I made up from a test file from another export challenge I had - use the file as you want! Ask here if you get stuck. I can't know what app version you are/will be using and was just trying to be helpful by indicating that if the export worked differently in versions after v4.6.2 it might be because the ^linkTo^ issue is fixed and my ^setRoot^ kludge has an unwanted result.

~~~~~~
I've deliberately held off from doing anything based directly on Nathan's stretch text file as I still see the file as his. Hopefully I'll see him shortly at the London TB weekend so I should be able to discuss possible versions.
Back to top
 
 

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



Posts: 84
San Francisco, CA
Re: Making an HTML outline (expandable/contractible)
Reply #21 - Apr 21st, 2009, 1:38pm
 
Marcelo,

I am humbled that you find my syllabus a model worth sharing.

This thread gives me strong motivation to prioritize the tutorials and sample files I've been planning to make. I'll post back when I have something usable.

--Johnnie
Back to top
 
« Last Edit: Apr 21st, 2009, 1:38pm by Johnnie Wilcox - mistersquid »  
  IP Logged
Marcelo Mirage
Full Member
*
Offline



Posts: 133
Brazil
Re: Making an HTML outline (expandable/contractible)
Reply #22 - Apr 21st, 2009, 2:09pm
 
@Johnnie: Quote:
This thread gives me strong motivation to prioritize the tutorials and sample files I've been planning to make. I'll post back when I have something usable.


I'm glad this newbie was able to lure a master out of his cave!

We'll be expecting with great interest.
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 #23 - Apr 21st, 2009, 4:22pm
 
OK, here is an updated TBX expanding this mornings version. It incorporates the collapsing outline method shown here: http://www.boutell.com/newfaq/creating/outline.html.

Sample output from the TBX is at http://www.acrobatfaq.com/tbdemos/sitemap/SiteMap.html

The next step might be to add part of the stretch text mechanism to show/hide the note text by clicking on the title. Note, that will mean editing the JS for the collapse method as the expand/collapse click event would need to be limited to the +/- images. Another enhancement would be to extend the outline JS to add 'expand all' and 'collapse all' functions.
Back to top
 
« Last Edit: Apr 21st, 2009, 4:29pm 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 #24 - Apr 21st, 2009, 7:35pm
 
@Mark A: I think you nailed it, Mark!

But, concerning your tbx doc, the "sitemap" template:

line 8: Code:
url(styles) 


and
line 10: Code:
url(outline-scripts) 



are these right? 'cause:

line 7: Code:
url(/CSS/outline) 


and
line 9: Code:
url(/SCRIPTS/outline) 

Back to top
 
« Last Edit: Apr 21st, 2009, 8:53pm by Marcelo Mirage »  
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 #25 - Apr 21st, 2009, 11:35pm
 
Mark A., everything went beautifully. I exported a long outline (over 600 items!) and the result was perfect!

So, let's see what's left:

1. The Expand/Contract All is certainly desirable, especially for long lists.

2. Keyboard navigation (arrow keys):
- left arrow = hide children (conserve all states, so if expanded it'll recall the structure)
- right arrow = expand (recalling all children's states)
- up arrow = select (highlight) one item above
- down arrow = select one item below

2.1 (future) additional navigation features:
- shift (or ctrl, or ... it must be a cross-platform key) + right arrow = expand all children below selected note.
- shift + left arrow = contract all children below selected note.

3. highlight the currently selected item (for visual reference without the mouse cursor)

4. Stretchtext implementation -- which, as you mentioned, will require some js modifications so every character in the text can potentially trigger a specific action, and not just treating the whole item as a single block. (btw, currently, not only the arrow is clickable, but the entire item is treated as a single object).

Uffff..... enough already?


Back to top
 
« Last Edit: Apr 21st, 2009, 11:46pm by Marcelo Mirage »  
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 #26 - Apr 22nd, 2009, 4:14am
 
Re the CSS & Script calls....

As the expanding outline code is not mine (and I don't yet understand the total code flow) I included Mr (first name?) Boutell's code verbatim but in different files to the ones I'd already supplied.

Why do some ^url()^ calls have paths and some names? Well, the Boutell example chooses to name all its support files 'outline.ext'**. TB can have multiple notes of the same name (the extension is set via HTMLExportExtension) but when referring to them a path is needed otherwise the first (in outline order) will always be the one referenced automatically. There are other ways to set the export filename but I like this one as it's easier to see what goes where upon export. If the export filenames and source notes differ, that's hard.

** and place them in the same folder as the HTML.  If you want to change that, you'll need to edit the JavaScript in 'outline.js'

Re or other reply....

#2. You in a browser, IMO unmodified arrow keystrokes should remain in their existing role as ways of scrolling the page up/down/left/right. Ideally, you should use modifiers for the purposes stated.

#2.1 You want to research event trapping and unobtrusive JavaScript.  The new collapsing code is implemented in unobtrusive fashion but one that will require modification when you add your code for trapping (modified) arrow keystrokes.  This topic is probably best pursued in a specialist JavaScript forum.

#3. Again an unobtrusive JavaScript method should suffice. You likely want to add this into the expand/collapse function(s).

#4. For simply showing the text, expanding the functionality of the expand collapse will be cleaner easier to implement. I'd limit stretchtext to within the context of a note's text (^text^). I'd consider carefully the effect on margin notes when you collapse an item to ensure it too dis-/re-appears.

Simple cut'n'paste of the Boutell code gets you the last file I posted. Adding your desired features will involve careful integration of advanced level JavaScript.

Let us know how you get on, it will be good to see your finished result.

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 #27 - Apr 22nd, 2009, 3:14pm
 
@Mark A.:

1. Quote:
Why do some ^url()^ calls have paths and some names? Well, the Boutell example chooses to name all its support files 'outline.ext'**. TB can have multiple notes of the same name (the extension is set via HTMLExportExtension) but when referring to them a path is needed otherwise the first (in outline order) will always be the one referenced automatically. There are other ways to set the export filename but I like this one as it's easier to see what goes where upon export. If the export filenames and source notes differ, that's hard.


- Understood. Nice to know. I was interpreting paths in Tinderbox differently, so now it's all clear. First thanks.

2. Quote:
You in a browser, IMO unmodified arrow keystrokes should remain in their existing role as ways of scrolling the page up/down/left/right. Ideally, you should use modifiers for the purposes stated.


- Agreed. I realize I was getting a little carried away....hehehe...

Quote:
... an unobtrusive JavaScript method should suffice. You likely want to add this into the expand/collapse function(s).


- Dusting off my JS books now... second thanks.

Quote:
I'd limit stretchtext to within the context of a note's text (^text^).


- I was just thinking about a good use for $Text... but it's too early to post about it and I'm not sure it belongs to this topic. I just want to know if $Text could, theoretically, function as the marginal note itself... and... ah... forget it!

Quote:
Simple cut'n'paste of the Boutell code gets you the last file I posted. Adding your desired features will involve careful integration of advanced level JavaScript.


- Yes, I realize that. But Boutell's code is already a great start. I'll just try to understand what he's done. That's enough learning material for now. We know at least it works as it is, so it wasn't time wasted. The first of the two projects I mentioned in a previous post is officially resolved: we have a nice and easy method to make Tinderbox create flawless HTML expandable/contractible outlines.

Quote:
Let us know how you get on, it will be good to see your finished result.


- I sure will, Mark. My intention is to share with the community whatever I can accomplish with Tinderbox. You see, since I'm a beginner in every sense of the word (I only learned about HTML what... a few months ago?), so things you guys already take for granted are an absolute marvel to me. I'm sure there are people in this position out there, so that's my crowd.

If my posts seem naive for some, the more experienced, that's because they really ARE naive. And in spite of that, you guys, Mark A., Mark B., Johnnie, have taken the time to help me in this project. So thank you all for your patience.

I hope this thread served to encourage newbies with their own "naive" projects.


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 #28 - Apr 22nd, 2009, 4:02pm
 
I'm no JS expert either and I didn't want to get your hopes up that a full solution is around the corner. I think the biggest challenge, from a non-expert's perspective is blending together the several different bits of JS written by different authors.

You might find this useful, it is a JS library for handling keystroke events.
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 #29 - Jul 12th, 2009, 4:28am
 
@Mark A.:

Mark, just a small detail I just can't figure out how to change (concerning the sample file you made available): to every note that has children is added the clickable image icon on the left. The problem is that for those that do not have any children, they won't be vertically lined up with the siblings.

Can we have all the siblings lined up? Maybe a conditional like: if note has children, don't indent, if not, then indent npx to the right... but how can that be done? in the css?

Back to top
 
« Last Edit: Jul 12th, 2009, 4:30am by Marcelo Mirage »  
Marcelo Mirage Marcelo Mirage MMUmeda misantropov@yahoo.com   IP Logged
Pages: 1 2 3 4 ... 6
Send Topic Print