From cdb373b473685db3cb9125e1b173872b087950c6 Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Sun, 14 Dec 2014 18:26:10 -0800
Subject: [PATCH] CRM-15578 - Implement crmMailingAbSlider

---
 css/angular-crmMailingAB2.css          |  6 +++
 js/angular-crmMailingAB2-directives.js | 59 +++++++++++++++++++++++++-
 partials/crmMailingAB2/slider.html     | 25 +++++++++++
 3 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 partials/crmMailingAB2/slider.html

diff --git a/css/angular-crmMailingAB2.css b/css/angular-crmMailingAB2.css
index e69de29bb2..19a25128d5 100644
--- a/css/angular-crmMailingAB2.css
+++ b/css/angular-crmMailingAB2.css
@@ -0,0 +1,6 @@
+.crm-mailing-ab-slider .slider-test .ui-slider-range {
+    background: #5050b0;
+}
+.crm-mailing-ab-slider .slider-win .ui-slider-range {
+    background: #50b050;
+}
diff --git a/js/angular-crmMailingAB2-directives.js b/js/angular-crmMailingAB2-directives.js
index b8f4828f8f..a518f5b327 100644
--- a/js/angular-crmMailingAB2-directives.js
+++ b/js/angular-crmMailingAB2-directives.js
@@ -23,5 +23,62 @@
         scope.fields = fieldsModel(scope.$parent);
       }
     };
-  })
+  });
+
+  // example: <div crm-mailing-ab-slider ng-model="abtest.ab.group_percentage"></div>
+  angular.module('crmMailingAB2').directive('crmMailingAbSlider', function () {
+    return {
+      require: '?ngModel',
+      scope: {},
+      templateUrl: partialUrl('slider.html'),
+      link: function (scope, element, attrs, ngModel) {
+        var TEST_MIN = 1, TEST_MAX = 50;
+        var sliders = $('.slider-test,.slider-win', element);
+        var sliderTests = $('.slider-test', element);
+        var sliderWin = $('.slider-win', element);
+
+        scope.ts = CRM.ts('CiviMail');
+        scope.testValue = 0;
+        scope.winValue = 100;
+
+        // set the base value (following a GUI event)
+        function setValue(value) {
+          value = Math.min(TEST_MAX, Math.max(TEST_MIN, value));
+          scope.$apply(function () {
+            ngModel.$setViewValue(value);
+            scope.testValue = value;
+            scope.winValue = 100 - (2 * scope.testValue);
+            sliderTests.slider('value', scope.testValue);
+            sliderWin.slider('value', scope.winValue);
+          });
+        }
+
+        sliders.slider({
+          min: 0,
+          max: 100,
+          range: 'min',
+          step: 1
+        });
+        sliderTests.slider({
+          slide: function slideTest(event, ui) {
+            event.preventDefault();
+            setValue(ui.value);
+          }
+        });
+        sliderWin.slider({
+          slide: function slideWinner(event, ui) {
+            event.preventDefault();
+            setValue(Math.round((100 - ui.value) / 2));
+          }
+        });
+
+        ngModel.$render = function () {
+          scope.testValue = ngModel.$viewValue;
+          scope.winValue = 100 - (2 * scope.testValue);
+          sliderTests.slider('value', scope.testValue);
+          sliderWin.slider('value', scope.winValue);
+        };
+      }
+    };
+  });
 })(angular, CRM.$, CRM._);
diff --git a/partials/crmMailingAB2/slider.html b/partials/crmMailingAB2/slider.html
new file mode 100644
index 0000000000..cdfcad3b77
--- /dev/null
+++ b/partials/crmMailingAB2/slider.html
@@ -0,0 +1,25 @@
+<table class="crm-mailing-ab-slider">
+  <tbody>
+  <tr>
+    <td style="width: 10em;">{{ts('Test Mailing A')}}</td>
+    <td>
+      <div class="slider-test slider-a"></div>
+    </td>
+    <td style="width: 5em;">({{testValue}}%)</td>
+  </tr>
+  <tr>
+    <td>{{ts('Test Mailing B')}}</td>
+    <td>
+      <div class="slider-test slider-b"></div>
+    </td>
+    <td>({{testValue}}%)</td>
+  </tr>
+  </tbody>
+  <tr>
+    <td>{{ts('Final Mailing')}}</td>
+    <td>
+      <div class="slider-win slider-b"></div>
+    </td>
+    <td>({{winValue}}%)</td>
+  </tr>
+</table>
-- 
2.25.1