[ENG-119] Initial codemirror support for raw body.

heathdutton · heathdutton · commit c098b6022b40 · 2018-03-01T17:52:55.000-05:00
Includes a bunch of JS hardening. Apply buttons no longer cause it to
lock down.
diff --git a/Assets/build/contactclient.min.js b/Assets/build/contactclient.min.js
diff --git a/Assets/build/contactclient.min.js.map b/Assets/build/contactclient.min.js.map
diff --git a/Assets/js/00.type.js b/Assets/js/00.type.js
@@ -1,51 +1,48 @@
 // Logic for the payload type switch.
 Mautic.contactclientType = function () {
 
-    if (typeof window.contactclientTypeLoaded === 'undefined') {
-        window.contactclientTypeLoaded = true;
-        // Trigger payload tab visibility based on contactClient type.
-        mQuery('input[name="contactclient[type]"]').change(function () {
-            var val = mQuery('input[name="contactclient[type]"]:checked').val();
-            if (val === 'api') {
-                mQuery('#payload-tab').removeClass('hide');
-                mQuery('.row.api_payload').removeClass('hide');
-                mQuery('.row.file_payload').addClass('hide');
+    // Trigger payload tab visibility based on contactClient type.
+    mQuery('input[name="contactclient[type]"]').change(function () {
+        var val = mQuery('input[name="contactclient[type]"]:checked').val();
+        if (val === 'api') {
+            mQuery('#payload-tab').removeClass('hide');
+            mQuery('.row.api_payload').removeClass('hide');
+            mQuery('.row.file_payload').addClass('hide');
 
-                // Mautic.contactclientApiPayload();
-                Mautic.contactclientApiPayloadPre();
-            }
-            else if (val === 'file') {
-                mQuery('#payload-tab').removeClass('hide');
-                mQuery('.row.api_payload').addClass('hide');
-                mQuery('.row.file_payload').removeClass('hide');
+            // Mautic.contactclientApiPayload();
+            Mautic.contactclientApiPayloadPre();
+        }
+        else if (val === 'file') {
+            mQuery('#payload-tab').removeClass('hide');
+            mQuery('.row.api_payload').addClass('hide');
+            mQuery('.row.file_payload').removeClass('hide');
+
+            Mautic.contactclientFilePayload();
+        }
+        else {
+            mQuery('#payload-tab').addClass('hide');
+        }
+    }).first().parent().parent().find('label.active input:first').trigger('change');
 
-                Mautic.contactclientFilePayload();
+    // Hide the right column when Payload tab is open to give more room for
+    // table entry.
+    var activeTab = '#details';
+    mQuery('.contactclient-tab').click(function () {
+        var thisTab = mQuery(this).attr('href');
+        if (thisTab !== activeTab) {
+            activeTab = thisTab;
+            if (activeTab === '#payload') {
+                // Expanded view.
+                mQuery('.contactclient-left').addClass('col-md-12').removeClass('col-md-9');
+                mQuery('.contactclient-right').addClass('hide');
             }
             else {
-                mQuery('#payload-tab').addClass('hide');
-            }
-        }).first().parent().parent().find('label.active input:first').trigger('change');
-
-        // Hide the right column when Payload tab is open to give more room for
-        // table entry.
-        var activeTab = '#details';
-        mQuery('.contactclient-tab').click(function () {
-            var thisTab = mQuery(this).attr('href');
-            if (thisTab !== activeTab) {
-                activeTab = thisTab;
-                if (activeTab === '#payload') {
-                    // Expanded view.
-                    mQuery('.contactclient-left').addClass('col-md-12').removeClass('col-md-9');
-                    mQuery('.contactclient-right').addClass('hide');
-                }
-                else {
-                    // Standard view.
-                    mQuery('.contactclient-left').removeClass('col-md-12').addClass('col-md-9');
-                    mQuery('.contactclient-right').removeClass('hide');
-                }
+                // Standard view.
+                mQuery('.contactclient-left').removeClass('col-md-12').addClass('col-md-9');
+                mQuery('.contactclient-right').removeClass('hide');
             }
-        });
-    }
+        }
+    });
 };
 
 Mautic.contactclientTypeChange = function (t) {
diff --git a/Assets/js/02.json_editor.js b/Assets/js/02.json_editor.js
@@ -164,6 +164,28 @@ JSONEditor.defaults.options.expand_height = true;
 
 // Custom validators.
 JSONEditor.defaults.custom_validators.push(function (schema, value, path) {
+    // When a textarea with option "codemirror" is true, render codemirror.
+    if (schema.format === 'textarea' && typeof schema.options !== 'undefined' && schema.options.codemirror === true) {
+        mQuery('textarea[name=\'' + path.replace('root.', 'root[').split('.').join('][') + ']\']:first:visible:not(.codemirror-checked)').each(function () {
+            var $input = mQuery(this);
+                editor = CodeMirror.fromTextArea($input[0], {
+                // mode: {
+                //     name: 'javascript',
+                //     json: true
+                // },
+                theme: 'material',
+                gutters: ['CodeMirror-lint-markers'],
+                // lint: 'json',
+                lintOnChange: true,
+                matchBrackets: true,
+                autoCloseBrackets: true,
+                lineNumbers: true,
+                extraKeys: {'Ctrl-Space': 'autocomplete'},
+                lineWrapping: true
+            });
+        }).addClass('codemirror-checked');
+    }
+    // Annual/fixed date support.
     var errors = [];
     if (schema.format === 'datestring') {
         if (!/^[0-9|yY]{4}-[0-9]{1,2}-[0-9]{1,2}$/.test(value) && !/^[0-9]{1,2}-[0-9]{1,2}$/.test(value)) {
diff --git a/Assets/js/03.api_payload.js b/Assets/js/03.api_payload.js
@@ -1,10 +1,8 @@
 // API Payload field.
 // API Payload JSON Schema.
 Mautic.contactclientApiPayloadPre = function () {
-    var $apiPayload = mQuery('#contactclient_api_payload');
-    if (typeof window.contactclientApiPayloadPreoaded === 'undefined' && $apiPayload.length) {
-
-        window.contactclientApiPayloadPreoaded = true;
+    var $apiPayload = mQuery('#contactclient_api_payload:first:not(.hide)');
+    if ($apiPayload.length) {
 
         var tokenSource = 'plugin:mauticContactClient:getTokens';
         if (typeof window.JSONEditor.tokenCache === 'undefined') {
@@ -35,10 +33,8 @@ Mautic.contactclientApiPayloadPre = function () {
 };
 Mautic.contactclientApiPayload = function () {
 
-    var $apiPayload = mQuery('#contactclient_api_payload');
-    if (typeof window.contactclientApiPayloadLoaded === 'undefined' && $apiPayload.length) {
-
-        window.contactclientApiPayloadLoaded = true;
+    var $apiPayload = mQuery('#contactclient_api_payload:first:not(.hide)');
+    if ($apiPayload.length) {
 
         var apiPayloadCodeMirror,
             apiPayloadJSONEditor;
diff --git a/Assets/js/04.exclusive.js b/Assets/js/04.exclusive.js
@@ -1,9 +1,7 @@
 // Exclusive field.
 Mautic.contactclientExclusive = function () {
-    var $exclusive = mQuery('#contactclient_exclusive');
-    if (typeof window.contactclientExclusiveLoaded === 'undefined' && $exclusive.length) {
-
-        window.contactclientExclusiveLoaded = true;
+    var $exclusive = mQuery('#contactclient_exclusive:not(.hide):first');
+    if ($exclusive.length) {
 
         var exclusiveJSONEditor;
 
diff --git a/Assets/js/06.filter.js b/Assets/js/06.filter.js
@@ -1,8 +1,8 @@
 // @todo - Filtering field.
 Mautic.contactclientFilter = function () {
-    var $filter = mQuery('#contactclient_filter');
-    if (typeof window.contactclientFilterLoaded === 'undefined' && $filter.length) {
+    var $filter = mQuery('#contactclient_filter:not(.hide):first');
+    if ($filter.length) {
+
 
-        window.contactclientFilterLoaded = true;
     }
 };
diff --git a/Assets/js/07.limits.js b/Assets/js/07.limits.js
@@ -1,9 +1,7 @@
 // Limits field.
 Mautic.contactclientLimits = function () {
-    var $limits = mQuery('#contactclient_limits');
-    if (typeof window.contactclientLimitsLoaded === 'undefined' && $limits.length) {
-
-        window.contactclientLimitsLoaded = true;
+    var $limits = mQuery('#contactclient_limits:not(.hide):first');
+    if ($limits.length) {
 
         var limitsJSONEditor;
 
diff --git a/Assets/js/08.schedule.js b/Assets/js/08.schedule.js
@@ -1,11 +1,9 @@
 // Schedule - Hours of Operation.
 Mautic.contactclientSchedule = function () {
 
-    var $scheduleHoursTarget = mQuery('#contactclient_schedule_hours_widget:first'),
-        $scheduleHoursSource = mQuery('#contactclient_schedule_hours:first');
-    if (typeof window.contactclientScheduleLoaded === 'undefined' && $scheduleHoursTarget.length && $scheduleHoursSource.length) {
-
-        window.contactclientScheduleLoaded = true;
+    var $scheduleHoursTarget = mQuery('#contactclient_schedule_hours_widget:not(.hide):first'),
+        $scheduleHoursSource = mQuery('#contactclient_schedule_hours:not(.hide):first');
+    if ($scheduleHoursTarget.length && $scheduleHoursSource.length) {
 
         var operationTime = $scheduleHoursSource.val();
         if (operationTime.length) {
diff --git a/Assets/js/10.timeline.js b/Assets/js/10.timeline.js
@@ -1,70 +1,65 @@
 Mautic.contactclientTimelineOnLoad = function (container, response) {
 
-    if (typeof window.contactclientTimelineLoaded === 'undefined') {
-
-        window.contactclientTimelineLoaded = true;
-
-        var codeMirror = function ($el) {
-            if (!$el.hasClass('codemirror-active')) {
-                var $textarea = $el.find('textarea.codeMirror-yaml');
-                if ($textarea.length) {
-                    CodeMirror.fromTextArea($textarea[0], {
-                        mode: 'yaml',
-                        theme: 'material',
-                        gutters: [],
-                        lineNumbers: false,
-                        lineWrapping: true,
-                        readOnly: true
-                    });
-                }
-                $el.addClass('codemirror-active');
-            }
-        };
-        mQuery('#contactclient-timeline a[data-activate-details=\'all\']').on('click', function () {
-            if (mQuery(this).find('span').first().hasClass('fa-level-down')) {
-                mQuery('#contactclient-timeline a[data-activate-details!=\'all\']').each(function () {
-                    var detailsId = mQuery(this).data('activate-details'),
-                        $details = mQuery('#timeline-details-' + detailsId);
-                    if (detailsId && $details.length) {
-                        $details.removeClass('hide');
-                        codeMirror($details);
-                        mQuery(this).addClass('active');
-                    }
-                });
-                mQuery(this).find('span').first().removeClass('fa-level-down').addClass('fa-level-up');
-            }
-            else {
-                mQuery('#contactclient-timeline a[data-activate-details!=\'all\']').each(function () {
-                    var detailsId = mQuery(this).data('activate-details'),
-                        $details = mQuery('#timeline-details-' + detailsId);
-                    if (detailsId && $details.length) {
-                        $details.addClass('hide');
-                        mQuery(this).removeClass('active');
-                    }
+    var codeMirror = function ($el) {
+        if (!$el.hasClass('codemirror-active')) {
+            var $textarea = $el.find('textarea.codeMirror-yaml');
+            if ($textarea.length) {
+                CodeMirror.fromTextArea($textarea[0], {
+                    mode: 'yaml',
+                    theme: 'material',
+                    gutters: [],
+                    lineNumbers: false,
+                    lineWrapping: true,
+                    readOnly: true
                 });
-                mQuery(this).find('span').first().removeClass('fa-level-up').addClass('fa-level-down');
             }
-        });
-        mQuery('#contactclient-timeline a[data-activate-details!=\'all\']').on('click', function () {
-            var detailsId = mQuery(this).data('activate-details');
-            if (detailsId && mQuery('#timeline-details-' + detailsId).length) {
-                var activateDetailsState = mQuery(this).hasClass('active'),
+            $el.addClass('codemirror-active');
+        }
+    };
+    mQuery('#contactclient-timeline a[data-activate-details=\'all\']').on('click', function () {
+        if (mQuery(this).find('span').first().hasClass('fa-level-down')) {
+            mQuery('#contactclient-timeline a[data-activate-details!=\'all\']').each(function () {
+                var detailsId = mQuery(this).data('activate-details'),
                     $details = mQuery('#timeline-details-' + detailsId);
-
-                if (activateDetailsState) {
-                    $details.addClass('hide');
-                    mQuery(this).removeClass('active');
-                }
-                else {
+                if (detailsId && $details.length) {
                     $details.removeClass('hide');
                     codeMirror($details);
                     mQuery(this).addClass('active');
                 }
-            }
-        });
+            });
+            mQuery(this).find('span').first().removeClass('fa-level-down').addClass('fa-level-up');
+        }
+        else {
+            mQuery('#contactclient-timeline a[data-activate-details!=\'all\']').each(function () {
+                var detailsId = mQuery(this).data('activate-details'),
+                    $details = mQuery('#timeline-details-' + detailsId);
+                if (detailsId && $details.length) {
+                    $details.addClass('hide');
+                    mQuery(this).removeClass('active');
+                }
+            });
+            mQuery(this).find('span').first().removeClass('fa-level-up').addClass('fa-level-down');
+        }
+    });
+    mQuery('#contactclient-timeline a[data-activate-details!=\'all\']').on('click', function () {
+        var detailsId = mQuery(this).data('activate-details');
+        if (detailsId && mQuery('#timeline-details-' + detailsId).length) {
+            var activateDetailsState = mQuery(this).hasClass('active'),
+                $details = mQuery('#timeline-details-' + detailsId);
 
-        if (response && typeof response.timelineCount !== 'undefined') {
-            mQuery('#TimelineCount').html(response.timelineCount);
+            if (activateDetailsState) {
+                $details.addClass('hide');
+                mQuery(this).removeClass('active');
+            }
+            else {
+                $details.removeClass('hide');
+                codeMirror($details);
+                mQuery(this).addClass('active');
+            }
         }
+    });
+
+    if (response && typeof response.timelineCount !== 'undefined') {
+        mQuery('#TimelineCount').html(response.timelineCount);
     }
 };
diff --git a/Assets/js/11.attribution.js b/Assets/js/11.attribution.js
@@ -1,9 +1,7 @@
 // Attribition (cost/revenue/finances)
 Mautic.contactclientAttribution = function () {
-    var $attribution = mQuery('#contactclient_attribution_settings:first');
-    if (typeof window.contactclientAttributionLoaded === 'undefined' && $attribution.length) {
-
-        window.contactclientAttributionLoaded = true;
+    var $attribution = mQuery('#contactclient_attribution_settings:not(.hide):first');
+    if ($attribution.length) {
 
         /**
          * Get all keys/fields from the API Payload responses.
diff --git a/Assets/js/12.duplicate.js b/Assets/js/12.duplicate.js
@@ -1,9 +1,7 @@
 // Duplicate field.
 Mautic.contactclientDuplicate = function () {
-    var $duplicate = mQuery('#contactclient_duplicate');
-    if (typeof window.contactclientDuplicateLoaded === 'undefined' && $duplicate.length) {
-
-        window.contactclientDuplicateLoaded = true;
+    var $duplicate = mQuery('#contactclient_duplicate:not(.hide):first');
+    if ($duplicate.length) {
 
         var duplicateJSONEditor;
 
@@ -60,6 +58,5 @@ Mautic.contactclientDuplicate = function () {
                 // mQuery('label[for=contactclient_duplicate]').addClass('hide');
             }
         });
-
     }
 };
diff --git a/Assets/json/api_payload.json b/Assets/json/api_payload.json
@@ -156,12 +156,12 @@
                     }
                   },
                   {
-                    "title": "Text",
+                    "title": "Raw",
                     "type": "string",
                     "format": "textarea",
                     "options": {
-                      "wysiwyg": true,
-                      "infoText": "Here you can customize the body as a raw string.",
+                      "codemirror": true,
+                      "infoText": "Here you can customize the body as a raw string. Keep in mind this must match the Request Format specified above.",
                       "collapsed": false,
                       "disable_collapse": true
                     }
