janishutz/color-thief
1
0
Fork 0
mirror of https://github.com/janishutz/color-thief.git synced 2025-11-25 13:54:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nathan Spady
2012-12-22 17:50:42 -06:00
parent bdbaf8c5d0
commit 1dd3764fd2
5 changed files with 131 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
css/app.css
View File

@@ -229,18 +229,26 @@ strong {
/* Drag and Drop area */ /* Drag and Drop area */
/* line 84, ../sass/app.sass */ /* line 84, ../sass/app.sass */
#dropZone { .dropZone {
width: 900px;
height: 200px;
margin-bottom: 60px;
background: url("../img/drag_placeholder.png"); background: url("../img/drag_placeholder.png");
} }
/* line 86, ../sass/app.sass */ /* line 89, ../sass/app.sass */
#dropZone.dragging { .dropZone.dragging {
-webkit-box-shadow: inset 0 1px 10px #09a1ec; -webkit-box-shadow: inset 0 1px 10px #09a1ec;
-moz-box-shadow: inset 0 1px 10px #09a1ec; -moz-box-shadow: inset 0 1px 10px #09a1ec;
box-shadow: inset 0 1px 10px #09a1ec; box-shadow: inset 0 1px 10px #09a1ec;
} }
/* line 91, ../sass/app.sass */
.droppedImage {
display: none;
}
/* Forms */ /* Forms */
/* line 93, ../sass/app.sass */ /* line 99, ../sass/app.sass */
input[type=text], input[type=password] { input[type=text], input[type=password] {
background: #fafafa; background: #fafafa;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); -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; border-radius: 4px;
} }
/* line 100, ../sass/app.sass */ /* line 106, ../sass/app.sass */
textarea { textarea {
background: #fafafa; background: #fafafa;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
@@ -270,44 +278,44 @@ textarea {
border-radius: 4px; border-radius: 4px;
} }
/* line 107, ../sass/app.sass */ /* line 113, ../sass/app.sass */
input[type=text]:focus { input[type=text]:focus {
color: #373737; color: #373737;
} }
/* line 110, ../sass/app.sass */ /* line 116, ../sass/app.sass */
textarea { textarea {
padding-left: 3px; padding-left: 3px;
width: 98%; width: 98%;
} }
/* line 111, ../sass/app.sass */ /* line 117, ../sass/app.sass */
textarea:focus { textarea:focus {
color: #373737; color: #373737;
} }
/* line 116, ../sass/app.sass */ /* line 122, ../sass/app.sass */
input[type=text] { input[type=text] {
padding: 3px; padding: 3px;
} }
/* Links */ /* Links */
/* line 121, ../sass/app.sass */ /* line 127, ../sass/app.sass */
a { a {
color: #09a1ec; color: #09a1ec;
text-decoration: none; text-decoration: none;
} }
/* line 124, ../sass/app.sass */ /* line 130, ../sass/app.sass */
a:hover { a:hover {
color: #7fd2fa; color: #7fd2fa;
} }
/* line 127, ../sass/app.sass */ /* line 133, ../sass/app.sass */
#container { #container {
width: 900px; width: 900px;
margin: 0 auto; margin: 0 auto;
} }
/* line 131, ../sass/app.sass */ /* line 137, ../sass/app.sass */
header { header {
padding-bottom: 40px; padding-bottom: 40px;
text-align: center; text-align: center;
@@ -315,12 +323,12 @@ header {
margin: 0 auto; margin: 0 auto;
} }
/* line 137, ../sass/app.sass */ /* line 143, ../sass/app.sass */
.medianCutPalette h3 { .medianCutPalette h3 {
margin-top: 20px; margin-top: 20px;
} }
/* line 140, ../sass/app.sass */ /* line 146, ../sass/app.sass */
.imageSection { .imageSection {
margin-bottom: 80px; margin-bottom: 80px;
background: #111111; background: #111111;
@@ -337,7 +345,7 @@ header {
display: table; display: table;
clear: both; clear: both;
} }
/* line 145, ../sass/app.sass */ /* line 151, ../sass/app.sass */
.imageSection .imageWrap { .imageSection .imageWrap {
-moz-border-radius-topleft: 10px; -moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px; -webkit-border-top-left-radius: 10px;
@@ -350,23 +358,15 @@ header {
float: left; float: left;
margin-right: 20px; margin-right: 20px;
background: url(../img/dark_checkered_bg.png); background: url(../img/dark_checkered_bg.png);
overflow: hidden;
} }
/* line 152, ../sass/app.sass */ /* line 160, ../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 */
.imageSection .colors { .imageSection .colors {
margin-top: 20px; margin-top: 20px;
width: 400px; width: 400px;
float: left; float: left;
} }
/* line 158, ../sass/app.sass */ /* line 164, ../sass/app.sass */
.imageSection .colors .function { .imageSection .colors .function {
clear: left; clear: left;
margin-bottom: 10px; margin-bottom: 10px;
@@ -378,7 +378,7 @@ header {
display: table; display: table;
clear: both; clear: both;
} }
/* line 162, ../sass/app.sass */ /* line 168, ../sass/app.sass */
.imageSection .colors .function .swatches .swatch { .imageSection .colors .function .swatches .swatch {
width: 40px; width: 40px;
height: 20px; height: 20px;
@@ -390,7 +390,7 @@ header {
-o-transition: all 0.5s; -o-transition: all 0.5s;
transition: all 0.5s; transition: all 0.5s;
} }
/* line 169, ../sass/app.sass */ /* line 175, ../sass/app.sass */
.imageSection .colors .function .swatches .swatch:hover { .imageSection .colors .function .swatches .swatch:hover {
-webkit-transition: none; -webkit-transition: none;
-moz-transition: none; -moz-transition: none;
@@ -405,7 +405,7 @@ header {
-moz-box-shadow: 0 1px 10px black; -moz-box-shadow: 0 1px 10px black;
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 { .imageSection .colors .function .swatches .swatch:first-child {
-moz-border-radius-topleft: 4px; -moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px; -webkit-border-top-left-radius: 4px;
@@ -414,7 +414,7 @@ header {
-webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-left-radius: 4px;
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 { .imageSection .colors .function .swatches .swatch:last-child {
-moz-border-radius-topright: 4px; -moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px; -webkit-border-top-right-radius: 4px;
@@ -425,7 +425,7 @@ header {
} }
/* Hardcoding the offset for the FB icon example */ /* Hardcoding the offset for the FB icon example */
/* line 179, ../sass/app.sass */ /* line 185, ../sass/app.sass */
.fbIcon .imageWrap .targetImage { .fbIcon .imageWrap .targetImage {
-webkit-border-radius: 0; -webkit-border-radius: 0;
-moz-border-radius: 0; -moz-border-radius: 0;
@@ -437,7 +437,7 @@ header {
left: 192px; left: 192px;
} }
/* line 185, ../sass/app.sass */ /* line 191, ../sass/app.sass */
canvas { canvas {
display: none; display: none;
} }

BIN
img/drag_placeholder.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

18
index.html
View File

@@ -29,20 +29,12 @@
</header> </header>
<div id="main" role="main"> <div id="main" role="main">
<div id='dragDrop' style='display: none'>
<h2>Test it out</h2> <h2>Test it out</h2>
<div class="imageSection"> <div id="dropZone" class="dropZone">
<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>
<div id="draggedImages"></div>
</div> </div>
<h2>Examples</h2> <h2>Examples</h2>
@@ -64,7 +56,7 @@
{{#images}} {{#images}}
<div class="imageSection {{class}} "> <div class="imageSection {{class}} ">
<div class="imageWrap"> <div class="imageWrap">
<img class="targetImage" src="img/{{file}}" data-colorcount="{{colorCount}}" /> <img class="targetImage" src="{{file}}" data-colorcount="{{colorCount}}" />
</div> </div>
<div class="colors"> <div class="colors">
<div class="function dominantColor"> <div class="function dominantColor">

78
index.js
View File

@@ -3,14 +3,17 @@ $(document).ready(function () {
// Use mustache.js templating to create layout // Use mustache.js templating to create layout
var imageArray = { images: [ var imageArray = { images: [
{"file": "3.jpg"}, {"file": "img/3.jpg"},
{"file": "4.jpg"}, {"file": "img/4.jpg"},
{"file": "5.jpg"}, {"file": "img/5.jpg"},
{"file": "logo1.png"}, {"file": "img/logo1.png"},
{"file": "icon1.png", "colorCount": "4", "class": "fbIcon"} {"file": "img/icon1.png", "colorCount": "4", "class": "fbIcon"}
]}; ]};
// Setup the drag and drop behavior // Setup the drag and drop behavior if supported
if (typeof window.FileReader === 'function') {
$('#dragDrop').show();
var $dropZone = $('#dropZone'); var $dropZone = $('#dropZone');
var dragEnter = function( evt ){ var dragEnter = function( evt ){
@@ -38,9 +41,16 @@ $(document).ready(function () {
var dt = evt.originalEvent.dataTransfer; var dt = evt.originalEvent.dataTransfer;
var files = dt.files; var files = dt.files;
handleFile( files ); handleFiles( files );
}; };
$dropZone
.on('dragenter', dragEnter)
.on('dragleave', dragLeave)
.on('dragover', dragOver)
.on('drop', drop);
}
var displayColors = function( image ) { var displayColors = function( image ) {
var $image = $(image); var $image = $(image);
var imageSection = $image.closest('.imageSection'); var imageSection = $image.closest('.imageSection');
@@ -64,32 +74,35 @@ $(document).ready(function () {
appendColors(medianPalette, medianCutPalette); appendColors(medianPalette, medianCutPalette);
}; };
function handleFile(files) { function handleFiles( files ) {
var file = files[0];
var imageType = /image.*/; var imageType = /image.*/;
var fileCount = files.length;
if (file.type.match(imageType)) { for (var i = 0; i < fileCount; i++) {
var img = document.createElement("img"); var file = files[i];
img.classList.add("targetImage");
img.width = 400;
img.height = 300;
img.file = file;
$dropZone.append(img);
if ( file.type.match(imageType) ) {
var reader = new FileReader(); var reader = new FileReader();
reader.onload = function(e){ reader.onload = function( e ) {
img.src = e.target.result; 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 ); displayColors( img );
util.centerImg( img, 400, 300);
$('.droppedImage').slideDown();
}; };
reader.readAsDataURL(file); 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); var html = Mustache.to_html($('#template').html(), imageArray);
$('#main').append(html); $('#main').append(html);
@@ -104,3 +117,20 @@ $(document).ready(function () {
displayColors( image ); 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" ));
}
}
};

12
sass/app.sass
View File

@@ -81,10 +81,17 @@ strong
font-weight: bold font-weight: bold
/* Drag and Drop area */ /* Drag and Drop area */
#dropZone .dropZone
width: 900px
height: 200px
margin-bottom: 60px
background: url("../img/drag_placeholder.png") background: url("../img/drag_placeholder.png")
&.dragging &.dragging
+box-shadow(inset 0 1px 10px #09A1EC) +box-shadow(inset 0 1px 10px #09A1EC)
.droppedImage
display: none
.targetImage
// width: 100%
/* Forms */ /* Forms */
@@ -148,8 +155,7 @@ header
float: left float: left
margin-right: 20px margin-right: 20px
background: url(../img/dark_checkered_bg.png) background: url(../img/dark_checkered_bg.png)
.targetImage overflow: hidden
+border-left-radius(10px)
.colors .colors
margin-top: 20px margin-top: 20px
width: 400px width: 400px