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() {
  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, ['icons', 'text', 'disabled']);
  55             button.click = function() {
  56               $scope.$apply(crmDialogButton.onClick);
  57             };
  58             buttons.push(button);
  59           });
  60           dialogService.setButtons($dialog.name, buttons);
  61         };
  62
  63         $timeout(function() {
  64           $('.ui-dialog:last input:not([disabled]):not([type="submit"]):first').focus();
  65         });
  66
  67       },
  68       link: function(scope, element, attrs, controller) {
  69         controller.name = attrs.crmDialog;
  70         scope[attrs.crmDialog] = controller;
  71       }
  72     };
  73   });
  74
  75   // Ex: <crm-dialog-button text="ts('Do it')" icons="{primary: 'fa-foo'}" on-click="doIt()" />
  76   angular.module('crmDialog').component('crmDialogButton', {
  77     bindings: {
  78       disabled: '<',
  79       icons: '<',
  80       text: '<',
  81       onClick: '&'
  82     },
  83     require: {
  84       crmDialog: '?^^crmDialog'
  85     },
  86     controller: function($scope) {
  87       var $ctrl = this;
  88       $ctrl.$onInit = function() {
  89         $ctrl.crmDialog.buttons.push(this);
  90         $scope.$watch('$ctrl.disabled', $ctrl.crmDialog.loadButtons);
  91         $scope.$watch('$ctrl.text', $ctrl.crmDialog.loadButtons);
  92         $scope.$watch('$ctrl.icons', $ctrl.crmDialog.loadButtons);
  93       };
  94     }
  95   });
  96
  97 })(angular, CRM.$, CRM._);