Add syntax highligting with a nice palette
This commit is contained in:
@ -29,7 +29,9 @@ duplicate mailing names for our client… and now for you, too!
|
||||
|
||||
Using [`civix`](https://github.com/totten/civix), we set up a new CiviCRM extension for our code:
|
||||
|
||||
civix generate:module mailing
|
||||
```sh
|
||||
$ civix generate:module mailing
|
||||
```
|
||||
|
||||
(We called our extension `mailing`, because our creative director was occupied
|
||||
with an Art at the time)
|
||||
@ -45,20 +47,21 @@ an AngularJS page loads, and you can use a `ChangeSet` to edit an AngularJS
|
||||
template. Because AngularJS templates specify form logic, this also lets you
|
||||
change the validation behaviour. Our hook function looks like this:
|
||||
|
||||
function mailing_civicrm_alterAngular($angular) {
|
||||
$changeSet = \Civi\Angular\ChangeSet::create('mailing_name_unique')
|
||||
->alterHtml('~/crmMailing/BlockSummary.html', function(phpQueryObject $doc) {
|
||||
// name validation
|
||||
$doc->find('.crm-group:has([crm-ui-id="subform.mailingName"])')->attr('ng-controller', 'NameValidateCtrl');
|
||||
$doc->find('[crm-ui-id="subform.mailingName"]')->attr('ng-blur', 'validateName(mailing, \'name\')');
|
||||
$doc->find('[crm-ui-id="subform.mailingName"]')->attr('crm-ui-validate', 'isValid');
|
||||
});
|
||||
```php
|
||||
function mailing_civicrm_alterAngular($angular) {
|
||||
$changeSet = \Civi\Angular\ChangeSet::create('mailing_name_unique')
|
||||
->alterHtml('~/crmMailing/BlockSummary.html', function(phpQueryObject $doc) {
|
||||
// name validation
|
||||
$doc->find('.crm-group:has([crm-ui-id="subform.mailingName"])')->attr('ng-controller', 'NameValidateCtrl');
|
||||
$doc->find('[crm-ui-id="subform.mailingName"]')->attr('ng-blur', 'validateName(mailing, \'name\')');
|
||||
$doc->find('[crm-ui-id="subform.mailingName"]')->attr('crm-ui-validate', 'isValid');
|
||||
});
|
||||
|
||||
$angular->add($changeSet);
|
||||
|
||||
CRM_Core_Resources::singleton()->addScriptFile('mailing', 'js/disallow-duplicate-names.js');
|
||||
}
|
||||
$angular->add($changeSet);
|
||||
|
||||
CRM_Core_Resources::singleton()->addScriptFile('mailing', 'js/disallow-duplicate-names.js');
|
||||
}
|
||||
```
|
||||
|
||||
Setting `crm-ui-validate` to `validateName` directly fired the event _way_ too
|
||||
many times, so instead `validateName` is only called when focus leaves the
|
||||
@ -70,40 +73,42 @@ field, `ng-blur`, which then sets the `isValid` variable that's checked by
|
||||
Then, the code which queries the CiviCRM API to check for mailings with
|
||||
duplicate names:
|
||||
|
||||
var validating = false;
|
||||
|
||||
(function(angular, $) {
|
||||
var crmMailing = angular.module('crmMailing');
|
||||
|
||||
crmMailing.controller('NameValidateCtrl', function($scope) {
|
||||
$scope.isValid = false;
|
||||
|
||||
$scope.validateName = function(mailing, field) {
|
||||
if (!validating) {
|
||||
validating = true;
|
||||
|
||||
CRM.api3('Mailing', 'get', {
|
||||
"sequential": 1,
|
||||
"name": mailing[field],
|
||||
"id": {"!=": mailing.id}
|
||||
}).then(function(result) {
|
||||
// do something with result
|
||||
if (result.count > 0 ) {
|
||||
$scope.isValid = false;
|
||||
CRM.alert(ts('There is already a mailing with this name; sending this one will crash CiviCRM!'));
|
||||
} else {
|
||||
$scope.isValid = true;
|
||||
}
|
||||
}, function(error) {
|
||||
// oops
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
validating = false;
|
||||
}
|
||||
};
|
||||
});
|
||||
})(angular, CRM.$);
|
||||
```javascript
|
||||
var validating = false;
|
||||
|
||||
(function(angular, $) {
|
||||
var crmMailing = angular.module('crmMailing');
|
||||
|
||||
crmMailing.controller('NameValidateCtrl', function($scope) {
|
||||
$scope.isValid = false;
|
||||
|
||||
$scope.validateName = function(mailing, field) {
|
||||
if (!validating) {
|
||||
validating = true;
|
||||
|
||||
CRM.api3('Mailing', 'get', {
|
||||
"sequential": 1,
|
||||
"name": mailing[field],
|
||||
"id": {"!=": mailing.id}
|
||||
}).then(function(result) {
|
||||
// do something with result
|
||||
if (result.count > 0 ) {
|
||||
$scope.isValid = false;
|
||||
CRM.alert(ts('There is already a mailing with this name; sending this one will crash CiviCRM!'));
|
||||
} else {
|
||||
$scope.isValid = true;
|
||||
}
|
||||
}, function(error) {
|
||||
// oops
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
validating = false;
|
||||
}
|
||||
};
|
||||
});
|
||||
})(angular, CRM.$);
|
||||
```
|
||||
|
||||
(saved as `js/disallow-duplicate-names.js`)
|
||||
|
||||
@ -111,7 +116,9 @@ duplicate names:
|
||||
|
||||
Activate the extension, e.g. with `cv`
|
||||
|
||||
$ cv en mailing
|
||||
```
|
||||
$ cv en mailing
|
||||
```
|
||||
|
||||
Now, open a mailing and try to give it the same name as an existing one – you
|
||||
should see the field border turn red, and you'll be prevented from continuing or
|
||||
|
Reference in New Issue
Block a user