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

refactor: Move test demo page and assets into cypress folder

Browse Source
This commit is contained in:
Lokesh Dhakar
2019-07-14 08:38:57 -07:00
parent 50df0f30ef
commit 3e7554b321
12 changed files with 172 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
cypress/integration/api_spec.js
View File

@@ -10,7 +10,7 @@ function rgbCount(text) {
describe('getColor()', function() {
beforeEach(function() {
cy.visit('http://localhost:8080');
cy.visit('http://localhost:8080/cypress/test-pages/index.html');
})
it('returns valid color from black image', function() {
@@ -62,7 +62,7 @@ function testPaletteCount(num) {
describe('getPalette()', function() {
beforeEach(function() {
cy.visit('http://localhost:8080');
cy.visit('http://localhost:8080/cypress/test-pages/index.html');
})
// FULL TEST LIST = [1, 2, 3, 5, 7, 10, 20];

0
examples/img/black.png → cypress/test-pages/img/black.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

0
examples/img/rainbow-horizontal.png → cypress/test-pages/img/rainbow-horizontal.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

0
examples/img/rainbow-vertical.png → cypress/test-pages/img/rainbow-vertical.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 138 KiB

After

Width:  |  Height:  |  Size: 138 KiB

0
examples/img/red.png → cypress/test-pages/img/red.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

0
examples/img/transparent.png → cypress/test-pages/img/transparent.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

0
examples/img/white.png → cypress/test-pages/img/white.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

10
index.html → cypress/test-pages/index.html Executable file → Normal file
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Color Thief</title>
<link rel="stylesheet" href="examples/css/screen.css">
<link rel="stylesheet" href="./screen.css">
</head>
<body>
@@ -14,7 +14,7 @@
{{#.}}
<div class="image-section" data-image="{{.}}">
<h2>{{.}}</h2>
<img class="image" src="examples/img/{{.}}" />
<img class="image" src="./img/{{.}}" />
<div class="output"></div>
</div>
{{/.}}
@@ -49,9 +49,9 @@
</script>
<script src="src/color-thief.js"></script>
<script src="examples/js/mustache.js"></script>
<script src="examples/js/demo.js"></script>
<script src="/src/color-thief.js"></script>
<script src="/node_modules/mustache/mustache.js"></script>
<script src="index.js"></script>
</body>
</html>

58
cypress/test-pages/index.js Normal file
View File

@@ -0,0 +1,58 @@
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.
// We also log execution time of functions for display.
const showColorsForImage = function(image, section) {
// getColor(img)
let start = Date.now();
let result = colorThief.getColor(image);
let elapsedTime = Date.now() - start;
const colorHTML = Mustache.to_html(document.getElementById('color-tpl').innerHTML, {
color: result,
colorStr: result.toString(),
elapsedTime
})
// getPalette(img)
let paletteHTML = '';
let colorCounts = [null, 1, 2, 3, 5, 7, 10, 20];
colorCounts.forEach((count) => {
let start = Date.now();
let result = colorThief.getPalette(image, count);
let elapsedTime = Date.now() - start;
paletteHTML += Mustache.to_html(document.getElementById('palette-tpl').innerHTML, {
count,
palette: result,
paletteStr: result.toString(),
elapsedTime
})
});
const outputEl = section.querySelector('.output');
outputEl.innerHTML += colorHTML + paletteHTML;
};

95
cypress/test-pages/screen.css Normal file
View File

@@ -0,0 +1,95 @@
:root {
/* Colors */
--color: #000;
--bg-color: #f9f9f9;
--primary-color: #fc4c02;
--secondary-color: #f68727;
--muted-color: #999;
--code-color: var(--primary-color);
--code-bg-color: #fff;
/* Typography */
--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;
--bold: 700;
--x-bold: 900;
--line-height: 1.5em;
--line-height-heading: 1.3em;
/* Breakpoints */
--sm-screen: 640px;
}
/* Base
* *----------------------------------------------- */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: var(--bg-color);
}
/* Typography
* *----------------------------------------------- */
html {
font-size: 16px;
font-family: var(--font);
line-height: var(--line-height);
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
font-weight: var(--x-bold);
line-height: var(--line-height-heading);
letter-spacing: -0.005em;
}
h2 {
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 ------------------------------------------------------------------ */
.image-section {
border-bottom: 1px solid #ccc;
padding: 16px 16px 32px 16px;
margin-bottom: 32px;
}
.swatch {
display: inline-block;
background: #dddddd;
}
.color .swatch {
width: 6rem;
height: 3rem;
}
.palette .swatch {
width: 3rem;
height: 2rem;
}
.time {
color: var(--muted-color);
font-weight: normal;
}

12
examples/css/screen.css
View File

@@ -22,7 +22,7 @@
/* Base
* *----------------------------------------------- */
* {
/** {
box-sizing: border-box;
}
@@ -31,10 +31,10 @@ body {
padding: 0;
background: var(--bg-color);
}
*/
/* Typography
* *----------------------------------------------- */
/*
html {
font-size: 16px;
font-family: var(--font);
@@ -64,10 +64,10 @@ code {
font-family: var(--code-font);
overflow-wrap: break-word;
}
*/
/* -- Layout ------------------------------------------------------------------ */
/*
.image-section {
border-bottom: 1px solid #ccc;
padding: 16px 16px 32px 16px;
@@ -92,4 +92,4 @@ code {
.time {
color: var(--muted-color);
font-weight: normal;
}
}*/

6
package-lock.json generated
View File

@@ -1726,6 +1726,12 @@
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true
},
"mustache": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/mustache/-/mustache-3.0.1.tgz",
"integrity": "sha512-jFI/4UVRsRYdUbuDTKT7KzfOp7FiD5WzYmmwNwXyUVypC0xjoTL78Fqc0jHUPIvvGD+6DQSPHIt1NE7D1ArsqA==",
"dev": true
},
"mute-stream": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",