templates/CRM/Contribute/Page/Widget.tpl

   1 {literal}
   2 <style>
   3     .crm-contribute-widget {
   4         font-size:12px;
   5         font-family:Helvetica, Arial, sans;
   6         padding:6px;
   7         -moz-border-radius:       4px;
   8         -webkit-border-radius:   4px;
   9         -khtml-border-radius:   4px;
  10         border-radius:      4px;
  11         border:1px solid #96C0E7;
  12         width:200px;
  13     }
  14     .crm-contribute-widget h5 {
  15         font-size:14px;
  16         padding:3px;
  17         margin: 0px;
  18         text-align:center;
  19         -moz-border-radius:   4px;
  20         -webkit-border-radius:   4px;
  21         -khtml-border-radius:   4px;
  22         border-radius:      4px;
  23     }
  24
  25     .crm-contribute-widget .crm-amounts {
  26         height:1em;
  27         margin:.8em 0px;
  28         font-size:13px;
  29     }
  30     .crm-contribute-widget .crm-amount-low {
  31         float:left;
  32     }
  33     .crm-contribute-widget .crm-amount-high {
  34         float:right;
  35     }
  36     .crm-contribute-widget .crm-percentage {
  37         margin:0px 30%;
  38         text-align:center;
  39     }
  40     .crm-contribute-widget .crm-amount-bar {
  41         background-color:#FFF;
  42         width:100%;
  43         display:block;
  44         border:1px solid #CECECE;
  45         -moz-border-radius:   4px;
  46         -webkit-border-radius:   4px;
  47         -khtml-border-radius:   4px;
  48         border-radius:      4px;
  49         margin-bottom:.8em;
  50         text-align:left;
  51     }
  52     .crm-contribute-widget .crm-amount-fill {
  53         background-color:#2786C2;
  54         height:1em;
  55         display:block;
  56         -moz-border-radius:   4px 0px 0px 4px;
  57         -webkit-border-radius:   4px 0px 0px 4px;
  58         -khtml-border-radius:   4px 0px 0px 4px;
  59         border-radius:      4px 0px 0px 4px;
  60         text-align:left;
  61     }
  62     .crm-contribute-widget .crm-amount-raised-wrapper {
  63         margin-bottom:.8em;
  64     }
  65     .crm-contribute-widget .crm-amount-raised {
  66         font-weight:bold;
  67     }
  68
  69     .crm-contribute-widget .crm-logo {
  70         text-align:center;
  71     }
  72
  73     .crm-contribute-widget .crm-comments,
  74     .crm-contribute-widget .crm-donors,
  75     .crm-contribute-widget .crm-campaign {
  76         font-size:11px;
  77         margin-bottom:.8em;
  78     }
  79
  80     .crm-contribute-widget .crm-contribute-button {
  81         display:block;
  82         background-color:#CECECE;
  83         -moz-border-radius:       4px;
  84         -webkit-border-radius:   4px;
  85         -khtml-border-radius:   4px;
  86         border-radius:      4px;
  87         text-align:center;
  88         margin:0px 10% .8em 10%;
  89         text-decoration:none;
  90         color:#556C82;
  91         padding:2px;
  92         font-size:13px;
  93     }
  94
  95     .crm-contribute-widget .crm-home-url {
  96         text-decoration:none;
  97         border:0px;
  98     }
  99
 100 </style>
 101 <style>
 102     .crm-contribute-widget {
 103         background-color: {/literal}{$form.color_main.value}{literal}; /* background color */
 104         border-color:{/literal}{$form.color_bg.value}{literal}; /* border color */
 105     }
 106
 107     .crm-contribute-widget h5 {
 108         color: {/literal}{$form.color_title.value}{literal};
 109         background-color: {/literal}{$form.color_main_bg.value}{literal};
 110     } /* title */
 111
 112     .crm-contribute-widget .crm-amount-raised { color:#000; }
 113     .crm-contribute-widget .crm-amount-bar  /* progress bar */
 114         background-color:{/literal}{$form.color_bar.value}{literal};
 115         border-color:#CECECE;
 116     }
 117     .crm-contribute-widget .crm-amount-fill { background-color:#2786C2; }
 118
 119     .crm-contribute-widget a.crm-contribute-button { /* button color */
 120         background-color:{/literal}{$form.color_button.value}{literal};
 121     }
 122
 123     .crm-contribute-widget .crm-contribute-button-inner { /* button text color */
 124         padding:2px;
 125         display:block;
 126         color:{/literal}{$form.color_about_link.value}{literal};
 127     }
 128
 129     .crm-contribute-widget .crm-comments,
 130     .crm-contribute-widget .crm-donors,
 131     .crm-contribute-widget .crm-campaign {
 132         color:{/literal}{$form.color_main_text.value}{literal} /* other color*/
 133     }
 134
 135     .crm-contribute-widget .crm-home-url {
 136         color:{/literal}{$form.color_homepage_link.value}{literal} /* home page link color*/
 137     }
 138
 139 </style>
 140 {/literal}
 141
 142 <div id="crm_cpid_{$cpageId}" class="crm-contribute-widget">
 143     <h5 id="crm_cpid_{$cpageId}_title"></h5>
 144     <div class="crm-amounts">
 145         <div id="crm_cpid_{$cpageId}_amt_hi" class="crm-amount-high"></div>
 146         <div id="crm_cpid_{$cpageId}_amt_low" class="crm-amount-low"></div>
 147         <div id="crm_cpid_{$cpageId}_percentage" class="crm-percentage"></div>
 148     </div>
 149     <div class="crm-amount-bar">
 150         <div class="crm-amount-fill" id="crm_cpid_{$cpageId}_amt_fill"></div>
 151     </div>
 152     <div class="crm-amount-raised-wrapper">
 153         <span id="crm_cpid_{$cpageId}_amt_raised" class="crm-amount-raised"></span>
 154     </div>
 155     {if $form.url_logo.value}
 156         <div class="crm-logo"><img src="{$form.url_logo.value}" alt={ts}Logo{/ts}></div>
 157     {/if}
 158     <div id="crm_cpid_{$cpageId}_donors" class="crm-donors"></div>
 159     <div id="crm_cpid_{$cpageId}_comments" class="crm-comments"></div>
 160     <div id="crm_cpid_{$cpageId}_campaign" class="crm-campaign"></div>
 161     <div class="crm-contribute-button-wrapper" id="crm_cpid_{$cpageId}_button">
 162         <a href='{crmURL p="civicrm/contribute/transact" q="reset=1&id=$cpageId" h=0 a=1 fe=1}' class="crm-contribute-button"><span class="crm-contribute-button-inner" id="crm_cpid_{$cpageId}_btn_txt"></span></a>
 163     </div>
 164 </div>
 165
 166 {literal}
 167
 168 <script type="text/javascript">
 169 // Cleanup functions for the document ready method
 170 if ( document.addEventListener ) {
 171     DOMContentLoaded = function() {
 172         document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
 173         onReady();
 174     };
 175 } else if ( document.attachEvent ) {
 176     DOMContentLoaded = function() {
 177         // Make sure body exists, at least, in case IE gets a little overzealous
 178         if ( document.readyState === "complete" ) {
 179             document.detachEvent( "onreadystatechange", DOMContentLoaded );
 180             onReady();
 181         }
 182     };
 183 }
 184
 185 if ( document.readyState === "complete" ) {
 186     // Handle it asynchronously to allow scripts the opportunity to delay ready
 187     setTimeout( onReady, 1 );
 188 }
 189
 190 // Mozilla, Opera and webkit support this event
 191 if ( document.addEventListener ) {
 192     // Use the handy event callback
 193     document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
 194     // A fallback to window.onload, that will always work
 195     window.addEventListener( "load", onReady, false );
 196     // If IE event model is used
 197 } else if ( document.attachEvent ) {
 198     // ensure firing before onload,
 199     // maybe late but safe also for iframes
 200     document.attachEvent("onreadystatechange", DOMContentLoaded);
 201
 202     // A fallback to window.onload, that will always work
 203     window.attachEvent( "onload", onReady );
 204 }
 205
 206 function onReady( ) {
 207     var cpid    = {/literal}{$cpageId}{literal};
 208     var jsonvar = eval('jsondata' + cpid);
 209
 210     var crmCurrency = jsonvar.currencySymbol;
 211     document.getElementById('crm_cpid_'+cpid+'_title').innerHTML        = jsonvar.title;
 212     if ( jsonvar.money_target > 0 ) {
 213         document.getElementById('crm_cpid_'+cpid+'_amt_hi').innerHTML   = jsonvar.money_target_display;
 214         document.getElementById('crm_cpid_'+cpid+'_amt_low').innerHTML  = crmCurrency+jsonvar.money_low;
 215     }
 216     document.getElementById('crm_cpid_'+cpid+'_amt_raised').innerHTML   = jsonvar.money_raised;
 217     document.getElementById('crm_cpid_'+cpid+'_comments').innerHTML     = jsonvar.about;
 218     document.getElementById('crm_cpid_'+cpid+'_donors').innerHTML       = jsonvar.num_donors;
 219     document.getElementById('crm_cpid_'+cpid+'_btn_txt').innerHTML      = jsonvar.button_title;
 220     document.getElementById('crm_cpid_'+cpid+'_campaign').innerHTML     = jsonvar.campaign_start;
 221     if ( jsonvar.money_raised_percentage ) {
 222         var moneyRaised = jsonvar.money_raised_percentage;
 223         var percentWidth = moneyRaised.split('%');
 224         if ( percentWidth[0] > 100 ) {
 225             moneyRaised = '100%';
 226         }
 227         document.getElementById('crm_cpid_'+cpid+'_amt_fill').style.width = moneyRaised;
 228         document.getElementById('crm_cpid_'+cpid+'_percentage').innerHTML = jsonvar.money_raised_percentage;
 229     }
 230
 231     if ( !jsonvar.is_active ) {
 232         document.getElementById('crm_cpid_'+cpid+'_button').innerHTML   = jsonvar.home_url;
 233         document.getElementById('crm_cpid_'+cpid+'_button').style.color = 'red';
 234     }
 235 }
 236
 237 </script>
 238 {/literal}
 239 <script type="text/javascript" src="{$config->userFrameworkResourceURL}/extern/widget.php?cpageId={$cpageId}&widgetId={$widget_id}&format=3"></script>