[SOLVED] programmatically expand nodes to current item in nestable

programmatically expand nodes to current item in nestable

I've built a dynamically generated hierarchial list using jquery-nestable. What I can't figure out is how to expand the list to the current item when a url containing a node id is directly accessed

Let's say I have a url like domain.com?item=123 and I have a script that generates the parent id's of the current id in json. like { 345,234 } where 345 = top level parent and 234 = child of 345 but also the parent of 123. (In case I need to open them up one at a time)

but I can't seem to expand these items, I've read that it can't be done with jquery, and found this: https://github.com/dbushell/Nestable/issues/99 but not sure how to implement.

each list item has it's own dynamically generated id like id="step-123" that should help. Any assistance is greatly appreciated.

Here's the tree structure

http://pastebin.com/UnNEDbkt

Solution

I head a look at jQuery Nestable, and came to this solution:

$.fn.nestableShow = function() {
    return this.each(function () {
        var $parents = $(this).parents();
        $parents.each(function (i) {
            var list = $(this).data("nestable");
            if (list) {
                $parents.slice(0, i).filter(list.options.itemNodeName).each(function(){
                    list.expandItem($(this));
                });
                return false;
            }
        });
    });
};

Once you have executed the above, you can write this:

$('#step-123').nestableShow();

... and it will expand the parents of that element so it becomes visible in the tree.

A bare-bone demo:

// decorate as collapsable tree, and collapse it.
$('.dd').nestable({}).data("nestable").collapseAll();

// Plug-in for exanding the tree to make a given element visible.
$.fn.nestableShow = function() {
    return this.each(function () {
        var $parents = $(this).parents();
        $parents.each(function (i) {
            var list = $(this).data("nestable");
            if (list) {
                $parents.slice(0, i).filter(list.options.itemNodeName).each(function(){
                    list.expandItem($(this));
                });
                return false;
            }
        });
    });
};

$('#find').click(function() {
    $('#step-123').nestableShow();
});
$('#find2').click(function() {
    $('#step-124').nestableShow();
});

.special { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Nestable/2012-10-15/jquery.nestable.min.js"></script>
<button id="find">find element 123</button>
<button id="find2">find element 124</button>
<br>

<div class="dd" id="nestable">
    <ol class="dd-list">
        <li class="dd-item"><span>Item 1</span></li>
        <li>
            <span>Item 2</span>
            <ol class="dd-list">
                <li class="dd-item"><span>Item 3</span></li>
                <li class="dd-item"><span>Item 4</span></li>
                <li class="dd-item">
                    <span>Item 5</span>
                    <ol class="dd-list">
                        <li class="dd-item"><span>Item 6</span></li>
                        <li class="dd-item special" id="step-123"><span>Here is step-123!</span></li>
                        <li class="dd-item"><span>Item 8</span></li>
                    </ol>
                </li>
                <li class="dd-item"><span>Item 9</span></li>
                <li class="dd-item"><span>Item 10</span></li>
            </ol>
        </li>
        <li>
            <span>Item 11</span>
            <ol class="dd-list">
                <li class="dd-item"><span>Item 12</span></li>
                <li class="dd-item"><span>Item 13</span></li>
                <li class="dd-item">
                    <span>Item 14</span>
                    <ol class="dd-list">
                        <li class="dd-item"><span>Item 15</span></li>
                        <li class="dd-item special" id="step-124"><span>Here is step-124!</span></li>
                        <li class="dd-item"><span>Item 17</span></li>
                    </ol>
                </li>
                <li class="dd-item"><span>Item 18</span></li>
                <li class="dd-item"><span>Item 19</span></li>
            </ol>
        </li>
        <li class="dd-item">
            <span>Item 20</span>
        </li>
        <li class="dd-item">
            <span>Item 21</span>
        </li>
    </ol>
</div>