From f0abf4f8f95642d87d5ee603634bcf6139583edf Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Mon, 21 Jun 2021 21:37:10 -0700
Subject: [PATCH] msgtplui - Implement expanded editor dialog

---
 ext/msgtplui/ang/msgtplui.css               |  4 ++-
 ext/msgtplui/ang/msgtplui/EditContent.html  |  8 ++---
 ext/msgtplui/ang/msgtplui/EditContent.js    | 22 ++++++++++--
 ext/msgtplui/ang/msgtplui/ExpandedEdit.html | 38 +++++++++++++++++++++
 4 files changed, 64 insertions(+), 8 deletions(-)
 create mode 100644 ext/msgtplui/ang/msgtplui/ExpandedEdit.html

diff --git a/ext/msgtplui/ang/msgtplui.css b/ext/msgtplui/ang/msgtplui.css
index 98e45b233b..ecbc08c312 100644
--- a/ext/msgtplui/ang/msgtplui.css
+++ b/ext/msgtplui/ang/msgtplui.css
@@ -1 +1,3 @@
-/* Add any CSS rules for Angular module "msgtplui" */
+.ui-dialog.msgtplui-expanded .ui-dialog-titlebar {
+  display:none;
+}
diff --git a/ext/msgtplui/ang/msgtplui/EditContent.html b/ext/msgtplui/ang/msgtplui/EditContent.html
index f2bf87aee3..39a7fe1f5f 100644
--- a/ext/msgtplui/ang/msgtplui/EditContent.html
+++ b/ext/msgtplui/ang/msgtplui/EditContent.html
@@ -35,8 +35,8 @@
       />
       &nbsp;
       <div class="btn-group btn-group-xs pull-right" role="toolbar" aria-label="{{::ts('HTML Content: Toolbar')}}" ng-show="accordions.msg_html">
-        <button type="button" class="btn btn-default" title="{{::ts('Open large editor')}}" ng-click="$ctrl.openFull('msg_html')">
-          <span class="fa fa-window-restore" aria-hidden="true"></span>
+        <button type="button" class="btn btn-default" title="{{::ts('Open large editor')}}" ng-click="$ctrl.openFull('msg_html', {language: 'html'})">
+          <span class="fa fa-expand" aria-hidden="true"></span>
         </button>
         <button type="button" class="btn btn-default" title="{{::ts('Open preview')}}" ng-click="$ctrl.openPreview('msg_html')">
           <span class="fa fa-eye" aria-hidden="true"></span>
@@ -67,8 +67,8 @@
       />
       &nbsp;
       <div class="btn-group btn-group-xs pull-right" role="toolbar" aria-label="{{::ts('Text Content: Toolbar')}}" ng-show="accordions.msg_text">
-        <button type="button" class="btn btn-default" title="{{::ts('Open large editor')}}" ng-click="$ctrl.openFull('msg_text')">
-          <span class="fa fa-window-restore" aria-hidden="true"></span>
+        <button type="button" class="btn btn-default" title="{{::ts('Open large editor')}}" ng-click="$ctrl.openFull('msg_text', {language: 'smarty'})">
+          <span class="fa fa-expand" aria-hidden="true"></span>
         </button>
         <button type="button" class="btn btn-default" title="{{::ts('Open preview')}}" ng-click="$ctrl.openPreview('msg_text')">
           <span class="fa fa-eye" aria-hidden="true"></span>
diff --git a/ext/msgtplui/ang/msgtplui/EditContent.js b/ext/msgtplui/ang/msgtplui/EditContent.js
index 71544a8a2f..1d1626ad9f 100644
--- a/ext/msgtplui/ang/msgtplui/EditContent.js
+++ b/ext/msgtplui/ang/msgtplui/EditContent.js
@@ -4,7 +4,7 @@
       options: '='
     },
     templateUrl: '~/msgtplui/EditContent.html',
-    controller: function ($scope, $element, crmStatus, crmUiAlert) {
+    controller: function ($scope, $element, crmStatus, crmUiAlert, dialogService) {
       var ts = $scope.ts = CRM.ts('msgtplui');
       var $ctrl = this;
 
@@ -18,8 +18,24 @@
         }, opts);
       };
 
-      $ctrl.openFull = function(fld) {
-        crmUiAlert({type: 'error', title: ts('TODO: openFull'), text: ts('Not yet implemented')});
+      $ctrl.openFull = function(fld, monacoOptions) {
+        var model = {
+          monacoOptions: $ctrl.monacoOptions(angular.extend({crmHeightPct: 0.80}, monacoOptions)),
+          openPreview: function() { return $ctrl.openPreview(model.field); },
+          record: $ctrl.options.record,
+          field: fld,
+          tokenList: $ctrl.options.tokenList
+        };
+        var options = CRM.utils.adjustDialogDefaults({
+          // show: {effect: 'slideDown'},
+          dialogClass: 'msgtplui-expanded',
+          autoOpen: false,
+          height: '90%',
+          width: '90%'
+        });
+        return dialogService.open('expandedEditDlg', '~/msgtplui/ExpandedEdit.html', model, options)
+          // Nothing to do but hide warnings. The field was edited live.
+          .then(function(){}, function(){});
       };
 
       $ctrl.openPreview = function(fld) {
diff --git a/ext/msgtplui/ang/msgtplui/ExpandedEdit.html b/ext/msgtplui/ang/msgtplui/ExpandedEdit.html
new file mode 100644
index 0000000000..96168ee5f8
--- /dev/null
+++ b/ext/msgtplui/ang/msgtplui/ExpandedEdit.html
@@ -0,0 +1,38 @@
+<div id="bootstrap-theme" crm-dialog="expandedEditDlg" ng-controller="MsgtpluiGenericCtrl">
+
+  <form name="expandedEditForm">
+
+    <nav class="navbar navbar-default">
+      <div class="container-fluid">
+        <div class="navbar-form navbar-right">
+          <div class="form-group">
+            <button type="button" class="btn btn-default" ng-click="model.openPreview()">
+              <span class="fa fa-eye" aria-hidden="true"></span>
+              {{::ts('Preview')}}
+            </button>
+
+            <!-- class='fa-code' is unhappy here. At least in Firefox. -->
+            <input class="form-control crm-action-menu"
+                   tabindex="-1"
+                   style="z-index:1"
+                   crm-ui-select="{placeholder: ts('Token'), data: model.tokenList, width: '12em', dropdownAutoWidth: true}"
+                   on-crm-ui-select="$broadcast('insert:expanded', selection)"
+            />
+
+            <button type="button" class="btn btn-default" ng-click="expandedEditDlg.close()">
+              <span class="fa fa-times" aria-hidden="true"></span>
+              {{::ts('Close')}}
+            </button>
+
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <div ng-model="model.record[model.field]"
+         crm-monaco="model.monacoOptions"
+         crm-monaco-insert-rx="insert:expanded"
+    ></div>
+  </form>
+
+</div>
-- 
2.25.1