home article cards links made active

web/themes/custom/materiotheme/templates/field/image-formatter.html.twig

@@ -12,6 +12,8 @@
  */
 #}
 {% if url %}
+  {# {{ link(image, url, { '@click.prevent.stop':'onClickLink' }) }} #}
+  <!-- attributes are added from vue_link_formatter custom module -->
   {{ link(image, url) }}
 {% else %}
   {{ image }}

web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue

@@ -125,22 +125,50 @@ export default {
     },
     onClickLink(e){
       console.log("onClickLink", e, this.$router, this.$route)
-      if (e.originalTarget.protocol == "mailto:") {
+      // record the target before event finish the propagation as currentTarget will be deleted after
+      let target = e.currentTarget
+      console.log('target', target)
+
+      if (target.protocol == "mailto:") {
         // https://stackoverflow.com/questions/10172499/mailto-using-javascript
-        window.location.href = e.originalTarget.href
+        window.location.href = target.href
       }else {
         let path = null;
-        // find existing router route compared with link href
-        for (let i = 0; i < this.$router.options.routes.length; i++) {
-          if (this.$router.options.routes[i].path == e.originalTarget.pathname) {
-            if (e.originalTarget.pathname !== this.$route.path) {
-              path = e.originalTarget.pathname
-            }
-            break
+        let article = null;
+
+        // if we have an article link with appropriate data attributes
+        // 'data-id'
+        // 'data-entity-type'
+        // 'data-bundle'
+        if (target.dataset.entityType == 'node' && target.dataset.bundle == 'article') {
+          let matches = target.pathname.match(/^\/\w{2}\/[^\/]+\/(.*)/i)
+          console.log('matches', matches)
+          article = {
+            nid: target.dataset.id,
+            alias: matches[1]
           }
+        } else {
+          // find existing router route compared with link href
+          let pathbase = target.pathname.match(/^(\/\w{2}\/[^\/]+)\/.*/i)
+          console.log('pathbase', pathbase)
+
+          for (let i = 0; i < this.$router.options.routes.length; i++) {
+            if (this.$router.options.routes[i].path == pathbase[1]) {
+              if (target.pathname !== this.$route.path) {
+                path = target.pathname
+              }
+              break
+            }
+          }
+
         }
 
-        if (path) {
+        if (article) {
+          this.$router.push({
+            name:`article`,
+            params: { alias: article.alias, id: article.nid }
+          })
+        } else if (path) {
           this.$router.push({
             path: path
           })