From e08b60acd6554f4f10389a7f1a7de8bcf8f93f8f Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Tue, 5 Jul 2022 13:16:07 +0200
Subject: [PATCH] Expose option urlTarget to be able to set the target
 attribute when labels are rendered as links.

---
 CHANGELOG.md                                 |  2 +-
 README.md                                    |  4 ++++
 src/_defaults.js                             |  1 +
 src/main.js                                  | 13 +++++++++++++
 src/stories/example-00-milestones.stories.js |  1 +
 src/stories/milestones.js                    |  6 ++++++
 6 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3ea0a1f..5189a21 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`main`](https://github.com/walterra/d3-milestones/tree/main)
 
-No public interface changes since `v1.2.1`.
+No public interface changes since `v1.2.2`.
 
 ## [`v1.2.2`](https://github.com/walterra/d3-milestones/tree/v1.2.2)
 
diff --git a/README.md b/README.md
index c8fe9e0..f02da99 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,10 @@ Specifies the formatter for the timestamp field. The specifier string is expecte
 
 The `labelFormat` for the time label for each milestones defaults to `'%Y-%m-%d %H:%M'`. Using `aggregateBy`, `labelFormat` will be set automatically to a reasonable format corresponding to the aggregation level. Still, this method is available to override this behavior with a custom `labelFormat`.
 
+<a name="urlTarget" href="#urlTarget">#</a> vis.<b>urlTarget</b>(<i>string</i>)
+
+Customizes the `target` attribute when labels are provided with a URL. Can be `_blank`, `_self`, `_parent` or  `_top`.
+
 <a name="useLabels" href="#useLabels">#</a> vis.<b>useLabels</b>(<i>boolean</i>)
 
 Enables/Disables the display of labels.
diff --git a/src/_defaults.js b/src/_defaults.js
index 5a9072f..694e87a 100644
--- a/src/_defaults.js
+++ b/src/_defaults.js
@@ -13,4 +13,5 @@ export const DEFAULTS = {
   USE_LABELS: true,
   AGGREGATE_BY: 'minute',
   AUTO_RESIZE: true,
+  URL_TARGET: '_self',
 };
diff --git a/src/main.js b/src/main.js
index 9c2826b..0dd7ed0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -73,6 +73,17 @@ export default function milestones(selector) {
   }
   setUseLabels(DEFAULTS.USE_LABELS);
 
+  let urlTarget;
+  function setUrlTarget(d) {
+    if (
+      typeof d === 'string' &&
+      ['_blank', '_self', '_parent', '_top'].includes(d.toLowerCase())
+    ) {
+      urlTarget = d;
+    }
+  }
+  setUrlTarget(DEFAULTS.URL_TARGET);
+
   // set callback for event mouseover
   let callBackMouseOver;
   function setEventMouseOverCallback(callback) {
@@ -386,6 +397,7 @@ export default function milestones(selector) {
                 .classed('milestones-label', true)
                 .classed('milestones-link-label', true)
                 .attr('href', v[mapping.url])
+                .attr('target', urlTarget)
                 .text(t);
             } else {
               item = element
@@ -497,6 +509,7 @@ export default function milestones(selector) {
     distribution: setDistribution,
     parseTime: setParseTime,
     labelFormat: setLabelFormat,
+    urlTarget: setUrlTarget,
     useLabels: setUseLabels,
     range: setRange,
     render: render,
diff --git a/src/stories/example-00-milestones.stories.js b/src/stories/example-00-milestones.stories.js
index 83ae16c..c8bf644 100644
--- a/src/stories/example-00-milestones.stories.js
+++ b/src/stories/example-00-milestones.stories.js
@@ -22,5 +22,6 @@ MilestonesReleases.args = {
     text: 'detail',
     url: 'giturl',
   },
+  urlTarget: '_blank',
   data,
 };
diff --git a/src/stories/milestones.js b/src/stories/milestones.js
index 859ad6f..90db25f 100644
--- a/src/stories/milestones.js
+++ b/src/stories/milestones.js
@@ -43,6 +43,10 @@ export const argTypes = {
   data: {
     control: { type: 'object' },
   },
+  urlTarget: {
+    options: ['_blank', '_self', '_parent', '_top'],
+    control: { type: 'radio' },
+  },
 };
 
 export const createMilestones = (
@@ -60,6 +64,7 @@ export const createMilestones = (
     orientation,
     parseTime,
     autoResize,
+    urlTarget,
   },
   DIV_ID = 'timeline',
   style = ''
@@ -81,6 +86,7 @@ export const createMilestones = (
     orientation && m.orientation(orientation);
     parseTime && m.parseTime(parseTime);
     autoResize && m.autoResize(autoResize);
+    urlTarget && m.urlTarget(urlTarget);
 
     m.render(data);
   }