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.
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
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
