From bdbaf8c5d0a5c2e827a4e69eb86b44598ac4ccc2 Mon Sep 17 00:00:00 2001
From: Nathan Spady <nspady@gmail.com>
Date: Fri, 21 Dec 2012 13:47:34 -0600
Subject: [PATCH] Basic drag and drop functionality added.

---
 css/app.css              | 142 ++++++++++++++++++---------------------
 img/drag_placeholder.png | Bin 0 -> 3429 bytes
 index.html               |  20 +++++-
 index.js                 | 107 ++++++++++++++++++++++-------
 sass/app.sass            |   6 ++
 5 files changed, 175 insertions(+), 100 deletions(-)
 create mode 100644 img/drag_placeholder.png

diff --git a/css/app.css b/css/app.css
index 0b6b76d..33eb1f8 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1,4 +1,4 @@
-/* line 17, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 17, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -15,50 +15,50 @@ time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
-  font-size: 100%;
   font: inherit;
+  font-size: 100%;
   vertical-align: baseline;
 }
 
-/* line 20, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
-body {
+/* line 22, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+html {
   line-height: 1;
 }
 
-/* line 22, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none;
 }
 
-/* line 24, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 
-/* line 26, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle;
 }
 
-/* line 28, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none;
 }
-/* line 101, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 103, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 q:before, q:after, blockquote:before, blockquote:after {
   content: "";
   content: none;
 }
 
-/* line 30, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none;
 }
 
-/* line 114, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
   display: block;
 }
@@ -95,7 +95,6 @@ h1 small {
 h1 span {
   -webkit-transition: color 1s;
   -moz-transition: color 1s;
-  -ms-transition: color 1s;
   -o-transition: color 1s;
   transition: color 1s;
 }
@@ -103,97 +102,96 @@ h1 span {
 h1:hover .char1 {
   -webkit-transition: color 0.2s;
   -moz-transition: color 0.2s;
-  -ms-transition: color 0.2s;
   -o-transition: color 0.2s;
   transition: color 0.2s;
   color: red;
 }
 /* line 31, ../sass/app.sass */
 h1:hover .char2 {
-  -webkit-transition: color 0.2s 0.1s;
+  -webkit-transition: color 0.2s;
+  -webkit-transition-delay: 0.1s;
   -moz-transition: color 0.2s 0.1s;
-  -ms-transition: color 0.2s 0.1s;
   -o-transition: color 0.2s 0.1s;
   transition: color 0.2s 0.1s;
   color: orange;
 }
 /* line 34, ../sass/app.sass */
 h1:hover .char3 {
-  -webkit-transition: color 0.2s 0.2s;
+  -webkit-transition: color 0.2s;
+  -webkit-transition-delay: 0.2s;
   -moz-transition: color 0.2s 0.2s;
-  -ms-transition: color 0.2s 0.2s;
   -o-transition: color 0.2s 0.2s;
   transition: color 0.2s 0.2s;
   color: yellow;
 }
 /* line 37, ../sass/app.sass */
 h1:hover .char4 {
-  -webkit-transition: color 0.2s 0.3s;
+  -webkit-transition: color 0.2s;
+  -webkit-transition-delay: 0.3s;
   -moz-transition: color 0.2s 0.3s;
-  -ms-transition: color 0.2s 0.3s;
   -o-transition: color 0.2s 0.3s;
   transition: color 0.2s 0.3s;
   color: green;
 }
 /* line 40, ../sass/app.sass */
 h1:hover .char5 {
-  -webkit-transition: color 0.2s 0.4s;
+  -webkit-transition: color 0.2s;
+  -webkit-transition-delay: 0.4s;
   -moz-transition: color 0.2s 0.4s;
-  -ms-transition: color 0.2s 0.4s;
   -o-transition: color 0.2s 0.4s;
   transition: color 0.2s 0.4s;
   color: blue;
 }
 /* line 43, ../sass/app.sass */
 h1:hover .char6 {
-  -webkit-transition: color 0.2s 0.5s;
+  -webkit-transition: color 0.2s;
+  -webkit-transition-delay: 0.5s;
   -moz-transition: color 0.2s 0.5s;
-  -ms-transition: color 0.2s 0.5s;
   -o-transition: color 0.2s 0.5s;
   transition: color 0.2s 0.5s;
   color: indigo;
 }
 /* line 46, ../sass/app.sass */
 h1:hover .char7 {
-  -webkit-transition: color 0.2s 0.6s;
+  -webkit-transition: color 0.2s;
+  -webkit-transition-delay: 0.6s;
   -moz-transition: color 0.2s 0.6s;
-  -ms-transition: color 0.2s 0.6s;
   -o-transition: color 0.2s 0.6s;
   transition: color 0.2s 0.6s;
   color: violet;
 }
 /* line 49, ../sass/app.sass */
 h1:hover .char8 {
-  -webkit-transition: color 0.2s 0.7s;
+  -webkit-transition: color 0.2s;
+  -webkit-transition-delay: 0.7s;
   -moz-transition: color 0.2s 0.7s;
-  -ms-transition: color 0.2s 0.7s;
   -o-transition: color 0.2s 0.7s;
   transition: color 0.2s 0.7s;
   color: red;
 }
 /* line 52, ../sass/app.sass */
 h1:hover .char9 {
-  -webkit-transition: color 0.2s 0.8s;
+  -webkit-transition: color 0.2s;
+  -webkit-transition-delay: 0.8s;
   -moz-transition: color 0.2s 0.8s;
-  -ms-transition: color 0.2s 0.8s;
   -o-transition: color 0.2s 0.8s;
   transition: color 0.2s 0.8s;
   color: orange;
 }
 /* line 55, ../sass/app.sass */
 h1:hover .char10 {
-  -webkit-transition: color 0.2s 0.9s;
+  -webkit-transition: color 0.2s;
+  -webkit-transition-delay: 0.9s;
   -moz-transition: color 0.2s 0.9s;
-  -ms-transition: color 0.2s 0.9s;
   -o-transition: color 0.2s 0.9s;
   transition: color 0.2s 0.9s;
   color: yellow;
 }
 /* line 58, ../sass/app.sass */
 h1:hover .char11 {
-  -webkit-transition: color 0.2s 1s;
+  -webkit-transition: color 0.2s;
+  -webkit-transition-delay: 1s;
   -moz-transition: color 0.2s 1s;
-  -ms-transition: color 0.2s 1s;
   -o-transition: color 0.2s 1s;
   transition: color 0.2s 1s;
   color: green;
@@ -229,8 +227,20 @@ strong {
   font-weight: bold;
 }
 
-/* Forms */
+/* Drag and Drop area */
+/* line 84, ../sass/app.sass */
+#dropZone {
+  background: url("../img/drag_placeholder.png");
+}
 /* line 86, ../sass/app.sass */
+#dropZone.dragging {
+  -webkit-box-shadow: inset 0 1px 10px #09a1ec;
+  -moz-box-shadow: inset 0 1px 10px #09a1ec;
+  box-shadow: inset 0 1px 10px #09a1ec;
+}
+
+/* Forms */
+/* line 93, ../sass/app.sass */
 input[type=text], input[type=password] {
   background: #fafafa;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
@@ -245,7 +255,7 @@ input[type=text], input[type=password] {
   border-radius: 4px;
 }
 
-/* line 93, ../sass/app.sass */
+/* line 100, ../sass/app.sass */
 textarea {
   background: #fafafa;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
@@ -260,44 +270,44 @@ textarea {
   border-radius: 4px;
 }
 
-/* line 100, ../sass/app.sass */
+/* line 107, ../sass/app.sass */
 input[type=text]:focus {
   color: #373737;
 }
 
-/* line 103, ../sass/app.sass */
+/* line 110, ../sass/app.sass */
 textarea {
   padding-left: 3px;
   width: 98%;
 }
-/* line 104, ../sass/app.sass */
+/* line 111, ../sass/app.sass */
 textarea:focus {
   color: #373737;
 }
 
-/* line 109, ../sass/app.sass */
+/* line 116, ../sass/app.sass */
 input[type=text] {
   padding: 3px;
 }
 
 /* Links */
-/* line 114, ../sass/app.sass */
+/* line 121, ../sass/app.sass */
 a {
   color: #09a1ec;
   text-decoration: none;
 }
-/* line 117, ../sass/app.sass */
+/* line 124, ../sass/app.sass */
 a:hover {
   color: #7fd2fa;
 }
 
-/* line 120, ../sass/app.sass */
+/* line 127, ../sass/app.sass */
 #container {
   width: 900px;
   margin: 0 auto;
 }
 
-/* line 124, ../sass/app.sass */
+/* line 131, ../sass/app.sass */
 header {
   padding-bottom: 40px;
   text-align: center;
@@ -305,12 +315,12 @@ header {
   margin: 0 auto;
 }
 
-/* line 130, ../sass/app.sass */
+/* line 137, ../sass/app.sass */
 .medianCutPalette h3 {
   margin-top: 20px;
 }
 
-/* line 133, ../sass/app.sass */
+/* line 140, ../sass/app.sass */
 .imageSection {
   margin-bottom: 80px;
   background: #111111;
@@ -321,23 +331,19 @@ header {
   border-radius: 10px;
   *zoom: 1;
 }
-/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
+/* line 38, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
 .imageSection:after {
   content: "";
   display: table;
   clear: both;
 }
-/* line 138, ../sass/app.sass */
+/* line 145, ../sass/app.sass */
 .imageSection .imageWrap {
   -moz-border-radius-topleft: 10px;
   -webkit-border-top-left-radius: 10px;
-  -ms-border-top-left-radius: 10px;
-  -o-border-top-left-radius: 10px;
   border-top-left-radius: 10px;
   -moz-border-radius-bottomleft: 10px;
   -webkit-border-bottom-left-radius: 10px;
-  -ms-border-bottom-left-radius: 10px;
-  -o-border-bottom-left-radius: 10px;
   border-bottom-left-radius: 10px;
   width: 400px;
   height: 300px;
@@ -345,38 +351,34 @@ header {
   margin-right: 20px;
   background: url(../img/dark_checkered_bg.png);
 }
-/* line 145, ../sass/app.sass */
+/* line 152, ../sass/app.sass */
 .imageSection .imageWrap .targetImage {
   -moz-border-radius-topleft: 10px;
   -webkit-border-top-left-radius: 10px;
-  -ms-border-top-left-radius: 10px;
-  -o-border-top-left-radius: 10px;
   border-top-left-radius: 10px;
   -moz-border-radius-bottomleft: 10px;
   -webkit-border-bottom-left-radius: 10px;
-  -ms-border-bottom-left-radius: 10px;
-  -o-border-bottom-left-radius: 10px;
   border-bottom-left-radius: 10px;
 }
-/* line 147, ../sass/app.sass */
+/* line 154, ../sass/app.sass */
 .imageSection .colors {
   margin-top: 20px;
   width: 400px;
   float: left;
 }
-/* line 151, ../sass/app.sass */
+/* line 158, ../sass/app.sass */
 .imageSection .colors .function {
   clear: left;
   margin-bottom: 10px;
   *zoom: 1;
 }
-/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
+/* line 38, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
 .imageSection .colors .function:after {
   content: "";
   display: table;
   clear: both;
 }
-/* line 155, ../sass/app.sass */
+/* line 162, ../sass/app.sass */
 .imageSection .colors .function .swatches .swatch {
   width: 40px;
   height: 20px;
@@ -385,15 +387,13 @@ header {
   float: left;
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
-  -ms-transition: all 0.5s;
   -o-transition: all 0.5s;
   transition: all 0.5s;
 }
-/* line 162, ../sass/app.sass */
+/* line 169, ../sass/app.sass */
 .imageSection .colors .function .swatches .swatch:hover {
   -webkit-transition: none;
   -moz-transition: none;
-  -ms-transition: none;
   -o-transition: none;
   transition: none;
   -webkit-transform: scale(1.2, 1.2);
@@ -405,35 +405,27 @@ header {
   -moz-box-shadow: 0 1px 10px black;
   box-shadow: 0 1px 10px black;
 }
-/* line 166, ../sass/app.sass */
+/* line 173, ../sass/app.sass */
 .imageSection .colors .function .swatches .swatch:first-child {
   -moz-border-radius-topleft: 4px;
   -webkit-border-top-left-radius: 4px;
-  -ms-border-top-left-radius: 4px;
-  -o-border-top-left-radius: 4px;
   border-top-left-radius: 4px;
   -moz-border-radius-bottomleft: 4px;
   -webkit-border-bottom-left-radius: 4px;
-  -ms-border-bottom-left-radius: 4px;
-  -o-border-bottom-left-radius: 4px;
   border-bottom-left-radius: 4px;
 }
-/* line 168, ../sass/app.sass */
+/* line 175, ../sass/app.sass */
 .imageSection .colors .function .swatches .swatch:last-child {
   -moz-border-radius-topright: 4px;
   -webkit-border-top-right-radius: 4px;
-  -ms-border-top-right-radius: 4px;
-  -o-border-top-right-radius: 4px;
   border-top-right-radius: 4px;
   -moz-border-radius-bottomright: 4px;
   -webkit-border-bottom-right-radius: 4px;
-  -ms-border-bottom-right-radius: 4px;
-  -o-border-bottom-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
 
 /* Hardcoding the offset for the FB icon example */
-/* line 172, ../sass/app.sass */
+/* line 179, ../sass/app.sass */
 .fbIcon .imageWrap .targetImage {
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
@@ -445,7 +437,7 @@ header {
   left: 192px;
 }
 
-/* line 178, ../sass/app.sass */
+/* line 185, ../sass/app.sass */
 canvas {
   display: none;
 }
diff --git a/img/drag_placeholder.png b/img/drag_placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..dcb457e2fa928328071d9de129d2346b5d1afb45
GIT binary patch
literal 3429
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
SL~qrH582U$c*EhyvHt)|K+Vbk

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index bc053b1..23393e4 100755
--- a/index.html
+++ b/index.html
@@ -28,13 +28,29 @@
       </p>
 	</header>
 
-  <h2>Examples</h2>
 	<div id="main" role="main">
+    <h2>Test it out</h2>
+      <div class="imageSection">
+        <div id="dropZone" class="imageWrap">
+        </div>
+        <div class="colors">
+          <div class="function dominantColor">
+            <h3>Dominant Color</h3>
+            <div class="swatches"></div>
+          </div>
+          <div class="function medianCutPalette clearfix">
+            <h3>Palette</h3>
+            <div class="swatches"></div>
+          </div>
+        </div>
+      </div>
+
+    <h2>Examples</h2>
 
 	</div>
 </div> <!--! end of #container -->
 
-<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
+<script>window.jQuery || document.write('<script src="js/libs/jquery-1.8.3.min.js"><\/script>')</script>
 <script src="js/libs/jquery.lettering.js"></script>
 <script src="js/libs/mustache.js"></script>
 
diff --git a/index.js b/index.js
index 014c6d7..3ac0708 100644
--- a/index.js
+++ b/index.js
@@ -10,36 +10,97 @@ $(document).ready(function () {
         {"file": "icon1.png", "colorCount": "4", "class": "fbIcon"}
     ]};
 
+    // Setup the drag and drop behavior
+    var $dropZone = $('#dropZone');
+
+    var dragEnter = function( evt ){
+      evt.stopPropagation();
+      evt.preventDefault();
+      $dropZone.addClass('dragging');
+    };
+
+    var dragLeave = function( evt ){
+      evt.stopPropagation();
+      evt.preventDefault();
+      $dropZone.removeClass('dragging');
+    };
+
+    var dragOver = function( evt ){
+      evt.stopPropagation();
+      evt.preventDefault();
+    };
+
+    var drop = function( evt ){
+      evt.stopPropagation();
+      evt.preventDefault();
+      $dropZone.removeClass('dragging');
+      
+      var dt = evt.originalEvent.dataTransfer;
+      var files = dt.files;
+
+      handleFile( files );
+    };
+
+    var displayColors = function( image ) {
+      var $image = $(image);
+      var imageSection = $image.closest('.imageSection');
+      var appendColors = function (colors, root) {
+          $.each(colors, function (index, value) {
+              var swatchEl = $('<div>', {'class': 'swatch'})
+                  .css('background-color', 'rgba('+ value +', 1)');
+              root.append(swatchEl);
+          });
+      };
+
+      // Dominant Color
+      var dominantColor = getDominantColor(image);
+      var dominantSwatch = imageSection.find('.dominantColor .swatches');
+      appendColors([dominantColor], dominantSwatch);
+
+      // Palette
+      var colorCount = $image.attr('data-colorcount') ? $image.data('colorcount') : 10;
+      var medianPalette = createPalette(image, colorCount);
+      var medianCutPalette = imageSection.find('.medianCutPalette .swatches');
+      appendColors(medianPalette, medianCutPalette);
+    };
+
+    function handleFile(files) {
+      var file = files[0];
+      var imageType = /image.*/;
+
+      if (file.type.match(imageType)) {
+        var img = document.createElement("img");
+        img.classList.add("targetImage");
+        img.width = 400;
+        img.height = 300;
+        img.file = file;
+        $dropZone.append(img);
+         
+        var reader = new FileReader();
+        reader.onload = function(e){
+            img.src = e.target.result;
+            displayColors( img );
+          };
+        reader.readAsDataURL(file);
+      }
+    }
+
+    $dropZone
+      .on('dragenter', dragEnter)
+      .on('dragleave', dragLeave)
+      .on('dragover', dragOver)
+      .on('drop', drop);
+
     var html = Mustache.to_html($('#template').html(), imageArray);
     $('#main').append(html);
 
     // Use lettering.js to give letter by letter styling control for the h1 title
     $("h1").lettering();
 
-
     // For each image:
     // Once image is loaded, get dominant color and palette and display them.
     $('img').bind('load', function (event) {
-        var image = event.target;
-        var $image = $(image);
-        var imageSection = $image.closest('.imageSection');
-        var appendColors = function (colors, root) {
-            $.each(colors, function (index, value) {
-                var swatchEl = $('<div>', {'class': 'swatch'})
-                    .css('background-color', 'rgba('+ value +', 1)');
-                root.append(swatchEl);
-            });
-        };
-
-        // Dominant Color
-        var dominantColor = getDominantColor(image);
-        var dominantSwatch = imageSection.find('.dominantColor .swatches');
-        appendColors([dominantColor], dominantSwatch);
-
-        // Palette
-        var colorCount = $image.attr('data-colorcount') ? $image.data('colorcount') : 10;
-        var medianPalette = createPalette(image, colorCount);
-        var medianCutPalette = imageSection.find('.medianCutPalette .swatches');
-        appendColors(medianPalette, medianCutPalette);
+      var image = event.target;
+      displayColors( image );
     });
-});
\ No newline at end of file
+});
diff --git a/sass/app.sass b/sass/app.sass
index 45c762b..ddbd8c6 100644
--- a/sass/app.sass
+++ b/sass/app.sass
@@ -80,6 +80,12 @@ p
 strong
   font-weight: bold
   
+/* Drag and Drop area */
+#dropZone
+  background: url("../img/drag_placeholder.png")
+  &.dragging
+    +box-shadow(inset 0 1px 10px #09A1EC)
+    
   
 /* Forms */
 input