From 11e76432423995912931b12aa44d2357c835ee4b Mon Sep 17 00:00:00 2001 From: Simon Costea Date: Mon, 29 Apr 2024 12:18:13 +0300 Subject: [PATCH] Add email us button --- src/Experience/Utils/Languages.json | 45 ++++--- src/Experience/World/World.js | 187 +++++++++++++++++++++++----- src/index.html | 5 + src/script.js | 2 +- 4 files changed, 195 insertions(+), 44 deletions(-) diff --git a/src/Experience/Utils/Languages.json b/src/Experience/Utils/Languages.json index 19ad1a77..ffe4c9bd 100644 --- a/src/Experience/Utils/Languages.json +++ b/src/Experience/Utils/Languages.json @@ -70,7 +70,8 @@ "noRole": "no role", "logIn": "Log in", "logOut": "Log out", - "noAccess": "You don't have access to watch the films. To get access send an email to hello@biblekids.io" + "noAccess": "You don't have access to watch the films. To get access send an email to hello@biblekids.io", + "contact": "Send us an email" }, "faq": { "questions": [ @@ -248,7 +249,8 @@ "noRole": "ingen rolle", "logIn": "Logg inn", "logOut": "Logg ut", - "noAccess": "Du har ikke tilgang til å vise denne filmen. For å få tilgang send mail til hello@biblekids.io" + "noAccess": "Du har ikke tilgang til å vise denne filmen. For å få tilgang send mail til hello@biblekids.io", + "contact": "Send us an email" }, "faq": { "questions": [ @@ -423,7 +425,8 @@ "noRole": "keine rolle", "logIn": "Einloggen", "logOut": "Ausloggen", - "noAccess": "Du hast keinen Zugang um diesen Film anzusehen. Zugang erhältst du bei hello@biblekids.io" + "noAccess": "Du hast keinen Zugang um diesen Film anzusehen. Zugang erhältst du bei hello@biblekids.io", + "contact": "Send us an email" }, "faq": { "questions": [ @@ -598,7 +601,8 @@ "noRole": "geen rol", "logIn": "Log in", "logOut": "Log uit", - "noAccess": "Je hebt geen rechten om deze film te bekijken. Stuur een e-mail naar hello@biblekids.io om toegang aan te vragen." + "noAccess": "Je hebt geen rechten om deze film te bekijken. Stuur een e-mail naar hello@biblekids.io om toegang aan te vragen.", + "contact": "Send us an email" }, "faq": { "questions": [ @@ -773,7 +777,8 @@ "noRole": "sans rôle", "logIn": "Se connecter", "logOut": "Se déconnecter", - "noAccess": "Tu n'as pas accès au visionnage des films. Pour obtenir un accès, merci d'envoyer un mail à hello@biblekids.io" + "noAccess": "Tu n'as pas accès au visionnage des films. Pour obtenir un accès, merci d'envoyer un mail à hello@biblekids.io", + "contact": "Send us an email" }, "faq": { "questions": [ @@ -948,7 +953,8 @@ "noRole": "brak roli", "logIn": "Zaloguj", "logOut": "Wyloguj", - "noAccess": "Nie masz dostępu do tego filmiku. Aby uzyskać dostęp- napisz maila pod hello@biblekids.io" + "noAccess": "Nie masz dostępu do tego filmiku. Aby uzyskać dostęp- napisz maila pod hello@biblekids.io", + "contact": "Send us an email" }, "faq": { "questions": [ @@ -1123,7 +1129,8 @@ "noRole": "niciun rol", "logIn": "Logare", "logOut": "Delogare", - "noAccess": "Nu ai acces pentru a viziona filmele. Pentru a primi acces, trimite un email la hello@biblekids.io" + "noAccess": "Nu ai acces pentru a viziona filmele. Pentru a primi acces, trimite un email la hello@biblekids.io", + "contact": "Send us an email" }, "faq": { "questions": [ @@ -1298,7 +1305,8 @@ "noRole": "sin rol", "logIn": "Iniciar sección", "logOut": "Cerrar sección", - "noAccess": "No tienes acceso para ver esta película. Para obtener acceso, envíe un correo electrónico a hello@biblekids.io" + "noAccess": "No tienes acceso para ver esta película. Para obtener acceso, envíe un correo electrónico a hello@biblekids.io", + "contact": "Send us an email" }, "faq": { "questions": [ @@ -1473,7 +1481,8 @@ "noRole": "nenhum rolo", "logIn": "Conecte-se", "logOut": "Sair", - "noAccess": "Você não tem acesso a esse vídeo. Para recceber acesso envie um e-mail a hello@biblekids.io" + "noAccess": "Você não tem acesso a esse vídeo. Para recceber acesso envie um e-mail a hello@biblekids.io", + "contact": "Send us an email" }, "faq": { "questions": [ @@ -1648,7 +1657,8 @@ "noRole": "nessun ruolo", "logIn": "Accedi", "logOut": "Esci", - "noAccess": "Non hai accesso alla visione dei film. Per ottenere l'accesso invia un'e-mail a hello@biblekids.io" + "noAccess": "Non hai accesso alla visione dei film. Per ottenere l'accesso invia un'e-mail a hello@biblekids.io", + "contact": "Send us an email" }, "faq": { "questions": [ @@ -1823,7 +1833,8 @@ "noRole": "Нет роли", "logIn": "Войти", "logOut": "Выйти", - "noAccess": "У вас нет доступа для просмотра этого фильма. Чтобы получить доступ, отправьте письмо на hello@biblekids.io" + "noAccess": "У вас нет доступа для просмотра этого фильма. Чтобы получить доступ, отправьте письмо на hello@biblekids.io", + "contact": "Send us an email" }, "faq": { "questions": [ @@ -1998,7 +2009,8 @@ "noRole": "ei roolia", "logIn": "Kirjaudu sisään", "logOut": "Kirjaudu ulos", - "noAccess": "Sinulla ei ole oikeutta katsoa tätä videota. Saadaksesi oikeuden katsoa, lähetä sähköposti osoitteeseen hello@biblekids.io" + "noAccess": "Sinulla ei ole oikeutta katsoa tätä videota. Saadaksesi oikeuden katsoa, lähetä sähköposti osoitteeseen hello@biblekids.io", + "contact": "Send us an email" }, "faq": { "questions": [ @@ -2173,7 +2185,8 @@ "noRole": "no role", "logIn": "Bejelentkezés", "logOut": "Kijelentkezés", - "noAccess": "You don't have access to watch the films. To get access send an email to hello@biblekids.io" + "noAccess": "You don't have access to watch the films. To get access send an email to hello@biblekids.io", + "contact": "Send us an email" }, "faq": { "questions": [ @@ -2348,7 +2361,8 @@ "noRole": "ingen rolle", "logIn": "Log ind", "logOut": "Log ud", - "noAccess": "Du har ikke adgang til at se denne film. For at få adgang\": send en mail til hello@biblekids.io" + "noAccess": "Du har ikke adgang til at se denne film. For at få adgang\": send en mail til hello@biblekids.io", + "contact": "Send us an email" }, "faq": { "questions": [ @@ -2526,7 +2540,8 @@ "noRole": "rol yok", "logIn": "Giriş yapmak", "logOut": "Çıkış Yap", - "noAccess": "Filmleri izleme erişiminiz yok. Erişim elde etmek için hello@biblekids.io adresine bir e-posta gönderin" + "noAccess": "Filmleri izleme erişiminiz yok. Erişim elde etmek için hello@biblekids.io adresine bir e-posta gönderin", + "contact": "Send us an email" }, "faq": { "questions": [ diff --git a/src/Experience/World/World.js b/src/Experience/World/World.js index 43fbc328..ac14d30c 100644 --- a/src/Experience/World/World.js +++ b/src/Experience/World/World.js @@ -31,7 +31,9 @@ export default class World { // Wait for resources this.resources.on('ready', () => { - const personId = this.experience.auth0.userData ? this.experience.auth0.userData['https://login.bcc.no/claims/personId'] : '' + const personId = this.experience.auth0.userData + ? this.experience.auth0.userData['https://login.bcc.no/claims/personId'] + : '' instance.chaptersData = instance.resources.api[_api.getBiexChapters(personId)] this.ageCategory = document.getElementById('app-age_category') @@ -65,6 +67,7 @@ export default class World { guide: document.querySelector('#guide-button'), startChapter: document.querySelector('#start-chapter'), backToAgeCateogry: document.querySelector('#back-to-age-category'), + contact: document.querySelector('#contact-button'), } tippy(this.buttons.openDownloadModal, { @@ -83,6 +86,14 @@ export default class World { placement: 'bottom', }) + tippy(this.buttons.contact, { + theme: 'explorers', + content: _s.settings.contact, + duration: [500, 200], + animation: 'shift-away', + placement: 'bottom', + }) + this.buttons.openDownloadModal.addEventListener('click', this.openDownloadModal) this.buttons.home.addEventListener('click', this.goHome) @@ -149,7 +160,9 @@ export default class World { } setCategoryHtml(category) { - const categoryBtn = _gl.elementFromHtml(`
    • `) + const categoryBtn = _gl.elementFromHtml( + `
    • ` + ) this.ageCategory.querySelector('ul').appendChild(categoryBtn) } @@ -271,26 +284,38 @@ export default class World { details.append(info) if (numberOfEpisodes != 1) { - const videoLabel = _gl.elementFromHtml(`
  • ${numberOfEpisodes} ${_s.chapter.infoPlural.video}
    • `) + const videoLabel = _gl.elementFromHtml( + `
  • ${numberOfEpisodes} ${_s.chapter.infoPlural.video}
    • ` + ) info.append(videoLabel) } else { - const videoLabel = _gl.elementFromHtml(`
  • ${numberOfEpisodes} ${_s.chapter.infoSingular.video}
    • `) + const videoLabel = _gl.elementFromHtml( + `
  • ${numberOfEpisodes} ${_s.chapter.infoSingular.video}
    • ` + ) info.append(videoLabel) } if (numberOfTasks != 1) { - const taskLabel = _gl.elementFromHtml(`
  • ${numberOfTasks} ${_s.chapter.infoPlural.task}
    • `) + const taskLabel = _gl.elementFromHtml( + `
  • ${numberOfTasks} ${_s.chapter.infoPlural.task}
    • ` + ) info.append(taskLabel) } else { - const taskLabel = _gl.elementFromHtml(`
  • ${numberOfTasks} ${_s.chapter.infoSingular.task}
    • `) + const taskLabel = _gl.elementFromHtml( + `
  • ${numberOfTasks} ${_s.chapter.infoSingular.task}
    • ` + ) info.append(taskLabel) } if (numberOfQuizes != 1) { - const quizLabel = _gl.elementFromHtml(`
  • ${numberOfQuizes} ${_s.chapter.infoPlural.quiz}
    • `) + const quizLabel = _gl.elementFromHtml( + `
  • ${numberOfQuizes} ${_s.chapter.infoPlural.quiz}
    • ` + ) info.append(quizLabel) } else { - const quizLabel = _gl.elementFromHtml(`
  • ${numberOfQuizes} ${_s.chapter.infoSingular.quiz}
    • `) + const quizLabel = _gl.elementFromHtml( + `
  • ${numberOfQuizes} ${_s.chapter.infoSingular.quiz}
    • ` + ) info.append(quizLabel) } } @@ -396,7 +421,9 @@ export default class World { } setChapterDescriptionBgImage(chapter) { - const img = _gl.elementFromHtml(`
    `) + const img = _gl.elementFromHtml( + `
    ` + ) document.querySelector('.chapter-description').prepend(img) } @@ -474,23 +501,123 @@ export default class World { instance.cacheChapterArchiveImages(chapter.archive) chapter['program'].forEach((checkpoint) => { - instance.cacheTaskDescriptionAudios(checkpoint.steps.filter((step) => step.message && step.message.audio)) - instance.cacheTaskDescriptionMedia(checkpoint.steps.filter((step) => step.message && step.message.media)) - instance.cacheTaskDescriptionWithSupportingScreensCharacterAudio(checkpoint.steps.filter((step) => step.message_with_supporting_screens && step.message_with_supporting_screens.character_audio)) - instance.cacheTaskDescriptionWithSupportingScreensRightScreen(checkpoint.steps.filter((step) => step.message_with_supporting_screens && step.message_with_supporting_screens.right_screen)) - instance.cacheSortingGameIcons(checkpoint.steps.filter((step) => step.details && step.details.step_type == 'task' && step.details.task_type == 'sorting')) - instance.cachePictureAndCodeImage(checkpoint.steps.filter((step) => step.details && step.details.step_type == 'task' && step.details.task_type == 'picture_and_code')) - instance.cacheDialogueAudios(checkpoint.steps.filter((step) => step.details && step.details.step_type == 'task' && step.details.task_type == 'dialog')) - instance.cacheGameDescriptionTutorials(checkpoint.steps.filter((step) => step.details && step.details.tutorial)) - instance.cacheFlipCardsMedia(checkpoint.steps.filter((step) => step.details && step.details.step_type == 'task' && step.details.task_type == 'flip_cards')) - instance.cacheChooseNewKingMedia(checkpoint.steps.filter((step) => step.details && step.details.step_type == 'task' && step.details.task_type == 'choose_new_king')) - instance.cacheDavidsRefugeImages(checkpoint.steps.filter((step) => step.details && step.details.step_type == 'task' && step.details.task_type == 'davids_refuge')) - instance.cacheMultipleChoiceWithPicture(checkpoint.steps.filter((step) => step.details && step.details.step_type == 'task' && step.details.task_type == 'multiple_choice_with_picture')) - instance.cacheConfirmationScreenImages(checkpoint.steps.filter((step) => step.details && step.details.step_type == 'task' && step.details.task_type == 'confirmation_screen')) - instance.cacheTaskDescriptionScreenImages(checkpoint.steps.filter((step) => step.details && step.details.step_type == 'task' && step.details.task_type == 'task_description_screen')) - instance.cacheTaskDescriptionWithCalculatorScreenImages(checkpoint.steps.filter((step) => step.details && step.details.step_type == 'task' && step.details.task_type == 'calculator_screen')) - instance.cacheSingleChoiceMedia(checkpoint.steps.filter((step) => step.details && step.details.step_type == 'task' && step.details.task_type == 'single_choice')) - instance.cacheTrueFalseQuizMedia(checkpoint.steps.filter((step) => step.details && step.details.step_type == 'task' && step.details.task_type == 'truefalse_quiz')) + instance.cacheTaskDescriptionAudios( + checkpoint.steps.filter((step) => step.message && step.message.audio) + ) + instance.cacheTaskDescriptionMedia( + checkpoint.steps.filter((step) => step.message && step.message.media) + ) + instance.cacheTaskDescriptionWithSupportingScreensCharacterAudio( + checkpoint.steps.filter( + (step) => + step.message_with_supporting_screens && + step.message_with_supporting_screens.character_audio + ) + ) + instance.cacheTaskDescriptionWithSupportingScreensRightScreen( + checkpoint.steps.filter( + (step) => + step.message_with_supporting_screens && + step.message_with_supporting_screens.right_screen + ) + ) + instance.cacheSortingGameIcons( + checkpoint.steps.filter( + (step) => + step.details && + step.details.step_type == 'task' && + step.details.task_type == 'sorting' + ) + ) + instance.cachePictureAndCodeImage( + checkpoint.steps.filter( + (step) => + step.details && + step.details.step_type == 'task' && + step.details.task_type == 'picture_and_code' + ) + ) + instance.cacheDialogueAudios( + checkpoint.steps.filter( + (step) => + step.details && step.details.step_type == 'task' && step.details.task_type == 'dialog' + ) + ) + instance.cacheGameDescriptionTutorials( + checkpoint.steps.filter((step) => step.details && step.details.tutorial) + ) + instance.cacheFlipCardsMedia( + checkpoint.steps.filter( + (step) => + step.details && + step.details.step_type == 'task' && + step.details.task_type == 'flip_cards' + ) + ) + instance.cacheChooseNewKingMedia( + checkpoint.steps.filter( + (step) => + step.details && + step.details.step_type == 'task' && + step.details.task_type == 'choose_new_king' + ) + ) + instance.cacheDavidsRefugeImages( + checkpoint.steps.filter( + (step) => + step.details && + step.details.step_type == 'task' && + step.details.task_type == 'davids_refuge' + ) + ) + instance.cacheMultipleChoiceWithPicture( + checkpoint.steps.filter( + (step) => + step.details && + step.details.step_type == 'task' && + step.details.task_type == 'multiple_choice_with_picture' + ) + ) + instance.cacheConfirmationScreenImages( + checkpoint.steps.filter( + (step) => + step.details && + step.details.step_type == 'task' && + step.details.task_type == 'confirmation_screen' + ) + ) + instance.cacheTaskDescriptionScreenImages( + checkpoint.steps.filter( + (step) => + step.details && + step.details.step_type == 'task' && + step.details.task_type == 'task_description_screen' + ) + ) + instance.cacheTaskDescriptionWithCalculatorScreenImages( + checkpoint.steps.filter( + (step) => + step.details && + step.details.step_type == 'task' && + step.details.task_type == 'calculator_screen' + ) + ) + instance.cacheSingleChoiceMedia( + checkpoint.steps.filter( + (step) => + step.details && + step.details.step_type == 'task' && + step.details.task_type == 'single_choice' + ) + ) + instance.cacheTrueFalseQuizMedia( + checkpoint.steps.filter( + (step) => + step.details && + step.details.step_type == 'task' && + step.details.task_type == 'truefalse_quiz' + ) + ) }) } @@ -521,12 +648,16 @@ export default class World { cacheTaskDescriptionWithSupportingScreensCharacterAudio(steps) { if (steps.length == 0) return - steps.forEach((step) => instance.fetchAndCacheAsset(step.message_with_supporting_screens.character_audio)) + steps.forEach((step) => + instance.fetchAndCacheAsset(step.message_with_supporting_screens.character_audio) + ) } cacheTaskDescriptionWithSupportingScreensRightScreen(steps) { if (steps.length == 0) return - steps.forEach((step) => instance.fetchAndCacheAsset(step.message_with_supporting_screens.right_screen)) + steps.forEach((step) => + instance.fetchAndCacheAsset(step.message_with_supporting_screens.right_screen) + ) } cacheSortingGameIcons(sortingTasks) { diff --git a/src/index.html b/src/index.html index 00460d20..e606a871 100644 --- a/src/index.html +++ b/src/index.html @@ -59,6 +59,11 @@ + + + diff --git a/src/script.js b/src/script.js index b6f17d4e..48fcc8ee 100644 --- a/src/script.js +++ b/src/script.js @@ -14,7 +14,7 @@ import isElectron from 'is-electron' // Load icons const ajax = new XMLHttpRequest() -ajax.open('GET', 'https://biblekids.io/wp-content/uploads/2023/03/biex-sprite.svg?ver=1', true) +ajax.open('GET', 'https://biblekids.io/wp-content/uploads/2023/03/biex-sprite.svg?ver=2', true) ajax.send() ajax.onload = function () { const div = document.createElement('div')