From 0ab4f68afda2c3b25e5f7402ef29ea492331fd88 Mon Sep 17 00:00:00 2001
From: Hussain Nagaria <hussainbhaitech@gmail.com>
Date: Wed, 28 Apr 2021 06:24:09 +0530
Subject: [PATCH] feat: Open Link button in Data (URL) input field

---
 frappe/public/js/frappe/form/controls/data.js | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/frappe/public/js/frappe/form/controls/data.js b/frappe/public/js/frappe/form/controls/data.js
index 98ca6995a2f..854992f7f1a 100644
--- a/frappe/public/js/frappe/form/controls/data.js
+++ b/frappe/public/js/frappe/form/controls/data.js
@@ -61,6 +61,53 @@ frappe.ui.form.ControlData = frappe.ui.form.ControlInput.extend({
 		this.has_input = true;
 		this.bind_change_event();
 		this.setup_autoname_check();
+
+		if (this.df.options == 'URL') {
+			this.setup_url_field();
+		}
+	},
+	setup_url_field: function() {
+		this.$wrapper.find('.control-input').append(
+			`<span class="link-btn">
+				<a class="btn-open no-decoration" title="${__("Open Link")}" target="_blank">
+					${frappe.utils.icon('link-url', 'xs')}
+				</a>
+			</span>`
+		);
+		
+		this.$link = this.$wrapper.find('.link-btn');
+		this.$link_open = this.$link.find('.btn-open');
+		
+		this.$input.on("focus", () => {
+			setTimeout(() => {
+				let inputValue = this.get_input_value();
+				
+				if(inputValue && validate_url(inputValue)) {
+					this.$link.toggle(true);
+					this.$link_open.attr('href', this.get_input_value());
+				}
+			}, 500);
+		});
+
+
+		this.$input.bind("input", () => {
+			let inputValue = this.get_input_value();
+
+			if(inputValue && validate_url(inputValue)) {
+				this.$link.toggle(true);
+				this.$link_open.attr('href', this.get_input_value());
+			} else {
+				this.$link.toggle(false);
+			}
+		});
+		
+		this.$input.on("blur", () => {
+			// if this disappears immediately, the user's click
+			// does not register, hence timeout
+			setTimeout(() => {
+				this.$link.toggle(false);
+			}, 500);
+		});
 	},
 	bind_change_event: function() {
 		const change_handler = e => {