* make docs tree in left side sortable.

This commit is contained in:
Hao Sun
2021-11-11 10:35:00 +08:00
parent 4d9387059b
commit e257cb37ce
3 changed files with 89 additions and 67 deletions
+1 -6
View File
@@ -42,14 +42,9 @@
.title {font-size: 20px !important;}
.article-content.comment {width: 100% !important;}
#custom, .tree {overflow: visible}
.tree li>.list-toggle {left: -4px; top: 0;}
.tree-group {position: relative;}
.tree-group > .module-name {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; display: block;}
.tree-group .treeActions {display: none; position: absolute; right: 0; top: 0; background-color: #fff; white-space: nowrap;}
.tree-group:hover > .module-name {width: calc(100% - 84px);}
.tree-group:hover > .module-name {width: calc(100% - 20px);}
.tree-group:hover .treeActions {display: block}
.tree-group .treeActions > .dropdown {display: inline-block;}
.tree-group .dropdown-menu {position: absolute; right: 0; left: auto; margin-top: -2px;}
.tree-group .dropdown-menu > li > a {max-width: 100%; color: #3c4353!important; font-weight: normal!important;}
.tree-group .dropdown-menu > li > a:hover {color: #fff !important;}
+85 -58
View File
@@ -15,64 +15,91 @@ if(empty($type)) $type = 'product';
$sideWidth = common::checkNotCN() ? '270' : '238';
?>
<div class="side-col" style="width:<?php echo $sideWidth;?>px" data-min-width="<?php echo $sideWidth;?>">
<div class="cell" id="<?php echo $type;?>">
<div id='title'>
<li class='menu-title'><?php echo $this->lang->doc->menuTitle;?></li>
<?php
$canEditLib = common::hasPriv('doc', 'editLib');
$canManageBook = common::hasPriv('doc', 'manageBook');
$canManageMenu = common::hasPriv('tree', 'browse');
$canEditLib = common::hasPriv('doc', 'editLib');
$canDeleteLib = common::hasPriv('doc', 'deleteLib');
if($type != 'book' and ($canManageMenu or $canEditLib or $canDeleteLib))
{
echo "<div class='menu-actions'>";
echo html::a('javascript:;', "<i class='icon icon-ellipsis-v'></i>", '', "data-toggle='dropdown' class='btn btn-link'");
echo "<ul class='dropdown-menu pull-right'>";
if($canManageMenu)
{
echo '<li>' . html::a($this->createLink('tree', 'browse', "rootID=$libID&view=doc", '', true), '<i class="icon-cog-outline"></i> ' . $this->lang->doc->manageType, '', "class='iframe'") . '</li>';
echo "<li class='divider'></li>";
}
if($canEditLib) echo '<li>' . html::a($this->createLink('doc', 'editLib', "rootID=$libID"), '<i class="icon-edit"></i> ' . $lang->doc->editLib, '', "class='iframe'") . '</li>';
if($canDeleteLib) echo '<li>' . html::a($this->createLink('doc', 'deleteLib', "rootID=$libID"), '<i class="icon-trash"></i> ' . $lang->doc->deleteLib, 'hiddenwin') . '</li>';
echo '</ul></div>';
}
<div class="cell" id="<?php echo $type;?>">
<div id='title'>
<li class='menu-title'><?php echo $this->lang->doc->menuTitle;?></li>
<?php
$canEditLib = common::hasPriv('doc', 'editLib');
$canManageBook = common::hasPriv('doc', 'manageBook');
$canManageMenu = common::hasPriv('tree', 'browse');
$canEditLib = common::hasPriv('doc', 'editLib');
$canDeleteLib = common::hasPriv('doc', 'deleteLib');
if($type != 'book' and ($canManageMenu or $canEditLib or $canDeleteLib))
{
echo "<div class='menu-actions'>";
echo html::a('javascript:;', "<i class='icon icon-ellipsis-v'></i>", '', "data-toggle='dropdown' class='btn btn-link'");
echo "<ul class='dropdown-menu pull-right'>";
if($canManageMenu)
{
echo '<li>' . html::a($this->createLink('tree', 'browse', "rootID=$libID&view=doc", '', true), '<i class="icon-cog-outline"></i> ' . $this->lang->doc->manageType, '', "class='iframe'") . '</li>';
echo "<li class='divider'></li>";
}
if($canEditLib) echo '<li>' . html::a($this->createLink('doc', 'editLib', "rootID=$libID"), '<i class="icon-edit"></i> ' . $lang->doc->editLib, '', "class='iframe'") . '</li>';
if($canDeleteLib) echo '<li>' . html::a($this->createLink('doc', 'deleteLib', "rootID=$libID"), '<i class="icon-trash"></i> ' . $lang->doc->deleteLib, 'hiddenwin') . '</li>';
echo '</ul></div>';
}
if($type == 'book' and ($canEditLib or $canManageBook))
{
echo "<div class='menu-actions'>";
echo html::a('javascript:;', "<i class='icon icon-ellipsis-v'></i>", '', "data-toggle='dropdown' class='btn btn-link'");
echo "<ul class='dropdown-menu pull-right'>";
if($canEditLib) echo '<li>' . html::a($this->createLink('doc', 'editLib', "rootID=$libID"), '<i class="icon-edit"></i> ' . $lang->doc->editBook, '', "class='iframe'") . '</li>';
if($canManageBook) echo '<li>' . html::a($this->createLink('doc', 'manageBook', "bookID=$libID"), '<i class="icon-cog-outline"></i> ' . $lang->doc->manageBook) . '</li>';
echo '</ul></div>';
}
?>
</div>
<?php if(!$moduleTree):?>
<hr class="space">
<div class="text-center text-muted tips">
<?php echo $type == 'book' ? $lang->doc->noChapter : $lang->doc->noModule;?>
</div>
<hr class="space">
<?php endif;?>
<?php if($type == 'book'):?>
<?php include './bookside.html.php';?>
<?php else:?>
<?php echo $moduleTree;?>
<?php endif;?>
if($type == 'book' and ($canEditLib or $canManageBook))
{
echo "<div class='menu-actions'>";
echo html::a('javascript:;', "<i class='icon icon-ellipsis-v'></i>", '', "data-toggle='dropdown' class='btn btn-link'");
echo "<ul class='dropdown-menu pull-right'>";
if($canEditLib) echo '<li>' . html::a($this->createLink('doc', 'editLib', "rootID=$libID"), '<i class="icon-edit"></i> ' . $lang->doc->editBook, '', "class='iframe'") . '</li>';
if($canManageBook) echo '<li>' . html::a($this->createLink('doc', 'manageBook', "bookID=$libID"), '<i class="icon-cog-outline"></i> ' . $lang->doc->manageBook) . '</li>';
echo '</ul></div>';
}
?>
</div>
<script>
$('#modules').sortable(
{
trigger: '.icon-move',
selector: 'li',
nested: true,
canMoveHere: function($ele, $target)
{
if($ele && $target && $ele.parent().closest('li').attr('data-idx') !== $target.parent().closest('li').attr('data-idx')) return false;
}
});
</script>
<?php if(!$moduleTree):?>
<hr class="space">
<div class="text-center text-muted tips">
<?php echo $type == 'book' ? $lang->doc->noChapter : $lang->doc->noModule;?>
</div>
<hr class="space">
<?php endif;?>
<?php if($type == 'book'):?>
<?php include './bookside.html.php';?>
<?php else:?>
<?php echo $moduleTree;?>
<?php endif;?>
</div>
<style>
.sortable-sorting .module-name > a {cursor: move;}
.sortable-sorting li >.tree-group {opacity: .5;}
.sortable-sorting .drop-here .tree-group {background-color: #fff3e0;}
.sortable-sorting .drop-here .tree-group > * {opacity: .1;}
.sortable-sorting .drag-shadow .tree-group {opacity: 1!important;}
.sortable-sorting .drag-shadow .treeActions {visibility: hidden;}
.is-sorting > li > .tree-group {opacity: 1; border-radius: 4px;}
.is-sorting > li ul {display: none!important;}
</style>
<script>
$(function()
{
/* Make modules tree sortable */
$('#modules').sortable(
{
trigger: '.module-name>a',
dropToClass: 'sort-to',
stopPropagation: true,
nested: true,
selector: 'li',
dragCssClass: 'drop-here',
targetSelector: function($ele, $root)
{
return $ele.closest('ul').addClass('is-sorting').children('li');
},
always: function()
{
$('#modules,#modules .is-sorting').removeClass('is-sorting');
},
finish: function(e)
{
if(!e.changed) return;
/* TODO(@sunguangming): console.log('sort.finish', e); */
}
});
});
</script>
</div>
+3 -3
View File
File diff suppressed because one or more lines are too long