redesign

static/index.html

@@ -22,12 +22,8 @@ html, body {
 		<script type="text/javascript" src="/sdk.js"></script>
         <script type="text/javascript">
 "use strict";
-$(function() {
+contented.enableDrop( $("#surrogate-area")[0], "", function(itm) {
-
-    contented_EnableDrop( $("#surrogate-area")[0], "", function(itm) {
     console.log(itm);
-    });
-
 });
 		</script>
 	</body>

static/sdk.js

@@ -1,24 +1,30 @@
-"use strict";
+;"use strict";
 
-/**
+var contented = (function($) {
+    "use strict";
+
+    /**
      * contented_SupportsDrop returns whether drag-and-drop is supported by this
      * browser.
      *
      * @return bool
      */
-function contented_SupportsDrop() {
+    var contented_SupportsDrop = function() {
         return ('ondrop' in window && 'FormData' in window && 'FileReader' in window);
-}
+    }
 
-/**
+    /**
      * contented_EnableDrop enables drag-and-drop upload on a DOM element.
      * The class "is-dragover" will be toggled on the target element.
      *
      * @param DOMElement element       Drop target
      * @param string     baseURL       Base URL of the contented server
      * @param Function   onUploaded    Called with a property object for every uploaded file
+     * @param Function   onClose       Called when the widget should be destroyed
      */
-function contented_EnableDrop(element, baseURL, onUploaded) {
+    var contented_EnableDrop = function(element, baseURL, onUploaded, onClose) {
+        onUploaded = onUploaded || function(){};
+        onClose = onClose || function(){};
 
         // <input type="hidden" name="MAX_FILE_SIZE" value="` + ret.MaxUploadBytes + `" /> 
 
@@ -36,14 +42,33 @@ function contented_EnableDrop(element, baseURL, onUploaded) {
                 var $f = $("<div>").html(widgetHtml);
                 $f.find(".contented-extratext").text(extraText);
 
-            $f.find(".contented-upload-type").click(function() {
+                var ourClose = function() {
+                    $f.remove(); // remove from dom
+                    onClose(); // upstream close
+                };
+                $f.find(".contented-close").click(function() {
+                    ourClose();
+                })
+
+                var setType = function(type) {
                     $f.find(".contented-upload-type").removeClass("contented-upload-type-active");
-                $(this).addClass("contented-upload-type-active");
+                    $f.find(".contented-upload-type[data-upload-type=" + type + "]").addClass("contented-upload-type-active");
 
                     $f.find(".contented-upload-if").removeClass("contented-active");
-                $f.find(".contented-if-" + $(this).attr('data-upload-type')).addClass("contented-active");
+                    $f.find(".contented-if-" + type).addClass("contented-active");
+                };
+
+                $f.find(".contented-upload-type").click(function() {
+                    setType( $(this).attr('data-upload-type') );
                 });
 
+                if (!contented_SupportsDrop()) {
+                    // switch default
+                    setType('file');
+                }
+
+                //
+
                 var $element = $(element);
                 var offset = $element.offset();
         
@@ -59,6 +84,28 @@ function contented_EnableDrop(element, baseURL, onUploaded) {
                     'max-height':   $element.height() + "px"
                 });
         
+                $f.find('.contented').on('dragover dragenter', function(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    $(this).addClass('is-dragging');
+                });
+
+                $f.find('.contented').on('dragleave dragend', function(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    $(this).removeClass('is-dragging');
+                });
+
+                $f.find('.contented').on('drag', function(e) {
+                    input.files = event.originalEvent.dataTransfer.files;
+                    refreshCaption();
+                    setType("progress");
+
+                    // Ajax uploader
+                    // TODO
+                    form.submit();
+                });
+
                 $("body").append($f);
 
             });
@@ -67,9 +114,10 @@ function contented_EnableDrop(element, baseURL, onUploaded) {
         });
 
         
-}
+    }
 
-var onLoad = function() {
+    /*
+    var onLoad = function() {
         var form  = document.getElementById("form");
         var input = document.getElementById("form-upload");
         var label = document.getElementById("form-label");
@@ -88,37 +136,18 @@ var onLoad = function() {
             form.classList.remove("supports-drag");
         });
 
-	if (contented_SupportsDrop()) {
-		
-		// Handle CSS
-		
-		form.classList.add('supports-drag');
-	
-		var handleDragState = function(event_name, classEnabled) {
-			form.addEventListener(event_name, function(e) {
-				e.preventDefault();
-				e.stopPropagation();
-				if (classEnabled) {
-					form.classList.add( 'is-dragover' );
-				} else {
-					form.classList.remove( 'is-dragover' );
-				}
-			});
-		}
-		
-		handleDragState('dragover',  true);
-		handleDragState('dragenter', true);
-		handleDragState('dragleave', false);
-		handleDragState('dragend',   false);
-		handleDragState('drop',      false);
-		
         // Handle uploads
         
         form.addEventListener('drop', function(e) {
-			input.files = e.dataTransfer.files; // the files that were dropped
-			refreshCaption();
-			form.submit();
-		});
-	}
             
-};
+        });
+            
+    };
+    */
+
+    return {
+        'supportsDrop': contented_SupportsDrop,
+        'enableDrop': contented_EnableDrop
+    };
+
+})(jQuery);

static/widget.html

@@ -13,6 +13,12 @@
 
     position:relative;
 }
+.contented .contented-close {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    cursor: pointer;
+}
 .contented .contented-upload-type-selector {
     display:block;
     margin-bottom: 1em;
@@ -38,23 +44,62 @@
 .contented.is-dragging {
     background: lightblue;
 }
+.contented-content-area {
+    position:absolute;
+    top: 60px;
+    bottom: 10px;
+    left: 10px;
+    width: calc(100% - 20px);
+
+    /* Prevent blur under translateY */
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+}
+.contented-content-area > div {
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+}
 .contented-upload-if {
     display:none;
 }
+.contented-if-paste {
+    height:100%;
+}
 .contented-upload-if.contented-active {
     display:block;
 }
 .contented textarea {
-    position:absolute;
-    top: 60px;
-    bottom: 10px;
-    left: 10px;
-    width: calc(100% - 28px);
     resize: none;
+    width:100%;
+    height:100%;
+    padding: 0;
+    box-sizing:border-box;
+}
+.contented-progress-bar {
+    display: block;
+    width:90%;
+    height:16px;
+    border-radius:4px;
+    background:lightgrey;
+    position:relative;
+}
+.contented-progress-element {
+    position:absolute;
+    background:darkgreen;
+    left:0;
+    width:0%;
 }
 </style>
 <div class="contented">
 
+    <div class="contented-close">
+        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
+            <path fill="#000000" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
+        </svg>
+    </div>
+
     <div class="contented-upload-type-selector">
 
         <div class="contented-upload-type contented-upload-type-active" data-upload-type="drag" title="Drag and drop">
@@ -76,6 +121,7 @@
         </div>
     </div>
     
+    <div class="contented-content-area">
         <div class="contented-upload-if contented-if-drag contented-active">
             <label>Drop files to upload <span class="contented-extratext"></span></label>
         </div>
@@ -88,4 +134,10 @@
         <div class="contented-upload-if contented-if-paste">
             <textarea name="paste-content"></textarea>
         </div>
+
+        <div class="contented-upload-if contented-if-progress">
+            <label>...</label>
+            <div class="contented-progress-bar"><div class="contented-progress-element"></div></div>
+        </div>
+    </div>
 </div>