Add a color picker directive

camptocamp · Mar 22, 2016 · c0f8e86 · c0f8e86
1 parent 460c1eb
commit c0f8e86
Show file tree

Hide file tree

Showing 4 changed files with 234 additions and 0 deletions.
diff --git a/examples/colorpicker.html b/examples/colorpicker.html
@@ -0,0 +1,48 @@
+<!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 {
+        border-collapse: collapse;
+        display: inline-block;
+        padding-left: 20px;
+      }
+      .palette td {
+        height: 14px;
+        width: 14px;
+        cursor: pointer;
+      }
+      .palette td.selected {
+        background: transparent;
+        -webkit-box-shadow: 0 1px 4px #000,inset 0 0 3px #fff;
+        box-shadow: 0 1px 4px #000,inset 0 0 3px #fff;
+        position: relative;
+      }
+    </style>
+  </head>
+
+  <body ng-controller="MainController as mainCtrl" ng-cloak>
+    <label>
+      Select color:
+      <app-colorpicker></app-colorpicker>
+      Color: {{mainCtrl.color}}
+    </label>
+    <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,77 @@
+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
+ * @param {angular.$sce} $sce Angular sce service.
+ * @ngInject
+ */
+app.ColorPickerController = function($sce) {
+
+
+  /**
+   * 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,103 @@
+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 = [
+  ['#880015', '#ed1c24', '#ff7f27', '#fff200', '#22b14c', '#00a2e8',
+    '#3f48cc', '#a349a4'],
+  ['#b97a57', '#ffaec9', '#ffc90e', '#efe4b0', '#b5e61d', '#99d9ea',
+    '#7092be', '#c8bfe7'],
+  ['#ffffff', '#f7f7f7', '#c3c3c3', '#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,6 @@
+<table class="palette">
+  <tr ng-repeat="colors in ::ctrl.colors">
+    <td ng-repeat="color in ::colors" ng-style="::{'background-color': color}" ng-click="ctrl.setColor(color)" ng-class="{'selected': color == ctrl.color}">
+    </td>
+  </tr>
+</table>