ProfileBuilder - general updates for 4.5
authorColeman Watts <coleman@civicrm.org>
Tue, 8 Apr 2014 14:44:17 +0000 (10:44 -0400)
committerColeman Watts <coleman@civicrm.org>
Tue, 8 Apr 2014 14:44:17 +0000 (10:44 -0400)
css/crm.designer.css
js/crm.designerapp.js
js/view/crm.designer.js
js/view/crm.profile-selector.js
templates/CRM/UF/Form/Preview.tpl
templates/CRM/UF/Page/ProfileTemplates.tpl

index 1b997689c7c224eb07e6297298a02f8fcf8ef496..1196c45fb4b4cd5630b00dff3f4d5e5b0427177c 100644 (file)
@@ -244,6 +244,6 @@ button#crm-designer-add-custom-set {
 }
 
 /* Hide annoying 'preview' message */
-.crm-profile-selector-preview-pane > div.messages.status.info {
+.crm-profile-selector-preview-pane div.profile-preview-msg {
   display: none;
 }
index 2b049a0c0f92ffb6df264ea4305bdc6506a1b206..d0a0c1aa33a9541c49d82cbe00a9a0219e6a0c49 100644 (file)
@@ -16,7 +16,7 @@
      * @see CRM-12188
      */
     CRM.designerApp.clearPreviewArea = function () {
-      $('.crm-profile-selector-preview-pane > .crm-form-block').each(function () {
+      $('.crm-profile-selector-preview-pane > .crm-container-snippet').each(function () {
         var parent = $(this).parent();
         CRM.designerApp.DetachedProfiles.push({
           parent: parent,
index dba7d32b2980e236fbe55e924404ec65504eaa83..c9e6a1e2c401dcb37e68016fdcb5c32b494f8bf6 100644 (file)
       var designerDialog = this;
       designerDialog.$el.dialog({
         autoOpen: true, // note: affects accordion height
-        title: 'Edit Profile',
+        title: ts('Edit Profile'),
+        modal: true,
         width: '75%',
-        height: 600,
+        height: parseInt($(window).height() *.8, 10),
         minWidth: 500,
         minHeight: 600, // to allow dropping in big whitespace, coordinate with min-height of .crm-designer-fields
         open: function() {
@@ -83,7 +84,7 @@
           // Initialize new dialog if we are not re-opening unsaved changes
           if (designerDialog.undoState === false) {
             designerDialog.designerRegion && designerDialog.designerRegion.close && designerDialog.designerRegion.close();
-            designerDialog.$el.block({message: 'Loading...', theme: true});
+            designerDialog.$el.block();
             designerDialog.options.findCreateUfGroupModel({
               onLoad: function(ufGroupModel) {
                 designerDialog.model = ufGroupModel;
           designerDialog.undoAlert && designerDialog.undoAlert.close && designerDialog.undoAlert.close();
           if (designerDialog.isUfUnsaved) {
             designerDialog.undoAlert = CRM.alert('<p>' + ts('Your changes to "%1" have not been saved.', {1: designerDialog.model.get('title')}) + '</p><a href="#" class="crm-undo">' + ts('Restore unsaved changes') + '</a>', ts('Unsaved Changes'), 'alert', {expires: 60000});
-            $('.ui-notify-message a.crm-undo').click(function() {
+            $('.ui-notify-message a.crm-undo').click(function(e) {
+              e.preventDefault();
               designerDialog.undoState = true;
               designerDialog.$el.dialog('open');
-              return false;
             });
           }
           // CRM-12188
         this.$('.crm-designer-save').removeAttr('style').prop('disabled', false);
       }
     },
-    doSave: function(event) {
+    doSave: function(e) {
+      e.preentDefault();
       var ufGroupModel = this.model;
       if (ufGroupModel.getRel('ufFieldCollection').hasDuplicates()) {
         CRM.alert(ts('Please correct errors before saving.'), '', 'alert');
           }
         }
       });
-      return false;
     },
-    doPreview: function(event) {
+    doPreview: function(e) {
+      e.preventDefault();
       this.previewMode = !this.previewMode;
       if (!this.previewMode) {
         $('.crm-designer-preview-canvas').html('');
       $dialog.block({message: 'Loading...', theme: true});
       // CRM-12188
       CRM.designerApp.clearPreviewArea();
-      $.ajax({
-        url: CRM.url("civicrm/ajax/inline"),
-        type: 'POST',
-        data: {
-          'qfKey': CRM.profilePreviewKey,
-          'class_name': 'CRM_UF_Form_Inline_Preview',
-          'snippet': 1,
-          'ufData': JSON.stringify({
-            ufGroup: this.model.toStrictJSON(),
-            ufFieldCollection: this.model.getRel('ufFieldCollection').toSortedJSON()
-          })
-        }
+      $.post(CRM.url("civicrm/ajax/inline"), {
+        'qfKey': CRM.profilePreviewKey,
+        'class_name': 'CRM_UF_Form_Inline_Preview',
+        'snippet': 1,
+        'ufData': JSON.stringify({
+          ufGroup: this.model.toStrictJSON(),
+          ufFieldCollection: this.model.getRel('ufFieldCollection').toSortedJSON()
+        })
       }).done(function(data) {
         $dialog.unblock();
         $('.crm-designer-canvas > *, .crm-designer-palette-region').hide();
-        $('.crm-designer-preview-canvas').html(data).show();
+        $('.crm-designer-preview-canvas').html(data).show().trigger('crmLoad').find(':input').prop('readOnly', true);
         $('.crm-designer-preview span').html(ts('Edit'));
       });
-      return false;
     }
   });
 
       var div = this.$('.crm-designer-palette-tree').closest('.crm-container').height();
       this.$('.crm-designer-palette-tree').css({height: div - pos.top});
     },
-    doSearch: function(event) {
-      $('.crm-designer-palette-tree').jstree("search", $(event.target).val());
+    doSearch: function(e) {
+      var str = $(e.target).val();
+      this.$('.crm-designer-palette-clear-search').css('visibility', str ? 'visible' : 'hidden');
+      this.$('.crm-designer-palette-tree').jstree("search", str);
     },
     doSetPaletteEntity: function(event) {
       this.selectedContactType = $('.crm-contact-types :selected').val();
       paletteFieldModel.addToUFCollection(this.model.getRel('ufFieldCollection'));
       event.stopPropagation();
     },
-    doNewCustomFieldDialog: function(event) {
+    doNewCustomFieldDialog: function(e) {
+      e.preventDefault();
       var paletteView = this;
-      var entityKey = $(event.currentTarget).closest('.crm-designer-palette-section').attr('data-entity');
-      var sectionKey = $(event.currentTarget).closest('.crm-designer-palette-section').attr('data-section');
+      var entityKey = $(e.currentTarget).closest('.crm-designer-palette-section').attr('data-entity');
+      var sectionKey = $(e.currentTarget).closest('.crm-designer-palette-section').attr('data-section');
       var ufEntityModel = paletteView.model.getRel('ufEntityCollection').getByName(entityKey);
       var sections = ufEntityModel.getSections();
       var url = CRM.url('civicrm/admin/custom/group/field/add', {
       CRM.loadForm(url).on('crmFormSuccess', function(e, data) {
         paletteView.doRefresh('custom_' + data.id);
       });
-      return false;
     },
-    doNewCustomSetDialog: function(event) {
+    doNewCustomSetDialog: function(e) {
+      e.preventDefault();
       var paletteView = this;
       var url = CRM.url('civicrm/admin/custom/group', 'action=add&reset=1');
       // Create custom field set and automatically go to next step (create fields) after save button is clicked.
           data.customField && ($(this).data('civiCrmSnippet').options.crmForm.refreshAction = ['next_new']);
           paletteView.doRefresh(data.customField ? 'custom_' + data.id : null);
         });
-      return false;
     },
     doRefresh: function(fieldToAdd) {
       var ufGroupModel = this.model;
           CRM.alert(ts('Failed to retrieve schema'), ts('Error'), 'error');
         });
     },
-    clearSearch: function(event) {
+    clearSearch: function(e) {
+      e.preventDefault();
       $('.crm-designer-palette-search input').val('').keyup();
-      return false;
     },
     toggleActive: function(ufFieldModel, ufFieldCollection, options) {
       var paletteFieldCollection = this.model.getRel('paletteFieldCollection');
         this.$('[data-plm-cid='+paletteFieldModel.cid+']').toggleClass('disabled', !isAddable);
       }
     },
-    toggleAll: function(event) {
+    toggleAll: function(e) {
       if ($('.crm-designer-palette-search input').val() == '') {
-        $('.crm-designer-palette-tree').jstree($(event.target).attr('rel'));
+        $('.crm-designer-palette-tree').jstree($(e.target).attr('rel'));
       }
-      return false;
+      e.preventDefault();
     },
     getOpenTreeNodes: function() {
       var paletteView = this;
         }
       }
     },
-    doEditCustomField: function() {
+    doEditCustomField: function(e) {
+      e.preventDefault();
       var url = CRM.url('civicrm/admin/custom/group/field/update', {
         action: 'update',
         reset: 1,
             var buttons = {};
             buttons[$link.text()] = function() {
               var form2 = CRM.loadForm($link.attr('href'), {
-                openInline: 'a.action-item:not([href="#"])',
                 dialog: {
                   width: '60%',
                   height: '70%'
                 }
               });
-            }
+            };
             $(this).dialog('option', 'buttons', buttons);
           }
-        })
-      return false;
+        });
     },
     onChangeIsDuplicate: function(model, value, options) {
       this.$el.toggleClass('crm-designer-duplicate', value);
index 6521f195726395c2e9fb5e27f8b969630f86313d..f36c8f2313bf9a06179842dc943f4c60d7d34e45 100644 (file)
       'change .crm-profile-selector-select select': 'onChangeUfGroupId',
       'click .crm-profile-selector-edit': 'doEdit',
       'click .crm-profile-selector-copy': 'doCopy',
-      'click .crm-profile-selector-create': 'doCreate'
+      'click .crm-profile-selector-create': 'doCreate',
+      // prevent interaction with preview form
+      'click .crm-profile-selector-preview-pane': false,
+      'crmLoad .crm-profile-selector-preview-pane': 'disableForm'
     },
     /** @var Marionette.View which specifically builds on jQuery-UI's dialog */
     activeDialog: null,
     },
     doPreview: function() {
       var $pane = this.$('.crm-profile-selector-preview-pane');
-
       if (!this.hasUfGroupId()) {
         $pane.html($('#profile_selector_empty_preview_template').html());
-        return;
+      } else {
+        CRM.loadPage(CRM.url("civicrm/ajax/inline", {class_name: 'CRM_UF_Form_Inline_PreviewById', id: this.getUfGroupId()}), {target: $pane});
       }
-
-      $pane.block({message: ts('Loading...'), theme: true});
-      $.ajax({
-        url: CRM.url("civicrm/ajax/inline"),
-        type: 'GET',
-        data: {
-          class_name: 'CRM_UF_Form_Inline_PreviewById',
-          id: this.getUfGroupId(),
-          snippet: 4
-        }
-      }).done(function(data) {
-        $pane
-          .unblock()
-          .html(data)
-          .click(function() {
-            return false; // disable buttons
-          });
-      });
-      return false;
     },
-    doEdit: function() {
+    disableForm: function() {
+      this.$(':input', '.crm-profile-selector-preview-pane').prop('readOnly', true);
+    },
+    doEdit: function(e) {
+      e.preventDefault();
       var profileSelectorView = this;
       var designerDialog = new CRM.Designer.DesignerDialog({
         findCreateUfGroupModel: function(options) {
       });
       CRM.designerApp.vent.on('ufSaved', this.onSave, this);
       this.setDialog(designerDialog);
-      return false;
     },
-    doCopy: function() {
+    doCopy: function(e) {
+      e.preventDefault();
       // This is largely the same as doEdit, but we ultimately pass in a deepCopy of the ufGroupModel.
       var profileSelectorView = this;
       var designerDialog = new CRM.Designer.DesignerDialog({
       });
       CRM.designerApp.vent.on('ufSaved', this.onSave, this);
       this.setDialog(designerDialog);
-      return false;
     },
-    doCreate: function() {
+    doCreate: function(e) {
+      e.preventDefault();
       var profileSelectorView = this;
       var designerDialog = new CRM.Designer.DesignerDialog({
         findCreateUfGroupModel: function(options) {
       });
       CRM.designerApp.vent.on('ufSaved', this.onSave, this);
       this.setDialog(designerDialog);
-      return false;
     },
     onSave: function() {
       CRM.designerApp.vent.off('ufSaved', this.onSave, this);
index 5ac9cedced41805d2c9890085f24a5c56614f740..c24e344faaffb8f00d4de9e6727ee312bd66907d 100644 (file)
  | see the CiviCRM license FAQ at http://civicrm.org/licensing        |
  +--------------------------------------------------------------------+
 *}
-{capture assign=infoTitle}{ts}Preview Mode{/ts}{/capture}
-{assign var="infoType" value="info"}
 {if $previewField}
-  {capture assign=infoMessage}<strong>{ts}Profile Field Preview{/ts}</strong>{/capture}
+  {capture assign=infoTitle}{ts}Profile Field Preview{/ts}{/capture}
 {else}
-  {capture assign=infoMessage}<strong>{ts}Profile Preview{/ts}</strong>{/capture}
+  {capture assign=infoTitle}{ts}Profile Preview{/ts}{/capture}
 {/if}
-{include file="CRM/common/info.tpl"}
+{include file="CRM/common/info.tpl" infoType="no-popup profile-preview-msg" infoMessage=" "}
 <div class="crm-form-block">
 
 {if ! empty( $fields )}
index 6bb4968da423f724acecbf4bad1f733138d3890c..06a0f782fbc70f920ee032fa2bb4137ae93538d5 100644 (file)
@@ -27,7 +27,7 @@
     <div class="crm-designer-palette-search">
       <div class="crm-filter-objects">
         <span>{ts}Contact Type{/ts}:
-          <select class="crm-contact-types">
+          <select class="crm-form-select crm-contact-types">
           <option value="IndividualModel">{ts}Individual{/ts}</option>
           <option value="OrganizationModel">{ts}Organization{/ts}</option>
           <option value="HouseholdModel">{ts}Household{/ts}</option>
@@ -35,8 +35,8 @@
         </span>
       </div>
       <hr>
-      <input type="text" placeholder="{ts}Search Fields{/ts}" />
-      <a class="crm-designer-palette-clear-search" href="#" title="{ts}Clear search{/ts}"><img src="{$config->resourceBase}i/close.png" class="action-icon" alt="X" /></a>
+      <input type="text" class="crm-form-text" placeholder="{ts}Search Fields{/ts}" />
+      <a class="crm-designer-palette-clear-search crm-hover-button" href="#" style="visibility:hidden" title="{ts}Clear search{/ts}"><span class="icon close-icon"></span></a>
       <div class="crm-designer-palette-controls">
         <a href="#" class="crm-designer-palette-toggle" rel="open_all">{ts}Open All{/ts}</a>&nbsp; |&nbsp;
         <a href="#" class="crm-designer-palette-toggle" rel="close_all">{ts}Close All{/ts}</a>