{"id":16861650,"url":"https://github.com/apoorvsaxena/colordrop","last_synced_at":"2025-03-17T05:32:26.931Z","repository":{"id":31411784,"uuid":"34975118","full_name":"ApoorvSaxena/colordrop","owner":"ApoorvSaxena","description":"Interactive Drag \u0026 Drop Coloring with Material Design Color palette","archived":false,"fork":false,"pushed_at":"2016-01-08T18:50:45.000Z","size":1640,"stargazers_count":131,"open_issues_count":1,"forks_count":17,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-02-27T18:27:12.124Z","etag":null,"topics":["bookmarklet","color-palette","color-picker","color-theme","css","drop","drop-coloring","droplet","javascript","material-design"],"latest_commit_sha":null,"homepage":"http://apoorvsaxena.github.io/colordrop/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ApoorvSaxena.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-03T05:39:40.000Z","updated_at":"2024-05-18T18:43:04.000Z","dependencies_parsed_at":"2022-09-08T21:01:13.793Z","dependency_job_id":null,"html_url":"https://github.com/ApoorvSaxena/colordrop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ApoorvSaxena%2Fcolordrop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ApoorvSaxena%2Fcolordrop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ApoorvSaxena%2Fcolordrop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ApoorvSaxena%2Fcolordrop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ApoorvSaxena","download_url":"https://codeload.github.com/ApoorvSaxena/colordrop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243846984,"owners_count":20357297,"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":["bookmarklet","color-palette","color-picker","color-theme","css","drop","drop-coloring","droplet","javascript","material-design"],"created_at":"2024-10-13T14:32:47.648Z","updated_at":"2025-03-17T05:32:25.346Z","avatar_url":"https://github.com/ApoorvSaxena.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Colordrop\n=====\n*Interactive Drag and Drop Coloring*\n***\n\n[![Colordrop Interactive Drag and Drop Coloring](https://raw.githubusercontent.com/ApoorvSaxena/colordrop/master/chrome-extension/images/coloring_concept.gif)](https://chrome.google.com/webstore/detail/colordrop-interactive-dra/gdoiopdelonmejbbcfoiibojafcpihhm)\n\nColor a website by dragging and dropping a color droplet from a palette.\n\nInstallation\n-----\n\n#### Chrome Extension: [Download from Chrome WebStore](https://chrome.google.com/webstore/detail/colordrop-interactive-dra/gdoiopdelonmejbbcfoiibojafcpihhm)\n\nor\n\n#### Bookmarklet:\nJust add this into the URL section of a new bookmark:\n\n```\njavascript:(function(){var el=document.createElement('script');el.type='text/javascript';el.src='https://rawgit.com/ApoorvSaxena/colordrop/master/dist/production.min.js';el.onerror=function(){alert(\"Looks like the Content Security Policy directive is blocking the use of bookmarklets\\n\\nYou can copy and paste the content of:\\n\\n\\\"https://rawgit.com/ApoorvSaxena/colordrop/master/dist/production.min.js\\\"\\n\\ninto your console instead\\n\\n(link is in console already)\");console.log(\"https://rawgit.com/ApoorvSaxena/colordrop/master/dist/production.min.js\");};document.getElementsByTagName('body')[0].appendChild(el);})();\n```\nMozilla has a [step by step description](https://support.mozilla.org/en-US/kb/bookmarklets-perform-common-web-page-tasks#w_how-do-i-install-a-bookmarklet) on how to add a bookmarklet.\n\nOr alternatifly just copy and paste the content of [production.min.js](https://rawgit.com/ApoorvSaxena/colordrop/master/dist/production.min.js) to your browser console.\n\n**You need to fall back to the browser extension or the copy and paste version for sites that block external scripts in their Content Security Policy directives.**\n***\n\nUsage\n-----\n\nDrag a color from the color palette(inspired by Material Design) to a website and color designated areas of it (like sections or texts). One can drag a color from the color palette and drop it on any area that lights up with a blue outline, including text elements.\n\nOnce the droplet that you are dragging gets dropped on a content area, a fun little Google Material like animation happens and the whole area gets filled with a colored circle.\n***\n\nBrowser Support\n-----\n\n**Colordrop** works best on latest browsers supporting transitions.\n\nFor all non-supported browsers, the extension does nothing and fallbacks to normal behavior without any explicit handling in your code.\n***\n\nLicense\n-----\n\nCopyright (c) 2015 Apoorv Saxena, http://apoorvsaxena.github.io\nLicensed under the [MIT license](http://opensource.org/licenses/MIT).\n***\n\nCredits\n-----\n\nMary Lou - for her contribution [interactive drag and drop coloring concept](http://tympanus.net/codrops/2015/04/22/interactive-drag-drop-coloring-concept/).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapoorvsaxena%2Fcolordrop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapoorvsaxena%2Fcolordrop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapoorvsaxena%2Fcolordrop/lists"}