From f72ac12fd257e218c370a4d686be4cc99c2a22d6 Mon Sep 17 00:00:00 2001 From: Pekka Hyvönen Date: Thu, 11 May 2017 14:36:27 +0300 Subject: Add mobile html5 dnd support using polyfill (#9282) First step of mobile DND support. - Add mobile html5 dnd support using polyfill - Adds a switch for enabling mobile html5 dnd support - Adds polyfill only when needed - Ignore native Android Chrome drag start because doesn't work properly (no dragend event fired) - Add documentation on enabling mobile HTML5 DnD support - Add mention of drag-drop-polyfill license - Fixed issue in polyfill when not using "snapback" - Add mention of forked polyfill Fixes #9174 --- .../tests/components/grid/GridDragAndDrop.java | 14 +++++--- .../vaadin/tests/dnd/DragAndDropCardShuffle.java | 38 +++++++++++++++++++--- 2 files changed, 43 insertions(+), 9 deletions(-) (limited to 'uitest/src') diff --git a/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java b/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java index 529d8cf562..059c963658 100644 --- a/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java +++ b/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java @@ -51,6 +51,7 @@ public class GridDragAndDrop extends AbstractTestUIWithLog { @Override protected void setup(VaadinRequest request) { + getUI().setMobileHtml5DndEnabled(true); // Drag source Grid Grid left = createGridAndFillWithData(50); @@ -117,18 +118,22 @@ public class GridDragAndDrop extends AbstractTestUIWithLog { }); // Add drag start listener - dragSource.addGridDragStartListener( - event -> draggedItems = event.getDraggedItems()); + dragSource.addGridDragStartListener(event -> { + draggedItems = event.getDraggedItems(); + log("START: " + draggedItems.size() + ", :" + + draggedItems.stream().map(person -> person.getLastName()) + .collect(Collectors.joining(" "))); + }); // Add drag end listener dragSource.addGridDragEndListener(event -> { + log("END: dropEffect=" + event.getDropEffect()); if (event.getDropEffect() == DropEffect.MOVE && draggedItems != null) { // If drop is successful, remove dragged item from source Grid ((ListDataProvider) grid.getDataProvider()).getItems() .removeAll(draggedItems); grid.getDataProvider().refreshAll(); - // Remove reference to dragged items draggedItems = null; } @@ -160,7 +165,8 @@ public class GridDragAndDrop extends AbstractTestUIWithLog { items.addAll(index, draggedItems); dataProvider.refreshAll(); - log("dragData=" + event.getDataTransferText() + ", target=" + log("DROP: dragData=" + event.getDataTransferText() + + ", target=" + event.getDropTargetRow().getFirstName() + " " + event.getDropTargetRow().getLastName() + ", location=" + event.getDropLocation()); diff --git a/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java b/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java index 8a136304aa..8f72fe225e 100644 --- a/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java +++ b/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java @@ -27,6 +27,7 @@ import com.vaadin.server.VaadinRequest; import com.vaadin.shared.ui.dnd.DropEffect; import com.vaadin.shared.ui.dnd.EffectAllowed; import com.vaadin.tests.components.AbstractTestUIWithLog; +import com.vaadin.ui.CheckBox; import com.vaadin.ui.HorizontalLayout; import com.vaadin.ui.Label; import com.vaadin.ui.NativeSelect; @@ -42,7 +43,7 @@ public class DragAndDropCardShuffle extends AbstractTestUIWithLog { private final Label king = new Label("K"); // Create desk - private final HorizontalLayout desk = new HorizontalLayout(); + private HorizontalLayout desk = new HorizontalLayout(); private final List> sources = new ArrayList<>(); private final List> targets = new ArrayList<>(); @@ -62,10 +63,28 @@ public class DragAndDropCardShuffle extends AbstractTestUIWithLog { dropEffect.setItems(DropEffect.values()); dropEffect.addValueChangeListener(event -> targets .forEach(target -> target.setDropEffect(event.getValue()))); + CheckBox enableMobileSupport = new CheckBox("Mobile Support", false); + enableMobileSupport.addValueChangeListener(event -> { + setMobileHtml5DndEnabled(event.getValue()); + + removeExtensions(); + setupExtensions(); + }); + + setupExtensions(); - // Create UI and add extensions desk.addComponents(ace, jack, queen, king); + addComponents(new HorizontalLayout(effectAllowed, dropEffect, + enableMobileSupport), desk); + + // Add styling + setStyle(); + } + + private void setupExtensions() { + // Create UI and add extensions + ace.setStyleName("card"); addDragSourceExtension(ace); addDropTargetExtension(ace); @@ -81,11 +100,20 @@ public class DragAndDropCardShuffle extends AbstractTestUIWithLog { king.setStyleName("card"); addDragSourceExtension(king); addDropTargetExtension(king); + } - addComponents(new HorizontalLayout(effectAllowed, dropEffect), desk); + private void removeExtensions() { + ace.removeExtension(ace.getExtensions().iterator().next()); + ace.removeExtension(ace.getExtensions().iterator().next()); - // Add styling - setStyle(); + jack.removeExtension(jack.getExtensions().iterator().next()); + jack.removeExtension(jack.getExtensions().iterator().next()); + + queen.removeExtension(queen.getExtensions().iterator().next()); + queen.removeExtension(queen.getExtensions().iterator().next()); + + king.removeExtension(king.getExtensions().iterator().next()); + king.removeExtension(king.getExtensions().iterator().next()); } private void addDragSourceExtension(Label source) { -- cgit v1.2.3