mirror of
https://github.com/janishutz/color-thief.git
synced 2025-11-25 22:04:25 +00:00
Lokesh Dhakar
75
.jscsrc
75
.jscsrc
@@ -1,75 +0,0 @@
|
|||||||
{
|
|
||||||
"requireSpaceAfterLineComment": true,
|
|
||||||
"requireSpaceAfterKeywords": [
|
|
||||||
"do",
|
|
||||||
"for",
|
|
||||||
"if",
|
|
||||||
"else",
|
|
||||||
"switch",
|
|
||||||
"case",
|
|
||||||
"try",
|
|
||||||
"catch",
|
|
||||||
"void",
|
|
||||||
"while",
|
|
||||||
"with",
|
|
||||||
"return",
|
|
||||||
"typeof"
|
|
||||||
],
|
|
||||||
"requireSpaceBeforeBlockStatements": true,
|
|
||||||
"requireParenthesesAroundIIFE": true,
|
|
||||||
"requireSpacesInConditionalExpression": true,
|
|
||||||
"disallowMultipleVarDecl": true,
|
|
||||||
"requireBlocksOnNewline": true,
|
|
||||||
"disallowEmptyBlocks": true,
|
|
||||||
"disallowSpacesInsideParentheses": true,
|
|
||||||
"disallowSpaceAfterObjectKeys": true,
|
|
||||||
"requireSpaceBeforeObjectValues": true,
|
|
||||||
"requireCommaBeforeLineBreak": true,
|
|
||||||
"requireOperatorBeforeLineBreak": [
|
|
||||||
"?",
|
|
||||||
"=",
|
|
||||||
"+",
|
|
||||||
"-",
|
|
||||||
"/",
|
|
||||||
"*",
|
|
||||||
"==",
|
|
||||||
"===",
|
|
||||||
"!=",
|
|
||||||
"!==",
|
|
||||||
">",
|
|
||||||
">=",
|
|
||||||
"<",
|
|
||||||
"<="
|
|
||||||
],
|
|
||||||
"disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"],
|
|
||||||
"disallowSpaceBeforePostfixUnaryOperators": ["++", "--"],
|
|
||||||
"requireSpaceBeforeBinaryOperators": [
|
|
||||||
"=",
|
|
||||||
"+",
|
|
||||||
"-",
|
|
||||||
"/",
|
|
||||||
"*",
|
|
||||||
"==",
|
|
||||||
"===",
|
|
||||||
"!=",
|
|
||||||
"!=="
|
|
||||||
],
|
|
||||||
"requireSpaceAfterBinaryOperators": [
|
|
||||||
"=",
|
|
||||||
",",
|
|
||||||
"+",
|
|
||||||
"-",
|
|
||||||
"/",
|
|
||||||
"*",
|
|
||||||
"==",
|
|
||||||
"===",
|
|
||||||
"!=",
|
|
||||||
"!=="
|
|
||||||
],
|
|
||||||
"disallowMixedSpacesAndTabs" : true,
|
|
||||||
"disallowTrailingWhitespace": true,
|
|
||||||
"disallowTrailingComma": true,
|
|
||||||
"requireLineFeedAtFileEnd": true,
|
|
||||||
"requireCapitalizedConstructors": true
|
|
||||||
}
|
|
||||||
|
|
||||||
35
.jshintrc
35
.jshintrc
@@ -1,35 +0,0 @@
|
|||||||
{
|
|
||||||
"bitwise":true,
|
|
||||||
"browser":true,
|
|
||||||
"camelcase":true,
|
|
||||||
"curly":true,
|
|
||||||
"eqeqeq":true,
|
|
||||||
"forin":true,
|
|
||||||
"freeze":true,
|
|
||||||
"indent":2,
|
|
||||||
"latedef":true,
|
|
||||||
"maxdepth": 6,
|
|
||||||
"maxparams": 6,
|
|
||||||
"maxstatements": 50,
|
|
||||||
"newcap": true,
|
|
||||||
"noarg":true,
|
|
||||||
"noempty":true,
|
|
||||||
"nonbsp":true,
|
|
||||||
"nonew":true,
|
|
||||||
"quotmark":"single",
|
|
||||||
"trailing":true,
|
|
||||||
"undef":true,
|
|
||||||
"unused":"vars",
|
|
||||||
"immed":true,
|
|
||||||
"browser": true,
|
|
||||||
"jquery":true,
|
|
||||||
"predef": [
|
|
||||||
"alert",
|
|
||||||
"confirm",
|
|
||||||
"console",
|
|
||||||
"escape",
|
|
||||||
"define",
|
|
||||||
"module",
|
|
||||||
"require"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
## How to make a release and deploy
|
## How to make a release and deploy
|
||||||
|
|
||||||
- Update version number in `src/color-thief.js` and `package.json`
|
- Update version number in `src/color-thief.js` and `package.json`
|
||||||
- Run `grunt build`
|
- Run `npm run build`
|
||||||
- Push to Github repo
|
- Push to Github repo
|
||||||
- Create a new Github release along with tag. Naming convention for both ```v2.8.1```
|
- Create a new Github release along with tag. Naming convention for both ```v2.8.1```
|
||||||
26
bower.json
26
bower.json
@@ -1,26 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "color-thief",
|
|
||||||
"homepage": "http://lokeshdhakar.com/projects/color-thief/",
|
|
||||||
"authors": [
|
|
||||||
"Lokesh Dhakar"
|
|
||||||
],
|
|
||||||
"description": "Grab the dominant color or color palette from an image.",
|
|
||||||
"main": "src/color-thief.js",
|
|
||||||
"keywords": [
|
|
||||||
"color",
|
|
||||||
"palette",
|
|
||||||
"sampling",
|
|
||||||
"image",
|
|
||||||
"picture",
|
|
||||||
"photo",
|
|
||||||
"canvas"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
|
||||||
"ignore": [
|
|
||||||
"**/.*",
|
|
||||||
"node_modules",
|
|
||||||
"bower_components",
|
|
||||||
"test",
|
|
||||||
"tests"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
52
cypress/integration/api_spec.js
Normal file
52
cypress/integration/api_spec.js
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
function rgbCount(text) {
|
||||||
|
const vals = text.split(',');
|
||||||
|
for (const val of vals) {
|
||||||
|
if (val < 0 || val > 255) {
|
||||||
|
throw 'Invalid RGB color value';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return vals.length / 3
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('getColor()', function() {
|
||||||
|
beforeEach(function() {
|
||||||
|
cy.visit('http://localhost:8080');
|
||||||
|
})
|
||||||
|
|
||||||
|
it('returns valid color from black image', function() {
|
||||||
|
cy.get('[data-image="black.png"] .output-color').should(($el) => {
|
||||||
|
const count = rgbCount($el.text())
|
||||||
|
expect(count).to.equal(1);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
|
||||||
|
it('returns valid color from red image', function() {
|
||||||
|
cy.get('[data-image="red.png"] .output-color').should(($el) => {
|
||||||
|
const count = rgbCount($el.text())
|
||||||
|
expect(count).to.equal(1);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
|
||||||
|
it('returns valid color from rainbow image', function() {
|
||||||
|
cy.get('[data-image="rainbow-horizontal.png"] .output-color').should(($el) => {
|
||||||
|
const count = rgbCount($el.text())
|
||||||
|
expect(count).to.equal(1);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
|
||||||
|
// ⚠️BREAKS
|
||||||
|
// it('returns valid color from white image', function() {
|
||||||
|
// cy.get('[data-image="white.png"] .output-color').should(($el) => {
|
||||||
|
// const count = rgbCount($el.text())
|
||||||
|
// expect(count).to.equal(1);
|
||||||
|
// });
|
||||||
|
// })
|
||||||
|
|
||||||
|
// ⚠️BREAKS
|
||||||
|
// it('returns valid color from transparent image', function() {
|
||||||
|
// cy.get('[data-image="transparent.png"] .output-color').should(($el) => {
|
||||||
|
// const count = rgbCount($el.text())
|
||||||
|
// expect(count).to.equal(1);
|
||||||
|
// });
|
||||||
|
// })
|
||||||
|
})
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
describe('My First Test', function() {
|
|
||||||
it('Does not do much!', function() {
|
|
||||||
cy.visit('https://lokeshdhakar.com');
|
|
||||||
cy.get('.nav__item').contains('Blog').click();
|
|
||||||
cy.url().should('contain', 'blog');
|
|
||||||
})
|
|
||||||
})
|
|
||||||
File diff suppressed because one or more lines are too long
BIN
examples/img/black.png
Normal file
BIN
examples/img/black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 137 KiB After Width: | Height: | Size: 137 KiB |
BIN
examples/img/rainbow-horizontal.png
Normal file
BIN
examples/img/rainbow-horizontal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
examples/img/rainbow-vertical.png
Normal file
BIN
examples/img/rainbow-vertical.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
BIN
examples/img/red.png
Normal file
BIN
examples/img/red.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
examples/img/transparent.png
Normal file
BIN
examples/img/transparent.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
examples/img/white.png
Normal file
BIN
examples/img/white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
File diff suppressed because one or more lines are too long
9111
examples/js/jquery.js
vendored
9111
examples/js/jquery.js
vendored
File diff suppressed because it is too large
Load Diff
@@ -1,224 +0,0 @@
|
|||||||
/**! normalize.css v2.1.1 | MIT License | git.io/normalize
|
|
||||||
|
|
||||||
// HTML5 display definitions
|
|
||||||
|
|
||||||
// Correct `block` display not defined in IE 8/9.
|
|
||||||
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary
|
|
||||||
display: block
|
|
||||||
|
|
||||||
// Correct `inline-block` display not defined in IE 8/9.
|
|
||||||
audio, canvas, video
|
|
||||||
display: inline-block
|
|
||||||
|
|
||||||
audio:not([controls])
|
|
||||||
// Prevent modern browsers from displaying `audio` without controls.
|
|
||||||
display: none
|
|
||||||
|
|
||||||
// Remove excess height in iOS 5 devices.
|
|
||||||
height: 0
|
|
||||||
|
|
||||||
// Address styling not present in IE 8/9.
|
|
||||||
[hidden]
|
|
||||||
display: none
|
|
||||||
|
|
||||||
|
|
||||||
// Base
|
|
||||||
|
|
||||||
html
|
|
||||||
// Prevent system color scheme's background color being used in Firefox, IE, and Opera.
|
|
||||||
background: #fff
|
|
||||||
|
|
||||||
// Prevent system color scheme's text color being used in Firefox, IE, and Opera.
|
|
||||||
color: #000
|
|
||||||
|
|
||||||
// Set default font family to sans-serif.
|
|
||||||
font-family: sans-serif
|
|
||||||
|
|
||||||
// Prevent iOS text size adjust after orientation change, without disabling user zoom.
|
|
||||||
-ms-text-size-adjust: 100%
|
|
||||||
-webkit-text-size-adjust: 100%
|
|
||||||
|
|
||||||
// Remove default margin.
|
|
||||||
body
|
|
||||||
margin: 0
|
|
||||||
|
|
||||||
|
|
||||||
// Links
|
|
||||||
|
|
||||||
a
|
|
||||||
// Address `outline` inconsistency between Chrome and other browsers.
|
|
||||||
&:focus
|
|
||||||
outline: thin dotted
|
|
||||||
|
|
||||||
// Improve readability when focused and also mouse hovered in all browsers.
|
|
||||||
&:active, &:hover
|
|
||||||
outline: 0
|
|
||||||
|
|
||||||
|
|
||||||
// Typography
|
|
||||||
|
|
||||||
// Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari 5, and Chrome.
|
|
||||||
h1
|
|
||||||
font-size: 2em
|
|
||||||
margin: 0.67em 0
|
|
||||||
|
|
||||||
// Address styling not present in IE 8/9, Safari 5, and Chrome.
|
|
||||||
abbr[title]
|
|
||||||
border-bottom: 1px dotted
|
|
||||||
|
|
||||||
// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
|
||||||
b, strong
|
|
||||||
font-weight: bold
|
|
||||||
|
|
||||||
// Address styling not present in Safari 5 and Chrome.
|
|
||||||
dfn
|
|
||||||
font-style: italic
|
|
||||||
|
|
||||||
// Address differences between Firefox and other browsers.
|
|
||||||
hr
|
|
||||||
-moz-box-sizing: content-box
|
|
||||||
box-sizing: content-box
|
|
||||||
height: 0
|
|
||||||
|
|
||||||
// Address styling not present in IE 8/9.
|
|
||||||
mark
|
|
||||||
background: #ff0
|
|
||||||
color: #000
|
|
||||||
|
|
||||||
// Correct font family set oddly in Safari 5 and Chrome.
|
|
||||||
code, kbd, pre, samp
|
|
||||||
font-family: monospace, serif
|
|
||||||
font-size: 1em
|
|
||||||
|
|
||||||
// Improve readability of pre-formatted text in all browsers.
|
|
||||||
pre
|
|
||||||
white-space: pre-wrap
|
|
||||||
|
|
||||||
// Set consistent quote types.
|
|
||||||
q
|
|
||||||
quotes: '\201C' '\201D' '\2018' '\2019'
|
|
||||||
|
|
||||||
// Address inconsistent and variable font size in all browsers.
|
|
||||||
small
|
|
||||||
font-size: 80%
|
|
||||||
|
|
||||||
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
|
||||||
sub, sup
|
|
||||||
font-size: 75%
|
|
||||||
line-height: 0
|
|
||||||
position: relative
|
|
||||||
vertical-align: baseline
|
|
||||||
|
|
||||||
sup
|
|
||||||
top: -0.5em
|
|
||||||
|
|
||||||
sub
|
|
||||||
bottom: -0.25em
|
|
||||||
|
|
||||||
|
|
||||||
// Embedded content
|
|
||||||
|
|
||||||
// Remove border when inside `a` element in IE 8/9.
|
|
||||||
img
|
|
||||||
border: 0
|
|
||||||
|
|
||||||
// Correct overflow displayed oddly in IE 9.
|
|
||||||
svg:not(:root)
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
|
|
||||||
// Figures
|
|
||||||
|
|
||||||
// Address margin not present in IE 8/9 and Safari 5.
|
|
||||||
figure
|
|
||||||
margin: 0
|
|
||||||
|
|
||||||
|
|
||||||
// Forms
|
|
||||||
|
|
||||||
// Define consistent border, margin, and padding.
|
|
||||||
fieldset
|
|
||||||
border: 1px solid #c0c0c0
|
|
||||||
margin: 0 2px
|
|
||||||
padding: 0.35em 0.625em 0.75em
|
|
||||||
|
|
||||||
legend
|
|
||||||
// Correct `color` not being inherited in IE 8/9.
|
|
||||||
border: 0
|
|
||||||
|
|
||||||
// Remove padding so people aren't caught out if they zero out fieldsets.
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
button, input, select, textarea
|
|
||||||
// Correct font family not being inherited in all browsers.
|
|
||||||
font-family: inherit
|
|
||||||
|
|
||||||
// Correct font size not being inherited in all browsers.
|
|
||||||
font-size: 100%
|
|
||||||
|
|
||||||
// Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
|
||||||
margin: 0
|
|
||||||
|
|
||||||
// Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet.
|
|
||||||
button, input
|
|
||||||
line-height: normal
|
|
||||||
|
|
||||||
// Address inconsistent `text-transform` inheritance for `button` and `select`.
|
|
||||||
// All other form control elements do not inherit `text-transform` values.
|
|
||||||
// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
|
||||||
// Correct `select` style inheritance in Firefox 4+ and Opera.
|
|
||||||
button, select
|
|
||||||
text-transform: none
|
|
||||||
|
|
||||||
button, html input[type='button'], input[type='reset'], input[type='submit']
|
|
||||||
// Avoid the WebKit bug in Android 4.0.* where `html input[type='button'] { -webkit-appearance: button }` destroys native `audio` and `video` controls.
|
|
||||||
// Correct inability to style clickable `input` types in iOS.
|
|
||||||
-webkit-appearance: button
|
|
||||||
|
|
||||||
// Improve usability and consistency of cursor style between image-type `input` and others.
|
|
||||||
cursor: pointer
|
|
||||||
|
|
||||||
// Re-set default cursor for disabled elements.
|
|
||||||
button[disabled], html input[disabled]
|
|
||||||
cursor: default
|
|
||||||
|
|
||||||
input
|
|
||||||
&[type='checkbox'], &[type='radio']
|
|
||||||
// Address box sizing set to `content-box` in IE 8/9.
|
|
||||||
box-sizing: border-box
|
|
||||||
|
|
||||||
// Remove excess padding in IE 8/9.
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
&[type='search']
|
|
||||||
// Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
|
||||||
-webkit-appearance: textfield
|
|
||||||
|
|
||||||
// Address `box-sizing` set to `border-box` in Safari 5 and Chrome (include `-moz` to future-proof).
|
|
||||||
-moz-box-sizing: content-box
|
|
||||||
-webkit-box-sizing: content-box
|
|
||||||
box-sizing: content-box
|
|
||||||
|
|
||||||
// Remove inner padding and search cancel button in Safari 5 and Chrome on OS X.
|
|
||||||
&::-webkit-search-cancel-button, &::-webkit-search-decoration
|
|
||||||
-webkit-appearance: none
|
|
||||||
|
|
||||||
// Remove inner padding and border in Firefox 4+.
|
|
||||||
button::-moz-focus-inner, input::-moz-focus-inner
|
|
||||||
border: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
textarea
|
|
||||||
// Remove default vertical scrollbar in IE 8/9.
|
|
||||||
overflow: auto
|
|
||||||
|
|
||||||
// Improve readability and alignment in all browsers.
|
|
||||||
vertical-align: top
|
|
||||||
|
|
||||||
|
|
||||||
// Tables
|
|
||||||
|
|
||||||
// Remove most spacing between table cells.
|
|
||||||
table
|
|
||||||
border-collapse: collapse
|
|
||||||
border-spacing: 0
|
|
||||||
@@ -1,405 +0,0 @@
|
|||||||
@import "compass/css3"
|
|
||||||
@import "compass/utilities/general/clearfix"
|
|
||||||
|
|
||||||
@import "normalize"
|
|
||||||
|
|
||||||
// COLORS & BACKGROUNDS --------------------------------------------------------
|
|
||||||
|
|
||||||
$yellow: #fdf485
|
|
||||||
$orange: #e67e39
|
|
||||||
$blue: #4ae
|
|
||||||
$green: #61c227
|
|
||||||
$gray: #777
|
|
||||||
$gray-light: #aaa
|
|
||||||
$gray-dark: #222
|
|
||||||
|
|
||||||
$color: $gray
|
|
||||||
$bg-color: #f3f3f3
|
|
||||||
$border-color: darken($bg-color, 5%)
|
|
||||||
$header-bg-color: #fff
|
|
||||||
$section-heading-color: $orange
|
|
||||||
$heading-color: $gray-dark
|
|
||||||
$link-color: $blue
|
|
||||||
$code-color: $gray-light
|
|
||||||
|
|
||||||
// TYPE --------------------------------------------------------
|
|
||||||
|
|
||||||
$body-font-family: "Karla", "lucida grande", sans-serif
|
|
||||||
$heading-font-family: "Montserrat", "Helvetica", sans-serif
|
|
||||||
$code-font-family: "Karla", "lucida grande", sans-serif
|
|
||||||
|
|
||||||
// LAYOUT --------------------------------------------------------
|
|
||||||
|
|
||||||
$gutter: 30px
|
|
||||||
$max-column-width: 600px
|
|
||||||
|
|
||||||
$sharing-section-z-index: 10
|
|
||||||
|
|
||||||
// UI COMPONENTS --------------------------------------------------------
|
|
||||||
|
|
||||||
$radius: 8px
|
|
||||||
|
|
||||||
|
|
||||||
/* Typography
|
|
||||||
*----------------------------------------------- */
|
|
||||||
|
|
||||||
html
|
|
||||||
font: 87% / 1.5 $body-font-family, sans-serif
|
|
||||||
font-weight: 400
|
|
||||||
|
|
||||||
@media (min-width: 40rem)
|
|
||||||
html
|
|
||||||
font-size: 100%
|
|
||||||
|
|
||||||
@media (min-width: 64rem)
|
|
||||||
html
|
|
||||||
font-size: 106%
|
|
||||||
|
|
||||||
body
|
|
||||||
color: $color
|
|
||||||
background-color: $bg-color
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5
|
|
||||||
color: $heading-color
|
|
||||||
line-height: 1.2em
|
|
||||||
font-family: $heading-font-family
|
|
||||||
font-weight: 700
|
|
||||||
|
|
||||||
h1
|
|
||||||
font-size: 4rem
|
|
||||||
margin: 0 0 0.2em 0
|
|
||||||
line-height: 1.1em
|
|
||||||
|
|
||||||
@media (min-width: 40rem)
|
|
||||||
h1
|
|
||||||
font-size: 4.5rem
|
|
||||||
|
|
||||||
@media (min-width: 64rem)
|
|
||||||
h1
|
|
||||||
font-size: 5rem
|
|
||||||
|
|
||||||
h2
|
|
||||||
color: $section-heading-color
|
|
||||||
margin-bottom: 1.5rem
|
|
||||||
font-size: 1.5rem
|
|
||||||
text-transform: uppercase
|
|
||||||
|
|
||||||
@media (min-width: 40rem)
|
|
||||||
h2
|
|
||||||
font-size: 2rem
|
|
||||||
|
|
||||||
h3
|
|
||||||
font-size: 1.2rem
|
|
||||||
margin-bottom: .5rem
|
|
||||||
|
|
||||||
p
|
|
||||||
margin: 0 auto 2em auto
|
|
||||||
text-align: left
|
|
||||||
|
|
||||||
.lead
|
|
||||||
max-width: 50rem
|
|
||||||
margin-bottom: 1.4rem
|
|
||||||
font-size: 1.1rem
|
|
||||||
|
|
||||||
@media (min-width: 40rem)
|
|
||||||
.lead
|
|
||||||
font-size: 1.25rem
|
|
||||||
|
|
||||||
strong
|
|
||||||
font-weight: bold
|
|
||||||
|
|
||||||
a
|
|
||||||
color: $link-color
|
|
||||||
text-decoration: none
|
|
||||||
&:hover
|
|
||||||
text-decoration: underline
|
|
||||||
|
|
||||||
::-moz-selection,
|
|
||||||
::selection
|
|
||||||
background: $orange
|
|
||||||
color: white
|
|
||||||
|
|
||||||
|
|
||||||
/* Code
|
|
||||||
* ========================================================================== */
|
|
||||||
|
|
||||||
code
|
|
||||||
color: $code-color
|
|
||||||
+border-radius($radius)
|
|
||||||
font-family: Consolas, Courier, monospace
|
|
||||||
font-size: 0.9rem
|
|
||||||
padding: 0.1rem 0.3rem
|
|
||||||
position: relative
|
|
||||||
top: -1px
|
|
||||||
|
|
||||||
|
|
||||||
/* Lists
|
|
||||||
* ========================================================================== */
|
|
||||||
|
|
||||||
ul
|
|
||||||
margin: 0
|
|
||||||
text-align: left
|
|
||||||
|
|
||||||
@media (min-width: 40rem)
|
|
||||||
ul
|
|
||||||
display: inline-block
|
|
||||||
|
|
||||||
|
|
||||||
/* Buttons
|
|
||||||
* ========================================================================== */
|
|
||||||
|
|
||||||
.button
|
|
||||||
display: block
|
|
||||||
padding: 0.7rem 2rem
|
|
||||||
margin-bottom: 0.5rem
|
|
||||||
border: none
|
|
||||||
color: #fff
|
|
||||||
background-color: $link-color
|
|
||||||
font-size: 1.1rem
|
|
||||||
font-weight: bold
|
|
||||||
text-transform: uppercase
|
|
||||||
+border-radius($radius)
|
|
||||||
vertical-align: middle
|
|
||||||
white-space: nowrap
|
|
||||||
&:hover
|
|
||||||
background: darken($link-color, 10%)
|
|
||||||
text-decoration: none
|
|
||||||
|
|
||||||
@media (min-width: 40rem)
|
|
||||||
.button
|
|
||||||
display: inline-block
|
|
||||||
margin: 0 0.25rem
|
|
||||||
|
|
||||||
.button-minor
|
|
||||||
padding: 0.35rem 1rem
|
|
||||||
border: 2px solid $link-color
|
|
||||||
color: $link-color
|
|
||||||
background-color: transparent
|
|
||||||
font-size: 0.8rem
|
|
||||||
&:hover
|
|
||||||
color: white
|
|
||||||
|
|
||||||
|
|
||||||
/* Elements
|
|
||||||
* ========================================================================== */
|
|
||||||
|
|
||||||
hr
|
|
||||||
border: 0
|
|
||||||
border-top: 2px solid $border-color
|
|
||||||
margin: 2rem auto
|
|
||||||
width: 3rem
|
|
||||||
|
|
||||||
@media (min-width: 40rem)
|
|
||||||
hr
|
|
||||||
margin: 2.5rem auto
|
|
||||||
|
|
||||||
/* -- Layout ------------------------------------------------------------------ */
|
|
||||||
|
|
||||||
*, *:before, *:after
|
|
||||||
+box-sizing("border-box")
|
|
||||||
|
|
||||||
body
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
background: $bg-color
|
|
||||||
|
|
||||||
section
|
|
||||||
border-top: 2px solid $border-color
|
|
||||||
text-align: center
|
|
||||||
padding: 1.5rem 0
|
|
||||||
&:first-of-type
|
|
||||||
border-top: none
|
|
||||||
|
|
||||||
@media (min-width: 40rem)
|
|
||||||
section
|
|
||||||
padding: 2rem 0
|
|
||||||
|
|
||||||
.container
|
|
||||||
margin: 0 auto
|
|
||||||
max-width: 40rem
|
|
||||||
width: 90%
|
|
||||||
|
|
||||||
/* -- Header -- */
|
|
||||||
|
|
||||||
header
|
|
||||||
padding: 4rem 0 2rem 0
|
|
||||||
background-color: $header-bg-color
|
|
||||||
text-align: center
|
|
||||||
p
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
@media (min-width: 40rem)
|
|
||||||
header
|
|
||||||
padding: 2rem 0
|
|
||||||
|
|
||||||
|
|
||||||
/* -- Examples -- */
|
|
||||||
|
|
||||||
.image-section
|
|
||||||
margin-bottom: 80px
|
|
||||||
.image-wrap
|
|
||||||
position: relative
|
|
||||||
line-height: 1em
|
|
||||||
|
|
||||||
.examples-section
|
|
||||||
.image-section
|
|
||||||
.target-image
|
|
||||||
+border-bottom-radius($radius)
|
|
||||||
.image-section.with-color-thief-output
|
|
||||||
.target-image
|
|
||||||
+border-bottom-radius(0)
|
|
||||||
|
|
||||||
.run-functions-button
|
|
||||||
position: absolute
|
|
||||||
top: 50%
|
|
||||||
left: 50%
|
|
||||||
width: 8rem
|
|
||||||
height: 8rem
|
|
||||||
margin-top: -4rem
|
|
||||||
margin-left: -4rem
|
|
||||||
border: none
|
|
||||||
+border-radius(50%)
|
|
||||||
color: $color
|
|
||||||
background-color: $yellow
|
|
||||||
font-size: 2rem
|
|
||||||
font-weight: bold
|
|
||||||
cursor: pointer
|
|
||||||
text-transform: uppercase
|
|
||||||
outline: none
|
|
||||||
&:hover
|
|
||||||
+scale(1.1)
|
|
||||||
+transition(transform .2s)
|
|
||||||
&:active
|
|
||||||
+scale(0.9)
|
|
||||||
&.hide
|
|
||||||
background-color: $yellow
|
|
||||||
color: $color
|
|
||||||
+transition(transform .6s, top .6s cubic-bezier(0.220, -0.370, 0.750, 0.750))
|
|
||||||
top: 105%
|
|
||||||
+scale(0)
|
|
||||||
|
|
||||||
// Use Modernizr to check for touch support
|
|
||||||
.touch
|
|
||||||
.touch-label
|
|
||||||
display: inline
|
|
||||||
.no-touch-label
|
|
||||||
display: none
|
|
||||||
.no-touch
|
|
||||||
.touch-label
|
|
||||||
display: none
|
|
||||||
.no-touch-label
|
|
||||||
display: inline
|
|
||||||
|
|
||||||
.target-image
|
|
||||||
display: block
|
|
||||||
width: 100%
|
|
||||||
+border-top-radius($radius)
|
|
||||||
|
|
||||||
.color-thief-output
|
|
||||||
display: none
|
|
||||||
padding: 1.5rem
|
|
||||||
background-color: white
|
|
||||||
border: 1px solid $border-color
|
|
||||||
border-top-width: 0
|
|
||||||
+border-bottom-radius($radius)
|
|
||||||
|
|
||||||
.function-title
|
|
||||||
margin-top: 0
|
|
||||||
|
|
||||||
.function
|
|
||||||
margin-bottom: 1.5rem
|
|
||||||
|
|
||||||
.swatch
|
|
||||||
display: inline-block
|
|
||||||
margin: 0
|
|
||||||
background: #dddddd
|
|
||||||
|
|
||||||
@media (min-width: 40rem)
|
|
||||||
.swatch
|
|
||||||
margin-right: -2px
|
|
||||||
|
|
||||||
.get-color
|
|
||||||
.swatch
|
|
||||||
width: 6rem
|
|
||||||
height: 3rem
|
|
||||||
|
|
||||||
.get-palette
|
|
||||||
.swatch
|
|
||||||
width: 3rem
|
|
||||||
height: 2rem
|
|
||||||
|
|
||||||
@media (min-width: 40rem)
|
|
||||||
.get-palette
|
|
||||||
.swatch
|
|
||||||
width: 4rem
|
|
||||||
height: 2.7rem
|
|
||||||
|
|
||||||
canvas
|
|
||||||
display: none
|
|
||||||
|
|
||||||
|
|
||||||
/* -- Credits -- */
|
|
||||||
|
|
||||||
footer
|
|
||||||
padding: 2rem 0
|
|
||||||
background-color: $header-bg-color
|
|
||||||
text-align: center
|
|
||||||
p
|
|
||||||
text-align: center
|
|
||||||
.button
|
|
||||||
margin-top: 0.5rem
|
|
||||||
|
|
||||||
/* -- Sharing -- */
|
|
||||||
|
|
||||||
.sharing-section
|
|
||||||
position: fixed
|
|
||||||
z-index: $sharing-section-z-index
|
|
||||||
top: 20px
|
|
||||||
right: 0
|
|
||||||
|
|
||||||
|
|
||||||
/* -- Drag and drop ------------------------------------------------------------------ */
|
|
||||||
|
|
||||||
.drag-drop-section
|
|
||||||
display: none
|
|
||||||
|
|
||||||
.drop-zone
|
|
||||||
height: 25rem
|
|
||||||
margin-bottom: 4rem
|
|
||||||
background-color: $gray-dark
|
|
||||||
+border-radius($radius)
|
|
||||||
&.dragging
|
|
||||||
font-weight: 700
|
|
||||||
+box-shadow(inset 0 0 0 8px $link-color)
|
|
||||||
.drop-zone-label
|
|
||||||
color: $link-color
|
|
||||||
.default-label
|
|
||||||
display: none
|
|
||||||
.dragging-label
|
|
||||||
display: block
|
|
||||||
|
|
||||||
.drop-zone-label
|
|
||||||
position: relative
|
|
||||||
top: 11rem
|
|
||||||
color: $yellow
|
|
||||||
font-size: 1.8rem
|
|
||||||
text-align: center
|
|
||||||
pointer-events: none
|
|
||||||
text-transform: uppercase
|
|
||||||
+border-radius($radius)
|
|
||||||
|
|
||||||
@media (min-width: 40rem)
|
|
||||||
.drop-zone-label
|
|
||||||
top: 10.5rem
|
|
||||||
font-size: 2.4rem
|
|
||||||
|
|
||||||
.dragging-label
|
|
||||||
display: none
|
|
||||||
|
|
||||||
.dropped-image
|
|
||||||
.run-functions-button
|
|
||||||
display: none
|
|
||||||
.targetImage
|
|
||||||
// width: 100%
|
|
||||||
|
|
||||||
|
|
||||||
115
index.html
115
index.html
@@ -1,126 +1,53 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html class="no-js" lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
|
||||||
<title>Color Thief</title>
|
<title>Color Thief</title>
|
||||||
|
|
||||||
<meta name="description" content="Get the dominant color or color palette from an image.">
|
|
||||||
<meta name="author" content="Lokesh Dhakar">
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla%7CMontserrat:700">
|
|
||||||
<link rel="stylesheet" href="examples/css/screen.css">
|
<link rel="stylesheet" href="examples/css/screen.css">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
|
||||||
<div class="container">
|
|
||||||
<h1 class="logo">Color Thief</h1>
|
|
||||||
<p class="lead">
|
|
||||||
Grab the color palette from an image.<br /> Uses Javascript and the canvas tag to make it happen.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<a href="https://github.com/lokesh/color-thief/" class="button">
|
|
||||||
Download from Github</small>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<section id="examples" class="examples-section">
|
|
||||||
<div class="container">
|
|
||||||
<h2>Examples</h2>
|
|
||||||
<div id="example-images"></div>
|
<div id="example-images"></div>
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="drag-drop" class="drag-drop-section">
|
<script id='image-tpl' type='text/x-mustache'>
|
||||||
<div class="container">
|
{{#.}}
|
||||||
<h2>Try it yourself</h2>
|
<div class="image-section" data-image="{{.}}">
|
||||||
<div id="drop-zone" class="drop-zone">
|
<h2>{{.}}</h2>
|
||||||
<div class="drop-zone-label default-label">Drag an image here</div>
|
<img class="image" src="examples/img/{{.}}" />
|
||||||
<div class="drop-zone-label dragging-label">Drop it!</div>
|
<div class="output"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="dragged-images" class="dragged-images"></div>
|
{{/.}}
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<div class="container">
|
|
||||||
<p>
|
|
||||||
Created by Lokesh Dhakar<br />
|
|
||||||
<a href="https://twitter.com/lokesh" class="button button-minor">Follow me on Twitter</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<div id="sharing" class="sharing-section">
|
|
||||||
<a href="https://twitter.com/share" class="twitter-share-button" data-via="lokesh" data-size="large">Tweet</a>
|
|
||||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Mustache templates -->
|
|
||||||
<script id='image-section-template' type='text/x-mustache'>
|
|
||||||
{{#images}}
|
|
||||||
<div class="image-section {{class}}">
|
|
||||||
<div class="image-wrap">
|
|
||||||
<button class="run-functions-button">
|
|
||||||
<span class="no-touch-label">Click</span>
|
|
||||||
<span class="touch-label">Tap</span>
|
|
||||||
</button>
|
|
||||||
<img class="target-image" src="{{file}}" />
|
|
||||||
</div>
|
|
||||||
<div class="color-thief-output"></div>
|
|
||||||
</div>
|
|
||||||
{{/images}}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script id="color-thief-output-template" type="text/x-mustache">
|
<script id="output-tpl" type="text/x-mustache">
|
||||||
<div class="function get-color">
|
<div class="color">
|
||||||
<h3 class="function-title">Dominant Color</h3>
|
<h3>Dominant Color</h3>
|
||||||
<div class="swatches">
|
<div class="swatches">
|
||||||
<div class="swatch" style="background-color: rgb({{color.0}}, {{color.1}}, {{color.2}})"></div>
|
<div class="swatch" style="background-color: rgb({{color.0}}, {{color.1}}, {{color.2}})"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="function-code">
|
<code>
|
||||||
<code>colorThief.getColor(image):{{elapsedTimeForGetColor}}ms</code>
|
<div class="output-color">{{colorStr}}</div>
|
||||||
|
<div class="time">{{elapsedTimeForGetColor}}ms</div>
|
||||||
|
</code>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="palette">
|
||||||
<div class="function get-palette">
|
<h3>Palette</h3>
|
||||||
<h3 class="function-title">Palette</h3>
|
|
||||||
<div class="function-output">
|
|
||||||
<div class="swatches">
|
<div class="swatches">
|
||||||
{{#palette}}
|
{{#palette}}
|
||||||
<div class="swatch" style="background-color: rgb({{0}}, {{1}}, {{2}})"></div>
|
<div class="swatch" style="background-color: rgb({{0}}, {{1}}, {{2}})"></div>
|
||||||
{{/palette}}
|
{{/palette}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<code>
|
||||||
<div class="function-code">
|
<div class="output-palette">{{paletteStr}}</div>
|
||||||
<code>colorThief.getPalette(image):{{elapsedTimeForGetPalette}}ms</code>
|
<div class="time">{{elapsedTimeForGetPalette}}ms</div>
|
||||||
</div>
|
</code>
|
||||||
</div>
|
</div>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<script src="src/color-thief.js"></script>
|
<script src="src/color-thief.js"></script>
|
||||||
<script src="examples/js/jquery.js"></script>
|
|
||||||
<script src="examples/js/mustache.js"></script>
|
<script src="examples/js/mustache.js"></script>
|
||||||
<script src="examples/js/demo.js"></script>
|
<script src="examples/js/demo.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
var _gaq = _gaq || [];
|
|
||||||
_gaq.push(['_setAccount', 'UA-2196019-1']);
|
|
||||||
_gaq.push(['_trackPageview']);
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
||||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
||||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "color-thief",
|
"name": "color-thief",
|
||||||
"version": "2.0.2",
|
"version": "2.0.1",
|
||||||
"author": {
|
"author": {
|
||||||
"name": "Lokesh Dhakar",
|
"name": "Lokesh Dhakar",
|
||||||
"email": "lokesh.dhakar@gmail.com",
|
"email": "lokesh.dhakar@gmail.com",
|
||||||
|
|||||||
Reference in New Issue
Block a user