camptocamp · fgravin · Mar 29, 2016 · Mar 21, 2016
diff --git a/examples/colorpicker.html b/examples/colorpicker.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html ng-app='app'>
+  <head>
+    <title>Color picker example</title>
+    <meta charset="utf-8">
+    <meta name="viewport"
+          content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="stylesheet" href="../node_modules/openlayers/css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css" type="text/css">
+    <style>
+      body {
+        padding: 10px;
+      }
+      .palette {
+        padding-left: 20px;
+        border-collapse: separate;
+        border-spacing: 0px;
+      }
+      .palette tr {
+        cursor: default;
+      }
+      .palette td {
+        position: relative;
+        padding: 0px;
+        text-align: center;
+        vertical-align: middle;
+        font-size: 1px;
+        cursor: pointer;
+      }
+      .palette td > div {
+        position: relative;
+        height: 12px;
+        width: 12px;
+        border: 1px solid #fff;
+        box-sizing: content-box;
+      }
+      .palette td:hover > div::after {
+        display: block;
+        content: '';
+        background: inherit;
+        position: absolute;
+        width: 28px;
+        height: 28px;
+        top: -10px;
+        left: -10px;
+        border: 2px solid #fff;
+        -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px 0;
+        -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px 0;
+        box-shadow: rgba(0,0,0,0.3) 0 1px 3px 0;
+        z-index: 11;
+      }
+      .palette td.selected > div::after {
+        border: 2px solid #444;
+        margin: 0;
+        content: '';
+        display: block;
+        width: 14px;
+        height: 14px;
+        position: absolute;
+        left: -3px;
+        top: -3px;
+        box-sizing: content-box;
+        z-index: 10;
+      }
+    </style>
+  </head>
+
+  <body ng-controller="MainController as mainCtrl" ng-cloak>
+    <label>
+      Select color:
+      <app-colorpicker></app-colorpicker>
+    </label>
+    Color: {{mainCtrl.color}}
+    <div ngeo-colorpicker="" ngeo-colorpicker-color=""></div>
+    <div>
+      <p id="desc">This example shows how to write an application-specific directive (<code>app-colorpicker</code>) based on <code>ngeo-colorpicker</code>to create a color picker.</p>
+    </div>
+    <script src="../node_modules/angular/angular.js"></script>
+    <script src="/@?main=colorpicker.js"></script>
+    <script src="default.js"></script>
+    <script src="../utils/watchwatchers.js"></script>
+  </body>
+</html>
diff --git a/examples/colorpicker.js b/examples/colorpicker.js
@@ -0,0 +1,76 @@
+goog.provide('colorpicker');
+
+goog.require('ngeo.mapDirective');
+goog.require('ngeo.colorpickerDirective');
+
+
+/** @const **/
+var app = {};
+
+
+/** @type {!angular.Module} **/
+app.module = angular.module('app', ['ngeo']);
+
+
+/**
+ * The application-specific color picker directive, based on the
+ * ngeo-colorpicker directive.
+ *
+ * @return {angular.Directive} Directive Definition Object.
+ */
+app.colorpickerDirective = function() {
+  return {
+    restrict: 'E',
+    scope: true,
+    template: '<div ngeo-colorpicker="ctrl.colors" ngeo-colorpicker-color="mainCtrl.color"></div>',
+    controllerAs: 'ctrl',
+    bindToController: true,
+    controller: 'AppColorpickerController'
+  };
+};
+
+
+app.module.directive('appColorpicker', app.colorpickerDirective);
+
+
+/**
+ * @constructor
+ * @ngInject
+ */
+app.ColorPickerController = function() {
+
+
+  /**
+   * The colors set.
+   * @type {Array.<string>}
+   * @const
+   * @export
+   */
+  this.colors = [
+    ['red', 'yellow','green', 'lightgreen', 'lightblue', 'orange', 'purple'],
+    ['#ffffff', '#f7f7f7', '#c3c3c3', '#000000']];
+
+};
+
+app.module.controller('AppColorpickerController',
+    app.ColorPickerController);
+
+
+/**
+ * @constructor
+ * @param {angular.Scope} $scope Controller scope.
+ * @ngInject
+ */
+app.MainController = function($scope) {
+
+  /**
+   * Active color.
+   * @type {string}
+   * @export
+   */
+  this.color = 'red';
+
+};
+
+
+app.module.controller('MainController', app.MainController);
diff --git a/src/directives/colorpicker.js b/src/directives/colorpicker.js
@@ -0,0 +1,99 @@
+goog.provide('ngeo.ColorpickerController');
+goog.provide('ngeo.colorpickerDirective');
+
+goog.require('ngeo');
+
+
+ngeo.module.value('ngeoColorpickerTemplateUrl',
+    /**
+     * @param {angular.JQLite} element Element.
+     * @param {angular.Attributes} attrs Attributes.
+     * @return {string} Template URL.
+     */
+    function(element, attrs) {
+      var templateUrl = attrs['ngeoColorpickerTemplateurl'];
+      return templateUrl !== undefined ? templateUrl :
+          ngeo.baseTemplateUrl + '/colorpicker.html';
+    });
+
+/**
+ * Provides the "ngeoColorpicker" directive, a widget for
+ * selecting a color among predefined ones.
+ *
+ * Example:
+ *
+ *     <div ngeo-colorpicker="ctrl.colors">
+ *     </div>
+ *
+ *
+ * @param {string|function(!angular.JQLite=, !angular.Attributes=)}
+ *     ngeoColorpickerTemplateUrl Template URL for the directive.
+ * @return {angular.Directive} Directive Definition Object.
+ * @ngInject
+ * @ngdoc directive
+ * @ngname ngeoColorpicker
+ */
+ngeo.colorpickerDirective = function(ngeoColorpickerTemplateUrl) {
+  return {
+    restrict: 'A',
+    scope: {
+      colors: '<?ngeoColorpicker',
+      color: '=?ngeoColorpickerColor'
+    },
+    controller: 'NgeoColorpickerController',
+    controllerAs: 'ctrl',
+    bindToController: true,
+    templateUrl: ngeoColorpickerTemplateUrl
+  };
+};
+
+
+ngeo.module.directive('ngeoColorpicker', ngeo.colorpickerDirective);
+
+/**
+ * @type {Array.<Array.<string>>}
+ * @const
+ */
+var defaultColors = [
+  ['#F4EB37', '#CDDC39', '#62AF44','#009D57','#0BA9CC','#4186F0','#3F5BA9','#7C3592','#A61B4A','#DB4436','#F8971B','#F4B400','#795046'],
+  ['#F9F7A6','#E6EEA3','#B7DBAB','#7CCFA9','#93D7E8','#9FC3FF','#A7B5D7','#C6A4CF','#D698AD','#EE9C96','#FAD199','#FFDD5E','#B29189'],
+  ['#ffffff', '#CCCCCC', '#777', '#000000']
+];
+
+/**
+ * @constructor
+ * @param {angular.Scope} $scope Directive scope.
+ * @param {angular.JQLite} $element Element.
+ * @param {angular.Attributes} $attrs Attributes.
+ * @export
+ * @ngInject
+ * @ngdoc controller
+ * @ngname NgeoScaleselectorController
+ */
+ngeo.ColorpickerController = function($scope, $element, $attrs) {
+
+  /**
+   * The set of color
+   * @type {Array.<Array.<string>>}
+   * @export
+   */
+  this.colors = defaultColors;
+
+  /**
+   * The selected color
+   * @type {undefined|string}
+   */
+  this.color;
+};
+
+/**
+ * @param {string} color The color to select.
+ * @export
+ */
+ngeo.ColorpickerController.prototype.setColor = function(color) {
+  this.color = color;
+};
+
+
+ngeo.module.controller('NgeoColorpickerController',
+    ngeo.ColorpickerController);
diff --git a/src/directives/partials/colorpicker.html b/src/directives/partials/colorpicker.html
@@ -0,0 +1,7 @@
+<table class="palette">
+  <tr ng-repeat="colors in ::ctrl.colors">
+    <td ng-repeat="color in ::colors" ng-click="ctrl.setColor(color)" ng-class="{'selected': color == ctrl.color}">
+      <div ng-style="::{'background-color': color}"></div>
+    </td>
+  </tr>
+</table>