Registering a new button

Minimal example:

from ftw.mobile.buttons import BaseButton


class UserButton(BaseButton):

    def label(self):
        return u"User menu"

    def position(self):
        return 1000

    def data(self):
        """json data to display"""
        context_state = getMultiAdapter((self.context, self.request),
                                        name=u'plone_context_state')

        user_actions = context_state.actions('user')

        def link_data(item):
            return {'url': item.get('url'),
                    'label': item.get('title')}
        return map(link_data, user_actions)

You need to define at least the label, the position and the data for a working mobile button.

The data method needs to return a valid json data structure as follows:

[
    {
        "url": "$LINK_URL",
        "label": "$LINK_LABEL"
    },
    {
        "url": "$LINK_URL",
         "label": "$LINK_LABEL"
    }
]

The user button has the position 1000 which is rendered in the rightmost position and the navigation has the position 100, which is rendered in the leftmost position.

The navigation button introduces a lot of complexity. It is not considered a simple button ;-)

Details Navigation Button

The JS for the navigation button wraps all children of the body tag with adds two additional divs on pageload.

2.2.2 (2021-08-20)

• Remove Plone 5’s JS dependencie on plone bundle. [mathias.leimgruber]

2.2.1 (2021-02-19)

• Fix closing nav with ESC with no jQuery UI [Nachtalb]

• Emit “mobilenav:body:wrapped” after the body has been wrapped [Nachtalb]

2.2.0 (2021-01-27)

• Add willopen and willclose nav events. [mathias.leimgruber]

• Fix JS error by not init nav menu if html structure is missing. [mathias.leimgruber]

2.1.0 (2020-07-27)

• AMD-ify JavaScript for Plone 5 (using yarn). [djowett-ftw]

• Fix Plone 5’s toolbar alignment. [djowett-ftw]

2.0.1 (2020-02-20)

• Place mobile buttons next to text in default layout. [busykoala]

• Allow non-ascii characters in navigation buttons [Nachtalb]

2.0.0 (2019-08-13)

• Add support for Plone 5.1. [mbaechtold]

1.10.2 (2019-05-16)

• Use a better selector for the script detach part (to catch only actual js). [mathias.leimgruber]

1.10.1 (2018-11-12)

• Fix JS error in arrowScrollController if there are no topLevelTabs. [mathias.leimgruber]

• Use portal title on root_node. [mathias.leimgruber]

1.10.0 (2018-05-25)

• Allow option for ignoring exluded content.

1.9.0 (2018-05-24)

• Allow opening top level tabs directly. [Kevin Bieri]

• Allow showing leafnote siblings. [Kevin Bieri]

1.8.0 (2018-03-19)

• Fix getting children if the root is not the portal_root. [mathias.leimgruber]

• Make compatible with ftw.theming 2.0.0. [Kevin Bieri]

1.7.0 (2017-06-02)

• Fix scroll behavior of top level tabs in mobile navigation. [Kevin Bieri]

• Fix: ftw.testbrowser compatibility. [mathias.leimgruber]

• Set focus on active element on the tab navs [Kevin Bieri]

• Make possible to close the navigation using Escape key [Kevin Bieri]

• Skip links in the mobile menu when it’s closed [Kevin Bieri]

• Fix icon size for IE11 in mobile navigation [Kevin Bieri]

• Fix offset of overlay in IE11 and Edge [Kevin Bieri]

• Introduce swipe gesture for closing the mobile menu. [Kevin Bieri]

1.6.6 (2017-02-16)

• Fix mobile menu transition on IE>=9. [Kevin Bieri]

1.6.5 (2017-01-18)

• Set the children_loaded flag on prepended nodes too. [mathias.leimgruber]

• Append current context path to prepend_unauthorized_parents, because the current obj may be excluded from nav. [mathias.leimgruber]

1.6.4 (2016-12-01)

• Do not detach script tags of type x-handlebars-template. jQuery is not able to re-attach them. [mathias.leimgruber]

1.6.3 (2016-11-25)

• Close the mobile-navigation when the screen size changes from mobile to desktop while the navigation is open. [raphael-s]

1.6.2 (2016-11-09)

• Actually mark external links with a “external-link” class in navtree. [mathias.leimgruber]

1.6.1 (2016-11-08)

• Toggle aria-hidden attribute on mobile navigation elements [raphael-s]

1.6.0 (2016-11-07)

• Add various JavaScript events for convenience. [jone]

1.5.1 (2016-10-20)

• Hide current path on root when showing one level. [jone]

• Fix invalid markup in template, causing broken markup with chameleon. [jone]

1.5.0 (2016-10-17)

• Mobile buttons: add settings “show_tabs” and “show_two_levels_on_root”. [jone]

• Pass the url of the navigation root to the handlebars template. [mbaechtold]

• Use helper text for screenreaders also as title attribute on the link itself. [mathias.leimgruber]

• Implement plone translations for handlebars templates. [mathias.leimgruber]

• Do not render handlebars templates with PageTemplate engine. [mathias.leimgruber]

• Add “navActiveNode” class to the node which is currently loaded. [jone]

• Add separate “current node” item in addition to “parent node”. [jone]

• Leaf nodes: open parent navigation. [jone]

• Prevent inline javascript from evaluating twice. [Kevin Bieri]

1.4.0 (2016-09-26)

• Install ftw.gopip for better performance. [jone]

• Mark leaf nodes and remove link to children. [jone]

1.3.0 (2016-09-20)

• Add support for plone.app.multilingual [Kevin Bieri]

1.2.0 (2016-09-09)

• Open the target behind a top level node not having children after having clicked it. [jone, mbaechtold]

• Scroll back to the top level node after having clicked it. [jone]

1.1.0 (2016-09-09)

• Fix crash when parent is excluded from navigation by also including parents when excluded from navigation. [jone]

• Make it possible to close the menu when clicking somewhere outside of the menu [Kevin Bieri]

1.0.2 (2016-08-08)

• Fix hightlighting more than one top level tab [Kevin]

• Translate user menu actions. [jone]

• Fix issues when the user has no permission to view a parent. [jone]

1.0.1 (2016-07-18)

• Pevent scrolling when navigation is open [Kevin Bieri]

• Use zindex system from ftw.theming to fix dropdown menues [Kevin Bieri]

1.0.0a3 (2016-07-11)

• Introduce transitionend marker on root element. [Kevin Bieri]

1.0.0a2 (2016-07-06)

• Fix offcanvas navigation on iOS devices. Rework revealing offcanvas navigation using two additional wrappers. Refactor styling. [Kevin Bieri]

1.0.0a1 (2016-07-06)

• Init release