https://www.ilovescience.brussels/etc.clientlibs/visitbrussels/cli…/vue-districts-f12ca35d6160df6f1683.js

1"use strict";(self.webpackChunkaem_maven_archetype=self.webpackChunkaem_maven_archetype||[]).push([[2563,2561,1425,2756,51],{66978:function(t,i,e){var n=e(6934);i.A=function(){var t=(0,n.KR)(window.innerWidth);return(0,n.sV)((function(){window.addEventListener("resize",(function(){t.value=window.innerWidth}))})),(0,n.hi)((function(){window.removeEventListener("resize",(function(){t.value=window.innerWidth}))})),t}},70485:function(t,i,e){e.d(i,{L:function(){return c},n:function(){return n}});var n=function(t,i,e,n){var r,s;if(t.target instanceof Node&&i&&!(t.clientX<0||t.clientY<0||t.clientX>window.innerWidth||t.clientY>window.innerHeight))if("contains"===n)i.contains(t.target)?null===(r=e.onClickInside)||void 0===r||r.call(e):null===(s=e.onClickOutside)||void 0===s||s.call(e);else if("getBoundingClientRect"===n){var o,a;if(c(t,i))null===(o=e.onClickOutside)||void 0===o||o.call(e);else null===(a=e.onClickInside)||void 0===a||a.call(e)}},c=function(t,i){var e=i.getBoundingClientRect();return e.left>t.clientX||e.right<t.clientX||e.top>t.clientY||e.bottom<t.clientY}},66262:function(t,i){i.A=(t,i)=>{const e=t.__vccOpts||t;for(const[t,n]of i)e[t]=n;return e}},42756:function(t,i,e){e.r(i),e.d(i,{default:function(){return l}});var n=e(6934),c={ref:"dropdownRef",class:"cmp-dropdown"},r={key:0};var s=e(51),o=e(70485),a=(0,n.pM)({name:"VueDropdown",components:{VueIcon:s.default},props:{dropdownTitle:{type:String},icon:{type:String},activeByDefault:{type:Boolean,default:!1},closeOnClickOutside:{type:Boolean,default:!1}},setup:function(t){var i=(0,n.KR)(),e=(0,n.KR)(t.activeByDefault),c=function(t){(0,o.n)(t,i.value,{onClickOutside:function(){return e.value=!1}},"contains")};(0,n.wB)(e,(function(){t.closeOnClickOutside&&(e.value?document.addEventListener("click",c,{capture:!0}):document.removeEventListener("click",c,{capture:!0}))}));return(0,n.hi)((function(){t.closeOnClickOutside&&document.removeEventListener("click",c,{capture:!0})})),{dropdownRef:i,isActive:e,toggleActive:function(){e.value=!e.value}}}});var l=(0,e(66262).A)(a,[["render",function(t,i,e,s,o,a){var l=(0,n.g2)("VueIcon");return(0,n.uX)(),(0,n.CE)("div",c,[(0,n.Lk)("a",{onClick:i[0]||(i[0]=function(i){return t.toggleActive()}),onKeyup:i[1]||(i[1]=(0,n.jR)((function(i){return t.toggleActive()}),["enter"])),class:(0,n.C4)([t.isActive?"is-open":"","cmp-dropdown__title"]),tabindex:"0"},[(0,n.eW)((0,n.v_)(t.dropdownTitle)+" ",1),t.dropdownTitle?(0,n.Q3)("v-if",!0):((0,n.uX)(),(0,n.CE)("div",r)),(0,n.bF)(l,{path:"/content/dam/visitbrussels/icons/".concat(t.icon,".svg"),class:"cmp-icon--small"},null,8,["path"])],34),(0,n.bo)((0,n.Lk)("div",null,[(0,n.RG)(t.$slots,"default")],512),[[n.aG,t.isActive]])],512)}]])},51:function(t,i,e){e.r(i),e.d(i,{default:function(){return a}});var n=e(6934),c={class:"cmp-icon cmp-icon--current-color"},r=["src"];var s=e(70387),o=(0,n.pM)({name:"VueIcon",props:{path:String},setup:function(){var t=(0,n.KR)();return(0,n.sV)((function(){var i=t.value;i&&i.src&&i.src.endsWith(".svg")&&(0,s.L)(i)})),{imageRef:t}}});var a=(0,e(66262).A)(o,[["render",function(t,i,e,s,o,a){return(0,n.uX)(),(0,n.CE)("div",c,[(0,n.Lk)("img",{src:t.path,class:"cmp-icon__image cmp-icon__image--svg",ref:"imageRef",alt:""},null,8,r)])}]])},61425:function(t,i,e){e.r(i),e.d(i,{default:function(){return l}});var n=e(6934),c={class:"cmp-link__text"},r={key:0,class:"cmp-link__svg",viewBox:"0 0 60 2",width:"100%",height:"2",fill:"none",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"none"},s=[(0,n.Lk)("path",{d:"M0 1.22222C32.5 0.722222 53 1.22222 60 1.22222",stroke:"currentColor"},null,-1)];var o=e(51),a=(0,n.pM)({name:"VueLink",components:{VueIcon:o.default},props:{linkText:{type:String},icon:{type:String},iconSize:{type:String,default:"small"},showLineSvg:{type:Boolean,default:!0}}});var l=(0,e(66262).A)(a,[["render",function(t,i,e,o,a,l){var d=(0,n.g2)("VueIcon");return(0,n.uX)(),(0,n.CE)("a",{class:(0,n.C4)(["cmp-link",{"link--icon":t.icon}])},[(0,n.Lk)("span",c,[(0,n.eW)((0,n.v_)(t.linkText)+" ",1),t.icon?((0,n.uX)(),(0,n.Wv)(d,{key:0,path:"/content/dam/visitbrussels/icons/".concat(t.icon,".svg"),class:(0,n.C4)({"cmp-icon--small":"small"===t.iconSize})},null,8,["path","class"])):(0,n.Q3)("v-if",!0)]),t.showLineSvg?((0,n.uX)(),(0,n.CE)("svg",r,s)):(0,n.Q3)("v-if",!0)],2)}]])},53980:function(t,i,e){e.r(i),e.d(i,{default:function(){return r}});var n=e(6934);var c=(0,n.pM)({name:"VueTitle",props:{text:{type:String},element:{type:String,default:"h2",validator:function(t){return["h1","h2","h3","h4","h5","h6"].includes(t)}}}});var r=(0,e(66262).A)(c,[["render",function(t,i,e,c,r,s){return t.text?((0,n.uX)(),(0,n.Wv)((0,n.$y)(t.element),{key:0,class:"cmp-title"},{default:(0,n.k6)((function(){return[(0,n.eW)((0,n.v_)(t.text),1)]})),_:1})):(0,n.Q3)("v-if",!0)}]])},7036:function(t,i,e){e.r(i),e.d(i,{default:function(){return N}});var n=e(6934),c={key:0,class:"cmp-districts"},r={class:"cmp-districts__list"},s={class:"cmp-districts__names"},o=["onClick","aria-label"],a={key:1,class:"cmp-districts__names"},l=["onClick","aria-label"],d={class:"cmp-districts__image"},u=["src","srcset","usemap"],p={class:"cmp-districts__bubble-content"},v={"aria-live":"polite"},f={class:"cmp-districts__district-name"},m={class:"cmp-districts__district-description"},h=["href","aria-label"];var k=e(66978),g=e(53737),w=e(42756),_=e(61425),b=e(53980),y=["alt","href","coords","onMouseover","onFocusin"];var L=e(64467),C=[{districtId:"CANAL",districtName:"The Canal district",coords:"309,219,307,194,329,186,360,198,379,199,409,192,424,212,398,218,398,222,428,222,409,242,395,243,381,259,381,268,318,244,319,233"},{districtId:"CENTRE",districtName:"The historical centre",coords:"172,327,188,337,214,325,216,313,226,303,252,313,255,305,258,303,259,291,265,242,273,240,277,231,283,226,285,220,291,216,302,211,316,232,316,254,322,257,326,249,328,251,332,260,368,274,377,285,378,326,372,329,360,322,343,334,340,329,338,334,328,329,321,345,307,345,306,382,301,383,295,386,288,387,285,393,270,403,262,396,260,388,258,394,216,363,203,358,194,368,176,388,162,383,146,356,156,349,150,344,150,333,159,327"},{districtId:"CHATELAIN",districtName:"Châtelain/Bailli",coords:"254,529,254,501,266,474,273,470,280,464,285,467,301,459,328,444,334,460,334,473,344,479,356,491,358,505,371,516,369,528,375,527,370,543,364,538,355,551,329,557,328,564,318,570,321,576,305,577,305,571,296,569,306,562,296,554,295,547,283,543,278,537"},{districtId:"DANSAERT",districtName:"Dansaert/Sainte-Catherine",co

1ords:"90,310,89,280,91,276,91,241,95,232,103,221,110,214,109,206,119,193,123,193,131,199,134,206,138,205,143,214,178,221,186,226,190,215,193,222,197,204,206,195,202,191,198,184,203,179,208,178,209,173,215,173,221,177,225,178,226,183,221,184,224,192,250,203,250,232,256,242,250,246,250,254,243,256,255,271,255,277,260,279,257,285,255,301,243,308,226,300,214,311,213,324,188,335,172,325,159,326,140,337,118,342,109,339,109,323,104,321,104,312,96,306"},{districtId:"EUROPE",districtName:"The European Quarter",coords:"564,275,527,291,529,344,529,354,601,368,618,353,617,367,613,409,595,401,567,427,564,440,568,442,572,457,572,463,592,477,595,474,601,470,607,473,612,485,619,481,627,481,667,472,677,452,688,437,696,432,717,414,709,384,698,386,699,350,686,349,676,334,639,332,635,293,590,275"},{districtId:"FLAGEY",districtName:"Flagey",coords:"388,481,386,504,398,509,406,508,422,502,422,524,440,532,441,535,447,534,451,535,452,539,455,558,484,580,509,587,514,583,532,581,540,581,547,536,555,535,562,532,560,526,569,488,568,473,567,464,571,458,569,449,565,442,558,440,554,446,549,444,545,447,540,445,536,450,530,457,534,463,532,468,524,460,524,447,517,440,493,436,485,432,482,437,461,442,430,461,393,469"},{districtId:"HEYSEL",districtName:"Heysel",coords:"178,111,196,123,201,137,214,139,231,163,239,166,270,160,270,147,295,141,312,150,327,157,328,177,344,176,333,163,342,155,341,142,350,143,356,121,373,109,392,116,426,145,426,154,434,158,440,150,454,147,514,54,452,31,313,26,193,80"},{districtId:"LOUISE",districtName:"Louise – Upper part of the city",coords:"301,457,301,434,316,410,328,415,349,430,349,415,355,408,384,407,384,400,388,399,392,404,397,403,403,406,404,413,410,417,452,395,463,400,465,421,470,416,466,411,472,405,489,404,488,409,478,413,477,416,495,416,496,424,495,427,484,426,480,436,461,441,429,459,392,467,387,479,385,503,360,505,358,491,347,478,336,472,337,460,328,442"},{districtId:"MAROLLES",districtName:"The Marolles",coords:"187,388,187,377,203,360,215,364,256,394,260,391,262,396,272,405,272,421,278,421,281,403,293,404,291,426,291,437,299,439,299,459,285,465,280,463,274,467,270,470,266,472,262,480,253,480,250,472,249,460,243,465,230,458,224,446,210,419,199,424,199,403"},{districtId:"MATONGE",districtName:"Matongé/Saint-Boniface",coords:"383,295,393,299,409,321,423,312,434,316,440,308,452,301,459,296,488,310,498,306,498,274,485,263,473,257,474,211,451,218,445,216,431,222,410,245,396,246,383,262"},{districtId:"ROYAL",districtName:"The Royal Quarter",coords:"385,341,396,347,393,361,394,402,398,401,404,404,410,415,451,394,460,396,465,399,465,408,471,403,490,403,490,410,496,415,498,425,485,427,488,432,517,439,525,447,532,452,540,442,545,444,549,440,553,443,557,438,563,438,564,426,595,399,611,406,614,380,602,376,591,380,581,366,570,372,527,356,526,322,517,313,509,317,501,312,495,314,460,299,442,308,435,316,424,314,411,322,406,326,406,334,395,341,388,339"},{districtId:"STGILLES",districtName:"The centre of Saint-Gilles",coords:"50,418,44,403,45,383,56,327,86,313,94,308,104,314,104,322,109,324,109,339,116,343,116,354,127,344,146,355,162,381,190,393,196,404,199,431,202,423,207,421,223,447,226,455,223,463,231,467,239,477,244,503,244,526,237,534,231,536,235,549,227,550,218,548,222,540,222,527,216,527,213,522,208,521,206,515,203,506,180,496,178,474,152,464,130,458,131,463,120,463,100,463,92,460,95,447,73,435"}];function E(t,i){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);i&&(n=n.filter((function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable}))),e.push.apply(e,n)}return e}function S(t){for(var i=1;i<arguments.length;i++){var e=null!=arguments[i]?arguments[i]:{};i%2?E(Object(e),!0).forEach((function(i){(0,L.A)(t,i,e[i])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):E(Object(e)).forEac

1h((function(i){Object.defineProperty(t,i,Object.getOwnPropertyDescriptor(e,i))}))}return t}var D=(0,n.pM)({name:"HtmlMap",props:{districtsList:{type:Object,required:!0},handleActiveState:{type:Function,required:!0}},setup:function(t){return{districtsWithCoords:t.districtsList.map((function(t){var i,e,n=null!==(i=null===(e=C.find((function(i){return i.districtId===t.districtId})))||void 0===e?void 0:e.coords)&&void 0!==i?i:"";return""===n&&console.warn("Couldn't map coordinates for district ".concat(t.districtName,"! This district won't be hoverable.")),S(S({},t),{},{coords:n})}))}}}),A=e(66262);var I=(0,A.A)(D,[["render",function(t,i,e,c,r,s){return(0,n.uX)(),(0,n.CE)("map",null,[((0,n.uX)(!0),(0,n.CE)(n.FK,null,(0,n.pI)(t.districtsWithCoords,(function(i){return(0,n.uX)(),(0,n.CE)("area",{key:i.districtName,alt:"".concat(i.districtName,": ").concat(i.description),href:i.linkPath||"#",coords:i.coords,shape:"poly",onMouseover:function(e){return t.handleActiveState(i)},onFocusin:function(e){return t.handleActiveState(i)},tabindex:"0"},null,40,y)})),128))])}]]),O=(0,n.pM)({name:"DistrictsBlock",props:{title:{type:String},linkLabel:{type:String},linkLabelMobile:{type:String},districtsList:{type:Object,required:!0}},components:{VueDropdown:w.default,VueLink:_.default,VueTitle:b.default,HtmlMap:I},setup:function(t){var i=(0,k.A)(),e=(0,n.KR)(t.districtsList[0]),c=(0,n.KR)();return{activeDistrict:e,districtsDropdownRef:c,handleActiveState:function(t){var i;e.value=t,null===(i=c.value)||void 0===i||i.toggleActive()},windowSize:i,WINDOW_SIZE_LARGE:g.Fj}}});var N=(0,A.A)(O,[["render",function(t,i,e,k,g,w){var _=(0,n.g2)("VueTitle"),b=(0,n.g2)("VueDropdown"),y=(0,n.g2)("HtmlMap"),L=(0,n.g2)("VueLink");return t.districtsList&&t.activeDistrict?((0,n.uX)(),(0,n.CE)("div",c,[(0,n.Lk)("div",r,[(0,n.bF)(_,{class:(0,n.C4)(["cmp-districts__title cmp-title--huge",t.windowSize<t.WINDOW_SIZE_LARGE?"cmp-title--centered":""]),element:"h2",text:t.title},null,8,["class","text"]),(0,n.Q3)(" Mobile/tablet: district names listed in a dropdown "),t.windowSize<t.WINDOW_SIZE_LARGE?((0,n.uX)(),(0,n.Wv)(b,{key:0,"dropdown-title":t.activeDistrict.districtName,icon:"chevronTop",ref:"districtsDropdownRef"},{default:(0,n.k6)((function(){return[(0,n.Lk)("div",s,[((0,n.uX)(!0),(0,n.CE)(n.FK,null,(0,n.pI)(t.districtsList,(function(i){return(0,n.uX)(),(0,n.CE)("button",{key:i.districtName,class:"cmp-districts__name",onClick:function(e){return t.handleActiveState(i)},"aria-label":"Click on district ".concat(i.districtName," to show it on the map")},(0,n.v_)(i.districtName),9,o)})),128))])]})),_:1},8,["dropdown-title"])):((0,n.uX)(),(0,n.CE)("div",a,[(0,n.Q3)(" Desktop: districts names listed in a regular list "),((0,n.uX)(!0),(0,n.CE)(n.FK,null,(0,n.pI)(t.districtsList,(function(i){return(0,n.uX)(),(0,n.CE)("button",{key:i.districtName,class:(0,n.C4)(["cmp-districts__name",i.districtName===t.activeDistrict.districtName?"cmp-districts__name--active":""]),onClick:function(e){return t.handleActiveState(i)},"aria-label":"Click on district ".concat(i.districtName," to show it on the map")},(0,n.v_)(i.districtName),11,l)})),128))]))]),(0,n.Lk)("div",d,[(0,n.Q3)(" Mobile/tablet: If the editor selects a point below the we need to take that into account in the top value to be able to center the image properly "),(0,n.Lk)("img",{src:t.activeDistrict.fileReference,alt:"",class:(0,n.C4)(t.windowSize<t.WINDOW_SIZE_LARGE?"cmp-districts__image-pos".concat(t.activeDistrict.positionx,"-").concat(t.activeDistrict.rotateBubble?t.activeDistrict.positiony-25:t.activeDistrict.positiony):""),srcset:"".concat(t.activeDistrict.fileReference,"/jcr:content/renditions/tiny-480px.jpeg     480w,\n                          ").concat(t.activeDistrict.fileReference,"/jcr:content/renditions/small-800px.jpeg    800w,\n                          ").concat(t.activeDistrict.fileReference,"/jcr:content/renditions/medium-1280px.jpeg 1280w,\n                          ").concat(t.activeDistrict.fileReference,"/jcr:content/renditions/large-1920px.jpeg  1920w"),usemap:t.windowSize>=t.WINDOW_SIZE_LARGE?"#html-map":"",loading:"eager"},null,10,u),t.windowSize>=t.WINDOW_SIZE_LARGE?((0,n.uX)(),(0,n.Wv)(y,{key:0,"districts-list":t.districtsList,"handle-active-state":t.handleActiveState,name:"html-map"},null,8,["districts-list","handle-active-state"])):(0,n.Q3)("v-if",!0),t.windowSize<t.WINDOW_SIZE_LARGE?((0,n.uX)(),(0,n.Wv)(L,{key:1,class:"cmp-districts__active-link btn","aria-live":"polite",icon:"arrowRight","link-text":t.linkLabelMobile,href:t.activeDistrict.linkPath,"show-line-svg":!1,"aria-label":"Discover more about district ".concat(t.activeDistrict.districtName)},null,8,["link-text","href","aria-label"])):((0,n.uX)(),(0,n.CE)("div",{key:2,class:(0,n.C4)(["cmp-districts__bubble",t.activeDistrict.rotateBubble?"cmp-districts__bubble--rotated":""]),style:(0,n.Tr)("top: ".concat(t.activeDistrict.positiony,"%; left: ").concat(t.activeDistrict.positionx,"% "))},[(0,n.Lk)("div",p,[(0,n.Lk)("span",v,[(0,n.Lk)("span",f,(0,n.v_)(t.activeDistrict.districtName),1),(0,n.Lk)("span",m,(0,n.v_)(t.activeDistrict.description),1)]),(0,n.Lk)("a",{href:t.activeDistrict.linkPath,class:"cmp-districts__discover-more","aria-label":"Discover more about district ".concat(t.activeDistrict.districtName)},(0,n.v_)(t.linkLabel),9,h)])],6))])])):(0,n.Q3)("v-if",!0)}]])}}]);