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 | ||
80c4a87d | 43 | $dialog.close = function(result) { |
24588be5 TO |
44 | dialogService.close($dialog.name, result); |
45 | }; | |
46 | ||
80c4a87d | 47 | $dialog.cancel = function() { |
24588be5 TO |
48 | dialogService.cancel($dialog.name); |
49 | }; | |
50 | ||
51 | $dialog.loadButtons = function() { | |
52 | var buttons = []; | |
53 | angular.forEach($dialog.buttons, function (crmDialogButton) { | |
80c4a87d CW |
54 | var button = _.pick(crmDialogButton, ['icons', 'text', 'disabled']); |
55 | button.click = function() { | |
56 | $scope.$apply(crmDialogButton.onClick); | |
24588be5 TO |
57 | }; |
58 | buttons.push(button); | |
59 | }); | |
60 | dialogService.setButtons($dialog.name, buttons); | |
24588be5 TO |
61 | }; |
62 | ||
80c4a87d | 63 | $timeout(function() { |
24588be5 TO |
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 | ||
24588be5 TO |
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 | }, | |
138b5733 CW |
86 | controller: function($scope) { |
87 | var $ctrl = this; | |
24588be5 TO |
88 | $ctrl.$onInit = function() { |
89 | $ctrl.crmDialog.buttons.push(this); | |
80c4a87d CW |
90 | $scope.$watch('$ctrl.disabled', $ctrl.crmDialog.loadButtons); |
91 | $scope.$watch('$ctrl.text', $ctrl.crmDialog.loadButtons); | |
92 | $scope.$watch('$ctrl.icons', $ctrl.crmDialog.loadButtons); | |
24588be5 | 93 | }; |
24588be5 TO |
94 | } |
95 | }); | |
96 | ||
97 | })(angular, CRM.$, CRM._); |