Skip to content

Commit ae0a635

Browse files
committed
fix dragging to root, we need an element for that
1 parent 273bbc1 commit ae0a635

File tree

4 files changed

+56
-13
lines changed

4 files changed

+56
-13
lines changed

admin/tree.php

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,10 @@ public function html()
6666
echo '<div id="plugin_move__tree">';
6767
echo '<div class="trees">';
6868
if ($dual) {
69-
echo '<ul class="tree_root move-pages move-ns" data-id="" data-orig=""></ul>';
70-
echo '<ul class="tree_root move-media move-ns" data-id="" data-orig=""></ul>';
69+
$this->printTreeRoot('move-pages');
70+
$this->printTreeRoot('move-media');
7171
} else {
72-
echo '<ul class="tree_root move-pages move-media move-ns" data-id="" data-orig=""></ul>';
72+
$this->printTreeRoot('move-pages move-media');
7373
}
7474
echo '</div>';
7575

@@ -89,6 +89,26 @@ public function html()
8989
}
9090
}
9191

92+
/**
93+
* Print the root of the tree
94+
*
95+
* @param string $classes The classes to apply to the root
96+
* @return void
97+
*/
98+
protected function printTreeRoot($classes) {
99+
echo '<ul>';
100+
echo '<li class="'.$classes.' move-ns open tree-root" data-id="" data-orig="" >';
101+
echo '<div class="li">';
102+
echo '<i class="icon">';
103+
echo inlineSVG(DOKU_PLUGIN . 'move/images/folder-home.svg');
104+
echo '</i>';
105+
echo '<span>:</span>';
106+
echo '</div>';
107+
echo '<ul class="'.$classes.' move-ns open" data-id="" data-orig=""></ul>';
108+
echo '</li>';
109+
echo '</ul>';
110+
}
111+
92112
/**
93113
* Build a tree info structure from media or page directories
94114
*

images/folder-home.svg

Lines changed: 1 addition & 0 deletions
Loading

script/tree.js

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,9 @@ class PluginMoveTree {
8383
const clicked = target.closest('i,button,span');
8484
if (!clicked) return;
8585

86+
// ignore clicks on the root element
87+
if(li.classList.contains('tree-root')) return;
88+
8689
// icon click selects the item
8790
if (clicked.tagName.toLowerCase() === 'i') {
8891
ev.stopPropagation();
@@ -161,14 +164,28 @@ class PluginMoveTree {
161164
* @param {DragEvent} ev
162165
*/
163166
dragOverHandler(ev) {
167+
// remove any previous drop zone
168+
if (this.#dragTarget) {
169+
this.#dragTarget.classList.remove('drop-zone');
170+
}
171+
164172
if (!ev.target) return; // the element the mouse is over
165-
const ul = ev.target.closest('ul');
173+
174+
const li = ev.target.closest('li');
175+
if (!li) return;
176+
177+
let ul; // the UL we drop into
178+
if (li.classList.contains('move-ns')) {
179+
// drop on a namespace, use its UL
180+
ul = li.querySelector('ul');
181+
} else {
182+
// drop on a file or page, use parent UL
183+
ul = ev.target.closest('ul');
184+
}
166185
if (!ul) return;
186+
if(ul.classList.contains('open') === false) return; // only drop into open namespaces
167187
ev.preventDefault(); // allow drop
168188

169-
if (this.#dragTarget && this.#dragTarget !== ul) {
170-
this.#dragTarget.classList.remove('drop-zone');
171-
}
172189
this.#dragTarget = ul;
173190
this.#dragTarget.classList.add('drop-zone');
174191
}
@@ -180,8 +197,8 @@ class PluginMoveTree {
180197
*/
181198
dragDropHandler(ev) {
182199
if (!ev.target) return;
183-
const dst = ev.target.closest('ul');
184-
if (!dst) return;
200+
201+
const dst = this.#dragTarget; // the UL we drop into
185202

186203
// move all selected items to the drop target
187204
const elements = this.#mainElement.querySelectorAll('.selected');

style.less

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,8 @@
1414
// basic list layout
1515
ul {
1616
list-style-type: none;
17-
margin: 0.25em 0 0.25em 2em;
18-
padding: 0;
19-
border: 1px solid transparent;
17+
margin: 0.25em/2 0 0.25em 2em;
18+
padding: 0.25em/2;
2019

2120
li {
2221
margin: 0;
@@ -69,7 +68,7 @@
6968
}
7069

7170
.drop-zone {
72-
border: 1px dashed @ini_border;
71+
border-top: 3px dashed @ini_link;
7372
}
7473

7574
.drag-icon {
@@ -89,6 +88,12 @@
8988
display: block;
9089
margin: 0.5em 0;
9190
}
91+
92+
// root is not interactable
93+
li.tree-root > div.li i,
94+
li.tree-root > div.li span {
95+
cursor: auto;
96+
}
9297
}
9398

9499

0 commit comments

Comments
 (0)