From 116744d57042d4c91470c333de79fd38a249bcb7 Mon Sep 17 00:00:00 2001
From: Kailas Nadh U <53608019+kailasnadh790@users.noreply.github.com>
Date: Mon, 11 Dec 2023 12:05:11 -0500
Subject: [PATCH] imagecta link fix (#41)

* imagecta link fix

* refactored

* Update styles.css

* refactoring code
---
 cigaradvisor/blocks/imagecta/imagecta.css | 25 +++++++++++++++++++++++
 cigaradvisor/blocks/imagecta/imagecta.js  |  7 ++++++-
 cigaradvisor/scripts/scripts.js           |  9 ++++++++
 cigaradvisor/styles/styles.css            | 19 -----------------
 4 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/cigaradvisor/blocks/imagecta/imagecta.css b/cigaradvisor/blocks/imagecta/imagecta.css
index f22e77e1..a7a96267 100644
--- a/cigaradvisor/blocks/imagecta/imagecta.css
+++ b/cigaradvisor/blocks/imagecta/imagecta.css
@@ -20,3 +20,28 @@
   object-fit: cover;
   object-position: center;
 }
+
+.section[data-layout="50/50"] .imagecta-wrapper{
+  display: flex;
+  flex-basis: 100%;
+}
+
+.section[data-layout="50/50"] .imagecta.block{
+  display: flex;
+  flex-basis: 100%;
+}
+
+.section[data-layout="50/50"]  .imagecta.block > a{
+  flex-basis: 100%;
+}
+
+@media screen and (min-width: 1200px) {
+  .section[data-layout="50/50"] .imagecta.block>a img {
+    border: 1px solid #000;
+  }
+
+  /* removing border for 2 column videos section */
+  .two-column-section[data-layout="50/50"] .imagecta.block>a img {
+    border: none;
+  }
+}
diff --git a/cigaradvisor/blocks/imagecta/imagecta.js b/cigaradvisor/blocks/imagecta/imagecta.js
index ee980e02..db34d461 100644
--- a/cigaradvisor/blocks/imagecta/imagecta.js
+++ b/cigaradvisor/blocks/imagecta/imagecta.js
@@ -1,3 +1,5 @@
+import { isExternal } from '../../scripts/scripts.js';
+
 export default async function decorate(block) {
   const children = [];
   const anchor = document.createElement('a');
@@ -7,7 +9,10 @@ export default async function decorate(block) {
   picture.style.paddingBottom = `${ratio}%`;
   anchor.style.maxWidth = `${img.width}px`;
   anchor.append(picture);
-  anchor.setAttribute('href', block.querySelector('a').getAttribute('href'));
+  const link = block.querySelector('a').getAttribute('href');
+  anchor.setAttribute('href', link);
+  anchor.setAttribute('target', isExternal(link) ? '_blank' : '_self');
+  anchor.setAttribute('title', img.alt);
   children.push(anchor);
   block.replaceChildren(...children);
 }
diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js
index 96fb1770..fa44ccdb 100644
--- a/cigaradvisor/scripts/scripts.js
+++ b/cigaradvisor/scripts/scripts.js
@@ -93,6 +93,15 @@ export function decorateMain(main) {
   buildTwoColumnGrid(main);
 }
 
+export function isExternal(path) {
+  try {
+    const url = new URL(path);
+    return window.location.hostname !== url.hostname;
+  } catch (error) {
+    return false;
+  }
+}
+
 /**
  * Loads everything needed to get to LCP.
  * @param {Element} doc The container element
diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css
index 0e30054a..3286a29d 100644
--- a/cigaradvisor/styles/styles.css
+++ b/cigaradvisor/styles/styles.css
@@ -113,22 +113,3 @@ main .section[data-layout="50/50"] .right-grid > div{
   padding: 10px;
 }
 
-main .section[data-layout="50/50"] .imagecta-wrapper{
-  display: flex;
-  flex-basis: 100%;
-}
-
-main .section[data-layout="50/50"] .imagecta.block{
-  display: flex;
-  flex-basis: 100%;
-}
-
-main .section[data-layout="50/50"]  .imagecta.block > a{
-  flex-basis: 100%;
-}
-
-@media screen and (min-width: 1200px) {
-  main .section[data-layout="50/50"] .imagecta.block>a img {
-    border: 1px solid #000;
-  }
-}
\ No newline at end of file