diff --git a/app/components/viewer/index.js b/app/components/viewer/index.js
index 6289865215a07fc85356c3e3944f625f3fd8e473..c5cf3c31ac691320fbe2d42945adc79a9aff8e5d 100644
--- a/app/components/viewer/index.js
+++ b/app/components/viewer/index.js
@@ -169,6 +169,7 @@ export default class ViewerComponent extends Component {
new_pages = Array.from(this.pages);
placeholder = {'is_placeholder': true};
+
if (!new_pages.find(item => item.is_placeholder)) {
// Only one placeholder is allowed
new_pages.splice(pos, 0, placeholder);
@@ -183,8 +184,8 @@ export default class ViewerComponent extends Component {
new_pages = Array.from(this.pages);
placeholder_pos = new_pages.findIndex(item => item.is_placeholder);
+
if (placeholder_pos >= 0) {
- console.log(`placeholder found at pos ${placeholder_pos}`)
new_pages.splice(placeholder_pos, 1);
this.pages = new_pages;
}
diff --git a/app/components/viewer/thumbnail/drop_placeholder.hbs b/app/components/viewer/thumbnail/drop_placeholder.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..0c783cd1fa2daab0897a7985fb17d3c15094b99c
--- /dev/null
+++ b/app/components/viewer/thumbnail/drop_placeholder.hbs
@@ -0,0 +1,2 @@
+<div class='drop-placeholder thumbnail d-flex flex-column align-items-center px-2'>
+</div>
\ No newline at end of file
diff --git a/app/components/viewer/thumbnail/index.js b/app/components/viewer/thumbnail/index.js
index 268c59a982a006d158d6835e8ba03e6a9d2fdbbf..efaec2e5a2ed6db965e176d41ad720713482b58c 100644
--- a/app/components/viewer/thumbnail/index.js
+++ b/app/components/viewer/thumbnail/index.js
@@ -31,9 +31,12 @@ export default class ViewerThumbnailComponent extends Component {
pages: items,
page: model,
original_pos: original_pos,
- source_doc_id: this.args.doc.id
+ source_doc_id: this.args.doc.id,
+ element: element
};
+ element.classList.add('is-being-dragged');
+
event.dataTransfer.setData(
'application/x.page',
JSON.stringify(data)
diff --git a/app/components/viewer/thumbnails/index.hbs b/app/components/viewer/thumbnails/index.hbs
index 75524ad3cc1d787c563f03dd95110387e96ac1f2..7844c67346231bb6930b1fee332c5f91cedc3de1 100644
--- a/app/components/viewer/thumbnails/index.hbs
+++ b/app/components/viewer/thumbnails/index.hbs
@@ -9,7 +9,7 @@
{{adjust_element_height}}>
{{#each @pages as |page|}}
{{#if page.is_placeholder}}
- Placeholder
+ <Viewer::Thumbnail::DropPlaceholder />
{{else}}
<Viewer::Thumbnail
@doc={{@doc}}
diff --git a/app/components/viewer/thumbnails/index.js b/app/components/viewer/thumbnails/index.js
index 8befac90f1e7a6170787336f291ff6701d1668db..c0618c7fd59f6b4d557e44eba257790f25745bc1 100644
--- a/app/components/viewer/thumbnails/index.js
+++ b/app/components/viewer/thumbnails/index.js
@@ -7,11 +7,13 @@ import { get_cursor_pos_within_element } from 'papermerge/utils/dom';
export default class ViewerThumbnailsComponent extends Component {
@action
- onDragendCancel() {
+ onDragendCancel({event, element}) {
+ element.classList.remove('is-being-dragged');
}
@action
- onDragendSuccess() {
+ onDragendSuccess({event, element}) {
+ element.classList.remove('is-being-dragged');
}
@action
@@ -35,6 +37,9 @@ export default class ViewerThumbnailsComponent extends Component {
page_ids = json_data['pages'].map(page => page.id);
source_doc_id = json_data['source_doc_id'];
+ document.querySelector('.is-being-dragged').forEach(
+ item => item.classList.remove('is-being-dragged')
+ );
drop_pos = get_cursor_pos_within_element(
element,
new Point(event.clientX, event.clientY)
@@ -66,12 +71,24 @@ export default class ViewerThumbnailsComponent extends Component {
rect,
cursor_before_child = 0,
outside_all_thumbnails = true,
- svg_element;
+ svg_element,
+ data,
+ json_data,
+ original_pos;
if (!element) {
return;
}
+ data = event.dataTransfer.getData('application/x.page');
+ if (!data) {
+ console.warn('Accepts only application/x.page data');
+ return;
+ }
+ json_data = JSON.parse(data);
+
+ original_pos = json_data['original_pos']
+
cursor_coord = new Point(event.clientX, event.clientY);
thumbnail_dom_items = Array.from(element.children);
@@ -84,9 +101,10 @@ export default class ViewerThumbnailsComponent extends Component {
if (svg_element) { // in case of thumbnail placeholder, there won't be SVG element
rect = svg_element.getBoundingClientRect();
- if (cursor_coord.y <= rect.y) {
+ if (cursor_coord.y <= rect.bottom) {
cursor_before_child += 1;
}
+ console.log(`cursor_before_child=${cursor_before_child}`);
// Check if cursor position is outside of any thumbnail i.e.
// position to drop will be suggested only in case cursor coordinate
// is BETWEEN thumbnails images/svg
@@ -97,11 +115,18 @@ export default class ViewerThumbnailsComponent extends Component {
});
// position where to suggest page drop
- pos = thumbnail_dom_items.length - cursor_before_child;
+ if (element.querySelector('.drop-placeholder')) {
+ pos = thumbnail_dom_items.length - cursor_before_child - 1;
+ } else {
+ pos = thumbnail_dom_items.length - cursor_before_child;
+ }
if (outside_all_thumbnails) {
- // suggest position to drop ONLY of cursor is outside of all thumbnails
- this.args.onAddThumbnailPlaceholderAt(pos);
+ // suggest position to drop ONLY if cursor is outside of all thumbnails
+ console.log(`pos=${pos}; original_pos=${original_pos}`);
+ if (original_pos != pos) {
+ this.args.onAddThumbnailPlaceholderAt(pos);
+ }
} else {
this.args.onRemoveThumbnailPlaceholder();
}
diff --git a/app/modifiers/draggable.js b/app/modifiers/draggable.js
index b35828a23a135a12f8e094ca493b17e891c5052a..3bbfb3887be14a8296d39fa4f9455a22e7007c6c 100644
--- a/app/modifiers/draggable.js
+++ b/app/modifiers/draggable.js
@@ -112,9 +112,19 @@ export default class DraggableModifier extends Modifier {
const ondragend_cancel = this.args.named['onDragendCancel'];
if (event.dataTransfer.dropEffect === "move") {
- ondragend_success(this.model, this.selected_items);
+ ondragend_success({
+ event: this.event,
+ element: this.element,
+ model: this.model,
+ selected_items: this.selected_items
+ });
} else {
- ondragend_cancel(this.model, this.selected_items);
+ ondragend_cancel({
+ event: this.event,
+ element: this.element,
+ model: this.model,
+ selected_items: this.selected_items
+ });
}
}
}
diff --git a/app/styles/document_version.scss b/app/styles/document_version.scss
index d1baf3eff65c06ce5927f36dbb548f0eb7455342..ee5f580c56971c9ba4442ff8433a540f61de4d87 100644
--- a/app/styles/document_version.scss
+++ b/app/styles/document_version.scss
@@ -30,6 +30,16 @@
outline: 1px solid #A6DAFF;
}
}
+
+ .drop-placeholder {
+ margin: 0.85rem;
+ min-height: 7rem;
+ border: 1px dashed #aaa;
+ }
+
+ .is-being-dragged {
+ opacity: 0.5;
+ }
}
.thumbnails-switch {