Uploaded image for project: 'Hippo CMS'
  1. Hippo CMS
  2. CMS-12720

Add support for nested containers

    XMLWordPrintable

Details

    • Improvement
    • Status: Open
    • Normal
    • Resolution: Unresolved
    • 5.3.0
    • None
    • channel-manager

    Description

      It's challenging to model multi-column rows as drag-and-drop components that provide enough flexibility for varying layouts and contents. Adding support for drag-and-drop nested containers that can contain drag-and-drop components would provide a ton of flexibility. The top component can control the layout, e.g. two-column, three-column, and the nested container can contain the contents / components for each of the columns. Compared to the current possible approaches, this gives you much more flexibility with less templates.
      Nested containers are already supported on the repository-level but not yet by the Channel Manager/Template Composer. Fortunately, support can be added relatively easily, by doing the following:

      • PageStructureService._registerComponent: when registering a component using HTML comments, set container of component by looking up parent container via refNS, instead of using the last registered container.
      • PageStructureService._updateComponent & PageStructureService._updateContainer: the partial updates to components and containers don't register nested containers and components correctly. So as a quick and dirty fix I just remove all the embedded links and re-parse the entire DOM for HTML comments. Doing always a full rescan could simplify the code. Obviously there is a performance impact but on my machine this wasn't noticeable. Would be good to verify if this is also the case on slower machines and with ~100 components.

      Patch for the above changes is attached.

      Demo and test project can be found here: https://code.onehippo.org/sandbox/nested-components-demo

      To not require a separate build of the channel manager, the project overrides the CM Angular code via webfiles, see: https://code.onehippo.org/sandbox/nested-components-demo/blob/master/repository-data/webfiles/src/main/resources/site/js/override.js

      Some comments on best practices and constraints:

      • Doesn't work with 12.2.0, so test project is using 12.3.0.
      • Bug: nested container label is always shown on top of parent container label, so the label doesn't provide an indication in terms of which container you're hovering over.
      • Nested container needs to have its min-height set. Otherwise you can't add components to it as it will always add the component to the top container.
      • Component container (the component that contains the nested container) needs to leave some room/real estate outside of the nested container in order to be clickable. Otherwise its component settings and consequently the container's template cannot be changed. The CM would either have to add this on parse, or ideally on-hover so it doesn't mess up the styling when previewing the page.
      • Have to use hst.nomarkup on containers that have flexible width for nested components. Otherwise the nested divs/components will be e.g. <div class="hst-container"><div class="col-sm-3">... instead of <div class="col-sm-3">... causing the components to not get their column-width.
      • No support for adding a nested container component to a nested container. Would be nice if we could enforce this constraint in the UI.
      • We will need to provide proper examples, as it's tricky to get the HTML right for the container components and containers. Perhaps add these to Essentials.

      Attachments

        Activity

          People

            Unassigned Unassigned
            rkauffman Robbert Kauffman (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            7 Start watching this issue

            Dates

              Created:
              Updated: