ang/crmDialog.js

   1 (function(angular, $, _) {
   2   "use strict";
   3
   4   angular.module('crmDialog', CRM.angRequires('crmDialog'));
   5
   6   // Convenience binding to automatically launch a dialog when clicking an element
   7   // Ex: <button type="button" crm-dialog-popup="myDialogName" popup-tpl="~/myExt/MyDialogTpl.html" popup-data="{foo: bar}"
   8   angular.module('crmDialog').directive('crmDialogPopup', function(dialogService) {
   9     return {
  10       restrict: 'A',
  11       bindToController: {
  12         popupTpl: '@',
  13         popupName: '@crmDialogPopup',
  14         popupData: '<'
  15       },
  16       controller: function($scope, $element) {
  17         var ctrl = this;
  18         $element.on('click', function() {
  19           var options = CRM.utils.adjustDialogDefaults({
  20             autoOpen: false,
  21             title: _.trim($element.attr('title') || $element.text())
  22           });
  23           dialogService.open(ctrl.popupName, ctrl.popupTpl, ctrl.popupData || {}, options)
  24             .then(function(success) {
  25               $element.trigger('crmPopupFormSuccess');
  26             });
  27         });
  28       }
  29     };
  30   });
  31
  32   // Ex: <div crm-dialog="myDialogName"> ... <button ng-click="$dialog.cancel()">Cancel</button> ... </div>
  33   // Ex: <div crm-dialog="myDialogName"> ... <button ng-click="$dialog.close(outputData)">Close</button> ... </div>
  34   // Ex: <div crm-dialog="myDialogName"> ... <crm-dialog-button text="'Close'" on-click="$dialog.close()" /> ... </div>
  35   angular.module('crmDialog').directive('crmDialog', function(dialogService) {
  36     return {
  37       restrict: 'A',
  38       controllerAs: '$dialog',
  39       controller: function($scope, $parse, $timeout) {
  40         var $dialog = this;
  41         $dialog.buttons = [];
  42
  43         $dialog.close = function (result) {
  44           dialogService.close($dialog.name, result);
  45         };
  46
  47         $dialog.cancel = function (result) {
  48           dialogService.cancel($dialog.name);
  49         };
  50
  51         $dialog.loadButtons = function() {
  52           var buttons = [];
  53           angular.forEach($dialog.buttons, function (crmDialogButton) {
  54             var button = _.pick(crmDialogButton, ['id', 'icons', 'text']);
  55             button.click = function () {
  56               crmDialogButton.onClick();
  57             };
  58             buttons.push(button);
  59           });
  60           dialogService.setButtons($dialog.name, buttons);
  61           $dialog.toggleButtons();
  62         };
  63
  64         $dialog.toggleButtons = function() {
  65           angular.forEach($dialog.buttons, function (crmDialogButton) {
  66             $('#' + crmDialogButton.id).prop('disabled', crmDialogButton.disabled);
  67           });
  68         };
  69
  70         $timeout(function(){
  71           $dialog.loadButtons();
  72           $('.ui-dialog:last input:not([disabled]):not([type="submit"]):first').focus();
  73         });
  74
  75       },
  76       link: function(scope, element, attrs, controller) {
  77         controller.name = attrs.crmDialog;
  78         scope[attrs.crmDialog] = controller;
  79       }
  80     };
  81   });
  82
  83   var idNum = 1;
  84
  85   // Ex: <crm-dialog-button text="ts('Do it')" icons="{primary: 'fa-foo'}" on-click="doIt()" />
  86   angular.module('crmDialog').component('crmDialogButton', {
  87     bindings: {
  88       disabled: '<',
  89       icons: '<',
  90       text: '<',
  91       onClick: '&'
  92     },
  93     require: {
  94       crmDialog: '?^^crmDialog'
  95     },
  96     controller: function($scope) {
  97       var $ctrl = this;
  98       $ctrl.$onInit = function() {
  99         $ctrl.crmDialog.buttons.push(this);
 100       };
 101       $ctrl.id = 'crmDialogButton_' + (idNum++);
 102
 103       $scope.$watch('$ctrl.disabled', function() {
 104         $ctrl.crmDialog.toggleButtons();
 105       });
 106     }
 107   });
 108
 109 })(angular, CRM.$, CRM._);