|
<fieldset class="optin-options">
<legend></html>{{Translated|Template:OptinText/Question}}<html></legend>
<span id="error-optin" class="lp-error" style="display: none;">
</html>{{int:donate_interface-error-msg-opt_in}}<html>
</span>
<ul>
<li>
<div class="optin-no-prompt__no"></html>{{Translated|Template:OptinText/PromptNo}}<html></div>
<div class="optin-no-prompt__yes"></html>{{Translated|Template:OptinText/PromptYes}}<html></div>
</div>
<div id="error-optin" class="lp-error" style="display: none;" tabindex="-1"><!-- tabindex="-1" allows focus with js so it can be announced -->
</html>{{Translated|Template:OptinText/PleaseSelect}}<html>
</div>
<div class="optin-smallprint links-in-new-tab">
</div>
</fieldset>
<style>
/* --- Opt-in --- */
.optin-options {
padding: 0 4px !important;
}
.optin-options legend {
padding: 0;
font-size: inherit;
font-weight: bold;
}
.optin-options ul {
list-style: none;
margin: 0;
}
.optin-options li {
display: table;
}
.lp-radio {
display: table-cell;
vertical-align: top;
margin: 7px 8px 8px 2px;
cursor: pointer;
}
.lp-radio-label {
display: table-cell;
vertical-align: top;
padding: 4px 0;
white-space: normal;
font-size: 14px;
line-height: 18px;
font-weight: normal;
cursor: pointer;
}
.lp-radio-label:hover,
.lp-radio:focus + .lp-radio-label,
.lp-radio:hover + .lp-radio-label {
color: #36c;
text-decoration: none;
}
.optin-smallprint {
clear: both;
font-size: 12px;
line-height: 14px;
}
.optin-no-prompt {
display: none;
margin: 4px 0 8px 0;
padding: 6px;
border: 2px solid #900;
border-radius: 2px;
font-size: 14px;
line-height: 18px;
font-weight: normal;
}
.optin-no-prompt.is-positive {
border-color: #14866d;
font-weight: bold;
}
.optin-no-prompt__yes {
display: none;
}
.optin-no-prompt__no {
display: block;
}
.optin-no-prompt.is-positive .optin-no-prompt__yes {
display: block;
}
.optin-no-prompt.is-positive .optin-no-prompt__no {
display: none;
}
</style>
<script>
/* Called by Common.js */
function initOptin() {
$('.optin-options').on('click', function(){
$('#error-optin').hide();
// Only do all this if we have translated prompts
if ( $('.optin-no-prompt').data('is-translated') === 'yes' ) {
if ( $('#optin-no').is(':checked') ) {
$('.optin-no-prompt').removeClass('is-positive');
if ( !$('.optin-no-prompt').is(':visible') ) {
$('.optin-no-prompt').slideDown();
}
} else {
$('.optin-no-prompt').addClass('is-positive');
}
}
});
}
</script>
</html>
| 