Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

cordelia-jquery

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

cordelia-jquery

Color picker for web and mobile browsers

  • 1.0.1
  • unpublished
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
Maintainers
1
Weekly downloads
 
Created
Source

Cordelia jQuery

Cordelia jQuery is a jQuery plugin that allows you to add a rich color picker into your web pages. See the documentation and demo for more information: https://cevadtokatli.github.io/cordelia-jquery

NPM

npm install --save cordelia-jquery

Installation

Add the script file into your html.

<script src="/node_modules/cordelia-jquery/js/cordelia.min.js"></script>

Put the CSS file in the head tag.

<link rel="stylesheet" href="/node_modules/cordelia-jquery/css/cordelia.min.css" />

You can initialize Cordelia with jQuery.

$('#picker').cordelia({
	color: '#EEA55B'
});

You can also initialize it with an HTML Element.

<cordelia cordelia-color="#EEA55B"></cordelia>

Settings

OptionTypeDefaultDescription
colorString#FF0000The picker's initial value.
colorFormatStringhexThe format of the picker's value. Cordelia supports three types of formats: HEX, RGB and HSL. If the opacity is less than 1, HSL is automatically converted to HSLA, HEX and RGB are automatically converted to RGBA.
pickerStyleNumber0Cordelia comes with two style options. In the first style, the main box allows setting the saturation and lightness of the color and the second box allows setting the color; this is the default. In the second style, the main box allows setting the color and the second box allows setting the saturation and lightness. For more information please view the demo.
embedBooleantrueA boolean value that indicates whether the picker is shown when a button is clicked or embedded into the page directly. If it is false, a button is displayed that allows users to show the picker.
sizeStringmediumThe picker's size. Three options available Small, Medium, Large.
allowOpacityBooleantrueA boolean value that indicates whether the opacity bar is visible or not.
allowClearColorBooleanfalseA boolean value that indicates whether the clear color button (an eraser icon that allows clearing selection) is visible or not.
showColorValueBooleantrueA boolean value that indicates whether the color value box is visible or not. Color value box allows you to set a color by typing its name or code. All of the CSS color formats are supported (HEX, RGB, RGBA, HSL, HSLA).
showButtonsBooleantrueA boolean value that indicates whether the buttons are visible or not. If the embed property is false, the only way to close the picker is to click on the Save or Cancel button.
showPaletteBooleantrueA boolean value that indicates whether the color table is visible or not. Color table allows you to show pre-defined colors. It is also possible for users to save colors for later use by adding this table.
paletteColorsString[]#FFFFB5, #FBBD87, #F45151, #7AEA89, #91C8E7, #8EB4E6, #B0A7F1An array that holds the name or codes of the colors that will be shown in the Color Table as default.
allowPaletteAddColorBooleantrueA boolean value that indicates whether users can add a color to the color table or not.

Events

EventDescription
openFires when the picker is open.
closeFires when the picker is closed.
saveFires when the selection is saved.
cancelFires when the picker is closed without being saved.
changedFires when the color is changed.

Methods

MethodParamsReturnDescription
getObjectReturns the current color.
setnewColor:StringvoidChanges the current color.
showvoidShows the picker.
hidevoidHides the picker.
savevoidSaves the selection.
cancelvoidCancels the selection.

IE Support

IE 10 is not supported and patches to fix problems will not be accepted.

License

Cordelia is provided under the MIT License.

Keywords

FAQs

Package last updated on 09 Jul 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc