getParentComponent

Features
1

So I’m going to implement a responsive image part to use inside a grid layout.
I can calculate image widths based on the grid.

So from the image part controller I want to access the parent grid layout so I can know how many columns the image will occupy in the breakpoints we have.

I currently can do this by getting component path via getComponent.
Then I can use getContent to get the entire page.
And traverse the page content to find the matching component path, and it’s parent.

A getParentComponent method would be much nicer.
Perhaps with a filter on what kind of parent I want, in case I don’t want the closest parent.

1 Like
2

Perhaps components can also be queried?

3

This es6 code works for my simple use, have not tested fragments, deep nesting, recursion, etc

import arrayFind from '/node_modules/array-find/find.js'; // Ponyfill

function findComponentRecursive(components, pathParts, pathIndex) {
    const componentPath = pathParts.slice(0, ++pathIndex).join('/');
    const component = arrayFind(components, c => { return c.path === componentPath; });
    if(pathIndex ===  pathParts.length) { return component; }
    return findParent(component.region[pathParts[pathIndex + 1]].components, pathParts, pathIndex); // recurse
} // function findComponentRecursive

function getParentComponent(componentPath) {
    const pathParts = componentPath.split('/').slice(0, -2);  // Since we want the parent component, remove the actual component, and the region it's in.
    const pageContent = getContent();
    const pageRegion = pageContent.page.regions[pathParts[0]];
    const pathIndex = 1; // How far down the path are we
    return findComponentRecursive(pageRegion.components, pathParts, pathIndex);
} // function getParentComponent
4

Instead of providing a new method adding a path parameter to getComponent would also work.

Example:
getComponent(‘main/0/0/1’);

5

getComponent that supports path is indeed an interesting solution. Of course this will always be in the context of the given page. Notice that an actual component path will never look like your example, but more like this: getComponent(‘main/0/center/3’) since all regions must be explicitly named :slight_smile:

6

Unless you name the region 0… :slight_smile:

2 Likes