Use Learn content viewer when available

If the Learn plugin is present, build a URL with the content ID and
navigate to it. Also pass the current location as URL parameter. If the
Learn plugin can handle that parameter, it should use it to navigate
back.

If the Learn plugin is not present (no URL matching) display the content
in a lightbox modal as before.

https://phabricator.endlessm.com/T34740

Author: manuq

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() {

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');
 }

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);
       },
     },
   };