mirror of
https://github.com/janishutz/color-thief.git
synced 2025-11-25 13:54:25 +00:00
Updated demo page. Added package.json and bower.json.
This commit is contained in:
Lokesh Dhakar
39
.gitignore
vendored
39
.gitignore
vendored
@@ -1,41 +1,16 @@
|
||||
# Compiled source #
|
||||
###################
|
||||
*.com
|
||||
*.class
|
||||
*.dll
|
||||
*.exe
|
||||
*.o
|
||||
*.so
|
||||
|
||||
# Packages #
|
||||
############
|
||||
# it's better to unpack these files and commit the raw source
|
||||
# git has its own built in compression methods
|
||||
*.7z
|
||||
*.dmg
|
||||
*.gz
|
||||
*.iso
|
||||
*.jar
|
||||
*.rar
|
||||
*.tar
|
||||
*.zip
|
||||
|
||||
# Logs and databases #
|
||||
######################
|
||||
*.log
|
||||
*.sql
|
||||
*.sqlite
|
||||
.htaccess
|
||||
.ftppass
|
||||
.host_config
|
||||
|
||||
# OS generated files #
|
||||
######################
|
||||
.DS_Store*
|
||||
*.DS_Store
|
||||
ehthumbs.db
|
||||
Icon?
|
||||
Thumbs.db
|
||||
|
||||
# App Files #
|
||||
#############
|
||||
*.tmproj
|
||||
.sass-cache/*
|
||||
.sass-cache
|
||||
Rakefile
|
||||
rsync-exclude
|
||||
rsync-exclude
|
||||
node_modules
|
||||
83
Gruntfile.js
Normal file
83
Gruntfile.js
Normal file
@@ -0,0 +1,83 @@
|
||||
module.exports = function(grunt) {
|
||||
|
||||
grunt.initConfig({
|
||||
host_config: grunt.file.readJSON('.host_config'),
|
||||
compass: {
|
||||
dist: {
|
||||
options: {
|
||||
sassDir: 'sass',
|
||||
cssDir: 'css',
|
||||
environment: 'production'
|
||||
}
|
||||
}
|
||||
},
|
||||
connect: {
|
||||
server: {
|
||||
options: {
|
||||
port: 8000
|
||||
}
|
||||
}
|
||||
},
|
||||
'ftp-deploy': {
|
||||
build: {
|
||||
auth: {
|
||||
host: '<%- host_config.host %>',
|
||||
port: '<%- host_config.port %>'
|
||||
},
|
||||
src: '.',
|
||||
dest: '<%- host_config.directory %>',
|
||||
exclusions: [
|
||||
'.DS_Store',
|
||||
'.sass-cache',
|
||||
'.git*',
|
||||
'.host_config',
|
||||
'.ftppass',
|
||||
'node_modules',
|
||||
'sass',
|
||||
'Gruntfile.js',
|
||||
'package.json',
|
||||
'README.markdown'
|
||||
]
|
||||
}
|
||||
},
|
||||
jshint: {
|
||||
files: ['js/color-thief.js']
|
||||
},
|
||||
uglify: {
|
||||
options: {
|
||||
preserveComments: 'some',
|
||||
sourceMap: true
|
||||
},
|
||||
dist: {
|
||||
files: {
|
||||
'js/color-thief.min.js': ['js/color-thief.js']
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
sass: {
|
||||
files: ['sass/*.sass'],
|
||||
tasks: ['compass'],
|
||||
options: {
|
||||
livereload: true,
|
||||
spawn: false
|
||||
},
|
||||
},
|
||||
test: {
|
||||
files: ['js/color-thief.js'],
|
||||
tasks: ['jshint']
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-compass');
|
||||
grunt.loadNpmTasks('grunt-contrib-connect');
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-ftp-deploy');
|
||||
|
||||
|
||||
grunt.registerTask('default', ['compass', 'connect', 'watch']);
|
||||
grunt.registerTask('build', ['compass', 'jshint', 'uglify']);
|
||||
};
|
||||
26
bower.json
Normal file
26
bower.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "color-thief",
|
||||
"version": "2.1.0",
|
||||
"homepage": "http://lokeshdhakar.com/projects/color-thief/",
|
||||
"authors": [
|
||||
"Lokesh Dhakar <lokesh.dhakar@gmail.com>"
|
||||
],
|
||||
"description": "Grab the dominant color or color palette from an image.",
|
||||
"main": "js/color-thief.js",
|
||||
"keywords": [
|
||||
"color",
|
||||
"palette",
|
||||
"picker",
|
||||
"thief",
|
||||
"dominant"
|
||||
],
|
||||
"license": "CC BY 2.5",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"Gruntfile.js",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
]
|
||||
}
|
||||
647
css/app.css
647
css/app.css
@@ -1,647 +0,0 @@
|
||||
/* line 17, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* line 22, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
html {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* line 24, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* line 26, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* line 28, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* line 30, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
q, blockquote {
|
||||
quotes: none;
|
||||
}
|
||||
/* line 103, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
q:before, q:after, blockquote:before, blockquote:after {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* line 32, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* line 116, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* line 22, ../sass/app.sass */
|
||||
body, input, textarea {
|
||||
margin: 40px 40px 80px 40px;
|
||||
color: #aaaaaa;
|
||||
background: #444444;
|
||||
font-size: 18px;
|
||||
font-family: "Karla", "lucida grande", sans-serif;
|
||||
}
|
||||
|
||||
/* line 29, ../sass/app.sass */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: white;
|
||||
line-height: 1.2em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* line 34, ../sass/app.sass */
|
||||
h1 {
|
||||
font-size: 72px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
/* line 38, ../sass/app.sass */
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
/* line 43, ../sass/app.sass */
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.1em;
|
||||
margin-bottom: 0.2em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* line 49, ../sass/app.sass */
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* line 53, ../sass/app.sass */
|
||||
p {
|
||||
line-height: 1.4em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* line 57, ../sass/app.sass */
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* line 60, ../sass/app.sass */
|
||||
code,
|
||||
kbd {
|
||||
font: 12px "Andale Mono", "DejaVu Sans Mono", monospace;
|
||||
color: #848484;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
/* line 66, ../sass/app.sass */
|
||||
a {
|
||||
color: #00bfa8;
|
||||
text-decoration: none;
|
||||
}
|
||||
/* line 69, ../sass/app.sass */
|
||||
a:hover {
|
||||
color: #59ffeb;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
/* line 73, ../sass/app.sass */
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* -- Layout ------------------------------------------------------------------ */
|
||||
/* line 78, ../sass/app.sass */
|
||||
.wrapper {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* line 82, ../sass/app.sass */
|
||||
.section-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* line 85, ../sass/app.sass */
|
||||
.intro {
|
||||
text-align: center;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
/* line 89, ../sass/app.sass */
|
||||
.description {
|
||||
max-width: 450px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* line 94, ../sass/app.sass */
|
||||
.read-more-links {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* line 97, ../sass/app.sass */
|
||||
.image-section {
|
||||
margin-bottom: 80px;
|
||||
background: #2b2b2b;
|
||||
}
|
||||
/* line 100, ../sass/app.sass */
|
||||
.image-section .image-wrap {
|
||||
position: relative;
|
||||
background: #444444;
|
||||
}
|
||||
|
||||
/* line 106, ../sass/app.sass */
|
||||
.examples .image-section .target-image {
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
-webkit-box-shadow: 0 4px 0 #333333;
|
||||
-moz-box-shadow: 0 4px 0 #333333;
|
||||
box-shadow: 0 4px 0 #333333;
|
||||
}
|
||||
/* line 109, ../sass/app.sass */
|
||||
.examples .color-thief-output {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
/* line 112, ../sass/app.sass */
|
||||
.examples .image-section.with-color-thief-output .target-image {
|
||||
-moz-border-radius-bottomleft: 0;
|
||||
-webkit-border-bottom-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
-moz-border-radius-bottomright: 0;
|
||||
-webkit-border-bottom-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
/* line 115, ../sass/app.sass */
|
||||
.examples .image-section.with-color-thief-output .color-thief-output {
|
||||
-webkit-box-shadow: 0 4px 0 #333333;
|
||||
-moz-box-shadow: 0 4px 0 #333333;
|
||||
box-shadow: 0 4px 0 #333333;
|
||||
}
|
||||
|
||||
/* line 118, ../sass/app.sass */
|
||||
.sharing {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* -- Image examples ------------------------------------------------------------------ */
|
||||
/* line 125, ../sass/app.sass */
|
||||
.run-functions-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-top: -50px;
|
||||
margin-left: -50px;
|
||||
border: none;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
-ms-border-radius: 50%;
|
||||
-o-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
color: #686002;
|
||||
background-color: #fdf485;
|
||||
border-bottom: 2px solid #4f4901;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* line 141, ../sass/app.sass */
|
||||
.run-functions-button:hover {
|
||||
background-color: #fef9b7;
|
||||
color: #4f4901;
|
||||
}
|
||||
/* line 144, ../sass/app.sass */
|
||||
.run-functions-button:active {
|
||||
-webkit-transform: scale(0.9, 0.9);
|
||||
-moz-transform: scale(0.9, 0.9);
|
||||
-ms-transform: scale(0.9, 0.9);
|
||||
-o-transform: scale(0.9, 0.9);
|
||||
transform: scale(0.9, 0.9);
|
||||
}
|
||||
/* line 146, ../sass/app.sass */
|
||||
.run-functions-button.hide {
|
||||
-webkit-transition: -webkit-transform 0.4s, top 0.4s;
|
||||
-moz-transition: -moz-transform 0.4s, top 0.4s;
|
||||
-o-transition: -o-transform 0.4s, top 0.4s;
|
||||
transition: transform 0.4s, top 0.4s;
|
||||
top: 100%;
|
||||
-webkit-transform: scale(0, 0);
|
||||
-moz-transform: scale(0, 0);
|
||||
-ms-transform: scale(0, 0);
|
||||
-o-transform: scale(0, 0);
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
|
||||
/* line 153, ../sass/app.sass */
|
||||
.touch .touch-label {
|
||||
display: inline;
|
||||
}
|
||||
/* line 155, ../sass/app.sass */
|
||||
.touch .no-touch-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* line 158, ../sass/app.sass */
|
||||
.no-touch .touch-label {
|
||||
display: none;
|
||||
}
|
||||
/* line 160, ../sass/app.sass */
|
||||
.no-touch .no-touch-label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* line 163, ../sass/app.sass */
|
||||
.target-image {
|
||||
width: 100%;
|
||||
-moz-border-radius-topleft: 4px;
|
||||
-webkit-border-top-left-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
-moz-border-radius-topright: 4px;
|
||||
-webkit-border-top-right-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
/* line 167, ../sass/app.sass */
|
||||
.color-thief-output {
|
||||
display: none;
|
||||
padding: 20px;
|
||||
background-color: #eeeeee;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
-webkit-box-shadow: 0 4px 0 #333333;
|
||||
-moz-box-shadow: 0 4px 0 #333333;
|
||||
box-shadow: 0 4px 0 #333333;
|
||||
}
|
||||
/* line 173, ../sass/app.sass */
|
||||
.color-thief-output .function-title {
|
||||
color: #444444;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* line 177, ../sass/app.sass */
|
||||
.function {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* line 180, ../sass/app.sass */
|
||||
.swatches {
|
||||
*zoom: 1;
|
||||
}
|
||||
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
|
||||
.swatches:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* line 183, ../sass/app.sass */
|
||||
.swatch {
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
margin: 0 2px 2px 0;
|
||||
background: #dddddd;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* line 190, ../sass/app.sass */
|
||||
canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* -- Animated logo ------------------------------------------------------------------ */
|
||||
/* line 195, ../sass/app.sass */
|
||||
.logo .char1 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-moz-transition: color 0.1s;
|
||||
-o-transition: color 0.1s;
|
||||
transition: color 0.1s;
|
||||
}
|
||||
/* line 197, ../sass/app.sass */
|
||||
.logo .char2 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.05s;
|
||||
-moz-transition: color 0.1s 0.05s;
|
||||
-o-transition: color 0.1s 0.05s;
|
||||
transition: color 0.1s 0.05s;
|
||||
}
|
||||
/* line 199, ../sass/app.sass */
|
||||
.logo .char3 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.1s;
|
||||
-moz-transition: color 0.1s 0.1s;
|
||||
-o-transition: color 0.1s 0.1s;
|
||||
transition: color 0.1s 0.1s;
|
||||
}
|
||||
/* line 201, ../sass/app.sass */
|
||||
.logo .char4 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.15s;
|
||||
-moz-transition: color 0.1s 0.15s;
|
||||
-o-transition: color 0.1s 0.15s;
|
||||
transition: color 0.1s 0.15s;
|
||||
}
|
||||
/* line 203, ../sass/app.sass */
|
||||
.logo .char5 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.2s;
|
||||
-moz-transition: color 0.1s 0.2s;
|
||||
-o-transition: color 0.1s 0.2s;
|
||||
transition: color 0.1s 0.2s;
|
||||
}
|
||||
/* line 206, ../sass/app.sass */
|
||||
.logo .char7 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.3s;
|
||||
-moz-transition: color 0.1s 0.3s;
|
||||
-o-transition: color 0.1s 0.3s;
|
||||
transition: color 0.1s 0.3s;
|
||||
}
|
||||
/* line 208, ../sass/app.sass */
|
||||
.logo .char8 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.35s;
|
||||
-moz-transition: color 0.1s 0.35s;
|
||||
-o-transition: color 0.1s 0.35s;
|
||||
transition: color 0.1s 0.35s;
|
||||
}
|
||||
/* line 210, ../sass/app.sass */
|
||||
.logo .char9 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.4s;
|
||||
-moz-transition: color 0.1s 0.4s;
|
||||
-o-transition: color 0.1s 0.4s;
|
||||
transition: color 0.1s 0.4s;
|
||||
}
|
||||
/* line 212, ../sass/app.sass */
|
||||
.logo .char10 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.45s;
|
||||
-moz-transition: color 0.1s 0.45s;
|
||||
-o-transition: color 0.1s 0.45s;
|
||||
transition: color 0.1s 0.45s;
|
||||
}
|
||||
/* line 214, ../sass/app.sass */
|
||||
.logo .char11 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.5s;
|
||||
-moz-transition: color 0.1s 0.5s;
|
||||
-o-transition: color 0.1s 0.5s;
|
||||
transition: color 0.1s 0.5s;
|
||||
}
|
||||
/* line 217, ../sass/app.sass */
|
||||
.logo:hover .char1 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-moz-transition: color 0.1s;
|
||||
-o-transition: color 0.1s;
|
||||
transition: color 0.1s;
|
||||
color: #ff4040;
|
||||
}
|
||||
/* line 220, ../sass/app.sass */
|
||||
.logo:hover .char2 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.05s;
|
||||
-moz-transition: color 0.1s 0.05s;
|
||||
-o-transition: color 0.1s 0.05s;
|
||||
transition: color 0.1s 0.05s;
|
||||
color: #ff8000;
|
||||
}
|
||||
/* line 223, ../sass/app.sass */
|
||||
.logo:hover .char3 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.1s;
|
||||
-moz-transition: color 0.1s 0.1s;
|
||||
-o-transition: color 0.1s 0.1s;
|
||||
transition: color 0.1s 0.1s;
|
||||
color: #fdf485;
|
||||
}
|
||||
/* line 226, ../sass/app.sass */
|
||||
.logo:hover .char4 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.15s;
|
||||
-moz-transition: color 0.1s 0.15s;
|
||||
-o-transition: color 0.1s 0.15s;
|
||||
transition: color 0.1s 0.15s;
|
||||
color: #00bfa8;
|
||||
}
|
||||
/* line 229, ../sass/app.sass */
|
||||
.logo:hover .char5 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.2s;
|
||||
-moz-transition: color 0.1s 0.2s;
|
||||
-o-transition: color 0.1s 0.2s;
|
||||
transition: color 0.1s 0.2s;
|
||||
color: #0096df;
|
||||
}
|
||||
/* line 233, ../sass/app.sass */
|
||||
.logo:hover .char7 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.3s;
|
||||
-moz-transition: color 0.1s 0.3s;
|
||||
-o-transition: color 0.1s 0.3s;
|
||||
transition: color 0.1s 0.3s;
|
||||
color: #ff4040;
|
||||
}
|
||||
/* line 236, ../sass/app.sass */
|
||||
.logo:hover .char8 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.35s;
|
||||
-moz-transition: color 0.1s 0.35s;
|
||||
-o-transition: color 0.1s 0.35s;
|
||||
transition: color 0.1s 0.35s;
|
||||
color: #ff8000;
|
||||
}
|
||||
/* line 239, ../sass/app.sass */
|
||||
.logo:hover .char9 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.4s;
|
||||
-moz-transition: color 0.1s 0.4s;
|
||||
-o-transition: color 0.1s 0.4s;
|
||||
transition: color 0.1s 0.4s;
|
||||
color: #fdf485;
|
||||
}
|
||||
/* line 242, ../sass/app.sass */
|
||||
.logo:hover .char10 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.45s;
|
||||
-moz-transition: color 0.1s 0.45s;
|
||||
-o-transition: color 0.1s 0.45s;
|
||||
transition: color 0.1s 0.45s;
|
||||
color: #00bfa8;
|
||||
}
|
||||
/* line 245, ../sass/app.sass */
|
||||
.logo:hover .char11 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.5s;
|
||||
-moz-transition: color 0.1s 0.5s;
|
||||
-o-transition: color 0.1s 0.5s;
|
||||
transition: color 0.1s 0.5s;
|
||||
color: #0096df;
|
||||
}
|
||||
|
||||
/* -- Drag and drop ------------------------------------------------------------------ */
|
||||
/* line 252, ../sass/app.sass */
|
||||
.drag-drop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* line 255, ../sass/app.sass */
|
||||
.drop-zone {
|
||||
height: 400px;
|
||||
margin-bottom: 80px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
background: url("../img/dark_checkered_bg.png");
|
||||
}
|
||||
/* line 260, ../sass/app.sass */
|
||||
.drop-zone.dragging {
|
||||
-webkit-box-shadow: inset 0 0 0 4px #00bfa8;
|
||||
-moz-box-shadow: inset 0 0 0 4px #00bfa8;
|
||||
box-shadow: inset 0 0 0 4px #00bfa8;
|
||||
}
|
||||
/* line 262, ../sass/app.sass */
|
||||
.drop-zone.dragging .default-label {
|
||||
display: none;
|
||||
}
|
||||
/* line 264, ../sass/app.sass */
|
||||
.drop-zone.dragging .dragging-label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* line 267, ../sass/app.sass */
|
||||
.drop-zone-label {
|
||||
position: relative;
|
||||
top: 170px;
|
||||
padding: 10px;
|
||||
margin: 0 100px;
|
||||
border: 4px solid #fdf485;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
color: #fdf485;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* line 279, ../sass/app.sass */
|
||||
.dragging-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* line 283, ../sass/app.sass */
|
||||
.dropped-image .run-functions-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* -- Responsive design -------------------------------------------------------------- */
|
||||
@media only screen and (max-width: 480px) {
|
||||
/* line 292, ../sass/app.sass */
|
||||
body {
|
||||
margin: 80px 0 40px 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* line 295, ../sass/app.sass */
|
||||
.intro {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
/* line 298, ../sass/app.sass */
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
/* line 300, ../sass/app.sass */
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/* line 302, ../sass/app.sass */
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* line 307, ../sass/app.sass */
|
||||
.examples .image-section .target-image,
|
||||
.dragged-images .image-section .target-image {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
-ms-border-radius: 0;
|
||||
-o-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
/* line 309, ../sass/app.sass */
|
||||
.examples .image-section .color-thief-output,
|
||||
.dragged-images .image-section .color-thief-output {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
-ms-border-radius: 0;
|
||||
-o-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* line 312, ../sass/app.sass */
|
||||
.examples .image-wrap {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
/* line 317, ../sass/app.sass */
|
||||
.examples .image-wrap {
|
||||
min-height: 450px;
|
||||
}
|
||||
}
|
||||
1
css/screen.css
Normal file
1
css/screen.css
Normal file
File diff suppressed because one or more lines are too long
137
demo.js
137
demo.js
@@ -1,137 +0,0 @@
|
||||
$(document).ready(function () {
|
||||
|
||||
// Use lettering.js to generate spans for each letter in the logo.
|
||||
// This is used to create the on hover animated rainbow effect.
|
||||
$('.logo').lettering();
|
||||
|
||||
|
||||
// ---------------------
|
||||
// Color Thief demo code
|
||||
// ---------------------
|
||||
var imageArray = {images: [
|
||||
{'file': 'img/photo1.jpg'},
|
||||
{'file': 'img/photo2.jpg'},
|
||||
{'file': 'img/photo3.jpg'}
|
||||
]};
|
||||
|
||||
// Render example images
|
||||
var examplesHTML = Mustache.to_html($('#image-section-template').html(), imageArray);
|
||||
$('#examples').append(examplesHTML);
|
||||
|
||||
// Event handlers
|
||||
$('.run-functions-button').on('click', function(event) {
|
||||
var $this = $(this);
|
||||
$this.text('...');
|
||||
var $imageSection = $this.closest('.image-section');
|
||||
var $colorThiefOutput = $imageSection.find('.color-thief-output');
|
||||
var $targetimage = $imageSection.find('.target-image');
|
||||
showColorsForImage($targetimage, $imageSection);
|
||||
});
|
||||
|
||||
var colorThief = new ColorThief();
|
||||
|
||||
// Run Color Thief functions and display results below image.
|
||||
// We also log execution time of functions for display.
|
||||
var showColorsForImage = function($image, $imageSection ) {
|
||||
var image = $image[0];
|
||||
var start = Date.now();
|
||||
var color = colorThief.getColor(image);
|
||||
var elapsedTimeForGetColor = Date.now() - start;
|
||||
var palette = colorThief.getPalette(image);
|
||||
var elapsedTimeForGetPalette = Date.now() - start + elapsedTimeForGetColor;
|
||||
|
||||
var colorThiefOutput = {
|
||||
color: color,
|
||||
palette: palette,
|
||||
elapsedTimeForGetColor: elapsedTimeForGetColor,
|
||||
elapsedTimeForGetPalette: elapsedTimeForGetPalette
|
||||
};
|
||||
var colorThiefOuputHTML = Mustache.to_html($('#color-thief-output-template').html(), colorThiefOutput);
|
||||
$imageSection.addClass('with-color-thief-output');
|
||||
$imageSection.find('.run-functions-button').addClass('hide');
|
||||
$imageSection.find('.color-thief-output').append(colorThiefOuputHTML).slideDown();
|
||||
|
||||
// If the color-thief-output div is not in the viewport or cut off, scroll down.
|
||||
var windowHeight = $(window).height();
|
||||
var currentScrollPosition = $('body').scrollTop()
|
||||
var outputOffsetTop = $imageSection.find('.color-thief-output').offset().top
|
||||
if ((currentScrollPosition < outputOffsetTop) && (currentScrollPosition + windowHeight - 250 < outputOffsetTop)) {
|
||||
$('body').animate({scrollTop: outputOffsetTop - windowHeight + 200 + "px"});
|
||||
}
|
||||
};
|
||||
|
||||
// Drag'n'drop demo
|
||||
// Thanks to Nathan Spady (http://nspady.com/) who did the bulk of the drag'n'drop work.
|
||||
|
||||
// Setup the drag and drop behavior if supported
|
||||
if (Modernizr.draganddrop && !!window.FileReader && !isMobile()) {
|
||||
|
||||
$('#drag-drop').show();
|
||||
var $dropZone = $('#drop-zone');
|
||||
var handleDragEnter = function(event){
|
||||
$dropZone.addClass('dragging');
|
||||
return false;
|
||||
};
|
||||
var handleDragLeave = function(event){
|
||||
$dropZone.removeClass('dragging');
|
||||
return false;
|
||||
};
|
||||
var handleDragOver = function(event){
|
||||
return false;
|
||||
};
|
||||
var handleDrop = function(event){
|
||||
$dropZone.removeClass('dragging');
|
||||
handleFiles(event.originalEvent.dataTransfer.files);
|
||||
return false;
|
||||
};
|
||||
$dropZone
|
||||
.on('dragenter', handleDragEnter)
|
||||
.on('dragleave', handleDragLeave)
|
||||
.on('dragover', handleDragOver)
|
||||
.on('drop', handleDrop);
|
||||
}
|
||||
|
||||
function handleFiles(files) {
|
||||
var $draggedImages = $('#dragged-images');
|
||||
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(event) {
|
||||
imageInfo = { images: [
|
||||
{'class': 'dropped-image', file: event.target.result}
|
||||
]};
|
||||
|
||||
var imageSectionHTML = Mustache.to_html($('#image-section-template').html(), imageInfo);
|
||||
$draggedImages.prepend(imageSectionHTML);
|
||||
|
||||
var $imageSection = $draggedImages.find('.image-section').first();
|
||||
var $image = $('.dropped-image .target-image');
|
||||
|
||||
// Must wait for image to load in DOM, not just load from FileReader
|
||||
$image.on('load', function() {
|
||||
showColorsForImage($image, $imageSection);
|
||||
});
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
alert('File must be a supported image type.');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// This is not good practice. :-P
|
||||
function isMobile(){
|
||||
// if we want a more complete list use this: http://detectmobilebrowsers.com/
|
||||
// str.test() is more efficent than str.match()
|
||||
// remember str.test is case sensitive
|
||||
var isMobile = (/iphone|ipod|ipad|android|ie|blackberry|fennec/).test
|
||||
(navigator.userAgent.toLowerCase());
|
||||
return isMobile;
|
||||
}
|
||||
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 949 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
173
index.html
173
index.html
@@ -6,113 +6,122 @@
|
||||
|
||||
<title>Color Thief</title>
|
||||
|
||||
<meta name="description" content="Color Thief is a script for grabbing the color palette from an image. It uses Javacript and the canvas tag.">
|
||||
<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">
|
||||
|
||||
<script src="js/libs/modernizr.custom.js"></script>
|
||||
<link href='http://fonts.googleapis.com/css?family=Karla:400,700' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla%7CMontserrat:700">
|
||||
<link rel="stylesheet" href="css/screen.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<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>
|
||||
|
||||
<section class="intro">
|
||||
<header>
|
||||
<h1 class="logo">Color Thief</h1>
|
||||
</header>
|
||||
<h4><a href="http://lokeshdhakar.com">by Lokesh Dhakar</a></small></h4>
|
||||
<p class="description">A script for grabbing the color palette from an image. Uses Javascript and the canvas tag to make it happen.</p>
|
||||
<p class="read-more-links"><a href="http://www.lokeshdhakar.com/color-thief/">Read more about it on my blog</a> or <a href="https://github.com/lokesh/color-thief">get the code on Github</a></p>
|
||||
</section>
|
||||
<a href="https://github.com/lokesh/color-thief/" class="button">
|
||||
Download from Github</small>
|
||||
</a>
|
||||
|
||||
<section id="examples" class="examples">
|
||||
<header>
|
||||
<h2 class="section-header">Examples</h2>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<section id="drag-drop" class="drag-drop">
|
||||
<header>
|
||||
<h2 class="section-header">Try it yourself</h2>
|
||||
</header>
|
||||
<div id="drop-zone" class="drop-zone">
|
||||
<div class="drop-zone-label default-label">Drag an image here</div>
|
||||
<div class="drop-zone-label dragging-label">Drop it here!</div>
|
||||
</div>
|
||||
<div id="dragged-images" class="dragged-images"></div>
|
||||
</header>
|
||||
|
||||
<section id="examples" class="examples-section">
|
||||
<div class="container">
|
||||
<h2>Examples</h2>
|
||||
<div id="example-images"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="sharing" class="sharing">
|
||||
<section id="drag-drop" class="drag-drop-section">
|
||||
<div class="container">
|
||||
<h2>Try it yourself</h2>
|
||||
<div id="drop-zone" class="drop-zone">
|
||||
<div class="drop-zone-label default-label">Drag an image here</div>
|
||||
<div class="drop-zone-label dragging-label">Drop it!</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>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="js/libs/jquery-2.0.2.min.js"></script>
|
||||
<script src="js/libs/jquery.lettering.js"></script>
|
||||
<script src="js/libs/mustache.js"></script>
|
||||
<script src="js/color-thief.js"></script>
|
||||
|
||||
|
||||
<!-- 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 id="color-thief-output-template" type="text/x-mustache">
|
||||
<div class="function get-color">
|
||||
<h3 class="function-title">Dominant Color</h3>
|
||||
<div class="swatches">
|
||||
<div class="swatch" style="background-color: rgb({{color.0}}, {{color.1}}, {{color.2}})"></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>
|
||||
<div class="function-code">
|
||||
<code>colorThief.getColor(image):{{elapsedTimeForGetColor}}ms</code>
|
||||
</div>
|
||||
</div>
|
||||
<div class="function get-palette">
|
||||
<h3 class="function-title">Palette</h3>
|
||||
<div class="function-output">
|
||||
{{/images}}
|
||||
</script>
|
||||
|
||||
<script id="color-thief-output-template" type="text/x-mustache">
|
||||
<div class="function get-color">
|
||||
<h3 class="function-title">Dominant Color</h3>
|
||||
<div class="swatches">
|
||||
{{#palette}}
|
||||
<div class="swatch" style="background-color: rgb({{0}}, {{1}}, {{2}})"></div>
|
||||
{{/palette}}
|
||||
<div class="swatch" style="background-color: rgb({{color.0}}, {{color.1}}, {{color.2}})"></div>
|
||||
</div>
|
||||
<div class="function-code">
|
||||
<code>colorThief.getColor(image):{{elapsedTimeForGetColor}}ms</code>
|
||||
</div>
|
||||
</div>
|
||||
<div class="function-code">
|
||||
<code>colorThief.getPalette(image):{{elapsedTimeForGetPalette}}ms</code>
|
||||
<div class="function get-palette">
|
||||
<h3 class="function-title">Palette</h3>
|
||||
<div class="function-output">
|
||||
<div class="swatches">
|
||||
{{#palette}}
|
||||
<div class="swatch" style="background-color: rgb({{0}}, {{1}}, {{2}})"></div>
|
||||
{{/palette}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="function-code">
|
||||
<code>colorThief.getPalette(image):{{elapsedTimeForGetPalette}}ms</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
</script>
|
||||
|
||||
|
||||
<script src="demo.js"></script>
|
||||
<script type="text/javascript">
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-2196019-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
<script src="js/jquery.js"></script>
|
||||
<script src="js/mustache.js"></script>
|
||||
<script src="js/color-thief.js"></script>
|
||||
<script src="js/demo.js"></script>
|
||||
|
||||
(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>
|
||||
<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>
|
||||
</html>
|
||||
|
||||
@@ -98,10 +98,10 @@ ColorThief.prototype.getPalette = function(sourceImage, colorCount, quality) {
|
||||
|
||||
if (typeof colorCount === 'undefined') {
|
||||
colorCount = 10;
|
||||
};
|
||||
}
|
||||
if (typeof quality === 'undefined') {
|
||||
quality = 10;
|
||||
};
|
||||
}
|
||||
|
||||
// Create custom CanvasImage object
|
||||
var image = new CanvasImage(sourceImage);
|
||||
@@ -154,18 +154,14 @@ if (!pv) {
|
||||
var pv = {
|
||||
map: function(array, f) {
|
||||
var o = {};
|
||||
return f
|
||||
? array.map(function(d, i) { o.index = i; return f.call(o, d); })
|
||||
: array.slice();
|
||||
return f ? array.map(function(d, i) { o.index = i; return f.call(o, d); }) : array.slice();
|
||||
},
|
||||
naturalOrder: function(a, b) {
|
||||
return (a < b) ? -1 : ((a > b) ? 1 : 0);
|
||||
},
|
||||
sum: function(array, f) {
|
||||
var o = {};
|
||||
return array.reduce(f
|
||||
? function(p, d, i) { o.index = i; return p + f.call(o, d); }
|
||||
: function(p, d) { return p + d; }, 0);
|
||||
return array.reduce(f ? function(p, d, i) { o.index = i; return p + f.call(o, d); } : function(p, d) { return p + d; }, 0);
|
||||
},
|
||||
max: function(array, f) {
|
||||
return Math.max.apply(null, f ? pv.map(array, f) : array);
|
||||
@@ -341,8 +337,8 @@ var MMCQ = (function() {
|
||||
return pv.naturalOrder(
|
||||
a.vbox.count()*a.vbox.volume(),
|
||||
b.vbox.count()*b.vbox.volume()
|
||||
)
|
||||
});;
|
||||
);
|
||||
});
|
||||
}
|
||||
CMap.prototype = {
|
||||
push: function(vbox) {
|
||||
@@ -352,7 +348,7 @@ var MMCQ = (function() {
|
||||
});
|
||||
},
|
||||
palette: function() {
|
||||
return this.vboxes.map(function(vb) { return vb.color });
|
||||
return this.vboxes.map(function(vb) { return vb.color; });
|
||||
},
|
||||
size: function() {
|
||||
return this.vboxes.size();
|
||||
@@ -385,7 +381,7 @@ var MMCQ = (function() {
|
||||
forcebw: function() {
|
||||
// XXX: won't work yet
|
||||
var vboxes = this.vboxes;
|
||||
vboxes.sort(function(a,b) { return pv.naturalOrder(pv.sum(a.color), pv.sum(b.color) )});
|
||||
vboxes.sort(function(a,b) { return pv.naturalOrder(pv.sum(a.color), pv.sum(b.color));});
|
||||
|
||||
// force darkest color to black if everything < 5
|
||||
var lowest = vboxes[0].color;
|
||||
@@ -445,7 +441,7 @@ var MMCQ = (function() {
|
||||
maxw = pv.max([rw, gw, bw]);
|
||||
// only one pixel, no split
|
||||
if (vbox.count() == 1) {
|
||||
return [vbox.copy()]
|
||||
return [vbox.copy()];
|
||||
}
|
||||
/* Find the partial sum arrays along the selected axis. */
|
||||
var total = 0,
|
||||
@@ -492,7 +488,7 @@ var MMCQ = (function() {
|
||||
}
|
||||
}
|
||||
partialsum.forEach(function(d,i) {
|
||||
lookaheadsum[i] = total-d
|
||||
lookaheadsum[i] = total-d;
|
||||
});
|
||||
function doCut(color) {
|
||||
var dim1 = color + '1',
|
||||
@@ -540,14 +536,14 @@ var MMCQ = (function() {
|
||||
|
||||
// check that we aren't below maxcolors already
|
||||
var nColors = 0;
|
||||
histo.forEach(function() { nColors++ });
|
||||
histo.forEach(function() { nColors++; });
|
||||
if (nColors <= maxcolors) {
|
||||
// XXX: generate the new colors from the histo and return
|
||||
}
|
||||
|
||||
// get the beginning vbox from the colors
|
||||
var vbox = vboxFromPixels(pixels, histo),
|
||||
pq = new PQueue(function(a,b) { return pv.naturalOrder(a.count(), b.count()) });
|
||||
pq = new PQueue(function(a,b) { return pv.naturalOrder(a.count(), b.count()); });
|
||||
pq.push(vbox);
|
||||
|
||||
// inner function to do the iteration
|
||||
@@ -589,7 +585,7 @@ var MMCQ = (function() {
|
||||
|
||||
// Re-sort by the product of pixel occupancy times the size in color space.
|
||||
var pq2 = new PQueue(function(a,b) {
|
||||
return pv.naturalOrder(a.count()*a.volume(), b.count()*b.volume())
|
||||
return pv.naturalOrder(a.count()*a.volume(), b.count()*b.volume());
|
||||
});
|
||||
while (pq.size()) {
|
||||
pq2.push(pq.pop());
|
||||
@@ -609,5 +605,5 @@ var MMCQ = (function() {
|
||||
|
||||
return {
|
||||
quantize: quantize
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
27
js/color-thief.min.js
vendored
Normal file
27
js/color-thief.min.js
vendored
Normal file
@@ -0,0 +1,27 @@
|
||||
/*!
|
||||
* Color Thief v2.0
|
||||
* by Lokesh Dhakar - http://www.lokeshdhakar.com
|
||||
*
|
||||
* License
|
||||
* -------
|
||||
* Creative Commons Attribution 2.5 License:
|
||||
* http://creativecommons.org/licenses/by/2.5/
|
||||
*
|
||||
* Thanks
|
||||
* ------
|
||||
* Nick Rabinowitz - For creating quantize.js.
|
||||
* John Schulz - For clean up and optimization. @JFSIII
|
||||
* Nathan Spady - For adding drag and drop support to the demo page.
|
||||
*
|
||||
*/
|
||||
var CanvasImage=function(a){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),document.body.appendChild(this.canvas),this.width=this.canvas.width=a.width,this.height=this.canvas.height=a.height,this.context.drawImage(a,0,0,this.width,this.height)};CanvasImage.prototype.clear=function(){this.context.clearRect(0,0,this.width,this.height)},CanvasImage.prototype.update=function(a){this.context.putImageData(a,0,0)},CanvasImage.prototype.getPixelCount=function(){return this.width*this.height},CanvasImage.prototype.getImageData=function(){return this.context.getImageData(0,0,this.width,this.height)},CanvasImage.prototype.removeCanvas=function(){this.canvas.parentNode.removeChild(this.canvas)};var ColorThief=function(){};/*!
|
||||
* quantize.js Copyright 2008 Nick Rabinowitz.
|
||||
* Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
/*!
|
||||
* Block below copied from Protovis: http://mbostock.github.com/protovis/
|
||||
* Copyright 2010 Stanford Visualization Group
|
||||
* Licensed under the BSD License: http://www.opensource.org/licenses/bsd-license.php
|
||||
*/
|
||||
if(ColorThief.prototype.getColor=function(a,b){var c=this.getPalette(a,5,b),d=c[0];return d},ColorThief.prototype.getPalette=function(a,b,c){"undefined"==typeof b&&(b=10),"undefined"==typeof c&&(c=10);for(var d,e,f,g,h,i=new CanvasImage(a),j=i.getImageData(),k=j.data,l=i.getPixelCount(),m=[],n=0;l>n;n+=c)d=4*n,e=k[d+0],f=k[d+1],g=k[d+2],h=k[d+3],h>=125&&(e>250&&f>250&&g>250||m.push([e,f,g]));var o=MMCQ.quantize(m,b),p=o.palette();return i.removeCanvas(),p},!pv)var pv={map:function(a,b){var c={};return b?a.map(function(a,d){return c.index=d,b.call(c,a)}):a.slice()},naturalOrder:function(a,b){return b>a?-1:a>b?1:0},sum:function(a,b){var c={};return a.reduce(b?function(a,d,e){return c.index=e,a+b.call(c,d)}:function(a,b){return a+b},0)},max:function(a,b){return Math.max.apply(null,b?pv.map(a,b):a)}};var MMCQ=function(){function a(a,b,c){return(a<<2*i)+(b<<i)+c}function b(a){function b(){c.sort(a),d=!0}var c=[],d=!1;return{push:function(a){c.push(a),d=!1},peek:function(a){return d||b(),void 0===a&&(a=c.length-1),c[a]},pop:function(){return d||b(),c.pop()},size:function(){return c.length},map:function(a){return c.map(a)},debug:function(){return d||b(),c}}}function c(a,b,c,d,e,f,g){var h=this;h.r1=a,h.r2=b,h.g1=c,h.g2=d,h.b1=e,h.b2=f,h.histo=g}function d(){this.vboxes=new b(function(a,b){return pv.naturalOrder(a.vbox.count()*a.vbox.volume(),b.vbox.count()*b.vbox.volume())})}function e(b){var c,d,e,f,g=1<<3*i,h=new Array(g);return b.forEach(function(b){d=b[0]>>j,e=b[1]>>j,f=b[2]>>j,c=a(d,e,f),h[c]=(h[c]||0)+1}),h}function f(a,b){var d,e,f,g=1e6,h=0,i=1e6,k=0,l=1e6,m=0;return a.forEach(function(a){d=a[0]>>j,e=a[1]>>j,f=a[2]>>j,g>d?g=d:d>h&&(h=d),i>e?i=e:e>k&&(k=e),l>f?l=f:f>m&&(m=f)}),new c(g,h,i,k,l,m,b)}function g(b,c){function d(a){var b,d,e,f,g,h=a+"1",j=a+"2",k=0;for(i=c[h];i<=c[j];i++)if(o[i]>n/2){for(e=c.copy(),f=c.copy(),b=i-c[h],d=c[j]-i,g=d>=b?Math.min(c[j]-1,~~(i+d/2)):Math.max(c[h],~~(i-1-b/2));!o[g];)g++;for(k=p[g];!k&&o[g-1];)k=p[--g];return e[j]=g,f[h]=e[j]+1,[e,f]}}if(c.count()){var e=c.r2-c.r1+1,f=c.g2-c.g1+1,g=c.b2-c.b1+1,h=pv.max([e,f,g]);if(1==c.count())return[c.copy()];var i,j,k,l,m,n=0,o=[],p=[];if(h==e)for(i=c.r1;i<=c.r2;i++){for(l=0,j=c.g1;j<=c.g2;j++)for(k=c.b1;k<=c.b2;k++)m=a(i,j,k),l+=b[m]||0;n+=l,o[i]=n}else if(h==f)for(i=c.g1;i<=c.g2;i++){for(l=0,j=c.r1;j<=c.r2;j++)for(k=c.b1;k<=c.b2;k++)m=a(j,i,k),l+=b[m]||0;n+=l,o[i]=n}else for(i=c.b1;i<=c.b2;i++){for(l=0,j=c.r1;j<=c.r2;j++)for(k=c.g1;k<=c.g2;k++)m=a(j,k,i),l+=b[m]||0;n+=l,o[i]=n}return o.forEach(function(a,b){p[b]=n-a}),d(h==e?"r":h==f?"g":"b")}}function h(a,c){function h(a,b){for(var c,d=1,e=0;k>e;)if(c=a.pop(),c.count()){var f=g(i,c),h=f[0],j=f[1];if(!h)return;if(a.push(h),j&&(a.push(j),d++),d>=b)return;if(e++>k)return}else a.push(c),e++}if(!a.length||2>c||c>256)return!1;var i=e(a),j=0;i.forEach(function(){j++});var m=f(a,i),n=new b(function(a,b){return pv.naturalOrder(a.count(),b.count())});n.push(m),h(n,l*c);for(var o=new b(function(a,b){return pv.naturalOrder(a.count()*a.volume(),b.count()*b.volume())});n.size();)o.push(n.pop());h(o,c-o.size());for(var p=new d;o.size();)p.push(o.pop());return p}var i=5,j=8-i,k=1e3,l=.75;return c.prototype={volume:function(a){var b=this;return(!b._volume||a)&&(b._volume=(b.r2-b.r1+1)*(b.g2-b.g1+1)*(b.b2-b.b1+1)),b._volume},count:function(b){var c=this,d=c.histo;if(!c._count_set||b){var e,f,g,h=0;for(e=c.r1;e<=c.r2;e++)for(f=c.g1;f<=c.g2;f++)for(g=c.b1;g<=c.b2;g++)index=a(e,f,g),h+=d[index]||0;c._count=h,c._count_set=!0}return c._count},copy:function(){var a=this;return new c(a.r1,a.r2,a.g1,a.g2,a.b1,a.b2,a.histo)},avg:function(b){var c=this,d=c.histo;if(!c._avg||b){var e,f,g,h,j,k=0,l=1<<8-i,m=0,n=0,o=0;for(f=c.r1;f<=c.r2;f++)for(g=c.g1;g<=c.g2;g++)for(h=c.b1;h<=c.b2;h++)j=a(f,g,h),e=d[j]||0,k+=e,m+=e*(f+.5)*l,n+=e*(g+.5)*l,o+=e*(h+.5)*l;c._avg=k?[~~(m/k),~~(n/k),~~(o/k)]:[~~(l*(c.r1+c.r2+1)/2),~~(l*(c.g1+c.g2+1)/2),~~(l*(c.b1+c.b2+1)/2)]}return c._avg},contains:function(a){var b=this,c=a[0]>>j;return gval=a[1]>>j,bval=a[2]>>j,c>=b.r1&&c<=b.r2&&gval>=b.g1&&gval<=b.g2&&bval>=b.b1&&bval<=b.b2}},d.prototype={push:function(a){this.vboxes.push({vbox:a,color:a.avg()})},palette:function(){return this.vboxes.map(function(a){return a.color})},size:function(){return this.vboxes.size()},map:function(a){for(var b=this.vboxes,c=0;c<b.size();c++)if(b.peek(c).vbox.contains(a))return b.peek(c).color;return this.nearest(a)},nearest:function(a){for(var b,c,d,e=this.vboxes,f=0;f<e.size();f++)c=Math.sqrt(Math.pow(a[0]-e.peek(f).color[0],2)+Math.pow(a[1]-e.peek(f).color[1],2)+Math.pow(a[2]-e.peek(f).color[2],2)),(b>c||void 0===b)&&(b=c,d=e.peek(f).color);return d},forcebw:function(){var a=this.vboxes;a.sort(function(a,b){return pv.naturalOrder(pv.sum(a.color),pv.sum(b.color))});var b=a[0].color;b[0]<5&&b[1]<5&&b[2]<5&&(a[0].color=[0,0,0]);var c=a.length-1,d=a[c].color;d[0]>251&&d[1]>251&&d[2]>251&&(a[c].color=[255,255,255])}},{quantize:h}}();
|
||||
//# sourceMappingURL=color-thief.min.map
|
||||
1
js/color-thief.min.map
Normal file
1
js/color-thief.min.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
9111
js/jquery.js
vendored
Normal file
9111
js/jquery.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
6
js/libs/jquery-2.0.2.min.js
vendored
6
js/libs/jquery-2.0.2.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,66 +0,0 @@
|
||||
/*global jQuery */
|
||||
/*!
|
||||
* Lettering.JS 0.6.1
|
||||
*
|
||||
* Copyright 2010, Dave Rupert http://daverupert.com
|
||||
* Released under the WTFPL license
|
||||
* http://sam.zoy.org/wtfpl/
|
||||
*
|
||||
* Thanks to Paul Irish - http://paulirish.com - for the feedback.
|
||||
*
|
||||
* Date: Mon Sep 20 17:14:00 2010 -0600
|
||||
*/
|
||||
(function($){
|
||||
function injector(t, splitter, klass, after) {
|
||||
var a = t.text().split(splitter), inject = '';
|
||||
if (a.length) {
|
||||
$(a).each(function(i, item) {
|
||||
inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after;
|
||||
});
|
||||
t.empty().append(inject);
|
||||
}
|
||||
}
|
||||
|
||||
var methods = {
|
||||
init : function() {
|
||||
|
||||
return this.each(function() {
|
||||
injector($(this), '', 'char', '');
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
words : function() {
|
||||
|
||||
return this.each(function() {
|
||||
injector($(this), ' ', 'word', ' ');
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
lines : function() {
|
||||
|
||||
return this.each(function() {
|
||||
var r = "eefec303079ad17405c889e092e105b0";
|
||||
// Because it's hard to split a <br/> tag consistently across browsers,
|
||||
// (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash
|
||||
// (of the word "split"). If you're trying to use this plugin on that
|
||||
// md5 hash string, it will fail because you're being ridiculous.
|
||||
injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.lettering = function( method ) {
|
||||
// Method calling logic
|
||||
if ( method && methods[method] ) {
|
||||
return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
|
||||
} else if ( method === 'letters' || ! method ) {
|
||||
return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
|
||||
}
|
||||
$.error( 'Method ' + method + ' does not exist on jQuery.lettering' );
|
||||
return this;
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
@@ -1,419 +0,0 @@
|
||||
/*
|
||||
mustache.js — Logic-less templates in JavaScript
|
||||
|
||||
See http://mustache.github.com/ for more info.
|
||||
*/
|
||||
|
||||
var Mustache = function() {
|
||||
var regexCache = {};
|
||||
var Renderer = function() {};
|
||||
|
||||
Renderer.prototype = {
|
||||
otag: "{{",
|
||||
ctag: "}}",
|
||||
pragmas: {},
|
||||
buffer: [],
|
||||
pragmas_implemented: {
|
||||
"IMPLICIT-ITERATOR": true
|
||||
},
|
||||
context: {},
|
||||
|
||||
render: function(template, context, partials, in_recursion) {
|
||||
// reset buffer & set context
|
||||
if(!in_recursion) {
|
||||
this.context = context;
|
||||
this.buffer = []; // TODO: make this non-lazy
|
||||
}
|
||||
|
||||
// fail fast
|
||||
if(!this.includes("", template)) {
|
||||
if(in_recursion) {
|
||||
return template;
|
||||
} else {
|
||||
this.send(template);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// get the pragmas together
|
||||
template = this.render_pragmas(template);
|
||||
|
||||
// render the template
|
||||
var html = this.render_section(template, context, partials);
|
||||
|
||||
// render_section did not find any sections, we still need to render the tags
|
||||
if (html === false) {
|
||||
html = this.render_tags(template, context, partials, in_recursion);
|
||||
}
|
||||
|
||||
if (in_recursion) {
|
||||
return html;
|
||||
} else {
|
||||
this.sendLines(html);
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
Sends parsed lines
|
||||
*/
|
||||
send: function(line) {
|
||||
if(line !== "") {
|
||||
this.buffer.push(line);
|
||||
}
|
||||
},
|
||||
|
||||
sendLines: function(text) {
|
||||
if (text) {
|
||||
var lines = text.split("\n");
|
||||
for (var i = 0; i < lines.length; i++) {
|
||||
this.send(lines[i]);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
Looks for %PRAGMAS
|
||||
*/
|
||||
render_pragmas: function(template) {
|
||||
// no pragmas
|
||||
if(!this.includes("%", template)) {
|
||||
return template;
|
||||
}
|
||||
|
||||
var that = this;
|
||||
var regex = this.getCachedRegex("render_pragmas", function(otag, ctag) {
|
||||
return new RegExp(otag + "%([\\w-]+) ?([\\w]+=[\\w]+)?" + ctag, "g");
|
||||
});
|
||||
|
||||
return template.replace(regex, function(match, pragma, options) {
|
||||
if(!that.pragmas_implemented[pragma]) {
|
||||
throw({message:
|
||||
"This implementation of mustache doesn't understand the '" +
|
||||
pragma + "' pragma"});
|
||||
}
|
||||
that.pragmas[pragma] = {};
|
||||
if(options) {
|
||||
var opts = options.split("=");
|
||||
that.pragmas[pragma][opts[0]] = opts[1];
|
||||
}
|
||||
return "";
|
||||
// ignore unknown pragmas silently
|
||||
});
|
||||
},
|
||||
|
||||
/*
|
||||
Tries to find a partial in the curent scope and render it
|
||||
*/
|
||||
render_partial: function(name, context, partials) {
|
||||
name = this.trim(name);
|
||||
if(!partials || partials[name] === undefined) {
|
||||
throw({message: "unknown_partial '" + name + "'"});
|
||||
}
|
||||
if(typeof(context[name]) != "object") {
|
||||
return this.render(partials[name], context, partials, true);
|
||||
}
|
||||
return this.render(partials[name], context[name], partials, true);
|
||||
},
|
||||
|
||||
/*
|
||||
Renders inverted (^) and normal (#) sections
|
||||
*/
|
||||
render_section: function(template, context, partials) {
|
||||
if(!this.includes("#", template) && !this.includes("^", template)) {
|
||||
// did not render anything, there were no sections
|
||||
return false;
|
||||
}
|
||||
|
||||
var that = this;
|
||||
|
||||
var regex = this.getCachedRegex("render_section", function(otag, ctag) {
|
||||
// This regex matches _the first_ section ({{#foo}}{{/foo}}), and captures the remainder
|
||||
return new RegExp(
|
||||
"^([\\s\\S]*?)" + // all the crap at the beginning that is not {{*}} ($1)
|
||||
|
||||
otag + // {{
|
||||
"(\\^|\\#)\\s*(.+)\\s*" + // #foo (# == $2, foo == $3)
|
||||
ctag + // }}
|
||||
|
||||
"\n*([\\s\\S]*?)" + // between the tag ($2). leading newlines are dropped
|
||||
|
||||
otag + // {{
|
||||
"\\/\\s*\\3\\s*" + // /foo (backreference to the opening tag).
|
||||
ctag + // }}
|
||||
|
||||
"\\s*([\\s\\S]*)$", // everything else in the string ($4). leading whitespace is dropped.
|
||||
|
||||
"g");
|
||||
});
|
||||
|
||||
|
||||
// for each {{#foo}}{{/foo}} section do...
|
||||
return template.replace(regex, function(match, before, type, name, content, after) {
|
||||
// before contains only tags, no sections
|
||||
var renderedBefore = before ? that.render_tags(before, context, partials, true) : "",
|
||||
|
||||
// after may contain both sections and tags, so use full rendering function
|
||||
renderedAfter = after ? that.render(after, context, partials, true) : "",
|
||||
|
||||
// will be computed below
|
||||
renderedContent,
|
||||
|
||||
value = that.find(name, context);
|
||||
|
||||
if (type === "^") { // inverted section
|
||||
if (!value || that.is_array(value) && value.length === 0) {
|
||||
// false or empty list, render it
|
||||
renderedContent = that.render(content, context, partials, true);
|
||||
} else {
|
||||
renderedContent = "";
|
||||
}
|
||||
} else if (type === "#") { // normal section
|
||||
if (that.is_array(value)) { // Enumerable, Let's loop!
|
||||
renderedContent = that.map(value, function(row) {
|
||||
return that.render(content, that.create_context(row), partials, true);
|
||||
}).join("");
|
||||
} else if (that.is_object(value)) { // Object, Use it as subcontext!
|
||||
renderedContent = that.render(content, that.create_context(value),
|
||||
partials, true);
|
||||
} else if (typeof value === "function") {
|
||||
// higher order section
|
||||
renderedContent = value.call(context, content, function(text) {
|
||||
return that.render(text, context, partials, true);
|
||||
});
|
||||
} else if (value) { // boolean section
|
||||
renderedContent = that.render(content, context, partials, true);
|
||||
} else {
|
||||
renderedContent = "";
|
||||
}
|
||||
}
|
||||
|
||||
return renderedBefore + renderedContent + renderedAfter;
|
||||
});
|
||||
},
|
||||
|
||||
/*
|
||||
Replace {{foo}} and friends with values from our view
|
||||
*/
|
||||
render_tags: function(template, context, partials, in_recursion) {
|
||||
// tit for tat
|
||||
var that = this;
|
||||
|
||||
|
||||
|
||||
var new_regex = function() {
|
||||
return that.getCachedRegex("render_tags", function(otag, ctag) {
|
||||
return new RegExp(otag + "(=|!|>|\\{|%)?([^\\/#\\^]+?)\\1?" + ctag + "+", "g");
|
||||
});
|
||||
};
|
||||
|
||||
var regex = new_regex();
|
||||
var tag_replace_callback = function(match, operator, name) {
|
||||
switch(operator) {
|
||||
case "!": // ignore comments
|
||||
return "";
|
||||
case "=": // set new delimiters, rebuild the replace regexp
|
||||
that.set_delimiters(name);
|
||||
regex = new_regex();
|
||||
return "";
|
||||
case ">": // render partial
|
||||
return that.render_partial(name, context, partials);
|
||||
case "{": // the triple mustache is unescaped
|
||||
return that.find(name, context);
|
||||
default: // escape the value
|
||||
return that.escape(that.find(name, context));
|
||||
}
|
||||
};
|
||||
var lines = template.split("\n");
|
||||
for(var i = 0; i < lines.length; i++) {
|
||||
lines[i] = lines[i].replace(regex, tag_replace_callback, this);
|
||||
if(!in_recursion) {
|
||||
this.send(lines[i]);
|
||||
}
|
||||
}
|
||||
|
||||
if(in_recursion) {
|
||||
return lines.join("\n");
|
||||
}
|
||||
},
|
||||
|
||||
set_delimiters: function(delimiters) {
|
||||
var dels = delimiters.split(" ");
|
||||
this.otag = this.escape_regex(dels[0]);
|
||||
this.ctag = this.escape_regex(dels[1]);
|
||||
},
|
||||
|
||||
escape_regex: function(text) {
|
||||
// thank you Simon Willison
|
||||
if(!arguments.callee.sRE) {
|
||||
var specials = [
|
||||
'/', '.', '*', '+', '?', '|',
|
||||
'(', ')', '[', ']', '{', '}', '\\'
|
||||
];
|
||||
arguments.callee.sRE = new RegExp(
|
||||
'(\\' + specials.join('|\\') + ')', 'g'
|
||||
);
|
||||
}
|
||||
return text.replace(arguments.callee.sRE, '\\$1');
|
||||
},
|
||||
|
||||
/*
|
||||
find `name` in current `context`. That is find me a value
|
||||
from the view object
|
||||
*/
|
||||
find: function(name, context) {
|
||||
name = this.trim(name);
|
||||
|
||||
// Checks whether a value is thruthy or false or 0
|
||||
function is_kinda_truthy(bool) {
|
||||
return bool === false || bool === 0 || bool;
|
||||
}
|
||||
|
||||
var value;
|
||||
|
||||
// check for dot notation eg. foo.bar
|
||||
if(name.match(/([a-z_]+)\./ig)){
|
||||
value = is_kinda_truthy(this.walk_context(name, context));
|
||||
}
|
||||
else{
|
||||
if(is_kinda_truthy(context[name])) {
|
||||
value = context[name];
|
||||
} else if(is_kinda_truthy(this.context[name])) {
|
||||
value = this.context[name];
|
||||
}
|
||||
}
|
||||
|
||||
if(typeof value === "function") {
|
||||
return value.apply(context);
|
||||
}
|
||||
if(value !== undefined) {
|
||||
return value;
|
||||
}
|
||||
// silently ignore unkown variables
|
||||
return "";
|
||||
},
|
||||
|
||||
walk_context: function(name, context){
|
||||
var path = name.split('.');
|
||||
// if the var doesn't exist in current context, check the top level context
|
||||
var value_context = (context[path[0]] != undefined) ? context : this.context;
|
||||
var value = value_context[path.shift()];
|
||||
while(value != undefined && path.length > 0){
|
||||
value_context = value;
|
||||
value = value[path.shift()];
|
||||
}
|
||||
// if the value is a function, call it, binding the correct context
|
||||
if(typeof value === "function") {
|
||||
return value.apply(value_context);
|
||||
}
|
||||
return value;
|
||||
},
|
||||
|
||||
// Utility methods
|
||||
|
||||
/* includes tag */
|
||||
includes: function(needle, haystack) {
|
||||
return haystack.indexOf(this.otag + needle) != -1;
|
||||
},
|
||||
|
||||
/*
|
||||
Does away with nasty characters
|
||||
*/
|
||||
escape: function(s) {
|
||||
s = String(s === null ? "" : s);
|
||||
return s.replace(/&(?!\w+;)|["'<>\\]/g, function(s) {
|
||||
switch(s) {
|
||||
case "&": return "&";
|
||||
case '"': return '"';
|
||||
case "'": return ''';
|
||||
case "<": return "<";
|
||||
case ">": return ">";
|
||||
default: return s;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// by @langalex, support for arrays of strings
|
||||
create_context: function(_context) {
|
||||
if(this.is_object(_context)) {
|
||||
return _context;
|
||||
} else {
|
||||
var iterator = ".";
|
||||
if(this.pragmas["IMPLICIT-ITERATOR"]) {
|
||||
iterator = this.pragmas["IMPLICIT-ITERATOR"].iterator;
|
||||
}
|
||||
var ctx = {};
|
||||
ctx[iterator] = _context;
|
||||
return ctx;
|
||||
}
|
||||
},
|
||||
|
||||
is_object: function(a) {
|
||||
return a && typeof a == "object";
|
||||
},
|
||||
|
||||
is_array: function(a) {
|
||||
return Object.prototype.toString.call(a) === '[object Array]';
|
||||
},
|
||||
|
||||
/*
|
||||
Gets rid of leading and trailing whitespace
|
||||
*/
|
||||
trim: function(s) {
|
||||
return s.replace(/^\s*|\s*$/g, "");
|
||||
},
|
||||
|
||||
/*
|
||||
Why, why, why? Because IE. Cry, cry cry.
|
||||
*/
|
||||
map: function(array, fn) {
|
||||
if (typeof array.map == "function") {
|
||||
return array.map(fn);
|
||||
} else {
|
||||
var r = [];
|
||||
var l = array.length;
|
||||
for(var i = 0; i < l; i++) {
|
||||
r.push(fn(array[i]));
|
||||
}
|
||||
return r;
|
||||
}
|
||||
},
|
||||
|
||||
getCachedRegex: function(name, generator) {
|
||||
var byOtag = regexCache[this.otag];
|
||||
if (!byOtag) {
|
||||
byOtag = regexCache[this.otag] = {};
|
||||
}
|
||||
|
||||
var byCtag = byOtag[this.ctag];
|
||||
if (!byCtag) {
|
||||
byCtag = byOtag[this.ctag] = {};
|
||||
}
|
||||
|
||||
var regex = byCtag[name];
|
||||
if (!regex) {
|
||||
regex = byCtag[name] = generator(this.otag, this.ctag);
|
||||
}
|
||||
|
||||
return regex;
|
||||
}
|
||||
};
|
||||
|
||||
return({
|
||||
name: "mustache.js",
|
||||
version: "0.4.0-dev",
|
||||
|
||||
/*
|
||||
Turns a template and view into HTML
|
||||
*/
|
||||
to_html: function(template, view, partials, send_fun) {
|
||||
var renderer = new Renderer();
|
||||
if(send_fun) {
|
||||
renderer.send = send_fun;
|
||||
}
|
||||
renderer.render(template, view || {}, partials);
|
||||
if(!send_fun) {
|
||||
return renderer.buffer.join("\n");
|
||||
}
|
||||
}
|
||||
});
|
||||
}();
|
||||
570
js/mustache.js
Normal file
570
js/mustache.js
Normal file
@@ -0,0 +1,570 @@
|
||||
/*!
|
||||
* mustache.js - Logic-less {{mustache}} templates with JavaScript
|
||||
* http://github.com/janl/mustache.js
|
||||
*/
|
||||
|
||||
/*global define: false*/
|
||||
|
||||
(function (root, factory) {
|
||||
if (typeof exports === "object" && exports) {
|
||||
factory(exports); // CommonJS
|
||||
} else {
|
||||
var mustache = {};
|
||||
factory(mustache);
|
||||
if (typeof define === "function" && define.amd) {
|
||||
define(mustache); // AMD
|
||||
} else {
|
||||
root.Mustache = mustache; // <script>
|
||||
}
|
||||
}
|
||||
}(this, function (mustache) {
|
||||
|
||||
var whiteRe = /\s*/;
|
||||
var spaceRe = /\s+/;
|
||||
var nonSpaceRe = /\S/;
|
||||
var eqRe = /\s*=/;
|
||||
var curlyRe = /\s*\}/;
|
||||
var tagRe = /#|\^|\/|>|\{|&|=|!/;
|
||||
|
||||
// Workaround for https://issues.apache.org/jira/browse/COUCHDB-577
|
||||
// See https://github.com/janl/mustache.js/issues/189
|
||||
var RegExp_test = RegExp.prototype.test;
|
||||
function testRegExp(re, string) {
|
||||
return RegExp_test.call(re, string);
|
||||
}
|
||||
|
||||
function isWhitespace(string) {
|
||||
return !testRegExp(nonSpaceRe, string);
|
||||
}
|
||||
|
||||
var Object_toString = Object.prototype.toString;
|
||||
var isArray = Array.isArray || function (object) {
|
||||
return Object_toString.call(object) === '[object Array]';
|
||||
};
|
||||
|
||||
function isFunction(object) {
|
||||
return typeof object === 'function';
|
||||
}
|
||||
|
||||
function escapeRegExp(string) {
|
||||
return string.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
|
||||
}
|
||||
|
||||
var entityMap = {
|
||||
"&": "&",
|
||||
"<": "<",
|
||||
">": ">",
|
||||
'"': '"',
|
||||
"'": ''',
|
||||
"/": '/'
|
||||
};
|
||||
|
||||
function escapeHtml(string) {
|
||||
return String(string).replace(/[&<>"'\/]/g, function (s) {
|
||||
return entityMap[s];
|
||||
});
|
||||
}
|
||||
|
||||
function escapeTags(tags) {
|
||||
if (!isArray(tags) || tags.length !== 2) {
|
||||
throw new Error('Invalid tags: ' + tags);
|
||||
}
|
||||
|
||||
return [
|
||||
new RegExp(escapeRegExp(tags[0]) + "\\s*"),
|
||||
new RegExp("\\s*" + escapeRegExp(tags[1]))
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Breaks up the given `template` string into a tree of tokens. If the `tags`
|
||||
* argument is given here it must be an array with two string values: the
|
||||
* opening and closing tags used in the template (e.g. [ "<%", "%>" ]). Of
|
||||
* course, the default is to use mustaches (i.e. mustache.tags).
|
||||
*
|
||||
* A token is an array with at least 4 elements. The first element is the
|
||||
* mustache symbol that was used inside the tag, e.g. "#" or "&". If the tag
|
||||
* did not contain a symbol (i.e. {{myValue}}) this element is "name". For
|
||||
* all template text that appears outside a symbol this element is "text".
|
||||
*
|
||||
* The second element of a token is its "value". For mustache tags this is
|
||||
* whatever else was inside the tag besides the opening symbol. For text tokens
|
||||
* this is the text itself.
|
||||
*
|
||||
* The third and fourth elements of the token are the start and end indices
|
||||
* in the original template of the token, respectively.
|
||||
*
|
||||
* Tokens that are the root node of a subtree contain two more elements: an
|
||||
* array of tokens in the subtree and the index in the original template at which
|
||||
* the closing tag for that section begins.
|
||||
*/
|
||||
function parseTemplate(template, tags) {
|
||||
tags = tags || mustache.tags;
|
||||
template = template || '';
|
||||
|
||||
if (typeof tags === 'string') {
|
||||
tags = tags.split(spaceRe);
|
||||
}
|
||||
|
||||
var tagRes = escapeTags(tags);
|
||||
var scanner = new Scanner(template);
|
||||
|
||||
var sections = []; // Stack to hold section tokens
|
||||
var tokens = []; // Buffer to hold the tokens
|
||||
var spaces = []; // Indices of whitespace tokens on the current line
|
||||
var hasTag = false; // Is there a {{tag}} on the current line?
|
||||
var nonSpace = false; // Is there a non-space char on the current line?
|
||||
|
||||
// Strips all whitespace tokens array for the current line
|
||||
// if there was a {{#tag}} on it and otherwise only space.
|
||||
function stripSpace() {
|
||||
if (hasTag && !nonSpace) {
|
||||
while (spaces.length) {
|
||||
delete tokens[spaces.pop()];
|
||||
}
|
||||
} else {
|
||||
spaces = [];
|
||||
}
|
||||
|
||||
hasTag = false;
|
||||
nonSpace = false;
|
||||
}
|
||||
|
||||
var start, type, value, chr, token, openSection;
|
||||
while (!scanner.eos()) {
|
||||
start = scanner.pos;
|
||||
|
||||
// Match any text between tags.
|
||||
value = scanner.scanUntil(tagRes[0]);
|
||||
if (value) {
|
||||
for (var i = 0, len = value.length; i < len; ++i) {
|
||||
chr = value.charAt(i);
|
||||
|
||||
if (isWhitespace(chr)) {
|
||||
spaces.push(tokens.length);
|
||||
} else {
|
||||
nonSpace = true;
|
||||
}
|
||||
|
||||
tokens.push(['text', chr, start, start + 1]);
|
||||
start += 1;
|
||||
|
||||
// Check for whitespace on the current line.
|
||||
if (chr === '\n') {
|
||||
stripSpace();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Match the opening tag.
|
||||
if (!scanner.scan(tagRes[0])) break;
|
||||
hasTag = true;
|
||||
|
||||
// Get the tag type.
|
||||
type = scanner.scan(tagRe) || 'name';
|
||||
scanner.scan(whiteRe);
|
||||
|
||||
// Get the tag value.
|
||||
if (type === '=') {
|
||||
value = scanner.scanUntil(eqRe);
|
||||
scanner.scan(eqRe);
|
||||
scanner.scanUntil(tagRes[1]);
|
||||
} else if (type === '{') {
|
||||
value = scanner.scanUntil(new RegExp('\\s*' + escapeRegExp('}' + tags[1])));
|
||||
scanner.scan(curlyRe);
|
||||
scanner.scanUntil(tagRes[1]);
|
||||
type = '&';
|
||||
} else {
|
||||
value = scanner.scanUntil(tagRes[1]);
|
||||
}
|
||||
|
||||
// Match the closing tag.
|
||||
if (!scanner.scan(tagRes[1])) {
|
||||
throw new Error('Unclosed tag at ' + scanner.pos);
|
||||
}
|
||||
|
||||
token = [ type, value, start, scanner.pos ];
|
||||
tokens.push(token);
|
||||
|
||||
if (type === '#' || type === '^') {
|
||||
sections.push(token);
|
||||
} else if (type === '/') {
|
||||
// Check section nesting.
|
||||
openSection = sections.pop();
|
||||
|
||||
if (!openSection) {
|
||||
throw new Error('Unopened section "' + value + '" at ' + start);
|
||||
}
|
||||
if (openSection[1] !== value) {
|
||||
throw new Error('Unclosed section "' + openSection[1] + '" at ' + start);
|
||||
}
|
||||
} else if (type === 'name' || type === '{' || type === '&') {
|
||||
nonSpace = true;
|
||||
} else if (type === '=') {
|
||||
// Set the tags for the next time around.
|
||||
tagRes = escapeTags(tags = value.split(spaceRe));
|
||||
}
|
||||
}
|
||||
|
||||
// Make sure there are no open sections when we're done.
|
||||
openSection = sections.pop();
|
||||
if (openSection) {
|
||||
throw new Error('Unclosed section "' + openSection[1] + '" at ' + scanner.pos);
|
||||
}
|
||||
|
||||
return nestTokens(squashTokens(tokens));
|
||||
}
|
||||
|
||||
/**
|
||||
* Combines the values of consecutive text tokens in the given `tokens` array
|
||||
* to a single token.
|
||||
*/
|
||||
function squashTokens(tokens) {
|
||||
var squashedTokens = [];
|
||||
|
||||
var token, lastToken;
|
||||
for (var i = 0, len = tokens.length; i < len; ++i) {
|
||||
token = tokens[i];
|
||||
|
||||
if (token) {
|
||||
if (token[0] === 'text' && lastToken && lastToken[0] === 'text') {
|
||||
lastToken[1] += token[1];
|
||||
lastToken[3] = token[3];
|
||||
} else {
|
||||
squashedTokens.push(token);
|
||||
lastToken = token;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return squashedTokens;
|
||||
}
|
||||
|
||||
/**
|
||||
* Forms the given array of `tokens` into a nested tree structure where
|
||||
* tokens that represent a section have two additional items: 1) an array of
|
||||
* all tokens that appear in that section and 2) the index in the original
|
||||
* template that represents the end of that section.
|
||||
*/
|
||||
function nestTokens(tokens) {
|
||||
var nestedTokens = [];
|
||||
var collector = nestedTokens;
|
||||
var sections = [];
|
||||
|
||||
var token, section;
|
||||
for (var i = 0, len = tokens.length; i < len; ++i) {
|
||||
token = tokens[i];
|
||||
|
||||
switch (token[0]) {
|
||||
case '#':
|
||||
case '^':
|
||||
collector.push(token);
|
||||
sections.push(token);
|
||||
collector = token[4] = [];
|
||||
break;
|
||||
case '/':
|
||||
section = sections.pop();
|
||||
section[5] = token[2];
|
||||
collector = sections.length > 0 ? sections[sections.length - 1][4] : nestedTokens;
|
||||
break;
|
||||
default:
|
||||
collector.push(token);
|
||||
}
|
||||
}
|
||||
|
||||
return nestedTokens;
|
||||
}
|
||||
|
||||
/**
|
||||
* A simple string scanner that is used by the template parser to find
|
||||
* tokens in template strings.
|
||||
*/
|
||||
function Scanner(string) {
|
||||
this.string = string;
|
||||
this.tail = string;
|
||||
this.pos = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns `true` if the tail is empty (end of string).
|
||||
*/
|
||||
Scanner.prototype.eos = function () {
|
||||
return this.tail === "";
|
||||
};
|
||||
|
||||
/**
|
||||
* Tries to match the given regular expression at the current position.
|
||||
* Returns the matched text if it can match, the empty string otherwise.
|
||||
*/
|
||||
Scanner.prototype.scan = function (re) {
|
||||
var match = this.tail.match(re);
|
||||
|
||||
if (match && match.index === 0) {
|
||||
var string = match[0];
|
||||
this.tail = this.tail.substring(string.length);
|
||||
this.pos += string.length;
|
||||
return string;
|
||||
}
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
/**
|
||||
* Skips all text until the given regular expression can be matched. Returns
|
||||
* the skipped string, which is the entire tail if no match can be made.
|
||||
*/
|
||||
Scanner.prototype.scanUntil = function (re) {
|
||||
var index = this.tail.search(re), match;
|
||||
|
||||
switch (index) {
|
||||
case -1:
|
||||
match = this.tail;
|
||||
this.tail = "";
|
||||
break;
|
||||
case 0:
|
||||
match = "";
|
||||
break;
|
||||
default:
|
||||
match = this.tail.substring(0, index);
|
||||
this.tail = this.tail.substring(index);
|
||||
}
|
||||
|
||||
this.pos += match.length;
|
||||
|
||||
return match;
|
||||
};
|
||||
|
||||
/**
|
||||
* Represents a rendering context by wrapping a view object and
|
||||
* maintaining a reference to the parent context.
|
||||
*/
|
||||
function Context(view, parentContext) {
|
||||
this.view = view == null ? {} : view;
|
||||
this.cache = { '.': this.view };
|
||||
this.parent = parentContext;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a new context using the given view with this context
|
||||
* as the parent.
|
||||
*/
|
||||
Context.prototype.push = function (view) {
|
||||
return new Context(view, this);
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the value of the given name in this context, traversing
|
||||
* up the context hierarchy if the value is absent in this context's view.
|
||||
*/
|
||||
Context.prototype.lookup = function (name) {
|
||||
var value;
|
||||
if (name in this.cache) {
|
||||
value = this.cache[name];
|
||||
} else {
|
||||
var context = this;
|
||||
|
||||
while (context) {
|
||||
if (name.indexOf('.') > 0) {
|
||||
value = context.view;
|
||||
|
||||
var names = name.split('.'), i = 0;
|
||||
while (value != null && i < names.length) {
|
||||
value = value[names[i++]];
|
||||
}
|
||||
} else {
|
||||
value = context.view[name];
|
||||
}
|
||||
|
||||
if (value != null) break;
|
||||
|
||||
context = context.parent;
|
||||
}
|
||||
|
||||
this.cache[name] = value;
|
||||
}
|
||||
|
||||
if (isFunction(value)) {
|
||||
value = value.call(this.view);
|
||||
}
|
||||
|
||||
return value;
|
||||
};
|
||||
|
||||
/**
|
||||
* A Writer knows how to take a stream of tokens and render them to a
|
||||
* string, given a context. It also maintains a cache of templates to
|
||||
* avoid the need to parse the same template twice.
|
||||
*/
|
||||
function Writer() {
|
||||
this.cache = {};
|
||||
}
|
||||
|
||||
/**
|
||||
* Clears all cached templates in this writer.
|
||||
*/
|
||||
Writer.prototype.clearCache = function () {
|
||||
this.cache = {};
|
||||
};
|
||||
|
||||
/**
|
||||
* Parses and caches the given `template` and returns the array of tokens
|
||||
* that is generated from the parse.
|
||||
*/
|
||||
Writer.prototype.parse = function (template, tags) {
|
||||
var cache = this.cache;
|
||||
var tokens = cache[template];
|
||||
|
||||
if (tokens == null) {
|
||||
tokens = cache[template] = parseTemplate(template, tags);
|
||||
}
|
||||
|
||||
return tokens;
|
||||
};
|
||||
|
||||
/**
|
||||
* High-level method that is used to render the given `template` with
|
||||
* the given `view`.
|
||||
*
|
||||
* The optional `partials` argument may be an object that contains the
|
||||
* names and templates of partials that are used in the template. It may
|
||||
* also be a function that is used to load partial templates on the fly
|
||||
* that takes a single argument: the name of the partial.
|
||||
*/
|
||||
Writer.prototype.render = function (template, view, partials) {
|
||||
var tokens = this.parse(template);
|
||||
var context = (view instanceof Context) ? view : new Context(view);
|
||||
return this.renderTokens(tokens, context, partials, template);
|
||||
};
|
||||
|
||||
/**
|
||||
* Low-level method that renders the given array of `tokens` using
|
||||
* the given `context` and `partials`.
|
||||
*
|
||||
* Note: The `originalTemplate` is only ever used to extract the portion
|
||||
* of the original template that was contained in a higher-order section.
|
||||
* If the template doesn't use higher-order sections, this argument may
|
||||
* be omitted.
|
||||
*/
|
||||
Writer.prototype.renderTokens = function (tokens, context, partials, originalTemplate) {
|
||||
var buffer = '';
|
||||
|
||||
// This function is used to render an arbitrary template
|
||||
// in the current context by higher-order sections.
|
||||
var self = this;
|
||||
function subRender(template) {
|
||||
return self.render(template, context, partials);
|
||||
}
|
||||
|
||||
var token, value;
|
||||
for (var i = 0, len = tokens.length; i < len; ++i) {
|
||||
token = tokens[i];
|
||||
|
||||
switch (token[0]) {
|
||||
case '#':
|
||||
value = context.lookup(token[1]);
|
||||
if (!value) continue;
|
||||
|
||||
if (isArray(value)) {
|
||||
for (var j = 0, jlen = value.length; j < jlen; ++j) {
|
||||
buffer += this.renderTokens(token[4], context.push(value[j]), partials, originalTemplate);
|
||||
}
|
||||
} else if (typeof value === 'object' || typeof value === 'string') {
|
||||
buffer += this.renderTokens(token[4], context.push(value), partials, originalTemplate);
|
||||
} else if (isFunction(value)) {
|
||||
if (typeof originalTemplate !== 'string') {
|
||||
throw new Error('Cannot use higher-order sections without the original template');
|
||||
}
|
||||
|
||||
// Extract the portion of the original template that the section contains.
|
||||
value = value.call(context.view, originalTemplate.slice(token[3], token[5]), subRender);
|
||||
|
||||
if (value != null) buffer += value;
|
||||
} else {
|
||||
buffer += this.renderTokens(token[4], context, partials, originalTemplate);
|
||||
}
|
||||
|
||||
break;
|
||||
case '^':
|
||||
value = context.lookup(token[1]);
|
||||
|
||||
// Use JavaScript's definition of falsy. Include empty arrays.
|
||||
// See https://github.com/janl/mustache.js/issues/186
|
||||
if (!value || (isArray(value) && value.length === 0)) {
|
||||
buffer += this.renderTokens(token[4], context, partials, originalTemplate);
|
||||
}
|
||||
|
||||
break;
|
||||
case '>':
|
||||
if (!partials) continue;
|
||||
value = isFunction(partials) ? partials(token[1]) : partials[token[1]];
|
||||
if (value != null) buffer += this.renderTokens(this.parse(value), context, partials, value);
|
||||
break;
|
||||
case '&':
|
||||
value = context.lookup(token[1]);
|
||||
if (value != null) buffer += value;
|
||||
break;
|
||||
case 'name':
|
||||
value = context.lookup(token[1]);
|
||||
if (value != null) buffer += mustache.escape(value);
|
||||
break;
|
||||
case 'text':
|
||||
buffer += token[1];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return buffer;
|
||||
};
|
||||
|
||||
mustache.name = "mustache.js";
|
||||
mustache.version = "0.8.1";
|
||||
mustache.tags = [ "{{", "}}" ];
|
||||
|
||||
// All high-level mustache.* functions use this writer.
|
||||
var defaultWriter = new Writer();
|
||||
|
||||
/**
|
||||
* Clears all cached templates in the default writer.
|
||||
*/
|
||||
mustache.clearCache = function () {
|
||||
return defaultWriter.clearCache();
|
||||
};
|
||||
|
||||
/**
|
||||
* Parses and caches the given template in the default writer and returns the
|
||||
* array of tokens it contains. Doing this ahead of time avoids the need to
|
||||
* parse templates on the fly as they are rendered.
|
||||
*/
|
||||
mustache.parse = function (template, tags) {
|
||||
return defaultWriter.parse(template, tags);
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders the `template` with the given `view` and `partials` using the
|
||||
* default writer.
|
||||
*/
|
||||
mustache.render = function (template, view, partials) {
|
||||
return defaultWriter.render(template, view, partials);
|
||||
};
|
||||
|
||||
// This is here for backwards compatibility with 0.4.x.
|
||||
mustache.to_html = function (template, view, partials, send) {
|
||||
var result = mustache.render(template, view, partials);
|
||||
|
||||
if (isFunction(send)) {
|
||||
send(result);
|
||||
} else {
|
||||
return result;
|
||||
}
|
||||
};
|
||||
|
||||
// Export the escaping function so that the user may override it.
|
||||
// See https://github.com/janl/mustache.js/issues/244
|
||||
mustache.escape = escapeHtml;
|
||||
|
||||
// Export these mainly for testing, but also for advanced usage.
|
||||
mustache.Scanner = Scanner;
|
||||
mustache.Context = Context;
|
||||
mustache.Writer = Writer;
|
||||
|
||||
}));
|
||||
36
package.json
Normal file
36
package.json
Normal file
@@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "color-thief",
|
||||
"version": "2.1.0",
|
||||
"author": "Lokesh Dhakar",
|
||||
"description": "Get the dominant color or color palette from an image.",
|
||||
"keywords": [
|
||||
"color",
|
||||
"palette",
|
||||
"picker",
|
||||
"thief",
|
||||
"dominant"
|
||||
],
|
||||
"homepage": "http://lokeshdhakar.com/projects/color-thief/",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/lokesh/color-thief.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/lokesh/color-thief/issues"
|
||||
},
|
||||
"licenses": [
|
||||
{
|
||||
"type": "Creative Commons Attribution 2.5 License",
|
||||
"url": "http://creativecommons.org/licenses/by/2.5/"
|
||||
}
|
||||
],
|
||||
"devDependencies": {
|
||||
"grunt": "~0.4.2",
|
||||
"grunt-contrib-compass": "^0.7.2",
|
||||
"grunt-contrib-watch": "^0.5.3",
|
||||
"grunt-contrib-connect": "^0.7.1",
|
||||
"grunt-ftp-deploy": "^0.1.1",
|
||||
"grunt-contrib-uglify": "~0.4.0",
|
||||
"grunt-contrib-jshint": "~0.9.2"
|
||||
}
|
||||
}
|
||||
224
sass/_normalize.sass
Normal file
224
sass/_normalize.sass
Normal file
@@ -0,0 +1,224 @@
|
||||
/**! 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
|
||||
323
sass/app.sass
323
sass/app.sass
@@ -1,323 +0,0 @@
|
||||
@import "compass/reset"
|
||||
@import "compass/css3"
|
||||
@import "compass/utilities/general/clearfix"
|
||||
|
||||
$lightGray: #eeeeee
|
||||
$blue: #0096df
|
||||
$green: #00bfa8
|
||||
$yellow: #fdf485
|
||||
$orange: #ff8000
|
||||
$red: #ff4040
|
||||
|
||||
$color: #ccc
|
||||
$bgColor: #444
|
||||
|
||||
$headingColor: #444
|
||||
$linkColor: $green
|
||||
|
||||
$fontSize: 18px
|
||||
$columnWidth: 600px
|
||||
$radius: 4px
|
||||
|
||||
body
|
||||
background: $bgColor
|
||||
|
||||
body, input, textarea
|
||||
color: $color
|
||||
font-size: $fontSize
|
||||
font-family: "Karla", "lucida grande", sans-serif
|
||||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
color: white
|
||||
line-height: 1.2em
|
||||
font-weight: 500
|
||||
|
||||
h1
|
||||
font-size: 72px
|
||||
line-height: 1em
|
||||
|
||||
h2
|
||||
font-size: 36px
|
||||
line-height: 1.2em
|
||||
margin-bottom: 0.3em
|
||||
|
||||
h3
|
||||
font-size: 16px
|
||||
letter-spacing: 0.1em
|
||||
margin-bottom: 0.2em
|
||||
text-transform: uppercase
|
||||
|
||||
h4
|
||||
font-size: 20px
|
||||
margin-bottom: 1em
|
||||
|
||||
p
|
||||
line-height: 1.4em
|
||||
margin-bottom: 1em
|
||||
|
||||
strong
|
||||
font-weight: bold
|
||||
|
||||
code,
|
||||
kbd
|
||||
font: $fontSize - 6 "Andale Mono", "DejaVu Sans Mono", monospace
|
||||
color: darken($color, 15%)
|
||||
|
||||
/* Links */
|
||||
a
|
||||
color: $linkColor
|
||||
text-decoration: none
|
||||
&:hover
|
||||
color: lighten($linkColor, 30%)
|
||||
|
||||
/* Images */
|
||||
img
|
||||
display: block
|
||||
|
||||
/* -- Layout ------------------------------------------------------------------ */
|
||||
|
||||
body
|
||||
margin: 40px 40px 80px 40px
|
||||
|
||||
.wrapper
|
||||
max-width: $columnWidth
|
||||
margin: 0 auto
|
||||
|
||||
.section-header
|
||||
text-align: center
|
||||
|
||||
.intro
|
||||
text-align: center
|
||||
margin-bottom: 2em
|
||||
|
||||
.description
|
||||
max-width: 450px
|
||||
margin-right: auto
|
||||
margin-left: auto
|
||||
|
||||
.read-more-links
|
||||
font-size: $fontSize - 2
|
||||
|
||||
.image-section
|
||||
margin-bottom: 80px
|
||||
background: darken($bgColor, 10%)
|
||||
.image-wrap
|
||||
position: relative
|
||||
background: #444
|
||||
|
||||
.examples
|
||||
.image-section
|
||||
.target-image
|
||||
+border-bottom-radius($radius)
|
||||
+box-shadow(0 4px 0 #333)
|
||||
.color-thief-output
|
||||
+box-shadow(none)
|
||||
.image-section.with-color-thief-output
|
||||
.target-image
|
||||
+border-bottom-radius(0)
|
||||
+box-shadow(none)
|
||||
.color-thief-output
|
||||
+box-shadow(0 4px 0 #333)
|
||||
|
||||
.sharing
|
||||
position: fixed
|
||||
top: 20px
|
||||
right: 0
|
||||
|
||||
/* -- Image examples ------------------------------------------------------------------ */
|
||||
|
||||
.run-functions-button
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 50%
|
||||
width: 100px
|
||||
height: 100px
|
||||
margin-top: -50px
|
||||
margin-left: -50px
|
||||
border: none
|
||||
+border-radius(50%)
|
||||
color: darken($yellow, 55%)
|
||||
background-color: $yellow
|
||||
border-bottom: 2px solid darken($yellow, 60%)
|
||||
font-size: 24px
|
||||
font-weight: 500
|
||||
cursor: pointer
|
||||
&:hover
|
||||
background-color: lighten($yellow, 10%)
|
||||
color: darken($yellow, 60%)
|
||||
&:active
|
||||
+scale(0.9)
|
||||
&.hide
|
||||
+transition(transform .4s, top .4s)
|
||||
top: 100%
|
||||
+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
|
||||
width: 100%
|
||||
+border-top-radius($radius)
|
||||
|
||||
.color-thief-output
|
||||
display: none
|
||||
padding: 20px
|
||||
background-color: #eee
|
||||
+border-bottom-radius($radius)
|
||||
+box-shadow(0 4px 0 #333)
|
||||
.function-title
|
||||
color: $bgColor
|
||||
font-weight: bold
|
||||
|
||||
.function
|
||||
margin-bottom: 10px
|
||||
|
||||
.swatches
|
||||
+pie-clearfix
|
||||
|
||||
.swatch
|
||||
width: 60px
|
||||
height: 30px
|
||||
margin: 0 2px 2px 0
|
||||
background: #dddddd
|
||||
float: left
|
||||
|
||||
canvas
|
||||
display: none
|
||||
|
||||
/* -- Animated logo ------------------------------------------------------------------ */
|
||||
.logo
|
||||
.char1
|
||||
+transition( color .1s)
|
||||
.char2
|
||||
+transition( color .1s .05s)
|
||||
.char3
|
||||
+transition( color .1s .1s)
|
||||
.char4
|
||||
+transition( color .1s .15s)
|
||||
.char5
|
||||
+transition( color .1s .2s)
|
||||
|
||||
.char7
|
||||
+transition( color .1s .3s)
|
||||
.char8
|
||||
+transition( color .1s .35s)
|
||||
.char9
|
||||
+transition( color .1s .4s)
|
||||
.char10
|
||||
+transition( color .1s .45s)
|
||||
.char11
|
||||
+transition( color .1s .5s)
|
||||
&:hover
|
||||
.char1
|
||||
+transition( color .1s)
|
||||
color: $red
|
||||
.char2
|
||||
+transition( color .1s .05s)
|
||||
color: $orange
|
||||
.char3
|
||||
+transition( color .1s .1s)
|
||||
color: $yellow
|
||||
.char4
|
||||
+transition( color .1s .15s)
|
||||
color: $green
|
||||
.char5
|
||||
+transition( color .1s .2s)
|
||||
color: $blue
|
||||
|
||||
.char7
|
||||
+transition( color .1s .3s)
|
||||
color: $red
|
||||
.char8
|
||||
+transition( color .1s .35s)
|
||||
color: $orange
|
||||
.char9
|
||||
+transition( color .1s .4s)
|
||||
color: $yellow
|
||||
.char10
|
||||
+transition( color .1s .45s)
|
||||
color: $green
|
||||
.char11
|
||||
+transition( color .1s .5s)
|
||||
color: $blue
|
||||
|
||||
|
||||
/* -- Drag and drop ------------------------------------------------------------------ */
|
||||
|
||||
.drag-drop
|
||||
display: none
|
||||
|
||||
.drop-zone
|
||||
height: 400px
|
||||
margin-bottom: 80px
|
||||
+border-radius($radius)
|
||||
background: url("../img/dark_checkered_bg.png")
|
||||
&.dragging
|
||||
+box-shadow(inset 0 0 0 4px $linkColor)
|
||||
.default-label
|
||||
display: none
|
||||
.dragging-label
|
||||
display: block
|
||||
|
||||
.drop-zone-label
|
||||
position: relative
|
||||
top: 170px
|
||||
padding: 10px
|
||||
margin: 0 100px
|
||||
border: 4px solid $yellow
|
||||
+border-radius($radius)
|
||||
color: $yellow
|
||||
font-size: 24px
|
||||
text-align: center
|
||||
pointer-events: none
|
||||
|
||||
.dragging-label
|
||||
display: none
|
||||
|
||||
.dropped-image
|
||||
.run-functions-button
|
||||
display: none
|
||||
.targetImage
|
||||
// width: 100%
|
||||
|
||||
|
||||
/* -- Responsive design -------------------------------------------------------------- */
|
||||
|
||||
@media only screen and (max-width : 480px)
|
||||
body
|
||||
margin: 80px 0 40px 0
|
||||
font-size: $fontSize - 3
|
||||
.intro
|
||||
padding-left: 20px
|
||||
padding-right: 20px
|
||||
h1
|
||||
font-size: 48px // from 72px
|
||||
h2
|
||||
font-size: 24px // from 40px
|
||||
h3
|
||||
font-size: 14px // from 16px
|
||||
.examples,
|
||||
.dragged-images
|
||||
.image-section
|
||||
.target-image
|
||||
+border-radius(0)
|
||||
.color-thief-output
|
||||
+border-radius(0)
|
||||
.examples
|
||||
.image-wrap
|
||||
min-height: 200px
|
||||
|
||||
@media only screen and (min-width : 640px)
|
||||
.examples
|
||||
.image-wrap
|
||||
min-height: 450px // All 3 examples are 450px tall.
|
||||
|
||||
405
sass/screen.sass
Normal file
405
sass/screen.sass
Normal file
@@ -0,0 +1,405 @@
|
||||
@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%
|
||||
|
||||
|
||||
Reference in New Issue
Block a user