| 1 | /// crmUi: Sundry UI helpers |
| 2 | (function (angular, $, _) { |
| 3 | |
| 4 | var uidCount = 0, |
| 5 | pageTitle = 'CiviCRM', |
| 6 | documentTitle = 'CiviCRM'; |
| 7 | |
| 8 | angular.module('crmUi', CRM.angRequires('crmUi')) |
| 9 | |
| 10 | // example <div crm-ui-accordion crm-title="ts('My Title')" crm-collapsed="true">...content...</div> |
| 11 | // WISHLIST: crmCollapsed should support two-way/continuous binding |
| 12 | .directive('crmUiAccordion', function() { |
| 13 | return { |
| 14 | scope: { |
| 15 | crmUiAccordion: '=' |
| 16 | }, |
| 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>', |
| 18 | transclude: true, |
| 19 | link: function (scope, element, attrs) { |
| 20 | scope.cssClasses = { |
| 21 | 'crm-accordion-wrapper': true, |
| 22 | collapsed: scope.crmUiAccordion.collapsed |
| 23 | }; |
| 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 | }); |
| 32 | } |
| 33 | }; |
| 34 | }) |
| 35 | |
| 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 | |
| 67 | // Simple wrapper around $.crmDatepicker. |
| 68 | // example with no time input: <input crm-ui-datepicker="{time: false}" ng-model="myobj.datefield"/> |
| 69 | // example with custom date format: <input crm-ui-datepicker="{date: 'm/d/y'}" ng-model="myobj.datefield"/> |
| 70 | .directive('crmUiDatepicker', function () { |
| 71 | return { |
| 72 | restrict: 'AE', |
| 73 | require: 'ngModel', |
| 74 | scope: { |
| 75 | crmUiDatepicker: '=' |
| 76 | }, |
| 77 | link: function (scope, element, attrs, ngModel) { |
| 78 | ngModel.$render = function () { |
| 79 | element.val(ngModel.$viewValue).change(); |
| 80 | }; |
| 81 | |
| 82 | element |
| 83 | .crmDatepicker(scope.crmUiDatepicker) |
| 84 | .on('change', function() { |
| 85 | var requiredLength = 19; |
| 86 | if (scope.crmUiDatepicker && scope.crmUiDatepicker.time === false) { |
| 87 | requiredLength = 10; |
| 88 | } |
| 89 | if (scope.crmUiDatepicker && scope.crmUiDatepicker.date === false) { |
| 90 | requiredLength = 8; |
| 91 | } |
| 92 | ngModel.$setValidity('incompleteDateTime', !($(this).val().length && $(this).val().length !== requiredLength)); |
| 93 | }); |
| 94 | } |
| 95 | }; |
| 96 | }) |
| 97 | |
| 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(); |
| 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 ''; |
| 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 | |
| 127 | // Display a field/row in a field list |
| 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> |
| 131 | // example: <div crm-ui-field="{name: 'subform.myfield', title: ts('My Field'), help: hs('help_field_name'), required: true}"> {{mydata}} </div> |
| 132 | .directive('crmUiField', function() { |
| 133 | // Note: When writing new templates, the "label" position is particular. See/patch "var label" below. |
| 134 | var templateUrls = { |
| 135 | default: '~/crmUi/field.html', |
| 136 | checkbox: '~/crmUi/field-cb.html' |
| 137 | }; |
| 138 | |
| 139 | return { |
| 140 | require: '^crmUiIdScope', |
| 141 | restrict: 'EA', |
| 142 | scope: { |
| 143 | // {title, name, help, helpFile} |
| 144 | crmUiField: '=' |
| 145 | }, |
| 146 | templateUrl: function(tElement, tAttrs){ |
| 147 | var layout = tAttrs.crmLayout ? tAttrs.crmLayout : 'default'; |
| 148 | return templateUrls[layout]; |
| 149 | }, |
| 150 | transclude: true, |
| 151 | link: function (scope, element, attrs, crmUiIdCtrl) { |
| 152 | $(element).addClass('crm-section'); |
| 153 | scope.help = null; |
| 154 | scope.$watch('crmUiField', function(crmUiField) { |
| 155 | if (crmUiField && crmUiField.help) { |
| 156 | scope.help = crmUiField.help.clone({}, { |
| 157 | title: crmUiField.title |
| 158 | }); |
| 159 | } |
| 160 | }); |
| 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', |
| 170 | link: { |
| 171 | pre: function (scope, element, attrs, crmUiIdCtrl) { |
| 172 | var id = crmUiIdCtrl.get(attrs.crmUiId); |
| 173 | element.attr('id', id); |
| 174 | } |
| 175 | } |
| 176 | }; |
| 177 | }) |
| 178 | |
| 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() { |
| 190 | CRM.help(this.options.title, {id: this.options.id, file: this.options.file}); |
| 191 | }, |
| 192 | clone: function clone(options, defaults) { |
| 193 | return new FieldHelp(angular.extend({}, defaults, this.options, options)); |
| 194 | } |
| 195 | }); |
| 196 | |
| 197 | // example: var hs = crmUiHelp({file: 'CRM/Foo/Bar'}); |
| 198 | return function(defaults){ |
| 199 | // example: hs('myfield') |
| 200 | // example: hs({id: 'myfield', title: 'Foo Bar', file: 'Whiz/Bang'}) |
| 201 | return function(options) { |
| 202 | if (_.isString(options)) { |
| 203 | options = {id: options}; |
| 204 | } |
| 205 | return new FieldHelp(angular.extend({}, defaults, options)); |
| 206 | }; |
| 207 | }; |
| 208 | }) |
| 209 | |
| 210 | // Display a help icon |
| 211 | // Example: Use a default *.hlp file |
| 212 | // scope.hs = crmUiHelp({file: 'Path/To/Help/File'}); |
| 213 | // HTML: <a crm-ui-help="hs({title:ts('My Field'), id:'my_field'})"> |
| 214 | // Example: Use an explicit *.hlp file |
| 215 | // HTML: <a crm-ui-help="hs({title:ts('My Field'), id:'my_field', file:'CRM/Foo/Bar'})"> |
| 216 | .directive('crmUiHelp', function() { |
| 217 | return { |
| 218 | restrict: 'EA', |
| 219 | link: function(scope, element, attrs) { |
| 220 | setTimeout(function() { |
| 221 | var crmUiHelp = scope.$eval(attrs.crmUiHelp); |
| 222 | var title = crmUiHelp && crmUiHelp.get('title') ? ts('%1 Help', {1: crmUiHelp.get('title')}) : ts('Help'); |
| 223 | element.attr('title', title); |
| 224 | }, 50); |
| 225 | |
| 226 | element |
| 227 | .addClass('helpicon') |
| 228 | .attr('href', '#') |
| 229 | .on('click', function(e) { |
| 230 | e.preventDefault(); |
| 231 | scope.$eval(attrs.crmUiHelp).open(); |
| 232 | }); |
| 233 | } |
| 234 | }; |
| 235 | }) |
| 236 | |
| 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 = {}; |
| 247 | |
| 248 | if (!attrs.crmUiFor) return; |
| 249 | |
| 250 | var id = crmUiIdCtrl.get(attrs.crmUiFor); |
| 251 | element.attr('for', id); |
| 252 | var ngModel = null; |
| 253 | |
| 254 | var updateCss = function () { |
| 255 | scope.cssClasses['crm-error'] = !ngModel.$valid && !ngModel.$pristine; |
| 256 | }; |
| 257 | |
| 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); |
| 262 | if (input.length === 0 && !attrs.crmUiForceRequired) { |
| 263 | if (retries) { |
| 264 | $timeout(function(){ |
| 265 | init(retries-1, retryDelay); |
| 266 | }, retryDelay); |
| 267 | } |
| 268 | return; |
| 269 | } |
| 270 | |
| 271 | if (attrs.crmUiForceRequired) { |
| 272 | scope.crmIsRequired = true; |
| 273 | return; |
| 274 | } |
| 275 | |
| 276 | var tgtScope = scope;//.$parent; |
| 277 | if (attrs.crmDepth) { |
| 278 | for (var i = attrs.crmDepth; i > 0; i--) { |
| 279 | tgtScope = tgtScope.$parent; |
| 280 | } |
| 281 | } |
| 282 | |
| 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 { |
| 290 | scope.crmIsRequired = input.prop('required'); |
| 291 | } |
| 292 | |
| 293 | ngModel = $parse(attrs.crmUiFor)(tgtScope); |
| 294 | if (ngModel) { |
| 295 | ngModel.$viewChangeListeners.push(updateCss); |
| 296 | } |
| 297 | }; |
| 298 | |
| 299 | $timeout(function(){ |
| 300 | init(3, 100); |
| 301 | }); |
| 302 | } |
| 303 | }; |
| 304 | }) |
| 305 | |
| 306 | // Define a scope in which a name like "subform.foo" maps to a unique ID. |
| 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]; |
| 320 | }; |
| 321 | }, |
| 322 | link: function (scope, element, attrs) {} |
| 323 | }; |
| 324 | }) |
| 325 | |
| 326 | // Display an HTML blurb inside an IFRAME. |
| 327 | // example: <iframe crm-ui-iframe="getHtmlContent()"></iframe> |
| 328 | // example: <iframe crm-ui-iframe crm-ui-iframe-src="getUrl()"></iframe> |
| 329 | .directive('crmUiIframe', function ($parse) { |
| 330 | return { |
| 331 | scope: { |
| 332 | crmUiIframeSrc: '@', // expression which evaluates to a URL |
| 333 | crmUiIframe: '@' // expression which evaluates to HTML content |
| 334 | }, |
| 335 | link: function (scope, elm, attrs) { |
| 336 | var iframe = $(elm)[0]; |
| 337 | iframe.setAttribute('width', '100%'); |
| 338 | iframe.setAttribute('height', '250px'); |
| 339 | iframe.setAttribute('frameborder', '0'); |
| 340 | |
| 341 | var refresh = function () { |
| 342 | if (attrs.crmUiIframeSrc) { |
| 343 | iframe.setAttribute('src', scope.$parent.$eval(attrs.crmUiIframeSrc)); |
| 344 | } |
| 345 | else { |
| 346 | var iframeHtml = scope.$parent.$eval(attrs.crmUiIframe); |
| 347 | |
| 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 | } |
| 360 | }; |
| 361 | |
| 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 | |
| 368 | $(elm).parent().on('dialogresize', function(e, ui) { |
| 369 | iframe.setAttribute('class', 'resized'); |
| 370 | }); |
| 371 | |
| 372 | scope.$parent.$watch(attrs.crmUiIframe, refresh); |
| 373 | } |
| 374 | }; |
| 375 | }) |
| 376 | |
| 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> |
| 380 | .directive('crmUiInsertRx', function() { |
| 381 | return { |
| 382 | link: function(scope, element, attrs) { |
| 383 | scope.$on(attrs.crmUiInsertRx, function(e, tokenName) { |
| 384 | CRM.wysiwyg.insert(element, tokenName); |
| 385 | $(element).select2('close').select2('val', ''); |
| 386 | CRM.wysiwyg.focus(element); |
| 387 | }); |
| 388 | } |
| 389 | }; |
| 390 | }) |
| 391 | |
| 392 | // Define a rich text editor. |
| 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) { |
| 395 | return { |
| 396 | require: '?ngModel', |
| 397 | link: function (scope, elm, attr, ngModel) { |
| 398 | |
| 399 | var editor = CRM.wysiwyg.create(elm); |
| 400 | if (!ngModel) { |
| 401 | return; |
| 402 | } |
| 403 | |
| 404 | if (attr.ngBlur) { |
| 405 | $(elm).on('blur', function() { |
| 406 | $timeout(function() { |
| 407 | scope.$eval(attr.ngBlur); |
| 408 | }); |
| 409 | }); |
| 410 | } |
| 411 | |
| 412 | ngModel.$render = function(value) { |
| 413 | editor.done(function() { |
| 414 | CRM.wysiwyg.setVal(elm, ngModel.$viewValue || ''); |
| 415 | }); |
| 416 | }; |
| 417 | } |
| 418 | }; |
| 419 | }) |
| 420 | |
| 421 | // Display a lock icon (based on a boolean). |
| 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; |
| 431 | }; |
| 432 | f.assign = function (scope, value) { |
| 433 | // ignore changes |
| 434 | }; |
| 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) { |
| 446 | var binding = parse(attrs.binding, true); |
| 447 | var titleLocked = parse(attrs.titleLocked, ts('Locked')); |
| 448 | var titleUnlocked = parse(attrs.titleUnlocked, ts('Unlocked')); |
| 449 | |
| 450 | $(element).addClass('crm-i lock-button'); |
| 451 | var refresh = function () { |
| 452 | var locked = binding(scope); |
| 453 | if (locked) { |
| 454 | $(element) |
| 455 | .removeClass('fa-unlock') |
| 456 | .addClass('fa-lock') |
| 457 | .prop('title', titleLocked(scope)) |
| 458 | ; |
| 459 | } |
| 460 | else { |
| 461 | $(element) |
| 462 | .removeClass('fa-lock') |
| 463 | .addClass('fa-unlock') |
| 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 | }) |
| 483 | |
| 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(){ |
| 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 | |
| 587 | // Display a fancy SELECT (based on select2). |
| 588 | // usage: <select crm-ui-select="{placeholder:'Something',allowClear:true,...}" ng-model="myobj.field"><option...></select> |
| 589 | .directive('crmUiSelect', function ($parse, $timeout) { |
| 590 | return { |
| 591 | require: '?ngModel', |
| 592 | priority: 1, |
| 593 | scope: { |
| 594 | crmUiSelect: '=' |
| 595 | }, |
| 596 | link: function (scope, element, attrs, ngModel) { |
| 597 | // In cases where UI initiates update, there may be an extra |
| 598 | // call to refreshUI, but it doesn't create a cycle. |
| 599 | |
| 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 |
| 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); |
| 611 | }); |
| 612 | }; |
| 613 | } |
| 614 | function refreshModel() { |
| 615 | var oldValue = ngModel.$viewValue, newValue = element.select2('val'); |
| 616 | if (oldValue != newValue) { |
| 617 | scope.$parent.$apply(function () { |
| 618 | ngModel.$setViewValue(newValue); |
| 619 | }); |
| 620 | } |
| 621 | } |
| 622 | |
| 623 | function init() { |
| 624 | // TODO watch select2-options |
| 625 | element.crmSelect2(scope.crmUiSelect || {}); |
| 626 | if (ngModel) { |
| 627 | element.on('change', refreshModel); |
| 628 | } |
| 629 | } |
| 630 | |
| 631 | init(); |
| 632 | } |
| 633 | }; |
| 634 | }) |
| 635 | |
| 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 () { |
| 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.$apply(function() { |
| 647 | scope.$eval(attrs.onCrmUiSelect, {selection: e.val}); |
| 648 | }); |
| 649 | }); |
| 650 | } |
| 651 | }; |
| 652 | }) |
| 653 | |
| 654 | // Render a crmEntityRef widget |
| 655 | // usage: <input crm-entityref="{entity: 'Contact', select: {allowClear:true}}" ng-model="myobj.field" /> |
| 656 | .directive('crmEntityref', function ($parse, $timeout) { |
| 657 | return { |
| 658 | require: '?ngModel', |
| 659 | scope: { |
| 660 | crmEntityref: '=' |
| 661 | }, |
| 662 | link: function (scope, element, attrs, ngModel) { |
| 663 | // In cases where UI initiates update, there may be an extra |
| 664 | // call to refreshUI, but it doesn't create a cycle. |
| 665 | |
| 666 | ngModel.$render = function () { |
| 667 | $timeout(function () { |
| 668 | // ex: msg_template_id adds new item then selects it; use $timeout to ensure that |
| 669 | // new item is added before selection is made |
| 670 | var newVal = _.cloneDeep(ngModel.$modelValue); |
| 671 | // Fix possible data-type mismatch |
| 672 | if (typeof newVal === 'string' && element.select2('container').hasClass('select2-container-multi')) { |
| 673 | newVal = newVal.length ? newVal.split(',') : []; |
| 674 | } |
| 675 | element.select2('val', newVal); |
| 676 | }); |
| 677 | }; |
| 678 | function refreshModel() { |
| 679 | var oldValue = ngModel.$viewValue, newValue = element.select2('val'); |
| 680 | if (oldValue != newValue) { |
| 681 | scope.$parent.$apply(function () { |
| 682 | ngModel.$setViewValue(newValue); |
| 683 | }); |
| 684 | } |
| 685 | } |
| 686 | |
| 687 | function init() { |
| 688 | // TODO can we infer "entity" from model? |
| 689 | element.crmEntityRef(scope.crmEntityref || {}); |
| 690 | element.on('change', refreshModel); |
| 691 | $timeout(ngModel.$render); |
| 692 | } |
| 693 | |
| 694 | init(); |
| 695 | } |
| 696 | }; |
| 697 | }) |
| 698 | |
| 699 | // validate multiple email text |
| 700 | // usage: <input crm-multiple-email type="text" ng-model="myobj.field" /> |
| 701 | .directive('crmMultipleEmail', function ($parse, $timeout) { |
| 702 | return { |
| 703 | require: 'ngModel', |
| 704 | link: function(scope, element, attrs, ctrl) { |
| 705 | ctrl.$parsers.unshift(function(viewValue) { |
| 706 | // if empty value provided simply bypass validation |
| 707 | if (_.isEmpty(viewValue)) { |
| 708 | ctrl.$setValidity('crmMultipleEmail', true); |
| 709 | return viewValue; |
| 710 | } |
| 711 | |
| 712 | // split email string on basis of comma |
| 713 | var emails = viewValue.split(','); |
| 714 | // regex pattern for single email |
| 715 | var emailRegex = /\S+@\S+\.\S+/; |
| 716 | |
| 717 | var validityArr = emails.map(function(str){ |
| 718 | return emailRegex.test(str.trim()); |
| 719 | }); |
| 720 | |
| 721 | if ($.inArray(false, validityArr) > -1) { |
| 722 | ctrl.$setValidity('crmMultipleEmail', false); |
| 723 | } else { |
| 724 | ctrl.$setValidity('crmMultipleEmail', true); |
| 725 | } |
| 726 | return viewValue; |
| 727 | }); |
| 728 | } |
| 729 | }; |
| 730 | }) |
| 731 | // example <div crm-ui-tab id="tab-1" crm-title="ts('My Title')" count="3">...content...</div> |
| 732 | // WISHLIST: use a full Angular component instead of an incomplete jQuery wrapper |
| 733 | .directive('crmUiTab', function($parse) { |
| 734 | return { |
| 735 | require: '^crmUiTabSet', |
| 736 | restrict: 'EA', |
| 737 | scope: { |
| 738 | crmTitle: '@', |
| 739 | crmIcon: '@', |
| 740 | count: '@', |
| 741 | id: '@' |
| 742 | }, |
| 743 | template: '<div ng-transclude></div>', |
| 744 | transclude: true, |
| 745 | link: function (scope, element, attrs, crmUiTabSetCtrl) { |
| 746 | crmUiTabSetCtrl.add(scope); |
| 747 | } |
| 748 | }; |
| 749 | }) |
| 750 | |
| 751 | // 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> |
| 752 | .directive('crmUiTabSet', function() { |
| 753 | return { |
| 754 | restrict: 'EA', |
| 755 | scope: { |
| 756 | crmUiTabSet: '@', |
| 757 | tabSetOptions: '@' |
| 758 | }, |
| 759 | templateUrl: '~/crmUi/tabset.html', |
| 760 | transclude: true, |
| 761 | controllerAs: 'crmUiTabSetCtrl', |
| 762 | controller: function($scope, $parse) { |
| 763 | var tabs = $scope.tabs = []; // array<$scope> |
| 764 | this.add = function(tab) { |
| 765 | if (!tab.id) throw "Tab is missing 'id'"; |
| 766 | tabs.push(tab); |
| 767 | }; |
| 768 | }, |
| 769 | link: function (scope, element, attrs) {} |
| 770 | }; |
| 771 | }) |
| 772 | |
| 773 | // Generic, field-independent form validator. |
| 774 | // example: <span ng-model="placeholder" crm-ui-validate="foo && bar || whiz" /> |
| 775 | // example: <span ng-model="placeholder" crm-ui-validate="foo && bar || whiz" crm-ui-validate-name="myError" /> |
| 776 | .directive('crmUiValidate', function() { |
| 777 | return { |
| 778 | restrict: 'EA', |
| 779 | require: 'ngModel', |
| 780 | link: function(scope, element, attrs, ngModel) { |
| 781 | var validationKey = attrs.crmUiValidateName ? attrs.crmUiValidateName : 'crmUiValidate'; |
| 782 | scope.$watch(attrs.crmUiValidate, function(newValue){ |
| 783 | ngModel.$setValidity(validationKey, !!newValue); |
| 784 | }); |
| 785 | } |
| 786 | }; |
| 787 | }) |
| 788 | |
| 789 | // like ng-show, but hides/displays elements using "visibility" which maintains positioning |
| 790 | // example <div crm-ui-visible="false">...content...</div> |
| 791 | .directive('crmUiVisible', function($parse) { |
| 792 | return { |
| 793 | restrict: 'EA', |
| 794 | scope: { |
| 795 | crmUiVisible: '@' |
| 796 | }, |
| 797 | link: function (scope, element, attrs) { |
| 798 | var model = $parse(attrs.crmUiVisible); |
| 799 | function updatecChildren() { |
| 800 | element.css('visibility', model(scope.$parent) ? 'inherit' : 'hidden'); |
| 801 | } |
| 802 | updatecChildren(); |
| 803 | scope.$parent.$watch(attrs.crmUiVisible, updatecChildren); |
| 804 | } |
| 805 | }; |
| 806 | }) |
| 807 | |
| 808 | // 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> |
| 809 | // example with custom nav classes: <div crm-ui-wizard crm-ui-wizard-nav-class="ng-animate-out ...">...</div> |
| 810 | // Note: "myWizardCtrl" has various actions/properties like next() and $first(). |
| 811 | // WISHLIST: Allow each step to determine if it is "complete" / "valid" / "selectable" |
| 812 | // WISHLIST: Allow each step to enable/disable (show/hide) itself |
| 813 | .directive('crmUiWizard', function() { |
| 814 | return { |
| 815 | restrict: 'EA', |
| 816 | scope: { |
| 817 | crmUiWizard: '@', |
| 818 | crmUiWizardNavClass: '@' // string, A list of classes that will be added to the nav items |
| 819 | }, |
| 820 | templateUrl: '~/crmUi/wizard.html', |
| 821 | transclude: true, |
| 822 | controllerAs: 'crmUiWizardCtrl', |
| 823 | controller: function($scope, $parse) { |
| 824 | var steps = $scope.steps = []; // array<$scope> |
| 825 | var crmUiWizardCtrl = this; |
| 826 | var maxVisited = 0; |
| 827 | var selectedIndex = null; |
| 828 | |
| 829 | var findIndex = function() { |
| 830 | var found = null; |
| 831 | angular.forEach(steps, function(step, stepKey) { |
| 832 | if (step.selected) found = stepKey; |
| 833 | }); |
| 834 | return found; |
| 835 | }; |
| 836 | |
| 837 | /// @return int the index of the current step |
| 838 | this.$index = function() { return selectedIndex; }; |
| 839 | /// @return bool whether the currentstep is first |
| 840 | this.$first = function() { return this.$index() === 0; }; |
| 841 | /// @return bool whether the current step is last |
| 842 | this.$last = function() { return this.$index() === steps.length -1; }; |
| 843 | this.$maxVisit = function() { return maxVisited; }; |
| 844 | this.$validStep = function() { |
| 845 | return steps[selectedIndex] && steps[selectedIndex].isStepValid(); |
| 846 | }; |
| 847 | this.iconFor = function(index) { |
| 848 | if (index < this.$index()) return 'crm-i fa-check'; |
| 849 | if (index === this.$index()) return 'crm-i fa-angle-double-right'; |
| 850 | return ''; |
| 851 | }; |
| 852 | this.isSelectable = function(step) { |
| 853 | if (step.selected) return false; |
| 854 | return this.$validStep(); |
| 855 | }; |
| 856 | |
| 857 | /*** @param Object step the $scope of the step */ |
| 858 | this.select = function(step) { |
| 859 | angular.forEach(steps, function(otherStep, otherKey) { |
| 860 | otherStep.selected = (otherStep === step); |
| 861 | if (otherStep === step && maxVisited < otherKey) maxVisited = otherKey; |
| 862 | }); |
| 863 | selectedIndex = findIndex(); |
| 864 | }; |
| 865 | /*** @param Object step the $scope of the step */ |
| 866 | this.add = function(step) { |
| 867 | if (steps.length === 0) { |
| 868 | step.selected = true; |
| 869 | selectedIndex = 0; |
| 870 | } |
| 871 | steps.push(step); |
| 872 | steps.sort(function(a,b){ |
| 873 | return a.crmUiWizardStep - b.crmUiWizardStep; |
| 874 | }); |
| 875 | selectedIndex = findIndex(); |
| 876 | }; |
| 877 | this.remove = function(step) { |
| 878 | var key = null; |
| 879 | angular.forEach(steps, function(otherStep, otherKey) { |
| 880 | if (otherStep === step) key = otherKey; |
| 881 | }); |
| 882 | if (key !== null) { |
| 883 | steps.splice(key, 1); |
| 884 | } |
| 885 | }; |
| 886 | this.goto = function(index) { |
| 887 | if (index < 0) index = 0; |
| 888 | if (index >= steps.length) index = steps.length-1; |
| 889 | this.select(steps[index]); |
| 890 | }; |
| 891 | this.previous = function() { this.goto(this.$index()-1); }; |
| 892 | this.next = function() { this.goto(this.$index()+1); }; |
| 893 | if ($scope.crmUiWizard) { |
| 894 | $parse($scope.crmUiWizard).assign($scope.$parent, this); |
| 895 | } |
| 896 | }, |
| 897 | link: function (scope, element, attrs) { |
| 898 | scope.ts = CRM.ts(null); |
| 899 | |
| 900 | element.find('.crm-wizard-buttons button[ng-click^=crmUiWizardCtrl]').click(function () { |
| 901 | // These values are captured inside the click handler to ensure the |
| 902 | // positions/sizes of the elements are captured at the time of the |
| 903 | // click vs. at the time this directive is initialized. |
| 904 | var topOfWizard = element.offset().top; |
| 905 | var heightOfMenu = $('#civicrm-menu').height() || 0; |
| 906 | |
| 907 | $('html') |
| 908 | // stop any other animations that might be happening... |
| 909 | .stop() |
| 910 | // gracefully slide the user to the top of the wizard |
| 911 | .animate({scrollTop: topOfWizard - heightOfMenu}, 1000); |
| 912 | }); |
| 913 | } |
| 914 | }; |
| 915 | }) |
| 916 | |
| 917 | // Use this to add extra markup to wizard |
| 918 | .directive('crmUiWizardButtons', function() { |
| 919 | return { |
| 920 | require: '^crmUiWizard', |
| 921 | restrict: 'EA', |
| 922 | scope: {}, |
| 923 | template: '<span ng-transclude></span>', |
| 924 | transclude: true, |
| 925 | link: function (scope, element, attrs, crmUiWizardCtrl) { |
| 926 | var realButtonsEl = $(element).closest('.crm-wizard').find('.crm-wizard-buttons'); |
| 927 | $(element).appendTo(realButtonsEl); |
| 928 | } |
| 929 | }; |
| 930 | }) |
| 931 | |
| 932 | // Example for Font Awesome: <button crm-icon="fa-check">Save</button> |
| 933 | // Example for jQuery UI (deprecated): <button crm-icon="fa-check">Save</button> |
| 934 | .directive('crmIcon', function() { |
| 935 | return { |
| 936 | restrict: 'EA', |
| 937 | link: function (scope, element, attrs) { |
| 938 | if (element.is('[crm-ui-tab]')) { |
| 939 | // handled in crmUiTab ctrl |
| 940 | return; |
| 941 | } |
| 942 | if (attrs.crmIcon.substring(0,3) == 'fa-') { |
| 943 | $(element).prepend('<i class="crm-i ' + attrs.crmIcon + '" aria-hidden="true"></i> '); |
| 944 | } |
| 945 | else { |
| 946 | $(element).prepend('<span class="icon ui-icon-' + attrs.crmIcon + '"></span> '); |
| 947 | } |
| 948 | // Add crm-* class to non-bootstrap buttons |
| 949 | if ($(element).is('button:not(.btn)')) { |
| 950 | $(element).addClass('crm-button'); |
| 951 | } |
| 952 | } |
| 953 | }; |
| 954 | }) |
| 955 | |
| 956 | // example: <div crm-ui-wizard-step crm-title="ts('My Title')" ng-form="mySubForm">...content...</div> |
| 957 | // If there are any conditional steps, then be sure to set a weight explicitly on *all* steps to maintain ordering. |
| 958 | // example: <div crm-ui-wizard-step="100" crm-title="..." ng-if="...">...content...</div> |
| 959 | // example with custom classes: <div crm-ui-wizard-step="100" crm-ui-wizard-step-class="ng-animate-out ...">...content...</div> |
| 960 | .directive('crmUiWizardStep', function() { |
| 961 | var nextWeight = 1; |
| 962 | return { |
| 963 | require: ['^crmUiWizard', 'form'], |
| 964 | restrict: 'EA', |
| 965 | scope: { |
| 966 | crmTitle: '@', // expression, evaluates to a printable string |
| 967 | crmUiWizardStep: '@', // int, a weight which determines the ordering of the steps |
| 968 | crmUiWizardStepClass: '@' // string, A list of classes that will be added to the template |
| 969 | }, |
| 970 | template: '<div class="crm-wizard-step {{crmUiWizardStepClass}}" ng-show="selected" ng-transclude/></div>', |
| 971 | transclude: true, |
| 972 | link: function (scope, element, attrs, ctrls) { |
| 973 | var crmUiWizardCtrl = ctrls[0], form = ctrls[1]; |
| 974 | if (scope.crmUiWizardStep) { |
| 975 | scope.crmUiWizardStep = parseInt(scope.crmUiWizardStep); |
| 976 | } else { |
| 977 | scope.crmUiWizardStep = nextWeight++; |
| 978 | } |
| 979 | scope.isStepValid = function() { |
| 980 | return form.$valid; |
| 981 | }; |
| 982 | crmUiWizardCtrl.add(scope); |
| 983 | scope.$on('$destroy', function(){ |
| 984 | crmUiWizardCtrl.remove(scope); |
| 985 | }); |
| 986 | } |
| 987 | }; |
| 988 | }) |
| 989 | |
| 990 | // Example: <button crm-confirm="{message: ts('Are you sure you want to continue?')}" on-yes="frobnicate(123)">Frobincate</button> |
| 991 | // Example: <button crm-confirm="{type: 'disable', obj: myObject}" on-yes="myObject.is_active=0; myObject.save()">Disable</button> |
| 992 | // Example: <button crm-confirm="{templateUrl: '~/path/to/view.html', export: {foo: bar}}" on-yes="frobnicate(123)">Frobincate</button> |
| 993 | .directive('crmConfirm', function ($compile, $rootScope, $templateRequest, $q) { |
| 994 | // Helpers to calculate default options for CRM.confirm() |
| 995 | var defaultFuncs = { |
| 996 | 'disable': function (options) { |
| 997 | return { |
| 998 | message: ts('Are you sure you want to disable this?'), |
| 999 | options: {no: ts('Cancel'), yes: ts('Disable')}, |
| 1000 | width: 300, |
| 1001 | title: ts('Disable %1?', { |
| 1002 | 1: options.obj.title || options.obj.label || options.obj.name || ts('the record') |
| 1003 | }) |
| 1004 | }; |
| 1005 | }, |
| 1006 | 'revert': function (options) { |
| 1007 | return { |
| 1008 | message: ts('Are you sure you want to revert this?'), |
| 1009 | options: {no: ts('Cancel'), yes: ts('Revert')}, |
| 1010 | width: 300, |
| 1011 | title: ts('Revert %1?', { |
| 1012 | 1: options.obj.title || options.obj.label || options.obj.name || ts('the record') |
| 1013 | }) |
| 1014 | }; |
| 1015 | }, |
| 1016 | 'delete': function (options) { |
| 1017 | return { |
| 1018 | message: ts('Are you sure you want to delete this?'), |
| 1019 | options: {no: ts('Cancel'), yes: ts('Delete')}, |
| 1020 | width: 300, |
| 1021 | title: ts('Delete %1?', { |
| 1022 | 1: options.obj.title || options.obj.label || options.obj.name || ts('the record') |
| 1023 | }) |
| 1024 | }; |
| 1025 | } |
| 1026 | }; |
| 1027 | var confirmCount = 0; |
| 1028 | return { |
| 1029 | link: function (scope, element, attrs) { |
| 1030 | $(element).click(function () { |
| 1031 | var options = scope.$eval(attrs.crmConfirm); |
| 1032 | if (attrs.title && !options.title) { |
| 1033 | options.title = attrs.title; |
| 1034 | } |
| 1035 | var defaults = (options.type) ? defaultFuncs[options.type](options) : {}; |
| 1036 | |
| 1037 | var tpl = null, stubId = null; |
| 1038 | if (!options.message) { |
| 1039 | if (options.templateUrl) { |
| 1040 | tpl = $templateRequest(options.templateUrl); |
| 1041 | } |
| 1042 | else if (options.template) { |
| 1043 | tpl = options.template; |
| 1044 | } |
| 1045 | if (tpl) { |
| 1046 | stubId = 'crmUiConfirm_' + (++confirmCount); |
| 1047 | options.message = '<div id="' + stubId + '"></div>'; |
| 1048 | } |
| 1049 | } |
| 1050 | |
| 1051 | CRM.confirm(_.extend(defaults, options)) |
| 1052 | .on('crmConfirm:yes', function() { scope.$apply(attrs.onYes); }) |
| 1053 | .on('crmConfirm:no', function() { scope.$apply(attrs.onNo); }); |
| 1054 | |
| 1055 | if (tpl && stubId) { |
| 1056 | $q.when(tpl, function(html) { |
| 1057 | var scope = options.scope || $rootScope.$new(); |
| 1058 | if (options.export) { |
| 1059 | angular.extend(scope, options.export); |
| 1060 | } |
| 1061 | var linker = $compile(html); |
| 1062 | $('#' + stubId).append($(linker(scope))); |
| 1063 | }); |
| 1064 | } |
| 1065 | }); |
| 1066 | } |
| 1067 | }; |
| 1068 | }) |
| 1069 | |
| 1070 | // Sets document title & page title; attempts to override CMS title markup for the latter |
| 1071 | // WARNING: Use only once per route! |
| 1072 | // WARNING: This directive works only if your AngularJS base page does not |
| 1073 | // set a custom title (i.e., it has an initial title of "CiviCRM"). See the |
| 1074 | // global variables pageTitle and documentTitle. |
| 1075 | // Example (same title for both): <h1 crm-page-title>{{ts('Hello')}}</h1> |
| 1076 | // 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> |
| 1077 | .directive('crmPageTitle', function($timeout) { |
| 1078 | return { |
| 1079 | scope: { |
| 1080 | crmDocumentTitle: '=' |
| 1081 | }, |
| 1082 | link: function(scope, $el, attrs) { |
| 1083 | function update() { |
| 1084 | $timeout(function() { |
| 1085 | var newPageTitle = _.trim($el.html()), |
| 1086 | newDocumentTitle = scope.crmDocumentTitle || $el.text(), |
| 1087 | h1Count = 0; |
| 1088 | document.title = $('title').text().replace(documentTitle, newDocumentTitle); |
| 1089 | // If the CMS has already added title markup to the page, use it |
| 1090 | $('h1').not('.crm-container h1').each(function() { |
| 1091 | if ($(this).hasClass('crm-page-title') || _.trim($(this).html()) === pageTitle) { |
| 1092 | $(this).addClass('crm-page-title').html(newPageTitle); |
| 1093 | $el.hide(); |
| 1094 | ++h1Count; |
| 1095 | } |
| 1096 | }); |
| 1097 | if (!h1Count) { |
| 1098 | $el.show(); |
| 1099 | } |
| 1100 | pageTitle = newPageTitle; |
| 1101 | documentTitle = newDocumentTitle; |
| 1102 | }); |
| 1103 | } |
| 1104 | |
| 1105 | scope.$watch(function() {return scope.crmDocumentTitle + $el.html();}, update); |
| 1106 | } |
| 1107 | }; |
| 1108 | }) |
| 1109 | |
| 1110 | // Editable text using ngModel & html5 contenteditable |
| 1111 | // Usage: <span crm-ui-editable ng-model="my.data">{{ my.data }}</span> |
| 1112 | .directive("crmUiEditable", function() { |
| 1113 | return { |
| 1114 | restrict: "A", |
| 1115 | require: "ngModel", |
| 1116 | scope: { |
| 1117 | defaultValue: '=' |
| 1118 | }, |
| 1119 | link: function(scope, element, attrs, ngModel) { |
| 1120 | var ts = CRM.ts(); |
| 1121 | |
| 1122 | function read() { |
| 1123 | var htmlVal = element.html(); |
| 1124 | if (!htmlVal) { |
| 1125 | htmlVal = scope.defaultValue || ''; |
| 1126 | element.text(htmlVal); |
| 1127 | } |
| 1128 | ngModel.$setViewValue(htmlVal); |
| 1129 | } |
| 1130 | |
| 1131 | ngModel.$render = function() { |
| 1132 | element.text(ngModel.$viewValue || scope.defaultValue || ''); |
| 1133 | }; |
| 1134 | |
| 1135 | // Special handling for enter and escape keys |
| 1136 | element.on('keydown', function(e) { |
| 1137 | // Enter: prevent line break and save |
| 1138 | if (e.which === 13) { |
| 1139 | e.preventDefault(); |
| 1140 | element.blur(); |
| 1141 | } |
| 1142 | // Escape: undo |
| 1143 | if (e.which === 27) { |
| 1144 | element.text(ngModel.$viewValue || scope.defaultValue || ''); |
| 1145 | element.blur(); |
| 1146 | } |
| 1147 | }); |
| 1148 | |
| 1149 | element.on("blur change", function() { |
| 1150 | scope.$apply(read); |
| 1151 | }); |
| 1152 | |
| 1153 | element.attr('contenteditable', 'true').addClass('crm-editable-enabled'); |
| 1154 | } |
| 1155 | }; |
| 1156 | }) |
| 1157 | |
| 1158 | .run(function($rootScope, $location) { |
| 1159 | /// Example: <button ng-click="goto('home')">Go home!</button> |
| 1160 | $rootScope.goto = function(path) { |
| 1161 | $location.path(path); |
| 1162 | }; |
| 1163 | // useful for debugging: $rootScope.log = console.log || function() {}; |
| 1164 | }); |
| 1165 | |
| 1166 | })(angular, CRM.$, CRM._); |