Parsys (targerparsys) inside targetparsys

Question

We have a target area (target and targetparsys) with component which is a container (parsys) with some components. The problem is that when this container is situated in target area, parsys of container becomes a targetparsys inside of which there isn't a possibility to edit inside components. Does this issue has the solution?

I've tried to overlay the logic of creating the overlay in overlayManager.js. It has solved a little bit the problem, but there isn't a proper work of reordering components inside of it.

Answer 1

I overlayed the following file - /cq/gui/components/authoring/editors/clientlibs/core/js/overlayManager.js by changing and adding the following code:

     self.create = function (editable) {
        if (!editable.overlay) {
            var parent = ns.editables.getParent(editable);

            // going up recursively until we reach the root container
            if (parent && !parent.overlay) {
                self.create(parent);
            }

            // we check again because a child overlay might also be created by the parent constructor
            if (!editable.overlay) {
                editable.overlay = new overlayConstructor(editable, parent ? parent.overlay.dom : container);
            }

            // get children sorted by depth of their paths
            var sortedChildren = getSortedChildren(editable, true);

            //and going down recursively until we reach the deepest editable
            sortedChildren.forEach(function (child) {
                self.create(child);
            });
        }
    };

    /**
    *  Returns the sorted {Array} of child {@link Granite.author.Editable}s by depth of their paths for the given {@link Granite.author.Editable}
    *
    *  @param {Granite.author.Editable} editable - {@link Granite.author.Editable} for which to find child editables to be sorted by depth of their paths
    *  @param {Boolean} all - All the children or only the direct descendant
    *
    *  WARNING! Not OTB function! See the description on {self.create = function(editable)}
    */
    function getSortedChildren(editable, all){
        var children = ns.editables.getChildren(editable, all);

        //key - editable, value - number of slashes
        var childrenMap = new Map();

        //going through all children
        for (let i = 0; i < children.length; i++){
            var path = children[i].path;

            var numberOfSlashes = 1;
            var isFirstSlashChecked = false;
            //searching slashes
            for (let j = 0; j < path.length; j++){
                var letter = path[j];

                var SLASH = '/';
                if (letter == SLASH){
                    if (isFirstSlashChecked){
                        childrenMap.set(children[i], ++numberOfSlashes);
                    } else {
                        childrenMap.set(children[i], numberOfSlashes);
                        isFirstSlashChecked = true;
                    }
                }
            }

            //if there are not slashes in editable path
            if (!isFirstSlashChecked){
                childrenMap.set(children[i], 0);
            }
        }

        //sort map by depth (number of slashes)
        var sortedChildrenMapByPaths = new Map([...childrenMap.entries()].sort((a, b) => a[1] - b[1])); 

        //return sorted editables
        return Array.from(sortedChildrenMapByPaths.keys());
    }

And also added checking null statement here:

    function repositionOverlay(editable) {
        var parent;
        // if there is no overlay in place, don't bother we ignore it (most likely timing issue)
        if (editable.overlay) {
            parent = ns.editables.getParent(editable);

            //the place which was overlaid
            // don't rely on order of editables in the store...
            if (parent && parent.overlay != null && !parent.overlay.currentPos) {
                repositionOverlay(parent);
            }

            editable.overlay.position(editable, parent);
        }
    }