ajaxgetdropmenu.html.php 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <style>
  2. #tabContent {margin-top: 5px; max-width: 220px}
  3. .objectTree ul {list-style: none; margin: 0}
  4. .objectTree .objects>ul>li>div {display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center;}
  5. .objectTree li>a, div.hide-in-search>a {display: block; padding: 2px 10px 2px 5px; overflow: hidden; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; border-radius: 4px;}
  6. .objectTree .tree li>.list-toggle {line-height: 24px;}
  7. .objectTree .tree li.has-list.open:before {content: unset;}
  8. #swapper li>div.hide-in-search>a:focus, #swapper li>div.hide-in-search>a:hover {color: #838a9d; cursor: default;}
  9. #swapper li > a {margin-top: 4px; margin-bottom: 4px;}
  10. #swapper li {padding-top: 0; padding-bottom: 0;}
  11. #swapper .tree li>.list-toggle {top: -1px;}
  12. #closed {width: 90px; height: 25px; line-height: 25px; background-color: #ddd; color: #3c495c; text-align: center; margin-left: 15px; border-radius: 2px;}
  13. #gray-line {width: 230px;height: 1px; margin-left: 10px; margin-bottom:2px; background-color: #ddd;}
  14. #dropMenu.has-search-text .hide-in-search {display: flex;}
  15. #swapper li>.selected {color: #0c64eb!important; background: #e9f2fb!important;}
  16. </style>
  17. <?php
  18. $normalObjectsHtml = '<ul class="tree noProgram">';
  19. $closedObjectsHtml = '<ul class="tree noProgram">';
  20. $params = $method == 'showfiles' ||$objectType == 'custom' ? "type=$objectType&objectID=%s" : "objectID=%s";
  21. $link = $this->createLink($module, $method, $params);
  22. foreach($normalObjects as $normalObjectID => $normalObjectName)
  23. {
  24. $selected = $normalObjectID == $objectID ? 'selected' : '';
  25. $normalObjectsHtml .= '<li>' . html::a(sprintf($link, $normalObjectID), $normalObjectName, '', "class='$selected clickable' title='{$normalObjectName}' data-key='" . zget($objectsPinYin, $normalObjectName, '') . "'") . '</li>';
  26. }
  27. foreach($closedObjects as $closedObjectID => $closedObjectName)
  28. {
  29. $selected = $closedObjectID == $objectID ? 'selected' : '';
  30. $closedObjectsHtml .= '<li>' . html::a(sprintf($link, $closedObjectID), $closedObjectName, '', "class='$selected clickable' title='{$closedObjectName}' data-key='" . zget($objectsPinYin, $closedObjectName, '') . "'") . '</li>';
  31. }
  32. $normalObjectsHtml .= '</ul>';
  33. $closedObjectsHtml .= '</ul>';
  34. ?>
  35. <div class="table-row">
  36. <div class="table-col col-left">
  37. <div class='list-group'>
  38. <div class="tab-content objectTree" id="tabContent">
  39. <div class="tab-pane objects active">
  40. <?php echo $normalObjectsHtml;?>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="col-footer">
  45. <a class='pull-right toggle-right-col not-list-item'><?php echo $lang->doc->closed?><i class='icon icon-angle-right'></i></a>
  46. </div>
  47. </div>
  48. <div id="gray-line" hidden></div>
  49. <div id="closed" hidden><?php echo $lang->doc->closed?></div>
  50. <div class="table-col col-right objectTree">
  51. <div class='list-group objects'><?php echo $closedObjectsHtml;?></div>
  52. </div>
  53. </div>
  54. <script>
  55. $(function()
  56. {
  57. $('#swapper [data-ride="tree"]').tree('expand');
  58. <?php if(isset($closedObjects[$objectID])):?>
  59. $('.col-footer .toggle-right-col').click(function(){ scrollToSelected(); })
  60. <?php else:?>
  61. scrollToSelected();
  62. <?php endif;?>
  63. $('.nav-tabs li span').hide();
  64. $('.nav-tabs li.active').find('span').show();
  65. $('.nav-tabs>li a').click(function()
  66. {
  67. if($('#swapper input[type="search"]').val() == '')
  68. {
  69. $(this).siblings().show();
  70. $(this).parent().siblings('li').find('span').hide();
  71. }
  72. })
  73. $('#swapper #dropMenu .search-box').on('onSearchChange', function(event, value)
  74. {
  75. if(value != '')
  76. {
  77. $('div.hide-in-search').siblings('i').addClass('hide-in-search');
  78. $('.nav-tabs li span').hide();
  79. }
  80. else
  81. {
  82. $('div.hide-in-search').siblings('i').removeClass('hide-in-search');
  83. $('li.has-list div.hide-in-search').removeClass('hidden');
  84. $('.nav-tabs li.active').find('span').show();
  85. }
  86. if($('.form-control.search-input').val().length > 0)
  87. {
  88. $('#closed').attr("hidden", false);
  89. $('#gray-line').attr("hidden", false);
  90. }
  91. else
  92. {
  93. $('#closed').attr("hidden", true);
  94. $('#gray-line').attr("hidden", true);
  95. }
  96. });
  97. $('#swapper #dropMenu').on('onSearchComplete', function()
  98. {
  99. var listItem = $(this).find('.has-list');
  100. listItem.each(function()
  101. {
  102. $(this).css('display','')
  103. var $hidden = $(this).find('.hidden');
  104. var $item = $(this).find('.search-list-item');
  105. if($hidden.length == $item.length) $(this).css('display','none');
  106. });
  107. if($('.list-group.objects').height() == 0)
  108. {
  109. $('#closed').attr("hidden", true);
  110. $('#gray-line').attr("hidden", true);
  111. }
  112. });
  113. })
  114. </script>