Commit | Line | Data |
---|---|---|
24588be5 TO |
1 | (function(angular, $, _) { |
2 | "use strict"; | |
3 | ||
4 | angular.module('crmDialog', CRM.angRequires('crmDialog')); | |
5 | ||
f1b93a46 CW |
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 | ||
24588be5 TO |
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 | }, | |
138b5733 CW |
96 | controller: function($scope) { |
97 | var $ctrl = this; | |
24588be5 TO |
98 | $ctrl.$onInit = function() { |
99 | $ctrl.crmDialog.buttons.push(this); | |
100 | }; | |
101 | $ctrl.id = 'crmDialogButton_' + (idNum++); | |
102 | ||
138b5733 | 103 | $scope.$watch('$ctrl.disabled', function() { |
24588be5 TO |
104 | $ctrl.crmDialog.toggleButtons(); |
105 | }); | |
106 | } | |
107 | }); | |
108 | ||
109 | })(angular, CRM.$, CRM._); |