color picker

by yahyaKACEM

HTML

<script src="https://raw.github.com/laktek/really-simple-color-picker/master/jquery.colorPicker.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller='MainController'>
  <span style="color: {{project.color}}">My Color Picker</span>
  <input type="text" ng-model="project.color">
  <button ng-click="project.color='#000000'">Black</button>
  <button ng-click="project.color='#00ff00'">Green</button>
  <button ng-click="project.color='#ff00ff'">Purple</button>
  <button ng-click="project.color=randomColor()">Random</button>
  <input color-picker="project.color">
</div>

CSS

div.colorPicker-picker {
  height: 16px;
  width: 16px;
  padding: 0 !important;
  border: 1px solid #ccc;
  background: url(https://raw.github.com/laktek/really-simple-color-picker/master/arrow.gif) no-repeat top right;
  cursor: pointer;
  line-height: 16px;
}

div.colorPicker-palette {
  width: 110px;
  position: absolute;
  border: 1px solid #598FEF;
  background-color: #EFEFEF;
  padding: 2px;
  z-index: 9999;
}
  div.colorPicker_hexWrap {width: 100%; float:left }
  div.colorPicker_hexWrap label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; width: 25%}
  div.colorPicker_hexWrap input {margin: 5px 2px; padding: 0; font-size: 95%; border: 1px solid #000; width: 65%; }

div.colorPicker-swatch {
  height: 12px;
  width: 12px;
  border: 1px solid #000;
  margin: 2px;
  float: left;
  cursor: pointer;
  line-height: 12px;
}

JavaScript

var app = angular.module('myApp', []);

app.directive('colorPicker', function() {
  return {
    scope: {
      color: '=colorPicker'
    },
    link: function(scope, element, attrs) {
      element.colorPicker({
        // initialize the color to the color on the scope
        pickerDefault: scope.color,
        // update the scope whenever we pick a new color
        onColorChange: function(id, newValue) {
          scope.$apply(function() {
            scope.color = newValue;
          });
        }
      });

      // update the color picker whenever the value on the scope changes
      scope.$watch('color', function(value) {
        element.val(value);
        element.change();                
      });
    }
  }
});

app.controller('MainController', function($scope) {
  $scope.project = {
    color: "#ff0000"
  };

  $scope.randomColor = function() {
    var red   = Math.floor(Math.random() * 255);
    var green = Math.floor(Math.random() * 255);
    var blue  = Math.floor(Math.random() * 255);
    return "rgb(" + red + "," + green + "," + blue + ")";
  };
});