diff --git a/app/components/viewer/index.js b/app/components/viewer/index.js index c5cf3c31ac691320fbe2d42945adc79a9aff8e5d..f6f94c616fc14fc6561144d165dbe2f4336117c3 100644 --- a/app/components/viewer/index.js +++ b/app/components/viewer/index.js @@ -153,7 +153,12 @@ export default class ViewerComponent extends Component { @action onThumbnailsPositionChanged({original_pos, drop_pos, page_ids}) { - let all_pages = this.pages; + let all_pages, drop_placeholder_pos; + + drop_placeholder_pos = this.pages.findIndex(item => item.is_drop_placeholder); + + console.log(`Drop placeholder ${drop_placeholder_pos}`); + all_pages = this.pages; this.pages = reposition_items({ items: all_pages, @@ -165,14 +170,14 @@ export default class ViewerComponent extends Component { @action onAddThumbnailPlaceholderAt(pos) { let new_pages, - placeholder; + drop_placeholder; new_pages = Array.from(this.pages); - placeholder = {'is_placeholder': true}; + drop_placeholder = {'is_drop_placeholder': true}; - if (!new_pages.find(item => item.is_placeholder)) { - // Only one placeholder is allowed - new_pages.splice(pos, 0, placeholder); + if (!new_pages.find(item => item.is_drop_placeholder)) { + // Only one drop placeholder is allowed + new_pages.splice(pos, 0, drop_placeholder); this.pages = new_pages; } } @@ -180,13 +185,13 @@ export default class ViewerComponent extends Component { @action onRemoveThumbnailPlaceholder() { let new_pages, - placeholder_pos; + drop_placeholder_pos; new_pages = Array.from(this.pages); - placeholder_pos = new_pages.findIndex(item => item.is_placeholder); + drop_placeholder_pos = new_pages.findIndex(item => item.is_drop_placeholder); - if (placeholder_pos >= 0) { - new_pages.splice(placeholder_pos, 1); + if (drop_placeholder_pos >= 0) { + new_pages.splice(drop_placeholder_pos, 1); this.pages = new_pages; } } diff --git a/app/components/viewer/pages.hbs b/app/components/viewer/pages.hbs index bc6fa94a87253c9846305dede371df7898ee0a79..59746e7fc377fcc7080dd74d32a7f4f99c31880a 100644 --- a/app/components/viewer/pages.hbs +++ b/app/components/viewer/pages.hbs @@ -1,7 +1,7 @@ <div class="d-flex flex-column pages" {{adjust_element_height}}> {{#each @pages as |page|}} - {{#if page.is_placeholder}} + {{#if page.is_drop_placeholder}} <!-- no op --> {{else}} <Viewer::Page diff --git a/app/components/viewer/thumbnails/index.hbs b/app/components/viewer/thumbnails/index.hbs index 7844c67346231bb6930b1fee332c5f91cedc3de1..c28be67f3386586bafa16cecb8b8e4ac8d13ab0d 100644 --- a/app/components/viewer/thumbnails/index.hbs +++ b/app/components/viewer/thumbnails/index.hbs @@ -8,7 +8,7 @@ {{adjust_element_height}}> {{#each @pages as |page|}} - {{#if page.is_placeholder}} + {{#if page.is_drop_placeholder}} <Viewer::Thumbnail::DropPlaceholder /> {{else}} <Viewer::Thumbnail diff --git a/app/components/viewer/thumbnails/index.js b/app/components/viewer/thumbnails/index.js index 523d887911c46ed7e35c85a5d2086bb5e149f569..ea5c16e0b87e1f042f8c9756a680749abed82d43 100644 --- a/app/components/viewer/thumbnails/index.js +++ b/app/components/viewer/thumbnails/index.js @@ -25,8 +25,8 @@ export default class ViewerThumbnailsComponent extends Component { drop_pos, source_doc_id; - event.preventDefault(); data = event.dataTransfer.getData('application/x.page'); + if (!data) { console.warn('Accepts only application/x.page data'); return; @@ -124,6 +124,8 @@ export default class ViewerThumbnailsComponent extends Component { // suggest position to drop ONLY if cursor is outside of all thumbnails console.log(`suggested_pos=${suggested_pos}; original_pos=${original_pos}`); if (Math.abs(original_pos - suggested_pos) >= 1 && suggested_pos != original_pos + 1) { + // prevent default to allow drop + event.preventDefault(); this.args.onAddThumbnailPlaceholderAt(suggested_pos); } } else {