Template:Optin/Default: Difference between revisions

From Donate
Jump to navigation Jump to search
Content deleted Content added
No edit summary
trying focus method instead
 
(16 intermediate revisions by the same user not shown)
Line 2: Line 2:
<fieldset class="optin-options">
<fieldset class="optin-options">
<legend></html>{{Translated|Template:OptinText/Question}}<html></legend>
<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>
<ul>
<li>
<li>
Line 15: Line 12:
</li>
</li>
</ul>
</ul>
<div class="optin-no-prompt">
<div class="optin-no-prompt" data-is-translated="</html>{{IsTranslated|Template:OptinText/PromptNo|{{int:lang}}}}<html>">
<div class="optin-no-prompt__no"></div>
<div class="optin-no-prompt__no"></html>{{Translated|Template:OptinText/PromptNo}}<html></div>
<div class="optin-no-prompt__yes"></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>
<div class="optin-smallprint links-in-new-tab">
<div class="optin-smallprint links-in-new-tab">
Line 23: Line 23:
</div>
</div>
</fieldset>
</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() {
var language = mw.config.get('wgUserLanguage');
var optinNoPrompts = {
'en' : {
'no' : "😔 Sorry to hear that. We don't email often; would you consider changing your mind?",
'yes' : "😍 Thanks for changing your mind! We'll respect your inbox."
},
'it' : {
'no' : "😔 È un vero peccato. Non inviamo e-mail frequentemente; prenderesti in considerazione la possibilità di cambiare idea?",
'yes' : "😍 Grazie per aver cambiato idea! Avremo molto rispetto della tua casella di posta."
}
};
optinNoPrompts['en-gb'] = optinNoPrompts['en'];

// Only do all this if we have translated prompts
if ( optinNoPrompts[language] ) {
$('.optin-no-prompt__no').text( optinNoPrompts[language].no );
$('.optin-no-prompt__yes').text( optinNoPrompts[language].yes );

$('.optin-options').on('click', function(){
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>
</html>

Latest revision as of 19:12, 20 November 2024

Can we stay in touch?
Sorry to hear that. We don't email often; would you consider changing your mind?
Thanks for changing your mind! We'll respect your inbox.