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
37
.gitignore
vendored
37
.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
|
*.log
|
||||||
*.sql
|
*.sql
|
||||||
*.sqlite
|
*.sqlite
|
||||||
|
.htaccess
|
||||||
|
.ftppass
|
||||||
|
.host_config
|
||||||
|
|
||||||
# OS generated files #
|
*.DS_Store
|
||||||
######################
|
|
||||||
.DS_Store*
|
|
||||||
ehthumbs.db
|
ehthumbs.db
|
||||||
Icon?
|
Icon?
|
||||||
Thumbs.db
|
Thumbs.db
|
||||||
|
|
||||||
# App Files #
|
.sass-cache
|
||||||
#############
|
|
||||||
*.tmproj
|
|
||||||
.sass-cache/*
|
|
||||||
Rakefile
|
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 |
69
index.html
69
index.html
@@ -6,59 +6,64 @@
|
|||||||
|
|
||||||
<title>Color Thief</title>
|
<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="author" content="Lokesh Dhakar">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
|
||||||
<script src="js/libs/modernizr.custom.js"></script>
|
<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="http://fonts.googleapis.com/css?family=Karla%7CMontserrat:700">
|
||||||
<link rel="stylesheet" href="css/app.css">
|
<link rel="stylesheet" href="css/screen.css">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="wrapper">
|
|
||||||
|
|
||||||
<section class="intro">
|
|
||||||
<header>
|
<header>
|
||||||
|
<div class="container">
|
||||||
<h1 class="logo">Color Thief</h1>
|
<h1 class="logo">Color Thief</h1>
|
||||||
|
<p class="lead">
|
||||||
|
Grab the color palette from an image.<br /> Uses Javascript and the canvas tag to make it happen.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a href="https://github.com/lokesh/color-thief/" class="button">
|
||||||
|
Download from Github</small>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
</header>
|
</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>
|
<section id="examples" class="examples-section">
|
||||||
<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>
|
<div class="container">
|
||||||
|
<h2>Examples</h2>
|
||||||
|
<div id="example-images"></div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="examples" class="examples">
|
<section id="drag-drop" class="drag-drop-section">
|
||||||
<header>
|
<div class="container">
|
||||||
<h2 class="section-header">Examples</h2>
|
<h2>Try it yourself</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 id="drop-zone" class="drop-zone">
|
||||||
<div class="drop-zone-label default-label">Drag an image here</div>
|
<div class="drop-zone-label default-label">Drag an image here</div>
|
||||||
<div class="drop-zone-label dragging-label">Drop it here!</div>
|
<div class="drop-zone-label dragging-label">Drop it!</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="dragged-images" class="dragged-images"></div>
|
<div id="dragged-images" class="dragged-images"></div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="sharing" class="sharing">
|
<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>
|
<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>
|
<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>
|
</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 -->
|
<!-- Mustache templates -->
|
||||||
<script id='image-section-template' type='text/x-mustache'>
|
<script id='image-section-template' type='text/x-mustache'>
|
||||||
{{#images}}
|
{{#images}}
|
||||||
@@ -101,7 +106,11 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<script src="demo.js"></script>
|
<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>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var _gaq = _gaq || [];
|
var _gaq = _gaq || [];
|
||||||
_gaq.push(['_setAccount', 'UA-2196019-1']);
|
_gaq.push(['_setAccount', 'UA-2196019-1']);
|
||||||
|
|||||||
@@ -98,10 +98,10 @@ ColorThief.prototype.getPalette = function(sourceImage, colorCount, quality) {
|
|||||||
|
|
||||||
if (typeof colorCount === 'undefined') {
|
if (typeof colorCount === 'undefined') {
|
||||||
colorCount = 10;
|
colorCount = 10;
|
||||||
};
|
}
|
||||||
if (typeof quality === 'undefined') {
|
if (typeof quality === 'undefined') {
|
||||||
quality = 10;
|
quality = 10;
|
||||||
};
|
}
|
||||||
|
|
||||||
// Create custom CanvasImage object
|
// Create custom CanvasImage object
|
||||||
var image = new CanvasImage(sourceImage);
|
var image = new CanvasImage(sourceImage);
|
||||||
@@ -154,18 +154,14 @@ if (!pv) {
|
|||||||
var pv = {
|
var pv = {
|
||||||
map: function(array, f) {
|
map: function(array, f) {
|
||||||
var o = {};
|
var o = {};
|
||||||
return f
|
return f ? array.map(function(d, i) { o.index = i; return f.call(o, d); }) : array.slice();
|
||||||
? array.map(function(d, i) { o.index = i; return f.call(o, d); })
|
|
||||||
: array.slice();
|
|
||||||
},
|
},
|
||||||
naturalOrder: function(a, b) {
|
naturalOrder: function(a, b) {
|
||||||
return (a < b) ? -1 : ((a > b) ? 1 : 0);
|
return (a < b) ? -1 : ((a > b) ? 1 : 0);
|
||||||
},
|
},
|
||||||
sum: function(array, f) {
|
sum: function(array, f) {
|
||||||
var o = {};
|
var o = {};
|
||||||
return array.reduce(f
|
return array.reduce(f ? function(p, d, i) { o.index = i; return p + f.call(o, d); } : function(p, d) { return p + d; }, 0);
|
||||||
? function(p, d, i) { o.index = i; return p + f.call(o, d); }
|
|
||||||
: function(p, d) { return p + d; }, 0);
|
|
||||||
},
|
},
|
||||||
max: function(array, f) {
|
max: function(array, f) {
|
||||||
return Math.max.apply(null, f ? pv.map(array, f) : array);
|
return Math.max.apply(null, f ? pv.map(array, f) : array);
|
||||||
@@ -341,8 +337,8 @@ var MMCQ = (function() {
|
|||||||
return pv.naturalOrder(
|
return pv.naturalOrder(
|
||||||
a.vbox.count()*a.vbox.volume(),
|
a.vbox.count()*a.vbox.volume(),
|
||||||
b.vbox.count()*b.vbox.volume()
|
b.vbox.count()*b.vbox.volume()
|
||||||
)
|
);
|
||||||
});;
|
});
|
||||||
}
|
}
|
||||||
CMap.prototype = {
|
CMap.prototype = {
|
||||||
push: function(vbox) {
|
push: function(vbox) {
|
||||||
@@ -352,7 +348,7 @@ var MMCQ = (function() {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
palette: function() {
|
palette: function() {
|
||||||
return this.vboxes.map(function(vb) { return vb.color });
|
return this.vboxes.map(function(vb) { return vb.color; });
|
||||||
},
|
},
|
||||||
size: function() {
|
size: function() {
|
||||||
return this.vboxes.size();
|
return this.vboxes.size();
|
||||||
@@ -385,7 +381,7 @@ var MMCQ = (function() {
|
|||||||
forcebw: function() {
|
forcebw: function() {
|
||||||
// XXX: won't work yet
|
// XXX: won't work yet
|
||||||
var vboxes = this.vboxes;
|
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
|
// force darkest color to black if everything < 5
|
||||||
var lowest = vboxes[0].color;
|
var lowest = vboxes[0].color;
|
||||||
@@ -445,7 +441,7 @@ var MMCQ = (function() {
|
|||||||
maxw = pv.max([rw, gw, bw]);
|
maxw = pv.max([rw, gw, bw]);
|
||||||
// only one pixel, no split
|
// only one pixel, no split
|
||||||
if (vbox.count() == 1) {
|
if (vbox.count() == 1) {
|
||||||
return [vbox.copy()]
|
return [vbox.copy()];
|
||||||
}
|
}
|
||||||
/* Find the partial sum arrays along the selected axis. */
|
/* Find the partial sum arrays along the selected axis. */
|
||||||
var total = 0,
|
var total = 0,
|
||||||
@@ -492,7 +488,7 @@ var MMCQ = (function() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
partialsum.forEach(function(d,i) {
|
partialsum.forEach(function(d,i) {
|
||||||
lookaheadsum[i] = total-d
|
lookaheadsum[i] = total-d;
|
||||||
});
|
});
|
||||||
function doCut(color) {
|
function doCut(color) {
|
||||||
var dim1 = color + '1',
|
var dim1 = color + '1',
|
||||||
@@ -540,14 +536,14 @@ var MMCQ = (function() {
|
|||||||
|
|
||||||
// check that we aren't below maxcolors already
|
// check that we aren't below maxcolors already
|
||||||
var nColors = 0;
|
var nColors = 0;
|
||||||
histo.forEach(function() { nColors++ });
|
histo.forEach(function() { nColors++; });
|
||||||
if (nColors <= maxcolors) {
|
if (nColors <= maxcolors) {
|
||||||
// XXX: generate the new colors from the histo and return
|
// XXX: generate the new colors from the histo and return
|
||||||
}
|
}
|
||||||
|
|
||||||
// get the beginning vbox from the colors
|
// get the beginning vbox from the colors
|
||||||
var vbox = vboxFromPixels(pixels, histo),
|
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);
|
pq.push(vbox);
|
||||||
|
|
||||||
// inner function to do the iteration
|
// 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.
|
// Re-sort by the product of pixel occupancy times the size in color space.
|
||||||
var pq2 = new PQueue(function(a,b) {
|
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()) {
|
while (pq.size()) {
|
||||||
pq2.push(pq.pop());
|
pq2.push(pq.pop());
|
||||||
@@ -609,5 +605,5 @@ var MMCQ = (function() {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
quantize: quantize
|
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