client: Do not use spectrum for colorpicker

It is unmaintained, depends on jQuery and Parcel no longer wants to parse its CSS (asterisk hack before display property for IE 7 support).

We need to use popper/floating-ui to correctly position the popup since the sidebar it is in has `position: fixed` and `overflow: hidden`.

NEWS.md

@@ -20,6 +20,7 @@
 - YouTube spout now supports following playlists. ([#1260](https://github.com/fossar/selfoss/pull/1260))
 - Confirmation is now required when leaving the setting page with unsaved source changes. ([#1300](https://github.com/fossar/selfoss/pull/1300))
 - Add link from settings page to individual sources. ([#1329](https://github.com/fossar/selfoss/pull/1329))
+- Tag colour can be now changed using keyboard. ([#1335](https://github.com/fossar/selfoss/pull/1335))
 - Translations into several new languages were added:
   - English (United Kingdom): `en-GB`
   - French (Canada): `fr-CA`

README.md

@@ -97,7 +97,6 @@ Special thanks to the great programmers of these libraries used by selfoss:
 * [PHP Universal Feed Generator](https://github.com/ajaxray/FeedWriter)
 * [Elphin IcoFileLoader](https://github.com/lordelph/icofileloader)
 * [jQuery hotkeys](https://github.com/tzuryby/jquery.hotkeys)
-* [Spectrum Colorpicker](https://github.com/bgrins/spectrum)
 * [Graby](https://github.com/j0k3r/graby)
 * [FullTextRSS filters](http://help.fivefilters.org/customer/portal/articles/223153-site-patterns)
 

assets/js/helpers/color.js

@@ -0,0 +1,20 @@
+/**
+ * Get dark OR bright color depending the color contrast.
+ *
+ * @param string hexColor color (hex) value
+ * @param string darkColor dark color value
+ * @param string brightColor bright color value
+ *
+ * @return string dark OR bright color value
+ *
+ * @see https://24ways.org/2010/calculating-color-contrast/
+ */
+export function colorByBrightness(hexColor, darkColor = '#555', brightColor = '#EEE') {
+    // Strip hash sign.
+    const color = hexColor.substr(1);
+    const r = parseInt(color.substr(0, 2), 16);
+    const g = parseInt(color.substr(2, 2), 16);
+    const b = parseInt(color.substr(4, 2), 16);
+    const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+    return yiq >= 128 ? darkColor : brightColor;
+}

assets/js/icons.js

@@ -11,6 +11,7 @@ import { faStar as faStarRegular } from '@fortawesome/free-regular-svg-icons/faS
 import { faTimesCircle } from '@fortawesome/free-regular-svg-icons/faTimesCircle';
 import { faArrowAltCircleDown } from '@fortawesome/free-solid-svg-icons/faArrowAltCircleDown';
 import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight';
+import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
 import { faCheckCircle } from '@fortawesome/free-solid-svg-icons/faCheckCircle';
 import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown';
 import { faCaretRight } from '@fortawesome/free-solid-svg-icons/faCaretRight';
@@ -54,6 +55,7 @@ export {
     faArrowRight as next,
     faCaretDown as arrowExpanded,
     faCaretRight as arrowCollapsed,
+    faCheck as check,
     faCheckCircle as markRead,
     faCloudUploadAlt as settings,
     faCog as menu,

assets/js/index.js

@@ -1,6 +1,5 @@
 import 'regenerator-runtime/runtime';
 import './jquery';
-import 'spectrum-colorpicker';
 import selfoss from './selfoss-base';
 import './selfoss-shares';
 import './selfoss-db-online';

assets/js/templates/ColorChooser.jsx

@@ -1,33 +1,116 @@
-import React from 'react';
+import React, { useContext, useMemo } from 'react';
+import { useFloating, autoUpdate, flip, offset, shift } from '@floating-ui/react-dom';
 import PropTypes from 'prop-types';
+import { Button as MenuButton, Wrapper as MenuWrapper, Menu, MenuItem } from 'react-aria-menubutton';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { colorByBrightness } from '../helpers/color';
+import { LocalizationContext } from '../helpers/i18n';
+import * as icons from '../icons';
+
+const palette = ['#ffccc9', '#ffce93', '#fffc9e', '#ffffc7', '#9aff99', '#96fffb', '#cdffff', '#cbcefb', '#fffe65', '#cfcfcf', '#fd6864', '#fe996b', '#fcff2f', '#67fd9a', '#38fff8', '#68fdff', '#9698ed', '#c0c0c0', '#fe0000', '#f8a102', '#ffcc67', '#f8ff00', '#34ff34', '#68cbd0', '#34cdf9', '#6665cd', '#9b9b9b', '#cb0000', '#f56b00', '#ffcb2f', '#ffc702', '#32cb00', '#00d2cb', '#3166ff', '#6434fc', '#656565', '#9a0000', '#ce6301', '#cd9934', '#999903', '#009901', '#329a9d', '#3531ff', '#6200c9', '#343434', '#680100', '#963400', '#986536', '#646809', '#036400', '#34696d', '#00009b', '#303498', '#000000', '#330001', '#643403', '#663234', '#343300', '#013300', '#003532', '#010066', '#340096'];
+
+function ColorButton({tag, color}) {
+    const style = useMemo(
+        () => ({
+            backgroundColor: color,
+            color: colorByBrightness(color),
+        }),
+        [color]
+    );
+
+    const selected = color === tag.color;
+
+    return (
+        <MenuItem
+            className="popup-menu-item"
+            value={color}
+            style={style}
+        >
+            {selected
+                ? <FontAwesomeIcon icon={icons.check} />
+                : ' '
+            }
+        </MenuItem>
+    );
+}
+
+ColorButton.propTypes = {
+    tag: PropTypes.object.isRequired,
+    color: PropTypes.string.isRequired,
+};
+
+const preventDefault = (event) => {
+    event.preventDefault();
+    // Prevent closing navigation on mobile.
+    event.stopPropagation();
+};
 
 export default function ColorChooser({tag, onChange}) {
-    const colorChooser = React.useRef(null);
-
-    React.useLayoutEffect(() => {
-        // init colorpicker
-        const picker = colorChooser.current;
-        $(picker).spectrum({
-            showPaletteOnly: true,
-            color: tag.color,
-            palette: [
-                ['#ffccc9', '#ffce93', '#fffc9e', '#ffffc7', '#9aff99', '#96fffb', '#cdffff', '#cbcefb', '#fffe65', '#cfcfcf', '#fd6864', '#fe996b', '#fcff2f', '#67fd9a', '#38fff8', '#68fdff', '#9698ed', '#c0c0c0', '#fe0000', '#f8a102', '#ffcc67', '#f8ff00', '#34ff34', '#68cbd0', '#34cdf9', '#6665cd', '#9b9b9b', '#cb0000', '#f56b00', '#ffcb2f', '#ffc702', '#32cb00', '#00d2cb', '#3166ff', '#6434fc', '#656565', '#9a0000', '#ce6301', '#cd9934', '#999903', '#009901', '#329a9d', '#3531ff', '#6200c9', '#343434', '#680100', '#963400', '#986536', '#646809', '#036400', '#34696d', '#00009b', '#303498', '#000000', '#330001', '#643403', '#663234', '#343300', '#013300', '#003532', '#010066', '#340096']
-            ],
-            change: onChange,
-        });
-
-        return () => {
-            $(picker).spectrum('destroy');
-        };
-    }, [onChange, tag.color]);
-
-    const style = React.useMemo(
+    const style = useMemo(
         () => ({ backgroundColor: tag.color }),
         [tag.color]
     );
 
+    const {
+        x: menuX,
+        y: menuY,
+        reference: buttonRef,
+        floating: floatingRef,
+        strategy: positionStrategy,
+    } = useFloating({
+        placement: 'right-start',
+        strategy: 'fixed',
+        middleware: [
+            offset({ mainAxis: 16 }),
+            shift(),
+            flip(),
+        ],
+        whileElementsMounted: autoUpdate,
+    });
+
+    const _ = useContext(LocalizationContext);
+
     return (
-        <span className="color" style={style} ref={colorChooser} />
+        <MenuWrapper
+            className="popup-menu-wrapper color"
+            onSelection={onChange}
+            style={style}
+            onClick={preventDefault}
+        >
+            <MenuButton
+                className="color-chooser-button"
+                ref={buttonRef}
+                title={_('tag_change_color_button_title')}
+            >
+                <span className="visually-hidden">
+                    {_('tag_change_color_button_title')}
+                </span>
+            </MenuButton>
+            <Menu
+                className="popup-menu"
+                ref={floatingRef}
+                style={{
+                    position: positionStrategy,
+                    top: menuY ?? '',
+                    left: menuX ?? '',
+                }}
+            >
+                {palette.map((color) => (
+                    <ColorButton
+                        key={color}
+                        color={color}
+                        tag={tag}
+                    />
+                ))}
+                {!palette.includes(tag.color) && (
+                    <ColorButton
+                        key="custom"
+                        color={tag.color}
+                        tag={tag}
+                    />
+                )}
+            </Menu>
+        </MenuWrapper>
     );
 }
 

assets/js/templates/NavTags.jsx

@@ -20,7 +20,7 @@ function Tag({ tag, active, collapseNav }) {
         (color) => {
             updateTag(
                 tagName,
-                color.toHexString()
+                color
             ).then(() => {
                 selfoss.entriesPage?.reload();
             }).catch((error) => {

assets/locale/cs.json

@@ -50,6 +50,7 @@
   "lang_source_last_post": "Poslední příspěvek spatřen",
   "lang_source_refresh": "Obnovit tento zdroj",
   "lang_sources_leaving_unsaved_prompt": "Na stránce jsou neuložené změny. Opravdu chcete opustit nastavení?",
+  "lang_tag_change_color_button_title": "Změnit barvu",
   "lang_no_entries": "Žádný záznam",
   "lang_more": "Více",
   "lang_login": "Přihlásit",

assets/locale/en.json

@@ -62,6 +62,7 @@
   "lang_source_last_post": "Last post seen",
   "lang_source_refresh": "Refresh this source",
   "lang_sources_leaving_unsaved_prompt": "Leave settings with unsaved source changes?",
+  "lang_tag_change_color_button_title": "Change color",
   "lang_no_entries": "No entries found",
   "lang_more": "More",
   "lang_login": "Log in",

assets/package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@fancyapps/fancybox": "^3.1.20",
+    "@floating-ui/react-dom": "^0.7.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-brands-svg-icons": "^6.0.0",
     "@fortawesome/free-regular-svg-icons": "^6.0.0",
@@ -25,7 +26,6 @@
     "react-router-dom": "^5.2.0",
     "reset-css": "^5.0.1",
     "rooks": "^5.0.2",
-    "spectrum-colorpicker": "^1.8.1",
     "tinykeys": "^1.1.1",
     "unreset-css": "^1.0.1",
     "use-state-with-deps": "^1.1.1"