crm.fsf.org/20131203/files/sites/all/modules-new/civicrm/packages/backbone-forms/distribution/templates/default.js

   1 /**
   2  * Include this file _after_ the main backbone-forms file to override the default templates.
   3  * You only need to include templates you want to override.
   4  *
   5  * Requirements when customising templates:
   6  * - Each template must have one 'parent' element tag.
   7  * - "data-type" attributes are required.
   8  * - The main placeholder tags such as the following are required: fieldsets, fields
   9  */
  10 ;(function() {
  11   var Form = Backbone.Form;
  12
  13
  14   //DEFAULT TEMPLATES
  15   Form.setTemplates({
  16
  17     //HTML
  18     form: '\
  19       <form class="bbf-form">{{fieldsets}}</form>\
  20     ',
  21
  22     fieldset: '\
  23       <fieldset>\
  24         <legend>{{legend}}</legend>\
  25         <ul>{{fields}}</ul>\
  26       </fieldset>\
  27     ',
  28
  29     field: '\
  30       <li class="bbf-field field-{{key}}">\
  31         <label for="{{id}}">{{title}}</label>\
  32         <div class="bbf-editor">{{editor}}</div>\
  33         <div class="bbf-help">{{help}}</div>\
  34         <div class="bbf-error">{{error}}</div>\
  35       </li>\
  36     ',
  37
  38     nestedField: '\
  39       <li class="bbf-field bbf-nested-field field-{{key}}" title="{{title}}">\
  40         <label for="{{id}}">{{title}}</label>\
  41         <div class="bbf-editor">{{editor}}</div>\
  42         <div class="bbf-help">{{help}}</div>\
  43         <div class="bbf-error">{{error}}</div>\
  44       </li>\
  45     ',
  46
  47     list: '\
  48       <div class="bbf-list">\
  49         <ul>{{items}}</ul>\
  50         <div class="bbf-actions"><button type="button" data-action="add">Add</div>\
  51       </div>\
  52     ',
  53
  54     listItem: '\
  55       <li>\
  56         <button type="button" data-action="remove" class="bbf-remove">&times;</button>\
  57         <div class="bbf-editor-container">{{editor}}</div>\
  58       </li>\
  59     ',
  60
  61     date: '\
  62       <div class="bbf-date">\
  63         <select data-type="date" class="bbf-date">{{dates}}</select>\
  64         <select data-type="month" class="bbf-month">{{months}}</select>\
  65         <select data-type="year" class="bbf-year">{{years}}</select>\
  66       </div>\
  67     ',
  68
  69     dateTime: '\
  70       <div class="bbf-datetime">\
  71         <div class="bbf-date-container">{{date}}</div>\
  72         <select data-type="hour">{{hours}}</select>\
  73         :\
  74         <select data-type="min">{{mins}}</select>\
  75       </div>\
  76     ',
  77
  78     'list.Modal': '\
  79       <div class="bbf-list-modal">\
  80         {{summary}}\
  81       </div>\
  82     '
  83   }, {
  84
  85     //CLASSNAMES
  86     error: 'bbf-error'
  87
  88   });
  89
  90
  91 })();