chore(wip): style changes and demo work

Author: Cathy Siller

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

@@ -0,0 +1,10 @@
+if (document.getElementById('vue-dropZoneDemo')) {
+    new Vue({
+        el: '#vue-dropZoneDemo',
+        methods: {
+            onDrop: function () {
+                alert('Unicorn pigeon puppy pop rainbows delight social pop!');
+            },
+        },
+    });
+}

docs/components/files/index.html

@@ -6,44 +6,78 @@
   components/files/test-file-selectors.html: Testing - File Selectors
   components/files/test-file-tiles.html: Testing - File Tiles
   components/Icons: Icons
+  elements/hx-drop-zone: <hx-drop-zone>
   elements/hx-file-input: <hx-file-input>
   elements/hx-file-tile: <hx-file-tile>
 ---
 {% extends 'component.njk' %}
 {% block content %}
   <section>
-    <h2 id="basic-drop-zone">Basic Drop Zone</h2>
+    <h2 id="drop-fence">Drop Fence</h2>
+    <p class="hxSubBody">Added: v0.14.0</p>
     <div class="example">
       <div>
-        <hx-drop-zone>
+        <div class="hxFence">
+          <hx-file-icon type="paperclip"></hx-file-icon>
+          Drop a file here or 
+          <hx-file-input
+            class="hxTertiary" 
+            label="browse your files">
+            <input type="file" />
+          </hx-file-input>
+        </div>
+      </div>
+
+      <footer>
+        {% code 'text' %}
           <div class="hxFence">
             <hx-file-icon type="paperclip"></hx-file-icon>
-            Drop any .png, .pdf, csv, or 
+            Drop a file here or 
             <hx-file-input
               class="hxTertiary" 
               label="browse your files">
               <input type="file" />
             </hx-file-input>
           </div>
-        </hx-drop-zone>
-      </div>
+        {% endcode %}
+      </footer>
     </div>
   </section>
 
   <section>
-    <h2 id="fenced-drop-zone">Fenced Drop Zone</h2>
-    <div class="example">
+    <h2 id="drop-zone">Drop Zone</h2>
+    <p class="hxSubBody">Added: v0.14.0</p>
+    <div class="example" id="vue-dropZoneDemo">
       <div>
-        <hx-drop-zone class="hxFence">
-          <hx-file-icon type="paperclip"></hx-file-icon>
-          Drop any .png, .pdf, csv, or 
-          <hx-file-input
-            class="hxTertiary" 
-            label="browse your files">
-            <input type="file" />
-          </hx-file-input>
+        <hx-drop-zone
+          @drop="onDrop">
+          <div class="hxFence">
+            <hx-file-icon type="paperclip"></hx-file-icon>
+            Drop a file here or
+            <hx-file-input
+              class="hxTertiary" 
+              label="browse your files">
+              <input type="file" />
+            </hx-file-input>
+          </div>
         </hx-drop-zone>
       </div>
+
+      <footer>
+        {% code 'text' %}
+          <hx-drop-zone>
+            <div class="hxFence">
+              <hx-file-icon type="paperclip"></hx-file-icon>
+              Drop a file here or
+              <hx-file-input
+                class="hxTertiary" 
+                label="browse your files">
+                <input type="file" />
+              </hx-file-input>
+            </div>
+          </hx-drop-zone>
+        {% endcode %}
+      </footer>
     </div>
   </section>
 

docs/components/files/test-drop-zone.html

@@ -3,10 +3,18 @@
 ---
 {% extends 'test.njk' %}
 {% block content %}
+  <section>
+    <nav class="hxBreadcrumb">
+      <a href="components/files">Files</a>
+      <hx-icon class="delimiter" type="angle-right"></hx-icon>
+      <a href="#">{{page.title}}</a>
+    </nav>
+  </section>
+
   <section>
     <h2>Invisible Drop Zone</h2>
     <hx-drop-zone>
-      Invisible Drop Zone
+      <p>Invisible Drop Zone</p>
     </hx-drop-zone>
   </section>
 
@@ -24,27 +32,6 @@ <h2>Visible Drop Zone (file over element)</h2>
     </hx-drop-zone>
   </section>
 
-  <section>
-    <h2>Fenced Drop Zone</h2>
-    <hx-drop-zone class="hxFence hxBox hxMd">
-      Invisible Drop Zone
-    </hx-drop-zone>
-  </section>  
-  
-  <section>
-    <h2>Visible Drop Zone (file not over element)</h2>
-    <hx-drop-zone class="hxFence hxBox hxMd" drag="away">
-      Visible Drop Zone (file not over element)
-    </hx-drop-zone>
-  </section>
-
-  <section>
-    <h2>Visible Drop Zone (file over element)</h2>
-    <hx-drop-zone class="hxFence hxBox hxMd" drag="over">
-      Visible Drop Zone (file over element)
-    </hx-drop-zone>
-  </section>
-
   <section>
     <h2>Drop Zone with Child Fence</h2>
     <hx-drop-zone>

docs/docs.js

@@ -8,6 +8,7 @@ import './components/box/box-demo';
 import './components/buttons/button-demo';
 import './components/checkboxes/checkbox-demo';
 import './components/choice-tiles/choice-tile-demo';
+import './components/files/drop-zone-demo';
 import './components/files/file-input-demo';
 import './components/files/file-tile-demo';
 import './components/icons/icon-demo';

src/helix-ui/elements/HXDropZoneElement.html

@@ -35,11 +35,13 @@ export class HXDropZoneElement extends HXElement {
         return this.getAttribute('drag');
     }
 
+    /** @private */
     _isFileDrag (evt) {
         return (evt.dataTransfer.types.indexOf('Files') !== -1);
     }
 
     // #2 this gets called when the dragged item leaves the document (leaves to a child element or window altogether)
+    /** @private */
     _onDocDragLeave () {
         // callback must be an arrow function to preserve "this"
         this._docDragLeaveTimeout = window.setTimeout(() => {
@@ -49,6 +51,7 @@ export class HXDropZoneElement extends HXElement {
     }
 
     // #1 this handler fires continuously as long as the user is dragging on the page
+    /** @private */
     _onDocDragOver (evt) {
         if (!this._isDragging) {
             this._isDragging = true;
@@ -60,6 +63,7 @@ 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();
         // callback must be an arrow function to preserve "this"
@@ -70,6 +74,7 @@ export class HXDropZoneElement extends HXElement {
     }
 
     // #3 this handler fires continuously as long as the user is dragging on the zone
+    /** @private */
     _onDragOver (evt) {
         evt.preventDefault();
         if (!this._isZoneDragging) {
@@ -81,10 +86,18 @@ export class HXDropZoneElement extends HXElement {
         window.clearTimeout(this._zoneDragLeaveTimeout);
     }
 
+    drop () {
+        if (this.$emit('drop')) {
+            this.remove();
+        }
+    }
+
+    /** @private */
     _onDrop (evt) {
-        evt.preventDefault();
+        //evt.preventDefault();
         this.removeAttribute('drag');
         this._isDragging = false;
         this._isZoneDragging = false;
+        this.drop();
     }
 }

src/helix-ui/elements/HXDropZoneElement.js

@@ -1,14 +1,9 @@
+@import (reference) 'components/box';
+
 hx-drop-zone {
   display: block;
   position: relative;
 
-  /*
-  // look into how we can do this, bowling?
-  hx-file-icon {
-    display: block;
-  }
-  */
-
   &::after {
     border: 4px dashed @cyan-500;
     content: '';
@@ -33,22 +28,18 @@ hx-drop-zone {
     }
   }
 
-  // move up?
   &:not(.hxFence) {
     padding: 0 !important;
   }
-
-  // if drop zone is ALSO a fence
-  &.hxFence {
-    &[drag]{
-      border-color: transparent;
-    }
-  }
 }
 
 .hxFence {
+  #Box.md();
   border: 1px dashed @gray-600;
   font-size: 0.875rem;
-  //min-height: 6.25rem; //100px
   text-align: center;
+
+  hx-file-icon {
+    display: block;
+  }
 }