Handle classes better, support drop effect

packages/gallery/src/interface/components/dropzone.js

@@ -16,17 +16,32 @@ const CSS_DROPZONE_ACTIVE = {
 };
 
 export function Dropzone(vm, params) {
-	const { ondrop, ondragenter, ondragleave, className, activeClassName, content } = params;
+	const {
+		ondrop,
+		ondragenter,
+		ondragleave,
+		className,
+		hoverClassName,
+		content,
+		hoverContent,
+		dropEffect
+	} = params;
 
 	const baseClassName = className || injectStyle(CSS_DROPZONE);
-	const hoverClassName = `${baseClassName} ${activeClassName || injectStyle(CSS_DROPZONE_ACTIVE)}`;
+	const activeClassName = `${baseClassName} ${hoverClassName || injectStyle(CSS_DROPZONE_ACTIVE)}`;
 
 	const enterCounter = prop(0);
-	const class_ = computed(c => (c === 0 ? baseClassName : hoverClassName), [enterCounter]);
+	const active = computed(c => c > 0, [enterCounter]);
+	const _class = computed(a => (a && hoverClassName ? activeClassName : baseClassName), [active]);
+	const _content = computed(a => (a && hoverContent ? hoverContent : content), [active]);
 
 	function onDragOver(evt) {
 		// allows the browser to accept drops.
 		evt.preventDefault();
+
+		if (dropEffect) {
+			evt.dataTransfer.dropEffect = dropEffect;
+		}
 	}
 
 	function onDragEnter() {
@@ -50,7 +65,7 @@ export function Dropzone(vm, params) {
 		enterCounter(0);
 
 		if (ondrop) {
-			ondrop(evt.dataTransfer.files);
+			ondrop(evt, evt.dataTransfer.files);
 		}
 	}
 
@@ -58,13 +73,14 @@ export function Dropzone(vm, params) {
 		return el(
 			'div',
 			{
-				class: class_,
+				class: _class,
+				'data-hover': active, // only here to subscribe to the change
 				ondragenter: onDragEnter,
 				ondragover: onDragOver,
 				ondragleave: onDragLeave,
 				ondrop: onDrop
 			},
-			content()
+			_content()()
 		);
 	};
 }

packages/gallery/src/interface/gallery.js

@@ -100,10 +100,8 @@ export function GalleryView(vm) {
 				{
 					className: slate,
 					activeClassName: 'dropHover',
+					dropEffect: 'copy',
 					ondrop: uploadImages,
-					type: 'file',
-					multiple: true, // FIXME - these don't carry through to the input tag
-					accept: 'image/jpeg',
 					content: renderDropzone
 				},
 				'dz'