tree.js 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  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. $ax.menu.InitializeSubmenu = function(subMenuId, cellId) {
  6. var $submenudiv = $('#' + subMenuId);
  7. //mouseenter and leave for parent table cell
  8. $('#' + cellId).mouseenter(function(e) {
  9. //show current submenu
  10. // var submenuElement = document.getElementById(subMenuId);
  11. // if($ax.visibility.IsVisible(submenuElement) && submenuElement.style.display !== 'none') return;
  12. $ax.visibility.SetIdVisible(subMenuId, true);
  13. $ax.legacy.BringToFront(subMenuId);
  14. _fireEventForSubmenu(subMenuId, "onShow");
  15. }).mouseleave(function (e) {
  16. var offset = $submenudiv.offset();
  17. var subcontwidth = $submenudiv.width();
  18. var subcontheight = $submenudiv.height();
  19. //If mouse is not within the submenu (added 3 pixel margin to top and left calculations), then close the submenu...
  20. if(e.pageX + 3 < offset.left || e.pageX > offset.left + subcontwidth || e.pageY + 3 < offset.top || e.pageY > offset.top + subcontheight) {
  21. $submenudiv.find('.sub_menu').andSelf().each(function () {
  22. // if(!$ax.visibility.IsVisible(this)) return;
  23. $ax.visibility.SetVisible(this, false);
  24. _fireEventForSubmenu(subMenuId, "onHide");
  25. });
  26. $ax.style.SetWidgetHover(cellId, false);
  27. }
  28. });
  29. $submenudiv.css('display', 'none');
  30. //mouseleave for submenu
  31. $submenudiv.mouseleave(function(e) {
  32. //close this menu and all menus below it
  33. $(this).find('.sub_menu').andSelf().css({ 'visibility': 'hidden', 'display': 'none' }).each(function () {
  34. // if(!$ax.visibility.IsVisible(this)) return;
  35. _fireEventForSubmenu(this.id, "onHide");
  36. });
  37. $ax.style.SetWidgetHover(cellId, false);
  38. });
  39. };
  40. var _fireEventForSubmenu = function(targetId, eventName) {
  41. var diagramObject = $ax.getObjectFromElementId(targetId);
  42. var event = diagramObject.interactionMap && diagramObject.interactionMap[eventName];
  43. if(event) {
  44. var eventInfo = $ax.getEventInfoFromEvent($ax.getjBrowserEvent(), false, targetId);
  45. $ax.event.handleEvent(targetId, eventInfo, event, false, true);
  46. }
  47. }
  48. function IsNodeVisible(nodeId) {
  49. var current = window.document.getElementById(nodeId);
  50. var parent = current.parentNode;
  51. //move all the parent's children that are below the node and their annotations
  52. while(!$(current).hasClass("treeroot")) {
  53. if(!$ax.visibility.IsVisible(parent)) return false;
  54. current = parent;
  55. parent = parent.parentNode;
  56. }
  57. return true;
  58. }
  59. $ax.tree.ExpandNode = function(nodeId, childContainerId, plusMinusId) {
  60. var container = window.document.getElementById(childContainerId);
  61. if(!container || $ax.visibility.IsVisible(container)) return;
  62. $ax.visibility.SetVisible(container, true);
  63. if(plusMinusId != '') $ax.style.SetWidgetSelected(plusMinusId, true);
  64. var delta = _getExpandCollapseDelta(nodeId, childContainerId);
  65. var isVisible = IsNodeVisible(nodeId);
  66. var current = window.document.getElementById(nodeId);
  67. var parent = current.parentNode;
  68. //move all the parent's children that are below the node and their annotations
  69. while(!$(current).hasClass("treeroot")) {
  70. var after = false;
  71. var i = 0;
  72. for(i = 0; i < parent.childNodes.length; i++) {
  73. var child = parent.childNodes[i];
  74. if(after && child.id && $(child).hasClass("treenode")) {
  75. var elementId = child.id;
  76. child.style.top = Number($(child).css('top').replace("px", "")) + delta + 'px';
  77. var ann = window.document.getElementById(elementId + "_ann");
  78. if(ann) ann.style.top = Number($(ann).css('top').replace("px", "")) + delta + 'px';
  79. }
  80. if(child == current) after = true;
  81. }
  82. current = parent;
  83. parent = parent.parentNode;
  84. if(!isVisible && $ax.visibility.IsVisible(parent)) break;
  85. }
  86. };
  87. $ax.tree.CollapseNode = function(nodeId, childContainerId, plusMinusId) {
  88. var container = window.document.getElementById(childContainerId);
  89. if(!container || !$ax.visibility.IsVisible(container)) return;
  90. if(plusMinusId != '') $ax.style.SetWidgetSelected(plusMinusId, false);
  91. var delta = _getExpandCollapseDelta(nodeId, childContainerId);
  92. //hide it after getting the delta, otherwise the delta can't be calculated (offsetParent is null)
  93. $ax.visibility.SetVisible(container, false);
  94. var isVisible = IsNodeVisible(nodeId);
  95. var current = window.document.getElementById(nodeId);
  96. var parent = current.parentNode;
  97. //move all the parent's children that are below the node and their annotations
  98. while(!$(current).hasClass("treeroot")) {
  99. var after = false;
  100. var i = 0;
  101. for(i = 0; i < parent.childNodes.length; i++) {
  102. var child = parent.childNodes[i];
  103. if(after && child.id && $(child).hasClass("treenode")) {
  104. var elementId = child.id;
  105. child.style.top = Number($(child).css('top').replace("px", "")) - delta + 'px';
  106. var ann = window.document.getElementById(elementId + "_ann");
  107. if(ann) ann.style.top = Number($(ann).css('top').replace("px", "")) - delta + 'px';
  108. }
  109. if(child == current) after = true;
  110. }
  111. current = parent;
  112. parent = current.parentNode;
  113. if(!isVisible && $ax.visibility.IsVisible(parent)) break;
  114. }
  115. };
  116. var _getExpandCollapseDelta = function(nodeId, childContainerId) {
  117. return _getChildContainerHeightHelper(childContainerId);
  118. };
  119. var _getChildContainerHeightHelper = function(childContainerId) {
  120. var height = 0;
  121. $('#' + childContainerId).children().each(function() {
  122. if($(this).hasClass("treenode")) {
  123. height += $(this).height();
  124. var subContainer = window.document.getElementById(this.id + '_children');
  125. if(subContainer && $ax.visibility.IsVisible(subContainer)) {
  126. height += _getChildContainerHeightHelper(subContainer.id);
  127. }
  128. }
  129. });
  130. return height;
  131. };
  132. $ax.tree.InitializeTreeNode = function(nodeId, plusminusid, childContainerId, selectText) {
  133. var childContainer = window.document.getElementById(childContainerId);
  134. if(childContainer) {
  135. //relying on the html generator to put this inline so we know to collapse by default
  136. var isCollapsed = childContainer.style.visibility == "hidden";
  137. if(isCollapsed) $ax.visibility.SetVisible(childContainer, false);
  138. if(!isCollapsed && plusminusid != '') $ax.style.SetWidgetSelected(plusminusid, true);
  139. }
  140. if(plusminusid != '') {
  141. $jobj(plusminusid).click(function() {
  142. var visibleSet = $ax.visibility.IsIdVisible(childContainerId);
  143. if(visibleSet) $ax.tree.CollapseNode(nodeId, childContainerId, plusminusid);
  144. else $ax.tree.ExpandNode(nodeId, childContainerId, plusminusid);
  145. $ax.tree.SelectTreeNode(nodeId, true);
  146. return false;
  147. }).css('cursor', 'default');
  148. }
  149. };
  150. var _getButtonShapeId = function(id) {
  151. var obj = $obj(id);
  152. return $ax.public.fn.IsTreeNodeObject(obj.type) ? $ax.getElementIdFromPath([obj.buttonShapeId], { relativeTo: id }) : id;
  153. };
  154. $ax.tree.SelectTreeNode = function(id, selected) {
  155. $ax.style.SetWidgetSelected(_getButtonShapeId(id), selected);
  156. };
  157. });