crmExample - Hidden Angular module for testing custom widgets in various configs.
authorTim Otten <totten@civicrm.org>
Mon, 2 Feb 2015 04:42:44 +0000 (20:42 -0800)
committerTim Otten <totten@civicrm.org>
Mon, 2 Feb 2015 05:26:23 +0000 (21:26 -0800)
Civi/Angular/Manager.php
js/angular-crmExample.js [new file with mode: 0644]
partials/crmExample/example.html [new file with mode: 0644]

index bb3043ff8decf9f55c4983959ad4a209f4cfb749..215d7e1a26a336440862755fc80875ded4c7b850 100644 (file)
@@ -73,6 +73,11 @@ class Manager {
         'ext' => 'civicrm',
         'js' => array('js/angular-crmAutosave.js'),
       );
+      //$angularModules['crmExample'] = array(
+      //  'ext' => 'civicrm',
+      //  'js' => array('js/angular-crmExample.js'),
+      //  'partials' => array('partials/crmExample'),
+      //);
       $angularModules['crmResource'] = array(
         'ext' => 'civicrm',
         // 'js' => array('js/angular-crmResource/byModule.js'), // One HTTP request per module.
diff --git a/js/angular-crmExample.js b/js/angular-crmExample.js
new file mode 100644 (file)
index 0000000..d32d81d
--- /dev/null
@@ -0,0 +1,47 @@
+(function(angular, $, _) {
+
+  angular.module('crmExample', [
+    'crmUtil', 'ngRoute', 'ui.utils', 'crmUi'
+  ]);
+
+  angular.module('crmExample').config([
+    '$routeProvider',
+    function($routeProvider) {
+      $routeProvider.when('/example', {
+        templateUrl: '~/crmExample/example.html',
+        controller: 'ExampleCtrl'
+      });
+    }
+  ]);
+
+  angular.module('crmExample').controller('ExampleCtrl', function ExampleCtrl($scope) {
+    $scope.ts = CRM.ts(null);
+
+    //$scope.examples = {
+    //  blank1: {value: '', required: false},
+    //  blank2: {value: '', required: true},
+    //  filled1: {value:'2014-01-02', required: false},
+    //  filled2: {value:'2014-02-03', required: true}
+    //};
+
+    //$scope.examples = {
+    //  blank1: {value: '', required: false},
+    //  blank2: {value: '', required: true},
+    //  filled1: {value:'12:34', required: false},
+    //  filled2: {value:'10:09', required: true}
+    //};
+
+    $scope.examples = {
+      blank: {value: '', required: false},
+      //blankReq: {value: '', required: true},
+      filled: {value:'2014-01-02 03:04', required: false},
+      //filledReq: {value:'2014-02-03 05:06', required: true},
+      missingDate: {value:' 05:06', required: false},
+      //missingDateReq: {value:' 05:06', required: true},
+      missingTime: {value:'2014-03-04 ', required: false}
+      //missingTimeReq: {value:'2014-03-04 ', required: true}
+    };
+
+  });
+
+})(angular, CRM.$, CRM._);
diff --git a/partials/crmExample/example.html b/partials/crmExample/example.html
new file mode 100644 (file)
index 0000000..f19fca5
--- /dev/null
@@ -0,0 +1,46 @@
+<form name="exampleForm" novalidate>
+  <table>
+    <thead>
+    <tr>
+      <th>Name</th>
+      <th>Value</th>
+      <th>Input</th>
+      <th>ngModel</th>
+    </tr>
+    </thead>
+
+    <tbody>
+
+    <tr ng-repeat="(exName, example) in examples">
+      <td>{{exName}}</td>
+      <td>{{example.value}}</td>
+      <td>
+        <!--<input crm-ui-date ng-model="example.value" name="{{exName}}" ng-required="example.required"/> -->
+        <!--<input crm-ui-time ng-model="example.value" name="{{exName}}" ng-required="example.required"/> -->
+        <!-- <div crm-ui-date-time ng-model="example.value" name="{{exName}}" ng-required="example.required"/> -->
+        <div class="crmMailing-schedule-outer" crm-mailing-radio-date="schedule" ng-model="example.value"
+             name="{{exName}}">
+
+          <div class="crmMailing-schedule-inner">
+            <div>
+              <input ng-model="schedule.mode" type="radio" name="send_{{exName}}" value="now" id="schedule-send-now"/>
+              <label for="schedule-send-now">{{ts('Send immediately')}}</label>
+            </div>
+            <div>
+              <input ng-model="schedule.mode" type="radio" name="send_{{exName}}" value="at" id="schedule-send-at"/>
+              <label for="schedule-send-at">{{ts('Send at:')}}</label>
+              <span crm-ui-date-time ng-model="schedule.datetime" ng-required="schedule.mode == 'at'"></span>
+            </div>
+          </div>
+        </div>
+        </div>
+      </td>
+      <td>
+        <pre>{{exampleForm[exName]|json}}</pre>
+      </td>
+    </tr>
+
+    </tbody>
+  </table>
+
+</form>