Afform - Refactor icon picker to service

diff --git a/ext/afform/admin/ang/afAdmin.aff.html b/ext/afform/admin/ang/afAdmin.aff.html
index 4bb72f31af4f53f5b838e43cecec8a13d8b0ce2e..ad443fe3e60b73294e36f8e75fad10c9359934d1 100644 (file)
--- a/ext/afform/admin/ang/afAdmin.aff.html
+++ b/ext/afform/admin/ang/afAdmin.aff.html
@@ -5,7 +5,3 @@
 <div ng-if="routeParams.name">
   <af-gui-editor name="routeParams.name"></af-gui-editor>
 </div>
-
-<div style="display:none;">
-  <input id="af-gui-icon-picker" title="{{:: ts('Choose Icon') }}" />
-</div>

diff --git a/ext/afform/admin/ang/afGuiEditor.js b/ext/afform/admin/ang/afGuiEditor.js
index 40b148ffab640c5b476692892d7ebf717948e5d9..daed098357b5340c01f7c8146281510b7a0b6c17 100644 (file)
--- a/ext/afform/admin/ang/afGuiEditor.js
+++ b/ext/afform/admin/ang/afGuiEditor.js
@@ -2,7 +2,7 @@
   "use strict";
   angular.module('afGuiEditor', CRM.angRequires('afGuiEditor'))
 
-    .service('afAdmin', function(crmApi4, $parse) {
+    .service('afAdmin', function(crmApi4, $parse, $q) {
 
       // Parse strings of javascript that php couldn't interpret
       function evaluate(collection) {
@@ -118,10 +118,27 @@
         splitClass: splitClass,
         modifyClasses: modifyClasses,
         getStyles: getStyles,
-        setStyle: setStyle
+        setStyle: setStyle,
+
+        pickIcon: function() {
+          var deferred = $q.defer();
+          $('#af-gui-icon-picker').off('change').siblings('.crm-icon-picker-button').click();
+          $('#af-gui-icon-picker').on('change', function() {
+            deferred.resolve($(this).val());
+          });
+          return deferred.promise;
+        }
       };
     });
 
+  // Shoehorn in a non-angular widget for picking icons
+  $(function() {
+    $('#crm-container').append('<div style="display:none"><input id="af-gui-icon-picker"></div>');
+    CRM.loadScript(CRM.config.resourceBase + 'js/jquery/jquery.crmIconPicker.js').done(function() {
+      $('#af-gui-icon-picker').crmIconPicker();
+    });
+  });
+
   angular.module('afGuiEditor').component('afGuiEditor', {
     templateUrl: '~/afGuiEditor/main.html',
     bindings: {
@@ -146,18 +163,6 @@
       };
 
       this.$onInit = function() {
-        // Shoehorn in a non-angular widget for picking icons
-        CRM.loadScript(CRM.config.resourceBase + 'js/jquery/jquery.crmIconPicker.js').done(function() {
-          $('#af-gui-icon-picker').crmIconPicker().change(function() {
-            if (editingIcon) {
-              $scope.$apply(function() {
-                editingIcon[editingIconProp] = $('#af-gui-icon-picker').val();
-                editingIcon = null;
-                $('#af-gui-icon-picker').val('').change();
-              });
-            }
-          });
-        });
         // Fetch the current form plus all blocks
         afAdmin.initialize(editor.name)
           .then(initializeForm);
@@ -579,7 +584,9 @@
         };
 
         $scope.pickAddIcon = function() {
-          openIconPicker($scope.node, 'add-icon');
+          afAdmin.pickIcon().then(function(val) {
+            $scope.node['add-icon'] = val;
+          });
         };
 
         function getBlockNode() {
@@ -1124,7 +1131,9 @@
         };
 
         $scope.pickIcon = function() {
-          openIconPicker($scope.node, 'crm-icon');
+          afAdmin.pickIcon().then(function(val) {
+            $scope.node['crm-icon'] = val;
+          });
         };
 
       }
@@ -1215,11 +1224,4 @@
     };
   });
 
-  var editingIcon, editingIconProp;
-  function openIconPicker(node, propName) {
-    editingIcon = node;
-    editingIconProp = propName;
-    $('#af-gui-icon-picker ~ .crm-icon-picker-button').click();
-  }
-
 })(angular, CRM.$, CRM._);