ang/crmMailingAB/Slider.js

   1 (function(angular, $, _) {
   2
   3   // example: <div crm-mailing-ab-slider ng-model="abtest.ab.group_percentage"></div>
   4   angular.module('crmMailingAB').directive('crmMailingAbSlider', function() {
   5     return {
   6       require: '?ngModel',
   7       scope: {},
   8       templateUrl: '~/crmMailingAB/Slider.html',
   9       link: function(scope, element, attrs, ngModel) {
  10         var TEST_MIN = 1, TEST_MAX = 50;
  11         var sliders = $('.slider-test,.slider-win', element);
  12         var sliderTests = $('.slider-test', element);
  13         var sliderWin = $('.slider-win', element);
  14
  15         scope.ts = CRM.ts(null);
  16         scope.testValue = 0;
  17         scope.winValue = 100;
  18
  19         // set the base value (following a GUI event)
  20         function setValue(value) {
  21           value = Math.min(TEST_MAX, Math.max(TEST_MIN, value));
  22           scope.$apply(function() {
  23             ngModel.$setViewValue(value);
  24             scope.testValue = value;
  25             scope.winValue = 100 - (2 * scope.testValue);
  26             sliderTests.slider('value', scope.testValue);
  27             sliderWin.slider('value', scope.winValue);
  28           });
  29         }
  30
  31         sliders.slider({
  32           min: 0,
  33           max: 100,
  34           range: 'min',
  35           step: 1
  36         });
  37         sliderTests.slider({
  38           slide: function slideTest(event, ui) {
  39             event.preventDefault();
  40             setValue(ui.value);
  41           }
  42         });
  43         sliderWin.slider({
  44           slide: function slideWinner(event, ui) {
  45             event.preventDefault();
  46             setValue(Math.round((100 - ui.value) / 2));
  47           }
  48         });
  49
  50         ngModel.$render = function() {
  51           scope.testValue = ngModel.$viewValue;
  52           scope.winValue = 100 - (2 * scope.testValue);
  53           sliderTests.slider('value', scope.testValue);
  54           sliderWin.slider('value', scope.winValue);
  55         };
  56       }
  57     };
  58   });
  59
  60 })(angular, CRM.$, CRM._);