Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
pickr-widget
Advanced tools
Readme
⚠️ Attention: The readme is always up-to-date with the latest commit. See Releases for installation instructions regarding to the latest version.
Thank's to Clément Le Biez for providing an optional ES5 version!
Install package:
$ npm install pickr-widget --save
Include code and style:
// Style
import '/node_modules/pickr-widget/dist/pickr.min.css';
// Modern browsers (not IE11, see .browserslistrc)
import Pickr from '/node_modules/pickr-widget/dist/pickr.min';
// ES5 Version
import Pickr from '/node_modules/pickr-widget/dist/pickr.es5.min';
jsdelivr:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pickr-widget/dist/pickr.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/pickr-widget/dist/pickr.min.js"></script>
<!-- OR -->
<script src="https://cdn.jsdelivr.net/npm/pickr-widget/dist/pickr.es5.min.js"></script>
Be sure to load the pickr.min.js
(or the es5 version) after pickr.min.css
. Moreover the script
tag doesn't work with the defer
attribute.
// Simple example, see optional options for more configuration.
const pickr = Pickr.create({
el: '.color-picker',
components: {
// Main components
preview: true,
opacity: true,
hue: true,
// Input / output Options
interaction: {
hex: true,
rgba: true,
hsla: true,
hsva: true,
cmyk: true,
input: true,
clear: true,
save: true
}
}
});
const pickr = new Pickr({
// Selector or element which will be replaced with the actual color-picker.
// Can be a HTMLElement.
el: '.color-picker',
// Using the 'el' Element as button, won't replace it with the pickr-button.
// If true, appendToBody will also be automatically true.
useAsButton: false,
// Start state. If true 'disabled' will be added to the button's classlist.
disabled: false,
// If set to false it would directly apply the selected color on the button and preview.
comparison: true,
// Default color
default: 'fff',
// Optional color swatches. null by default which means it's disabled.
// Types are all these allowed which can be used in pickr e.g. hex, hsv(a), hsl(a), rgb(a) and cmyk
swatches: ['#F44336', '#E91E63', '#9C27B0', '#673AB7'],
// Default color representation.
// Valid options are `HEX`, `RGBA`, `HSVA`, `HSLA` and `CMYK`.
defaultRepresentation: 'HEX',
// Option to keep the color picker always visible. You can still hide / show it via
// 'pickr.hide()' and 'pickr.show()'. The save button keeps his functionality, so if
// you click it, it will fire the onSave event.
showAlways: false,
// Defines a parent for pickr, if useAsButton is true and a parent is NOT defined
// 'body' will be used as fallback.
parent: null,
// Close pickr with this specific key.
// Default is 'Escape'. Can be the event key or code.
closeWithKey: 'Escape',
// Defines the position of the color-picker. Available options are
// top, left and middle relativ to the picker button.
// If clipping occurs, the color picker will automatically choose his position.
position: 'middle',
// Enables the ability to change numbers in an input field with the scroll-wheel.
// To use it set the cursor on a position where a number is and scroll, use ctrl to make steps of five
adjustableNumbers: true,
// Show or hide specific components.
// By default only the palette (and the save button) is visible.
components: {
preview: true, // Left side color comparison
opacity: true, // Opacity slider
hue: true, // Hue slider
// Bottom interaction bar, theoretically you could use 'true' as propery.
// But this would also hide the save-button.
interaction: {
hex: true, // hex option (hexadecimal representation of the rgba value)
rgba: true, // rgba option (red green blue and alpha)
hsla: true, // hsla option (hue saturation lightness and alpha)
hsva: true, // hsva option (hue saturation value and alpha)
cmyk: true, // cmyk option (cyan mangenta yellow key )
input: true, // input / output element
clear: true, // Button which provides the ability to select no color,
save: true // Save button
},
},
// Button strings, brings the possibility to use a language other than English.
strings: {
save: 'Save', // Default for save button
clear: 'Clear' // Default for clear button
},
// User changed the color
onChange(hsva, instance) {
hsva; // HSVa color object, if cleared null
instance; // Current Pickr instance
},
// User clicked the save button
onSave(hsva, instance) {
// same as onChange
},
// User clicked one of the color swatches
onSwatchSelect(color, instance) {
color; // HSVa color object
instance; // Current Pickr instance
}
});
As default color representation is hsva (hue
, saturation
, value
and alpha
) used, but you can also convert it to other formats as listed below.
The toString()
is overridden so you can get a color representaion string.
hsva.toRGBA(); // Returns [r, g, b, a]
hsva.toRGBA().toString(); // Returns rgba(r, g, b, a)
:Number
,s:Number
,v:Number
,a:Float
, silent:Boolean
) - Set an color, returns true if the color has been accepted.:String
, silent:Boolean
) - Parses a string which represents a color (e.g. #fff
, rgb(10, 156, 23)
), returns true if the color has been accepted. null
will clear the color.If silent
is true (Default is false), the button won't change the current color.
disabled
class to the button, returns instance.disabled
class from the button, returns instance.:HTMLElement
- Returns the root DOM-Element of the color-picker.:HSVaColor
- Returns the current HSVaColor object.:HSVaColor
- Destroy's all functionality.:HSVaColor
- Destroy's all functionality and removes the pickr element including the button.:String
) - Change the current color-representation. Valid options are HEX
, RGBA
, HSVA
, HSLA
and CMYK
, returns false if type was invalid.:Boolean
) - Same as pressing the save button. If silent is true the onSave
event won't be called.Pickr
:Object
):Pickr
- Creates a new instance.Pickr.utils
:HTMLElement
, event:String
, fn:Function
[, options :Object
]) - Attach an event handle which will be fired only once:HTMLElement(s)
, events:String(s)
, fn:Function
[, options :Object
]) - Attach an event handler function.:HTMLElement(s)
, event:String(s)
, fn:Function
[, options :Object
]) - Remove an event handler.:String
):HTMLElement
- Creates an new HTML Element out of this string.:Event
):[HTMLElement]
- A polyfill for the event-path event propery.:HTMLElement
, name:String
) - Removes an attribute from a HTMLElement and returns the value.:String
) - See inline doumentation:InputElement
, negative:boolean
) - Creates the possibility to change the numbers in an inputfield via mouse scrolling.Use this utils carefully, it's not for sure that they will stay forever!
If you want to open a issue, create a Pull Request or simply want to know how you can run it on your local machine, please read the Contributing guide.
FAQs
Flat, Simple, Hackable Color-Picker.
The npm package pickr-widget receives a total of 725 weekly downloads. As such, pickr-widget popularity was classified as not popular.
We found that pickr-widget demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.