Update version to 4.6.alpha5
[civicrm-core.git] / js / angular-crm-ui.js
index f38e20801126bfe212a5e3e038b9eaea851e621d..44b19bdb280e104578148adaf1efc952ad5a764e 100644 (file)
@@ -3,10 +3,6 @@
 
   var uidCount = 0;
 
-  var partialUrl = function (relPath) {
-    return CRM.resourceUrls['civicrm'] + '/partials/crmUi/' + relPath;
-  };
-
   angular.module('crmUi', [])
 
     // example <div crm-ui-accordion crm-title="ts('My Title')" crm-collapsed="true">...content...</div>
@@ -92,8 +88,8 @@
 
           updateChildren();
           scope.$parent.$watch(attrs.crmUiDateTime, updateChildren);
-          scope.$watch('dtparts.date', updateParent),
-          scope.$watch('dtparts.time', updateParent)
+          scope.$watch('dtparts.date', updateParent);
+          scope.$watch('dtparts.time', updateParent);
         }
       };
     })
     .directive('crmUiField', function() {
       // Note: When writing new templates, the "label" position is particular. See/patch "var label" below.
       var templateUrls = {
-        default: partialUrl('field.html'),
-        checkbox: partialUrl('field-cb.html')
+        default: '~/crmUi/field.html',
+        checkbox: '~/crmUi/field-cb.html'
       };
 
       return {
           // immediately for initialization. Use retries/retryDelay to initialize such elements.
           var init = function (retries, retryDelay) {
             var input = $('#' + id);
-            if (input.length == 0) {
+            if (input.length === 0) {
               if (retries) {
                 $timeout(function(){
                   init(retries-1, retryDelay);
               });
             }
             else {
-              scope.crmIsRequired = input.prop('required')
+              scope.crmIsRequired = input.prop('required');
             }
 
             ngModel = $parse(attrs.crmUiFor)(tgtScope);
               ids[name] = "crmUiId_" + (++uidCount);
             }
             return ids[name];
-          }
+          };
         },
         link: function (scope, element, attrs) {}
       };
             doc.open();
             doc.writeln(iframeHtml);
             doc.close();
-          }
+          };
 
           scope.$parent.$watch(attrs.crmUiIframe, refresh);
           //setTimeout(function () { refresh(); }, 50);
       var defaultVal = function (defaultValue) {
         var f = function (scope) {
           return defaultValue;
-        }
+        };
         f.assign = function (scope, value) {
           // ignore changes
-        }
+        };
         return f;
       };
 
       return {
         template: '',
         link: function (scope, element, attrs) {
-          var binding = parse(attrs['binding'], true);
-          var titleLocked = parse(attrs['titleLocked'], ts('Locked'));
-          var titleUnlocked = parse(attrs['titleUnlocked'], ts('Unlocked'));
+          var binding = parse(attrs.binding, true);
+          var titleLocked = parse(attrs.titleLocked, ts('Locked'));
+          var titleUnlocked = parse(attrs.titleUnlocked, ts('Unlocked'));
 
           $(element).addClass('ui-icon lock-button');
           var refresh = function () {
         scope: {
           crmUiTabSet: '@'
         },
-        templateUrl: partialUrl('tabset.html'),
+        templateUrl: '~/crmUi/tabset.html',
         transclude: true,
         controllerAs: 'crmUiTabSetCtrl',
         controller: function($scope, $parse) {
           scope.$parent.$watch(attrs.crmUiTime, updateChildren);
           element.on('change', updateParent);
         }
-      }
+      };
+    })
+
+    // example: <span ng-model="placeholder" crm-ui-validate="foo && bar || whiz" />
+    // example: <span ng-model="placeholder" crm-ui-validate="foo && bar || whiz" crm-ui-validate-name="myError" />
+    // Generic, field-independent validator.
+    .directive('crmUiValidate', function() {
+      return {
+        restrict: 'EA',
+        require: 'ngModel',
+        link: function(scope, element, attrs, ngModel) {
+          var validationKey = attrs.crmUiValidateName ? attrs.crmUiValidateName : 'crmUiValidate';
+          scope.$watch(attrs.crmUiValidate, function(newValue){
+            ngModel.$setValidity(validationKey, !!newValue);
+          });
+        }
+      };
     })
 
     // like ng-show, but hides/displays elements using "visibility" which maintains positioning
         scope: {
           crmUiWizard: '@'
         },
-        templateUrl: partialUrl('wizard.html'),
+        templateUrl: '~/crmUi/wizard.html',
         transclude: true,
         controllerAs: 'crmUiWizardCtrl',
         controller: function($scope, $parse) {
           this.$first = function() { return this.$index() === 0; };
           /// @return bool whether the current step is last
           this.$last = function() { return this.$index() === steps.length -1; };
-          this.$maxVisit = function() { return maxVisited; }
+          this.$maxVisit = function() { return maxVisited; };
+          this.$validStep = function() {
+            return steps[selectedIndex].isStepValid();
+          };
           this.iconFor = function(index) {
             if (index < this.$index()) return '√';
             if (index === this.$index()) return '»';
             return ' ';
-          }
+          };
           this.isSelectable = function(step) {
             if (step.selected) return false;
             var result = false;
             angular.forEach(steps, function(otherStep, otherKey) {
               if (otherStep === step) key = otherKey;
             });
-            if (key != null) {
+            if (key !== null) {
               steps.splice(key, 1);
             }
           };
           this.previous = function() { this.goto(this.$index()-1); };
           this.next = function() { this.goto(this.$index()+1); };
           if ($scope.crmUiWizard) {
-            $parse($scope.crmUiWizard).assign($scope.$parent, this)
+            $parse($scope.crmUiWizard).assign($scope.$parent, this);
           }
         },
         link: function (scope, element, attrs) {}
       };
     })
 
-    // example: <div crm-ui-wizard-step crm-title="ts('My Title')">...content...</div>
+    // example: <div crm-ui-wizard-step crm-title="ts('My Title')" ng-form="mySubForm">...content...</div>
     // If there are any conditional steps, then be sure to set a weight explicitly on *all* steps to maintain ordering.
     // example: <div crm-ui-wizard-step="100" crm-title="..." ng-if="...">...content...</div>
     .directive('crmUiWizardStep', function() {
       var nextWeight = 1;
       return {
-        require: '^crmUiWizard',
+        require: ['^crmUiWizard', 'form'],
         restrict: 'EA',
         scope: {
           crmTitle: '@', // expression, evaluates to a printable string
         },
         template: '<div class="crm-wizard-step" ng-show="selected" ng-transclude/></div>',
         transclude: true,
-        link: function (scope, element, attrs, crmUiWizardCtrl) {
+        link: function (scope, element, attrs, ctrls) {
+          var crmUiWizardCtrl = ctrls[0], form = ctrls[1];
           if (scope.crmUiWizardStep) {
             scope.crmUiWizardStep = parseInt(scope.crmUiWizardStep);
           } else {
             scope.crmUiWizardStep = nextWeight++;
           }
+          scope.isStepValid = function() {
+            return form.$valid;
+          };
           crmUiWizardCtrl.add(scope);
           element.on('$destroy', function(){
             crmUiWizardCtrl.remove(scope);
         template: '',
         link: function (scope, element, attrs) {
           $(element).click(function () {
-            var options = scope.$eval(attrs['crmConfirm']);
+            var options = scope.$eval(attrs.crmConfirm);
             var defaults = (options.type) ? defaultFuncs[options.type](options) : {};
             CRM.confirm(_.extend(defaults, options))
-              .on('crmConfirm:yes', function () { scope.$apply(attrs['onYes']); })
-              .on('crmConfirm:no', function () { scope.$apply(attrs['onNo']); });
+              .on('crmConfirm:yes', function () { scope.$apply(attrs.onYes); })
+              .on('crmConfirm:no', function () { scope.$apply(attrs.onNo); });
           });
         }
       };