js/angular-crmMailingAB/directives.js

   1 (function (angular, $, _) {
   2   var partialUrl = function (relPath) {
   3     return CRM.resourceUrls['civicrm'] + '/partials/crmMailingAB2/' + relPath;
   4   };
   5
   6   // example:
   7   //   scope.myAbtest = new CrmMailingAB();
   8   //   <crm-mailing-ab-block-mailing="{fromAddressA: 1, fromAddressB: 1}" crm-abtest="myAbtest" />
   9   var simpleDirectives = {
  10     crmMailingAbBlockMailing: partialUrl('joint-mailing.html'),
  11     crmMailingAbBlockSetup: partialUrl('setup.html')
  12   };
  13   _.each(simpleDirectives, function (templateUrl, directiveName) {
  14     angular.module('crmMailingAB2').directive(directiveName, function ($parse, crmMailingABCriteria) {
  15       var scopeDesc = {crmAbtest: '@'};
  16       scopeDesc[directiveName] = '@';
  17
  18       return {
  19         scope: scopeDesc,
  20         templateUrl: templateUrl,
  21         link: function (scope, elm, attr) {
  22           var model = $parse(attr.crmAbtest);
  23           scope.abtest = model(scope.$parent);
  24           scope.crmMailingConst = CRM.crmMailing;
  25           scope.crmMailingABCriteria = crmMailingABCriteria;
  26           scope.ts = CRM.ts('CiviMail');
  27
  28           var fieldsModel = $parse(attr[directiveName]);
  29           scope.fields = fieldsModel(scope.$parent);
  30         }
  31       };
  32     });
  33   });
  34
  35   // example: <div crm-mailing-ab-slider ng-model="abtest.ab.group_percentage"></div>
  36   angular.module('crmMailingAB2').directive('crmMailingAbSlider', function () {
  37     return {
  38       require: '?ngModel',
  39       scope: {},
  40       templateUrl: partialUrl('slider.html'),
  41       link: function (scope, element, attrs, ngModel) {
  42         var TEST_MIN = 1, TEST_MAX = 50;
  43         var sliders = $('.slider-test,.slider-win', element);
  44         var sliderTests = $('.slider-test', element);
  45         var sliderWin = $('.slider-win', element);
  46
  47         scope.ts = CRM.ts('CiviMail');
  48         scope.testValue = 0;
  49         scope.winValue = 100;
  50
  51         // set the base value (following a GUI event)
  52         function setValue(value) {
  53           value = Math.min(TEST_MAX, Math.max(TEST_MIN, value));
  54           scope.$apply(function () {
  55             ngModel.$setViewValue(value);
  56             scope.testValue = value;
  57             scope.winValue = 100 - (2 * scope.testValue);
  58             sliderTests.slider('value', scope.testValue);
  59             sliderWin.slider('value', scope.winValue);
  60           });
  61         }
  62
  63         sliders.slider({
  64           min: 0,
  65           max: 100,
  66           range: 'min',
  67           step: 1
  68         });
  69         sliderTests.slider({
  70           slide: function slideTest(event, ui) {
  71             event.preventDefault();
  72             setValue(ui.value);
  73           }
  74         });
  75         sliderWin.slider({
  76           slide: function slideWinner(event, ui) {
  77             event.preventDefault();
  78             setValue(Math.round((100 - ui.value) / 2));
  79           }
  80         });
  81
  82         ngModel.$render = function () {
  83           scope.testValue = ngModel.$viewValue;
  84           scope.winValue = 100 - (2 * scope.testValue);
  85           sliderTests.slider('value', scope.testValue);
  86           sliderWin.slider('value', scope.winValue);
  87         };
  88       }
  89     };
  90   });
  91 })(angular, CRM.$, CRM._);