New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New faster navigation with dropdown menus for Plone #2516

Open
agitator opened this Issue Sep 14, 2018 · 19 comments

Comments

@agitator
Member

agitator commented Sep 14, 2018

Responsible Persons

Proposer: Peter Holzer (@agitator)

Seconder: Johannes Raggam (@thet)

Abstract

Plone sites typically have a lot of content, the global navigation only supports the main folders of the site for navigation. It's time we have dropdown menus in Plone by default.

Motivation

webcouturier.dropdownmenu is used by many plonistas to solve this problem - not without issues.

  • It doesn't follow the mobile first paradigm, which was introduced with the plonetheme.barceloneta in Plone 5
  • Performance issues: takes several second on a cold Plone instance to render because it uses multiple catalog queries to build the markup

Assumptions

  • It's time we have dropdown menus in Plone by default

Proposal & Implementation

While I was in process of updating the styles for mobile first, Johannes found out about the performance issues while profiling a client site. We then decided to start a new implementation of a dropdown navigation for Plone.

The new implementation features:

  • Mobile first styling
  • Extends the existing navigation styles and ui switches from plonetheme.barceloneta
  • Build-in efficient caching
  • exclude_from_nav indexer
  • Renders on the navigation root object and sets inPath and current CSS classes in JavaScript, which allows efficient caching.
  • Replacement for the plone.global_sections viewlet
  • plone.tiles based navigation
  • Focus on speed of execution
  • Configurable navigation start path
  • Configurable navigation depth

Todo:

  • Finish styling
  • JSON data structure for client side rendering.
  • Finish caching mechanism
  • Extend existing Plone navigation controlpanel with options for navigation depth (start), caching
  • Upgrade step

Deliverables

Existing code and proof of concept in https://github.com/collective/collective.navigation (still needs polishing)

Risks

  • Existing customizations of the plone.global_sections viewlet have to be updated

Participants

  • Peter Holzer - UI/UX, frontend, styling,...
  • Johannes Raggam - Development, backend

https://github.com/plone/buildout.coredev/blob/5.2/plips/plip-2516-navigation.cfg

Tasks necessary for the plip:

  • add NavTreeProvider as contentprovider
    • enhance NavTreeProvider with globalsections functionality
  • add BooleanIndex exclude_from_nav
  • add Upgrade step for index
  • add Navigationmarker pattern
  • add Styles for new navigation
  • Extend navigation controlpanel and use config in NavTreeProvider
  • Finish styling
    • current items
    • submenu marker
    • keep current path open on mobile
  • Caching
  • Tests
  • Update documentation, changelogs, ...

Nice to have (could be finished later):

  • Tile
  • JSON

@pbauer pbauer added this to the Plone 5.2 milestone Sep 14, 2018

@pbauer pbauer added this to New (drafts) in PLIPs Sep 14, 2018

@agitator

This comment has been minimized.

Member

agitator commented Sep 14, 2018

@agitator

This comment has been minimized.

Member

agitator commented Sep 14, 2018

Where should the code go?

  • Viewlet & Tile into plone.app.layout or Products.CMFPlone?
  • Styles plonetheme.barceloneta
  • Javascript Products.CMFPlone (mockup)?
@hvelarde

This comment has been minimized.

Member

hvelarde commented Sep 14, 2018

the tile must live out of core for obvious reasons.

@jensens

This comment has been minimized.

Member

jensens commented Sep 14, 2018

@hvelarde no, it can be included with a zcml:condition. Thats fine .

@frapell

This comment has been minimized.

Member

frapell commented Sep 14, 2018

@agitator I think viewlet & tile in p.a.layout, and JS in mockup, if it is a pattern

@iham iham self-assigned this Sep 18, 2018

@iham

This comment has been minimized.

Member

iham commented Sep 18, 2018

"It's time we have dropdown menus in Plone by default"
i can sooo agree to that!

small, but nice typo:
"Finish cashing mechanism"
i guess it's about caching, not cashing ;)

@agitator

This comment has been minimized.

Member

agitator commented Sep 18, 2018

fixed the cashing ;-)

@iham

This comment has been minimized.

Member

iham commented Sep 18, 2018

+1 for
viewlet in plone.app.layout -> sections.pt was there
js in mockup -> patterns/mockups live there
css in barceloneta. -> anything else is styled there.

i can't say anything about the tile, as i'm not really into the tile/mosaic topic

@agitator

This comment has been minimized.

Member

agitator commented Sep 18, 2018

after discussion with @jensens I'll do the base navigation markup as a content provider and put the tile into plone.app.standardtiles

@jensens jensens added this to To do in Saltlab Sprint Sep 27, 2018

@agitator agitator self-assigned this Oct 1, 2018

@iham iham removed their assignment Oct 1, 2018

@pbauer pbauer moved this from To do to In progress in Saltlab Sprint Oct 2, 2018

@polyester

This comment has been minimized.

Member

polyester commented Oct 4, 2018

@agitator in following up to the chat we had earlier, some links that might help:

@jensens jensens moved this from New (drafts) to Submitted (info complete) in PLIPs Oct 9, 2018

@yurj

This comment has been minimized.

yurj commented Oct 10, 2018

Please consider compatibility with other navigations like collective.editablemenu or megamenu

@agitator

This comment has been minimized.

Member

agitator commented Oct 10, 2018

@yurj please explain, imho those add ons follow a totally different approach to build a navigation

From previous discussion, what I think a mega menu should be https://community.plone.org/t/site-map-and-mega-menu-generation-is-slow/4662/17?u=agitator

@ebrehault

This comment has been minimized.

Member

ebrehault commented Oct 23, 2018

@agitator your PLIP has been approved by the Framework team.

@jensens jensens moved this from Submitted (info complete) to In Process (approved) in PLIPs Oct 23, 2018

@agitator

This comment has been minimized.

Member

agitator commented Oct 23, 2018

😎 ... work will continue at the ploneconf sprint

@agitator

This comment has been minimized.

Member

agitator commented Nov 7, 2018

@thet could you look into

  • add portal_actions functionality
@thet

This comment has been minimized.

Member

thet commented Nov 7, 2018

@agitator I try to get this done this week.

@agitator

This comment has been minimized.

Member

agitator commented Nov 7, 2018

@thet i also added navigation_depth
and some tests would be useful ;-)

@thet

This comment has been minimized.

Member

thet commented Nov 7, 2018

I'm incredibly busy currently and I hope for some unexpected productivity boosts to get anything done this week. So I don't make any promises.
Maybe this could be added to the sprint's topics.

@agitator

This comment has been minimized.

Member

agitator commented Nov 14, 2018

@polyester you said something about additional attributes for the markup... which ones are these?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment