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

Basic drag and drop functionality added.

Browse Source
This commit is contained in:
Nathan Spady
2012-12-21 13:47:34 -06:00
parent 9ba67b93f0
commit bdbaf8c5d0
5 changed files with 175 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
css/app.css
View File

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

BIN
img/drag_placeholder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

20
index.html
View File

@@ -28,13 +28,29 @@
</p> </p>
</header> </header>
<h2>Examples</h2>
<div id="main" role="main"> <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>
</div> <!--! end of #container --> </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/jquery.lettering.js"></script>
<script src="js/libs/mustache.js"></script> <script src="js/libs/mustache.js"></script>

105
index.js
View File

@@ -10,36 +10,97 @@ $(document).ready(function () {
{"file": "icon1.png", "colorCount": "4", "class": "fbIcon"} {"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); var html = Mustache.to_html($('#template').html(), imageArray);
$('#main').append(html); $('#main').append(html);
// Use lettering.js to give letter by letter styling control for the h1 title // Use lettering.js to give letter by letter styling control for the h1 title
$("h1").lettering(); $("h1").lettering();
// For each image: // For each image:
// Once image is loaded, get dominant color and palette and display them. // Once image is loaded, get dominant color and palette and display them.
$('img').bind('load', function (event) { $('img').bind('load', function (event) {
var image = event.target; var image = event.target;
var $image = $(image); displayColors( 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);
}); });
}); });

6
sass/app.sass
View File

@@ -80,6 +80,12 @@ p
strong strong
font-weight: bold font-weight: bold
/* Drag and Drop area */
#dropZone
background: url("../img/drag_placeholder.png")
&.dragging
+box-shadow(inset 0 1px 10px #09A1EC)
/* Forms */ /* Forms */
input input