js/view/crm.designer.js

   1 (function($) {
   2   if (!CRM.Designer) CRM.Designer = {};
   3
   4   /**
   5    * When rendering a template with Marionette.ItemView, the list of variables is determined by
   6    * serializeData(). The normal behavior is to map each property of this.model to a template
   7    * variable.
   8    *
   9    * This function extends that practice by exporting variables "_view", "_model", "_collection",
  10    * and "_options". This makes it easier for the template to, e.g., access computed properties of
  11    * a model (by calling "_model.getComputedProperty"), or to access constructor options (by
  12    * calling "_options.myoption").
  13    *
  14    * @return {*}
  15    */
  16   var extendedSerializeData = function() {
  17     var result = Marionette.ItemView.prototype.serializeData.apply(this);
  18     result._view = this;
  19     result._model = this.model;
  20     result._collection = this.collection;
  21     result._options = this.options;
  22     return result;
  23   }
  24
  25   /**
  26    * Display a dialog window with an editable form for a UFGroupModel
  27    *
  28    * The implementation here is very "jQuery-style" and not "Backbone-style";
  29    * it's been extracted
  30    *
  31    * options:
  32    *  - model: CRM.UF.UFGroupModel
  33    */
  34   CRM.Designer.DesignerDialog = Backbone.Marionette.Layout.extend({
  35     serializeData: extendedSerializeData,
  36     template: '#designer_dialog_template',
  37     className: 'crm-designer-dialog',
  38     regions: {
  39       designerRegion: '.crm-designer'
  40     },
  41     /** @var bool whether this dialog is currently open */
  42     isDialogOpen: false,
  43     /** @var bool whether any changes have been made */
  44     isUfUnsaved: false,
  45     /** @var obj handle for the CRM.alert containing undo link */
  46     undoAlert: null,
  47     /** @var bool whether this dialog is being re-opened by the undo link */
  48     undoState: false,
  49
  50     initialize: function(options) {
  51       CRM.designerApp.vent.on('ufUnsaved', this.onUfChanged, this);
  52     },
  53     onClose: function() {
  54       this.undoAlert && this.undoAlert.close && this.undoAlert.close();
  55       CRM.designerApp.vent.off('ufUnsaved', this.onUfChanged, this);
  56     },
  57     onUfChanged: function(isUfUnsaved) {
  58       this.isUfUnsaved = isUfUnsaved;
  59     },
  60     onRender: function() {
  61       var designerDialog = this;
  62       designerDialog.$el.dialog({
  63         autoOpen: true, // note: affects accordion height
  64         title: 'Edit Profile',
  65         width: '75%',
  66         height: 600,
  67         minWidth: 500,
  68         minHeight: 600, // to allow dropping in big whitespace, coordinate with min-height of .crm-designer-fields
  69         open: function() {
  70           // Prevent conflicts with other onbeforeunload handlers
  71           designerDialog.oldOnBeforeUnload = window.onbeforeunload;
  72           // Warn of unsaved changes when navigating away from the page
  73           window.onbeforeunload = function() {
  74             if (designerDialog.isDialogOpen && designerDialog.isUfUnsaved) {
  75               return ts("Your profile has not been saved.");
  76             }
  77             if (designerDialog.oldOnBeforeUnload) {
  78               return designerDialog.oldOnBeforeUnload.apply(arguments);
  79             }
  80           };
  81           designerDialog.undoAlert && designerDialog.undoAlert.close && designerDialog.undoAlert.close();
  82           designerDialog.isDialogOpen = true;
  83           // Initialize new dialog if we are not re-opening unsaved changes
  84           if (designerDialog.undoState === false) {
  85             designerDialog.designerRegion && designerDialog.designerRegion.close && designerDialog.designerRegion.close();
  86             designerDialog.$el.block({message: 'Loading...', theme: true});
  87             designerDialog.options.findCreateUfGroupModel({
  88               onLoad: function(ufGroupModel) {
  89                 designerDialog.model = ufGroupModel;
  90                 var designerLayout = new CRM.Designer.DesignerLayout({
  91                   model: ufGroupModel,
  92                   el: '<div class="full-height"></div>'
  93                 });
  94                 designerDialog.$el.unblock();
  95                 designerDialog.designerRegion.show(designerLayout);
  96                 CRM.designerApp.vent.trigger('resize');
  97                 designerDialog.isUfUnsaved = false;
  98               }
  99             });
 100           }
 101           designerDialog.undoState = false;
 102         },
 103         close: function() {
 104           window.onbeforeunload = designerDialog.oldOnBeforeUnload;
 105           designerDialog.isDialogOpen = false;
 106
 107           designerDialog.undoAlert && designerDialog.undoAlert.close && designerDialog.undoAlert.close();
 108           if (designerDialog.isUfUnsaved) {
 109             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});
 110             $('.ui-notify-message a.crm-undo').click(function() {
 111               designerDialog.undoState = true;
 112               designerDialog.$el.dialog('open');
 113               return false;
 114             });
 115           }
 116         },
 117         resize: function() {
 118           CRM.designerApp.vent.trigger('resize');
 119         }
 120       });
 121     }
 122   });
 123
 124   /**
 125    * Display a complete form-editing UI, including canvas, palette, and
 126    * buttons.
 127    *
 128    * options:
 129    *  - model: CRM.UF.UFGroupModel
 130    */
 131   CRM.Designer.DesignerLayout = Backbone.Marionette.Layout.extend({
 132     serializeData: extendedSerializeData,
 133     template: '#designer_template',
 134     regions: {
 135       buttons: '.crm-designer-buttonset-region',
 136       palette: '.crm-designer-palette-region',
 137       form: '.crm-designer-form-region',
 138       fields: '.crm-designer-fields-region'
 139     },
 140     initialize: function() {
 141       CRM.designerApp.vent.on('resize', this.onResize, this);
 142     },
 143     onClose: function() {
 144       CRM.designerApp.vent.off('resize', this.onResize, this);
 145     },
 146     onRender: function() {
 147       this.buttons.show(new CRM.Designer.ToolbarView({
 148         model: this.model
 149       }));
 150       this.palette.show(new CRM.Designer.PaletteView({
 151         model: this.model
 152       }));
 153       this.form.show(new CRM.Designer.UFGroupView({
 154         model: this.model
 155       }));
 156       this.fields.show(new CRM.Designer.UFFieldCanvasView({
 157         model: this.model
 158       }));
 159     },
 160     onResize: function() {
 161       if (! this.hasResizedBefore) {
 162         this.hasResizedBefore = true;
 163         this.$('.crm-designer-toolbar').resizable({
 164           handles: 'w',
 165           maxWidth: 400,
 166           minWidth: 150,
 167           resize: function(event, ui) {
 168             $('.crm-designer-canvas').css('margin-right', (ui.size.width + 10) + 'px');
 169             $(this).css({left: '', height: ''});
 170           }
 171         }).css({left: '', height: ''});
 172       }
 173     }
 174   });
 175
 176   /**
 177    * Display toolbar with working button
 178    *
 179    * options:
 180    *  - model: CRM.UF.UFGroupModel
 181    */
 182   CRM.Designer.ToolbarView = Backbone.Marionette.ItemView.extend({
 183     serializeData: extendedSerializeData,
 184     template: '#designer_buttons_template',
 185     previewMode: false,
 186     events: {
 187       'click .crm-designer-save': 'doSave',
 188       'click .crm-designer-preview': 'doPreview'
 189     },
 190     onRender: function() {
 191       this.$('.crm-designer-save').button();
 192       this.$('.crm-designer-preview').button();
 193     },
 194     doSave: function(event) {
 195       var ufGroupModel = this.model;
 196       if (ufGroupModel.getRel('ufFieldCollection').hasDuplicates()) {
 197         CRM.alert(ts('Please correct errors before saving.'), '', 'alert');
 198         return;
 199       }
 200       var $dialog = this.$el.closest('.crm-designer-dialog'); // FIXME use events
 201       $dialog.block({message: 'Saving...', theme: true});
 202       var profile = ufGroupModel.toStrictJSON();
 203       profile["api.UFField.replace"] = {values: ufGroupModel.getRel('ufFieldCollection').toSortedJSON(), 'option.autoweight': 0};
 204       CRM.api('UFGroup', 'create', profile, {
 205         success: function(data) {
 206           $dialog.unblock();
 207           var error = false;
 208           if (data.is_error) {
 209             CRM.alert(data.error_message);
 210             error = true;
 211           }
 212           _.each(data.values, function(ufGroupResponse) {
 213             if (ufGroupResponse['api.UFField.replace'].is_error) {
 214               CRM.alert(ufGroupResponse['api.UFField.replace'].error_message);
 215               error = true;
 216             }
 217           });
 218           if (!error) {
 219             if (!ufGroupModel.get('id')) {
 220               ufGroupModel.set('id', data.id);
 221             }
 222             CRM.designerApp.vent.trigger('ufUnsaved', false);
 223             CRM.designerApp.vent.trigger('ufSaved');
 224             $dialog.dialog('close');
 225           }
 226         }
 227       });
 228       return false;
 229     },
 230     doPreview: function(event) {
 231       this.previewMode = !this.previewMode;
 232       if (!this.previewMode) {
 233         $('.crm-designer-preview-canvas').html('');
 234         $('.crm-designer-canvas > *, .crm-designer-palette-region').show();
 235         $('.crm-designer-preview span').html(ts('Preview'));
 236         return;
 237       }
 238       if (this.model.getRel('ufFieldCollection').hasDuplicates()) {
 239         CRM.alert(ts('Please correct errors before previewing.'), '', 'alert');
 240         return;
 241       }
 242       var $dialog = this.$el.closest('.crm-designer-dialog'); // FIXME use events
 243       $dialog.block({message: 'Loading...', theme: true});
 244       $.ajax({
 245         url: CRM.url("civicrm/ajax/inline"),
 246         type: 'POST',
 247         data: {
 248           'qfKey': CRM.profilePreviewKey,
 249           'class_name': 'CRM_UF_Form_Inline_Preview',
 250           'snippet': 1,
 251           'ufData': JSON.stringify({
 252             ufGroup: this.model.toStrictJSON(),
 253             ufFieldCollection: this.model.getRel('ufFieldCollection').toSortedJSON()
 254           })
 255         }
 256       }).done(function(data) {
 257         $dialog.unblock();
 258         $('.crm-designer-canvas > *, .crm-designer-palette-region').hide();
 259         $('.crm-designer-preview-canvas').html(data).show();
 260         $('.crm-designer-preview span').html(ts('Edit'));
 261       });
 262       return false;
 263     }
 264   });
 265
 266   /**
 267    * Display a selection of available fields
 268    *
 269    * options:
 270    *  - model: CRM.UF.UFGroupModel
 271    */
 272   CRM.Designer.PaletteView = Backbone.Marionette.ItemView.extend({
 273     serializeData: extendedSerializeData,
 274     template: '#palette_template',
 275     el: '<div class="full-height"></div>',
 276     events: {
 277       'keyup .crm-designer-palette-search input': 'doSearch',
 278       'click .crm-designer-palette-clear-search': 'clearSearch',
 279       'click .crm-designer-palette-refresh': 'doRefresh',
 280       'click .crm-designer-palette-toggle': 'toggleAll'
 281     },
 282     initialize: function() {
 283       this.model.getRel('ufFieldCollection')
 284         .on('add', this.toggleActive, this)
 285         .on('remove', this.toggleActive, this);
 286       this.model.getRel('paletteFieldCollection')
 287         .on('reset', this.render, this);
 288       CRM.designerApp.vent.on('resize', this.onResize, this);
 289     },
 290     onClose: function() {
 291       this.model.getRel('ufFieldCollection')
 292         .off('add', this.toggleActive, this)
 293         .off('remove', this.toggleActive, this);
 294       this.model.getRel('paletteFieldCollection')
 295         .off('reset', this.render, this);
 296       CRM.designerApp.vent.off('resize', this.onResize, this);
 297     },
 298     onRender: function() {
 299       var paletteView = this;
 300
 301       // Prepare data for jstree
 302       var treeData = [];
 303       var paletteFieldsByEntitySection = this.model.getRel('paletteFieldCollection').getFieldsByEntitySection();
 304
 305       paletteView.model.getRel('ufEntityCollection').each(function(ufEntityModel){
 306         _.each(ufEntityModel.getSections(), function(section, sectionKey){
 307           var entitySection = ufEntityModel.get('entity_name') + '-' + sectionKey;
 308           var items = [];
 309           if (paletteFieldsByEntitySection[entitySection]) {
 310             _.each(paletteFieldsByEntitySection[entitySection], function(paletteFieldModel, k) {
 311               items.push({data: paletteFieldModel.getLabel(), attr: {'class': 'crm-designer-palette-field', 'data-plm-cid': paletteFieldModel.cid}});
 312             });
 313           }
 314           if (section.is_addable) {
 315             items.push({data: 'placeholder', attr: {'class': 'crm-designer-palette-add', 'data-entity': ufEntityModel.get('entity_name'), 'data-section': sectionKey}});
 316           }
 317           if (items.length > 0) {
 318             treeData.push({data: section.title, children: items});
 319           }
 320         })
 321       });
 322
 323       this.$('.crm-designer-palette-tree').jstree({
 324         'json_data': {data: treeData},
 325         'search': {
 326           'case_insensitive' : true,
 327           'show_only_matches': true
 328         },
 329         themes: {
 330           "theme": 'classic',
 331           "dots": false,
 332           "icons": false,
 333           "url": CRM.config.resourceBase + 'packages/jquery/plugins/jstree/themes/classic/style.css'
 334         },
 335         'plugins': ['themes', 'json_data', 'ui', 'search']
 336       }).bind('loaded.jstree', function () {
 337         $('.crm-designer-palette-field', this).draggable({
 338           appendTo: '.crm-designer',
 339           zIndex: $(this.$el).zIndex() + 5000,
 340           helper: 'clone',
 341           connectToSortable: '.crm-designer-fields' // FIXME: tight canvas/palette coupling
 342         });
 343         $('.crm-designer-palette-field', this).dblclick(function(event){
 344           var paletteFieldModel = paletteView.model.getRel('paletteFieldCollection').get($(event.currentTarget).attr('data-plm-cid'));
 345           paletteFieldModel.addToUFCollection(paletteView.model.getRel('ufFieldCollection'));
 346           event.stopPropagation();
 347         });
 348         paletteView.model.getRel('ufFieldCollection').each(function(ufFieldModel) {
 349           paletteView.toggleActive(ufFieldModel, paletteView.model.getRel('ufFieldCollection'))
 350         });
 351         paletteView.$('.crm-designer-palette-add a').remove();
 352         paletteView.$('.crm-designer-palette-add').append('<button>'+ts('Add Field')+'</button>');
 353         paletteView.$('.crm-designer-palette-add button').button()
 354           .click(function(event){
 355             var entityKey = $(event.currentTarget).closest('.crm-designer-palette-add').attr('data-entity');
 356             var sectionKey = $(event.currentTarget).closest('.crm-designer-palette-add').attr('data-section');
 357             var ufEntityModel = paletteView.model.getRel('ufEntityCollection').getByName(entityKey);
 358             var sections = ufEntityModel.getSections();
 359             paletteView.doAddField(sections[sectionKey]);
 360             event.stopPropagation();
 361           })
 362         ;
 363       }).bind("select_node.jstree", function (e, data) {
 364         $(this).jstree("toggle_node", data.rslt.obj);
 365         $(this).jstree("deselect_node", data.rslt.obj);
 366       });
 367
 368       // FIXME: tight canvas/palette coupling
 369       this.$(".crm-designer-fields").droppable({
 370         activeClass: "ui-state-default",
 371         hoverClass: "ui-state-hover",
 372         accept: ":not(.ui-sortable-helper)"
 373       });
 374
 375       this.onResize();
 376     },
 377     onResize: function() {
 378       var pos = this.$('.crm-designer-palette-tree').position();
 379       var div = this.$('.crm-designer-palette-tree').closest('.crm-container').height();
 380       this.$('.crm-designer-palette-tree').css({height: div - pos.top});
 381     },
 382     doSearch: function(event) {
 383       $('.crm-designer-palette-tree').jstree("search", $(event.target).val());
 384     },
 385     doAddField: function(section) {
 386       var paletteView = this;
 387       var openAddNewWindow = function() {
 388         var url = CRM.url('civicrm/admin/custom/group/field/add', {
 389           reset: 1,
 390           action: 'add',
 391           gid: section.custom_group_id
 392         });
 393         window.open(url, '_blank');
 394       };
 395
 396       if (paletteView.hideAddFieldAlert) {
 397         openAddNewWindow();
 398       } else {
 399         CRM.confirm(function() {
 400             paletteView.hideAddFieldAlert = true;
 401             openAddNewWindow();
 402           }, {
 403             title: ts('Add Field'),
 404             message: ts('A new window or tab will open. Use the new window to add your field, and then return to this window and click "Refresh."')
 405           }
 406         );
 407       }
 408       return false;
 409     },
 410     doRefresh: function(event) {
 411       var ufGroupModel = this.model;
 412       CRM.Schema.reloadModels()
 413         .done(function(data){
 414           ufGroupModel.resetEntities();
 415         })
 416         .fail(function() {
 417           CRM.alert(ts('Failed to retrieve schema'), ts('Error'), 'error');
 418         });
 419       return false;
 420     },
 421     clearSearch: function(event) {
 422       $('.crm-designer-palette-search input').val('').keyup();
 423       return false;
 424     },
 425     toggleActive: function(ufFieldModel, ufFieldCollection, options) {
 426       var paletteFieldCollection = this.model.getRel('paletteFieldCollection');
 427       var paletteFieldModel = paletteFieldCollection.getFieldByName(ufFieldModel.get('entity_name'), ufFieldModel.get('field_name'));
 428       var isAddable = ufFieldCollection.isAddable(ufFieldModel);
 429       this.$('[data-plm-cid='+paletteFieldModel.cid+']').toggleClass('disabled', !isAddable);
 430     },
 431     toggleAll: function(event) {
 432       if ($('.crm-designer-palette-search input').val() == '') {
 433         $('.crm-designer-palette-tree').jstree($(event.target).attr('rel'));
 434       }
 435       return false;
 436     }
 437   });
 438
 439   /**
 440    * Display all UFFieldModel objects in a UFGroupModel.
 441    *
 442    * options:
 443    *  - model: CRM.UF.UFGroupModel
 444    */
 445   CRM.Designer.UFFieldCanvasView = Backbone.Marionette.View.extend({
 446     initialize: function() {
 447       this.model.getRel('ufFieldCollection')
 448         .on('add', this.updatePlaceholder, this)
 449         .on('remove', this.updatePlaceholder, this)
 450         .on('add', this.addUFFieldView, this);
 451     },
 452     onClose: function() {
 453       this.model.getRel('ufFieldCollection')
 454         .off('add', this.updatePlaceholder, this)
 455         .off('remove', this.updatePlaceholder, this)
 456         .off('add', this.addUFFieldView, this);
 457     },
 458     render: function() {
 459       var ufFieldCanvasView = this;
 460       this.$el.html(_.template($('#field_canvas_view_template').html()));
 461
 462       // BOTTOM: Setup field-level editing
 463       var $fields = this.$('.crm-designer-fields');
 464       this.updatePlaceholder();
 465       var ufFieldModels = this.model.getRel('ufFieldCollection').sortBy(function(ufFieldModel) {
 466         return parseInt(ufFieldModel.get('weight'));
 467       });
 468       _.each(ufFieldModels, function(ufFieldModel) {
 469         ufFieldCanvasView.addUFFieldView(ufFieldModel, ufFieldCanvasView.model.getRel('ufFieldCollection'), {skipWeights: true});
 470       });
 471       this.$(".crm-designer-fields").sortable({
 472         placeholder: 'crm-designer-row-placeholder',
 473         forcePlaceholderSize: true,
 474         receive: function(event, ui) {
 475           var paletteFieldModel = ufFieldCanvasView.model.getRel('paletteFieldCollection').get(ui.item.attr('data-plm-cid'));
 476           var ufFieldModel = paletteFieldModel.addToUFCollection(
 477             ufFieldCanvasView.model.getRel('ufFieldCollection'),
 478             {skipWeights: true}
 479           );
 480           if (null == ufFieldModel) {
 481             ufFieldCanvasView.$('.crm-designer-fields .ui-draggable').remove();
 482           } else {
 483             // Move from end to the 'dropped' position
 484             var ufFieldViewEl = ufFieldCanvasView.$('div[data-field-cid='+ufFieldModel.cid+']').parent();
 485             ufFieldCanvasView.$('.crm-designer-fields .ui-draggable').replaceWith(ufFieldViewEl);
 486           }
 487           // note: the sortable() update callback will call updateWeight
 488         },
 489         update: function() {
 490           ufFieldCanvasView.updateWeights();
 491         }
 492       });
 493     },
 494     /** Determine visual order of fields and set the model values for "weight" */
 495     updateWeights: function() {
 496       var ufFieldCanvasView = this;
 497       var weight = 1;
 498       var rows = this.$('.crm-designer-row').each(function(key, row) {
 499         if ($(row).hasClass('placeholder')) {
 500           return;
 501         }
 502         var ufFieldCid = $(row).attr('data-field-cid');
 503         var ufFieldModel = ufFieldCanvasView.model.getRel('ufFieldCollection').get(ufFieldCid);
 504         ufFieldModel.set('weight', weight);
 505         weight++;
 506       });
 507     },
 508     addUFFieldView: function(ufFieldModel, ufFieldCollection, options) {
 509       var paletteFieldModel = this.model.getRel('paletteFieldCollection').getFieldByName(ufFieldModel.get('entity_name'), ufFieldModel.get('field_name'));
 510       var ufFieldView = new CRM.Designer.UFFieldView({
 511         el: $("<div></div>"),
 512         model: ufFieldModel,
 513         paletteFieldModel: paletteFieldModel
 514       });
 515       ufFieldView.render();
 516       this.$('.crm-designer-fields').append(ufFieldView.$el);
 517       if (! (options && options.skipWeights)) {
 518         this.updateWeights();
 519       }
 520     },
 521     updatePlaceholder: function() {
 522       if (this.model.getRel('ufFieldCollection').isEmpty()) {
 523         this.$('.placeholder').css({display: 'block', border: '0 none', cursor: 'default'});
 524       } else {
 525         this.$('.placeholder').hide();
 526       }
 527     }
 528   });
 529
 530   /**
 531    * options:
 532    * - model: CRM.UF.UFFieldModel
 533    * - paletteFieldModel: CRM.Designer.PaletteFieldModel
 534    */
 535   CRM.Designer.UFFieldView = Backbone.Marionette.Layout.extend({
 536     serializeData: extendedSerializeData,
 537     template: '#field_row_template',
 538     expanded: false,
 539     regions: {
 540       summary: '.crm-designer-field-summary',
 541       detail: '.crm-designer-field-detail'
 542     },
 543     events: {
 544       "click .crm-designer-action-settings": 'doToggleForm',
 545       "click .crm-designer-action-remove": 'doRemove'
 546     },
 547     modelEvents: {
 548       "destroy": 'remove',
 549       "change:is_duplicate": 'onChangeIsDuplicate'
 550     },
 551     onRender: function() {
 552       this.summary.show(new CRM.Designer.UFFieldSummaryView({
 553         model: this.model,
 554         fieldSchema: this.model.getFieldSchema(),
 555         paletteFieldModel: this.options.paletteFieldModel
 556       }));
 557       this.detail.show(new CRM.Designer.UFFieldDetailView({
 558         model: this.model,
 559         fieldSchema: this.model.getFieldSchema()
 560       }));
 561       this.onChangeIsDuplicate(this.model, this.model.get('is_duplicate'))
 562       if (!this.expanded) {
 563         this.detail.$el.hide();
 564       }
 565       var that = this;
 566       CRM.designerApp.vent.on('formOpened', function(event) {
 567         if (that.expanded && event != that.cid) {
 568           that.doToggleForm(false);
 569         }
 570       });
 571     },
 572     doToggleForm: function(event) {
 573       this.expanded = !this.expanded;
 574       if (this.expanded && event !== false) {
 575         CRM.designerApp.vent.trigger('formOpened', this.cid);
 576       }
 577       this.$el.toggleClass('crm-designer-open', this.expanded);
 578       var $detail = this.detail.$el;
 579       if (!this.expanded) {
 580         $detail.toggle('blind', 250);
 581       }
 582       else {
 583         var $canvas = $('.crm-designer-canvas');
 584         var top = $canvas.offset().top;
 585         $detail.slideDown({
 586           duration: 250,
 587           step: function(num, effect) {
 588             // Scroll canvas to keep field details visible
 589             if (effect.prop == 'height') {
 590               if (effect.now + $detail.offset().top - top > $canvas.height() - 9) {
 591                 $canvas.scrollTop($canvas.scrollTop() + effect.now + $detail.offset().top - top - $canvas.height() + 9);
 592               }
 593             }
 594           }
 595         });
 596       }
 597     },
 598     onChangeIsDuplicate: function(model, value, options) {
 599       this.$el.toggleClass('crm-designer-duplicate', value);
 600     },
 601     doRemove: function(event) {
 602       var that = this;
 603       this.$el.hide(250, function() {
 604         that.model.destroyLocal();
 605       });
 606     }
 607   });
 608
 609   /**
 610    * options:
 611    * - model: CRM.UF.UFFieldModel
 612    * - fieldSchema: (Backbone.Form schema element)
 613    * - paletteFieldModel: CRM.Designer.PaletteFieldModel
 614    */
 615   CRM.Designer.UFFieldSummaryView = Backbone.Marionette.ItemView.extend({
 616     serializeData: extendedSerializeData,
 617     template: '#field_summary_template',
 618     modelEvents: {
 619       'change': 'render'
 620     },
 621
 622     /**
 623      * Compose a printable string which describes the binding of this UFField to the data model
 624      * @return {String}
 625      */
 626     getBindingLabel: function() {
 627       var result = this.options.paletteFieldModel.getSection().title + ": " + this.options.paletteFieldModel.getLabel();
 628       if (this.options.fieldSchema.civiIsPhone) {
 629         result = result + '-' + CRM.PseudoConstant.phoneType[this.model.get('phone_type_id')];
 630       }
 631       if (this.options.fieldSchema.civiIsLocation) {
 632         var locType = this.model.get('location_type_id') ? CRM.PseudoConstant.locationType[this.model.get('location_type_id')] : ts('Primary');
 633         result = result + ' (' + locType + ')';
 634       }
 635       return result;
 636     },
 637
 638     /**
 639      * Return a string marking if the field is required
 640      * @return {String}
 641      */
 642     getRequiredMarker: function() {
 643       if (this.model.get('is_required') == 1) {
 644         return ' <span class="crm-marker">*</span> ';
 645       }
 646       return '';
 647     },
 648
 649     onRender: function() {
 650       this.$el.toggleClass('disabled', this.model.get('is_active') != 1);
 651       if (this.model.get("is_reserved") == 1) {
 652         this.$('.crm-designer-buttons').hide();
 653       }
 654     }
 655   });
 656
 657   /**
 658    * options:
 659    * - model: CRM.UF.UFFieldModel
 660    * - fieldSchema: (Backbone.Form schema element)
 661    */
 662   CRM.Designer.UFFieldDetailView = Backbone.View.extend({
 663     initialize: function() {
 664       // FIXME: hide/display 'in_selector' if 'visibility' is one of the public options
 665       var fields = ['location_type_id', 'phone_type_id', 'label', 'is_multi_summary', 'is_required', 'is_view', 'visibility', 'in_selector', 'is_searchable', 'help_pre', 'help_post', 'is_active'];
 666       if (! this.options.fieldSchema.civiIsLocation) {
 667         fields = _.without(fields, 'location_type_id');
 668       }
 669       if (! this.options.fieldSchema.civiIsPhone) {
 670         fields = _.without(fields, 'phone_type_id');
 671       }
 672       if (!this.options.fieldSchema.civiIsMultiple) {
 673         fields = _.without(fields, 'is_multi_summary');
 674       }
 675
 676       this.form = new Backbone.Form({
 677         model: this.model,
 678         fields: fields
 679       });
 680       this.form.on('change', this.onFormChange, this);
 681       this.model.on('change', this.onModelChange, this);
 682     },
 683     render: function() {
 684       this.$el.html(this.form.render().el);
 685       this.onFormChange();
 686     },
 687     onModelChange: function() {
 688       $.each(this.form.fields, function(i, field) {
 689         this.form.setValue(field.key, this.model.get(field.key));
 690       });
 691     },
 692     onFormChange: function() {
 693       this.form.commit();
 694       this.$('.field-is_multi_summary').toggle(this.options.fieldSchema.civiIsMultiple ? true : false);
 695       this.$('.field-in_selector').toggle(this.model.isInSelectorAllowed());
 696       // this.$(':input').attr('disabled', this.model.get("is_reserved") == 1);
 697
 698       if (!this.model.isInSelectorAllowed() && this.model.get('in_selector') != "0") {
 699         this.model.set('in_selector', "0");
 700         this.form.setValue('in_selector', "0");
 701         // TODO: It might be nicer if we didn't completely discard in_selector -- e.g.
 702         // if the value could be restored when the user isInSelectorAllowed becomes true
 703         // again. However, I haven't found a simple way to do this.
 704       }
 705     }
 706   });
 707
 708   /**
 709    * options:
 710    * - model: CRM.UF.UFGroupModel
 711    */
 712   CRM.Designer.UFGroupView = Backbone.Marionette.Layout.extend({
 713     serializeData: extendedSerializeData,
 714     template: '#form_row_template',
 715     expanded: false,
 716     regions: {
 717       summary: '.crm-designer-form-summary',
 718       detail: '.crm-designer-form-detail'
 719     },
 720     events: {
 721       "click .crm-designer-action-settings": 'doToggleForm'
 722     },
 723     onRender: function() {
 724       this.summary.show(new CRM.Designer.UFGroupSummaryView({
 725         model: this.model
 726       }));
 727       this.detail.show(new CRM.Designer.UFGroupDetailView({
 728         model: this.model
 729       }));
 730       if (!this.expanded) {
 731         this.detail.$el.hide();
 732       }
 733       var that = this;
 734       CRM.designerApp.vent.on('formOpened', function(event) {
 735         if (that.expanded && event !== 0) {
 736           that.doToggleForm(false);
 737         }
 738       });
 739     },
 740     doToggleForm: function(event) {
 741       this.expanded = !this.expanded;
 742       if (this.expanded && event !== false) {
 743         CRM.designerApp.vent.trigger('formOpened', 0);
 744       }
 745       this.$el.toggleClass('crm-designer-open', this.expanded);
 746       this.detail.$el.toggle('blind', 250);
 747     }
 748   });
 749
 750   /**
 751    * options:
 752    * - model: CRM.UF.UFGroupModel
 753    */
 754   CRM.Designer.UFGroupSummaryView = Backbone.Marionette.ItemView.extend({
 755     serializeData: extendedSerializeData,
 756     template: '#form_summary_template',
 757     modelEvents: {
 758       'change': 'render'
 759     },
 760     onRender: function() {
 761       this.$el.toggleClass('disabled', this.model.get('is_active') != 1);
 762       if (this.model.get("is_reserved") == 1) {
 763         this.$('.crm-designer-buttons').hide();
 764       }
 765     }
 766   });
 767
 768   /**
 769    * options:
 770    * - model: CRM.UF.UFGroupModel
 771    */
 772   CRM.Designer.UFGroupDetailView = Backbone.View.extend({
 773     initialize: function() {
 774       this.form = new Backbone.Form({
 775         model: this.model,
 776         fields: ['title', 'help_pre', 'help_post', 'is_active']
 777       });
 778       this.form.on('change', this.form.commit, this.form);
 779     },
 780     render: function() {
 781       this.$el.html(this.form.render().el);
 782     }
 783   });
 784
 785 })(cj);