{"id":37902776,"url":"https://github.com/loadingio/ldpalettepicker","last_synced_at":"2026-01-16T17:06:06.977Z","repository":{"id":40348483,"uuid":"161182289","full_name":"loadingio/ldpalettepicker","owner":"loadingio","description":null,"archived":false,"fork":false,"pushed_at":"2024-06-26T04:54:09.000Z","size":3939,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-03T14:24:45.711Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/loadingio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2018-12-10T13:51:07.000Z","updated_at":"2024-06-26T04:54:12.000Z","dependencies_parsed_at":"2024-06-26T05:38:40.089Z","dependency_job_id":"849e8da7-556a-411d-bcf7-f646bb2290b0","html_url":"https://github.com/loadingio/ldpalettepicker","commit_stats":{"total_commits":159,"total_committers":1,"mean_commits":159.0,"dds":0.0,"last_synced_commit":"32ab57ffa1b9062aaea98b6d01a92f5f11f3cd2d"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"purl":"pkg:github/loadingio/ldpalettepicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loadingio%2Fldpalettepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loadingio%2Fldpalettepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loadingio%2Fldpalettepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loadingio%2Fldpalettepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/loadingio","download_url":"https://codeload.github.com/loadingio/ldpalettepicker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loadingio%2Fldpalettepicker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28480081,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T11:59:17.896Z","status":"ssl_error","status_checked_at":"2026-01-16T11:55:55.838Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2026-01-16T17:06:04.894Z","updated_at":"2026-01-16T17:06:06.968Z","avatar_url":"https://github.com/loadingio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ldPalettePicker\n\nPalette related tools including:\n\n - `ldpalette`: palette class.\n - `ldpe`: palette editor\n - `ldpp`: palette picker + editor\n\n\n## Palette Definition\n\nIn ldPalettePicker, a palette is defined in following format:\n\n    {\n      name: \"Palette Name\",\n      tag: [\"tag\", \"list\", ...],\n      # either one of below\n      colors: [ldColor, ldColor, ...]                 # type agnoistic color. we should internally use this\n      colors: [{hex: \"#999\", tag: [...]}, ...]        # hex. color follows ldColor format.\n      colors: [\"#999\", ...]                           # compact but losing color tags\n      # deprecated and we should use ldColor directly instead of  a indirect object with value member.\n      colors: [{value: ldColor,...}, {value: ldColor, ...}]\n      key: \"somekey\"                                  # optional key for identifying this palette\n    }\n\n\n## ldpalette\n\n`ldpalette` - defined in `ldp.js` - is expected to be a JS object for palette, but currently it only provide 2 class methods:\n\n - `convert(pal, type)`: convert given pal into specific type\n   - return promise which resolves an object with following fields:\n     - `blob`: blob for the specified format.\n     - `url`: object url of the above blob.\n     - `filename`: file named after the palette.\n   - `pal`: palette defined as in the palette definition.\n   - `type`: either `json`, `svg`, `png` or `scss`. default `png`.\n - `download(pal, type)`: convert given palette into specific type, and trigger download of the result file.\n   - `return`: promise resolved when download triggered.\n   - `pal`, `type`: the same with `convert`.\n\nSample usage:\n\n    ldpalette.convert({colors:[\"#f00\",\"#0f0\"]},\"svg\").then(function(blob) { ... })\n\nObject methods are left to implement in the future.\n\n\n## ldpe\n\n`ldpe` - defined in `ldpe.js` - provides palette editing functionality. usage:\n\n    editor = new ldpe({ ... });\n\nwhere constructor options:\n\n - `root`: root node of a ldpe widget. use `ldpe` mixin in ldpp.pug for a default widget DOM.\n\n### API\n\n - `syncUi`: update slider in ui when out of sync ( need review )\n - `getPal`: get current palette\n - `init(opt)`: (re)init editor with given option, including:\n   - `pal`: palette object for initing this editor.\n - `undo`: undo last action\n - `clearLog`: clear undo history\n\n\n## ldpp\n\n`ldpp` - defined in `ldpp.js` - provides a simple way to pick / customize palettes. Usage:\n\n    picker = new ldpp({ ... });\n\nHTML counterpart: ( in Pug )\n\n    include ldpp.pug\n    div(id=\"...\",class=\"...\", ...)\n      +ldpp\n\nor, when using along with `ldCover`:\n\n    include ldpp.pug\n    .ldcv(id=\"...\",class=\"...\", ...): .base: .inner\n      +ldpp\n\nwhere constructor options:\n\n - `palettes`: default palette.\n - `i18n`: object for i18n. if provided, should at least support following API:\n   - `addResourceBundles(resObj)`: add resource bundles for multiple languages in `resObj`.\n   - `t(text)`: translate text \n - `itemPerLine`: how many palette per line in editor. default 2\n - `root`: root node of a ldpp widget. use `ldpp` mixin in ldpp.pug for a default widget DOM.\n - `className`: additional class names ( in space separated string ) to add in root. default ''\n - `useClusterizejs`: enable `clusterize.js` if true and `Clusterize` is available.\n   - default false\n   - Can enormously reduce dom element counts.\n   - require dual licensed `clusterize.js` library\n - `useVscroll`: enable `@loadingio/vscroll` if true and `vscroll` is available.\n   - default false\n   - Can enormously reduce dom element counts.\n   - based on `@loadingio/vscroll`, MIT Licensed.\n - `ldcv`: default false. if provided and ldCover is available, a ldcv object will be created automatically with this object as constructor options.\n - `random`: if provided, serve as random palette. (TBD)\n - `mypal`: optional ldPage object for loading customized palette on scrolling.\n - `save`: optional function for saving a palette.\n    - return a promise which resolves to the saved palette.\n    - accepting object with following options:\n      - thumb: thumbnail of the given palette.\n      - key: key of the given palette, if applicable.\n      - data:\n        - name: palette name.\n        - type: \"palette\"\n        - payload: a palette object.\n\n### API\n\n - `on(name, cb)`: listen to `name` event with `cb` callback function.\n - `fire(name, ...params)`: fire an event named `name` with parameters `params`.\n - `get()`: prompt ( or simply wait ) users to pick a palette. return a promise resolving a palette picked.\n - `tab(n)`: switch to the tab named `n`.\n - `edit(pal, toggle)`: edit palette `pal`. \n   - `pal`: palette to edit.\n   - `toggle`: default true. if true, toggle the edit panel.\n - `random()`: a function or palette list that decide a subset of palette to return when user calling ldpp.random();\n\n\n## Class Method\n\nldPaletePicker also provided following helper functions:\n\n - `register(name, palettes)`: register provided palette list with the specified name.\n - `get(name)`: get palette list with the given name.\n - `init(opt)`: init all palette picker by querying `[ldpp]` selector.\n   - return a list of `ldpp` object.\n   - `pals`: optional. Array of palettes. when provided, all pickers will be initialized with palettes given here.\n     - when omitted, pickers will be inited with the palette list named `default` ( builtin palettes ).\n\nAfter `ldpp.js` loaded, you can optional load following palette list with given name:\n\n - `all` - defined in `all.palettes.js`\n - `brandcolors` - defined in `brandcolors.palettes.js`\n - `colorbrewer` - defined in `colorbrewer.palettes.js`\n - `loadingio` - defined in `loadingio.palettes.js`\n\n### Sample Usage\n\nUse `get` to prompt user for a picked palette:\n\n    script.\n      ldpp.get!\n        .then (pal) -\u003e\n        .catch -\u003e\n\n\n## Custom Palettes\n\nexample:\n\n    ldpp.register(\"default2\", palettes);\n    var pals = ldpp.get(\"default2\");\n    ldpp.init({pals});\n\n\nldPalettePicker ships with following prebuilt palette sets, which you can find under `dist` folder:\n\n * `brandcolors`\n    - src: brandcolors.palettes.js\n    - palettes from [brandcolors](http://brandcolors.net/).\n * `colorbrewer`\n    - src: colorbrewer.palettes.js\n    - palettes from [colorbrewer](https://colorbrewer2.org/).\n    - license: Apache license Version 2.0\n * `cartocolors`\n    - cartocolors.palettes.js\n    - palettes from [CARTOColors](https://github.com/CartoDB/cartocolor)\n    - license: CC-BY 3.0 License.\n * `loadingio`\n    - loadingio.palettes.js\n    - palettes used in [loading.io](https://loading.io/color/feature/).\n * `all`\n    - all.palettes.js\n    - palettes from `brandcolors` + `colorbrewer` + `loadingio`.\n\n\n## License Consideration\n\nFor better performance with large amount of palettes, you can enable [Clusterize.js](https://clusterize.js.org/) by setting useClusterizejs to true:\n\n    ldpp.init({useClusterizejs: true});\n\n\n( To make it work you also have to include js and css files of [Clusterize.js](https://clusterize.js.org/). )\n\nYet Clusterize.js is released under dual license - free for personal use and charge for commercial license. So it's up to your discretion to whether use it or not - and you should acquire necessary license when you use it.\n\nWhen enabling, Clusterize.js requires another option \"itemPerLine\", which controls how many palettes are in a line in the list view. Its default value is 2.\n\nAlternatively you can use `@loadingio/vscroll` which is released under MIT license.\n\n\n## TODO\n\n * better ordering for default palettes; make it more eye-pleasuring.\n\n\n## License\n\nMIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floadingio%2Fldpalettepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Floadingio%2Fldpalettepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floadingio%2Fldpalettepicker/lists"}