diff --git a/kolibri_explore_plugin/assets/src/kolibriApi.js b/kolibri_explore_plugin/assets/src/kolibriApi.js index 13b64dc08..2902998cf 100644 --- a/kolibri_explore_plugin/assets/src/kolibriApi.js +++ b/kolibri_explore_plugin/assets/src/kolibriApi.js @@ -6,7 +6,7 @@ import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants'; import router from 'kolibri.coreVue.router'; import store from 'kolibri.coreVue.vuex.store'; import { utils } from 'eos-components'; -import { showTopicsContentInLightbox } from './modules/topicsTree/handlers'; +import { showTopicsContent } from './modules/topicsTree/handlers'; import { PageNames } from './constants'; import { getChannelIcon } from './customApps'; @@ -39,7 +39,7 @@ class KolibriApi { } navigateTo(nodeId) { - showTopicsContentInLightbox(store, nodeId); + showTopicsContent(store, nodeId); } closeCustomPresentation() { diff --git a/kolibri_explore_plugin/assets/src/modules/topicsTree/handlers.js b/kolibri_explore_plugin/assets/src/modules/topicsTree/handlers.js index 790dd1e3b..6a28033f0 100644 --- a/kolibri_explore_plugin/assets/src/modules/topicsTree/handlers.js +++ b/kolibri_explore_plugin/assets/src/modules/topicsTree/handlers.js @@ -127,7 +127,7 @@ export function showTopicsChannel(store, id) { }); } -export function showTopicsContentInLightbox(store, id) { +function showTopicsContentInLightbox(store, id) { const promises = [ContentNodeResource.fetchModel({ id }), store.dispatch('setChannelInfo')]; const shouldResolve = samePageCheckGenerator(store); Promise.all(promises).then( @@ -161,6 +161,22 @@ export function showTopicsContentInLightbox(store, id) { ); } -export function hideTopicsContentFromLightbox(store) { +function showTopicsContentInLearnTab(learnUrl, id) { + // Pass current URL as prevName: + const prevName = encodeURIComponent(window.location.href); + const contentViewerUrl = `${learnUrl()}#/topics/c/${id}?prevName=${prevName}`; + window.location.replace(contentViewerUrl); +} + +export function showTopicsContent(store, id) { + const learnUrl = urls['kolibri:kolibri.plugins.learn:learn']; + if (learnUrl) { + showTopicsContentInLearnTab(learnUrl, id); + } else { + showTopicsContentInLightbox(store, id); + } +} + +export function hideTopicsContent(store) { store.commit('topicsTree/RESET_CONTENT'); } diff --git a/kolibri_explore_plugin/assets/src/views/ContentModal.vue b/kolibri_explore_plugin/assets/src/views/ContentModal.vue index 245ee099e..d5ee3478d 100644 --- a/kolibri_explore_plugin/assets/src/views/ContentModal.vue +++ b/kolibri_explore_plugin/assets/src/views/ContentModal.vue @@ -20,10 +20,7 @@ import { mapState } from 'vuex'; import { responsiveMixin } from 'eos-components'; - import { - hideTopicsContentFromLightbox, - showTopicsContentInLightbox, - } from '../modules/topicsTree/handlers'; + import { hideTopicsContent, showTopicsContent } from '../modules/topicsTree/handlers'; import ContentItem from './ContentItem'; export default { @@ -86,10 +83,10 @@ }, goToContent(id) { - showTopicsContentInLightbox(this.$store, id); + showTopicsContent(this.$store, id); }, onClose() { - hideTopicsContentFromLightbox(this.$store); + hideTopicsContent(this.$store); }, }, }; diff --git a/packages/eos-components/src/components/ContentCard.vue b/packages/eos-components/src/components/ContentCard.vue index e98e5f31d..ba1a063a9 100644 --- a/packages/eos-components/src/components/ContentCard.vue +++ b/packages/eos-components/src/components/ContentCard.vue @@ -7,7 +7,7 @@ 'shadow': isHovered, }" > - +