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

Merge pull request #12 from nspady/drag-drop

Browse Source 
Drag drop
This commit is contained in:
Lokesh Dhakar
2013-06-07 00:07:57 -07:00
parent 681cfe8b0d b23a475248
commit d468c7f08a
7 changed files with 234 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
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,28 @@ strong {
font-weight: bold; font-weight: bold;
} }
/* Drag and Drop area */
/* line 84, ../sass/app.sass */
.dropZone {
width: 900px;
height: 200px;
margin-bottom: 60px;
background: url("../img/drag_placeholder.png");
}
/* 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 */ /* Forms */
/* line 86, ../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);
@@ -245,7 +263,7 @@ input[type=text], input[type=password] {
border-radius: 4px; border-radius: 4px;
} }
/* line 93, ../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);
@@ -260,44 +278,44 @@ textarea {
border-radius: 4px; border-radius: 4px;
} }
/* line 100, ../sass/app.sass */ /* line 113, ../sass/app.sass */
input[type=text]:focus { input[type=text]:focus {
color: #373737; color: #373737;
} }
/* line 103, ../sass/app.sass */ /* line 116, ../sass/app.sass */
textarea { textarea {
padding-left: 3px; padding-left: 3px;
width: 98%; width: 98%;
} }
/* line 104, ../sass/app.sass */ /* line 117, ../sass/app.sass */
textarea:focus { textarea:focus {
color: #373737; color: #373737;
} }
/* line 109, ../sass/app.sass */ /* line 122, ../sass/app.sass */
input[type=text] { input[type=text] {
padding: 3px; padding: 3px;
} }
/* Links */ /* Links */
/* line 114, ../sass/app.sass */ /* line 127, ../sass/app.sass */
a { a {
color: #09a1ec; color: #09a1ec;
text-decoration: none; text-decoration: none;
} }
/* line 117, ../sass/app.sass */ /* line 130, ../sass/app.sass */
a:hover { a:hover {
color: #7fd2fa; color: #7fd2fa;
} }
/* line 120, ../sass/app.sass */ /* line 133, ../sass/app.sass */
#container { #container {
width: 900px; width: 900px;
margin: 0 auto; margin: 0 auto;
} }
/* line 124, ../sass/app.sass */ /* line 137, ../sass/app.sass */
header { header {
padding-bottom: 40px; padding-bottom: 40px;
text-align: center; text-align: center;
@@ -305,12 +323,12 @@ header {
margin: 0 auto; margin: 0 auto;
} }
/* line 130, ../sass/app.sass */ /* line 143, ../sass/app.sass */
.medianCutPalette h3 { .medianCutPalette h3 {
margin-top: 20px; margin-top: 20px;
} }
/* line 133, ../sass/app.sass */ /* line 146, ../sass/app.sass */
.imageSection { .imageSection {
margin-bottom: 80px; margin-bottom: 80px;
background: #111111; background: #111111;
@@ -321,62 +339,46 @@ 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 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;
-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;
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 145, ../sass/app.sass */ /* line 160, ../sass/app.sass */
.imageSection .imageWrap .targetImage {
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-ms-border-top-left-radius: 10px;
-o-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-ms-border-bottom-left-radius: 10px;
-o-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}
/* line 147, ../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 164, ../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 168, ../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 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;
-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 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;
-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 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;
-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 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;
@@ -445,7 +437,7 @@ header {
left: 192px; left: 192px;
} }
/* line 178, ../sass/app.sass */ /* line 191, ../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.6 KiB

14
index.html
View File

@@ -28,13 +28,21 @@
</p> </p>
</header> </header>
<h2>Examples</h2>
<div id="main" role="main"> <div id="main" role="main">
<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> </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>
@@ -48,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">

130
index.js
View File

@@ -3,24 +3,55 @@ $(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"}
]}; ]};
var html = Mustache.to_html($('#template').html(), imageArray); // Setup the drag and drop behavior if supported
$('#main').append(html); if (typeof window.FileReader === 'function') {
$('#dragDrop').show();
// Use lettering.js to give letter by letter styling control for the h1 title var $dropZone = $('#dropZone');
$("h1").lettering();
var dragEnter = function( evt ){
evt.stopPropagation();
evt.preventDefault();
$dropZone.addClass('dragging');
};
// For each image: var dragLeave = function( evt ){
// Once image is loaded, get dominant color and palette and display them. evt.stopPropagation();
$('img').bind('load', function (event) { evt.preventDefault();
var image = event.target; $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;
handleFiles( files );
};
$dropZone
.on('dragenter', dragEnter)
.on('dragleave', dragLeave)
.on('dragover', dragOver)
.on('drop', drop);
}
var displayColors = function( image ) {
var $image = $(image); var $image = $(image);
var imageSection = $image.closest('.imageSection'); var imageSection = $image.closest('.imageSection');
var appendColors = function (colors, root) { var appendColors = function (colors, root) {
@@ -41,5 +72,78 @@ $(document).ready(function () {
var medianPalette = createPalette(image, colorCount); var medianPalette = createPalette(image, colorCount);
var medianCutPalette = imageSection.find('.medianCutPalette .swatches'); var medianCutPalette = imageSection.find('.medianCutPalette .swatches');
appendColors(medianPalette, medianCutPalette); appendColors(medianPalette, medianCutPalette);
};
function handleFiles( files ) {
var imageType = /image.*/;
var fileCount = files.length;
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);
// Must wait for image to load in DOM, not just load from FileReader
$(img).on('load', function() {
displayColors( img );
util.centerImg( img, 400, 300);
$('.droppedImage').slideDown();
});
};
reader.readAsDataURL(file);
} else {
alert('File must be a supported image type.');
}
}
}
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;
displayColors( image );
}); });
}); });
var util = {
centerImg: function( img, containerWidth, containerHeight) {
var $img = $(img);
var imgWidth = $img.get(0).width;
var imgHeight = $img.get(0).height;
var imgAspectRatio = imgHeight/imgWidth;
if ( imgHeight > containerHeight ) {
imgWidth = containerHeight / imgAspectRatio;
$img.css('width', ( imgWidth + "px" ));
}
if ( imgWidth > containerWidth ) {
$img.css('width', ( containerWidth + "px" ));
imgHeight = imgAspectRatio * containerWidth;
}
if ( imgWidth < containerWidth ) {
var hOffset = ( containerWidth - imgWidth )/2;
$img.css('margin-left', ( hOffset + "px" ));
}
if ( imgHeight < containerHeight ) {
var vOffset = ( containerHeight - imgHeight )/2;
$img.css('margin-top', ( vOffset + "px" ));
}
}
};

18
js/libs/jquery-1.6.2.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
js/libs/jquery-1.8.3.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

16
sass/app.sass
View File

@@ -80,6 +80,19 @@ p
strong strong
font-weight: bold font-weight: bold
/* Drag and Drop area */
.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 */ /* Forms */
input input
@@ -142,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