MediaWiki:Centralnotice-template-Leichte Sprache Banner iPad
<style type="text/css">MediaWiki:WMDE FR2015/Resources/DesktopBanner.css</style> <style type="text/css">MediaWiki:WMDE FR2015/Resources/icon.css</style> <style type="text/css">MediaWiki:WMDE FR2015/Resources/wlightbox.css</style> <script type="text/javascript">MediaWiki:WMDE FR2016/Resources/BannerValues.js</script> <script type="text/javascript">MediaWiki:WMDE FR2016/Resources/DesktopBanner.js </script> <script type="text/javascript">MediaWiki:WMDE FR2016/Resources/CountCampaignDays.js </script> <script type="text/javascript">MediaWiki:WMDE FR2015/Resources/CustomDayName.js</script> <script type="text/javascript">MediaWiki:WMDE FR2016/Resources/wlightbox.js</script> <style type="text/css">
#WMDE_Banner-facts { background-color:#2b8156; }
#WMDE_Banner_info { color: #ffffff; }
#WMDE_Banner-text { text-align:left; color: #ffffff; }
#WMDE_Banner-text-salute { color: #ffffff; font-size: 17px; font-weight: bold; line-height: 1.2em; margin: 4px 10px 4px 35px; text-align: justify; margin-bottom: 0; padding-bottom: 0; }
- WMDE_BannerForm-wrapper {
height: 238px;
}
- WMDE_Banner-form fieldset {
width: 95%; border: 0; margin: 0 auto; padding: 0 0.5em 0.5em 0.5em;
}
- WMDE_Banner-frequency ul,
- WMDE_Banner-amounts ul,
- WMDE_Banner-payment ul {
width: 100%; height: 100%; display: table; margin: 0 0 0.3em; padding: 0; list-style: none;
}
- WMDE_Banner-form legend {
display: none; width: 100%; margin: 0; padding: 0 0 0.3em 0; text-align: center; font-size: .9em; color: rgba(0,0,0,0.42);
}
/* --- Common Button Styles --- */
.WMDE_Banner-btn {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%) repeat scroll 0 0; border: 1px solid #ddd; border-radius: 4px; padding: 11px 0; width: 100%; cursor: pointer; display: inline-block; font-weight: bold; margin: 0 1px; text-align: center;
}
.WMDE_Banner-btn:hover {
background-color: #fff; box-shadow: 0 0 2px rgba(0,0,0,.5), inset 0 14px 16px rgba(255,255,255,.75), inset 0 0 7px #fff; color: #367fb4;
}
.WMDE_Banner-btn.checked {
background: linear-gradient(to top, #ccc 0%, #aaa 100%) !important; border-color: #ccc;
}
.WMDE_Banner-btn:active {
box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
- WMDE_Banner-payment .btn-payment-type {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #eee 0%, #ccc 100%) repeat scroll 0 0 !important; border-color: #CCC !important;
}
/* --- Frequency Buttons --- */
- WMDE_Banner-frequency li {
display: table-cell; width: 50%; padding: 0 2% 0 0; vertical-align: top;
} body.rtl #WMDE_Banner-frequency li { padding: 0 0 0 2%; }
- WMDE_Banner-frequency label {
width: 100%; display: block; font-size: .9em;
}
/*@media (min-width : 1100px) { #WMDE_Banner-frequency label { font-size: .95em; } }*/ @media (min-width : 1200px) {
/*#WMDE_Banner-frequency label { font-size: 1em; }*/ /*#WMDE_Banner-payment .WMDE_Banner-btn { min-height: 2em !important; } .WMDE_Banner-btn { padding: 4px 0; }*/
}
- WMDE_Banner-frequency input[type="radio"] {
border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
/* --- Amount Buttons --- */
- WMDE_Banner-amounts legend {
display: block;
}
- WMDE_Banner-amounts li {
display: table-cell; width: 23%; height: 100%; clear: none; padding: 0 2% 0 0; vertical-align: top;
} body.rtl #WMDE_Banner-amounts li {
padding: 0 0 0 2%;
}
/* Chrome specific - need to be floated for height 100% to work */ @media screen and (-webkit-min-device-pixel-ratio:0) {
#WMDE_Banner-amounts li { float: left; } body.rtl #WMDE_Banner-amounts li { float: right; }
}
- WMDE_Banner-amounts li input[type="radio"] {
border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
- WMDE_Banner-amounts label {
font-size: .9em; text-transform: none;
}
/*@media (min-width : 800px) { #WMDE_Banner-amounts .predefined_amount { font-size: 1em; } } @media (min-width : 1100px) { #WMDE_Banner-amounts .predefined_amount { font-size: 1.1em; } }*/
/* --- Other Amount --- */
- amount_custom .WMDE_Banner-btn {
display: inline-block; height: 100%; width: 100%; padding: 0.2em 0 0.4em 0;
}
- amount_custom label {
display: block; height: auto; margin-bottom: 0.2em; font-size: .7em; line-height: 1; cursor: pointer;
}
- amount_custom input {
width: 80%; font-size: .9em; padding: .3em; text-align: center;
}
- amount_custom .checked input {
background: #fff; color: #163348;
}
- amount-other-input {
margin-top: .6em;
}
/* --- Payment method Buttons --- */
- WMDE_Banner-payment ul li {
display: table-cell; padding: 0 2% 0 0; vertical-align: top; width: 50%; margin-bottom: 4px;
} body.rtl #WMDE_Banner-payment ul li {
padding: 0 0 0 2%;
}
/*#WMDE_Banner-payment .WMDE_Banner-btn {
min-height: 4em;
}*/
- WMDE_Banner-window button {
width: 100%; height: 100%; font-size: .9em; float: none; font-family: inherit;
}
@media all and (min-width: 1px) and (max-width: 900px), all and (min-width: 1050px) and (max-width: 1200px) {
#WMDE_Banner-payment .btn-payment-type { min-height: 4em; }
}
@media all and (min-width: 1px) and (max-width: 1050px) {
#WMDE_Banner-payment ul { margin: 0; width: 100%; }
#WMDE_Banner-payment ul li { display: block; width: 100%; }
}
div.interval_tab {
padding: 4px 0 2px 0 !important; height: 2em; text-align: center; width: 50%; border: none; border-bottom: 1px solid #c2cedb; background: linear-gradient(to bottom, rgba(238,240,252,1) 60%,rgba(194,206,219,0.5) 100%); float: left; cursor: pointer;
}
div.interval_tab, div.interval_tab label {
cursor: pointer;
}
div.interval_tab label:hover {
text-decoration: underline;
}
div.interval_tab_first {
margin-left: -1px; border-right: 1px solid #c2cedb;
}
- WMDE_Banner div.active {
text-decoration: underline; border-bottom: none; background: transparent;
}
- WMDE_Banner .highlight {
background-color: #ffdd5b; color: #000000;
}
/* --- more info for recurring donations --- */
- interval_tab_multiple {
position: relative; margin-right:-1px; /* Fixes strange, probably border-being-a-half-pixel-wide related break on zoom level 0.9 */
}
- interval-multiple-moreinfo-link {
position:absolute; right: 10px; top: 5px;
}
- donationperiodInfo {
width:520px; margin-top:-5px;
}
- donationperiodInfo .checks {
list-style: url('//upload.wikimedia.org/wikipedia/commons/2/21/Green_valid_check_icon.png'); line-height:135%;
}
/* --- Donation meter --- */
- WMDE_Banner #donationMeterWrapper {
margin: 0 10px 10px 35px;
}
- application-of-funds-link {
cursor: pointer; margin-left: 1.5em;
}
- application-of-funds-link:hover {
text-decoration: underline;
}
- info-application-of-funds {
width: 720px; margin-top: -5px;
}
- info-application-of-funds hr {
margin: 1.4em 0;
}
- info-application-of-funds-footer {
font-size: 0.8em;
}
- info-application-of-funds-footer div {
width: 49%; display: inline-block; text-align: center;
}
- info-application-of-funds-footer a {
color: #3366cc;
}
</style>
<form id="WMDE_Banner-form" method="post" name="donationForm" action="https://spenden.wikimedia.de/donation/new?piwik_campaign={{{CampaignName}}}&piwik_kwd={{{BannerName}}}"><tbody> </tbody>
<tbody>
</tbody>
|
<label for="interval_onetime"> <input type="radio" style="display: none" id="interval_onetime" name="interval_tab" value="0"> einmalig </label> <label for="interval_multiple"> <input type="radio" style="display: none" id="interval_multiple" name="interval_tab" value="1"> regelmäßig </label> <fieldset id="WMDE_Banner-frequency" class="cf"> </fieldset> <fieldset id="WMDE_Banner-amounts" class="cf">
</fieldset> <fieldset id="WMDE_Banner-payment" class="cf">
</fieldset> |
|
<input type="hidden" id="periode" name="periode" value="0"/> <input type="hidden" id="intervalType" name="intervalType" value="0"/> <input type="hidden" id="impCount" name="impCount" value=""/> <input type="hidden" id="bImpCount" name="bImpCount" value=""/> <input type="hidden" id="zahlweise" name="zahlweise" value=""/> </form>
<img id="WMDE_Banner-close-ct" src="//upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" border="0" height="0" width="0">
- Jederzeit und ab sofort kündbar. Eine formlose E-Mail genügt.
- Betrag und Zahlungsintervall problemlos änderbar.
- Vergrößerte Planungssicherheit und Nachhaltigkeit.
- Automatischer Versand der Zuwendungsbestätigung.
- Auf Wunsch Versand unseres Tätigkeitsberichts.
Wohin geht meine Spende?
<a href="http://wikimedia.de/wiki/Transparenz" target="_blank"></a>
<img src="//upload.wikimedia.org/wikipedia/commons/8/8a/WMDE-application-of-funds-diagram-2017.png" />
<img src="//upload.wikimedia.org/wikipedia/commons/0/00/WMDE-application-of-funds-2017.svg" />
<script type="text/javascript">
$( document ).ready( function () { $( '#interval_tab_onetime' ).click( function () { if ( $( '#interval_tab_onetime' ).hasClass( 'active' ) ) { return; }
$( '#interval_tab_onetime' ).addClass( 'active' ); $( '#interval_tab_multiple' ).removeClass( 'active' ); $( '.interval-options').addClass( 'interval-hidden' ); $( );
addSpaceInstantly(); calculateLightboxPosition(); } );
$( '#interval_tab_multiple' ).click( function ( e ) { if ( $( e.target ).prop( 'id' ) == 'interval-multiple-moreinfo-link' ) { return; } if ( $( '#interval_tab_multiple' ).hasClass( 'active' ) ) { return; }
$( '#interval_tab_multiple' ).addClass( 'active' ); $( '#interval_tab_onetime' ).removeClass( 'active' );
$( '.interval-options').removeClass( 'interval-hidden' ); addSpaceInstantly(); calculateLightboxPosition(); } );
} );
$( '#WMDE_Banner-frequency' ).find( 'label' ).click( function () { $( '#WMDE_Banner-frequency' ).find( 'label' ).removeClass( 'checked' ); $( this ).addClass( 'checked' ); } );
$( '#WMDE_Banner-amounts' ).find( 'label' ).click( function () { $( '#WMDE_Banner-amounts' ).find( 'label' ).removeClass( 'checked' ); $( '#amount-other-input' ).parent().removeClass( 'checked' ); $( this ).addClass( 'checked' ); } );
$( '#amount-other-input' ).click( function () { $( '#WMDE_Banner-amounts' ).find( 'label' ).removeClass( 'checked' ); $( this ).parent().addClass( 'checked' ); } );
function addSpace() { if ( !$( '#WMDE_Banner' ).is( ':visible' ) ) { return; } var bannerHeight = $( 'div#WMDE_Banner' ).height(), skin = getSkin();
switch ( skin ) { case 'vector': $( '#mw-panel' ).animate( {'top':bannerHeight + 160},1000 ); $( '#mw-head' ).animate( {'top':bannerHeight},1000 ); $( '#mw-page-base' ).animate( {'padding-top':bannerHeight},1000); case 'minerva': $( '#mw-mf-viewport' ).animate( {'top':bannerHeight},1000 ); break; } }
function addSpaceInstantly() { if ( !$( '#WMDE_Banner' ).is( ':visible' ) ) { return; } var bannerHeight = $( 'div#WMDE_Banner' ).height(), skin = getSkin();
switch ( skin ) { case 'vector': $( '#mw-panel' ).css( { top: bannerHeight + 160 } ); $( '#mw-head' ).css( { top: bannerHeight } ); $( '#mw-page-base' ).css( { paddingTop: bannerHeight } ); case 'minerva': $( '#mw-mf-viewport' ).css( { top: bannerHeight } ); break; } }
function displayBanner() { if ( !showBanner ) { return; } var bannerElement = $( '#WMDE_Banner' ), bannerHeight = bannerElement.height(); $( 'body' ).prepend( $( '#centralNotice' ) ); bannerElement.css( 'top', -bannerHeight ); bannerElement.css( 'display', 'block' ); addSpace(); bannerElement.animate( { top: 0 }, 1000 ); setTimeout( function () { Banner.progressBar.animateProgressBar(); }, 1000 );
$( window ).resize( function () { addSpaceInstantly(); calculateLightboxPosition(); Banner.progressBar.setProgressBarSize.apply( Banner.progressBar ); } ); }
function calculateLightboxPosition() { $( '#wlightbox' ).css( { right: ( $('body').width() - 750 ) / 2 + 'px', top: '20px', top: ( $( '#WMDE_Banner' ).height() + 20 ) + 'px' } ); }
function addMiniBanner() { /* add the "nag" bar. Has to be done after we show the main banner (to get its height) */ var bigBannerHeight = $('#WMDE_Banner').height();
$( window ).scroll( function () { if ( $( window ).scrollTop() <= bigBannerHeight ) { $( '#WMDE_Banner-nag' ).finish(); $( '#WMDE_Banner-nag' ).css( 'display', 'none' ); } else { // only show mini banner if no lightbox is visible if ( !$( '#wlightbox' ).is(':visible') ) { $( '#WMDE_Banner-nag' ).delay( 1500 ).slideDown(); } } });
$( '#WMDE_Banner-nag-close' ).click( function ( event ) { $( '#WMDE_Banner-nag' ).remove(); event.stopPropagation(); });
$( '#WMDE_Banner-nag' ).click( function () { window.scrollTo( 0, 0 ); }); }
$( document ).ready( function() { var lightboxOpened = false; $( '#WMDE_Banner-payment button' ).click( function( e ) { return validateForm(); } );
$( '#interval-multiple-moreinfo-link' ).wlightbox( { container: $( '#mw-page-base' ), right: '20px' } ); $( '#interval-multiple-moreinfo-link' ).click( function ( e ) { if ( lightboxOpened ) { // We need to wait for 320 seconds because this click will also trigger the opening of the lightbox again. window.setTimeout( function() { $( '#interval-multiple-moreinfo-link' ).get(0).close(); lightboxOpened = false; }, 320 ); return; } lightboxOpened = true; // scroll to top $( 'html, body' ).animate( { scrollTop: 0 }, 'slow' ); // track link clicking $( '#WMDE_Banner-close-ct' ).attr( 'src', 'https://tracking.wikimedia.de/piwik/piwik.php?idsite=1&url=https://spenden.wikimedia.de/period-lightbox-opened/{{{BannerName}}}&rec=1' ); // close lightbox if any form element is clicked $( '#WMDE_BannerForm-wrapper' ).on( 'click', function ( e ) { if ( $( e.target ).prop( 'id' ) == 'interval-multiple-moreinfo-link' ) { return; } lightboxOpened = false; $( this ).off(); $( '#interval-multiple-moreinfo-link' ).get(0).close(); } ); } );
var impCount = increaseImpCount(); $( '#impCount' ).val( impCount ); var bannerImpCount = increaseBannerImpCount( "{{{banner}}}" ); $( '#bImpCount' ).val( bannerImpCount );
if ( mw.config.get( 'wgAction' ) === "view" ) { setTimeout( displayBanner, 7500 ); } if ( mw.config.get( 'wgUserName' ) !== null ) { $( '#wikilogin' ).val( 'yes' ); }
$( 'span#numDaysLeft' ).text( getDaysRemaining() ); $( 'span#weekday' ).text( getCurrentDayName( getCurrentGermanDay ) ); if ( getCurrentDayName( getCurrentGermanDay ) !== getCurrentGermanDay() ) { $( '#weekdayPrepPhrase' ).text( 'am heutigen' ); } $( 'span#campaignDay' ).text( getCampaignDayString() ); $( 'span#donorsValue' ).html( addPointsToNum( Math.floor( getApprDonatorsRaw() ) ) ); $( '.bannerImpressions').text( window.GlobalBannerSettings[ 'milion-impressions-per-day' ] ); $( '#campaignDaySentence' ).text( getCampaignDaySentence() );
if ( getDaysSinceCampaignStart() < 1 ) { $( '#donationRemaining' ).text( 'Unser Spendenziel: ' + ( GlobalBannerSettings.goalSum / 1000000 ).toFixed( 1 ).replace( '.', ',' ) + ' Mio. €' ); $( '#donationText' ).html( ); }
$( '#application-of-funds-link' ).wlightbox( { container: $( '#mw-page-base' ), right: ( $('body').width() - 750 ) / 2 + 'px', top: function() { return ( $( '#WMDE_Banner' ).height() + 20 ) + 'px'; } } ); $( '#application-of-funds-link' ).click( function ( e ) { $( '#WMDE_Banner-close-ct' ).attr( 'src', 'https://tracking.wikimedia.de/piwik/piwik.php?idsite=1&url=https://spenden.wikimedia.de/application-of-funds-lightbox-opened/{{{BannerName}}}&rec=1' ); } );
$( '#link-wmf-annual-plan' ).click( function ( e ) { $( '#WMDE_Banner-close-ct' ).attr( 'src', 'https://tracking.wikimedia.de/piwik/piwik.php?idsite=1&url=https://spenden.wikimedia.de/wmf-annual-plan/{{{BannerName}}}&rec=1' ); } );
$( '#link-wmde-annual-plan' ).click( function ( e ) { $( '#WMDE_Banner-close-ct' ).attr( 'src', 'https://tracking.wikimedia.de/piwik/piwik.php?idsite=1&url=https://spenden.wikimedia.de/wmde-annual-plan/{{{BannerName}}}&rec=1' ); } );
} );
</script>