{"version":3,"file":"assets/js/GridBundle.js","mappings":"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","sources":["webpack:///./typescript/typings/iRecommendations.ts","webpack:///./typescript/MixAndMatchGrid.ts","webpack:///./typescript/Index.ts"],"sourcesContent":["export interface IRecommendations {\n additionalSections: Array;\n articles: Array;\n targetArticle: ITargetArticle;\n assetBaseAddress: string;\n expanderLabel: string;\n itemOrigin: string;\n}\n\nexport interface ITargetArticle {\n name: string;\n masterArticleNo: number;\n colorCode: number;\n image: string;\n}\n\nexport interface IRecommendationAdditionalSection {\n additionalSectionType: number;\n articles: Array;\n sectionLabel: string;\n}\n\nexport interface IRecommendationArticle {\n description: string;\n image: IImage;\n quickOrderModalLink: string;\n detailPageLink: string;\n salesArticleNo: string;\n masterArticleNo: number;\n colorCode: number;\n sizeCode: number;\n}\n\nexport interface IImage {\n url: string;\n type: ImageType;\n}\n\nexport enum ImageType {\n Main = 'main',\n Action = 'action',\n}","import { IRecommendations, IRecommendationAdditionalSection, IRecommendationArticle, ImageType } from \"./typings/iRecommendations\"\nimport { IVariantChange } from \"./typings/iDetailpage\"\n\ndeclare global {\n interface Window { shell: any; }\n}\nwindow.shell = window.shell || {};\n\nexport class MixAndMatchGridHandler {\n public static instance: MixAndMatchGridHandler;\n private node: HTMLElement;\n private gridContainer: HTMLElement;\n private hiddenContainer: HTMLElement;\n private showcase: HTMLElement;\n private apiUrl: string;\n private expandedMainGroup: number = 1;\n private mainGroupCount3col: number = 0;\n private mainGroupCount2col: number = 0;\n private currentMcv: string;\n private imageRefs: string[] = [];\n private lastSelectableImage: number = 1;\n private expanderWasActivatedByKeyboard: boolean = false;\n\n constructor(node: HTMLElement) {\n if (node.attributes['initialized']) {\n return;\n }\n this.node = node;\n this.apiUrl = this.node.dataset.apiurl;\n this.gridContainer = this.node.querySelector('.grid-container');\n this.hiddenContainer = this.node.querySelector('.hidden-container');\n this.showcase = this.node.querySelector('.origin-showcase');\n this.initialize();\n }\n\n private initialize(): void {\n this.node.attributes['initialized'] = true;\n if (window.shell) {\n window.shell.subscribeTo('ESPP1.Detailpage.VariantChange.Public',\n (payload: IVariantChange) => {\n let newMcv: string = payload.masterArticleNo + '-' + payload.colorCode;\n if (newMcv === this.currentMcv) {\n return;\n }\n this.buildView(newMcv);\n }, 'ESPP1.Detailpage.VariantChange.Public');\n }\n let mcv = this.getCurrentMcv();\n if (!mcv) {\n return;\n }\n this.buildView(mcv);\n }\n\n private getCurrentMcv(): string {\n if (this.node.dataset.masterarticleno && this.node.dataset.colorcode) {\n return this.node.dataset.masterarticleno + '-' + this.node.dataset.colorcode;\n }\n return '';\n }\n\n private buildView(mcv: string): void {\n this.currentMcv = mcv;\n let xhr = new XMLHttpRequest();\n xhr.open('GET', `${this.apiUrl}${mcv}`, true);\n xhr.responseType = 'json';\n xhr.onload = () => {\n var status = xhr.status;\n if (status === 200) {\n this.renderView(xhr.response);\n } else {\n this.removeView();\n }\n };\n xhr.send();\n }\n\n private renderView(recommendations: IRecommendations): void {\n if (!recommendations.articles.length) {\n this.removeView();\n return;\n }\n const originImageUrl: string =\n recommendations.assetBaseAddress + 'TileOrigin/' + recommendations.targetArticle.image;\n if (window.shell) {\n window.shell.publishTo('ESPP2.MixAndMatch.OnLoaded', { available: true });\n window.shell.publishTo('SCS.Update.FallBackImageUrl', { newFallBackImageUrl: originImageUrl });\n }\n this.imageRefs = [];\n // Start Default Grid\n let newHtml: string = this.openGrid('', 'main', 1);\n newHtml = this.addOriginArticle(newHtml, recommendations.targetArticle.name);\n for (let i = 0; i < recommendations.articles.length; i++) {\n newHtml = this.addCrossArticle(newHtml, recommendations.articles[i], recommendations.assetBaseAddress, i + 1, true, recommendations.itemOrigin);\n }\n newHtml = this.closeGrid(newHtml);\n newHtml = this.renderExpanderButton(newHtml, recommendations.expanderLabel, recommendations.articles.length, 2);\n this.mainGroupCount3col = Math.ceil((recommendations.articles.length - 7) / 9);\n this.mainGroupCount2col = Math.ceil((recommendations.articles.length - 4) / 8);\n this.expandedMainGroup = 1;\n // End Default Grid\n\n if (recommendations.additionalSections.length) {\n for (let i = 0; i < recommendations.additionalSections.length; i++) {\n const mainTabOrderNumber = 2;\n const tabOrderNumber = mainTabOrderNumber + i + 1;\n newHtml = this.addAdditionalSection(newHtml, recommendations.additionalSections[i], recommendations.assetBaseAddress, recommendations.itemOrigin, tabOrderNumber);\n }\n }\n this.hiddenContainer.appendChild(this.showcase);\n this.showcase.querySelector('.fall_back_img')?.setAttribute('src', originImageUrl);\n this.gridContainer.innerHTML = newHtml;\n this.gridContainer.querySelector('.origin.item .itemcontent')?.appendChild(this.showcase);\n let expanderButton = this.gridContainer.querySelector('.expandercontainer.main .expanderbutton');\n if (expanderButton) {\n expanderButton.addEventListener('click', () => { this.expanderClickCallback('main'); }, { once: false, capture: false, passive: true });\n expanderButton.addEventListener('touchstart', this.fixTouchHoverCallback.bind(this), { once: true, capture: false, passive: true });\n }\n this.gridContainer.querySelectorAll('.item .hoverlayer').forEach((linkElement) => { this.initLinkElementHandlers(linkElement); });\n\n if (document.documentElement?.classList.contains('desktop')) this.addKeyboardNavigationEvents();\n }\n\n private initLinkElementHandlers(linkElement: HTMLElement): void {\n linkElement.addEventListener('mouseover', this.updateLinkElementCallback.bind(this), { once: true, capture: false, passive: true });\n linkElement.addEventListener('touchstart', this.updateLinkElementCallback.bind(this), { once: true, capture: false, passive: true });\n linkElement.addEventListener('click', this.orderModalLinkClickCallback.bind(this), { once: false, capture: false, passive: false });\n }\n\n private addKeyboardNavigationEvents(): void {\n // prevent page jump for M&M content\n this.gridContainer.addEventListener('keydown', (event) => { \n if (event.code === 'Space') event.preventDefault();\n });\n\n const expanderbutton = this.gridContainer.querySelector('.expandercontainer.main .expanderbutton');\n if (expanderbutton) {\n expanderbutton.addEventListener('keydown', (event) => {\n if (event.key === 'Enter' || event.code === 'Space') {\n this.lastSelectableImage = this.imageRefs.lastIndexOf(\"\");\n this.expanderWasActivatedByKeyboard = true;\n expanderbutton.click(); \n }\n });\n }\n \n const linkElements = this.gridContainer.querySelectorAll('.cross.item .hoverlayer');\n linkElements.forEach((link) => link.addEventListener('keydown', (event) => {\n if (event.code === 'Space') link.click(); \n })\n );\n }\n\n private fixTouchHoverCallback(event: Event): void {\n const target: HTMLElement = event.currentTarget;\n target.classList.remove('hoverable');\n }\n\n private removeAllHoverStates(): void {\n this.gridContainer.querySelectorAll('.hoverlayer').forEach((linkElement) => {\n linkElement.classList.remove('hover');\n });\n }\n\n private updateLinkElementCallback(event: Event): void {\n const target: HTMLElement = event.currentTarget;\n if (event.type === 'touchstart') {\n target.classList.add('touch');\n }\n\n if (target.nodeName.toUpperCase() === 'DIV' || target.getAttribute('href').indexOf('itemorigin') > 0) {\n return;\n }\n\n if (target.getAttribute('href').indexOf('?') > 0) {\n target.setAttribute('href', target.getAttribute('href') + \"&itemorigin=\" + target.dataset.itemorigin);\n } else {\n target.setAttribute('href', target.getAttribute('href') + \"?itemorigin=\" + target.dataset.itemorigin);\n }\n }\n\n private orderModalLinkClickCallback(event: Event): void {\n if (event.cancelable) {\n event.preventDefault();\n }\n let target = event.currentTarget as HTMLElement;\n\n if (target.classList.contains('touch')) {\n if (!target.classList.contains('hover')) {\n this.removeAllHoverStates();\n target.classList.add('hover');\n return;\n }\n }\n if (!target.dataset.modaltarget) {\n return;\n }\n\n const isRedesignOrderModal = document.querySelector('html')!.classList.contains('RedesignOrderModal');\n let link: string = decodeURIComponent(atob(target.dataset.modaltarget));\n \n if (window.shell) {\n if (isRedesignOrderModal) {\n window.shell.publishTo('ESPP.OrderModal.Open', { \n salesArticleNo: target.dataset.salesarticleno!,\n masterArticleNo: target.dataset.masterarticleno!,\n colorCode: target.dataset.colorcode!,\n sizeCode: target.dataset.sizecode!,\n itemOrigin: target.dataset.itemorigin!\n });\n } else {\n window.shell.publishTo('legacy.modals.openbyajax', link);\n }\n }\n }\n\n private isMobileShop(): boolean {\n return document.querySelector('html')!.classList.contains('mobileshop');\n }\n\n private insertImage(itemElement: HTMLElement): void {\n let imageref: number = parseInt(itemElement.getAttribute('data-imageref'));\n if (this.imageRefs[imageref] == \"\") {\n return;\n }\n let itemContent: Element = itemElement.querySelector('.itemcontent');\n itemContent.insertAdjacentHTML('beforeend', this.imageRefs[imageref]);\n this.imageRefs[imageref] = \"\";\n }\n\n private expanderClickCallback(targetSection: string): void {\n try {\n this.expandedMainGroup++;\n this.gridContainer.querySelectorAll('.mnm-grid.' + targetSection + ' .col-3-grp-' + this.expandedMainGroup).forEach((itemElement) => {\n this.insertImage(itemElement);\n itemElement.classList.add('col-3-expanded');\n });\n this.gridContainer.querySelectorAll('.mnm-grid.' + targetSection + ' .col-2-grp-' + this.expandedMainGroup).forEach((itemElement) => {\n this.insertImage(itemElement);\n itemElement.classList.add('col-2-expanded');\n });\n if (this.expandedMainGroup > this.mainGroupCount3col) {\n const expanderContainer = this.gridContainer.querySelector('.expandercontainer.' + targetSection);\n if (expanderContainer) {\n expanderContainer.classList.add('col-3-hidden');\n const expanderbutton = expanderContainer.querySelector(\".expanderbutton\");\n expanderbutton?.removeAttribute(\"focusable\");\n expanderbutton?.classList.remove(\"has-focus\", \"has-focus-mouse\", \"has-focus-keyboard\");\n }\n }\n if (this.expandedMainGroup > this.mainGroupCount2col) {\n const expanderContainer = this.gridContainer.querySelector('.expandercontainer.' + targetSection);\n if (expanderContainer) {\n expanderContainer.classList.add('col-2-hidden');\n const expanderbutton = expanderContainer.querySelector(\".expanderbutton\");\n expanderbutton?.removeAttribute(\"focusable\");\n expanderbutton?.classList.remove(\"has-focus\", \"has-focus-mouse\", \"has-focus-keyboard\");\n }\n }\n if (this.expanderWasActivatedByKeyboard) {\n // refocus on next loaded image content in viewport\n const nextSelectableImage = this.gridContainer.querySelector(`.mnm-grid.${targetSection} [data-imageref=\"${this.lastSelectableImage + 1}\"] .hoverlayer`);\n if (nextSelectableImage && window.shell) {\n window.shell.tabNav.focus(nextSelectableImage, 'keyboard');\n }\n this.expanderWasActivatedByKeyboard = false;\n }\n } catch (e) {}\n }\n\n private renderExpanderButton(html: string, label: string, tilecount: number, tabOrderNumber: number): string {\n if(tilecount <= 4) {\n return html;\n }\n let styles: string = '';\n if (tilecount <= 7) {\n styles += 'col-3-hidden';\n }\n if (tilecount <= 4) {\n styles += ' col-2-hidden';\n }\n html += '
';\n html += '
' + label +\n '
' +\n '
';\n html += '
';\n return html;\n }\n\n private addAdditionalSection(html: string, section: IRecommendationAdditionalSection, imagePath: string, itemOrigin: string, tabOrderNumber: number): string {\n html += '
' +\n '

' + section.sectionLabel.replace(/<|>/g,\n tag => ({ '<': '<', '>': '>' }[tag] || tag)) + '

' +\n '
';\n html = this.openGrid(html, section.additionalSectionType.toString(), tabOrderNumber);\n for (let i = 0; i < section.articles.length; i++) {\n if (i > 2) {\n break;\n }\n html = this.addCrossArticle(html, section.articles[i], imagePath, i + 1, false, itemOrigin);\n }\n return this.closeGrid(html);\n }\n\n private removeView(): void {\n if (window.shell) {\n window.shell.publishTo('ESPP2.MixAndMatch.OnLoaded', { available: false });\n }\n this.hiddenContainer.appendChild(this.showcase);\n this.gridContainer.innerHTML = '';\n }\n\n private openGrid(html: string, section: string, tabOrderNumber: number): string {\n return html + '
';\n }\n\n private closeGrid(html: string): string {\n return html + '
';\n }\n\n private addOriginArticle(html: string, name: string): string {\n html +=\n '
' +\n '
' +\n '
' +\n '

' + name + '

' +\n '
' +\n '
+
' +\n '
' +\n '
';\n return html;\n }\n\n private addCrossArticle(html: string, article: IRecommendationArticle, imagePath: string, index: number, expandableGroups: boolean, itemOrigin: string): string {\n let fallbackimageurl: string = imagePath;\n let srcset: string = '';\n let imgurl: string = '';\n try {\n imgurl = article.image.url.replace('.png', '.jpg');\n }\n catch (e) {\n imgurl = article.image.url;\n }\n if (article.image.type === ImageType.Action) {\n fallbackimageurl += 'TileMediumAction/';\n srcset += imagePath + 'TileSmallAction/' + imgurl + ' 180w';\n srcset += ', ' + imagePath + 'TileMediumAction/' + imgurl + ' 340w';\n srcset += ', ' + imagePath + 'TileBigAction/' + imgurl + ' 680w';\n } else {\n fallbackimageurl += 'TileMedium/';\n srcset += imagePath + 'TileSmall/' + imgurl + ' 180w';\n srcset += ', ' + imagePath + 'TileMedium/' + imgurl + ' 340w';\n srcset += ', ' + imagePath + 'TileBig/' + imgurl + ' 680w';\n }\n fallbackimageurl += imgurl;\n\n let classes: string = 'cross item';\n let lazyload: boolean = true;\n if (expandableGroups) {\n classes += ' col-3-grp-';\n if (index > 7) {\n let grp: number = Math.floor((index - 8) / 9) + 2;\n classes += grp.toString();\n } else {\n classes += '1';\n lazyload = false;\n }\n\n classes += ' col-2-grp-';\n if (index > 4) {\n let grp: number = Math.floor((index - 5) / 8) + 2;\n classes += grp.toString();\n } else {\n classes += '1';\n lazyload = false;\n }\n } else {\n lazyload = false;\n classes += ' col-3-grp-1';\n classes += ' col-2-grp-';\n if (index > 2) {\n classes += '2';\n } else {\n classes += '1';\n }\n }\n\n html +=\n '
' +\n '
' +\n '' +\n '

' + article.description + '

' +\n '';\n let imagehtml: string = '\"'';\n\n if (lazyload) {\n this.imageRefs[index] = imagehtml;\n } else {\n this.imageRefs[index] = \"\";\n html += imagehtml;\n }\n\n html += '
' +\n '
';\n return html;\n }\n}","import { MixAndMatchGridHandler } from \"./MixAndMatchGrid\";\n\nlet elements = document.querySelectorAll('.scope-mnm');\n\nif (elements.length > 0) {\n for (let i = 0; i < elements.length; i++) {\n new MixAndMatchGridHandler(elements[i]);\n }\n}"],"names":["ImageType","window","shell","MixAndMatchGridHandler","node","_classCallCheck","_defineProperty","attributes","this","apiUrl","dataset","apiurl","gridContainer","querySelector","hiddenContainer","showcase","initialize","key","value","_this","subscribeTo","payload","newMcv","masterArticleNo","colorCode","currentMcv","buildView","mcv","getCurrentMcv","masterarticleno","colorcode","_this2","xhr","XMLHttpRequest","open","concat","responseType","onload","status","renderView","response","removeView","send","recommendations","_this$showcase$queryS","_this$gridContainer$q","_document$documentEle","_this3","articles","length","originImageUrl","assetBaseAddress","targetArticle","image","publishTo","available","newFallBackImageUrl","imageRefs","newHtml","openGrid","addOriginArticle","name","i","addCrossArticle","itemOrigin","closeGrid","renderExpanderButton","expanderLabel","mainGroupCount3col","Math","ceil","mainGroupCount2col","expandedMainGroup","additionalSections","tabOrderNumber","addAdditionalSection","appendChild","setAttribute","innerHTML","expanderButton","addEventListener","expanderClickCallback","once","capture","passive","fixTouchHoverCallback","bind","querySelectorAll","forEach","linkElement","initLinkElementHandlers","document","documentElement","classList","contains","addKeyboardNavigationEvents","updateLinkElementCallback","orderModalLinkClickCallback","_this4","event","code","preventDefault","expanderbutton","lastSelectableImage","lastIndexOf","expanderWasActivatedByKeyboard","click","link","currentTarget","remove","target","type","add","nodeName","toUpperCase","getAttribute","indexOf","itemorigin","cancelable","removeAllHoverStates","modaltarget","isRedesignOrderModal","decodeURIComponent","atob","salesArticleNo","salesarticleno","sizeCode","sizecode","itemElement","imageref","parseInt","insertAdjacentHTML","targetSection","_this5","insertImage","expanderContainer","removeAttribute","nextSelectableImage","tabNav","focus","e","html","label","tilecount","styles","section","imagePath","sectionLabel","replace","tag","additionalSectionType","toString","article","index","expandableGroups","fallbackimageurl","srcset","imgurl","url","Action","classes","lazyload","floor","quickOrderModalLink","detailPageLink","description","imagehtml","elements"],"sourceRoot":""}