https://peiliangli.github.io/resources/scripts/axure/tree.js

1// This is actually for BOTH trees and menus
2$axure.internal(function($ax) {
3    var _tree = $ax.tree = {};
4    var _menu = $ax.menu = {};
5
6    $ax.menu.InitializeSubmenu = function(subMenuId, cellId) {
7        var $submenudiv = $('#' + subMenuId);
8
9        //mouseenter and leave for parent table cell
10        $('#' + cellId).mouseenter(function(e) {
11            //show current submenu
12//            var submenuElement = document.getElementById(subMenuId);
13//            if($ax.visibility.IsVisible(submenuElement) && submenuElement.style.display !== 'none') return;
14            $ax.visibility.SetIdVisible(subMenuId, true);
15            $ax.legacy.BringToFront(subMenuId);
16            _fireEventForSubmenu(subMenuId, "onShow");
17
18        }).mouseleave(function (e) {
19            var offset = $submenudiv.offset();
20            var subcontwidth = $submenudiv.width();
21            var subcontheight = $submenudiv.height();
22            //If mouse is not within the submenu (added 3 pixel margin to top and left calculations), then close the submenu...
23            if(e.pageX + 3 < offset.left || e.pageX > offset.left + subcontwidth || e.pageY + 3 < offset.top || e.pageY > offset.top + subcontheight) {
24                $submenudiv.find('.sub_menu').andSelf().each(function () {
25//                    if(!$ax.visibility.IsVisible(this)) return;
26                    $ax.visibility.SetVisible(this, false);
27                    _fireEventForSubmenu(subMenuId, "onHide");
28                });
29                $ax.style.SetWidgetHover(cellId, false);
30            }
31        });
32
33        $submenudiv.css('display', 'none');
34
35        //mouseleave for submenu
36        $submenudiv.mouseleave(function(e) {
37            //close this menu and all menus below it
38            $(this).find('.sub_menu').andSelf().css({ 'visibility': 'hidden', 'display': 'none' }).each(function () {
39//                if(!$ax.visibility.IsVisible(this)) return;
40                _fireEventForSubmenu(this.id, "onHide");
41            });
42            $ax.style.SetWidgetHover(cellId, false);
43        });
44    };
45
46    var _fireEventForSubmenu = function(targetId, eventName) {
47        var diagramObject = $ax.getObjectFromElementId(targetId);
48        var event = diagramObject.interactionMap && diagramObject.interactionMap[eventName];
49        if(event) {
50            var eventInfo = $ax.getEventInfoFromEvent($ax.getjBrowserEvent(), false, targetId);
51            $ax.event.handleEvent(targetId, eventInfo, event, false, true);
52        }
53    }
54
55    function IsNodeVisible(nodeId) {
56        var current = window.document.getElementById(nodeId);
57        var parent = current.parentNode;
58
59        //move all the parent's children that are below the node and their annotations
60        while(!$(current).hasClass("treeroot")) {
61            if(!$ax.visibility.IsVisible(parent)) return false;
62            current = parent;
63            parent = parent.parentNode;
64        }
65        return true;
66    }
67
68    $ax.tree.ExpandNode = function(nodeId, childContainerId, plusMinusId) {
69        var container = window.document.getElementById(childContainerId);
70        if(!container || $ax.visibility.IsVisible(container)) return;
71        $ax.visibility.SetVisible(container, true);
72
73        if(plusMinusId != '') $ax.style.SetWidgetSelected(plusMinusId, true);
74
75        var delta = _getExpandCollapseDelta(nodeId, childContainerId);
76
77        var isVisible = IsNodeVisible(nodeId);
78        var current = window.document.getElementById(nodeId);
79        var parent = current.parentNode;
80
81        //move all the parent's children that are below the node and their annotations
82        while(!$(current).hasClass("treeroot")) {
83            var after = false;
84            var i = 0;
85            for(i = 0; i < parent.childNodes.length; i++) {
86                var child = parent.childNodes[i];
87                if(after && child.id && $(child).hasClass("treenode")) {
88                    var elementId = child.id;
89                    child.style.top = Number($(child).css('top').replace("px", "")) + delta + 'px';

90                    var ann = window.document.getElementById(elementId + "_ann");
91                    if(ann) ann.style.top = Number($(ann).css('top').replace("px", "")) + delta + 'px';
92                }
93                if(child == current) after = true;
94            }
95            current = parent;
96            parent = parent.parentNode;
97            if(!isVisible && $ax.visibility.IsVisible(parent)) break;
98        }
99    };
100
101    $ax.tree.CollapseNode = function(nodeId, childContainerId, plusMinusId) {
102        var container = window.document.getElementById(childContainerId);
103        if(!container || !$ax.visibility.IsVisible(container)) return;
104
105        if(plusMinusId != '') $ax.style.SetWidgetSelected(plusMinusId, false);
106
107        var delta = _getExpandCollapseDelta(nodeId, childContainerId);
108
109        //hide it after getting the delta, otherwise the delta can't be calculated (offsetParent is null)
110        $ax.visibility.SetVisible(container, false);
111
112        var isVisible = IsNodeVisible(nodeId);
113        var current = window.document.getElementById(nodeId);
114        var parent = current.parentNode;
115
116        //move all the parent's children that are below the node and their annotations
117        while(!$(current).hasClass("treeroot")) {
118            var after = false;
119            var i = 0;
120            for(i = 0; i < parent.childNodes.length; i++) {
121                var child = parent.childNodes[i];
122                if(after && child.id && $(child).hasClass("treenode")) {
123                    var elementId = child.id;
124                    child.style.top = Number($(child).css('top').replace("px", "")) - delta + 'px';
125                    var ann = window.document.getElementById(elementId + "_ann");
126                    if(ann) ann.style.top = Number($(ann).css('top').replace("px", "")) - delta + 'px';
127                }
128                if(child == current) after = true;
129            }
130            current = parent;
131            parent = current.parentNode;
132            if(!isVisible && $ax.visibility.IsVisible(parent)) break;
133        }
134    };
135
136    var _getExpandCollapseDelta = function(nodeId, childContainerId) {
137        return _getChildContainerHeightHelper(childContainerId);
138    };
139
140    var _getChildContainerHeightHelper = function(childContainerId) {
141        var height = 0;
142        $('#' + childContainerId).children().each(function() {
143            if($(this).hasClass("treenode")) {
144                height += $(this).height();
145                var subContainer = window.document.getElementById(this.id + '_children');
146                if(subContainer && $ax.visibility.IsVisible(subContainer)) {
147                    height += _getChildContainerHeightHelper(subContainer.id);
148                }
149            }
150        });
151        return height;
152    };
153
154    $ax.tree.InitializeTreeNode = function(nodeId, plusminusid, childContainerId, selectText) {
155        var childContainer = window.document.getElementById(childContainerId);
156        if(childContainer) {
157            //relying on the html generator to put this inline so we know to collapse by default
158            var isCollapsed = childContainer.style.visibility == "hidden";
159            if(isCollapsed) $ax.visibility.SetVisible(childContainer, false);
160
161            if(!isCollapsed && plusminusid != '') $ax.style.SetWidgetSelected(plusminusid, true);
162        }
163
164        if(plusminusid != '') {
165            $jobj(plusminusid).click(function() {
166                var visibleSet = $ax.visibility.IsIdVisible(childContainerId);
167
168                if(visibleSet) $ax.tree.CollapseNode(nodeId, childContainerId, plusminusid);
169                else $ax.tree.ExpandNode(nodeId, childContainerId, plusminusid);
170                $ax.tree.SelectTreeNode(nodeId, true);
171
172                return false;
173            }).css('cursor', 'default');
174        }
175    };
176
177    var _getButtonShapeId = function(id) {
178        var obj = $obj(id);
179        return $ax.public.fn.IsTreeNodeObject(obj.type) ? $ax.getElementIdFromPath([obj.buttonShapeId], { relativeTo: id }) : id;
180    };
181
182    $ax.tree.SelectTreeNode = function(id, selected) {
183        $ax.style.SetWidgetSelected(_getButtonShapeId(id), selected);
184    };
185
186});