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
Send Topic Print
export to different html containers or divs (Read 2003 times)
Steve Scott
Full Member
*
Offline



Posts: 169

export to different html containers or divs
Aug 5th, 2014, 10:16am
 
I'm struggling with how to export things into particular places in html code.  I have created an example to show an outline, finished html, and a visual representation of what I'm going for.  If I can just figure out how to unlock TBX's export at this level, then what I can do with the application will expand immensely.  

Essentially, I want the following to happen:

People of an era to export to col1 and events of an era to export to col2.  Then, break and repeat for the next era.

I've created all of this to learn.  If I could just get the concept, then I can do other things such as put things in three different columns or into table rows or to whatever.

I'm thinking the solutions will rest in using if/then statements. . .  if then note is people, then put it in col1. . .

The TBX outline 
60's  (prototype=era)
     People of the 60's (prototype=people)
           JFK
           The Beatles
     Events of the 60's  (prototype=events)
           Berlin Wall
           Woodstock
70's (prototype=era)
     People of the 70's (prototype=people)
           Richard Nixon
           Led Zeppelin
     Events of the 70's (prototype=events)
           Vietnam War
           Watergate

Sample HTML code

Code:
<div class="container">
<h1>60's</h1>
<div class="col1">

<h4>People of the 1960's</h4>

<ul>

<li>JFK</li>
<li>Beatles</li>

</ul>


</div>

<div class="col2">

<h4>Events of the 1960's </h4>


<ul>

<li>Berlin Wall</li>
<li>Woodstock</li>

</ul>


</div>

<h1>70's</h1>
<div class="col1">

<h4>People of the 1970's</h4>

<ul>

<li>Richard Nixon</li>
<li>Led Zeppelin</li>

</ul>


</div>

<div class="col2">

<h4>Events of the 1970's </h4>


<ul>

<li>Vietnam War</li>
<li>Watergate</li>

</ul>


</div>


</div>
 



Visual Represenation



I'm working on solutions, but if anyone can shove me in the right direction, I would be very grateful.

Back to top
 
« Last Edit: Aug 05th, 2014, 10:22am by Steve Scott »  
  IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: export to different html containers or divs
Reply #1 - Aug 5th, 2014, 11:03am
 
It looks like the $OutlineLevel==2 objects (e.g. "People of the 60s") are all pairs and the first is the left column. So $SiblingOrder is a source of info.

<div class="^if($SiblingOrder==1)^col1^else^col2^endIf^">

For more flexibility (more siblings) you could use a modulo on $SiblingOrder:

Rule or agent action:  $ColumnNumber = mod($SiblingOrder,1)

User attribute $ColumnNumber is now either zero or one.

<div class="col^value($ColumnNumber)^">

CSS classes 'col1' and 'col2' can be styled by separate CSS selector rules:

.col2 {float:right;}

Sidenote. If not familiar with CSS selector naming rules, make sure they start with a letter, e.g. 'col1' or 'c1', but not '1' or '1col'. That will avoid odd cases of styles not working in some browsers.

Anyway, this is mainly a CSS task but hopefully you can see an easy way to seed the correct markers into the HTML based on $SiblingOrder. If using a single cascading template you might need to check $OutlineDepth in order to know when you add the appropriate class statements for left/right columns.

Edit: typo in second code example - missed out opening '(' of ^value()^ statement.
Back to top
 
« Last Edit: Aug 5th, 2014, 11:19am by Mark Anderson »  

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



Posts: 169

Re: export to different html containers or divs
Reply #2 - Aug 5th, 2014, 11:24am
 
Thanks for all of the information Mark!  I'm going to start working on figuring out your answer.  Before I do, a few questions:

I like the method you explained based on outline order, but I'm also wondering if you can use a prototype to assign a div. . .

For example, if a prototype is called pBlockquoteR can you make the note that is assigned that {float:right;}

or

prototype pEra is always in a container such as <div class"era">

Once I get the html to export into properly structured html, I'll be able to handle the CSS.

Thanks.
Steve
Back to top
 
 
  IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: export to different html containers or divs
Reply #3 - Aug 5th, 2014, 12:17pm
 
Yes - sort of.  there are two ways for prototypes to seed export. One is by setting different export templates for different prototypes. Of course, whether the template is a page or an element of a page depends on how the notes are exporting. Here, prototypes for non-root-level notes will likely be snippets of HTML & export code used with ^include()^.

A different angle is using a test of $Prototype to see what type of protoype is in scope:

^if($Prototype=="pSomething")^stuff goes here^else^different stuff^endIf^

If several prototypes use essentially the same template with minor variations, you can combine the two methods. Thus, 4 prototypes might set the same template which tests for each of the 4 so as to insert prototype-specific output.

Quote:
For example, if a prototype is called pBlockquoteR can you make the note that is assigned that {float:right;}


The CSS code (the bit in {}) lives elsewhere, in your CSS file as opposed to the HTML. In the HTML you put markers specific enough so you can style the the correct thing. Virtually any HTML element (tag) can have an ID, but it must be unique to the document. A class is lots of things - possible even different HTML elements that need to be styled the left way, e.g. all right column cells in a 2-column layout). Or CSS can just style an HTML tag lioke a <p> or <span>.

Thus if pBlockquoteR is the <div> holding a right-column cell, then the prototype's template might be:

Code:
<div class="col2">
^text^
^include…etc.
<div>  


You know <div>s with class 'col2' (CSS selector: div.col2) will be styled to be the right column, so you can simply put in the correct class directly into the template. You don't have to work out the class as (assumption alert!) this prototype is given only to right column cell data containers.

Quote:
prototype pEra is always in a container such as <div class"era">

Error:  class"era" should be class="era".

Make the prototype whose template uses the <div class="era"> in its template have an $OnAdd of $Prototype="pEra". If the parent container uses several different child prototypes, handle it the other way around. Make an agent or pEra's rule check that its (original's) parent container is of the correct type and give you some sort of (visual?) warning (colour, badge, etc.) if a pEra has a parent with the wrong prototype so you can fix that pre-export.

It's hard to say 'just do this…'. the easiest way to figure out the template and prototype breakdown is, as you have done, to mock up the major structural parts of your main HTML structure and then map it back onto your TBX outline. There will be a bit of testing and rinse&repeat so use a test file to keep your real data clean of any relevant attribute setting so inheritance works correctly when you come to apply the finished design. A key thing you're looking to spot is where the HTML (tag) structure doesn't map to your outline.  If so, one other or both need to be altered until there is a fit.

You may need to brush up on CSS (a whole subject in itself) if you're not sure how/what it can style. Firefox with the Firebug plug-in os great for sleuthing layout issues; I find it much easier that Safari/Chorome WebKit derived equivalent code view (i.e. what you see if you right-click a page and click inspect element). Having some confidence in you CSS/HTML relationship will help figure where TB templates need to insert the appropriate styling hooks.
Back to top
 
 

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



Posts: 169

Re: export to different html containers or divs
Reply #4 - Aug 8th, 2014, 9:33pm
 
Mark,

I really am grateful for the detailed response.  I'm loving how I'm able to implement this.  TBX is so powerful!

Steve
Back to top
 
 
  IP Logged
Pages: 1
Send Topic Print