From 9eed04d9a7be998c9491bbdcd67596b7de15174e Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Thu, 25 Feb 2021 10:50:49 -0500
Subject: [PATCH] Afform - move contentEditable directive into crmUI library
 for reusability

---
 ang/crmUi.js                                  | 51 +++++++++++++++++-
 ext/afform/admin/ang/afGuiEditor.css          |  1 +
 .../ang/afGuiEditor/afGuiEditOptions.html     |  2 +-
 .../afGuiEditor/afGuiEditable.directive.js    | 53 -------------------
 .../ang/afGuiEditor/afGuiEditorPalette.html   |  2 +-
 .../ang/afGuiEditor/elements/afGuiButton.html |  2 +-
 .../afGuiEditor/elements/afGuiContainer.html  |  2 +-
 .../ang/afGuiEditor/elements/afGuiField.html  |  6 +--
 .../ang/afGuiEditor/elements/afGuiText.html   |  2 +-
 9 files changed, 58 insertions(+), 63 deletions(-)
 delete mode 100644 ext/afform/admin/ang/afGuiEditor/afGuiEditable.directive.js

diff --git a/ang/crmUi.js b/ang/crmUi.js
index 87d15f7f60..20ee8b1a8f 100644
--- a/ang/crmUi.js
+++ b/ang/crmUi.js
@@ -1083,13 +1083,60 @@
       };
     })
 
+    // Editable text using ngModel & html5 contenteditable
+    // Usage: <span crm-ui-editable ng-model="my.data">{{ my.data }}</span>
+    .directive("crmUiEditable", function() {
+      return {
+        restrict: "A",
+        require: "ngModel",
+        scope: {
+          defaultValue: '='
+        },
+        link: function(scope, element, attrs, ngModel) {
+          var ts = CRM.ts();
+
+          function read() {
+            var htmlVal = element.html();
+            if (!htmlVal) {
+              htmlVal = scope.defaultValue || '';
+              element.text(htmlVal);
+            }
+            ngModel.$setViewValue(htmlVal);
+          }
+
+          ngModel.$render = function() {
+            element.text(ngModel.$viewValue || scope.defaultValue || '');
+          };
+
+          // Special handling for enter and escape keys
+          element.on('keydown', function(e) {
+            // Enter: prevent line break and save
+            if (e.which === 13) {
+              e.preventDefault();
+              element.blur();
+            }
+            // Escape: undo
+            if (e.which === 27) {
+              element.text(ngModel.$viewValue || scope.defaultValue || '');
+              element.blur();
+            }
+          });
+
+          element.on("blur change", function() {
+            scope.$apply(read);
+          });
+
+          element.attr('contenteditable', 'true').addClass('crm-editable-enabled');
+        }
+      };
+    })
+
     .run(function($rootScope, $location) {
       /// Example: <button ng-click="goto('home')">Go home!</button>
       $rootScope.goto = function(path) {
         $location.path(path);
       };
       // useful for debugging: $rootScope.log = console.log || function() {};
-    })
-  ;
+    });
 
 })(angular, CRM.$, CRM._);
diff --git a/ext/afform/admin/ang/afGuiEditor.css b/ext/afform/admin/ang/afGuiEditor.css
index d38dfc3ac5..330b3b4e46 100644
--- a/ext/afform/admin/ang/afGuiEditor.css
+++ b/ext/afform/admin/ang/afGuiEditor.css
@@ -53,6 +53,7 @@
   display: inline-block;
   padding: 0 4px !important;
   border: 2px solid transparent !important;
+  min-width: 21px;
 }
 #afGuiEditor .crm-editable-enabled:hover:not(:focus) {
   border: 2px dashed grey !important;
diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEditOptions.html b/ext/afform/admin/ang/afGuiEditor/afGuiEditOptions.html
index cb9677ac12..1553eb90b2 100644
--- a/ext/afform/admin/ang/afGuiEditor/afGuiEditOptions.html
+++ b/ext/afform/admin/ang/afGuiEditor/afGuiEditOptions.html
@@ -13,7 +13,7 @@
 </div>
 <ul ui-sortable="{connectWith: '.af-gui-edit-options-deleted', cancel: 'input,textarea,button,select,option,a,[contenteditable]'}" ng-model="options" class="af-gui-edit-options-enabled">
   <li ng-repeat="option in options">
-    <div af-gui-editable ng-model="option.label" default-value="originalLabels[option.id]" >{{ option.label }}</div>
+    <div crm-ui-editable ng-model="option.label" default-value="originalLabels[option.id]" >{{ option.label }}</div>
     <button type="button" class="btn btn-danger-outline btn-xs pull-right" ng-click="deleteOption(option, $index)" title="{{:: ts('Remove option') }}">
       <i class="crm-i fa-trash"></i>
     </button>
diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEditable.directive.js b/ext/afform/admin/ang/afGuiEditor/afGuiEditable.directive.js
deleted file mode 100644
index c15fb09589..0000000000
--- a/ext/afform/admin/ang/afGuiEditor/afGuiEditable.directive.js
+++ /dev/null
@@ -1,53 +0,0 @@
-// https://civicrm.org/licensing
-(function(angular, $, _) {
-  "use strict";
-
-  // Editable titles using ngModel & html5 contenteditable
-  // Cribbed from ContactLayoutEditor
-  angular.module('afGuiEditor').directive("afGuiEditable", function() {
-    return {
-      restrict: "A",
-      require: "ngModel",
-      scope: {
-        defaultValue: '='
-      },
-      link: function(scope, element, attrs, ngModel) {
-        var ts = CRM.ts();
-
-        function read() {
-          var htmlVal = element.html();
-          if (!htmlVal) {
-            htmlVal = scope.defaultValue;
-            element.text(htmlVal);
-          }
-          ngModel.$setViewValue(htmlVal);
-        }
-
-        ngModel.$render = function() {
-          element.text(ngModel.$viewValue || scope.defaultValue);
-        };
-
-        // Special handling for enter and escape keys
-        element.on('keydown', function(e) {
-          // Enter: prevent line break and save
-          if (e.which === 13) {
-            e.preventDefault();
-            element.blur();
-          }
-          // Escape: undo
-          if (e.which === 27) {
-            element.html(ngModel.$viewValue || scope.defaultValue);
-            element.blur();
-          }
-        });
-
-        element.on("blur change", function() {
-          scope.$apply(read);
-        });
-
-        element.attr('contenteditable', 'true').addClass('crm-editable-enabled');
-      }
-    };
-  });
-
-})(angular, CRM.$, CRM._);
diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEditorPalette.html b/ext/afform/admin/ang/afGuiEditor/afGuiEditorPalette.html
index 1db7dd3043..02d2b40686 100644
--- a/ext/afform/admin/ang/afGuiEditor/afGuiEditorPalette.html
+++ b/ext/afform/admin/ang/afGuiEditor/afGuiEditorPalette.html
@@ -7,7 +7,7 @@
       </li>
       <li role="presentation" ng-repeat="entity in entities" ng-class="{active: selectedEntityName === entity.name}">
         <a href ng-click="editor.selectEntity(entity.name)">
-          <span ng-if="!entity.loading && editor.allowEntityConfig" af-gui-editable ng-model="entity.label">{{ entity.label }}</span>
+          <span ng-if="!entity.loading && editor.allowEntityConfig" crm-ui-editable ng-model="entity.label">{{ entity.label }}</span>
           <span ng-if="!entity.loading && !editor.allowEntityConfig">{{ entity.label }}</span>
           <i ng-if="entity.loading" class="crm-i fa-spin fa-spinner"></i>
         </a>
diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiButton.html b/ext/afform/admin/ang/afGuiEditor/elements/afGuiButton.html
index 21c168805c..b223477682 100644
--- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiButton.html
+++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiButton.html
@@ -12,7 +12,7 @@
   <span class="crm-editable-enabled" ng-click="pickIcon()" >
     <i class="crm-i {{ $ctrl.node['crm-icon'] }}"></i>
   </span>
-  <span af-gui-editable ng-model="$ctrl.node['#children'][0]['#text']" >
+  <span crm-ui-editable ng-model="$ctrl.node['#children'][0]['#text']" >
     {{ $ctrl.node['#children'][0]['#text'] }}
   </span>
 </button>
diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html
index e191239c0f..d205755ee5 100644
--- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html
+++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html
@@ -34,6 +34,6 @@
     <span class="crm-editable-enabled" ng-click="pickAddIcon()" >
       <i class="crm-i {{ $ctrl.node['add-icon'] || 'fa-plus' }}"></i>
     </span>
-    <span af-gui-editable ng-model="$ctrl.node['af-repeat']">{{ $ctrl.node['af-repeat'] }}</span>
+    <span crm-ui-editable ng-model="$ctrl.node['af-repeat']">{{ $ctrl.node['af-repeat'] }}</span>
   </button>
 </div>
diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiField.html b/ext/afform/admin/ang/afGuiEditor/elements/afGuiField.html
index a22ece82de..2d1c086a40 100644
--- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiField.html
+++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiField.html
@@ -12,13 +12,13 @@
     </div>
   </div>
   <label ng-style="{visibility: $ctrl.node.defn.label === false ? 'hidden' : 'visible'}" ng-class="{'af-gui-field-required': getProp('required')}" class="af-gui-node-title">
-    <span af-gui-editable ng-model="getSet('label')" ng-model-options="{getterSetter: true}" default-value="$ctrl.getDefn().label">{{ getProp('label') }}</span>
+    <span crm-ui-editable ng-model="getSet('label')" ng-model-options="{getterSetter: true}" default-value="$ctrl.getDefn().label">{{ getProp('label') }}</span>
   </label>
   <div class="af-gui-field-help" ng-if="propIsset('help_pre')">
-    <span af-gui-editable ng-model="getSet('help_pre')" ng-model-options="{getterSetter: true}" default-value="$ctrl.getDefn().help_pre">{{ getProp('help_pre') }}</span>
+    <span crm-ui-editable ng-model="getSet('help_pre')" ng-model-options="{getterSetter: true}" default-value="$ctrl.getDefn().help_pre">{{ getProp('help_pre') }}</span>
   </div>
   <div class="af-gui-field-input af-gui-field-input-type-{{ getProp('input_type').toLowerCase() }}" ng-include="'~/afGuiEditor/inputType/' + getProp('input_type') + '.html'"></div>
   <div class="af-gui-field-help" ng-if="propIsset('help_post')">
-    <span af-gui-editable ng-model="getSet('help_post')" ng-model-options="{getterSetter: true}" default-value="$ctrl.getDefn().help_post">{{ getProp('help_post') }}</span>
+    <span crm-ui-editable ng-model="getSet('help_post')" ng-model-options="{getterSetter: true}" default-value="$ctrl.getDefn().help_post">{{ getProp('help_post') }}</span>
   </div>
 </div>
diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiText.html b/ext/afform/admin/ang/afGuiEditor/elements/afGuiText.html
index e7b5d8cd27..411b3e3901 100644
--- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiText.html
+++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiText.html
@@ -9,5 +9,5 @@
   </div>
 </div>
 <p class="af-gui-node-title {{ $ctrl.node['class'] + ' af-gui-text-' + $ctrl.node['#tag'] }}" >
-  <span af-gui-editable ng-model="$ctrl.node['#children'][0]['#text']">{{ $ctrl.node['#children'][0]['#text'] }}</span>
+  <span crm-ui-editable ng-model="$ctrl.node['#children'][0]['#text']">{{ $ctrl.node['#children'][0]['#text'] }}</span>
 </p>
-- 
2.25.1