{"version":3,"file":"Participate.ce.a4691865.js","sources":["../../src/utils/api/page.ts","../../src/components/Participate.ce.vue"],"sourcesContent":["import { requestJSON } from './request'\n\nexport interface Page {\n  id: number\n  actions: PageAction[]\n  slug: string\n  status: number\n  title: string\n  title_fr: string\n  title_en: string\n  description: string\n  description_fr: string\n  description_en: string\n  content: string\n  content_fr: string\n  content_en: string\n}\n\nexport interface PageAction {\n  id: number\n  name: string\n  name_fr: string\n  name_en: string\n  description: string\n  description_fr: string\n  description_en: string\n  action: string\n  action_fr: string\n  action_en: string\n  url: string\n  thumbnail_128_crop: string\n  thumbnail_256_crop: string\n  thumbnail_368_256_crop: string\n  is_featured: boolean\n  hex_color: string\n}\n\nexport async function getPages (): Promise<Page[]> {\n  return await requestJSON('/api/pages/')\n}\n\nexport async function getPage (pageId: number): Promise<Page> {\n  return await requestJSON(`/api/pages/${pageId}/`)\n}\n","<template>\n  <div class=\"c-participate__container\">\n    <div v-if=\"isLoading\" class=\"c-loading__container u-mbm\">\n      <SVGIcon class=\"loading-icon\" width=\"80\" height=\"80\" name=\"loading\" />\n    </div>\n    <template v-else-if=\"participatePageData\">\n      <div class=\"c-participate__header\">\n        <h1 class=\"c-participate__title\">{{ getParticipateDataLocale('title') }}</h1>\n        <!-- safe to use here as it's a static string -->\n        <!-- eslint-disable-next-line vue/no-v-html -->\n        <div v-if=\"showPageHeader\" class=\"c-participate__content\" v-html=\"getParticipateDataLocale('content')\" />\n      </div>\n      <div class=\"c-participate__actions\">\n        <div class=\"c-gallery\">\n          <ul class=\"c-gallery__items\">\n            <li v-for=\"(action, index) in participateActions\" :key=\"index\" class=\"c-gallery__item\">\n              <div\n                :class=\"setCardBackground(action.name_en, index, hasImage(action.thumbnail_368_256_crop), action.hex_color)\"\n                class=\"c-card c-card__participate\"\n              >\n                <img\n                  v-if=\"action.thumbnail_368_256_crop && action.thumbnail_368_256_crop.length\"\n                  class=\"c-card__picture\"\n                  :src=\"hasImage(action.thumbnail_368_256_crop) ? action.thumbnail_368_256_crop : baseUrl + 'img/participate-project.png'\"\n                  alt=\"card thumbnail\"\n                >\n                <div v-if=\"action.thumbnail_368_256_crop && action.thumbnail_368_256_crop.length\" class=\"c-card__background-overlay\" />\n                <div class=\"c-card__header\">\n                  <h2 class=\"c-card__title\">\n                    <a :href=\"action.url ? action.url : '#'\" class=\"c-card__link\">{{ getActionDataLocale(action, 'name') }}</a>\n                  </h2>\n                </div>\n                <div class=\"c-card__content\">\n                  <p class=\"c-card__text\">{{ getActionDataLocale(action, 'description') }}</p>\n                  <a class=\"c-participate__link\" :href=\"action.url ? action.url : '#'\">\n                    <SVGIcon class=\"c-participate__link-icon c-button__icon\" name=\"arrow-right\" />\n                    <p class=\"c-participate__link-label\">{{ getActionDataLocale(action, 'action') }}</p>\n                  </a>\n                </div>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, onMounted } from 'vue'\nimport { Page, PageAction, getPages } from '@/utils/api'\nimport { marked } from 'marked'\nimport { urlExists } from '@/utils/urls'\nimport SVGIcon from '@/components/SVGIcon.vue'\n// import { useI18n } from '@/utils/i18n'\n\nconst props = defineProps<{\n  showHeader?: string\n  showFeatured?: string\n}>()\n\nconst isLoading = ref(true)\nconst isHexColorParsed = ref(false)\n\nconst baseUrl = '/static/'\n\nconst pageLocale = ref('')\n\nconst allPages = ref<Page[]>([])\nconst participatePageData = ref<Page>()\nconst participateActions = ref<PageAction[]>()\n\nconst showPageHeader = ref(false)\nconst showFeaturedOnly = ref(false)\n\nconst cardColors = ref([ 'red', 'green', 'blue', 'orange', 'purple' ])\n\nfunction hasImage (imageUrl: string): boolean {\n  if (imageUrl) {\n    return (imageUrl.length > 0) && urlExists(imageUrl)\n  } else {\n    return false\n  }\n}\n\nfunction setCardBackground (actionName: string, index: number, hasImage: boolean, hexColor: string): string {\n  let cardClass = ''\n\n  if (actionName.length) {\n    const cardName = actionName.toLocaleLowerCase()\n\n    if (cardName.includes('project')) {\n      cardClass = 'c-participate__project '\n    } else if (cardName.includes('download')) {\n      cardClass = 'c-participate__download '\n    } else if (cardName.includes('discuss')) {\n      cardClass = 'c-participate__discuss '\n    } else if (cardName.includes('workshop')) {\n      cardClass = 'c-participate__workshop '\n    }\n\n    if (!hasImage) {\n      if (hexColor) {\n        cardClass += setCardColorHexClass(hexColor)\n      } else {\n        cardClass += setCardColorClass(index)\n      }\n    } else {\n      if (hexColor) {\n        cardClass += 'c-participate__has-image' + ' ' + setCardColorHexClass(hexColor)\n      } else {\n        cardClass += 'c-participate__has-image' + ' ' + setCardColorClass(index)\n      }\n    }\n\n    if ((index + 1) === participateActions.value?.length) {\n      isHexColorParsed.value = true\n    }\n  }\n\n  return cardClass\n}\n\nfunction setCardBackgroundHex () {\n  const cardsElements = document.querySelectorAll('.c-card__participate-hex')\n  for (let i = 0; i < cardsElements.length; i++) {\n    const el = cardsElements[i] as HTMLElement\n    const colorCode = Array.from(el.classList).filter(c => c.startsWith('hex'))[0].split('-')[2]\n    el.style.backgroundColor = '#' + colorCode\n    const elOverlay = el.getElementsByClassName('c-card__background-overlay')[0] as HTMLElement\n    if (elOverlay) {\n      elOverlay.style.backgroundColor = '#' + colorCode\n    }\n  }\n}\n\nfunction setCardColorClass (index: number): string {\n  const color = ref(cardColors.value[index % cardColors.value.length])\n  return 'c-card__participate-' + color.value\n}\n\nfunction setCardColorHexClass (hexColor: string): string {\n  return 'c-card__participate-hex' + ' ' + 'hex-color-' + hexColor\n}\n\nasync function getParticipatePage (): Promise<any> {\n  allPages.value = await getPages()\n\n  if (allPages.value && allPages.value.length) {\n    for (let i = 0; i < allPages.value.length; i++) {\n      if (allPages.value[i].title.toLowerCase() === 'participate' || allPages.value[i].title.toLowerCase() === 'participer') {\n        return allPages.value[i]\n      }\n    }\n  }\n}\n\nfunction getParticipateDataLocale (data: string): string {\n  if (participatePageData.value) {\n    if (pageLocale.value === 'en') {\n      // EN\n      switch (data) {\n        case 'title':\n          return participatePageData.value.title_en\n        case 'description':\n          return participatePageData.value.description_en\n        case 'content':\n          return marked.parseInline(participatePageData.value.content_en)\n        case 'action_name':\n          return participatePageData.value.title_en\n        default:\n          return ''\n      }\n    } else if (pageLocale.value === 'fr') {\n      // FR\n      switch (data) {\n        case 'title':\n          return participatePageData.value.title_fr\n        case 'description':\n          return participatePageData.value.description_fr\n        case 'content':\n          return marked.parseInline(participatePageData.value.content_fr)\n        case 'action_name':\n          return participatePageData.value.title_fr\n        default:\n          return ''\n      }\n    } else {\n      return ''\n    }\n  } else {\n    return ''\n  }\n}\n\nfunction getActionDataLocale (action: PageAction, data: string): string {\n  if (action) {\n    if (pageLocale.value === 'en') {\n      // EN\n      switch (data) {\n        case 'name':\n          return action.name_en\n        case 'description':\n          return action.description_en\n        case 'action':\n          return action.action_en\n        default:\n          return ''\n      }\n    } else if (pageLocale.value === 'fr') {\n      // FR\n      switch (data) {\n        case 'name':\n          return action.name_fr\n        case 'description':\n          return action.description_fr\n        case 'action':\n          return action.action_fr\n        default:\n          return ''\n      }\n    } else {\n      return ''\n    }\n  } else {\n    return ''\n  }\n}\n\nwatch([ isHexColorParsed ], async () => {\n  if (isHexColorParsed.value) {\n    setCardBackgroundHex()\n  }\n}, { immediate: true })\n\nonMounted(async () => {\n  pageLocale.value = document.documentElement.lang\n\n  if (props.showHeader === 'True') {\n    showPageHeader.value = true\n  } else {\n    showPageHeader.value = false\n  }\n\n  if (props.showFeatured === 'True') {\n    showFeaturedOnly.value = true\n  } else {\n    showFeaturedOnly.value = false\n  }\n\n  participatePageData.value = await getParticipatePage()\n  console.log('PARTICIPATE PAGE DATA: ', participatePageData.value)\n\n  if (participatePageData.value) {\n    const featuredActions = ref(participatePageData.value.actions.filter((action: PageAction) => action.is_featured === true))\n\n    if (showFeaturedOnly.value && (featuredActions.value.length > 0)) {\n      participateActions.value = featuredActions.value\n    } else {\n      participateActions.value = participatePageData.value.actions\n    }\n    console.log('PARTICIPATE PAGE ACTIONS: ', participateActions.value)\n  }\n\n  isLoading.value = false\n})\n\n</script>\n\n<!-- <style scoped lang=\"scss\">\n\n</style> -->\n"],"names":["getPages","requestJSON","baseUrl","props","__props","isLoading","ref","isHexColorParsed","pageLocale","allPages","participatePageData","participateActions","showPageHeader","showFeaturedOnly","cardColors","hasImage","imageUrl","urlExists","setCardBackground","actionName","index","hexColor","cardClass","cardName","setCardColorHexClass","setCardColorClass","_a","setCardBackgroundHex","cardsElements","i","el","colorCode","c","elOverlay","color","getParticipatePage","getParticipateDataLocale","data","marked","getActionDataLocale","action","watch","onMounted","featuredActions"],"mappings":"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"}