Skip to content

Commit

Permalink
Changes
Browse files Browse the repository at this point in the history 
* fixed compile headers
* updated tests
* added proper dev setup
* updated deps
* removed 150 x 150 control size on mobile
* improve handling of colorNames, mainly typescript
* only use left click on pointerdown event handler
* added pnpm package manager
  • Loading branch information
@thednp
thednp committed Aug 19, 2023
1 parent 6c5349b commit c430456
Show file tree
Hide file tree
Showing 25 changed files with 7,371 additions and 521 deletions.
9 changes: 6 additions & 3 deletions compile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,15 @@
// Build script to compile and minify the CSS file from SCSS folder
// Usage: npm run compile-scss

const fs = require("fs");
const writeFileSync = fs.writeFileSync;
const {writeFileSync} = require("fs");
// const writeFileSync = fs.writeFileSync;
// import { writeFileSync } from "fs";
const sass = require("sass");
const pkg = require("./package.json");
const year = new Date().getFullYear();
const args = {};
const pkName = pkg.name.includes(pkg.author) ? pkg.name.replace('@','') : `${pkg.author}/${pkg.name}`;
const home = `https://github.com/${pkName}`;

const ARGS = process.argv.slice(-1)[0].split(",");
ARGS.map((x) => {
Expand All @@ -22,7 +25,7 @@ const banner =
: `/*!
* ColorPicker v${pkg.version} (${pkg.homepage})
* Copyright ${year} © ${pkg.author}
* Licensed under MIT (${pkg.license}/blob/main/LICENSE)
* Licensed under MIT (${home}/blob/main/LICENSE)
*/`;

const DIR = args.DIR === "rtl" ? ".rtl" : "";
Expand Down
127 changes: 58 additions & 69 deletions cypress/e2e/color-picker.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,11 +80,10 @@ describe('ColorPicker Class Test', () => {
});

cy.document().should('not.be.undefined')
.get('@input').should('exist')
cy.document().invoke('querySelectorAll', selector)
.then((nodelist ) => {
[...nodelist as NodeListOf<HTMLInputElement>].forEach(init);
})
cy.get('@input').should('exist')
cy.document().invoke('querySelectorAll', selector).then((nodelist ) => {
[...nodelist as NodeListOf<HTMLInputElement>].forEach(init);
})

cy.get('@input').then(($input) => {
if ($input.length) {
Expand All @@ -95,8 +94,9 @@ describe('ColorPicker Class Test', () => {

cy.get('@cp').should('exist')
.get('@cp').then(() => {
cy.get('@cp').its('colorLabels').then(({white,black,grey,red,orange,brown,gold,olive,yellow,lime,green,teal,cyan,blue,violet,magenta,pink}) => {
expect([white,black,grey,red,orange,brown,gold,olive,yellow,lime,green,teal,cyan,blue,violet,magenta,pink])
cy.get('@cp').its('colorLabels').then((lbls) => {
// console.log(lbls)
expect(Object.values(lbls))
.to.deep.equal(colorNamesFrench.split(','));
})

Expand Down Expand Up @@ -130,17 +130,18 @@ describe('ColorPicker Class Test', () => {
colorLabels: colorNamesFrench,
componentLabels: componentLabelsFrench,
});
console.log(cp)
// console.log(cp)
cy.wrap(cp).as('cp');
cy.get('@cp').then(() => {
cy.get('@cp').its('input').should('equal', input[0]);
cy.get('@cp').its('format').should('equal', format);
cy.get('@cp').its('value').should('equal', value);
cy.get('@cp').its('colorPresets').should('be.instanceOf', Array);
cy.get('@cp').its('colorLabels')
.then(({white,black,grey,red,orange,brown,gold,olive,yellow,lime,green,teal,cyan,blue,violet,magenta,pink}) => {
expect([white,black,grey,red,orange,brown,gold,olive,yellow,lime,green,teal,cyan,blue,violet,magenta,pink]).to.deep.equal(colorNamesFrench.split(','));
});
cy.get('@cp').its('colorLabels').then((lbls) => {
// console.log(lbls)
expect(Object.values(lbls))
.to.deep.equal(colorNamesFrench.split(','));
})
cy.get('@cp').its('colorKeywords').should('deep.equal', ['orange', 'lime', 'darkred']);
cy.get('@cp').its('colorPicker').should('be.instanceOf', HTMLDivElement);
cy.get('@cp').its('colorMenu').should('be.instanceOf', HTMLDivElement);
Expand Down Expand Up @@ -180,10 +181,7 @@ describe('ColorPicker Class Test', () => {
cy.wrap(new ColorPicker(input[0], {
colorPresets: '#330033, #990099, #ff00ff, #ff66ff, #ffccff'.split(','),
})).as('cp');
// cy.get('@cp')
// .then(() => {
cy.get('@cp').its('colorPresets').should('be.instanceOf', Array);
// });
cy.get('@cp').its('colorPresets').should('be.instanceOf', Array);
}
});
});
Expand All @@ -203,39 +201,41 @@ describe('ColorPicker Class Test', () => {
cy.wrap(input[0]).focus().clear().type('hsl 0 100 50{enter}')
cy.wait(50)
cy.get('@cp').its('rgb').then((rgb) => {
cy.get('.visual-control').eq(0).trigger('pointerdown', 0, 0, { force: true, pointerType: 'touch' })
cy.get('.visual-control').eq(0).trigger('pointermove', -5, -5, { force: true, pointerType: 'touch' })
cy.get('.visual-control').eq(0).trigger('pointermove', 500, 500, { force: true, pointerType: 'touch' })
cy.get('.visual-control').eq(0).trigger('pointermove', 100, 100, { force: true, pointerType: 'touch' })
cy.get('.visual-control').eq(0).trigger('pointerup', 100, 100, { force: true, pointerType: 'touch' }).then(() => {
cy.wait(17)
// cy.wait(17)

cy.get('.visual-control').eq(0)
.trigger('pointerdown', 0, 0, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
.trigger('pointermove', -5, -5, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
.trigger('pointermove', 500, 500, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
.trigger('pointermove', 100, 100, {eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
.trigger('pointerup', 100, 100, {eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
.then(() => {
cy.get('@cp').its('rgb').should('not.deep.equal', rgb);
})
});

cy.wrap(input[0]).focus().clear().type('hsl 0 100 50{enter}')
.get('@cp').its('rgb').then((rgb) => {
cy.get('.visual-control').eq(1)
.trigger('pointerdown', 3, 0, { force: true, pointerType: 'touch' })
.trigger('pointermove', 0, -5, { force: true, pointerType: 'touch' })
.trigger('pointermove', 3, 500, { force: true, pointerType: 'touch' })
.trigger('pointermove', 3, 100, { force: true, pointerType: 'touch' })
.trigger('pointerup', 3, 100, { force: true, pointerType: 'touch' })
.trigger('pointerdown', 3, 0, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
.trigger('pointermove', 0, -5, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
.trigger('pointermove', 3, 500, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
.trigger('pointermove', 3, 100, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
.trigger('pointerup', 3, 100, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
.then(() => {
cy.wait(17)
.get('@cp').its('rgb').should('not.deep.equal', rgb);
cy.get('@cp').its('rgb').should('not.deep.equal', rgb);
})
});

cy.wrap(input[0]).focus().clear().type('hsl 0 100 50{enter}')
.get('@cp').its('rgb').then((rgb) => {
cy.get('@cp').its('rgb').then((rgb) => {
cy.get('.visual-control').eq(2)
.trigger('pointerdown', 3, 0, { force: true, pointerType: 'touch' })
.trigger('pointermove', 3, -5, { force: true, pointerType: 'touch' })
.trigger('pointermove', 3, 200, { force: true, pointerType: 'touch' })
.trigger('pointermove', 3, 500, { force: true, pointerType: 'touch' })
.trigger('pointermove', 3, 100, { force: true, pointerType: 'touch' })
.trigger('pointerup', 3, 100, { force: true, pointerType: 'touch' })
.trigger('pointerdown', 3, 0, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
.trigger('pointermove', 3, -5, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
.trigger('pointermove', 3, 200, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
.trigger('pointermove', 3, 500, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
.trigger('pointermove', 3, 100, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
.trigger('pointerup', 3, 100, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
.then(() => {
cy.wait(17)
.get('@cp').its('rgb').should('not.deep.equal', rgb);
Expand All @@ -253,11 +253,7 @@ describe('ColorPicker Class Test', () => {
const format = FORMAT[getRandomInt(0,3)];
getMarkup(body, id, format);

const a = document.createElement('button');
// a.setAttribute('href', '#');
a.innerText = 'Some link';
body.append(a);
cy.wrap(a).as('a');
// cy.wrap(a).as('a');
// cy.get(`#color-picker-${id}`).then((input) => {
cy.get('input').then((input) => {
cy.wrap(input[0]).as('input');
Expand Down Expand Up @@ -329,16 +325,9 @@ describe('ColorPicker Class Test', () => {
cy.wait(17);

cy.log('Testing `focusout` on `input`');
cy.get('@a').focus()
cy.get('@a').blur()

// cy.get('@a').focus();
cy.wait(17)
// cy.get('@a').trigger('focusin', {force: true})
// cy.get('@a').trigger('focusout', {force: true})
// .then(() => {
cy.get('.color-dropdown.picker').should('not.have.class', 'show')
// });
cy.get('a.my-link').eq(0).click({force: true})
cy.get('.color-dropdown.picker').should('not.have.class', 'show')

cy.wait(17);

Expand Down Expand Up @@ -601,12 +590,12 @@ describe('ColorPicker Class Test', () => {
const { width, height} = visual[0].getBoundingClientRect();

cy.get('.knob').eq(0)
.trigger('pointerdown', { force: true })
.trigger('pointermove', -width, -height, { force: true })
.trigger('pointermove', -width - 100, -height - 100, { force: true })
.trigger('pointermove', 300, 300, { force: true })
.trigger('pointermove', -width + 50, -height + 50, { force: true })
.wait(17)
.trigger('pointerdown', { eventConstructor: 'PointerEvent', force: true })
.trigger('pointermove', -width, -height, { eventConstructor: 'PointerEvent', force: true })
.trigger('pointermove', -width - 100, -height - 100, { eventConstructor: 'PointerEvent', force: true })
.trigger('pointermove', 300, 300, { eventConstructor: 'PointerEvent', force: true })
.trigger('pointermove', -width + 50, -height + 50, { eventConstructor: 'PointerEvent', force: true })
// .wait(17)
.get('@cp').its('rgb').should('not.deep.equal', rgb);
});
});
Expand All @@ -617,11 +606,11 @@ describe('ColorPicker Class Test', () => {
const { width, height } = visual[0].getBoundingClientRect();

cy.get('.knob').eq(1)
.trigger('pointerdown', { force: true })
.trigger('pointermove', width / 2, -height - 100, { force: true })
.trigger('pointermove', width / 2, 300, { force: true })
.trigger('pointermove', width / 2, -height + 20, { force: true })
.wait(17)
.trigger('pointerdown', { eventConstructor: 'PointerEvent', force: true })
.trigger('pointermove', width / 2, -height - 100, { eventConstructor: 'PointerEvent', force: true })
.trigger('pointermove', width / 2, 300, { eventConstructor: 'PointerEvent', force: true })
.trigger('pointermove', width / 2, -height + 20, { eventConstructor: 'PointerEvent', force: true })
// .wait(17)
.get('@cp').its('rgb').should('not.deep.equal', rgb);
});
});
Expand All @@ -632,11 +621,11 @@ describe('ColorPicker Class Test', () => {
const { width, height } = visual[0].getBoundingClientRect();

cy.get('.knob').eq(2)
.trigger('pointerdown', { force: true })
.trigger('pointermove', width / 2, -height - 100, { force: true })
.trigger('pointermove', width / 2, 300, { force: true })
.trigger('pointermove', width / 2, -height + 20, { force: true })
.wait(17)
.trigger('pointerdown', { eventConstructor: 'PointerEvent', force: true })
.trigger('pointermove', width / 2, -height - 100, { eventConstructor: 'PointerEvent', force: true })
.trigger('pointermove', width / 2, 300, { eventConstructor: 'PointerEvent', force: true })
.trigger('pointermove', width / 2, -height + 20, { eventConstructor: 'PointerEvent', force: true })
// .wait(17)
.get('@cp').its('rgb').should('not.deep.equal', rgb);
});
});
Expand All @@ -653,7 +642,7 @@ describe('ColorPicker Class Test', () => {
.trigger('keydown', { code: 'ArrowRight' })
.trigger('keydown', { code: 'ArrowRight' })
.trigger('keydown', { code: 'ArrowLeft' })
.wait(17)
// .wait(17)
.get('@cp').its('rgb').should('not.deep.equal', rgb);
});

Expand All @@ -667,7 +656,7 @@ describe('ColorPicker Class Test', () => {
.trigger('keydown', { code: 'ArrowLeft' })
.trigger('keydown', { code: 'ArrowLeft' })
.trigger('keydown', { code: 'ArrowRight' })
.wait(17)
// .wait(17)
.get('@cp').its('rgb').should('not.deep.equal', rgb);
});

Expand All @@ -681,7 +670,7 @@ describe('ColorPicker Class Test', () => {
.trigger('keydown', { code: 'ArrowLeft' })
.trigger('keydown', { code: 'ArrowLeft' })
.trigger('keydown', { code: 'ArrowRight' })
.wait(17)
// .wait(17)
.get('@cp').its('rgb').should('not.deep.equal', rgb);
});
});
Expand Down
29 changes: 0 additions & 29 deletions cypress/fixtures/getCEMarkup.js
View file

This file was deleted.

9 changes: 8 additions & 1 deletion cypress/fixtures/getMarkup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,16 @@ export default function getMarkup(body, id, format) {
input.setAttribute('autocomplete', "off");
input.setAttribute('spellcheck', "false");
input.setAttribute('data-format', format);

const a = document.createElement('a');
a.setAttribute('href', '#');
a.innerText = 'Some link';
a.className = 'my-link';
a.style = 'position: absolute; top: 20px; opacity: 0.015';
// body.append(a);
cpWrapper.append(input);
if (body) {
body.append(label, cpWrapper);
body.append(label, cpWrapper, a);
}
return {set, value};
}
22 changes: 7 additions & 15 deletions dist/css/color-picker.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*!
* ColorPicker v2.0.0-alpha7 (http://thednp.github.io/color-picker)
* ColorPicker v2.0.0-alpha9 (http://thednp.github.io/color-picker)
* Copyright 2023 © thednp
* Licensed under MIT (MIT/blob/main/LICENSE)
* Licensed under MIT (https://github.com/thednp/color-picker/blob/main/LICENSE)
*/
/* :host */
.color-picker {
Expand Down Expand Up @@ -293,7 +293,7 @@
transition: var(--options-transition);
}

.color-options.scrollable:hover {
.color-dropdown.menu:hover .scrollable {
height: var(--grid-hover-height);
}

Expand All @@ -314,7 +314,7 @@
width: var(--grid-item-size);
height: var(--grid-item-size);
overflow: hidden;
text-indent: 2.1rem;
color: rgba(0, 0, 0, 0);
}
.color-options .color-option:active, .color-options .color-option:focus {
outline: none;
Expand Down Expand Up @@ -399,14 +399,14 @@

/* visual control */
.visual-control {
height: 150px;
height: 230px;
/* important for mobile devices */
touch-action: none;
box-shadow: var(--visual-shadow);
}

.visual-control1 {
width: 150px;
width: 230px;
}

.visual-control2,
Expand All @@ -415,15 +415,7 @@
cursor: ns-resize;
}

@media (width >= 578px) {
.visual-control {
height: 230px;
}
.visual-control1 {
width: 230px;
}
}
@media (width >= 1200px) {
@media (width >= 980px) {
.visual-control {
height: 300px;
}
Expand Down
Loading

0 comments on commit c430456

Please sign in to comment.