Added support for multiple drag/drop images, as well as successive images.

2025-11-25 05:44:24 +00:00 · 2012-12-22 17:50:42 -06:00
parent bdbaf8c5d0
commit 1dd3764fd2
5 changed files with 131 additions and 103 deletions
--- a/css/app.css
+++ b/css/app.css
@@ -229,18 +229,26 @@ strong {

 /* Drag and Drop area */
 /* line 84, ../sass/app.sass */
-#dropZone {
+.dropZone {
+  width: 900px;
+  height: 200px;
+  margin-bottom: 60px;
  background: url("../img/drag_placeholder.png");
 }
-/* line 86, ../sass/app.sass */
-#dropZone.dragging {
+/* line 89, ../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;
 }

+/* line 91, ../sass/app.sass */
+.droppedImage {
+  display: none;
+}
+
 /* Forms */
-/* line 93, ../sass/app.sass */
+/* line 99, ../sass/app.sass */
 input[type=text], input[type=password] {
  background: #fafafa;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
@@ -255,7 +263,7 @@ input[type=text], input[type=password] {
  border-radius: 4px;
 }

-/* line 100, ../sass/app.sass */
+/* line 106, ../sass/app.sass */
 textarea {
  background: #fafafa;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
@@ -270,44 +278,44 @@ textarea {
  border-radius: 4px;
 }

-/* line 107, ../sass/app.sass */
+/* line 113, ../sass/app.sass */
 input[type=text]:focus {
  color: #373737;
 }

-/* line 110, ../sass/app.sass */
+/* line 116, ../sass/app.sass */
 textarea {
  padding-left: 3px;
  width: 98%;
 }
-/* line 111, ../sass/app.sass */
+/* line 117, ../sass/app.sass */
 textarea:focus {
  color: #373737;
 }

-/* line 116, ../sass/app.sass */
+/* line 122, ../sass/app.sass */
 input[type=text] {
  padding: 3px;
 }

 /* Links */
-/* line 121, ../sass/app.sass */
+/* line 127, ../sass/app.sass */
 a {
  color: #09a1ec;
  text-decoration: none;
 }
-/* line 124, ../sass/app.sass */
+/* line 130, ../sass/app.sass */
 a:hover {
  color: #7fd2fa;
 }

-/* line 127, ../sass/app.sass */
+/* line 133, ../sass/app.sass */
 #container {
  width: 900px;
  margin: 0 auto;
 }

-/* line 131, ../sass/app.sass */
+/* line 137, ../sass/app.sass */
 header {
  padding-bottom: 40px;
  text-align: center;
@@ -315,12 +323,12 @@ header {
  margin: 0 auto;
 }

-/* line 137, ../sass/app.sass */
+/* line 143, ../sass/app.sass */
 .medianCutPalette h3 {
  margin-top: 20px;
 }

-/* line 140, ../sass/app.sass */
+/* line 146, ../sass/app.sass */
 .imageSection {
  margin-bottom: 80px;
  background: #111111;
@@ -337,7 +345,7 @@ header {
  display: table;
  clear: both;
 }
-/* line 145, ../sass/app.sass */
+/* line 151, ../sass/app.sass */
 .imageSection .imageWrap {
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
@@ -350,23 +358,15 @@ header {
  float: left;
  margin-right: 20px;
  background: url(../img/dark_checkered_bg.png);
+  overflow: hidden;
 }
-/* line 152, ../sass/app.sass */
-.imageSection .imageWrap .targetImage {
-  -moz-border-radius-topleft: 10px;
-  -webkit-border-top-left-radius: 10px;
-  border-top-left-radius: 10px;
-  -moz-border-radius-bottomleft: 10px;
-  -webkit-border-bottom-left-radius: 10px;
-  border-bottom-left-radius: 10px;
-}
-/* line 154, ../sass/app.sass */
+/* line 160, ../sass/app.sass */
 .imageSection .colors {
  margin-top: 20px;
  width: 400px;
  float: left;
 }
-/* line 158, ../sass/app.sass */
+/* line 164, ../sass/app.sass */
 .imageSection .colors .function {
  clear: left;
  margin-bottom: 10px;
@@ -378,7 +378,7 @@ header {
  display: table;
  clear: both;
 }
-/* line 162, ../sass/app.sass */
+/* line 168, ../sass/app.sass */
 .imageSection .colors .function .swatches .swatch {
  width: 40px;
  height: 20px;
@@ -390,7 +390,7 @@ header {
  -o-transition: all 0.5s;
  transition: all 0.5s;
 }
-/* line 169, ../sass/app.sass */
+/* line 175, ../sass/app.sass */
 .imageSection .colors .function .swatches .swatch:hover {
  -webkit-transition: none;
  -moz-transition: none;
@@ -405,7 +405,7 @@ header {
  -moz-box-shadow: 0 1px 10px black;
  box-shadow: 0 1px 10px black;
 }
-/* line 173, ../sass/app.sass */
+/* line 179, ../sass/app.sass */
 .imageSection .colors .function .swatches .swatch:first-child {
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
@@ -414,7 +414,7 @@ header {
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
 }
-/* line 175, ../sass/app.sass */
+/* line 181, ../sass/app.sass */
 .imageSection .colors .function .swatches .swatch:last-child {
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
@@ -425,7 +425,7 @@ header {
 }

 /* Hardcoding the offset for the FB icon example */
-/* line 179, ../sass/app.sass */
+/* line 185, ../sass/app.sass */
 .fbIcon .imageWrap .targetImage {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
@@ -437,7 +437,7 @@ header {
  left: 192px;
 }

-/* line 185, ../sass/app.sass */
+/* line 191, ../sass/app.sass */
 canvas {
  display: none;
 }
--- a/img/drag_placeholder.png
+++ b/img/drag_placeholder.png
--- a/index.html
+++ b/index.html
@@ -29,22 +29,14 @@
 	</header>

 	<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 id='dragDrop' style='display: none'>
+      <h2>Test it out</h2>
+      <div id="dropZone" class="dropZone">
      </div>

+      <div id="draggedImages"></div>
+    </div>
+
    <h2>Examples</h2>

 	</div>
@@ -64,7 +56,7 @@
  {{#images}}
  <div class="imageSection {{class}} ">
    <div class="imageWrap">
-      <img class="targetImage" src="img/{{file}}" data-colorcount="{{colorCount}}" />
+      <img class="targetImage" src="{{file}}" data-colorcount="{{colorCount}}" />
    </div>
    <div class="colors">
      <div class="function dominantColor">
--- a/index.js
+++ b/index.js
@@ -3,43 +3,53 @@ $(document).ready(function () {
    // Use mustache.js templating to create layout

    var imageArray = { images: [
-        {"file": "3.jpg"},
-        {"file": "4.jpg"},
-        {"file": "5.jpg"},
-        {"file": "logo1.png"},
-        {"file": "icon1.png", "colorCount": "4", "class": "fbIcon"}
+        {"file": "img/3.jpg"},
+        {"file": "img/4.jpg"},
+        {"file": "img/5.jpg"},
+        {"file": "img/logo1.png"},
+        {"file": "img/icon1.png", "colorCount": "4", "class": "fbIcon"}
    ]};

-    // Setup the drag and drop behavior
-    var $dropZone = $('#dropZone');
+    // Setup the drag and drop behavior if supported
+    if (typeof window.FileReader === 'function') {
+      $('#dragDrop').show();

-    var dragEnter = function( evt ){
-      evt.stopPropagation();
-      evt.preventDefault();
-      $dropZone.addClass('dragging');
-    };
+      var $dropZone = $('#dropZone');

-    var dragLeave = function( evt ){
-      evt.stopPropagation();
-      evt.preventDefault();
-      $dropZone.removeClass('dragging');
-    };
+      var dragEnter = function( evt ){
+        evt.stopPropagation();
+        evt.preventDefault();
+        $dropZone.addClass('dragging');
+      };

-    var dragOver = function( evt ){
-      evt.stopPropagation();
-      evt.preventDefault();
-    };
+      var dragLeave = function( evt ){
+        evt.stopPropagation();
+        evt.preventDefault();
+        $dropZone.removeClass('dragging');
+      };

-    var drop = function( evt ){
-      evt.stopPropagation();
-      evt.preventDefault();
-      $dropZone.removeClass('dragging');
-      
-      var dt = evt.originalEvent.dataTransfer;
-      var files = dt.files;
+      var dragOver = function( evt ){
+        evt.stopPropagation();
+        evt.preventDefault();
+      };

-      handleFile( files );
-    };
+      var drop = function( evt ){
+        evt.stopPropagation();
+        evt.preventDefault();
+        $dropZone.removeClass('dragging');
+        
+        var dt = evt.originalEvent.dataTransfer;
+        var files = dt.files;
+
+        handleFiles( files );
+      };
+
+      $dropZone
+        .on('dragenter', dragEnter)
+        .on('dragleave', dragLeave)
+        .on('dragover', dragOver)
+        .on('drop', drop);
+    }

    var displayColors = function( image ) {
      var $image = $(image);
@@ -64,33 +74,36 @@ $(document).ready(function () {
      appendColors(medianPalette, medianCutPalette);
    };

-    function handleFile(files) {
-      var file = files[0];
+    function handleFiles( files ) {
      var imageType = /image.*/;
+      var fileCount = files.length;

-      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);
+      for (var i = 0; i < fileCount; i++) {
+        var file = files[i];
+
+        if ( file.type.match(imageType) ) {
+          var reader = new FileReader();
+          reader.onload = function( e ) {
+              imageInfo = { images: [
+                  {'class': 'droppedImage', file: e.target.result}
+                ]};
+
+              var html = Mustache.to_html($('#template').html(), imageInfo);
+              $('#draggedImages').prepend( html );
+
+              var img = $('.droppedImage .targetImage').get(0);
+              displayColors( img );
+              util.centerImg( img, 400, 300);
+
+              $('.droppedImage').slideDown();
+            };
+          reader.readAsDataURL(file);
+        } else {
+          alert('File must be a supported image type.');
+        }
      }
    }

-    $dropZone
-      .on('dragenter', dragEnter)
-      .on('dragleave', dragLeave)
-      .on('dragover', dragOver)
-      .on('drop', drop);
-
    var html = Mustache.to_html($('#template').html(), imageArray);
    $('#main').append(html);

@@ -104,3 +117,20 @@ $(document).ready(function () {
      displayColors( image );
    });
 });
+
+var util = {
+  centerImg: function( img, containerWidth, containerHeight) {
+      var $img = $(img);
+      var imgHeight = $img.get(0).height;
+      var imgWidth = $img.get(0).width;
+
+      if ( imgHeight < containerHeight ) {
+        var vOffset = ( containerHeight - imgHeight )/2;
+        $img.css('margin-top', ( hOffset + "px" ));
+      }
+      if ( imgWidth < containerWidth ) {
+        var hOffset = ( containerWidth - imgWidth )/2;
+        $img.css('margin-left', ( hOffset + "px" ));
+      }
+    }
+};
--- a/sass/app.sass
+++ b/sass/app.sass
@@ -81,10 +81,17 @@ strong
  font-weight: bold
  
 /* Drag and Drop area */
-#dropZone
+.dropZone
+  width: 900px
+  height: 200px
+  margin-bottom: 60px
  background: url("../img/drag_placeholder.png")
  &.dragging
    +box-shadow(inset 0 1px 10px #09A1EC)
+.droppedImage
+  display: none
+  .targetImage
+    // width: 100%
    
  
 /* Forms */
@@ -148,8 +155,7 @@ header
    float: left
    margin-right: 20px
    background: url(../img/dark_checkered_bg.png)
-    .targetImage
-      +border-left-radius(10px)
+    overflow: hidden
  .colors
    margin-top: 20px
    width: 400px