From 7c6eda602ae2358bbe2d047b09fcf511efca1a6d Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Wed, 2 Oct 2024 09:34:53 +0200 Subject: [PATCH] Fix drag image of dragged section in Safari Safari apparently get confused with the scaled section thumbnail and incorrectly uses a much larger rectangle when generating the drag image of a dragged section item. The image then also includes text of other chapters and section items of the outline and parts of the sidebar footer. Use fallback instead of native draggable for sections in Safari. Related: https://github.com/SortableJS/Sortable/issues/291 REDMINE-20837 --- .../scrolled/package/src/editor/views/ChapterItemView.js | 4 +++- package/src/ui/views/SortableCollectionView.js | 3 +++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/entry_types/scrolled/package/src/editor/views/ChapterItemView.js b/entry_types/scrolled/package/src/editor/views/ChapterItemView.js index 524f8ecd5..e1909bb34 100644 --- a/entry_types/scrolled/package/src/editor/views/ChapterItemView.js +++ b/entry_types/scrolled/package/src/editor/views/ChapterItemView.js @@ -3,6 +3,7 @@ import Marionette from 'backbone.marionette'; import {editor, modelLifecycleTrackingView} from 'pageflow/editor'; import {cssModulesUtils, SortableCollectionView} from 'pageflow/ui'; +import {browser} from 'pageflow/frontend'; import {SectionItemView} from './SectionItemView'; @@ -58,7 +59,8 @@ export const ChapterItemView = Marionette.Layout.extend({ itemViewOptions: { entry: this.options.entry }, - connectWith: cssModulesUtils.selector(styles, 'sections') + connectWith: cssModulesUtils.selector(styles, 'sections'), + forceDraggableFallback: browser.agent.matchesDesktopSafari() })); this.update(); diff --git a/package/src/ui/views/SortableCollectionView.js b/package/src/ui/views/SortableCollectionView.js index ed6a5f4fc..9914c9da2 100644 --- a/package/src/ui/views/SortableCollectionView.js +++ b/package/src/ui/views/SortableCollectionView.js @@ -14,6 +14,9 @@ export const SortableCollectionView = CollectionView.extend({ ghostClass: 'sortable-placeholder', + forceFallback: this.options.forceDraggableFallback, + fallbackTolerance: 3, + onEnd: event => { const item = $(event.item);