From a9c8e66d14899796e786e643d434daf6f16cf062 Mon Sep 17 00:00:00 2001 From: Adam Wagner Date: Thu, 9 Feb 2017 07:52:15 +0100 Subject: HTML5 Drag and Drop Support (#8264) * Add DragSource Extension (#8169) * Add DropTarget Extension (#8170) * Add DragStart Event to DragSource Extension (#8171) * Make DataTransfer.dropEffect configurable (#8174) * Make DragSource.dataTransfer data configurable (#8172) * Add server-side Event for drop (#8177) * Added license headers * Extract handler methods, move DropEvent and DropListener to new file, move enums to top * Replaced LinkedHashMap with Map and added List to preserve order of data * Add API for adding a JS acceptance criteria for dragover and drop (#8178, #8179) * Make DragSource Extension extendable (#8175) * Make DropTarget Extension extendable (#8176) * Added javadoc to protected methods * Moved EffectAllowed to shared so that it could be used in shared state directly * Moved DropEffect to separate file, some review fixes and javadoc * Added list to DropTargetRpc to preserve order of data * Remove event listeners on unregister * Changed method names set/getData() to more descriptive set/getTransferData() * Add server side dragStart event (#8171) * Add style to prevent text selection to allow drag * Remove target indicator style on drop * Add client side dragend event listener for drag source * Add server side dragend listener. Attach client side listener only when server side listener added. * Add drag source information to server side dragstart and dragend events. * Fixed some issues addressed in review * Trigger server side dragstart only when there is a listener attached * Criteria script can be set as null to clear * Use Js Interop instead of JSNI for handling event listeners * Use elemental package instead of Js Interop for handling event listeners * Add missing javadoc for public methods * Add default value "uninitialized" to effectAllowed parameter * Simple test UI for HTML5 DnD functionality (#8395) * Add javadoc and other minor changes --- .../vaadin/tests/dnd/DragAndDropCardShuffle.java | 153 +++++++++++++++++++++ 1 file changed, 153 insertions(+) create mode 100644 uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java (limited to 'uitest') diff --git a/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java b/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java new file mode 100644 index 0000000000..24c3940737 --- /dev/null +++ b/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java @@ -0,0 +1,153 @@ +/* + * Copyright 2000-2016 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.dnd; + +import java.util.Optional; + +import com.vaadin.event.dnd.DragSourceExtension; +import com.vaadin.event.dnd.DropTargetExtension; +import com.vaadin.server.Extension; +import com.vaadin.server.Page; +import com.vaadin.server.VaadinRequest; +import com.vaadin.tests.components.AbstractTestUIWithLog; +import com.vaadin.ui.Component; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; + +public class DragAndDropCardShuffle extends AbstractTestUIWithLog { + + // Data type for storing card position + private static final String DATA_INDEX = "index"; + + // Create cards + private final Label ace = new Label("A"); + private final Label jack = new Label("J"); + private final Label queen = new Label("Q"); + private final Label king = new Label("K"); + + // Create desk + private final HorizontalLayout desk = new HorizontalLayout(); + + @Override + protected void setup(VaadinRequest request) { + + // Create UI and add extensions + desk.addComponents(ace, jack, queen, king); + + ace.setStyleName("card"); + addDragSourceExtension(ace); + addDropTargetExtension(ace); + + jack.setStyleName("card"); + addDragSourceExtension(jack); + addDropTargetExtension(jack); + + queen.setStyleName("card"); + addDragSourceExtension(queen); + addDropTargetExtension(queen); + + king.setStyleName("card"); + addDragSourceExtension(king); + addDropTargetExtension(king); + + addComponent(desk); + + // Add styling + setStyle(); + } + + private void addDragSourceExtension(Label source) { + // Create and attach extension + DragSourceExtension dragSource = new DragSourceExtension(); + dragSource.extend(source); + + // Set component position as transfer data + dragSource.setTransferData(DATA_INDEX, + String.valueOf(desk.getComponentIndex(source))); + + // Add listeners + dragSource.addDragStartListener(event -> { + event.getComponent().addStyleName("dragged"); + log(((Label) event.getComponent()).getValue() + " dragstart"); + }); + + dragSource.addDragEndListener(event -> { + event.getComponent().removeStyleName("dragged"); + log(((Label) event.getComponent()).getValue() + " dragend"); + }); + } + + private void addDropTargetExtension(Label target) { + // Create and attach extension + DropTargetExtension dropTarget = new DropTargetExtension(); + dropTarget.extend(target); + + // Add listener + dropTarget.addDropListener(event -> { + // Retrieve the source's position + int sourceIndex = Integer + .valueOf(event.getTransferData(DATA_INDEX)); + + // Find source component + Component source = desk.getComponent(sourceIndex); + + // Swap source and target components + desk.replaceComponent(target, source); + + // Get DragSource extension for target component and set position data + Optional targetExt = target.getExtensions().stream() + .filter(e -> e instanceof DragSourceExtension).findFirst(); + targetExt.ifPresent(extension -> { + ((DragSourceExtension) extension).setTransferData(DATA_INDEX, + String.valueOf(desk.getComponentIndex(target))); + }); + + // Get DragSource extension for source component and set position data + Optional sourceExt = source.getExtensions().stream() + .filter(e -> e instanceof DragSourceExtension).findFirst(); + sourceExt.ifPresent(extension -> { + ((DragSourceExtension) extension).setTransferData(DATA_INDEX, + String.valueOf(desk.getComponentIndex(source))); + }); + + log(((Label) source).getValue() + " dropped onto " + ((Label) event + .getComponent()).getValue()); + }); + } + + private void setStyle() { + Page.Styles styles = Page.getCurrent().getStyles(); + + styles.add(".card {" + + "width: 150px;" + + "height: 200px;" + + "border: 1px solid black;" + + "border-radius: 7px;" + + "padding-left: 10px;" + + "color: red;" + + "font-weight: bolder;" + + "font-size: 25px;" + + "background-color: gainsboro;" + + "}"); + styles.add(".v-drag-over {border-style: dashed;}"); + styles.add(".dragged {opacity: .4;}"); + } + + @Override + protected String getTestDescription() { + return "Shuffle cards with pure HTML5 drag and drop"; + } +} -- cgit v1.2.3