luci-base: rework filebrowser initialization

Do not call cbi_init() from the browser field template but lazily initialize
the field, like it is being done for all other widgets as well.

Fixes: #2398
Signed-off-by: Jo-Philipp Wich <jo@mein.io>

2 files changed, 22 insertions, 25 deletions

diff --git a/modules/luci-base/htdocs/luci-static/resources/cbi.js b/modules/luci-base/htdocs/luci-static/resources/cbi.js
index 6feb9fb35..f93c9351a 100644
--- a/modules/luci-base/htdocs/luci-static/resources/cbi.js
+++ b/modules/luci-base/htdocs/luci-static/resources/cbi.js
@@ -808,9 +808,8 @@ function cbi_init() {
 		                   node.getAttribute('data-type'));
 	}
 
-	document.querySelectorAll('.cbi-dropdown').forEach(function(s) {
-		cbi_dropdown_init(s);
-	});
+	document.querySelectorAll('.cbi-dropdown').forEach(cbi_dropdown_init);
+	document.querySelectorAll('[data-browser]').forEach(cbi_browser_init);
 
 	document.querySelectorAll('.cbi-tooltip:not(:empty)').forEach(function(s) {
 		s.parentNode.classList.add('cbi-tooltip-container');
@@ -872,30 +871,26 @@ function cbi_combobox_init(id, values, def, man) {
 }
 
 function cbi_filebrowser(id, defpath) {
-	var field   = document.getElementById(id);
+	var field   = L.dom.elem(id) ? id : document.getElementById(id);
 	var browser = window.open(
-		cbi_strings.path.browser + ( field.value || defpath || '' ) + '?field=' + id,
+		cbi_strings.path.browser + (field.value || defpath || '') + '?field=' + field.id,
 		"luci_filebrowser", "width=300,height=400,left=100,top=200,scrollbars=yes"
 	);
 
 	browser.focus();
 }
 
-function cbi_browser_init(id, resource, defpath)
+function cbi_browser_init(field)
 {
-	function cbi_browser_btnclick(e) {
-		cbi_filebrowser(id, defpath);
-		return false;
-	}
-
-	var field = document.getElementById(id);
-
-	var btn = document.createElement('img');
-	btn.className = 'cbi-image-button';
-	btn.src = (resource || cbi_strings.path.resource) + '/cbi/folder.gif';
-	field.parentNode.insertBefore(btn, field.nextSibling);
-
-	btn.addEventListener('click', cbi_browser_btnclick);
+	field.parentNode.insertBefore(
+		E('img', {
+			'src': L.resource('cbi/folder.gif'),
+			'class': 'cbi-image-button',
+			'click': function(ev) {
+				cbi_filebrowser(field, field.getAttribute('data-browser'));
+				ev.preventDefault();
+			}
+		}), field.nextSibling);
 }
 
 CBIDynamicList = {
diff --git a/modules/luci-base/luasrc/view/cbi/browser.htm b/modules/luci-base/luasrc/view/cbi/browser.htm
index 362c40bec..eb47ffafe 100644
--- a/modules/luci-base/luasrc/view/cbi/browser.htm
+++ b/modules/luci-base/luasrc/view/cbi/browser.htm
@@ -1,8 +1,10 @@
-<% local v = self:cfgvalue(section) or self.default -%>
 <%+cbi/valueheader%>
-	<input class="cbi-input-text" type="text"<%= attr("value", v) .. attr("name", cbid) .. attr("id", cbid) %> />
-	<script type="text/javascript">
-cbi_init()
-cbi_browser_init('<%=cbid%>', '<%=resource%>', '<%=url('admin/filebrowser')%>'<%=self.default_path and ", '"..self.default_path.."'"%>);
-	</script>
+
+<input class="cbi-input-text" type="text"<%=
+	attr("id", cbid) ..
+	attr("name", cbid) ..
+	attr("value", self:cfgvalue(section) or self.default) ..
+	attr("data-browser", self.default_path or "")
+%> />
+
 <%+cbi/valuefooter%>