Minicolors http://labs.abeautifulsite.net/jquery-minicolors

MiniColors is a jQuery plugin to create a simple color picker with controls for saturation, brightness, hue and wheel input type.

Hue (default)

<input type="text" id="minicolors-hue" class="form-control" value="#ff6161">

<script>
  $(function() {
    $('#minicolors-hue').minicolors({
      control:  'hue',
      position: 'bottom left',
    });
  });
</script>
    Copy

Saturation

<input type="text" id="minicolors-saturation" class="form-control" value="#0088cc">

<script>
  $(function() {
    $('#minicolors-saturation').minicolors({
      control:  'saturation',
      position: 'bottom right',
    });
  });
</script>
    Copy

Wheel

<input type="text" id="minicolors-wheel" class="form-control" value="#ff99ee">

<script>
  $(function() {
    $('#minicolors-wheel').minicolors({
      control:  'wheel',
      position: 'top right',
    });
  });
</script>
    Copy

Opacity

<input type="text" id="minicolors-opacity" class="form-control" value="#766fa8" data-opacity=".5">

<script>
  $(function() {
    $('#minicolors-opacity').minicolors({
      control: 'wheel',
      opacity: true,
    });
  });
</script>
    Copy

Brightness

<input type="text" id="minicolors-brightness" class="form-control" value="#00ffff">

<script>
  $(function() {
    $('#minicolors-brightness').minicolors({
      control:  'brightness',
      position: 'top left',
    });
  });
</script>
    Copy

Hidden input

<input type="hidden" id="minicolors-hidden" class="form-control" value="#db913d">

<script>
  $(function() {
    $('#minicolors-hidden').minicolors();
  });
</script>
    Copy

Sizes



<input type="text" id="minicolors-sm-left" class="form-control input-sm" value="#ff6161" data-opacity=".5">
<br>
<input type="text" id="minicolors-sm-right" class="form-control input-sm" value="#00ffff" data-opacity=".5">
<br>
<input type="hidden" id="minicolors-sm-inline" class="form-control input-sm" value="#766fa8">

<script>
  $(function() {
    $('#minicolors-sm-left').minicolors({
      opacity: true,
    });

    $('#minicolors-sm-right').minicolors({
      opacity:  true,
      position: 'top right',
    });

    $('#minicolors-sm-inline').minicolors();
  });
</script>
    Copy


<input type="text" id="minicolors-lg-left" class="form-control input-lg" value="#ff6161" data-opacity=".5">
<br>
<input type="text" id="minicolors-lg-right" class="form-control input-lg" value="#00ffff" data-opacity=".5">
<br>
<input type="hidden" id="minicolors-lg-inline" class="form-control input-lg" value="#766fa8">

<script>
  $(function() {
    $('#minicolors-lg-left').minicolors({
      opacity: true,
    });

    $('#minicolors-lg-right').minicolors({
      opacity:  true,
      position: 'top right',
    });

    $('#minicolors-lg-inline').minicolors();
  });
</script>
    Copy
See the usage documentation at http://labs.abeautifulsite.net/jquery-minicolors

Usage

require(['jquery', 'px-libs/jquery.minicolors'], function($) {
  ...
});

Usage

To use minicolors plugin, you need to include the next scripts:

<script src="path/to/js/libs/jquery.minicolors.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-minicolors.js"></script>

Then inject the plugin into your angular application:

angular.module('yourApp', ['minicolors']);

Alternatively, you can include minicolors plugin using ocLazyLoad plugin:

$ocLazyLoad.load([
  {
    name: 'minicolors',
    files: [
      'path/to/js/libs/jquery.minicolors.js',
      'path/to/js/pixeladmin/directives/angular-minicolors.js',
    ],
  },
]);

minicolors directive

minicolors directive requires color attribute to be on the element.

You can use minicolors directive where you want. And when the scope is destroyed the directive will be destroyed. 



<div ng-app="ngMinicolorsApp" ng-controller="ngMinicolorsAppCtrl as ctrl">
  <input minicolors color="ctrl.color" control="'hue'" position="'bottom left'" type="text" class="form-control">
  <br>
  <input minicolors color="ctrl.rgbColor" format="'rgb'" opacity="true" control="'wheel'" type="text" class="form-control">
  <br>
  <div minicolors color="ctrl.color" inline="true"></div>
</div>

<!-- Load scripts -->
<!-- <script src="assets/js/angular/libs/jquery.minicolors.js"></script> -->
<script src="assets/js/angular/pixeladmin/directives/angular-minicolors.js"></script>

<script>
  angular.module('ngMinicolorsApp', [ 'minicolors' ])
    .controller('ngMinicolorsAppCtrl', function() {
      this.color = {
        value: '#ff6161',
      };

      this.rgbColor = {
        value: 'rgba(97, 217, 90, 0.7)',
        opacity: 0.7,
      };
    });
</script>
    Copy

Instance

You can define instance attribute to get a pointer to minicolors element: 

<input minicolors instance="ctrl.$minicolors" color="someColor" type="text" class="form-control">
function SomeController() {
  // Pointer
  this.$minicolors = null;

  // ...

  // Then, after the initialization, you can call plugin methods:
  this.$minicolors('value', { color: '#000', opacity: 0.2 });
  this.$minicolors('rgbaString');
});

Options

minicolors' options can be specified as attributes (see the plugin's documentation). All options expect an angular expression instead of a literal string.

Options marked with have an angular $watch listener applied to it.
  • animation-easing
  • animation-speed
  • change-delay
  • control
  • data-uris
  • default-value
  • format
  • hide-speed
  • inline
  • keywords
  • letter-case
  • opacity
  • position
  • show-speed
  • swatches
  • theme
<input minicolors color="someColor" type="text" class="form-control"
       control="'hue'"
       change-delay="200"
       inline="false">

Events

Event handlers can be bound using attributes (see the plugin's documentation):

  • on-change
  • on-hide
  • on-show
<input minicolors color="someColor" type="text" class="form-control"
       on-change="ctrl.change"
       on-hide="ctrl.hide"
       on-show="ctrl.show">
function SomeController() {
  this.change = function() { ... };
  this.hide = function() { ... };
  this.show = function() { ... };
});
SETTINGS
THEMES