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