Prepare CTRL for C24_WMDE_Desktop_DE_11

Based on CTRL of test 10
Banners are hidden under 800px

Ticket: https://phabricator.wikimedia.org/T379246

banners/desktop/C24_WMDE_Desktop_DE_11/banner_var.ts

@@ -3,7 +3,7 @@ import { createVueApp } from '@src/createVueApp';
 import './styles/styles.scss';
 
 import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue';
-import Banner from './components/BannerVar.vue';
+import Banner from './components/BannerCtrl.vue';
 import FallbackBanner from './components/FallbackBanner.vue';
 import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
 import { WindowResizeHandler } from '@src/utils/ResizeHandler';
@@ -25,7 +25,7 @@ import messages from './messages';
 import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 
 // Channel specific form setup
-import { createFormItems } from './form_items_var';
+import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
 
 const date = new Date();

banners/desktop/C24_WMDE_Desktop_DE_11/components/BannerCtrl.vue

@@ -105,6 +105,7 @@ import SoftClose from '@src/components/SoftClose/SoftClose.vue';
 import { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
 import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
 import { Tracker } from '@src/tracking/Tracker';
+import { useBannerHider } from '@src/components/composables/useBannerHider';
 
 enum ContentStates {
 	Main = 'wmde-banner-wrapper--main',
@@ -125,6 +126,7 @@ interface Props {
 
 const props = defineProps<Props>();
 const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
+useBannerHider( 800, emit );
 
 const tracker = inject<Tracker>( 'tracker' );
 

banners/desktop/C24_WMDE_Desktop_DE_11/styles/styles.scss

@@ -37,9 +37,7 @@
 @use 'src/themes/Svingle/Footer/SelectionInput';
 @use 'src/themes/Svingle/Message/Message';
 @use 'src/themes/Svingle/SoftClose/SoftClose';
-@use 'src/themes/Svingle/Slider/KeenSlider' with (
-	$margin-bottom: 5px
-);
+@use 'src/themes/Svingle/Slider/KeenSlider';
 
 /**
  * Fallback banner with "Fijitiv" theme

src/components/composables/useBannerHider.ts

@@ -0,0 +1,19 @@
+import { EmitFn, onMounted, onUnmounted } from 'vue';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { CloseChoices } from '@src/domain/CloseChoices';
+
+export function useBannerHider( hideUnder: number, emit: EmitFn<'bannerClosed'[]> ): void {
+	const onResize = (): void => {
+		if ( window.innerWidth < hideUnder ) {
+			emit( 'bannerClosed', new CloseEvent( 'MainBanner', CloseChoices.WindowSizeBelowMin ) );
+		}
+	};
+
+	onMounted( () => {
+		window.addEventListener( 'resize', onResize );
+	} );
+
+	onUnmounted( () => {
+		window.removeEventListener( 'resize', onResize );
+	} );
+}

src/domain/CloseChoices.ts

@@ -11,4 +11,6 @@ export enum CloseChoices {
 	NoMoreBannersForCampaign = 'no-more-banners',
 	/** user clicked on the already donated link */
 	AlreadyDonated = 'already-donated',
+	/** window was resized below the threshold */
+	WindowSizeBelowMin = 'window-size-below-min',
 }