.. ==================================================
.. FOR YOUR INFORMATION
.. --------------------------------------------------
.. -*- coding: utf-8 -*- with BOM.

.. include:: ../../Includes.txt


.. _configuration-add-jump-navigation:

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.

.. code-block:: typoscript

    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.

.. code-block:: typoscript

    #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 **FORM4\Form4Bitv\Utility\BitvUtility->renderBitvAnchorNavigation** are two properties available for the wrapping of the anchor of the menu:


.. code-block:: typoscript

   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:

.. code-block:: typoscript

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