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

Cleanup: remove unused jquery, tabs to spaces

Browse Source
This commit is contained in:
Lokesh Dhakar
2019-04-28 22:10:32 -07:00
parent e251daa01f
commit 2ffa707ae0
4 changed files with 102 additions and 9195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
examples/css/screen.css
View File

@@ -1,88 +1,95 @@
:root { :root {
/* Colors */ /* Colors */
--color: #000; --color: #000;
--bg-color: #f9f9f9; --bg-color: #f9f9f9;
--primary-color: #fc4c02; --primary-color: #fc4c02;
--secondary-color: #f68727; --secondary-color: #f68727;
--code-color: var(--primary-color); --muted-color: #999;
--code-bg-color: #fff; --code-color: var(--primary-color);
--code-bg-color: #fff;
/* Typography */ /* Typography */
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--code-font: Menlo, Consolas, Monaco, Lucida Console, monospace; --code-font: Menlo, Consolas, Monaco, Lucida Console, monospace;
--bold: 700; --bold: 700;
--x-bold: 900; --x-bold: 900;
--line-height: 1.5em; --line-height: 1.5em;
--line-height-heading: 1.3em; --line-height-heading: 1.3em;
/* Breakpoints */ /* Breakpoints */
--sm-screen: 640px; --sm-screen: 640px;
} }
/* Base /* Base
* *----------------------------------------------- */ * *----------------------------------------------- */
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: var(--bg-color); background: var(--bg-color);
} }
/* Typography /* Typography
* *----------------------------------------------- */ * *----------------------------------------------- */
html { html {
font-size: 16px; font-size: 16px;
font-family: var(--font);
line-height: var(--line-height);
-webkit-font-smoothing: antialiased;
} }
body, h1,
input, h2,
button, h3 {
select, font-weight: var(--x-bold);
textarea { line-height: var(--line-height-heading);
font-family: var(--font); letter-spacing: -0.005em;
font-size: 1rem;
line-height: var(--line-height);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
margin-bottom: 0.5em;
font-weight: var(--x-bold);
line-height: var(--line-height-heading);
letter-spacing: -0.005em;
} }
h2 { h2 {
font-size: 1.06rem; margin: 0 0 0.25em 0;
font-size: 1.5rem;
}
h3 {
margin: 1em 0 0.25em 0;
font-size: 1.06rem;
}
code {
font-family: var(--code-font);
overflow-wrap: break-word;
} }
/* -- Layout ------------------------------------------------------------------ */ /* -- Layout ------------------------------------------------------------------ */
/* -- Examples -- */
.image-section { .image-section {
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
padding: 16px 16px 32px 16px; padding: 16px 16px 32px 16px;
margin-bottom: 32px; margin-bottom: 32px;
} }
.swatch { .swatch {
display: inline-block; display: inline-block;
margin: 0; background: #dddddd;
background: #dddddd;
} }
.get-color .swatch { .color .swatch {
width: 6rem; width: 6rem;
height: 3rem; height: 3rem;
} }
.get-palette .swatch { .palette .swatch {
width: 3rem; width: 3rem;
height: 2rem; height: 2rem;
} }
.time {
color: var(--muted-color);
font-weight: normal;
}

54
examples/js/demo.js
View File

@@ -1,6 +1,34 @@
var colorThief = new ColorThief();
var images = [
'black.png',
'red.png',
'rainbow-horizontal.png',
'rainbow-vertical.png',
// 'transparent.png',
// 'white.png',
];
// Render example images
var examplesHTML = Mustache.to_html(document.getElementById('image-tpl').innerHTML, images);
document.getElementById('example-images').innerHTML = examplesHTML;
// Once images are loaded, process them
document.querySelectorAll('.image').forEach((image) => {
const section = image.closest('.image-section');
if (this.complete) {
showColorsForImage(image, section);
} else {
image.addEventListener('load', function() {
showColorsForImage(image, section);
});
}
})
// Run Color Thief functions and display results below image. // Run Color Thief functions and display results below image.
// We also log execution time of functions for display. // We also log execution time of functions for display.
const showColorsForImage = function(image, section) { const showColorsForImage = function(image, section) {
const file = section.src;
const start = Date.now(); const start = Date.now();
const color = colorThief.getColor(image); const color = colorThief.getColor(image);
const elapsedTimeForGetColor = Date.now() - start; const elapsedTimeForGetColor = Date.now() - start;
@@ -20,29 +48,3 @@ const showColorsForImage = function(image, section) {
const outputEl = section.querySelector('.output'); const outputEl = section.querySelector('.output');
outputEl.innerHTML = ouputHTML; outputEl.innerHTML = ouputHTML;
}; };
var colorThief = new ColorThief();
var images = [
'black.png',
'red.png',
'rainbow-horizontal.png',
'rainbow-vertical.png',
// 'transparent.png',
// 'white.png',
];
// Render example images
var examplesHTML = Mustache.to_html(document.getElementById('image-tpl').innerHTML, images);
document.getElementById('example-images').innerHTML = examplesHTML;
document.querySelectorAll('.image').forEach((image) => {
const section = image.closest('.image-section');
if (this.complete) {
showColorsForImage(image, section);
} else {
image.addEventListener('load', function() {
showColorsForImage(image, section);
});
}
})

9111
examples/js/jquery.js vendored
View File

File diff suppressed because it is too large Load Diff

23
index.html
View File

@@ -13,6 +13,7 @@
<script id='image-tpl' type='text/x-mustache'> <script id='image-tpl' type='text/x-mustache'>
{{#.}} {{#.}}
<div class="image-section"> <div class="image-section">
<h2>{{.}}</h2>
<img class="image" src="examples/img/{{.}}" /> <img class="image" src="examples/img/{{.}}" />
<div class="output"></div> <div class="output"></div>
</div> </div>
@@ -20,19 +21,27 @@
</script> </script>
<script id="output-tpl" type="text/x-mustache"> <script id="output-tpl" type="text/x-mustache">
<div class="get-color"> <div class="color">
<h2>Dominant Color</h3> <h3>Dominant Color</h3>
<div class="swatches"></div> <div class="swatches">
<code>colorThief.getColor(image):{{elapsedTimeForGetColor}}ms</code> <div class="swatch" style="background-color: rgb({{color.0}}, {{color.1}}, {{color.2}})"></div>
</div>
<code>
{{colorStr}}<br>
<span class="time">{{elapsedTimeForGetColor}}ms</span>
</code>
</div> </div>
<div class="get-palette"> <div class="palette">
<h2>Palette</h3> <h3>Palette</h3>
<div class="swatches"> <div class="swatches">
{{#palette}} {{#palette}}
<div class="swatch" style="background-color: rgb({{0}}, {{1}}, {{2}})"></div> <div class="swatch" style="background-color: rgb({{0}}, {{1}}, {{2}})"></div>
{{/palette}} {{/palette}}
</div> </div>
<code>colorThief.getPalette(image):{{elapsedTimeForGetPalette}}ms</code> <code>
{{paletteStr}}<br>
<span class="time">{{elapsedTimeForGetPalette}}ms</span>
</code>
</div> </div>
</script> </script>