{"id":26293125,"url":"https://github.com/fivefifteen/colortap","last_synced_at":"2025-03-15T01:40:23.476Z","repository":{"id":57125287,"uuid":"411742705","full_name":"fivefifteen/colortap","owner":"fivefifteen","description":"A tiny, dependency-free, color input field helper that utilizes the native color picker.","archived":false,"fork":false,"pushed_at":"2025-03-05T15:21:15.000Z","size":205,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-05T16:43:20.497Z","etag":null,"topics":["color","color-picker","colors","field","fields","html","input","javascript","js","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":"http://colortap.js.org/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fivefifteen.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","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}},"created_at":"2021-09-29T16:07:51.000Z","updated_at":"2025-03-05T15:22:01.000Z","dependencies_parsed_at":"2024-11-20T22:55:46.276Z","dependency_job_id":"2c387e17-440d-4a7c-a1e3-80b82ff31542","html_url":"https://github.com/fivefifteen/colortap","commit_stats":{"total_commits":13,"total_committers":1,"mean_commits":13.0,"dds":0.0,"last_synced_commit":"d9cc11ade9c9605d7c0a61ad57c67f93481f6b10"},"previous_names":["kodie/colorfield","fivefifteen/colortap","kodie/kolorfield"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fivefifteen%2Fcolortap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fivefifteen%2Fcolortap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fivefifteen%2Fcolortap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fivefifteen%2Fcolortap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fivefifteen","download_url":"https://codeload.github.com/fivefifteen/colortap/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243672368,"owners_count":20328762,"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":["color","color-picker","colors","field","fields","html","input","javascript","js","vanilla-javascript","vanilla-js"],"created_at":"2025-03-15T01:40:22.779Z","updated_at":"2025-03-15T01:40:23.467Z","avatar_url":"https://github.com/fivefifteen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n  \u003ca href=\"https://github.com/fivefifteen/colortap\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./assets/colortap-white.png\"\u003e\n      \u003cimg src=\"./assets/colortap.png\" alt=\"ColorTap\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n\n  # ColorTap\n\n  A tiny, dependency-free, color input field helper that utilizes the native color picker.\n\n  [![npm package version](https://img.shields.io/npm/v/colortap.svg?style=flat-square)](https://www.npmjs.com/package/colortap)\n  [![npm package downloads](https://img.shields.io/npm/dt/colortap.svg?style=flat-square)](https://www.npmjs.com/package/colortap)\n  [![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/fivefifteen/colortap?style=flat-square)](https://github.com/fivefifteen/colortap)\n  [![code style](https://img.shields.io/badge/code_style-standard-yellow.svg?style=flat-square)](https://github.com/standard/standard)\n  [![license](https://img.shields.io/github/license/fivefifteen/colortap.svg?style=flat-square)](license.md)\n\n  \u003ca href=\"https://fivefifteen.com\" target=\"_blank\"\u003e\u003cimg src=\"./assets/fivefifteen.png\" /\u003e\u003cbr /\u003e\u003cb\u003eA Five Fifteen Project\u003c/b\u003e\u003c/a\u003e\n\n\u003c/div\u003e\n\n\n## Demo\n\nVisit https://colortap.js.org\n\n\n## Installation\n\n\n### Manual Download\n\n[Download the latest version of colortap](https://github.com/fivefifteen/colortap/archive/refs/heads/main.zip) and then place the following HTML in your page's head element:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"dist/colortap.min.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"dist/colortap.min.css\" /\u003e\n```\n\n\n### CDN (Courtesy of [jsDelivr](https://jsdelivr.com))\n\nPlace the following HTML in your page's head element (check to make sure the version in the URLs is the version you want):\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/gh/fivefifteen/colortap@0.3/dist/colortap.min.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/fivefifteen/colortap@0.3/dist/colortap.min.css\" /\u003e\n```\n\n\n### [NPM](https://npmjs.com)\n\n```\nnpm install colortap --save\n```\n\n```js\n// ES6\nimport colortap from 'colortap'\n\n// CommonJS\nconst colortap = require('colortap')\n```\n\n\n### [Fetcher](https://github.com/fivefifteen/fetcher)\n\n```\nfetcher install fivefifteen/colortap --save\n```\n\n\n### [Bower](https://bower.io)\n\n```\nbower install fivefifteen/colortap --save\n```\n\n\n## Usage\n\n\n### Basic HTML Structure\n\n```html\n\u003cdiv class=\"colortap\"\u003e\n  \u003cinput type=\"color\" id=\"main-color\" value=\"#5185b3\"\u003e\n  \u003cbutton type=\"button\" class=\"colortap-open colortap-value\" data-colortap-style-prop=\"background-color\"\u003e\u003c/button\u003e\n\u003c/div\u003e\n```\n\n\n### The `colortap` Function\n\nInitiates ColorTap on any element that has the `colortap` class. This should be a container around your color input.\n\n\n#### Example\n\n```js\nwindow.addEventListener('load', function () {\n  colortap()\n})\n```\n\n\n## Attributes/Classes\n\n * The `colortap-input` class - Any input element with this class will have it's value set to the selected color any time the color is changed. The color will also be set to any value that is entered into this input field.\n\n * The `colortap-open` class - Any element with this class will open the color picker when clicked.\n\n * The `colortap-value` class - Any element with this class will have it's text content set to the color when the color is changed. If this element is an input, it's value will be updated instead of text content.\n\n * The `data-colortap-style-prop` attribute - Set this attribute to a style property (like `background` or `color`) on an element to have it's style updated when the color is changed. Multiple style properties can be defined by separating them with a comma (ie. `background,color`).\n\n\n## JavaScript Methods\n\nThe containing colortap element (the element with the `colortap` class) will have the following methods attached to it available for use:\n\n```js\nvar color = document.querySelector('.color')\n\ncolor.open() // Opens the color picker\n\ncolor.set('#00ff00') // Sets the color\n\nvar currentColor = color.get() // Gets the current color\n\n// The `change` event bubbles up to the containing element so you can detect changes like so:\ncolor.addEventListener('change', function () {\n  document.body.style.setProperty('--color', event.target.value)\n})\n```\n\n\n## Related\n\n - [FileBokz](https://github.com/fivefifteen/filebokz) - A tiny, dependency-free, highly customizable and configurable, easy to use file input with some pretty sweet features.\n\n - [GrowField](https://github.com/fivefifteen/growfield) - A tiny, dependency-free JavaScript module for making textarea elements grow with their content.\n\n - [HashJump](https://github.com/fivefifteen/hashjump) - A tiny, dependency-free JavaScript module for handling anchor links and scrolling elements into view.\n\n - [Kloner](https://github.com/fivefifteen/kloner) - A tiny, dependency-free JavaScript module for cloning/repeating elements.\n\n\n## License\n\nMIT. See the [license file](license.md) for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffivefifteen%2Fcolortap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffivefifteen%2Fcolortap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffivefifteen%2Fcolortap/lists"}