DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

Add jump-navigation¶

The second userfunction adds the navigation to your page. You need to add the 'lib.tx_form4_bitv.navigation' to the top of your html template to add the jump-navigation to the page. But in your template it should be added as the last object.

The userfunction is wrapped into a typoscript COA Object to build the navigation. so feel free to override it, if necessary.

lib.tx_form4_bitv.navigation = COA
lib.tx_form4_bitv.navigation {
    10 = TEXT
    10.data = TSFE:tmpl|setup|sitetitle
    10.wrap = <strong>|</strong>

    20 = COA
    20{
        10 = COA
        10{
           wrap = <p id="websiteurl">|</p><hr class="bitv" />
           10 = TEXT
           10{
               typolink{
                   target = _top
                   parameter.data = PAGE:uid
                   forceAbsoluteUrl = 1
                   useCacheHash = 1
               }
            }
       }
       20 =TEXT
       20{
           typolink{
               target = _top
               parameter.data = PAGE:uid
               forceAbsoluteUrl = 1
               useCacheHash = 1
               returnLast = url
           }
       }
    }
    30 = COA
    30 {
        10 = TEXT
        10.dataWrap = <strong>{LLL:EXT:form4_bitv/Resources/Private/Language/locallang.xlf:bitv.anchor.jump}</strong>
        20 = USER
        20 {
            userFunc = FORM4\Form4Bitv\Utility\BitvUtility->renderBitvAnchorNavigation
            llExtName = {$plugin.tx_form4_bitv.locallangExtName}
            anchor_wrap = |
         }
         stdWrap.required = 1
         stdWrap.wrap = <p>|</p>
    }
    stdWrap.required = 1
    stdWrap.wrap = <div class="bitv">|</div>
}

Note

This way works for fluid templates (cObject:FLUIDTEMPLATE) as for pure typoscript renderings(cObject: TEMPLATE) as well. But be always assure that the navigation copied from the typoscript Object lib.tx_form4_bitv.navigation comes after the registration of the section links! See the example for more infos.

For the second userfunction just copy lib.tx_form4_bitv.navigation typoscript Object at the end of your template. Here one example with a FLUIDTEMPLATE cObject.

 #first render the bitv links like already described in the "Add BITV marker to every section" chapter
 lib.bitvContent = COA
 lib.bitvContent{
     # this part should be seen as example - we want the bitv in front of a content object.
     # but you also can just make a single content out of it which renders a TEXT cObject
     # with the given anchor.

     stdWrap {
         prepend = TEXT
         prepend{
             wrap =  <div class="invisible"><hr /><p><strong>|</strong></p></div>
             value = maincontent
          }
          append = USER
          append.userFunc = FORM4\Form4Bitv\Utility\BitvUtility->setBitvAnchor
          append.userFunc.anchor = content
          append.userFunc.position = 1
          required = 1        # end of including the bitv field - this might be just seen as a possible use case.
          outerWrap = <nav id="main-navigation">|</nav>
     }
     # this could maybe your section Element if you want to add it in the the old typoscript way.
     10 < styles.content.get
     10.content.select.where = colPos=0
     10.stdWrap.outerWrap = <div class="myexampleContent">|</div>
 }

 # add more elements if needed and then go over to the page rendering

page = PAGE
page {
    10 = FLUIDTEMPLATE
    10 {
        templateRootPaths.0 = EXT:yourExt/Resources/Private/Templates/
        partialRootPaths.0 = EXT:yourExt/Resources/Private/Partials/
        layoutRootPaths.0 = EXT:yourExt/Resources/Private/Layouts/
        templateName = Page/Default
        variables {
            bitvnavlink  < lib.bitvMainNavigation
            bitvsublink  < lib.bitvSubnavigation
            bitvcontentlink  < lib.bitvContent
            #... add more if you need them ...

            #make sure to add the lib.tx_form4_bitv.navigation as the LAST variable - it is necessary as it reads all the set sectionlinks
            bitnav  < lib.tx_form4_bitv.navigation
        }
     #...
 }

Note

In a fluid template just output the variable in a format.raw viewhelper. E.g.: <f:format.raw>{bitnav}</f:format.raw>

To work with a screenreader the CSS class 'bitv' needs to be invisible, not by setting display to none but by moving the element out of the screen.

The connection between the jumpnavigation and the anchor is set in the user function by setting the anchor name.

This needs to be the same as the actual anchor name.

In the user function you can set the position of this section in the jumpnavigation.

Every section needs to have a unique position number.

AnchorWrap¶

For the userfunction FORM4Form4BitvUtilityBitvUtility->renderBitvAnchorNavigation are two properties available for the wrapping of the anchor of the menu:

anchor_wrap.char = $
anchor_wrap = <li>$</li>

The anchor_wrap allows you to wrap the generated link with your own Wrapper. And the anchor_wrap.char allows you to replace the default placeholder | with another sign or string of your choice.

If you use the lib.tx_form4_bitv.navigation typoscript you can add these parameters there wwith:

lib.tx_form4_bitv.navigation.30.20.anchor_wrap.char = %
lib.tx_form4_bitv.navigation.30.20.anchor_wrap = <li clöass="myClass">|</li>