From b13806f1dff458c34925d2cd28ad7e623d428b39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Manuel=20Qui=C3=B1ones?= <manuq@endlessos.org>
Date: Tue, 9 May 2023 14:19:24 -0300
Subject: [PATCH 1/2] 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
---
 .../assets/src/kolibriApi.js                  |  4 ++--
 .../assets/src/modules/topicsTree/handlers.js | 20 +++++++++++++++++--
 .../assets/src/views/ContentModal.vue         |  9 +++------
 3 files changed, 23 insertions(+), 10 deletions(-)

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

From d5ecdc097bf51da1c037e5af6d6faa627bc73a67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Manuel=20Qui=C3=B1ones?= <manuq@endlessos.org>
Date: Fri, 12 May 2023 10:56:50 -0300
Subject: [PATCH 2/2] Content cards: Navigate to content directly

Don't open the detail page in the custom channel presentation. Instead
navigate to content. Which will show it in the Learn detail page if that
plugin is available.

https://phabricator.endlessm.com/T34740
---
 .../eos-components/src/components/ContentCard.vue    |  2 +-
 .../eos-components/src/components/ContentLink.vue    | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

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,
     }"
   >
-    <ContentLink :url="url" @isHovered="(hovered) => isHovered = hovered">
+    <ContentLink :url="url" :nodeId="node.id" @isHovered="(hovered) => isHovered = hovered">
       <b-card-body>
         <div
           class="card-img"
diff --git a/packages/eos-components/src/components/ContentLink.vue b/packages/eos-components/src/components/ContentLink.vue
index 6a99d835b..07420d5e0 100644
--- a/packages/eos-components/src/components/ContentLink.vue
+++ b/packages/eos-components/src/components/ContentLink.vue
@@ -17,6 +17,11 @@ export default {
       type: String,
       required: true,
     },
+    nodeId: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   emits: ['isHovered'],
   methods: {
@@ -24,7 +29,12 @@ export default {
       this.$emit('isHovered', hovered);
     },
     onClick() {
-      this.$router.push(this.url);
+      if (this.nodeId) {
+        window.kolibri.navigateTo(this.nodeId);
+      }
+      else {
+        this.$router.push(this.url);
+      }
     },
   },
 };