Commit | Line | Data |
---|---|---|
685acae4 | 1 | /// crmUi: Sundry UI helpers |
2 | (function (angular, $, _) { | |
3 | ||
835fcb5e | 4 | var uidCount = 0, |
826f5ace CW |
5 | pageTitle = 'CiviCRM', |
6 | documentTitle = 'CiviCRM'; | |
f8601d61 | 7 | |
0b199194 | 8 | angular.module('crmUi', CRM.angRequires('crmUi')) |
030dce01 | 9 | |
0cbed02c | 10 | // example <div crm-ui-accordion crm-title="ts('My Title')" crm-collapsed="true">...content...</div> |
e4f46be0 | 11 | // WISHLIST: crmCollapsed should support two-way/continuous binding |
030dce01 TO |
12 | .directive('crmUiAccordion', function() { |
13 | return { | |
14 | scope: { | |
207819ec | 15 | crmUiAccordion: '=' |
030dce01 | 16 | }, |
207819ec | 17 | template: '<div ng-class="cssClasses"><div class="crm-accordion-header">{{crmUiAccordion.title}} <a crm-ui-help="help" ng-if="help"></a></div><div class="crm-accordion-body" ng-transclude></div></div>', |
030dce01 | 18 | transclude: true, |
0cbed02c TO |
19 | link: function (scope, element, attrs) { |
20 | scope.cssClasses = { | |
207819ec CW |
21 | 'crm-accordion-wrapper': true, |
22 | collapsed: scope.crmUiAccordion.collapsed | |
0cbed02c | 23 | }; |
207819ec CW |
24 | scope.help = null; |
25 | scope.$watch('crmUiAccordion', function(crmUiAccordion) { | |
26 | if (crmUiAccordion && crmUiAccordion.help) { | |
27 | scope.help = crmUiAccordion.help.clone({}, { | |
28 | title: crmUiAccordion.title | |
29 | }); | |
30 | } | |
31 | }); | |
0cbed02c | 32 | } |
030dce01 TO |
33 | }; |
34 | }) | |
35 | ||
69a65adc TO |
36 | // Examples: |
37 | // crmUiAlert({text: 'My text', title: 'My title', type: 'error'}); | |
38 | // crmUiAlert({template: '<a ng-click="ok()">Hello</a>', scope: $scope.$new()}); | |
39 | // var h = crmUiAlert({templateUrl: '~/crmFoo/alert.html', scope: $scope.$new()}); | |
40 | // ... h.close(); ... | |
41 | .service('crmUiAlert', function($compile, $rootScope, $templateRequest, $q) { | |
42 | var count = 0; | |
43 | return function crmUiAlert(params) { | |
44 | var id = 'crmUiAlert_' + (++count); | |
45 | var tpl = null; | |
46 | if (params.templateUrl) { | |
47 | tpl = $templateRequest(params.templateUrl); | |
48 | } | |
49 | else if (params.template) { | |
50 | tpl = params.template; | |
51 | } | |
52 | if (tpl) { | |
53 | params.text = '<div id="' + id + '"></div>'; // temporary stub | |
54 | } | |
55 | var result = CRM.alert(params.text, params.title, params.type, params.options); | |
56 | if (tpl) { | |
57 | $q.when(tpl, function(html) { | |
58 | var scope = params.scope || $rootScope.$new(); | |
59 | var linker = $compile(html); | |
60 | $('#' + id).append($(linker(scope))); | |
61 | }); | |
62 | } | |
63 | return result; | |
64 | }; | |
65 | }) | |
66 | ||
a42344f4 CW |
67 | // Simple wrapper around $.crmDatepicker. |
68 | // example with no time input: <input crm-ui-datepicker="{time: false}" ng-model="myobj.datefield"/> | |
70e7470f | 69 | // example with custom date format: <input crm-ui-datepicker="{date: 'm/d/y'}" ng-model="myobj.datefield"/> |
a42344f4 | 70 | .directive('crmUiDatepicker', function () { |
510d515d TO |
71 | return { |
72 | restrict: 'AE', | |
2f31bc16 | 73 | require: 'ngModel', |
510d515d | 74 | scope: { |
a42344f4 | 75 | crmUiDatepicker: '=' |
510d515d | 76 | }, |
2f31bc16 | 77 | link: function (scope, element, attrs, ngModel) { |
ac5009c1 CW |
78 | ngModel.$render = function () { |
79 | element.val(ngModel.$viewValue).change(); | |
80 | }; | |
81 | ||
a42344f4 CW |
82 | element |
83 | .crmDatepicker(scope.crmUiDatepicker) | |
84 | .on('change', function() { | |
ac5009c1 | 85 | var requiredLength = 19; |
a42344f4 CW |
86 | if (scope.crmUiDatepicker && scope.crmUiDatepicker.time === false) { |
87 | requiredLength = 10; | |
88 | } | |
89 | if (scope.crmUiDatepicker && scope.crmUiDatepicker.date === false) { | |
ac5009c1 | 90 | requiredLength = 8; |
a42344f4 CW |
91 | } |
92 | ngModel.$setValidity('incompleteDateTime', !($(this).val().length && $(this).val().length !== requiredLength)); | |
510d515d | 93 | }); |
510d515d TO |
94 | } |
95 | }; | |
96 | }) | |
97 | ||
c4c69e7b TO |
98 | // Display debug information (if available) |
99 | // For richer DX, checkout Batarang/ng-inspector (Chrome/Safari), or AngScope/ng-inspect (Firefox). | |
100 | // example: <div crm-ui-debug="myobject" /> | |
101 | .directive('crmUiDebug', function ($location) { | |
102 | return { | |
103 | restrict: 'AE', | |
104 | scope: { | |
105 | crmUiDebug: '@' | |
106 | }, | |
107 | template: function() { | |
108 | var args = $location.search(); | |
10d00207 TO |
109 | if (args && args.angularDebug) { |
110 | var jsonTpl = (CRM.angular.modules.indexOf('jsonFormatter') < 0) ? '<pre>{{data|json}}</pre>' : '<json-formatter json="data" open="1"></json-formatter>'; | |
111 | return '<div crm-ui-accordion=\'{title: ts("Debug (%1)", {1: crmUiDebug}), collapsed: true}\'>' + jsonTpl + '</div>'; | |
112 | } | |
113 | return ''; | |
c4c69e7b TO |
114 | }, |
115 | link: function(scope, element, attrs) { | |
116 | var args = $location.search(); | |
117 | if (args && args.angularDebug) { | |
118 | scope.ts = CRM.ts(null); | |
119 | scope.$parent.$watch(attrs.crmUiDebug, function(data) { | |
120 | scope.data = data; | |
121 | }); | |
122 | } | |
123 | } | |
124 | }; | |
125 | }) | |
126 | ||
489c2674 | 127 | // Display a field/row in a field list |
c4256f35 CW |
128 | // example: <div crm-ui-field="{title: ts('My Field')}"> {{mydata}} </div> |
129 | // example: <div crm-ui-field="{name: 'subform.myfield', title: ts('My Field')}"> <input crm-ui-id="subform.myfield" name="myfield" /> </div> | |
130 | // example: <div crm-ui-field="{name: 'subform.myfield', title: ts('My Field')}"> <input crm-ui-id="subform.myfield" name="myfield" required /> </div> | |
3ca16b89 | 131 | // example: <div crm-ui-field="{name: 'subform.myfield', title: ts('My Field'), help: hs('help_field_name'), required: true}"> {{mydata}} </div> |
3cc9c048 | 132 | .directive('crmUiField', function() { |
489c2674 TO |
133 | // Note: When writing new templates, the "label" position is particular. See/patch "var label" below. |
134 | var templateUrls = { | |
ef5d18a1 TO |
135 | default: '~/crmUi/field.html', |
136 | checkbox: '~/crmUi/field-cb.html' | |
489c2674 TO |
137 | }; |
138 | ||
139 | return { | |
f8601d61 TO |
140 | require: '^crmUiIdScope', |
141 | restrict: 'EA', | |
489c2674 | 142 | scope: { |
d8356d0b | 143 | // {title, name, help, helpFile} |
c4256f35 | 144 | crmUiField: '=' |
489c2674 TO |
145 | }, |
146 | templateUrl: function(tElement, tAttrs){ | |
147 | var layout = tAttrs.crmLayout ? tAttrs.crmLayout : 'default'; | |
148 | return templateUrls[layout]; | |
149 | }, | |
150 | transclude: true, | |
f8601d61 | 151 | link: function (scope, element, attrs, crmUiIdCtrl) { |
489c2674 | 152 | $(element).addClass('crm-section'); |
563ba527 | 153 | scope.help = null; |
dfc2a868 TO |
154 | scope.$watch('crmUiField', function(crmUiField) { |
155 | if (crmUiField && crmUiField.help) { | |
156 | scope.help = crmUiField.help.clone({}, { | |
157 | title: crmUiField.title | |
158 | }); | |
159 | } | |
160 | }); | |
f8601d61 TO |
161 | } |
162 | }; | |
163 | }) | |
164 | ||
165 | // example: <div ng-form="subform" crm-ui-id-scope><label crm-ui-for="subform.foo">Foo:</label><input crm-ui-id="subform.foo" name="foo"/></div> | |
166 | .directive('crmUiId', function () { | |
167 | return { | |
168 | require: '^crmUiIdScope', | |
169 | restrict: 'EA', | |
3cc9c048 TO |
170 | link: { |
171 | pre: function (scope, element, attrs, crmUiIdCtrl) { | |
172 | var id = crmUiIdCtrl.get(attrs.crmUiId); | |
173 | element.attr('id', id); | |
174 | } | |
f8601d61 TO |
175 | } |
176 | }; | |
177 | }) | |
489c2674 | 178 | |
dfc2a868 TO |
179 | // for example, see crmUiHelp |
180 | .service('crmUiHelp', function(){ | |
181 | // example: var h = new FieldHelp({id: 'foo'}); h.open(); | |
182 | function FieldHelp(options) { | |
183 | this.options = options; | |
184 | } | |
185 | angular.extend(FieldHelp.prototype, { | |
186 | get: function(n) { | |
187 | return this.options[n]; | |
188 | }, | |
189 | open: function open() { | |
dfc2a868 TO |
190 | CRM.help(this.options.title, {id: this.options.id, file: this.options.file}); |
191 | }, | |
192 | clone: function clone(options, defaults) { | |
dfc2a868 TO |
193 | return new FieldHelp(angular.extend({}, defaults, this.options, options)); |
194 | } | |
195 | }); | |
196 | ||
563ba527 | 197 | // example: var hs = crmUiHelp({file: 'CRM/Foo/Bar'}); |
dfc2a868 | 198 | return function(defaults){ |
563ba527 TO |
199 | // example: hs('myfield') |
200 | // example: hs({id: 'myfield', title: 'Foo Bar', file: 'Whiz/Bang'}) | |
dfc2a868 TO |
201 | return function(options) { |
202 | if (_.isString(options)) { | |
203 | options = {id: options}; | |
204 | } | |
205 | return new FieldHelp(angular.extend({}, defaults, options)); | |
6dc9d4ca TO |
206 | }; |
207 | }; | |
dfc2a868 TO |
208 | }) |
209 | ||
210 | // Display a help icon | |
9a593827 | 211 | // Example: Use a default *.hlp file |
563ba527 TO |
212 | // scope.hs = crmUiHelp({file: 'Path/To/Help/File'}); |
213 | // HTML: <a crm-ui-help="hs({title:ts('My Field'), id:'my_field'})"> | |
9a593827 | 214 | // Example: Use an explicit *.hlp file |
563ba527 | 215 | // HTML: <a crm-ui-help="hs({title:ts('My Field'), id:'my_field', file:'CRM/Foo/Bar'})"> |
a517b78a CW |
216 | .directive('crmUiHelp', function() { |
217 | return { | |
218 | restrict: 'EA', | |
563ba527 TO |
219 | link: function(scope, element, attrs) { |
220 | setTimeout(function() { | |
221 | var crmUiHelp = scope.$eval(attrs.crmUiHelp); | |
dfc2a868 TO |
222 | var title = crmUiHelp && crmUiHelp.get('title') ? ts('%1 Help', {1: crmUiHelp.get('title')}) : ts('Help'); |
223 | element.attr('title', title); | |
563ba527 | 224 | }, 50); |
dfc2a868 | 225 | |
a517b78a CW |
226 | element |
227 | .addClass('helpicon') | |
a517b78a CW |
228 | .attr('href', '#') |
229 | .on('click', function(e) { | |
230 | e.preventDefault(); | |
563ba527 | 231 | scope.$eval(attrs.crmUiHelp).open(); |
a517b78a CW |
232 | }); |
233 | } | |
234 | }; | |
235 | }) | |
236 | ||
f8601d61 TO |
237 | // example: <div ng-form="subform" crm-ui-id-scope><label crm-ui-for="subform.foo">Foo:</label><input crm-ui-id="subform.foo" name="foo"/></div> |
238 | .directive('crmUiFor', function ($parse, $timeout) { | |
239 | return { | |
240 | require: '^crmUiIdScope', | |
241 | restrict: 'EA', | |
242 | template: '<span ng-class="cssClasses"><span ng-transclude/><span crm-ui-visible="crmIsRequired" class="crm-marker" title="This field is required.">*</span></span>', | |
243 | transclude: true, | |
244 | link: function (scope, element, attrs, crmUiIdCtrl) { | |
245 | scope.crmIsRequired = false; | |
246 | scope.cssClasses = {}; | |
489c2674 | 247 | |
f8601d61 | 248 | if (!attrs.crmUiFor) return; |
489c2674 | 249 | |
f8601d61 TO |
250 | var id = crmUiIdCtrl.get(attrs.crmUiFor); |
251 | element.attr('for', id); | |
252 | var ngModel = null; | |
489c2674 | 253 | |
f8601d61 TO |
254 | var updateCss = function () { |
255 | scope.cssClasses['crm-error'] = !ngModel.$valid && !ngModel.$pristine; | |
256 | }; | |
489c2674 | 257 | |
f8601d61 TO |
258 | // Note: if target element is dynamically generated (eg via ngInclude), then it may not be available |
259 | // immediately for initialization. Use retries/retryDelay to initialize such elements. | |
260 | var init = function (retries, retryDelay) { | |
261 | var input = $('#' + id); | |
3ca16b89 | 262 | if (input.length === 0 && !attrs.crmUiForceRequired) { |
f8601d61 TO |
263 | if (retries) { |
264 | $timeout(function(){ | |
265 | init(retries-1, retryDelay); | |
266 | }, retryDelay); | |
267 | } | |
268 | return; | |
269 | } | |
489c2674 | 270 | |
3ca16b89 TO |
271 | if (attrs.crmUiForceRequired) { |
272 | scope.crmIsRequired = true; | |
273 | return; | |
274 | } | |
275 | ||
f8601d61 TO |
276 | var tgtScope = scope;//.$parent; |
277 | if (attrs.crmDepth) { | |
278 | for (var i = attrs.crmDepth; i > 0; i--) { | |
279 | tgtScope = tgtScope.$parent; | |
280 | } | |
281 | } | |
489c2674 | 282 | |
f8601d61 TO |
283 | if (input.attr('ng-required')) { |
284 | scope.crmIsRequired = scope.$parent.$eval(input.attr('ng-required')); | |
285 | scope.$parent.$watch(input.attr('ng-required'), function (isRequired) { | |
286 | scope.crmIsRequired = isRequired; | |
287 | }); | |
288 | } | |
289 | else { | |
f2bad133 | 290 | scope.crmIsRequired = input.prop('required'); |
f8601d61 | 291 | } |
489c2674 | 292 | |
f8601d61 TO |
293 | ngModel = $parse(attrs.crmUiFor)(tgtScope); |
294 | if (ngModel) { | |
295 | ngModel.$viewChangeListeners.push(updateCss); | |
296 | } | |
297 | }; | |
489c2674 | 298 | |
f8601d61 TO |
299 | $timeout(function(){ |
300 | init(3, 100); | |
489c2674 TO |
301 | }); |
302 | } | |
303 | }; | |
304 | }) | |
305 | ||
d376f33e | 306 | // Define a scope in which a name like "subform.foo" maps to a unique ID. |
f8601d61 TO |
307 | // example: <div ng-form="subform" crm-ui-id-scope><label crm-ui-for="subform.foo">Foo:</label><input crm-ui-id="subform.foo" name="foo"/></div> |
308 | .directive('crmUiIdScope', function () { | |
309 | return { | |
310 | restrict: 'EA', | |
311 | scope: {}, | |
312 | controllerAs: 'crmUiIdCtrl', | |
313 | controller: function($scope) { | |
314 | var ids = {}; | |
315 | this.get = function(name) { | |
316 | if (!ids[name]) { | |
317 | ids[name] = "crmUiId_" + (++uidCount); | |
318 | } | |
319 | return ids[name]; | |
f2bad133 | 320 | }; |
f8601d61 TO |
321 | }, |
322 | link: function (scope, element, attrs) {} | |
323 | }; | |
324 | }) | |
325 | ||
d376f33e | 326 | // Display an HTML blurb inside an IFRAME. |
107c5cc7 | 327 | // example: <iframe crm-ui-iframe="getHtmlContent()"></iframe> |
79cf1116 | 328 | // example: <iframe crm-ui-iframe crm-ui-iframe-src="getUrl()"></iframe> |
107c5cc7 TO |
329 | .directive('crmUiIframe', function ($parse) { |
330 | return { | |
331 | scope: { | |
79cf1116 TO |
332 | crmUiIframeSrc: '@', // expression which evaluates to a URL |
333 | crmUiIframe: '@' // expression which evaluates to HTML content | |
107c5cc7 TO |
334 | }, |
335 | link: function (scope, elm, attrs) { | |
336 | var iframe = $(elm)[0]; | |
337 | iframe.setAttribute('width', '100%'); | |
910a6c11 | 338 | iframe.setAttribute('height', '250px'); |
107c5cc7 TO |
339 | iframe.setAttribute('frameborder', '0'); |
340 | ||
341 | var refresh = function () { | |
79cf1116 TO |
342 | if (attrs.crmUiIframeSrc) { |
343 | iframe.setAttribute('src', scope.$parent.$eval(attrs.crmUiIframeSrc)); | |
107c5cc7 | 344 | } |
79cf1116 TO |
345 | else { |
346 | var iframeHtml = scope.$parent.$eval(attrs.crmUiIframe); | |
107c5cc7 | 347 | |
79cf1116 TO |
348 | var doc = iframe.document; |
349 | if (iframe.contentDocument) { | |
350 | doc = iframe.contentDocument; | |
351 | } | |
352 | else if (iframe.contentWindow) { | |
353 | doc = iframe.contentWindow.document; | |
354 | } | |
355 | ||
356 | doc.open(); | |
357 | doc.writeln(iframeHtml); | |
358 | doc.close(); | |
359 | } | |
f2bad133 | 360 | }; |
107c5cc7 | 361 | |
02cd9764 CW |
362 | // If the iframe is in a dialog, respond to resize events |
363 | $(elm).parent().on('dialogresize dialogopen', function(e, ui) { | |
364 | $(this).css({padding: '0', margin: '0', overflow: 'hidden'}); | |
365 | iframe.setAttribute('height', '' + $(this).innerHeight() + 'px'); | |
366 | }); | |
367 | ||
910a6c11 MR |
368 | $(elm).parent().on('dialogresize', function(e, ui) { |
369 | iframe.setAttribute('class', 'resized'); | |
370 | }); | |
371 | ||
107c5cc7 | 372 | scope.$parent.$watch(attrs.crmUiIframe, refresh); |
107c5cc7 TO |
373 | } |
374 | }; | |
375 | }) | |
376 | ||
f8f85764 TO |
377 | // Example: |
378 | // <a ng-click="$broadcast('my-insert-target', 'some new text')>Insert</a> | |
379 | // <textarea crm-ui-insert-rx='my-insert-target'></textarea> | |
f8f85764 TO |
380 | .directive('crmUiInsertRx', function() { |
381 | return { | |
382 | link: function(scope, element, attrs) { | |
383 | scope.$on(attrs.crmUiInsertRx, function(e, tokenName) { | |
c62731c3 TC |
384 | CRM.wysiwyg.insert(element, tokenName); |
385 | $(element).select2('close').select2('val', ''); | |
f91b1c0c | 386 | CRM.wysiwyg.focus(element); |
f8f85764 TO |
387 | }); |
388 | } | |
389 | }; | |
390 | }) | |
391 | ||
d376f33e | 392 | // Define a rich text editor. |
3cc9c048 TO |
393 | // example: <textarea crm-ui-id="myForm.body_html" crm-ui-richtext name="body_html" ng-model="mailing.body_html"></textarea> |
394 | .directive('crmUiRichtext', function ($timeout) { | |
38737af8 TO |
395 | return { |
396 | require: '?ngModel', | |
397 | link: function (scope, elm, attr, ngModel) { | |
65d3e04c | 398 | |
c62731c3 | 399 | var editor = CRM.wysiwyg.create(elm); |
38737af8 TO |
400 | if (!ngModel) { |
401 | return; | |
402 | } | |
403 | ||
07996588 | 404 | if (attr.ngBlur) { |
f91b1c0c CW |
405 | $(elm).on('blur', function() { |
406 | $timeout(function() { | |
07996588 | 407 | scope.$eval(attr.ngBlur); |
d03e0d13 | 408 | }); |
07996588 TO |
409 | }); |
410 | } | |
411 | ||
f91b1c0c | 412 | ngModel.$render = function(value) { |
c63f9bfb | 413 | editor.done(function() { |
495f94fb | 414 | CRM.wysiwyg.setVal(elm, ngModel.$viewValue || ''); |
c63f9bfb | 415 | }); |
38737af8 TO |
416 | }; |
417 | } | |
418 | }; | |
419 | }) | |
420 | ||
d376f33e | 421 | // Display a lock icon (based on a boolean). |
685acae4 | 422 | // example: <a crm-ui-lock binding="mymodel.boolfield"></a> |
423 | // example: <a crm-ui-lock | |
424 | // binding="mymodel.boolfield" | |
425 | // title-locked="ts('Boolfield is locked')" | |
426 | // title-unlocked="ts('Boolfield is unlocked')"></a> | |
427 | .directive('crmUiLock', function ($parse, $rootScope) { | |
428 | var defaultVal = function (defaultValue) { | |
429 | var f = function (scope) { | |
430 | return defaultValue; | |
f2bad133 | 431 | }; |
685acae4 | 432 | f.assign = function (scope, value) { |
433 | // ignore changes | |
f2bad133 | 434 | }; |
685acae4 | 435 | return f; |
436 | }; | |
437 | ||
438 | // like $parse, but accepts a defaultValue in case expr is undefined | |
439 | var parse = function (expr, defaultValue) { | |
440 | return expr ? $parse(expr) : defaultVal(defaultValue); | |
441 | }; | |
442 | ||
443 | return { | |
444 | template: '', | |
445 | link: function (scope, element, attrs) { | |
f2bad133 TO |
446 | var binding = parse(attrs.binding, true); |
447 | var titleLocked = parse(attrs.titleLocked, ts('Locked')); | |
448 | var titleUnlocked = parse(attrs.titleUnlocked, ts('Unlocked')); | |
685acae4 | 449 | |
77ec5a8d | 450 | $(element).addClass('crm-i lock-button'); |
685acae4 | 451 | var refresh = function () { |
452 | var locked = binding(scope); | |
453 | if (locked) { | |
454 | $(element) | |
77ec5a8d AH |
455 | .removeClass('fa-unlock') |
456 | .addClass('fa-lock') | |
685acae4 | 457 | .prop('title', titleLocked(scope)) |
458 | ; | |
459 | } | |
460 | else { | |
461 | $(element) | |
77ec5a8d AH |
462 | .removeClass('fa-lock') |
463 | .addClass('fa-unlock') | |
685acae4 | 464 | .prop('title', titleUnlocked(scope)) |
465 | ; | |
466 | } | |
467 | }; | |
468 | ||
469 | $(element).click(function () { | |
470 | binding.assign(scope, !binding(scope)); | |
471 | //scope.$digest(); | |
472 | $rootScope.$digest(); | |
473 | }); | |
474 | ||
475 | scope.$watch(attrs.binding, refresh); | |
476 | scope.$watch(attrs.titleLocked, refresh); | |
477 | scope.$watch(attrs.titleUnlocked, refresh); | |
478 | ||
479 | refresh(); | |
480 | } | |
481 | }; | |
482 | }) | |
030dce01 | 483 | |
b21c9cdc TO |
484 | // CrmUiOrderCtrl is a controller class which manages sort orderings. |
485 | // Ex: | |
486 | // JS: $scope.myOrder = new CrmUiOrderCtrl(['+field1', '-field2]); | |
487 | // $scope.myOrder.toggle('field1'); | |
488 | // $scope.myOrder.setDir('field2', ''); | |
489 | // HTML: <tr ng-repeat="... | order:myOrder.get()">...</tr> | |
490 | .service('CrmUiOrderCtrl', function(){ | |
b21c9cdc TO |
491 | function CrmUiOrderCtrl(defaults){ |
492 | this.values = defaults; | |
493 | } | |
494 | angular.extend(CrmUiOrderCtrl.prototype, { | |
495 | get: function get() { | |
496 | return this.values; | |
497 | }, | |
498 | getDir: function getDir(name) { | |
499 | if (this.values.indexOf(name) >= 0 || this.values.indexOf('+' + name) >= 0) { | |
500 | return '+'; | |
501 | } | |
502 | if (this.values.indexOf('-' + name) >= 0) { | |
503 | return '-'; | |
504 | } | |
505 | return ''; | |
506 | }, | |
507 | // @return bool TRUE if something is removed | |
508 | remove: function remove(name) { | |
509 | var idx = this.values.indexOf(name); | |
510 | if (idx >= 0) { | |
511 | this.values.splice(idx, 1); | |
512 | return true; | |
513 | } | |
514 | else { | |
515 | return false; | |
516 | } | |
517 | }, | |
518 | setDir: function setDir(name, dir) { | |
519 | return this.toggle(name, dir); | |
520 | }, | |
521 | // Toggle sort order on a field. | |
522 | // To set a specific order, pass optional parameter 'next' ('+', '-', or ''). | |
523 | toggle: function toggle(name, next) { | |
524 | if (!next && next !== '') { | |
525 | next = '+'; | |
526 | if (this.remove(name) || this.remove('+' + name)) { | |
527 | next = '-'; | |
528 | } | |
529 | if (this.remove('-' + name)) { | |
530 | next = ''; | |
531 | } | |
532 | } | |
533 | ||
534 | if (next == '+') { | |
535 | this.values.unshift('+' + name); | |
536 | } | |
537 | else if (next == '-') { | |
538 | this.values.unshift('-' + name); | |
539 | } | |
540 | } | |
541 | }); | |
542 | return CrmUiOrderCtrl; | |
543 | }) | |
544 | ||
545 | // Define a controller which manages sort order. You may interact with the controller | |
546 | // directly ("myOrder.toggle('fieldname')") order using the helper, crm-ui-order-by. | |
547 | // example: | |
548 | // <span crm-ui-order="{var: 'myOrder', defaults: {'-myField'}}"></span> | |
549 | // <th><a crm-ui-order-by="[myOrder,'myField']">My Field</a></th> | |
550 | // <tr ng-repeat="... | order:myOrder.get()">...</tr> | |
551 | // <button ng-click="myOrder.toggle('myField')"> | |
552 | .directive('crmUiOrder', function(CrmUiOrderCtrl) { | |
553 | return { | |
554 | link: function(scope, element, attrs){ | |
555 | var options = angular.extend({var: 'crmUiOrderBy'}, scope.$eval(attrs.crmUiOrder)); | |
556 | scope[options.var] = new CrmUiOrderCtrl(options.defaults); | |
557 | } | |
558 | }; | |
559 | }) | |
560 | ||
561 | // For usage, see crmUiOrder (above) | |
562 | .directive('crmUiOrderBy', function() { | |
563 | return { | |
564 | link: function(scope, element, attrs) { | |
565 | function updateClass(crmUiOrderCtrl, name) { | |
566 | var dir = crmUiOrderCtrl.getDir(name); | |
567 | element | |
568 | .toggleClass('sorting_asc', dir === '+') | |
569 | .toggleClass('sorting_desc', dir === '-') | |
570 | .toggleClass('sorting', dir === ''); | |
571 | } | |
572 | ||
573 | element.on('click', function(e){ | |
574 | var tgt = scope.$eval(attrs.crmUiOrderBy); | |
575 | tgt[0].toggle(tgt[1]); | |
576 | updateClass(tgt[0], tgt[1]); | |
577 | e.preventDefault(); | |
578 | scope.$digest(); | |
579 | }); | |
580 | ||
581 | var tgt = scope.$eval(attrs.crmUiOrderBy); | |
582 | updateClass(tgt[0], tgt[1]); | |
583 | } | |
584 | }; | |
585 | }) | |
586 | ||
d376f33e | 587 | // Display a fancy SELECT (based on select2). |
ebfe3efb TO |
588 | // usage: <select crm-ui-select="{placeholder:'Something',allowClear:true,...}" ng-model="myobj.field"><option...></select> |
589 | .directive('crmUiSelect', function ($parse, $timeout) { | |
8c632f2b | 590 | return { |
ebfe3efb | 591 | require: '?ngModel', |
1d924612 | 592 | priority: 1, |
8c632f2b | 593 | scope: { |
8674b5ac | 594 | crmUiSelect: '=' |
8c632f2b | 595 | }, |
ebfe3efb | 596 | link: function (scope, element, attrs, ngModel) { |
8c632f2b TO |
597 | // In cases where UI initiates update, there may be an extra |
598 | // call to refreshUI, but it doesn't create a cycle. | |
599 | ||
c81696a6 CW |
600 | if (ngModel) { |
601 | ngModel.$render = function () { | |
602 | $timeout(function () { | |
603 | // ex: msg_template_id adds new item then selects it; use $timeout to ensure that | |
604 | // new item is added before selection is made | |
9ed95c23 CW |
605 | var newVal = _.cloneDeep(ngModel.$modelValue); |
606 | // Fix possible data-type mismatch | |
607 | if (typeof newVal === 'string' && element.select2('container').hasClass('select2-container-multi')) { | |
608 | newVal = newVal.length ? newVal.split(',') : []; | |
609 | } | |
610 | element.select2('val', newVal); | |
c81696a6 CW |
611 | }); |
612 | }; | |
613 | } | |
8c632f2b | 614 | function refreshModel() { |
50e25421 | 615 | var oldValue = ngModel.$viewValue, newValue = element.select2('val'); |
8c632f2b | 616 | if (oldValue != newValue) { |
ebfe3efb TO |
617 | scope.$parent.$apply(function () { |
618 | ngModel.$setViewValue(newValue); | |
8c632f2b | 619 | }); |
8c632f2b TO |
620 | } |
621 | } | |
ebfe3efb | 622 | |
8c632f2b TO |
623 | function init() { |
624 | // TODO watch select2-options | |
8c3a97ed | 625 | element.crmSelect2(scope.crmUiSelect || {}); |
c81696a6 CW |
626 | if (ngModel) { |
627 | element.on('change', refreshModel); | |
c81696a6 | 628 | } |
8099bfee CW |
629 | } |
630 | ||
631 | init(); | |
632 | } | |
633 | }; | |
634 | }) | |
635 | ||
ecd9ce3b TO |
636 | // Use a select2 widget as a pick-list. Instead of updating ngModel, the select2 widget will fire an event. |
637 | // This similar to ngModel+ngChange, except that value is never stored in a model. It is only fired in the event. | |
638 | // usage: <select crm-ui-select='{...}' on-crm-ui-select="alert("User picked this item: " + selection)"></select> | |
639 | .directive('onCrmUiSelect', function ($parse) { | |
640 | return { | |
641 | priority: 10, | |
642 | link: function (scope, element, attrs) { | |
643 | element.on('select2-selecting', function(e) { | |
644 | e.preventDefault(); | |
645 | element.select2('close').select2('val', ''); | |
646 | scope.$parent.$eval(attrs.onCrmUiSelect, {selection: e.val}); | |
647 | }); | |
648 | } | |
649 | }; | |
650 | }) | |
651 | ||
8099bfee CW |
652 | // Render a crmEntityRef widget |
653 | // usage: <input crm-entityref="{entity: 'Contact', select: {allowClear:true}}" ng-model="myobj.field" /> | |
654 | .directive('crmEntityref', function ($parse, $timeout) { | |
655 | return { | |
656 | require: '?ngModel', | |
657 | scope: { | |
658 | crmEntityref: '=' | |
659 | }, | |
660 | link: function (scope, element, attrs, ngModel) { | |
661 | // In cases where UI initiates update, there may be an extra | |
662 | // call to refreshUI, but it doesn't create a cycle. | |
663 | ||
664 | ngModel.$render = function () { | |
665 | $timeout(function () { | |
666 | // ex: msg_template_id adds new item then selects it; use $timeout to ensure that | |
667 | // new item is added before selection is made | |
9ed95c23 CW |
668 | var newVal = _.cloneDeep(ngModel.$modelValue); |
669 | // Fix possible data-type mismatch | |
670 | if (typeof newVal === 'string' && element.select2('container').hasClass('select2-container-multi')) { | |
671 | newVal = newVal.length ? newVal.split(',') : []; | |
672 | } | |
673 | element.select2('val', newVal); | |
8099bfee CW |
674 | }); |
675 | }; | |
676 | function refreshModel() { | |
677 | var oldValue = ngModel.$viewValue, newValue = element.select2('val'); | |
678 | if (oldValue != newValue) { | |
679 | scope.$parent.$apply(function () { | |
680 | ngModel.$setViewValue(newValue); | |
681 | }); | |
682 | } | |
683 | } | |
684 | ||
685 | function init() { | |
8099bfee CW |
686 | // TODO can we infer "entity" from model? |
687 | element.crmEntityRef(scope.crmEntityref || {}); | |
688 | element.on('change', refreshModel); | |
689 | $timeout(ngModel.$render); | |
8c632f2b | 690 | } |
ebfe3efb | 691 | |
8c632f2b TO |
692 | init(); |
693 | } | |
694 | }; | |
695 | }) | |
696 | ||
b4fdf77a | 697 | // validate multiple email text |
698 | // usage: <input crm-multiple-email type="text" ng-model="myobj.field" /> | |
699 | .directive('crmMultipleEmail', function ($parse, $timeout) { | |
700 | return { | |
701 | require: 'ngModel', | |
702 | link: function(scope, element, attrs, ctrl) { | |
703 | ctrl.$parsers.unshift(function(viewValue) { | |
704 | // if empty value provided simply bypass validation | |
705 | if (_.isEmpty(viewValue)) { | |
706 | ctrl.$setValidity('crmMultipleEmail', true); | |
707 | return viewValue; | |
708 | } | |
709 | ||
710 | // split email string on basis of comma | |
711 | var emails = viewValue.split(','); | |
712 | // regex pattern for single email | |
713 | var emailRegex = /\S+@\S+\.\S+/; | |
714 | ||
715 | var validityArr = emails.map(function(str){ | |
716 | return emailRegex.test(str.trim()); | |
717 | }); | |
718 | ||
719 | if ($.inArray(false, validityArr) > -1) { | |
720 | ctrl.$setValidity('crmMultipleEmail', false); | |
721 | } else { | |
722 | ctrl.$setValidity('crmMultipleEmail', true); | |
723 | } | |
724 | return viewValue; | |
725 | }); | |
726 | } | |
727 | }; | |
728 | }) | |
b1f92f72 | 729 | // example <div crm-ui-tab id="tab-1" crm-title="ts('My Title')" count="3">...content...</div> |
5f3568fd | 730 | // WISHLIST: use a full Angular component instead of an incomplete jQuery wrapper |
030dce01 TO |
731 | .directive('crmUiTab', function($parse) { |
732 | return { | |
5f3568fd TO |
733 | require: '^crmUiTabSet', |
734 | restrict: 'EA', | |
030dce01 | 735 | scope: { |
5f3568fd | 736 | crmTitle: '@', |
cf500087 | 737 | crmIcon: '@', |
b1f92f72 | 738 | count: '@', |
5f3568fd | 739 | id: '@' |
030dce01 | 740 | }, |
5f3568fd | 741 | template: '<div ng-transclude></div>', |
030dce01 | 742 | transclude: true, |
5f3568fd TO |
743 | link: function (scope, element, attrs, crmUiTabSetCtrl) { |
744 | crmUiTabSetCtrl.add(scope); | |
745 | } | |
030dce01 TO |
746 | }; |
747 | }) | |
748 | ||
749 | // example: <div crm-ui-tab-set><div crm-ui-tab crm-title="Tab 1">...</div><div crm-ui-tab crm-title="Tab 2">...</div></div> | |
750 | .directive('crmUiTabSet', function() { | |
751 | return { | |
5f3568fd TO |
752 | restrict: 'EA', |
753 | scope: { | |
dcb79a31 AS |
754 | crmUiTabSet: '@', |
755 | tabSetOptions: '@' | |
5f3568fd | 756 | }, |
ef5d18a1 | 757 | templateUrl: '~/crmUi/tabset.html', |
030dce01 | 758 | transclude: true, |
5f3568fd TO |
759 | controllerAs: 'crmUiTabSetCtrl', |
760 | controller: function($scope, $parse) { | |
761 | var tabs = $scope.tabs = []; // array<$scope> | |
762 | this.add = function(tab) { | |
763 | if (!tab.id) throw "Tab is missing 'id'"; | |
764 | tabs.push(tab); | |
765 | }; | |
766 | }, | |
030dce01 TO |
767 | link: function (scope, element, attrs) {} |
768 | }; | |
769 | }) | |
770 | ||
d376f33e | 771 | // Generic, field-independent form validator. |
3afb86ef TO |
772 | // example: <span ng-model="placeholder" crm-ui-validate="foo && bar || whiz" /> |
773 | // example: <span ng-model="placeholder" crm-ui-validate="foo && bar || whiz" crm-ui-validate-name="myError" /> | |
3afb86ef TO |
774 | .directive('crmUiValidate', function() { |
775 | return { | |
776 | restrict: 'EA', | |
777 | require: 'ngModel', | |
778 | link: function(scope, element, attrs, ngModel) { | |
779 | var validationKey = attrs.crmUiValidateName ? attrs.crmUiValidateName : 'crmUiValidate'; | |
780 | scope.$watch(attrs.crmUiValidate, function(newValue){ | |
781 | ngModel.$setValidity(validationKey, !!newValue); | |
782 | }); | |
783 | } | |
784 | }; | |
785 | }) | |
786 | ||
e84a11d8 TO |
787 | // like ng-show, but hides/displays elements using "visibility" which maintains positioning |
788 | // example <div crm-ui-visible="false">...content...</div> | |
789 | .directive('crmUiVisible', function($parse) { | |
790 | return { | |
791 | restrict: 'EA', | |
792 | scope: { | |
793 | crmUiVisible: '@' | |
794 | }, | |
795 | link: function (scope, element, attrs) { | |
796 | var model = $parse(attrs.crmUiVisible); | |
797 | function updatecChildren() { | |
798 | element.css('visibility', model(scope.$parent) ? 'inherit' : 'hidden'); | |
799 | } | |
800 | updatecChildren(); | |
801 | scope.$parent.$watch(attrs.crmUiVisible, updatecChildren); | |
802 | } | |
803 | }; | |
804 | }) | |
805 | ||
6717e4b9 | 806 | // example: <div crm-ui-wizard="myWizardCtrl"><div crm-ui-wizard-step crm-title="ts('Step 1')">...</div><div crm-ui-wizard-step crm-title="ts('Step 2')">...</div></div> |
e5df45d2 | 807 | // example with custom nav classes: <div crm-ui-wizard crm-ui-wizard-nav-class="ng-animate-out ...">...</div> |
6717e4b9 TO |
808 | // Note: "myWizardCtrl" has various actions/properties like next() and $first(). |
809 | // WISHLIST: Allow each step to determine if it is "complete" / "valid" / "selectable" | |
810 | // WISHLIST: Allow each step to enable/disable (show/hide) itself | |
030dce01 TO |
811 | .directive('crmUiWizard', function() { |
812 | return { | |
6717e4b9 TO |
813 | restrict: 'EA', |
814 | scope: { | |
e5df45d2 | 815 | crmUiWizard: '@', |
37f1d23b | 816 | crmUiWizardNavClass: '@' // string, A list of classes that will be added to the nav items |
6717e4b9 | 817 | }, |
ef5d18a1 | 818 | templateUrl: '~/crmUi/wizard.html', |
030dce01 | 819 | transclude: true, |
6717e4b9 TO |
820 | controllerAs: 'crmUiWizardCtrl', |
821 | controller: function($scope, $parse) { | |
822 | var steps = $scope.steps = []; // array<$scope> | |
823 | var crmUiWizardCtrl = this; | |
824 | var maxVisited = 0; | |
825 | var selectedIndex = null; | |
826 | ||
827 | var findIndex = function() { | |
828 | var found = null; | |
829 | angular.forEach(steps, function(step, stepKey) { | |
830 | if (step.selected) found = stepKey; | |
831 | }); | |
832 | return found; | |
833 | }; | |
834 | ||
835 | /// @return int the index of the current step | |
836 | this.$index = function() { return selectedIndex; }; | |
837 | /// @return bool whether the currentstep is first | |
838 | this.$first = function() { return this.$index() === 0; }; | |
839 | /// @return bool whether the current step is last | |
840 | this.$last = function() { return this.$index() === steps.length -1; }; | |
f2bad133 | 841 | this.$maxVisit = function() { return maxVisited; }; |
3f0da451 | 842 | this.$validStep = function() { |
f8c05c87 | 843 | return steps[selectedIndex] && steps[selectedIndex].isStepValid(); |
3f0da451 | 844 | }; |
6717e4b9 | 845 | this.iconFor = function(index) { |
4856d49f AH |
846 | if (index < this.$index()) return 'crm-i fa-check'; |
847 | if (index === this.$index()) return 'crm-i fa-angle-double-right'; | |
848 | return ''; | |
f2bad133 | 849 | }; |
6717e4b9 TO |
850 | this.isSelectable = function(step) { |
851 | if (step.selected) return false; | |
5919adff | 852 | return this.$validStep(); |
6717e4b9 TO |
853 | }; |
854 | ||
855 | /*** @param Object step the $scope of the step */ | |
856 | this.select = function(step) { | |
857 | angular.forEach(steps, function(otherStep, otherKey) { | |
858 | otherStep.selected = (otherStep === step); | |
859 | if (otherStep === step && maxVisited < otherKey) maxVisited = otherKey; | |
860 | }); | |
861 | selectedIndex = findIndex(); | |
862 | }; | |
863 | /*** @param Object step the $scope of the step */ | |
864 | this.add = function(step) { | |
865 | if (steps.length === 0) { | |
866 | step.selected = true; | |
867 | selectedIndex = 0; | |
868 | } | |
869 | steps.push(step); | |
8688b463 TO |
870 | steps.sort(function(a,b){ |
871 | return a.crmUiWizardStep - b.crmUiWizardStep; | |
872 | }); | |
873 | selectedIndex = findIndex(); | |
874 | }; | |
875 | this.remove = function(step) { | |
876 | var key = null; | |
877 | angular.forEach(steps, function(otherStep, otherKey) { | |
878 | if (otherStep === step) key = otherKey; | |
879 | }); | |
4109d03e | 880 | if (key !== null) { |
8688b463 TO |
881 | steps.splice(key, 1); |
882 | } | |
6717e4b9 TO |
883 | }; |
884 | this.goto = function(index) { | |
885 | if (index < 0) index = 0; | |
886 | if (index >= steps.length) index = steps.length-1; | |
887 | this.select(steps[index]); | |
888 | }; | |
889 | this.previous = function() { this.goto(this.$index()-1); }; | |
890 | this.next = function() { this.goto(this.$index()+1); }; | |
891 | if ($scope.crmUiWizard) { | |
f2bad133 | 892 | $parse($scope.crmUiWizard).assign($scope.$parent, this); |
6717e4b9 TO |
893 | } |
894 | }, | |
c4991710 TO |
895 | link: function (scope, element, attrs) { |
896 | scope.ts = CRM.ts(null); | |
510eb730 | 897 | |
ea140dc3 | 898 | element.find('.crm-wizard-buttons button[ng-click^=crmUiWizardCtrl]').click(function () { |
510eb730 FG |
899 | // These values are captured inside the click handler to ensure the |
900 | // positions/sizes of the elements are captured at the time of the | |
901 | // click vs. at the time this directive is initialized. | |
902 | var topOfWizard = element.offset().top; | |
903 | var heightOfMenu = $('#civicrm-menu').height() || 0; | |
904 | ||
905 | $('html') | |
906 | // stop any other animations that might be happening... | |
907 | .stop() | |
908 | // gracefully slide the user to the top of the wizard | |
909 | .animate({scrollTop: topOfWizard - heightOfMenu}, 1000); | |
910 | }); | |
c4991710 | 911 | } |
030dce01 TO |
912 | }; |
913 | }) | |
914 | ||
6717e4b9 TO |
915 | // Use this to add extra markup to wizard |
916 | .directive('crmUiWizardButtons', function() { | |
030dce01 | 917 | return { |
6717e4b9 TO |
918 | require: '^crmUiWizard', |
919 | restrict: 'EA', | |
920 | scope: {}, | |
921 | template: '<span ng-transclude></span>', | |
030dce01 | 922 | transclude: true, |
6717e4b9 TO |
923 | link: function (scope, element, attrs, crmUiWizardCtrl) { |
924 | var realButtonsEl = $(element).closest('.crm-wizard').find('.crm-wizard-buttons'); | |
925 | $(element).appendTo(realButtonsEl); | |
926 | } | |
030dce01 TO |
927 | }; |
928 | }) | |
929 | ||
77ec5a8d | 930 | // Example for Font Awesome: <button crm-icon="fa-check">Save</button> |
4bc72ff2 | 931 | // Example for jQuery UI (deprecated): <button crm-icon="fa-check">Save</button> |
39f4f54f CW |
932 | .directive('crmIcon', function() { |
933 | return { | |
934 | restrict: 'EA', | |
39f4f54f | 935 | link: function (scope, element, attrs) { |
cf500087 CW |
936 | if (element.is('[crm-ui-tab]')) { |
937 | // handled in crmUiTab ctrl | |
938 | return; | |
939 | } | |
aee84611 | 940 | if (attrs.crmIcon.substring(0,3) == 'fa-') { |
13a3d214 | 941 | $(element).prepend('<i class="crm-i ' + attrs.crmIcon + '" aria-hidden="true"></i> '); |
aee84611 AH |
942 | } |
943 | else { | |
944 | $(element).prepend('<span class="icon ui-icon-' + attrs.crmIcon + '"></span> '); | |
945 | } | |
39f4f54f CW |
946 | if ($(element).is('button')) { |
947 | $(element).addClass('crm-button'); | |
948 | } | |
949 | } | |
950 | }; | |
951 | }) | |
952 | ||
3f0da451 | 953 | // example: <div crm-ui-wizard-step crm-title="ts('My Title')" ng-form="mySubForm">...content...</div> |
8688b463 TO |
954 | // If there are any conditional steps, then be sure to set a weight explicitly on *all* steps to maintain ordering. |
955 | // example: <div crm-ui-wizard-step="100" crm-title="..." ng-if="...">...content...</div> | |
1302b0a0 | 956 | // example with custom classes: <div crm-ui-wizard-step="100" crm-ui-wizard-step-class="ng-animate-out ...">...content...</div> |
030dce01 | 957 | .directive('crmUiWizardStep', function() { |
8688b463 | 958 | var nextWeight = 1; |
030dce01 | 959 | return { |
3f0da451 | 960 | require: ['^crmUiWizard', 'form'], |
6717e4b9 | 961 | restrict: 'EA', |
030dce01 | 962 | scope: { |
8688b463 | 963 | crmTitle: '@', // expression, evaluates to a printable string |
37f1d23b TL |
964 | crmUiWizardStep: '@', // int, a weight which determines the ordering of the steps |
965 | crmUiWizardStepClass: '@' // string, A list of classes that will be added to the template | |
030dce01 | 966 | }, |
1302b0a0 | 967 | template: '<div class="crm-wizard-step {{crmUiWizardStepClass}}" ng-show="selected" ng-transclude/></div>', |
030dce01 | 968 | transclude: true, |
3f0da451 TO |
969 | link: function (scope, element, attrs, ctrls) { |
970 | var crmUiWizardCtrl = ctrls[0], form = ctrls[1]; | |
8688b463 TO |
971 | if (scope.crmUiWizardStep) { |
972 | scope.crmUiWizardStep = parseInt(scope.crmUiWizardStep); | |
973 | } else { | |
974 | scope.crmUiWizardStep = nextWeight++; | |
975 | } | |
3f0da451 TO |
976 | scope.isStepValid = function() { |
977 | return form.$valid; | |
978 | }; | |
6717e4b9 | 979 | crmUiWizardCtrl.add(scope); |
e72fdb99 | 980 | scope.$on('$destroy', function(){ |
8688b463 TO |
981 | crmUiWizardCtrl.remove(scope); |
982 | }); | |
6717e4b9 | 983 | } |
030dce01 TO |
984 | }; |
985 | }) | |
986 | ||
5fb5b3cf | 987 | // Example: <button crm-confirm="{message: ts('Are you sure you want to continue?')}" on-yes="frobnicate(123)">Frobincate</button> |
4b8c8b42 | 988 | // Example: <button crm-confirm="{type: 'disable', obj: myObject}" on-yes="myObject.is_active=0; myObject.save()">Disable</button> |
6a6d0f41 TO |
989 | // Example: <button crm-confirm="{templateUrl: '~/path/to/view.html', export: {foo: bar}}" on-yes="frobnicate(123)">Frobincate</button> |
990 | .directive('crmConfirm', function ($compile, $rootScope, $templateRequest, $q) { | |
88fcc9f1 | 991 | // Helpers to calculate default options for CRM.confirm() |
4b8c8b42 TO |
992 | var defaultFuncs = { |
993 | 'disable': function (options) { | |
994 | return { | |
995 | message: ts('Are you sure you want to disable this?'), | |
996 | options: {no: ts('Cancel'), yes: ts('Disable')}, | |
997 | width: 300, | |
998 | title: ts('Disable %1?', { | |
999 | 1: options.obj.title || options.obj.label || options.obj.name || ts('the record') | |
1000 | }) | |
1001 | }; | |
1002 | }, | |
470a458e TO |
1003 | 'revert': function (options) { |
1004 | return { | |
1005 | message: ts('Are you sure you want to revert this?'), | |
1006 | options: {no: ts('Cancel'), yes: ts('Revert')}, | |
1007 | width: 300, | |
1008 | title: ts('Revert %1?', { | |
1009 | 1: options.obj.title || options.obj.label || options.obj.name || ts('the record') | |
1010 | }) | |
1011 | }; | |
1012 | }, | |
4b8c8b42 TO |
1013 | 'delete': function (options) { |
1014 | return { | |
1015 | message: ts('Are you sure you want to delete this?'), | |
1016 | options: {no: ts('Cancel'), yes: ts('Delete')}, | |
1017 | width: 300, | |
1018 | title: ts('Delete %1?', { | |
1019 | 1: options.obj.title || options.obj.label || options.obj.name || ts('the record') | |
1020 | }) | |
1021 | }; | |
1022 | } | |
1023 | }; | |
6a6d0f41 | 1024 | var confirmCount = 0; |
4b8c8b42 | 1025 | return { |
4b8c8b42 TO |
1026 | link: function (scope, element, attrs) { |
1027 | $(element).click(function () { | |
f2bad133 | 1028 | var options = scope.$eval(attrs.crmConfirm); |
b8603a6d CW |
1029 | if (attrs.title && !options.title) { |
1030 | options.title = attrs.title; | |
1031 | } | |
4b8c8b42 | 1032 | var defaults = (options.type) ? defaultFuncs[options.type](options) : {}; |
6a6d0f41 TO |
1033 | |
1034 | var tpl = null, stubId = null; | |
1035 | if (!options.message) { | |
1036 | if (options.templateUrl) { | |
1037 | tpl = $templateRequest(options.templateUrl); | |
1038 | } | |
1039 | else if (options.template) { | |
1040 | tpl = options.template; | |
1041 | } | |
1042 | if (tpl) { | |
1043 | stubId = 'crmUiConfirm_' + (++confirmCount); | |
1044 | options.message = '<div id="' + stubId + '"></div>'; | |
1045 | } | |
1046 | } | |
1047 | ||
4b8c8b42 | 1048 | CRM.confirm(_.extend(defaults, options)) |
6a6d0f41 TO |
1049 | .on('crmConfirm:yes', function() { scope.$apply(attrs.onYes); }) |
1050 | .on('crmConfirm:no', function() { scope.$apply(attrs.onNo); }); | |
1051 | ||
1052 | if (tpl && stubId) { | |
1053 | $q.when(tpl, function(html) { | |
1054 | var scope = options.scope || $rootScope.$new(); | |
1055 | if (options.export) { | |
1056 | angular.extend(scope, options.export); | |
1057 | } | |
1058 | var linker = $compile(html); | |
1059 | $('#' + stubId).append($(linker(scope))); | |
1060 | }); | |
1061 | } | |
4b8c8b42 TO |
1062 | }); |
1063 | } | |
1064 | }; | |
1065 | }) | |
835fcb5e | 1066 | |
826f5ace | 1067 | // Sets document title & page title; attempts to override CMS title markup for the latter |
835fcb5e | 1068 | // WARNING: Use only once per route! |
6968b473 FG |
1069 | // WARNING: This directive works only if your AngularJS base page does not |
1070 | // set a custom title (i.e., it has an initial title of "CiviCRM"). See the | |
1071 | // global variables pageTitle and documentTitle. | |
826f5ace | 1072 | // Example (same title for both): <h1 crm-page-title>{{ts('Hello')}}</h1> |
13a3d214 | 1073 | // Example (separate document title): <h1 crm-document-title="ts('Hello')" crm-page-title><i class="crm-i fa-flag" aria-hidden="true"></i>{{ts('Hello')}}</h1> |
826f5ace | 1074 | .directive('crmPageTitle', function($timeout) { |
835fcb5e | 1075 | return { |
826f5ace CW |
1076 | scope: { |
1077 | crmDocumentTitle: '=' | |
1078 | }, | |
835fcb5e CW |
1079 | link: function(scope, $el, attrs) { |
1080 | function update() { | |
1081 | $timeout(function() { | |
826f5ace | 1082 | var newPageTitle = _.trim($el.html()), |
3a603b78 | 1083 | newDocumentTitle = scope.crmDocumentTitle || $el.text(); |
826f5ace | 1084 | document.title = $('title').text().replace(documentTitle, newDocumentTitle); |
835fcb5e CW |
1085 | // If the CMS has already added title markup to the page, use it |
1086 | $('h1').not('.crm-container h1').each(function() { | |
826f5ace | 1087 | if (_.trim($(this).html()) === pageTitle) { |
1d924612 | 1088 | $(this).addClass('crm-page-title').html(newPageTitle); |
835fcb5e CW |
1089 | $el.hide(); |
1090 | } | |
1091 | }); | |
826f5ace CW |
1092 | pageTitle = newPageTitle; |
1093 | documentTitle = newDocumentTitle; | |
835fcb5e CW |
1094 | }); |
1095 | } | |
1096 | ||
826f5ace | 1097 | scope.$watch(function() {return scope.crmDocumentTitle + $el.html();}, update); |
835fcb5e | 1098 | } |
7565f24a | 1099 | }; |
835fcb5e CW |
1100 | }) |
1101 | ||
9eed04d9 CW |
1102 | // Editable text using ngModel & html5 contenteditable |
1103 | // Usage: <span crm-ui-editable ng-model="my.data">{{ my.data }}</span> | |
1104 | .directive("crmUiEditable", function() { | |
1105 | return { | |
1106 | restrict: "A", | |
1107 | require: "ngModel", | |
1108 | scope: { | |
1109 | defaultValue: '=' | |
1110 | }, | |
1111 | link: function(scope, element, attrs, ngModel) { | |
1112 | var ts = CRM.ts(); | |
1113 | ||
1114 | function read() { | |
1115 | var htmlVal = element.html(); | |
1116 | if (!htmlVal) { | |
1117 | htmlVal = scope.defaultValue || ''; | |
1118 | element.text(htmlVal); | |
1119 | } | |
1120 | ngModel.$setViewValue(htmlVal); | |
1121 | } | |
1122 | ||
1123 | ngModel.$render = function() { | |
1124 | element.text(ngModel.$viewValue || scope.defaultValue || ''); | |
1125 | }; | |
1126 | ||
1127 | // Special handling for enter and escape keys | |
1128 | element.on('keydown', function(e) { | |
1129 | // Enter: prevent line break and save | |
1130 | if (e.which === 13) { | |
1131 | e.preventDefault(); | |
1132 | element.blur(); | |
1133 | } | |
1134 | // Escape: undo | |
1135 | if (e.which === 27) { | |
1136 | element.text(ngModel.$viewValue || scope.defaultValue || ''); | |
1137 | element.blur(); | |
1138 | } | |
1139 | }); | |
1140 | ||
1141 | element.on("blur change", function() { | |
1142 | scope.$apply(read); | |
1143 | }); | |
1144 | ||
1145 | element.attr('contenteditable', 'true').addClass('crm-editable-enabled'); | |
1146 | } | |
1147 | }; | |
1148 | }) | |
1149 | ||
02308c07 TO |
1150 | .run(function($rootScope, $location) { |
1151 | /// Example: <button ng-click="goto('home')">Go home!</button> | |
1152 | $rootScope.goto = function(path) { | |
1153 | $location.path(path); | |
1154 | }; | |
4b8c8b42 | 1155 | // useful for debugging: $rootScope.log = console.log || function() {}; |
9eed04d9 | 1156 | }); |
685acae4 | 1157 | |
5fb5b3cf | 1158 | })(angular, CRM.$, CRM._); |