Tinderbox User-to-User Forum (for formal tech support please email: info@eastgate.com) - Making an HTML outline (expandable/contractible)

Aug 19^th, 2018, 9:26pm

	Welcome, Guest. Please Login
	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).

Home

Help

Tinderbox User-to-User Forum (for formal tech support please email: info@eastgate.com) › Tinderbox Users › Exporting from Tinderbox › Making an HTML outline (expandable/contractible)

‹ Previous topic | Next topic ›

Pages: 1 ... 3 4 5 6

Making an HTML outline (expandable/contractible) (Read 86850 times)

Marcelo Mirage

Full Member

Offline

Posts: 133
Brazil

Re: Making an HTML outline (expandable/contractible)
Reply #60 - Jan 03^rd, 2010, 8:00pm

Ok, step by step, 1st issue:

1. Open Outliner&TextFrame_v3.tbx

2. Add the following text to note "1":

3. Link selected text to the corresponding note in /outliner:

4. Notice it's a text link, not a weblink:

5. Do the same with 1.2.1:

6. Now, link the other two, NOT to the notes in /outliner, but in /def:

and

7. Now, watch what happens (opt + cmd + H):

See how the last two links became anchor tags, and the first two did not?

IP Logged

Marcelo Mirage

Full Member

Offline

Posts: 133
Brazil

Re: Making an HTML outline (expandable/contractible)
Reply #61 - Jan 3^rd, 2010, 8:46pm

The second issue:

1. Open Outliner&TextFrame_v3.tbx

2. Export the whole thing to an empty folder (I just left the png's because this is TB 5.0.1):

3. Look at the number of files actually exported:

4. Now, export once more over that, and all of a sudden:

See that 1 file was added to each folder? That's what I meant by "having to export TWICE".

=============
But this problem is solved now. I made a new copy over, zipped it, and the one that is now available is exporting everything the first time around, so, behold:

http://dl.dropbox.com/u/76377/TinderboxForum/Outliner%26TextFrame_v3.tbx.zip

(the zip file contains the tbx doc and the export folder result. It will be available until Mark B. can update to v3 in the Public File Exchange)

IP Logged

Mark Anderson

YaBB Administrator

Offline

User - not staff!

Posts: 5689
Southsea, UK

Re: Making an HTML outline (expandable/contractible)
Reply #62 - Jan 4^th, 2010, 5:53am

Re point #2 of your post three back, that is as I'd expect. Aliases have their own inbound basic links, as distinct from their original notes's inbound links.

Re the export-twice issue. I now understand to what you're referring, but can't replicate it. I guess there was a glitch in your older TBX export set-up that's now resolved.

Export of HTML links. (Note - the demo you posted doesn't have the links described). I added the links as per your previous post and can replicate the result. The result is simple. Note '1.1' and '1.2.1' are never exported to their equivalent TBX location but rather are included within 'Outliner.html'. As TB doesn't link to includes (for the reasons already discussed), the TB links to notes inside 'Outliner' doesn't become an HTML link.

It seems you didn't get forwarded the HTML/coding corrections I tried to pass on back in November 09 having seen your earlier version of the demo. Anyhow, I've applied corrections to your v3 TBX (the last link you posted above). I'll add a link to my version with the corrections below, but first a summary of changes:

Template names. The existing names are a little confusing for other users. The HTML frame exports via 'page' and the pages export via 'frame'. I've reversed the titles so the 'frame' template is used to export the frameset (index.html) and individual note pages are exported using template 'page'.
Note 'index.html' uses 'frame' template.
Agent 'Def' sets children to use 'page' template
Your 'page' template, is now called 'frame'. Now has correct DTD - it needs a framset DTD. Closed all open tags in accordance with XHTML requirements. Added an encoding tag to the <head> in order to meet W3C validation criteria.
Your 'frame' template is now called 'page'. Added a <body> element, added tag closures, etc. to achieve valid HTML code.
'sitemap' template. Cleaned up HTML, removed DTD-invalid 'onload' handler (which is now moved to a JS script (see below).
'sitemap-titles' template. Cleaned up layout to give cleaner HTML code structure on export.
As TB v5.x has currently suspended embedded image support, I've removed the oopen/oclose notes. I suggest adding comment to the 'About this Document' note explaining use of the images (which you zip with the TBX. If not using exported embedded images it might make more sense to code so the PNGs use an /images/ folder in the export (and update the TBX code accordingly) as that's a cleaner layout for actual active use of this model.
Script 'outline-scripts'. Added code to make unobtrusive attachment of an onload command to the outliner page. This method allows the HTML to validate against the given DTD.
Use of Bank Gothic oultine font. I've not changed this but I'd suggest doing so. The style of the font makes it hard to tell upper/lowercase characters apart in a project where we need to cite some names in code, making it easier for the user to use the wrong case. Still this is a stylistic choice, like the outline which has too much contrast for my eyes (I had to soften it by changing from black to grey background #222222). Anyway, I'll leave those items to you or the eventual users to change as they see fit.

OK, here's a link to a TBX with the above fixes added: Outliner-v3-ed.tbx.

« Last Edit: Jan 4^th, 2010, 10:51am by Mark Anderson »

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)

IP Logged

Marcelo Mirage

Full Member

Offline

Posts: 133
Brazil

Re: Making an HTML outline (expandable/contractible)
Reply #63 - Jan 4^th, 2010, 8:08am

Wow, man, thanks for your effort!

Quote:

Aliases have their own inbound basic links, as distinct from their original notes's inbound links.

That clarifies things. Since aliases are NOT the same as the originals, it makes sense that the links to the originals wouldn't show, since the originals are not exported. However, there's really no way to tell whether a link is bound to an alias or to an original, is there? In the browse links, one cannot tell. Here's a suggestion to Mark B., a feature request.

Quote:

Re the export-twice issue. I now understand to what you're referring, but can't replicate it. I guess there was a glitch in your older TBX export set-up that's now resolved.

Yes, the glitch is gone, so... that's resolved.

Quote:

Export of HTML links. (Note - the demo you posted doesn't have the links described). I added the links as per your previous post and can replicate the result. The result is simple. Note '1.1' and '1.2.1' are never exported to their equivalent TBX location but rather are included within 'Outliner.html'. As TB doesn't link to includes (for the reasons already discussed), the TB links to notes inside 'Outliner' doesn't become an HTML link.

Fully understood.

Quote:

Template names. The existing names are a little confusing for other users. The HTML frame exports via 'page' and the pages export via 'frame'. I've reversed the titles so the 'frame' template is used to export the frameset (index.html) and individual note pages are exported using template 'page'.

Ok... I reasoned frames are inside a page, not the other way around. But it's fine.

Quote:

Note 'index.html' uses 'frame' template.

Ok... since the names got switched, that makes sense.

Quote:

Agent 'Def' sets children to use 'page' template

Again, makes sense as the names were switched.

Quote:

Your 'page' template, is now called 'frame'. Now has correct DTD - it needs a framset DTD. Closed all open tags in accordance with XHTML requirements. Added an encoding tag to the <head> in order to meet W3C validation criteria.

Thanks! That was something I could never suspect.

Quote:

Your 'frame' template is now called 'page'. Added a <body> element, added tag closures, etc. to achieve valid HTML code.

Ok... wow... didn't realize I left so many open tags!

Quote:

sitemap' template. Cleaned up HTML, removed DTD-invalid 'onload' handler (which is now moved to a JS script (see below).
'sitemap-titles' template. Cleaned up layout to give cleaner HTML code structure on export.

Nice. Thanks once again.

Quote:

I suggest adding comment to the 'About this Document' note explaining use of the images (which you zip with the TBX. If not using exported embedded images it might make more sense to code so the PNGs use an /images/ folder in the export (and update the TBX code accordingly) as that's a cleaner layout for actual active use of this model.

Agreed.

Quote:

Use of Bank Gothic oultine font. I've not changed this but I'd suggest doing so. The style of the font makes it hard to tell upper/lowercase characters apart in a project where we need to cite some names in code, making it easier for the user to use the wrong case. Still this is a stylistic choice, like the outline which has too much contrast for my eyes (I had to soften it by changing from black to grey background #222222). Anyway, I'll leave those items to you or the eventual users to change as they see fit.

Fair enough. I didn't spend much time considering cosmetics. I kind got used to differentiating between upper and lower case in Bank Gothic, but it sure is confusing. As for the colors, in my case it's always guesswork, I'm horrible at that.

====
The link for the document is broken. Can you check?

====

Mark, I can't thank you enough for your help, as usual. This project has been a great learning experience. Considering I barely knew anything about HTML before that, I can safely state that the little I learned I owe this adventure (not to mention how much I learned of Tinderbox itself)

====

Well, as soon as I have access to your edited document, I'll make a few changes and submit it to PFE.

I hope the readers of this thread have also gained with our discussion.

« Last Edit: Jan 4^th, 2010, 8:22am by Marcelo Mirage »

IP Logged

Mark Anderson YaBB Administrator Offline User - not staff! Posts: 5689 Southsea, UK	Re: Making an HTML outline (expandable/contractible) Reply #64 - Jan 4^th, 2010, 10:58am I've fixed the link in the previous post - the path was right but I guess the filename upset the browser. Glad the points make sense. I learned the hard way that the cleaner (more valid) the HTML I write the fewer hard-to-fix glitches I get!
Back to top	-- Mark Anderson TB user and Wiki Gardener aTbRef v6 (TB consulting - email me) IP Logged

Marcelo Mirage

Full Member

Offline

Posts: 133
Brazil

Re: Making an HTML outline (expandable/contractible)
Reply #65 - Jan 4^th, 2010, 3:42pm

Ok, here we go,

version 4 is ready: ~~http://dl.dropbox.com/u/76377/TinderboxForum/Outliner%26TextFrame_v4.zip~~
Edited:

Current version now is 5.1

(temporarily, until Public File Exchange can be updated)

@Mark A.:
1. I left the background color alone.
2. Bank Gothic is gone.
3. /Images folder is created. A placeholder, for now.
3.1 A warning was added about the image drawback in v5.0.1

« Last Edit: Jan 5^th, 2010, 11:48am by Marcelo Mirage »

IP Logged

Mark Anderson

YaBB Administrator

Offline

User - not staff!

Posts: 5689
Southsea, UK

Re: Making an HTML outline (expandable/contractible)
Reply #66 - Jan 4^th, 2010, 5:51pm

Thanks, but what I get is pretty broken. I've spent a good while poking at it but I can't find all this things you've broken since the last version. I strongly suggest you add in the TB text links in note '1' cited in the thread as the lack of them is confusing.

It looks as though you swapped the code for the frame/page templates but didn't update the pages that use them. The images in the left pane are missing - probably because you didn't update the JS script that uses them.

The last demo I posted worked. Why don't you use that file rather than your v3 as your start and add back anything you want - at least that way we know the export works before you start editing.

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)

IP Logged

Marcelo Mirage Full Member Offline Posts: 133 Brazil	Re: Making an HTML outline (expandable/contractible) Reply #67 - Jan 4^th, 2010, 10:09pm My kingdom for a working version!!! Mark, check your version. Export isn't working for me. Everything is a mess now, 'cause I just can't find a working copy anymore.
Back to top	IP Logged

Mark Anderson

YaBB Administrator

Offline

User - not staff!

Posts: 5689
Southsea, UK

Re: Making an HTML outline (expandable/contractible)
Reply #68 - Jan 5^th, 2010, 7:04am

Marcelo, I've found and fixed a number of issues. Just doing some polishing - will post file when I'm done. Here's a taster:

I've:

Generally rationalised naming so those grabbing a copy via the exchange will find the structure more intuitive. I've used a DisplayExpression with a few key notes to indicate their export name or what they do (e.g. the right frame).
'Def' is now the 'Right Frame' - i.e. what it actually does.
The 'Frame' (and its template) are now 'Frameset', making it unambiguous as to what it does.
Added specimen exporting/non-exporting links
Some deeper outline nesting to test outliner code
Added a new template for plain text export (for readme files)
Found/fixed errors in the scripts exports and scripts themselves.
Fixed CSS syntax errors
Added an exporting /images/ folder. A readme.txt is placed there to trigger the folder creation. Currently the user has to place the outline's PNGs in there by hand. When the outliner's done, making the think into a TB wizard could automate the placement of the images. If going the Wizard route, this is best done once the TBX is finished.
Adjusted colours for readability (less contrast)
Used a more legible font with better upper/lower case disparity (feel free to adjust this!)
..and more.

« Last Edit: Jan 5^th, 2010, 8:26am by Mark Anderson »

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)

IP Logged

Mark Anderson YaBB Administrator Offline User - not staff! Posts: 5689 Southsea, UK	Re: Making an HTML outline (expandable/contractible) Reply #69 - Jan 5^th, 2010, 8:34am Marcelo, try this: O-TF.zip This exports without problems on my 10.5.8 system using TB v5.0.1. The only task is to place the 2 PNGs in the /images/ sub-folder of the HTML export (the JS script is adjusted to expect the images be there).
Back to top	-- Mark Anderson TB user and Wiki Gardener aTbRef v6 (TB consulting - email me) IP Logged

Marcelo Mirage

Full Member

Offline

Posts: 133
Brazil

Re: Making an HTML outline (expandable/contractible)
Reply #70 - Jan 5^th, 2010, 11:06am

hehehe.... this is embarrassing... but it ain't working...

1. Ok. First, the agent "Right Frame". We needed a slight modification to the query> descendedFrom(Outliner) > you did not capitalize it, so the agent wasn't finding anything.

2. The /Prototypes folder was inside /Outliner. I moved it up to "control".

3. A strange "1.html" is created in root directory. It was actually the webname given to /Prototypes, which was being exported. I switched to HTMLDontExport, but oddly, it's still being exported regardless...

4. That bug about having to export twice in order to have all the files created is still around. I'm beginning to suspect of a bug in Tinderbox 5.x or OS X 10.4.

IP Logged

Mark Anderson

YaBB Administrator

Offline

User - not staff!

Posts: 5689
Southsea, UK

Re: Making an HTML outline (expandable/contractible)
Reply #71 - Jan 5^th, 2010, 11:34am

Oh bother - don't know how those errors crept in. Items 1-3 fixed, plus some links from note 1 had gone awry and are fixed. Issue#4, I can't replicate. Which specific files aren't being created on first export?

I've uploaded a new zip to the above URL - the zip name is the same but the TBX inside is is now 'O-TF_v5-1.tbx'.

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)

IP Logged

Mark Anderson YaBB Administrator Offline User - not staff! Posts: 5689 Southsea, UK	Re: Making an HTML outline (expandable/contractible) Reply #72 - Jan 5^th, 2010, 11:36am Re the 2-export issue, I don't think just looking at the file count is enough. Look at the exact filenames and note those failing on the first export. I don't see it here but it doesn't meant it isn't happening elsewhere. I'm on v5.0.1 on OS 10.5.8.
Back to top	-- Mark Anderson TB user and Wiki Gardener aTbRef v6 (TB consulting - email me) IP Logged

Marcelo Mirage

Full Member

Offline

Posts: 133
Brazil

Re: Making an HTML outline (expandable/contractible)
Reply #73 - Jan 5^th, 2010, 11:44am

Ok... if you don't mind, I have played Frankenstein (I know it's usually a bad idea, but this time I really paid attention to every detail and have successfully exported everything).

http://dl.dropbox.com/u/76377/TinderboxForum/Outliner%26TextFrame_v5.1_MM.zip

I have added the MM suffix (Marcelo Mirage) to avoid confusion.

I have added a decimal to version 5 (now 5.1), otherwise we'll end up with a huge number of versions out of minor changes.

I have cloned your O-TF.tbx version's javascripts and templates, so all your modifications were taken into account.

I have fixed the minor glitches I mentioned in my last post.

The "export twice" phenomenon is gone now with this current version. So everything is in place.

So, if you'd care to check this current version (take your time... you must be sick of it Wink

)

p.s.: as for your modifications>
Quote:

Generally rationalised naming so those grabbing a copy via the exchange will find the structure more intuitive. I've used a DisplayExpression with a few key notes to indicate their export name or what they do (e.g. the right frame).

Ok, the change was taken.

Quote:

'Def' is now the 'Right Frame' - i.e. what it actually does.
The 'Frame' (and its template) are now 'Frameset', making it unambiguous as to what it does.
Added specimen exporting/non-exporting links
Some deeper outline nesting to test outliner code
Added a new template for plain text export (for readme files)
Found/fixed errors in the scripts exports and scripts themselves.
Fixed CSS syntax errors

Ok, all these were taken.

Quote:

Added an exporting /images/ folder. A readme.txt is placed there to trigger the folder creation. Currently the user has to place the outline's PNGs in there by hand. When the outliner's done, making the think into a TB wizard could automate the placement of the images. If going the Wizard route, this is best done once the TBX is finished.

Prior to TB 5.x I didn't have to resort to a Wizard in order to export the images (in the correct png format). I'm sure it'll work just fine when TBX is finished.

Quote:

Adjusted colours for readability (less contrast)
Used a more legible font with better upper/lower case disparity (feel free to adjust this!)

Not that I don't agree with your choice, but I'd prefer to leave my settings for font and colors, that way I can spot my versions faster (ah, it's just too much trouble to change everything back. So let the users decide).

Quote:

..and more.

I also made some slight modifications... too tiny to mention. Well... at least we have a working version...

« Last Edit: Jan 5^th, 2010, 12:02pm by Marcelo Mirage »

IP Logged

Mark Anderson

YaBB Administrator

Offline

User - not staff!

Posts: 5689
Southsea, UK

Re: Making an HTML outline (expandable/contractible)
Reply #74 - Jan 5^th, 2010, 12:33pm

OK, lots of snaglets for you (mostly cleaning up action code, e.g. ^code in actions is deprecated since v4). I'll let you do these:

'Prototypes OnAdd should be: $IsPrototype=true; $HTMLDontExport=true;
'*entry' OnAdd should be: $Prototype="*entry";
'*entry' Rule should be: $webName=$HTMLExportFileName+$HTMLExportExtension;$HTMLDontExport=false;
Incidentally, good TB form is CamelCase for attributes, so $WebName would be better than $webName. As the two attribute names are different attributes, if you do correct this one, make the new attroibute, use an agent (all notes with $webName not empty) to copy $webName to $WebName, then you can delete $webName. update all code referring to the attribute, key attribute lists etc - this is why doing the naming right pays off, it's a pain to fix later; that said the existing name works - to me it looks like a typo when I see it in actions, etc.
'Right Frame' Agent. No action needed - the agent only finds things descended from -'outliner' and that seeds the correct prototype which in turn sets a rule for the notes/aliases. We don't have to do all that work again.
'outliner'. OnAdd: $Prototype="*entry";
'outliner & '*entry'. $Color: bright blue warmer. Basic 'bright blue' is way too harsh to look at for any length of time in this set-up.
Set outline MapBackgroundColor to '#292929'.
Repair defined colour 'dark warm gray' back to '#554a40'.
Open any Info view, Appearance group, select Color in the left column, then edit button at bottom. In the edit dialog change the default to 'light warm gray dark'. The grey notes will now look OK on the #292929 background.
I'd have stuck with my way for making the image folder; but I'll agree to differ! When images return, I doubt we'll be using the placeholder trick - not least as TB-exported images are JPEGs - your script will then fail as it expects a PNG file. The way to get the images into this folder is to make a TB Wizard (instructions in aTbRef) when done.
I checked and scripts are working OK.
'styles' CSS & frames css - insert a blank line line before a:visited. This is for code tidiness - no actual change.
Links in content notes - all missing!
Template 'sitemap-titles' - to get syntax to current style change entries of ^get(webName)^ to ^value($webName)^ (or to ^value($WebName)^ <g>).
I think that's it...!

For test, I'd try some slightly deeper levels of nesting, and try some notes with non-number names - even something Unicode (accented) perhaps just in case it make some glitch we'd not foreseen.

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)

IP Logged

Pages: 1 ... 3 4 5 6

‹ Previous topic | Next topic ›

« Home

‹ Board