{"id":17046629,"url":"https://github.com/sebobo/shel.neos.colorpicker","last_synced_at":"2025-04-12T15:30:50.192Z","repository":{"id":34397868,"uuid":"178443516","full_name":"Sebobo/Shel.Neos.ColorPicker","owner":"Sebobo","description":"Colorpicker editor for Neos CMS","archived":false,"fork":false,"pushed_at":"2024-04-08T09:48:30.000Z","size":2451,"stargazers_count":12,"open_issues_count":0,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-26T10:04:27.136Z","etag":null,"topics":["colorpicker","hacktoberfest","neos-cms"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sebobo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"patreon":"shelzle","github":"sebobo"}},"created_at":"2019-03-29T16:49:05.000Z","updated_at":"2024-12-12T22:45:35.000Z","dependencies_parsed_at":"2024-04-08T10:59:51.074Z","dependency_job_id":null,"html_url":"https://github.com/Sebobo/Shel.Neos.ColorPicker","commit_stats":{"total_commits":76,"total_committers":11,"mean_commits":6.909090909090909,"dds":0.3421052631578947,"last_synced_commit":"8c7abc4fd65061bde72c58847ebdfe7d7f729dd4"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sebobo%2FShel.Neos.ColorPicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sebobo%2FShel.Neos.ColorPicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sebobo%2FShel.Neos.ColorPicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sebobo%2FShel.Neos.ColorPicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sebobo","download_url":"https://codeload.github.com/Sebobo/Shel.Neos.ColorPicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248589308,"owners_count":21129588,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["colorpicker","hacktoberfest","neos-cms"],"created_at":"2024-10-14T09:46:56.159Z","updated_at":"2025-04-12T15:30:49.833Z","avatar_url":"https://github.com/Sebobo.png","language":"TypeScript","funding_links":["https://patreon.com/shelzle","https://github.com/sponsors/sebobo"],"categories":[],"sub_categories":[],"readme":"# Color Picker Editor for Neos CMS    \n\n[![Latest Stable Version](https://poser.pugx.org/shel/neos-colorpicker/v/stable)](https://packagist.org/packages/shel/neos-colorpicker)\n[![Total Downloads](https://poser.pugx.org/shel/neos-colorpicker/downloads)](https://packagist.org/packages/shel/neos-colorpicker)\n[![License](https://poser.pugx.org/shel/neos-colorpicker/license)](https://packagist.org/packages/shel/neos-colorpicker)\n\n## Introduction\n\nThis package provides a Color Picker Editor which can be used\nin Neos CMS with the Neos.Ui 2+.\n\nThis editor is based on the example in https://github.com/neos/neos-ui-extensibility-examples but \nhas some modifications in regards to styling, supports the alpha channel and has a reset button to\nunset a value.\n\n## Example           \n\nSee it in [action](https://vimeo.com/327331115).\n\n![Colorpicker in Neos CMS sidebar](Documentation/ColorPickerExample.png)  \n\n## Installation\n\nRun this in your site package\n\n```console\ncomposer require --no-update shel/neos-colorpicker\n```\n\nThen run `composer update` in your project directory.\n\n## How to use\n\nAdd a property of type string and configure the editor as seen in this example:\n\n### Your NodeType:\n\n```yaml\n\"My.Site:Content.Text\":\n  superTypes:\n    \"Neos.Neos:Content\": true\n  ui:\n    label: 'My text content'\n  properties:\n    textColor:\n      type: string\n      ui:\n        label: 'Text color'\n        reloadIfChanged: true\n        inspector:\n          group: 'text'\n          editor: 'Shel.Neos.ColorPicker/ColorPickerEditor'\n          editorOptions:\n            # `mode` can be one of \"rgba\", \"hsla\", \"hex\", \"preset\", default: rgba\n            mode: 'rgba'\n            # Show saturation/hue/alpha (optional), boolean, default: false\n            picker: true\n            # Show hex/rgba fields (optional), boolean, default: false\n            fields: true\n            # Show preset colors (optional), array of colors or boolean (to disable)\n            presetColors: ['#ff0000', '#0000ff', '#ffff00', ...]\n            # OR you can show presetColors with alternative titles, that will be shown on hover\n            # presetColors: [{color: '#ff0000', title: 'red'}, {color: '#0000ff', title: 'blue'}, {color: '#ffff00', title: 'yellow'}]\n            # Hides the reset button if set to false\n            allowEmpty: true\n```              \n\n### Your Fusion:\n\n```\nprototype(My.Site:Content.Text) \u003c prototype(Neos.Neos:ContentComponent) {\n\n  textColor = ${q(node).property('textColor')}\n\n  renderer = afx`\n    \u003cdiv class=\"container\" style={'color:' + props.textColor + ';'} style.@if.hasColor={props.textColor}\u003e\n        \u003ch1\u003eHello World\u003c/h1\u003e\n        \u003cp\u003eEuismod massa quam arcu et mi arcu tincidunt maximus tortor lacus interdum vivamus cursus aliquam eget amet amet eget gravida et vivamus eget diam tortor.\u003c/p\u003e\n    \u003c/div\u003e\n  `\n}\n```\n\n## Customization\n\nThe editor allows some global default options via your `Settings.yaml` file:\n\n```yaml\nNeos:\n Neos:\n  Ui:\n   frontendConfiguration:\n    \"Shel.Neos:ColorPickerEditor\":\n     # `mode` can be one of \"rgba\", \"hsla\", \"hex\", \"preset\"\n     mode: \"rgba\"\n     # Colors which are available for quick selection\n     presetColors: [\"#D0021B\", \"#F5A623\", ...]\n```              \n              \n`mode` allows you to store the selected color values in a different format if needed. \nThis can be helpful, when the hsl format is needed to get the individual components.\n\n`presetColors` lets you customize the list of color squares that are available for quick selection.\n\n## Advanced preset usage\n\nThe `presetColors` option can have two shapes.\nOne is just a simple list of color strings, the other one is a list of objects with a `color` (hex) and optional `title` and `value` properties.\n\n* `color` - the color (hex) that will be displayed in the preset color squares\n* `title` - (optional) the text that will be displayed on hover\n* `value` - (optional) the value that will be stored in the node property instead of the color value\n\nThe `value` can be used to store a value different from the presets color value.\nThis value is only used when the `mode` is set to `preset` which in turn will also disable the \ncolor picker and the color fields.\nThe benefit of this option is that you can show a color value to the user but store a different value in the node property.\nF.e. a CSS classname.\n\n## Contributions\n\nContributions are very welcome! \n\nPlease create detailed issues and PRs.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebobo%2Fshel.neos.colorpicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsebobo%2Fshel.neos.colorpicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebobo%2Fshel.neos.colorpicker/lists"}