-

Test it out

-
-
-
-
-
-

Dominant Color

-
-
-
-

Palette

-
-
-
+ +

Examples

@@ -64,7 +56,7 @@ {{#images}}
- +
diff --git a/index.js b/index.js index 3ac0708..74705c8 100644 --- 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" )); + } + } +}; diff --git a/sass/app.sass b/sass/app.sass index ddbd8c6..8a802bc 100644 --- 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