', {'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 = $('
', {'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