new(wip): ie testing, js and styles not working

Author: Cathy Siller

docs/components/files/drop-zone-demo.js

@@ -3,8 +3,9 @@ if (document.getElementById('vue-dropZoneDemo')) {
         el: '#vue-dropZoneDemo',
         methods: {
             onDrop: function (evt) {
+                console.log('@drop');
                 // Prevent default behavior (Prevent file from being opened)
-                evt.preventDefault();
+                //evt.preventDefault();
                 if (evt.dataTransfer.items) {
                     // Use DataTransferItemList interface to access the file(s)
                     for (var i = 0; i < evt.dataTransfer.items.length; i++) {
@@ -17,7 +18,7 @@ if (document.getElementById('vue-dropZoneDemo')) {
                 } else {
                 // Use DataTransfer interface to access the file(s)
                     for (var i = 0; i < evt.dataTransfer.files.length; i++) {
-                        //alert('file drop successful! ' + evt.dataTransfer.files[i].name);
+                        alert('file drop successful! ' + evt.dataTransfer.files[i].name);
                     }
                 }
             },

docs/components/files/index.html

@@ -15,6 +15,11 @@
   <section>
     <h2 id="drop-fence">Drop Fence</h2>
     <p class="hxSubBody">Added: v0.14.0</p>
+    <p>A visual container that provides a visual affordance of drag-and-drop capabilities.</p>
+    <p class="hxSubdued hxSubBody">
+      <hx-icon type="info-circle"></hx-icon>
+      Styles always removes padding.
+    </p>
     <div class="example">
       <div>
         <div class="hxFence">
@@ -51,34 +56,42 @@ <h2 id="drop-fence">Drop Fence</h2>
   <section>
     <h2 id="drop-zone">Drop Zone</h2>
     <p class="hxSubBody">Added: v0.14.0</p>
+    <p>A visual container that provides an overlay, marking the boundaries of where a user can drop a file.</p>
+    <p class="hxSubdued hxSubBody">
+      <hx-icon type="info-circle"></hx-icon>
+      Styles always removes padding.
+    </p>
     <div class="example" id="vue-dropZoneDemo">
       <div>
         <hx-drop-zone
           @drop.prevent="onDrop">
           <div class="hxFence">
             <hx-file-icon type="paperclip"></hx-file-icon>
-            Drop files here or
-            <hx-file-input
-              class="hxTertiary" 
-              label="browse your files">
-              <input type="file" />
-            </hx-file-input>
+            <p>
+              Drop files here or
+              <hx-file-input
+                class="hxTertiary" 
+                label="browse your files">
+                <input type="file" />
+              </hx-file-input>
+            </p>
           </div>
         </hx-drop-zone>
       </div>
 
       <footer>
         {% code 'text' %}
-          <hx-drop-zone
-            @drop.prevent="onDrop">
+          <hx-drop-zone>
             <div class="hxFence">
               <hx-file-icon type="paperclip"></hx-file-icon>
-              Drop files here or
-              <hx-file-input
-                class="hxTertiary" 
-                label="browse your files">
-                <input type="file" />
-              </hx-file-input>
+              <p>
+                Drop files here or
+                <hx-file-input
+                  class="hxTertiary" 
+                  label="browse your files">
+                  <input type="file" />
+                </hx-file-input>
+              </p>
             </div>
           </hx-drop-zone>
         {% endcode %}

docs/elements/hx-drop-zone/index.html

@@ -34,6 +34,7 @@
     <dd>
       <p>
         <i>(read-only)</i>
+        Determines if file is dragged on the document or area.
       </p>
     </dd>
 {% endblock %}

src/helix-ui/elements/HXDropZoneElement.js

@@ -35,19 +35,31 @@ export class HXDropZoneElement extends HXElement {
         return this.getAttribute('drag');
     }
 
-    /** @private */
+    /** 
+     * @private 
+     * @see https://goo.gl/zaoexR
+     */
     _isFileDrag (evt) {
-        return (evt.dataTransfer.types.indexOf('Files') !== -1);
+        if (evt.dataTransfer.types) {
+            if (evt.dataTransfer.types.indexOf) {
+                return (evt.dataTransfer.types.indexOf('Files') !== -1);
+            } else {
+                return evt.dataTransfer.types.contains('Files');
+            }
+        } else {
+            return false;
+        }
     }
 
     // #2 this gets called when the dragged item leaves the document (leaves to a child element or window altogether)
     /** @private */
     _onDocDragLeave () {
+        window.clearTimeout(this._docDragLeaveTimeout);
         // callback must be an arrow function to preserve "this"
         this._docDragLeaveTimeout = window.setTimeout(() => {
             this._isDragging = false;
             this.removeAttribute('drag');
-        }, 0);
+        }, 250);
     }
 
     // #1 this handler fires continuously as long as the user is dragging on the page
@@ -65,7 +77,8 @@ export class HXDropZoneElement extends HXElement {
     // #4 this gets called when the dragged item leaves the zone (leaves to a child element or zone altogether)
     /** @private */
     _onDragLeave (evt) {
-        evt.preventDefault();
+        //evt.preventDefault();
+        window.clearTimeout(this._zoneDragLeaveTimeout);
         // callback must be an arrow function to preserve "this"
         this._zoneDragLeaveTimeout = window.setTimeout(() => {
             this._isZoneDragging = false;
@@ -76,19 +89,20 @@ export class HXDropZoneElement extends HXElement {
     // #3 this handler fires continuously as long as the user is dragging on the zone
     /** @private */
     _onDragOver (evt) {
+        // needed for onDrop to work
         evt.preventDefault();
         if (!this._isZoneDragging) {
             this._isZoneDragging = true;
             if (this._isFileDrag(evt)) {
                 this.setAttribute('drag', 'over');
             }
         }
+        window.clearTimeout(this._docDragLeaveTimeout);
         window.clearTimeout(this._zoneDragLeaveTimeout);
     }
 
     /** @private */
     _onDrop (evt) {
-        //evt.preventDefault();
         this.removeAttribute('drag');
         this._isDragging = false;
         this._isZoneDragging = false;

src/helix-ui/styles/elements/hx-drop-zone.less

@@ -2,6 +2,7 @@
 
 hx-drop-zone {
   display: block;
+  min-height: 0; // because IE
   position: relative;
 
   &::after {