Skip to content
Snippets Groups Projects
Forked from project / color_field
9 commits behind the upstream repository.
Code owners
Assign users and groups as approvers for specific file changes. Learn more.

Color Field - Drupal 8

ABOUT & FEATURES

Formatters

  • Plain text: Renders a simple HEX Code (#fffff) or an RGB decimal - with or without opacity.
  • CSS Declaration: Provides simple options to automatically build a CSS declaration affecting color or background-color. New in 2.4, also "advanced mode" which lets you build your own css declaration - for example to target multiple aspects (such as border color and background color) of elements or multiple elements.
  • Swatches: Provides simple swatch of color in various shapes.

Widgets

  • Color Boxes: Provides a row of colored boxes to select from a configured list of colors. If enabled, opacity is a number field.
  • Color Default: Textbox to put in a hex value. If enabled, opacity is a number field.
  • Color Grid: Uses jQuery Simple Color to provide a pop up grid of color options. If enabled, opacity is a number field.
  • Color HTML5: Uses the color HTML5 input type to render in a browser/system native manner. If enabled, opacity is a number field.
  • Color Spectrum: Uses Spectrum to provide a user friendly color palette to choose the correct color. This has an integrated slider for opacity (if opacity is enabled).

ROAD MAP

  1. Make this module a base that could be used by any color picker.
  2. include http://www.eyecon.ro/colorpicker/
  3. include http://www.dematte.at/colorPicker/
  4. include http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/

INSTALLATION

Install as you would normally install a contributed Drupal module. See also Core Docs

DEPENDENCIES

There are JavaScript libraries required for a couple of the field widgets. If you are not actively using those field widgets, you can skip their installation if desired.

COMPOSER

If you installed color field via Composer, the packages will have been suggested but not automatically installed. If you have Asset Packagist already configured - as most Commerce users will - skip to just requiring the desired package(s).

composer require bower-asset/jquery-simple-color bower-asset/spectrum

Otherwise, to install them you will need to add Asset Packagist to your composer.json and do some and make a couple other changes to your composer.json. Specifically, in the extra key add/adjust current values:

"installer-types": [
  "npm-asset",
  "bower-asset"
],
"installer-paths": {
  "web/core": [
    "type:drupal-core"
  ],
  "web/libraries/{$name}": [
    "type:bower-asset",
    "type:npm-asset",
    "type:drupal-library"
  ],
  "web/modules/contrib/{$name}": [
    "type:drupal-module"
  ],
  "web/profiles/contrib/{$name}": [
    "type:drupal-profile"
  ],
  "web/themes/contrib/{$name}": [
    "type:drupal-theme"
  ],
  "drush/contrib/{$name}": [
    "type:drupal-drush"
  ]
},

then run

composer require oomphinc/composer-installers-extender
composer require bower-asset/jquery-simple-color bower-asset/spectrum

MANUAL

If you are not using Composer, you will need to manually install them.

  • jQuery Simple Color copy to /libraries/jquery-simple-color so that jquery.simple-color.min.js is in that folder. Required for the Color Grid widget.
  • Spectrum copy to /libraries/spectrum so that spectrum.js exists in that folder. Required for the Spectrum widget.

USAGE

Field

  1. Add the field to an node/entity
  2. Select the 'Color Field' field type
  3. Select the 'Color' widget you want

DEVELOPMENT

To ease matching Drupal code standards, development dependencies are configured to use a pre-commit hook. Install composer dev dependencies and PHPCS will be automatically run if php is in your path.

CREDIT

Original Creator: targoo.

Maintainers:

Original development sponsored by Marique Calcus and written by Calcus David. For professional support and development services contact targoo@gmail.com.

More info

http://www.w3.org/TR/css3-color/#color https://github.com/mikeemoo/ColorJizz-PHP http://www.colorhexa.com/ff0000 https://github.com/PrimalPHP/Color/blob/master/lib/Primal/Color/Parser.php https://github.com/matthewbaggett/php-color/blob/master/Color.php