Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use native eyedropper API if available #11739

Merged
merged 17 commits into from
Jun 29, 2022
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import {
localStore,
LOCAL_STORAGE_PREFIX,
themeHelpers,
noop,
} from '@googleforcreators/design-system';
import { __ } from '@googleforcreators/i18n';
import { useState } from '@googleforcreators/react';
Expand All @@ -40,6 +41,7 @@ import { useState } from '@googleforcreators/react';
*/
import useStory from '../../app/story/useStory';
import useEyedropper from '../eyedropper';
import useEyeDropperApi from '../eyedropper/useEyeDropperApi';
import { BASIC_COLORS, CONFIRMATION_DIALOG_STORAGE_KEY } from './constants';
import Header from './header';
import BasicColorList from './basicColorList';
Expand Down Expand Up @@ -127,6 +129,10 @@ function BasicColorPicker({
onChange: (newColor) => handleColorChange({ color: newColor }),
});

const { isEyeDropperApiSupported, openEyeDropper } = useEyeDropperApi({
onChange: (newColor) => handleColorChange({ color: newColor }),
timarney marked this conversation as resolved.
Show resolved Hide resolved
});

const { deleteLocalColor, deleteGlobalColor } = useDeleteColor({
onEmpty: () => setIsEditMode(false),
});
Expand Down Expand Up @@ -187,8 +193,12 @@ function BasicColorPicker({
type={BUTTON_TYPES.QUATERNARY}
size={BUTTON_SIZES.SMALL}
aria-label={__('Pick a color from canvas', 'web-stories')}
onClick={initEyedropper()}
onPointerEnter={initEyedropper(false)}
onClick={
isEyeDropperApiSupported ? openEyeDropper : initEyedropper()
}
onPointerEnter={
isEyeDropperApiSupported ? noop : initEyedropper(false)
}
timarney marked this conversation as resolved.
Show resolved Hide resolved
>
<Icons.Pipette />
</Button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import {
BUTTON_VARIANTS,
BUTTON_TYPES,
CircularProgress,
noop,
} from '@googleforcreators/design-system';

const Saturation = lazy(() =>
Expand All @@ -57,6 +58,7 @@ const Alpha = lazy(() =>
* Internal dependencies
*/
import useEyedropper from '../eyedropper';
import useEyeDropperApi from '../eyedropper/useEyeDropperApi';
import Pointer from './pointer';
import EditablePreview from './editablePreview';

Expand Down Expand Up @@ -159,6 +161,10 @@ function CurrentColorPicker({
onChange,
});

const { isEyeDropperApiSupported, openEyeDropper } = useEyeDropperApi({
onChange: (color) => onChange({ color }),
});

return (
<>
<Suspense fallback={null}>
Expand Down Expand Up @@ -213,8 +219,12 @@ function CurrentColorPicker({
type={BUTTON_TYPES.QUATERNARY}
size={BUTTON_SIZES.SMALL}
aria-label={__('Pick a color from canvas', 'web-stories')}
onClick={initEyedropper()}
onPointerEnter={initEyedropper(false)}
onClick={
isEyeDropperApiSupported ? openEyeDropper : initEyedropper()
}
onPointerEnter={
isEyeDropperApiSupported ? noop : initEyedropper(false)
}
>
<Icons.Pipette />
</Button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,12 @@ describe('Eyedropper', () => {

beforeEach(async () => {
fixture = new Fixture();

// removed to run test against htmlToImage EyeDropper vs API
// see issue testing with native API here
// https://github.com/GoogleForCreators/web-stories-wp/pull/11739#issuecomment-1162367409
delete window.EyeDropper;
timarney marked this conversation as resolved.
Show resolved Hide resolved

await fixture.render();
await fixture.collapseHelpCenter();
});
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/*
* Copyright 2022 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* External dependencies
*/
import { useEffect, useCallback, useRef } from 'react';
import { getSolidFromHex } from '@googleforcreators/patterns';

function useEyeDropperApi({ onChange }) {
const isEyeDropperApiSupported =
(typeof window !== 'undefined') & ('EyeDropper' in window);
timarney marked this conversation as resolved.
Show resolved Hide resolved

const eyeDropper = useRef(false);
timarney marked this conversation as resolved.
Show resolved Hide resolved

useEffect(() => {
if (isEyeDropperApiSupported && !eyeDropper.current) {
eyeDropper.current = new window.EyeDropper();
}
}, [isEyeDropperApiSupported]);

const openEyeDropper = useCallback(async () => {
if (!eyeDropper.current || !isEyeDropperApiSupported) {
return;
}

try {
const { sRGBHex } = await eyeDropper.current.open();
onChange(getSolidFromHex(sRGBHex.substring(1)).color);
} catch (e) {
//eslint-disable-next-line no-console -- Surface error for debugging.
console.log(e.message);
}
}, [eyeDropper, isEyeDropperApiSupported, onChange]);
timarney marked this conversation as resolved.
Show resolved Hide resolved

return { isEyeDropperApiSupported, openEyeDropper };
}

export default useEyeDropperApi;
15 changes: 13 additions & 2 deletions packages/story-editor/src/components/form/color/color.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {
Icons,
PLACEMENT,
TOOLTIP_PLACEMENT,
noop,
} from '@googleforcreators/design-system';
import { v4 as uuidv4 } from 'uuid';

Expand All @@ -38,6 +39,7 @@ import { v4 as uuidv4 } from 'uuid';
*/
import { MULTIPLE_VALUE } from '../../../constants';
import useEyedropper from '../../eyedropper';
import useEyeDropperApi from '../../eyedropper/useEyeDropperApi';
import Tooltip from '../../tooltip';
import { focusStyle } from '../../panels/shared/styles';

Expand Down Expand Up @@ -130,6 +132,11 @@ const Color = forwardRef(function Color(
const { initEyedropper } = useEyedropper({
onChange: (color) => onChange({ color }),
});

const { isEyeDropperApiSupported, openEyeDropper } = useEyeDropperApi({
onChange: (color) => onChange({ color }),
});

const tooltip = __('Pick a color from canvas', 'web-stories');

const tooltipPlacement =
Expand Down Expand Up @@ -162,8 +169,12 @@ const Color = forwardRef(function Color(
id={uuidv4()}
tabIndex={tabIndex}
aria-label={tooltip}
onClick={initEyedropper()}
onPointerEnter={initEyedropper(false)}
onClick={
isEyeDropperApiSupported ? openEyeDropper : initEyedropper()
}
onPointerEnter={
isEyeDropperApiSupported ? noop : initEyedropper(false)
}
>
<Icons.Pipette />
</EyeDropperButton>
Expand Down