From 0b7824a8b77fc739ba3747b5199907811ea793ce Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Tue, 1 Mar 2016 14:07:30 -0500
Subject: [PATCH] (js) New sgCheckmark directive

To be used as checkmarks in menus.
---
 .../js/Common/sgCheckmark.directive.js        | 112 ++++++++++++++++++
 .../scss/components/checkbox/checkbox.scss    |  11 ++
 2 files changed, 123 insertions(+)
 create mode 100644 UI/WebServerResources/js/Common/sgCheckmark.directive.js

diff --git a/UI/WebServerResources/js/Common/sgCheckmark.directive.js b/UI/WebServerResources/js/Common/sgCheckmark.directive.js
new file mode 100644
index 000000000..ed21dc735
--- /dev/null
+++ b/UI/WebServerResources/js/Common/sgCheckmark.directive.js
@@ -0,0 +1,112 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+(function() {
+  'use strict';
+
+  angular
+    .module('SOGo.Common')
+    .directive('sgCheckmark', sgCheckmarkDirective);
+
+  /*
+   * sgCheckmark - A checkmark to be used in a mdMenuItem
+   * @memberof SOGo.Common
+   * @restrict element
+   *
+   * @example:
+
+     <md-menu>
+       <md-button class="md-icon-button" aria-label="Sort"
+                  ng-click="$mdOpenMenu()">
+         <md-icon>sort</md-icon>
+       </md-button>
+       <md-menu-content>
+         <md-menu-item>
+           <sg-checkmark
+               aria-label="Descending Order"
+               ng-model="ctrl.asc"
+               ng-click="ctrl.filter()"
+               sg-true-value="0"
+               sg-false-value="1">Descending Order</sg-checkmark>
+         </md-menu-item>            
+       </md-menu-content>
+     </md-menu>
+  */
+  sgCheckmarkDirective.$inject = ['$parse', '$mdAria', '$mdTheming', '$mdUtil'];
+  function sgCheckmarkDirective($parse, $mdAria, $mdTheming, $mdUtil) {
+    var CHECKED_CSS = 'sg-checked';
+
+    return {
+      restrict: 'E',
+      replace: true,
+      transclude: true,
+      require: '?ngModel',
+      //priority: 210, // Run before ngAria
+      template: [
+        '<button class="md-button sg-checkmark" type="button">',
+        '  <md-icon>check</md-icon>',
+        '  <span ng-transclude></span',
+        '</button>'
+      ].join(''),
+      compile: compile
+    };
+
+    function compile (tElement, tAttrs) {
+
+      // Attach a click handler in compile in order to immediately stop propagation
+      // (especially for ng-click) when the checkmark is disabled.
+      tElement.on('click', function(event) {
+        if (this.hasAttribute('disabled')) {
+          event.stopImmediatePropagation();
+        }
+      });
+
+      return function postLink(scope, element, attr, ngModelCtrl) {
+        // See https://github.com/angular/angular.js/commit/c90cefe16142d973a123e945fc9058e8a874c357
+        var trueValue = parseConstantExpr($parse, scope, 'sgTrueValue', attr.sgTrueValue, true),
+            falseValue = parseConstantExpr($parse, scope, 'sgFalseValue', attr.sgFalseValue, false);
+        
+        ngModelCtrl = ngModelCtrl || $mdUtil.fakeNgModel();
+        $mdTheming(element);
+
+        $mdAria.expectWithText(element, 'aria-label');
+
+        element.on('click', listener);
+
+        ngModelCtrl.$render = render;
+
+        function parseConstantExpr($parse, context, name, expression, fallback) {
+          var parseFn;
+          if (angular.isDefined(expression)) {
+            parseFn = $parse(expression);
+            if (!parseFn.constant) {
+              throw Error('Expected constant expression for `' + name + '`, but saw `' + expression + '`.');
+            }
+            return parseFn(context);
+          }
+          return fallback;
+        }
+
+        function listener(ev) {
+          if (element[0].hasAttribute('disabled')) {
+            return;
+          }
+
+          scope.$apply(function() {
+            // Toggle the checkmark value
+            var viewValue = ngModelCtrl.$viewValue == trueValue? falseValue : trueValue;
+
+            ngModelCtrl.$setViewValue( viewValue, ev && ev.type);
+            ngModelCtrl.$render();
+          });
+        }
+
+        function render() {
+          if (ngModelCtrl.$viewValue == trueValue)
+            element.addClass(CHECKED_CSS);
+          else
+            element.removeClass(CHECKED_CSS);
+        }
+      };
+    }
+  }
+})();
diff --git a/UI/WebServerResources/scss/components/checkbox/checkbox.scss b/UI/WebServerResources/scss/components/checkbox/checkbox.scss
index ebeba1fdd..1ce46f616 100644
--- a/UI/WebServerResources/scss/components/checkbox/checkbox.scss
+++ b/UI/WebServerResources/scss/components/checkbox/checkbox.scss
@@ -6,3 +6,14 @@
 md-sidenav md-checkbox {
     margin: 0;
 }
+
+// Checkbox for the sg-checkmark directive
+// ---------------------------------------
+.sg-checkmark {
+  md-icon {
+    opacity: 0;
+  }
+  &.sg-checked md-icon {
+    opacity: 1;
+  }
+}
\ No newline at end of file