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 | } | |
6a488035 TO |
24 | .crm-contribute-widget .crm-amounts { |
25 | height:1em; | |
26 | margin:.8em 0px; | |
ef1f854a | 27 | font-size:13px; |
6a488035 TO |
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 | } | |
6a488035 TO |
67 | .crm-contribute-widget .crm-logo { |
68 | text-align:center; | |
69 | } | |
6a488035 TO |
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 | } | |
6a488035 TO |
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 | } | |
6a488035 TO |
90 | .crm-contribute-widget .crm-home-url { |
91 | text-decoration:none; | |
92 | border:0px; | |
93 | } | |
6a488035 TO |
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 | } | |
6a488035 TO |
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 */ | |
6a488035 TO |
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; } | |
6a488035 TO |
110 | .crm-contribute-widget a.crm-contribute-button { /* button color */ |
111 | background-color:{/literal}{$form.color_button.value}{literal}; | |
112 | } | |
6a488035 TO |
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 | } | |
6a488035 TO |
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 | } | |
6a488035 TO |
123 | .crm-contribute-widget .crm-home-url { |
124 | color:{/literal}{$form.color_homepage_link.value}{literal} /* home page link color*/ | |
125 | } | |
6a488035 TO |
126 | </style> |
127 | {/literal} | |
6a488035 TO |
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"> | |
4553998a | 139 | <span id="crm_cpid_{$cpageId}_amt_raised" class="crm-amount-raised"> -- placeholder -- </span> |
6a488035 TO |
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"> | |
4553998a | 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> |
6a488035 TO |
149 | </div> |
150 | </div> | |
6a488035 | 151 | {literal} |
6a488035 TO |
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 | } | |
6a488035 TO |
168 | if ( document.readyState === "complete" ) { |
169 | // Handle it asynchronously to allow scripts the opportunity to delay ready | |
170 | setTimeout( onReady, 1 ); | |
171 | } | |
6a488035 TO |
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); | |
6a488035 TO |
183 | // A fallback to window.onload, that will always work |
184 | window.attachEvent( "onload", onReady ); | |
185 | } | |
6a488035 TO |
186 | function onReady( ) { |
187 | var cpid = {/literal}{$cpageId}{literal}; | |
188 | var jsonvar = eval('jsondata' + cpid); | |
6a488035 TO |
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 | } | |
6a488035 TO |
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 | } | |
6a488035 TO |
214 | </script> |
215 | {/literal} | |
216 | <script type="text/javascript" src="{$config->userFrameworkResourceURL}/extern/widget.php?cpageId={$cpageId}&widgetId={$widget_id}&format=3"></script> |