templates/CRM/Contribute/Form/ContributionPage/Widget.tpl

   1 {*
   2  +--------------------------------------------------------------------+
   3  | CiviCRM version 4.5                                                |
   4  +--------------------------------------------------------------------+
   5  | Copyright CiviCRM LLC (c) 2004-2014                                |
   6  +--------------------------------------------------------------------+
   7  | This file is a part of CiviCRM.                                    |
   8  |                                                                    |
   9  | CiviCRM is free software; you can copy, modify, and distribute it  |
  10  | under the terms of the GNU Affero General Public License           |
  11  | Version 3, 19 November 2007 and the CiviCRM Licensing Exception.   |
  12  |                                                                    |
  13  | CiviCRM is distributed in the hope that it will be useful, but     |
  14  | WITHOUT ANY WARRANTY; without even the implied warranty of         |
  15  | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.               |
  16  | See the GNU Affero General Public License for more details.        |
  17  |                                                                    |
  18  | You should have received a copy of the GNU Affero General Public   |
  19  | License and the CiviCRM Licensing Exception along                  |
  20  | with this program; if not, contact CiviCRM LLC                     |
  21  | at info[AT]civicrm[DOT]org. If you have questions about the        |
  22  | GNU Affero General Public License or the licensing of CiviCRM,     |
  23  | see the CiviCRM license FAQ at http://civicrm.org/licensing        |
  24  +--------------------------------------------------------------------+
  25 *}
  26 <h3>{ts}Configure Widget{/ts}</h3>
  27 {if $showStatus}
  28 <div class="messages status no-popup">
  29     <div class="icon inform-icon"></div>
  30     {ts}It looks like you may have posted and / or distributed the flash version of the Contribution widget. We won't be supporting the flash version in next release. You should try and get all sites using the flash widget to update to the improved HTML widget code below as soon as possible.{/ts}
  31 </div>
  32 {/if}
  33 <div id="form" class="crm-block crm-form-block crm-contribution-contributionpage-widget-form-block">
  34     <div id="help">
  35         {ts}CiviContribute widgets allow you and your supporters to easily promote this fund-raising campaign. Widget code can be added to any web page - and will provide a real-time display of current contribution results, and a direct link to this contribution page.{/ts} {help id="id-intro"}
  36     </div>
  37 <div class="crm-submit-buttons">{include file="CRM/common/formButtons.tpl" location="top"}</div>
  38     <table class="form-layout-compressed">
  39       <tr class="crm-contribution-contributionpage-widget-form-block-is_active"><td style="width: 12em;">&nbsp;</td><td style="font-size: 10pt;">{$form.is_active.html}&nbsp;{$form.is_active.label}</td></tr>
  40     </table>
  41     <div class="spacer"></div>
  42
  43     <div id="widgetFields">
  44         <table class="form-layout-compressed">
  45             <tr class="crm-contribution-contributionpage-widget-form-block-title"><td class="label">{$form.title.label}<span class="marker"> *</span></td><td>{$form.title.html}</td></tr>
  46             <tr class="crm-contribution-form-block-url_logo"><td class="label">{$form.url_logo.label}</span></td><td>{$form.url_logo.html}</td></tr>
  47             <tr class="crm-contribution-contributionpage-widget-form-block-button_title"><td class="label">{$form.button_title.label}</td><td>{$form.button_title.html}</td></tr>
  48             <tr class="crm-contribution-contributionpage-widget-form-block-about"><td class="label">{$form.about.label}<span class="marker"> *</span></td><td>{$form.about.html}
  49 <br /><span class="description">{ts}Enter content for the about message. You may include HTML formatting tags. You can also include images, as long as they are already uploaded to a server - reference them using complete URLs.{/ts}</span>
  50 </td></tr>
  51
  52         </table>
  53
  54         <div id="id-get_code">
  55             <fieldset>
  56             <legend>{ts}Preview Widget and Get Code{/ts}</legend>
  57             <div class="col1">
  58                 {if $widget_id}
  59                     <div class="description">
  60                         {ts}Click <strong>Save & Preview</strong> to save any changes to your settings, and preview the widget again on this page.{/ts}
  61                     </div>
  62                     {include file="CRM/Contribute/Page/Widget.tpl" widgetId=$widget_id cpageId=$cpageId}<br />
  63                 {else}
  64                     <div class="description">
  65                         {ts}Click <strong>Save & Preview</strong> to save your settings and preview the widget on this page.{/ts}<br />
  66                     </div>
  67                 {/if}
  68                 <div style="text-align: center;width:260px">{$form._qf_Widget_refresh.html}</div>
  69             </div>
  70             <div class="col2">
  71                 {* Include "get widget code" section if widget has been created for this page and is_active. *}
  72                 {if $widget_id}
  73                     <div class="description">
  74                         {ts}Add this widget to any web page by copying and pasting the code below.{/ts}
  75                     </div>
  76                     <textarea rows="8" cols="50" name="widget_code" id="widget_code">{include file="CRM/Contribute/Page/Widget.tpl" widgetId=$widget_id cpageId=$cpageId}</textarea>
  77                     <br />
  78                     <strong><a href="#" onclick="Widget.widget_code.select(); return false;">&raquo; Select Code</a></strong>
  79                 {else}
  80                     <div class="description">
  81                         {ts}The code for adding this widget to web pages will be displayed here after you click <strong>Save and Preview</strong>.{/ts}
  82                     </div>
  83                 {/if}
  84             </div>
  85             </fieldset>
  86         </div>
  87
  88
  89         <div class="crm-accordion-wrapper collapsed crm-case-roles-block">
  90          <div class="crm-accordion-header">
  91           {ts}Edit Widget Colors{/ts}
  92          </div><!-- /.crm-accordion-header -->
  93          <div class="crm-accordion-body">
  94             <div class="description">
  95                 {ts}Enter colors in hexadecimal format prefixed with <em>#</em>. EXAMPLE: <em>#FF0000</em> = Red. You can do a web search on 'hexadecimal colors' to find a chart of color codes.{/ts}
  96             </div>
  97             <table class="form-layout-compressed">
  98             {foreach from=$colorFields item=field key=fieldName}
  99               <tr><td class="label">{$form.$fieldName.label}<span class="marker"> *</span></td><td>{$form.$fieldName.html}</td></tr>
 100             {/foreach}
 101             </table>
 102          </div><!-- /.crm-accordion-body -->
 103         </div><!-- /.crm-accordion-wrapper -->
 104
 105     </div>
 106
 107     <div id="crm-submit-buttons">
 108         <table id="preview" class"form-layout-compressed">
 109      <tr>
 110         <td>{$form._qf_Widget_refresh.html}</td>
 111         </td>
 112      </tr>
 113   </table>
 114     </div>
 115   <div class="crm-submit-buttons">{include file="CRM/common/formButtons.tpl" location="bottom"}</div>
 116
 117 </div>
 118
 119 {literal}
 120 <script type="text/javascript">
 121   var is_act = document.getElementsByName('is_active');
 122     if ( ! is_act[0].checked) {
 123            cj('#widgetFields').hide();
 124      cj('#preview').hide();
 125   }
 126     function widgetBlock(chkbox) {
 127         if (chkbox.checked) {
 128         cj('#widgetFields').show();
 129         cj('#preview').show();
 130         return;
 131         } else {
 132         cj('#widgetFields').hide();
 133         cj('#preview').hide();
 134               return;
 135      }
 136     }
 137 </script>
 138 {/literal}
 139
 140 {* include jscript to warn if unsaved form field changes *}
 141 {include file="CRM/common/formNavigate.tpl"}
 142
 143 {literal}
 144 <script type="text/javascript">
 145 CRM.$(function($) {
 146    cj().crmAccordions();
 147 });
 148 </script>
 149 {/literal}