Commit | Line | Data |
---|---|---|
6a488035 TO |
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; | |
ef1f854a | 28 | font-size:13px; |
6a488035 TO |
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"> | |
4553998a | 153 | <span id="crm_cpid_{$cpageId}_amt_raised" class="crm-amount-raised"> -- placeholder -- </span> |
6a488035 TO |
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"> | |
4553998a | 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"> -- placeholder -- </span></a> |
6a488035 TO |
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> |