gCubeSystem
/
workspace-uploader
16
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

4055: Workspace Uploder enhancement: work with multiple-instances of DnD Workspace Uploader in the DOM 

Task-Url: https://support.d4science.org/issues/4055

Added dynamic ids instead of static ids
Updated css
Updated pom version at 1.3.0

git-svn-id: https://svn.d4science.research-infrastructures.eu/gcube/trunk/portlets/widgets/workspace-uploader@128667 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
Francesco Mangiacrapa 2016-05-18 15:54:56 +00:00
parent fec942629e
commit 37aa0559ba
4 changed files with 98 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
distro/changelog.xml
View File

@ -1,4 +1,8 @@
<ReleaseNotes> <ReleaseNotes>
<Changeset component="org.gcube.portlets-widgets.workspace-uploader.1-3-0"
date="2016-05-18">
<Change>[Feature #4055] DnD multiple instances</Change>
</Changeset>
<Changeset component="org.gcube.portlets-widgets.workspace-uploader.1-2-0" <Changeset component="org.gcube.portlets-widgets.workspace-uploader.1-2-0"
date="2016-05-09"> date="2016-05-09">
<Change>[Feature #3962] Sequential upload status</Change> <Change>[Feature #3962] Sequential upload status</Change>

2
pom.xml
View File

@ -12,7 +12,7 @@
<groupId>org.gcube.portlets.widgets</groupId> <groupId>org.gcube.portlets.widgets</groupId>
<artifactId>workspace-uploader</artifactId> <artifactId>workspace-uploader</artifactId>
<packaging>jar</packaging> <packaging>jar</packaging>
<version>1.2.0-SNAPSHOT</version> <version>1.3.0-SNAPSHOT</version>
<name>Workspace Uploader Widget</name> <name>Workspace Uploader Widget</name>
<description>Workspace Uploader Widget allows your application to upload file/s in the gCube Workspace</description> <description>Workspace Uploader Widget allows your application to upload file/s in the gCube Workspace</description>
<scm> <scm>

103
src/main/java/org/gcube/portlets/widgets/workspaceuploader/client/uploader/dragdrop/MultipleDNDUpload.java
View File

@ -14,6 +14,7 @@ import org.gcube.portlets.widgets.workspaceuploader.client.uploader.DialogUpload
import org.gcube.portlets.widgets.workspaceuploader.client.uploader.WorkspaceFieldsUploadManager; import org.gcube.portlets.widgets.workspaceuploader.client.uploader.WorkspaceFieldsUploadManager;
import com.google.gwt.core.shared.GWT; import com.google.gwt.core.shared.GWT;
import com.google.gwt.user.client.Random;
import com.google.gwt.user.client.Window; import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.HTML; import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.LayoutPanel; import com.google.gwt.user.client.ui.LayoutPanel;
@ -29,6 +30,10 @@ import com.google.gwt.user.client.ui.Widget;
public class MultipleDNDUpload extends LayoutPanel implements public class MultipleDNDUpload extends LayoutPanel implements
HasWorskpaceUploadNotificationListener { HasWorskpaceUploadNotificationListener {
/**
*
*/
// private WorkspaceFieldsUploadManager fields; // private WorkspaceFieldsUploadManager fields;
private String idFolder; private String idFolder;
private UPLOAD_TYPE type; private UPLOAD_TYPE type;
@ -51,20 +56,44 @@ public class MultipleDNDUpload extends LayoutPanel implements
private String currentJsonKey; private String currentJsonKey;
private boolean isLimitExceeded; private boolean isLimitExceeded;
/** The drop target css classes. */
public static final String DROP_TARGET_CLASS = "drop_target";
public static final String DROP_TARGET_OUTER_CLASS = "drop_target_outer";
public static final String DROP_TARGET_INNER_CLASS = "drop_target_inner";
public static final String DROP_TARGET_UNIQUE_CHILD_ID = "drop_target_unique_child";
/** The drop target ids. */
private int randomInt = Random.nextInt() + Random.nextInt();
private String dropTargetID = DROP_TARGET_CLASS +"-" + randomInt;
private String dropTargetOuterID = DROP_TARGET_OUTER_CLASS +"-"+ randomInt;
private String dropTargetInnerID = DROP_TARGET_INNER_CLASS +"-"+ randomInt;
private String dropTargetUniqueChildID = DROP_TARGET_UNIQUE_CHILD_ID +"-"+ randomInt;
/** /**
* Instantiates a new DND file reader. * Instantiates a new DND file reader.
*/ */
public MultipleDNDUpload() { public MultipleDNDUpload() {
this.getElement().setId("drop_target"); this.getElement().setId(dropTargetID);
HTML html = new HTML( String dnd = "<div id='"+this.dropTargetOuterID+"' class='"+DROP_TARGET_OUTER_CLASS+"'><div id='"+this.dropTargetInnerID+"' class='"+DROP_TARGET_INNER_CLASS+"'></div></div>";
"<div id=\"drop_target_outer\"><div id=\"drop_target_inner\"></div></div>"); GWT.log(dnd);
html.getElement().setClassName("container-drop_target"); HTML html = new HTML(dnd);
this.add(html); this.add(html);
// ScriptInjector.fromUrl("workspaceuploader/dndhtmlfileupload.js")
// .setWindow(ScriptInjector.TOP_WINDOW).inject();
} }
/**
* Instantiates a new multiple dnd upload.
*
* @param parentId the parent id
* @param uploadType the upload type
*/
public MultipleDNDUpload(String parentId, UPLOAD_TYPE uploadType) {
this();
setParameters(parentId, uploadType);
}
/* (non-Javadoc) /* (non-Javadoc)
* @see com.google.gwt.user.client.ui.LayoutPanel#onAttach() * @see com.google.gwt.user.client.ui.LayoutPanel#onAttach()
*/ */
@ -73,7 +102,7 @@ public class MultipleDNDUpload extends LayoutPanel implements
super.onAttach(); super.onAttach();
if(onlyChild!=null){ if(onlyChild!=null){
onlyChild.getElement().setId("drop_target_only_child"); onlyChild.getElement().setId(dropTargetUniqueChildID);
} }
} }
@ -274,6 +303,31 @@ public class MultipleDNDUpload extends LayoutPanel implements
return type; return type;
} }
/**
* @return the dropTargetID
*/
public String getDropTargetID() {
return dropTargetID;
}
/**
* @return the dropTargetOuterID
*/
public String getDropTargetOuterID() {
return dropTargetOuterID;
}
/**
* @return the dropTargetInnerID
*/
public String getDropTargetInnerID() {
return dropTargetInnerID;
}
/** /**
* Reset panel. * Reset panel.
* *
@ -281,15 +335,16 @@ public class MultipleDNDUpload extends LayoutPanel implements
* the instance * the instance
*/ */
private static native void resetPanel(MultipleDNDUpload instance) /*-{ private static native void resetPanel(MultipleDNDUpload instance) /*-{
var drop_target_inner = instance.@org.gcube.portlets.widgets.workspaceuploader.client.uploader.dragdrop.MultipleDNDUpload::dropTargetInnerID;
var drop_target_outer = instance.@org.gcube.portlets.widgets.workspaceuploader.client.uploader.dragdrop.MultipleDNDUpload::dropTargetOuterID;
var drop = $wnd.$('#drop_target')[0]; var drop = $wnd.$('#drop_target')[0];
if (drop === null || drop === undefined) { if (drop === null || drop === undefined) {
return; return;
} }
drop.className = "over-false"; drop.className = "over-false";
$wnd.$('#drop_target_inner')[0].className = ""; $wnd.$('#'+drop_target_inner)[0].className = "";
$wnd.$('#drop_target_outer')[0].style.display = "none"; $wnd.$('#'+drop_target_outer)[0].style.display = "none";
// $wnd.$('#drop_target_only_child')[0].style.display = ""; // $wnd.$('#drop_target_only_child')[0].style.display = "";
instance.@org.gcube.portlets.widgets.workspaceuploader.client.uploader.dragdrop.MultipleDNDUpload::setVisibleOnlyChild(Z)(true); instance.@org.gcube.portlets.widgets.workspaceuploader.client.uploader.dragdrop.MultipleDNDUpload::setVisibleOnlyChild(Z)(true);
}-*/; }-*/;
@ -303,10 +358,13 @@ public class MultipleDNDUpload extends LayoutPanel implements
* the file delimiter * the file delimiter
* @return the files selected * @return the files selected
*/ */
public static native void initW3CFileReader(MultipleDNDUpload instance, public static native void initW3CFileReader(MultipleDNDUpload instance, String fileDelimiter) /*-{
String fileDelimiter) /*-{
console.log("initW3CFileReader"); console.log("initW3CFileReader");
var drop_target = instance.@org.gcube.portlets.widgets.workspaceuploader.client.uploader.dragdrop.MultipleDNDUpload::dropTargetID;
var drop_target_inner = instance.@org.gcube.portlets.widgets.workspaceuploader.client.uploader.dragdrop.MultipleDNDUpload::dropTargetInnerID;
var drop_target_outer = instance.@org.gcube.portlets.widgets.workspaceuploader.client.uploader.dragdrop.MultipleDNDUpload::dropTargetOuterID;
var DROP_TARGET_INNER_CLASS = @org.gcube.portlets.widgets.workspaceuploader.client.uploader.dragdrop.MultipleDNDUpload::DROP_TARGET_INNER_CLASS;
function isFileOverwrite(url, params, msgText){ function isFileOverwrite(url, params, msgText){
var xhReq = new XMLHttpRequest(); var xhReq = new XMLHttpRequest();
@ -368,9 +426,9 @@ public class MultipleDNDUpload extends LayoutPanel implements
} }
if (window.FileReader) { if (window.FileReader) {
console.log("before load"); console.log("before load "+drop_target);
var drop = $wnd.$('#drop_target')[0]; var drop = $wnd.$('#'+drop_target)[0];
$wnd.$('#drop_target_outer')[0].style.display = "none"; $wnd.$('#'+drop_target_outer)[0].style.display = "none";
console.log("drop is " + drop); console.log("drop is " + drop);
@ -419,7 +477,7 @@ public class MultipleDNDUpload extends LayoutPanel implements
function(e) { function(e) {
console.log('dragenter'); console.log('dragenter');
drop.className = "over-true"; drop.className = "over-true";
$wnd.$('#drop_target_inner')[0].className = ""; $wnd.$('#'+drop_target_inner)[0].className = "";
// $wnd.$('#drop_target_only_child')[0].style.display = "none"; // $wnd.$('#drop_target_only_child')[0].style.display = "none";
instance.@org.gcube.portlets.widgets.workspaceuploader.client.uploader.dragdrop.MultipleDNDUpload::setVisibleOnlyChild(Z)(false); instance.@org.gcube.portlets.widgets.workspaceuploader.client.uploader.dragdrop.MultipleDNDUpload::setVisibleOnlyChild(Z)(false);
@ -442,8 +500,8 @@ public class MultipleDNDUpload extends LayoutPanel implements
function(e) { function(e) {
console.log('dragleave'); console.log('dragleave');
drop.className = "over-false"; drop.className = "over-false";
$wnd.$('#drop_target_inner')[0].className = ""; $wnd.$('#'+drop_target_inner)[0].className = "";
$wnd.$('#drop_target_outer')[0].style.display = "none"; $wnd.$('#'+drop_target_outer)[0].style.display = "none";
// $wnd.$('#drop_target_only_child')[0].style.display = ""; // $wnd.$('#drop_target_only_child')[0].style.display = "";
instance.@org.gcube.portlets.widgets.workspaceuploader.client.uploader.dragdrop.MultipleDNDUpload::setVisibleOnlyChild(Z)(true); instance.@org.gcube.portlets.widgets.workspaceuploader.client.uploader.dragdrop.MultipleDNDUpload::setVisibleOnlyChild(Z)(true);
instance.@org.gcube.portlets.widgets.workspaceuploader.client.uploader.dragdrop.MultipleDNDUpload::setLimitExceeded(Z)(false); instance.@org.gcube.portlets.widgets.workspaceuploader.client.uploader.dragdrop.MultipleDNDUpload::setLimitExceeded(Z)(false);
@ -456,7 +514,8 @@ public class MultipleDNDUpload extends LayoutPanel implements
} // } //
console.log('dragover'); console.log('dragover');
drop.className = "over-true"; drop.className = "over-true";
$wnd.$('#drop_target_outer')[0].style.display = ""; $wnd.$('#'+drop_target_inner)[0].className = DROP_TARGET_INNER_CLASS;
$wnd.$('#'+drop_target_outer)[0].style.display = "";
instance.@org.gcube.portlets.widgets.workspaceuploader.client.uploader.dragdrop.MultipleDNDUpload::setVisibleOnlyChild(Z)(false); instance.@org.gcube.portlets.widgets.workspaceuploader.client.uploader.dragdrop.MultipleDNDUpload::setVisibleOnlyChild(Z)(false);
// $wnd.$('#drop_target_only_child')[0].style.display = "none"; // $wnd.$('#drop_target_only_child')[0].style.display = "none";
}); });
@ -493,7 +552,7 @@ public class MultipleDNDUpload extends LayoutPanel implements
|| uploadType === null || uploadType === null
|| uploadType === undefined) { || uploadType === undefined) {
$wnd.$('#drop_target_inner')[0].className = "drop_target_inner_error"; $wnd.$('#'+drop_target_inner)[0].className = "drop_target_inner_error";
var error = "Folder destionation or upload type not specified"; var error = "Folder destionation or upload type not specified";
instance.@org.gcube.portlets.widgets.workspaceuploader.client.uploader.dragdrop.MultipleDNDUpload::showAlert(Ljava/lang/String;)(error); instance.@org.gcube.portlets.widgets.workspaceuploader.client.uploader.dragdrop.MultipleDNDUpload::showAlert(Ljava/lang/String;)(error);
return; return;
@ -621,7 +680,7 @@ public class MultipleDNDUpload extends LayoutPanel implements
// addEventHandler(drop, 'dragover', cancel); // addEventHandler(drop, 'dragover', cancel);
// addEventHandler(drop, 'dragenter', cancel); // addEventHandler(drop, 'dragenter', cancel);
} else { } else {
$wnd.$('#drop_target')[0].innerHTML = 'Your browser does not support the HTML5 FileReader.'; $wnd.$('#'+drop_target)[0].innerHTML = 'Your browser does not support the HTML5 FileReader.';
} }
}-*/; }-*/;

22
src/main/java/org/gcube/portlets/widgets/workspaceuploader/public/workspaceuploader.css
View File

@ -1,5 +1,3 @@
/** Add css rules here for your application. */
/** Example rules used by the template application (remove for your app) */
h1 { h1 {
font-size: 2em; font-size: 2em;
font-weight: bold; font-weight: bold;
@ -118,9 +116,6 @@ h1 {
/* cursor: pointer; */ /* cursor: pointer; */
/* color: #FFF; */ /* color: #FFF; */
/* } */ /* } */
.container-drop_target {
/* position: relative; */
}
.textbox:hover { .textbox:hover {
opacity: 1; opacity: 1;
@ -130,7 +125,14 @@ h1 {
padding-top: 50px; padding-top: 50px;
} }
#drop_target_outer {
/************ DRAG & DROP *******************/
.container-drop_target {
/* position: relative; */
}
.drop_target_outer {
/* position: fixed; */ /* position: fixed; */
top: 0; top: 0;
left: 0; left: 0;
@ -138,7 +140,7 @@ h1 {
height: 100%; height: 100%;
} }
#drop_target_inner { .drop_target_inner {
width: 50%; width: 50%;
height: 50%; height: 50%;
top: 25%; top: 25%;
@ -150,8 +152,7 @@ h1 {
/* background: orange; */ /* background: orange; */
} }
/* Demo One */ .drop_target {
#drop_target {
/* border: 5px dashed #D9D9D9; */ /* border-radius: 10px; */ /* border: 5px dashed #D9D9D9; */ /* border-radius: 10px; */
/* padding: 50%; */ /* text-align: center; */ /* display: none; */ /* padding: 50%; */ /* text-align: center; */ /* display: none; */
width: 100%; width: 100%;
@ -181,7 +182,8 @@ h1 {
} */ } */
/* Demo One */
.drop_target_inner_error { .drop_target_inner_error {
background-image: url("status-error.png") !important; background-image: url("status-error.png") !important;
} }
/************ END DRAG & DROP *******************/