Narnia Produced Magic

    angularjs-color-picker

    3.4.8 • Public • Published

    Angular Color Picker

    Vanilla AngularJS Color Picker Directive with no requirement on jQuery

    Build Status Code Climate

    Installation

    Bower

    bower install angularjs-color-picker --save

    Npm

    npm install angularjs-color-picker --save

    Usage

    • Include files

      • Bower
      <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>
      • Node
      <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/tinycolor-min.js"></script>
      <script src="node_modules/angularjs-color-picker/dist/angularjs-color-picker.min.js"></script>
    • Add the module to your app

    angular.module('app', ['color.picker']);
    • Include in your view
    <color-picker ng-model="myColor"></color-picker>

    Options

    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 = {
        // html attributes
        required: [false, true],
        disabled: [false, true],
        placeholder: '',
        inputClass: '',
        id: undefined,
        name: undefined,
        // validation
        restrictToFormat: [false, true],
        preserveInputFormat: [false, true],
        allowEmpty: [false, true],
        // color
        format: ['hsl', 'hsv', 'rgb', 'hex', 'hexString', 'hex8', 'hex8String', 'raw'],
        case: ['upper', 'lower'],
        // sliders
        hue: [true, false],
        saturation: [false, true],
        lightness: [false, true], // Note: In the square mode this is HSV and in round mode this is HSL
        alpha: [true, false],
        dynamicHue: [true, false],
        dynamicSaturation: [true, false],
        dynamicLightness: [true, false],
        dynamicAlpha: [true, false],
        // swatch
        swatch: [true, false],
        swatchPos: ['left', 'right'],
        swatchBootstrap: [true, false],
        swatchOnly: [true, false],
        // popup
        round: [false, true],
        pos: ['bottom left', 'bottom right', 'top left', 'top right'],
        inline: [false, true],
        horizontal: [false, true],
        // show/hide
        show: {
            swatch: [true, false],
            focus: [true, false],
        },
        hide: {
            blur: [true, false],
            escape: [true, false],
            click: [true, false],
        },
        // buttons
        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();       // opens the popup
    $scope.api.close();      // closes the popup
    $scope.api.clear();      // removes value
    $scope.api.reset();      // resets color value to original value
    $scope.api.getElement(); // returns the wrapping <color-picker> element
    $scope.api.getScope();   // returns the color picker $scope
     
    // 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;
            });
        });

    Requirements

    • angularjs (v1.3 and higher)
    • tinycolor.js (18.8 KB minified)

    NO requirement for jQuery!

    Inspiration

    Inspiration and code taken from projects like

    Keywords

    none

    Install

    npm i angularjs-color-picker

    DownloadsWeekly Downloads

    4,072

    Version

    3.4.8

    License

    MIT

    Last publish

    Collaborators

    • benoror
    • ruhley