Add option to query contrast colors

README.md

@@ -28,6 +28,50 @@ This field is provided under the type `colors`:
 -   `contrast`: allows you to enable or disable the contrast widget that calculated the most readable contrast color, either `true` or `false` or an array of colors the plugin should choose from.
 -   `default`: the color to be used as default, either in hex3, hex6, hex8, rgb, rgba, hsl or hsla.
 
+### Dynamic contrast options
+
+In order to set contrast colors, it possible to either query another field:
+
+```
+colors:
+    type: colors
+    label: Colors
+    contrast:
+      type: query
+      query: site.contrasts
+```
+
+You will have to make sure that the references field returns either a single color or an array of colors. Use methods like `split` to handle comma-separated strings, e. g. `site.constrasts.split`.
+
+If you'd like to reference a field on the same page as your colors field, you'll have to watch for changes in order to get live updates:
+
+```
+colors:
+    type: colors
+    label: Colors
+    contrast:
+      type: watch
+      field: contrasts
+contrasts:
+    type: text
+    label: Contrast colors
+```
+
+If you need to split values of the watched field, you have to define the split character as well:
+
+```
+colors:
+    type: colors
+    label: Colors
+    contrast:
+      type: watch
+      field: contrasts
+      split: ','
+contrasts:
+    type: text
+    label: Contrast colors
+```
+
 ### Examples
 
 ![example 1](./.github/screenshot1.png)
@@ -201,7 +245,7 @@ This plugin bundles two classes, one for JavaScript and one for PHP, with the id
 2. Click the arrow icon to switch between color spaces.
 3. When editing RGB or HSL colors, use the up and down arrow keys to adjust the value by +1 or -1.
 4. Hold the [meta key](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/metaKey) (or the shift key) to adjust values by +10 or -10.
-5. Click on the grey unit indicator of a value then drag the mouse vertically to adjust the values on the fly.  
+5. Click on the grey unit indicator of a value then drag the mouse vertically to adjust the values on the fly.
    ![Drag-to-increment feature](./.github/tip5-dragfeature.gif)
 
 ## Alternatives
@@ -210,5 +254,5 @@ Please note that there is another color field for Kirby 3 developed by Tim Ötti
 
 # License
 
-This plugin is provided freely under the [MIT license](LICENSE.md) by [hana+nils · Büro für Gestaltung](https://hananils.de).  
+This plugin is provided freely under the [MIT license](LICENSE.md) by [hana+nils · Büro für Gestaltung](https://hananils.de).
 We create visual designs for digital and analog media.

composer.json

@@ -3,7 +3,7 @@
     "description": "A color field for Kirby 3",
     "type": "kirby-plugin",
     "license": "MIT",
-    "version": "1.6.0",
+    "version": "1.7.0",
     "authors": [
         {
             "name": "hana+nils · Büro für Gestaltung",
@@ -20,5 +20,10 @@
     },
     "require": {
         "getkirby/composer-installer": "^1.2"
+    },
+    "config": {
+        "allow-plugins": {
+            "getkirby/composer-installer": true
+        }
     }
 }

index.php

@@ -19,6 +19,58 @@
                     return $contrast;
                 }
             ],
+            'computed' => [
+                'contrastColors' => function () {
+                    $colors = $this->contrast;
+
+                    if ($colors === false) {
+                        return false;
+                    }
+
+                    if (isset($this->contrast['type'])) {
+                        $colors = true;
+                        $query = null;
+
+                        if (
+                            $this->contrast['type'] === 'query' &&
+                            isset($this->contrast['query'])
+                        ) {
+                            $query = $this->contrast['query'];
+                        } elseif (
+                            $this->contrast['type'] === 'watch' &&
+                            isset($this->contrast['field'])
+                        ) {
+                            $query = 'page.' . $this->contrast['field'];
+                        }
+
+                        if ($query) {
+                            $colors = $this->model()->query($query);
+
+                            if (isset($this->contrast['split'])) {
+                                $colors = explode(
+                                    $this->contrast['split'],
+                                    $colors
+                                );
+                            }
+
+                            if (!is_array($colors)) {
+                                $colors = [(string) $colors];
+                            }
+
+                            $colors = array_map('trim', $colors);
+                            $colors = array_filter($colors, function ($value) {
+                                return strlen($value) > 2;
+                            });
+                        }
+                    }
+
+                    if ($colors === true || empty($colors)) {
+                        return ['#fff', '#000'];
+                    }
+
+                    return $colors;
+                }
+            ],
             'save' => function ($value) {
                 return $value;
             }

package.json

@@ -4,6 +4,7 @@
     "description": "Colors is a field for Kirby 3 that allows the selection of a color using the native color selector. Colors can be viewed and edited in either HEX, RGB or HSL. Additionally, the field automatically calculates the most readable contrast color. This can be useful, if you'd like to specify background colors and would like to adjust the text colors accordingly. The field displays the color contrast ratings AA, AALarge, AAA and AAALarge according to WCAG accessibility guidelines.",
     "scripts": {
         "dev": "npx -y kirbyup src/index.js --watch",
+        "serve": "npx -y kirbyup serve src/index.js",
         "build": "npx -y kirbyup src/index.js",
         "lint": "eslint \"src/**/*.{js,vue}\"",
         "lint:fix": "npm run lint -- --fix",

src/components/Colors.vue

@@ -30,6 +30,7 @@
             v-if="contrast !== false"
             :color="color"
             :contrast="contrast"
+            :contrastColors="contrastColors"
         />
     </k-field>
 </template>
@@ -58,6 +59,7 @@ export default {
         label: String,
         value: String,
         contrast: [Boolean, Array],
+        contrastColors: Array,
         readability: Boolean,
         alpha: Boolean,
         invalid: Boolean,

src/components/ColorsContrast.vue

@@ -18,18 +18,13 @@
 export default {
     props: {
         color: Object,
-        contrast: [Boolean, Array]
+        contrast: [Boolean, Array],
+        contrastColors: Array
     },
 
     computed: {
         readable() {
-            let colors = this.contrast;
-
-            if (colors === true) {
-                colors = ['#fff', '#000'];
-            }
-
-            return this.color.toMostReadable(colors);
+            return this.color.toMostReadable(this.contrastColors);
         },
 
         rating() {
@@ -48,6 +43,60 @@ export default {
 
             const [readable] = this.readable;
             return readable.color.toString();
+        },
+
+        watching() {
+            // fallback colors
+            let contrasts = ['#fff', '#000'];
+
+            if (this.isWatching) {
+                let value =
+                    this.$store.getters['content/changes']()[
+                        this.contrast.field
+                    ];
+
+                if (value) {
+                    contrasts = value;
+
+                    if (!Array.isArray(value)) {
+                        if (this.contrast.split) {
+                            // split field value into separate colors
+                            contrasts = value.split(this.contrast.split);
+                        } else {
+                            // make sure color is in an array
+                            contrasts = [value];
+                        }
+                    }
+
+                    // trim color values and remove too short values
+                    contrasts = contrasts.map((color) => color.trim());
+                    contrasts = contrasts.filter((color) => color.length > 2);
+                }
+            }
+
+            return contrasts;
+        },
+
+        isWatching() {
+            return this.contrast?.type === 'watch' && this.contrast?.field;
+        },
+
+        hasChanges() {
+            return this.$store.getters['content/hasChanges']()[
+                this.contrast.field
+            ];
+        }
+    },
+
+    created() {
+        if (this.isWatching && this.hasChanges) {
+            this.contrastColors = this.watching;
+        }
+    },
+
+    watch: {
+        watching() {
+            this.contrastColors = this.watching;
         }
     }
 };

vendor/autoload.php

@@ -2,6 +2,11 @@
 
 // autoload.php @generated by Composer
 
+if (PHP_VERSION_ID < 50600) {
+    echo 'Composer 2.3.0 dropped support for autoloading on PHP <5.6 and you are running '.PHP_VERSION.', please upgrade PHP or use Composer 2.2 LTS via "composer self-update --2.2". Aborting.'.PHP_EOL;
+    exit(1);
+}
+
 require_once __DIR__ . '/composer/autoload_real.php';
 
 return ComposerAutoloaderInit59c454479cb6f941fcac64d41ed9dc50::getLoader();

vendor/composer/ClassLoader.php

@@ -149,7 +149,7 @@ public function getFallbackDirsPsr4()
 
     /**
      * @return string[] Array of classname => path
-     * @psalm-var array<string, string>
+     * @psalm-return array<string, string>
      */
     public function getClassMap()
     {

vendor/composer/InstalledVersions.php

@@ -21,11 +21,26 @@
  * See also https://getcomposer.org/doc/07-runtime.md#installed-versions
  *
  * To require its presence, you can require `composer-runtime-api ^2.0`
+ *
+ * @final
  */
 class InstalledVersions
 {
+    /**
+     * @var mixed[]|null
+     * @psalm-var array{root: array{name: string, pretty_version: string, version: string, reference: string|null, type: string, install_path: string, aliases: string[], dev: bool}, versions: array<string, array{pretty_version?: string, version?: string, reference?: string|null, type?: string, install_path?: string, aliases?: string[], dev_requirement: bool, replaced?: string[], provided?: string[]}>}|array{}|null
+     */
     private static $installed;
+
+    /**
+     * @var bool|null
+     */
     private static $canGetVendors;
+
+    /**
+     * @var array[]
+     * @psalm-var array<string, array{root: array{name: string, pretty_version: string, version: string, reference: string|null, type: string, install_path: string, aliases: string[], dev: bool}, versions: array<string, array{pretty_version?: string, version?: string, reference?: string|null, type?: string, install_path?: string, aliases?: string[], dev_requirement: bool, replaced?: string[], provided?: string[]}>}>
+     */
     private static $installedByVendor = array();
 
     /**
@@ -228,7 +243,7 @@ public static function getInstallPath($packageName)
 
     /**
      * @return array
-     * @psalm-return array{name: string, version: string, reference: string, pretty_version: string, aliases: string[], dev: bool, install_path: string, type: string}
+     * @psalm-return array{name: string, pretty_version: string, version: string, reference: string|null, type: string, install_path: string, aliases: string[], dev: bool}
      */
     public static function getRootPackage()
     {
@@ -242,7 +257,7 @@ public static function getRootPackage()
      *
      * @deprecated Use getAllRawData() instead which returns all datasets for all autoloaders present in the process. getRawData only returns the first dataset loaded, which may not be what you expect.
      * @return array[]
-     * @psalm-return array{root: array{name: string, version: string, reference: string, pretty_version: string, aliases: string[], dev: bool, install_path: string, type: string}, versions: array<string, array{dev_requirement: bool, pretty_version?: string, version?: string, aliases?: string[], reference?: string, replaced?: string[], provided?: string[], install_path?: string, type?: string}>}
+     * @psalm-return array{root: array{name: string, pretty_version: string, version: string, reference: string|null, type: string, install_path: string, aliases: string[], dev: bool}, versions: array<string, array{pretty_version?: string, version?: string, reference?: string|null, type?: string, install_path?: string, aliases?: string[], dev_requirement: bool, replaced?: string[], provided?: string[]}>}
      */
     public static function getRawData()
     {
@@ -265,7 +280,7 @@ public static function getRawData()
      * Returns the raw data of all installed.php which are currently loaded for custom implementations
      *
      * @return array[]
-     * @psalm-return list<array{root: array{name: string, version: string, reference: string, pretty_version: string, aliases: string[], dev: bool, install_path: string, type: string}, versions: array<string, array{dev_requirement: bool, pretty_version?: string, version?: string, aliases?: string[], reference?: string, replaced?: string[], provided?: string[], install_path?: string, type?: string}>}>
+     * @psalm-return list<array{root: array{name: string, pretty_version: string, version: string, reference: string|null, type: string, install_path: string, aliases: string[], dev: bool}, versions: array<string, array{pretty_version?: string, version?: string, reference?: string|null, type?: string, install_path?: string, aliases?: string[], dev_requirement: bool, replaced?: string[], provided?: string[]}>}>
      */
     public static function getAllRawData()
     {
@@ -288,7 +303,7 @@ public static function getAllRawData()
      * @param  array[] $data A vendor/composer/installed.php data set
      * @return void
      *
-     * @psalm-param array{root: array{name: string, version: string, reference: string, pretty_version: string, aliases: string[], dev: bool, install_path: string, type: string}, versions: array<string, array{dev_requirement: bool, pretty_version?: string, version?: string, aliases?: string[], reference?: string, replaced?: string[], provided?: string[], install_path?: string, type?: string}>} $data
+     * @psalm-param array{root: array{name: string, pretty_version: string, version: string, reference: string|null, type: string, install_path: string, aliases: string[], dev: bool}, versions: array<string, array{pretty_version?: string, version?: string, reference?: string|null, type?: string, install_path?: string, aliases?: string[], dev_requirement: bool, replaced?: string[], provided?: string[]}>} $data
      */
     public static function reload($data)
     {
@@ -298,7 +313,7 @@ public static function reload($data)
 
     /**
      * @return array[]
-     * @psalm-return list<array{root: array{name: string, version: string, reference: string, pretty_version: string, aliases: string[], dev: bool, install_path: string, type: string}, versions: array<string, array{dev_requirement: bool, pretty_version?: string, version?: string, aliases?: string[], reference?: string, replaced?: string[], provided?: string[], install_path?: string, type?: string}>}>
+     * @psalm-return list<array{root: array{name: string, pretty_version: string, version: string, reference: string|null, type: string, install_path: string, aliases: string[], dev: bool}, versions: array<string, array{pretty_version?: string, version?: string, reference?: string|null, type?: string, install_path?: string, aliases?: string[], dev_requirement: bool, replaced?: string[], provided?: string[]}>}>
      */
     private static function getInstalled()
     {

vendor/composer/autoload_classmap.php

@@ -2,7 +2,7 @@
 
 // autoload_classmap.php @generated by Composer
 
-$vendorDir = dirname(dirname(__FILE__));
+$vendorDir = dirname(__DIR__);
 $baseDir = dirname($vendorDir);
 
 return array(

vendor/composer/autoload_namespaces.php

@@ -2,7 +2,7 @@
 
 // autoload_namespaces.php @generated by Composer
 
-$vendorDir = dirname(dirname(__FILE__));
+$vendorDir = dirname(__DIR__);
 $baseDir = dirname($vendorDir);
 
 return array(

vendor/composer/autoload_psr4.php

@@ -2,7 +2,7 @@
 
 // autoload_psr4.php @generated by Composer
 
-$vendorDir = dirname(dirname(__FILE__));
+$vendorDir = dirname(__DIR__);
 $baseDir = dirname($vendorDir);
 
 return array(