Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
angularjs-color-picker
Advanced tools
Vanilla AngularJS Color Picker Directive with no requirement on jQuery
bower install angularjs-color-picker --save
npm install angularjs-color-picker --save
Include files
<link rel="stylesheet" href="bower_components/angular-color-picker/dist/angularjs-color-picker.min.css" />
<!-- only include if you use bootstrap -->
<link rel="stylesheet" href="bower_components/angular-color-picker/dist/themes/angularjs-color-picker-bootstrap.min.css" />
<script src="bower_components/tinycolor/dist/tinycolor-min.js"></script>
<script src="bower_components/angular-color-picker/dist/angularjs-color-picker.min.js"></script>
<link rel="stylesheet" href="node_modules/angularjs-color-picker/dist/angularjs-color-picker.min.css" />
<!-- only include if you use bootstrap -->
<link rel="stylesheet" href="node_modules/angularjs-color-picker/dist/themes/angularjs-color-picker-bootstrap.min.css" />
<script src="node_modules/tinycolor2/dist/tinycolor2-min.js"></script>
<script src="node_modules/angular-color-picker/dist/angularjs-color-picker.min.js"></script>
Add the module to your app
angular.module('app', ['color.picker']);
<color-picker ng-model="myColor"></color-picker>
HTML - Only ng-model
is required. If supplying an api it must be a unique object per color picker. However the event api can be shared among color pickers.
<color-picker
ng-model="color"
options="options"
api="api"
event-api="eventApi"
></color-picker>
Javascript
$scope.color = '#FF0000';
// options - if a list is given then choose one of the items. The first item in the list will be the default
$scope.options = {
required: [false, true],
disabled: [false, true],
round: [false, true],
format: ['hsl', 'hsv', 'rgb', 'hex', 'hex8'],
hue: [true, false],
alpha: [true, false],
swatch: [true, false],
swatchPos: ['left', 'right'],
swatchBootstrap: [true, false],
swatchOnly: [true, false],
pos: ['bottom left', 'bottom right', 'top left', 'top right'],
case: ['upper', 'lower'],
inline: [false, true],
placeholder: '',
id: undefined,
name: undefined,
close: {
show: [false, true],
label: 'Close',
class: '',
},
clear: {
show: [false, true],
label: 'Clear',
class: '',
},
reset: {
show: [false, true],
label: 'Reset',
class: '',
},
};
// exposed api functions
$scope.api.open();
$scope.api.close();
$scope.api.clear();
$scope.api.reset();
$scope.api.getElement();
// api event handlers
$scope.eventApi = {
onChange: function(api, color, $event) {},
onBlur: function(api, color, $event) {},
onOpen: function(api, color, $event) {},
onClose: function(api, color, $event) {},
onClear: function(api, color, $event) {},
onReset: function(api, color, $event) {},
onDestroy: function(api, color) {},
};
// decorator - all variables in options can be globally overridden here
angular
.module('app', ['color.picker'])
.config(function($provide) {
$provide.decorator('ColorPickerOptions', function($delegate) {
var options = angular.copy($delegate);
options.round = true;
options.alpha = false;
options.format = 'hex';
return options;
});
});
NO requirement for jQuery!
Inspiration and code taken from projects like
v2.4.7
FAQs
Color Picker Directive For AngularJS
The npm package angularjs-color-picker receives a total of 4,544 weekly downloads. As such, angularjs-color-picker popularity was classified as popular.
We found that angularjs-color-picker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.