Skip to content

Commit fb98c49

Browse files
AbbanAbban
authored
Merge pull request #276 from wmde/C23_WMDE_Desktop_DE_13
2 parents 45e45b7 + cce2bc0 commit fb98c49

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1772
-31
lines changed

‎archive/desktop/C23_WMDE_Desktop_DE_12/banner_ctrl.ts

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { createVueApp } from '@src/createVueApp';
2+
3+
import './styles/styles.scss';
4+
5+
import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
6+
import Banner from './components/BannerCtrl.vue';
7+
import getBannerDelay from '@src/utils/getBannerDelay';
8+
import { WindowResizeHandler } from '@src/utils/ResizeHandler';
9+
import PageWPORG from '@src/page/PageWPORG';
10+
import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
11+
import { SkinFactory } from '@src/page/skin/SkinFactory';
12+
import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
13+
import TranslationPlugin from '@src/TranslationPlugin';
14+
import { Translator } from '@src/Translator';
15+
import DynamicTextPlugin from '@src/DynamicTextPlugin';
16+
import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
17+
import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
18+
import eventMappings from './event_map';
19+
20+
// Locale-specific imports
21+
import messages from './messages';
22+
import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
23+
24+
// Channel specific form setup
25+
import { createFormItems } from './form_items';
26+
import { createFormActions } from '@src/createFormActions';
27+
28+
const localeFactory = new LocaleFactoryDe();
29+
const translator = new Translator( messages );
30+
const mediaWiki = new WindowMediaWiki();
31+
const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 800 ) );
32+
const impressionCount = new LocalImpressionCount( page.getTracking().keyword );
33+
const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings );
34+
const remainingImpressions = Math.max( page.getMaxBannerImpressions( 'desktop' ) - impressionCount.overallCountIncremented, 0 );
35+
36+
const app = createVueApp( BannerConductor, {
37+
page,
38+
bannerConfig: {
39+
delay: getBannerDelay( 7500 ),
40+
transitionDuration: 1000
41+
},
42+
bannerProps: {
43+
useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
44+
remainingImpressions
45+
},
46+
resizeHandler: new WindowResizeHandler(),
47+
banner: Banner,
48+
impressionCount
49+
} );
50+
51+
app.use( TranslationPlugin, translator );
52+
app.use( DynamicTextPlugin, {
53+
campaignParameters: page.getCampaignParameters(),
54+
date: new Date(),
55+
formatters: localeFactory.getFormatters(),
56+
impressionCount,
57+
translator
58+
} );
59+
60+
const currencyFormatter = localeFactory.getCurrencyFormatter();
61+
62+
app.provide( 'currencyFormatter', currencyFormatter );
63+
app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
64+
app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { des: '1' } ) );
65+
app.provide( 'tracker', tracker );
66+
67+
app.mount( page.getBannerContainer() );

‎archive/desktop/C23_WMDE_Desktop_DE_12/banner_var.ts

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { createVueApp } from '@src/createVueApp';
2+
3+
import './styles/styles.scss';
4+
5+
import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
6+
import Banner from './components/BannerVar.vue';
7+
import getBannerDelay from '@src/utils/getBannerDelay';
8+
import { WindowResizeHandler } from '@src/utils/ResizeHandler';
9+
import PageWPORG from '@src/page/PageWPORG';
10+
import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
11+
import { SkinFactory } from '@src/page/skin/SkinFactory';
12+
import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
13+
import TranslationPlugin from '@src/TranslationPlugin';
14+
import { Translator } from '@src/Translator';
15+
import DynamicTextPlugin from '@src/DynamicTextPlugin';
16+
import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
17+
import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
18+
import eventMappings from './event_map';
19+
20+
// Locale-specific imports
21+
import messages from './messages';
22+
import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
23+
24+
// Channel specific form setup
25+
import { createFormItems } from './form_items';
26+
import { createFormActions } from '@src/createFormActions';
27+
28+
const localeFactory = new LocaleFactoryDe();
29+
const translator = new Translator( messages );
30+
const mediaWiki = new WindowMediaWiki();
31+
const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 800 ) );
32+
const impressionCount = new LocalImpressionCount( page.getTracking().keyword );
33+
const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings );
34+
const remainingImpressions = Math.max( page.getMaxBannerImpressions( 'desktop' ) - impressionCount.overallCountIncremented, 0 );
35+
36+
const app = createVueApp( BannerConductor, {
37+
page,
38+
bannerConfig: {
39+
delay: getBannerDelay( 7500 ),
40+
transitionDuration: 1000
41+
},
42+
bannerProps: {
43+
useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
44+
remainingImpressions
45+
},
46+
resizeHandler: new WindowResizeHandler(),
47+
banner: Banner,
48+
impressionCount
49+
} );
50+
51+
app.use( TranslationPlugin, translator );
52+
app.use( DynamicTextPlugin, {
53+
campaignParameters: page.getCampaignParameters(),
54+
date: new Date(),
55+
formatters: localeFactory.getFormatters(),
56+
impressionCount,
57+
translator
58+
} );
59+
60+
const currencyFormatter = localeFactory.getCurrencyFormatter();
61+
62+
app.provide( 'currencyFormatter', currencyFormatter );
63+
app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
64+
app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { des: '1' } ) );
65+
app.provide( 'tracker', tracker );
66+
67+
app.mount( page.getBannerContainer() );

‎archive/desktop/C23_WMDE_Desktop_DE_12/components/BannerCtrl.vue

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<template>
2+
<div class="wmde-banner-wrapper" :class="contentState">
3+
<MainBanner
4+
@form-interaction="$emit( 'bannerContentChanged' )"
5+
v-if="contentState === ContentStates.Main"
6+
:bannerState="bannerState"
7+
>
8+
<template #close-button>
9+
<ButtonClose @close="onCloseMain"/>
10+
</template>
11+
12+
<template #banner-text>
13+
<BannerText/>
14+
</template>
15+
16+
<template #banner-slides="{ play }: any">
17+
<KeenSlider :with-navigation="true" :play="play" :interval="10000" :delay="2000">
18+
19+
<template #slides="{ currentSlide }: any">
20+
<BannerSlides :currentSlide="currentSlide"/>
21+
</template>
22+
23+
</KeenSlider>
24+
</template>
25+
26+
<template #progress>
27+
<ProgressBar amount-to-show-on-right="TARGET"/>
28+
</template>
29+
30+
<template #donation-form="{ formInteraction }: any">
31+
<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction">
32+
33+
<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
34+
<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
35+
</template>
36+
37+
<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
38+
<UpgradeToYearlyForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
39+
</template>
40+
41+
</MultiStepDonation>
42+
</template>
43+
44+
<template #footer>
45+
<FooterAlreadyDonated
46+
@showFundsModal="isFundsModalVisible = true"
47+
@showAlreadyDonatedModal="isAlreadyDonatedModalVisible = true"
48+
/>
49+
</template>
50+
51+
</MainBanner>
52+
53+
<SoftClose
54+
v-if="contentState === ContentStates.SoftClosing"
55+
@close="() => onClose( 'SoftClose', CloseChoices.Close )"
56+
@maybeLater="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
57+
@timeOutClose="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
58+
/>
59+
60+
<FundsModal
61+
:content="useOfFundsContent"
62+
:is-funds-modal-visible="isFundsModalVisible"
63+
@hideFundsModal="isFundsModalVisible = false"
64+
/>
65+
66+
<AlreadyDonatedModal
67+
:is-visible="isAlreadyDonatedModalVisible"
68+
@hideAlreadyDonatedModal="isAlreadyDonatedModalVisible = false"
69+
@goAway="() => onClose( 'AlreadyDonatedModal', CloseChoices.NoMoreBannersForCampaign )"
70+
@maybeLater="() => onClose( 'AlreadyDonatedModal', CloseChoices.MaybeLater )"
71+
>
72+
<template #already-donated-content>
73+
<AlreadyDonatedContent/>
74+
</template>
75+
</AlreadyDonatedModal>
76+
</div>
77+
</template>
78+
79+
<script setup lang="ts">
80+
import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
81+
import { ref, watch } from 'vue';
82+
import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
83+
import SoftClose from '@src/components/SoftClose/SoftClose.vue';
84+
import MainBanner from './MainBanner.vue';
85+
import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
86+
import BannerText from '../content/BannerText.vue';
87+
import BannerSlides from '../content/BannerSlides.vue';
88+
import AlreadyDonatedContent from '../content/AlreadyDonatedContent.vue';
89+
import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
90+
import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
91+
import UpgradeToYearlyForm from '@src/components/DonationForm/Forms/UpgradeToYearlyForm.vue';
92+
import KeenSlider from '@src/components/Slider/KeenSlider.vue';
93+
import { useFormModel } from '@src/components/composables/useFormModel';
94+
import {
95+
createSubmittableMainDonationForm
96+
} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
97+
import {
98+
createSubmittableUpgradeToYearly
99+
} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
100+
import { CloseChoices } from '@src/domain/CloseChoices';
101+
import { CloseEvent } from '@src/tracking/events/CloseEvent';
102+
import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
103+
import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
104+
import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
105+
import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
106+
import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/AlreadyDonatedModal.vue';
107+
108+
enum ContentStates {
109+
Main = 'wmde-banner-wrapper--main',
110+
SoftClosing = 'wmde-banner-wrapper--soft-closing'
111+
}
112+
113+
enum FormStepNames {
114+
MainDonationFormStep = 'MainDonationForm',
115+
UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
116+
}
117+
118+
interface Props {
119+
bannerState: BannerStates;
120+
useOfFundsContent: useOfFundsContentInterface;
121+
remainingImpressions: number;
122+
}
123+
124+
const props = defineProps<Props>();
125+
const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
126+
127+
const isFundsModalVisible = ref<boolean>( false );
128+
const isAlreadyDonatedModalVisible = ref<boolean>( false );
129+
const contentState = ref<ContentStates>( ContentStates.Main );
130+
const formModel = useFormModel();
131+
const stepControllers = [
132+
createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
133+
createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
134+
];
135+
136+
watch( contentState, async () => {
137+
emit( 'bannerContentChanged' );
138+
} );
139+
140+
function onCloseMain(): void {
141+
if ( props.remainingImpressions > 0 ) {
142+
contentState.value = ContentStates.SoftClosing;
143+
} else {
144+
onClose( 'MainBanner', CloseChoices.Close );
145+
}
146+
}
147+
148+
function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
149+
emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
150+
}
151+
152+
</script>

0 commit comments

Comments
 (0)