Angular Hex Colorpicker

Demo for angular-hex-colorpicker https://github.com/twler/angular-hex-colorpicker

by tyrw

HTML

<div ng-app="myApp">
  <div ng-controller="DemoCtrl as demo" style="margin: 10px;">
    <div hex-colorpicker hex-model="demo.hexModel"></div>
    <input type="text" ng-model="demo.hexModel" style="margin: 10px 0;">
    <div style="width: 236px; height: 100px;" ng-style="{ background: '#' + demo.hexModel }"></div>
  </div>
</div>

JavaScript

angular.module('hex.colorpicker', [])

angular.module('hex.colorpicker').directive('hexColorpicker', function() {
  return {
    template: '<div style="width:236px; height: 200px; position: relative;">' +
      '<img style="margin-right:2px;" src="http://www.w3schools.com/tags/colormap.gif" usemap="#colormap">' +
      '<div style="position: relative; width: 21px; height: 21px; background-image: url(http://www.w3schools.com/tags/selectedcolor.gif);" ng-hide="!posX || !posY" ng-style="{ left: posX, top: posY }">' +
      '</div>' +
      '<map id="colormap" name="colormap" style="cursor:pointer">' +
      '<area ng-repeat="area in areas" shape="poly" coords="{{ area.coords }}" ng-click="selectArea(area)">' +
      '</map>' +
      '</div>',
    restrict: 'EA',
    scope: {
      hexModel: '='
    },
    link: function(scope, ele, attrs) {

      scope.posX = null
      scope.posY = null

      scope.selectArea = function (area) {
        console.log('selectArea', area)
        scope.hexModel  = area.hex
        scope.posX      = '' + area.x + 'px'
        scope.posY      = '' + area.y + 'px'
      }

      scope.areas = [
        { hex: '003366', coords: '63,0,72,4,72,15,63,19,54,15,54,4',                 x: 53,  y: -205 },
        { hex: '336699', coords: '81,0,90,4,90,15,81,19,72,15,72,4',                 x: 71,  y: -205 },
        { hex: '3366CC', coords: '99,0,108,4,108,15,99,19,90,15,90,4',               x: 89,  y: -205 },
        { hex: '003399', coords: '117,0,126,4,126,15,117,19,108,15,108,4',           x: 107, y: -205 },
        { hex: '000099', coords: '135,0,144,4,144,15,135,19,126,15,126,4',           x: 125, y: -205 },
        { hex: '0000CC', coords: '153,0,162,4,162,15,153,19,144,15,144,4',           x: 143, y: -205 },
        { hex: '000066', coords: '171,0,180,4,180,15,171,19,162,15,162,4',           x: 161, y: -205 },
        { hex: '006666', coords: '54,15,63,19,63,30,54,34,45,30,45,19',              x: 44,  y: -190 },
        { hex: '006699',...