From dfb37a3f9b49cea4cdd35ce9b516a43bfd158cb4 Mon Sep 17 00:00:00 2001
From: beefchimi <curtdulmage@gmail.com>
Date: Wed, 28 Mar 2018 22:44:33 -0400
Subject: [PATCH] update Examples for latest Droppable API changes

---
 examples/src/components/Block/variants.scss      |  2 +-
 .../Droppable/UniqueDropzone/UniqueDropzone.html | 16 ++++++++--------
 .../Droppable/UniqueDropzone/UniqueDropzone.scss |  4 ++--
 .../content/Droppable/UniqueDropzone/index.js    |  8 ++++----
 .../content/Plugins/Collidable/Collidable.html   |  4 ++--
 examples/src/content/Plugins/Collidable/index.js |  2 +-
 6 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/examples/src/components/Block/variants.scss b/examples/src/components/Block/variants.scss
index 2c440e6..db8d223 100644
--- a/examples/src/components/Block/variants.scss
+++ b/examples/src/components/Block/variants.scss
@@ -149,7 +149,7 @@
 .BlockWrapper {
   position: relative;
 
-  &.draggable-droppable--occupied {
+  &.draggable-dropzone--occupied {
     .Block--typeHollow,
     .Block--typeStripes {
       @include position-cover;
diff --git a/examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.html b/examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.html
index 4cae100..e8cf808 100644
--- a/examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.html
+++ b/examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.html
@@ -3,35 +3,35 @@
 {% macro render(id) %}
   <section id="{{ id }}" class="{{ id }}">
     <article class="BlockLayout BlockLayout--typeFlex">
-      <div class="BlockWrapper BlockWrapper--isDroppable draggable-droppable--occupied" data-droppable="1">
+      <div class="BlockWrapper BlockWrapper--isDropzone draggable-dropzone--occupied" data-dropzone="1">
         {{ Block.render('one', {type: 'Hollow'}) }}
         {{ Block.render('one', {index: 1, draggable: true}) }}
       </div>
-      <div class="BlockWrapper BlockWrapper--isDroppable draggable-droppable--occupied" data-droppable="2">
+      <div class="BlockWrapper BlockWrapper--isDropzone draggable-dropzone--occupied" data-dropzone="2">
         {{ Block.render('two', {type: 'Hollow'}) }}
         {{ Block.render('two', {index: 2, draggable: true}) }}
       </div>
-      <div class="BlockWrapper BlockWrapper--isDroppable draggable-droppable--occupied" data-droppable="4">
+      <div class="BlockWrapper BlockWrapper--isDropzone draggable-dropzone--occupied" data-dropzone="4">
         {{ Block.render('four', {type: 'Hollow'}) }}
         {{ Block.render('four', {index: 4, draggable: true}) }}
       </div>
-      <div class="BlockWrapper BlockWrapper--isDroppable draggable-droppable--occupied" data-droppable="8">
+      <div class="BlockWrapper BlockWrapper--isDropzone draggable-dropzone--occupied" data-dropzone="8">
         {{ Block.render('eight', {type: 'Hollow'}) }}
         {{ Block.render('eight', {index: 8, draggable: true}) }}
       </div>
     </article>
 
     <article class="BlockLayout BlockLayout--typeGrid">
-      <div class="BlockWrapper BlockWrapper--isDroppable" data-droppable="1">
+      <div class="BlockWrapper BlockWrapper--isDropzone" data-dropzone="1">
         {{ Block.render('', {type: 'Stripes'}) }}
       </div>
-      <div class="BlockWrapper BlockWrapper--isDroppable" data-droppable="2">
+      <div class="BlockWrapper BlockWrapper--isDropzone" data-dropzone="2">
         {{ Block.render('', {type: 'Stripes'}) }}
       </div>
       <div class="BlockWrapper">
         {{ Block.render('three', {index: 3, type: 'Shell'}) }}
       </div>
-      <div class="BlockWrapper BlockWrapper--isDroppable" data-droppable="4">
+      <div class="BlockWrapper BlockWrapper--isDropzone" data-dropzone="4">
         {{ Block.render('', {type: 'Stripes'}) }}
       </div>
       <div class="BlockWrapper">
@@ -43,7 +43,7 @@
       <div class="BlockWrapper">
         {{ Block.render('seven', {index: 7, type: 'Shell'}) }}
       </div>
-      <div class="BlockWrapper BlockWrapper--isDroppable" data-droppable="8">
+      <div class="BlockWrapper BlockWrapper--isDropzone" data-dropzone="8">
         {{ Block.render('', {type: 'Stripes'}) }}
       </div>
     </article>
diff --git a/examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.scss b/examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.scss
index e523833..658ea34 100644
--- a/examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.scss
+++ b/examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.scss
@@ -57,7 +57,7 @@ $grid-columns: 4;
       border-width: get-border();
     }
 
-    .BlockWrapper--isDroppable {
+    .BlockWrapper--isDropzone {
       &::before {
         content: '';
         position: absolute;
@@ -80,7 +80,7 @@ $grid-columns: 4;
       }
 
       // not focusable, but, whatever... this was hard to solve
-      &.draggable-droppable--occupied:hover {
+      &.draggable-dropzone--occupied:hover {
         &::before {
           opacity: 1;
         }
diff --git a/examples/src/content/Droppable/UniqueDropzone/index.js b/examples/src/content/Droppable/UniqueDropzone/index.js
index cd9fbd4..8a2c7e9 100644
--- a/examples/src/content/Droppable/UniqueDropzone/index.js
+++ b/examples/src/content/Droppable/UniqueDropzone/index.js
@@ -11,7 +11,7 @@ export default function UniqueDropzone() {
 
   const droppable = new Droppable(containers, {
     draggable: '.Block--isDraggable',
-    droppable: '.BlockWrapper--isDroppable',
+    dropzone: '.BlockWrapper--isDropzone',
     mirror: {
       constrainDimensions: true,
     },
@@ -21,11 +21,11 @@ export default function UniqueDropzone() {
 
   // --- Draggable events --- //
   droppable.on('drag:start', (evt) => {
-    droppableOrigin = evt.originalSource.parentNode.dataset.droppable;
+    droppableOrigin = evt.originalSource.parentNode.dataset.dropzone;
   });
 
-  droppable.on('droppable:over', (evt) => {
-    if (droppableOrigin !== evt.droppable.dataset.droppable) {
+  droppable.on('droppable:dropped', (evt) => {
+    if (droppableOrigin !== evt.dropzone.dataset.dropzone) {
       evt.cancel();
     }
   });
diff --git a/examples/src/content/Plugins/Collidable/Collidable.html b/examples/src/content/Plugins/Collidable/Collidable.html
index c2981f1..0010cbd 100644
--- a/examples/src/content/Plugins/Collidable/Collidable.html
+++ b/examples/src/content/Plugins/Collidable/Collidable.html
@@ -3,7 +3,7 @@
 {% macro render(id) %}
   <section id="{{ id }}" class="{{ id }}">
     <article class="BlockLayout BlockLayout--typePositioned">
-      <div class="BlockWrapper BlockWrapper--isDroppable draggable-droppable--occupied">
+      <div class="BlockWrapper BlockWrapper--isDropzone draggable-dropzone--occupied">
         {{ Block.render('drop', {type: 'Hollow'}) }}
         {{ Block.render('drag', {index: 1, draggable: true}) }}
       </div>
@@ -11,7 +11,7 @@
       {{ Block.render('', {index: 2, type: 'Stripes', classes: ['CollidableObstacle']}) }}
       {{ Block.render('', {index: 3, type: 'Stripes', classes: ['CollidableObstacle']}) }}
 
-      <div class="BlockWrapper BlockWrapper--isDroppable">
+      <div class="BlockWrapper BlockWrapper--isDropzone">
         {{ Block.render('drop', {index: 4, type: 'Hollow'}) }}
       </div>
 
diff --git a/examples/src/content/Plugins/Collidable/index.js b/examples/src/content/Plugins/Collidable/index.js
index 4c11a22..74c30fe 100644
--- a/examples/src/content/Plugins/Collidable/index.js
+++ b/examples/src/content/Plugins/Collidable/index.js
@@ -14,7 +14,7 @@ export default function PluginsCollidable() {
 
   const droppable = new Droppable(containers, {
     draggable: '.Block--isDraggable',
-    droppable: '.BlockWrapper--isDroppable',
+    dropzone: '.BlockWrapper--isDropzone',
     collidables: '.CollidableObstacle',
     appendTo: containerSelector,
     mirror: {