luci-base: cbi: further refactoring

Eliminate more inline scripts in favor to global initialization, use a global
object for sharing fixed strings instead of passing them to each invocation.

Signed-off-by: Jo-Philipp Wich <jow@openwrt.org>

6 files changed, 51 insertions, 72 deletions

diff --git a/modules/luci-base/luasrc/view/cbi/dynlist.htm b/modules/luci-base/luasrc/view/cbi/dynlist.htm
index 80cbee839..4d0b50942 100644
--- a/modules/luci-base/luasrc/view/cbi/dynlist.htm
+++ b/modules/luci-base/luasrc/view/cbi/dynlist.htm
@@ -1,5 +1,15 @@
 <%+cbi/valueheader%>
-<div>
+<div<%=
+	attr("data-prefix", cbid) ..
+	attr("data-browser-path", self.default_path) ..
+	attr("data-dynlist", luci.util.serialize_json({
+		self.keylist, self.vallist,
+		self.datatype, self.optional or self.rmempty
+	})) ..
+
+	ifattr(self.size, "data-size", self.size) ..
+	ifattr(self.placeholder, "data-placeholder", self.placeholder)
+%>>
 <%
 	local vals = self:cfgvalue(section) or {}
 	for i=1, #vals + 1 do
@@ -7,22 +17,11 @@
 		if (val and #val > 0) or (i == 1) then
 %>
 	<input class="cbi-input-text" value="<%=pcdata(val)%>" data-update="change" type="text"<%=
-		attr("id", cbid .. "." .. i) .. attr("name", cbid) .. ifattr(self.size, "size") ..
+		attr("id", cbid .. "." .. i) ..
+		attr("name", cbid) ..
+		ifattr(self.size, "size") ..
 		ifattr(i == 1 and self.placeholder, "placeholder", self.placeholder)
 	%> /><br />
 <% end end %>
 </div>
-<script type="text/javascript">
-cbi_dynlist_init(
-	'<%=cbid%>', '<%=resource%>', '<%=self.datatype%>',
-	<%=tostring(self.optional or self.rmempty)%>,
-	'<%=url('admin/filebrowser')%>',
-	'<%=self.default_path and self.default_path%>'
-	<%- if #self.keylist > 0 then -%>, [{
-		<%- for i, k in ipairs(self.keylist) do -%>
-			<%-=string.format("%q", k) .. ":" .. string.format("%q", self.vallist[i])-%>
-			<%-if i<#self.keylist then-%>,<%-end-%>
-		<%-	end	-%>
-	}, '<%: -- custom -- %>']<% end -%>);
-</script>
 <%+cbi/valuefooter%>
diff --git a/modules/luci-base/luasrc/view/cbi/header.htm b/modules/luci-base/luasrc/view/cbi/header.htm
index 302df1d2f..9710bae8f 100644
--- a/modules/luci-base/luasrc/view/cbi/header.htm
+++ b/modules/luci-base/luasrc/view/cbi/header.htm
@@ -1,7 +1,18 @@
 <%+header%>
 <form method="post" name="cbi" action="<%=REQUEST_URI%>" enctype="multipart/form-data" onreset="return cbi_validate_reset(this)" onsubmit="return cbi_validate_form(this, '<%:Some fields are invalid, cannot save values!%>')">
 	<div>
-		<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
+		<script type="text/javascript" src="<%=resource%>/cbi.js"<%=
+			attr("data-strings", luci.util.serialize_json({
+				label = {
+					choose = translate('-- Please choose --'),
+					custom = translate('-- custom --'),
+				},
+				path = {
+					resource = resource,
+					browser  = url("admin/filebrowser")
+				}
+			}))
+		%>></script>
 		<input type="hidden" name="token" value="<%=token%>" />
 		<input type="hidden" name="cbi.submit" value="1" />
 		<input type="submit" value="<%:Save%>" class="hidden" />
diff --git a/modules/luci-base/luasrc/view/cbi/tblsection.htm b/modules/luci-base/luasrc/view/cbi/tblsection.htm
index fcf216125..26d13f937 100644
--- a/modules/luci-base/luasrc/view/cbi/tblsection.htm
+++ b/modules/luci-base/luasrc/view/cbi/tblsection.htm
@@ -131,8 +131,7 @@ end
 					<input class="cbi-button cbi-button-add" type="submit" value="<%:Add%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" title="<%:Add%>" />
 				<% else %>
 					<% if self.invalid_cts then -%><div class="cbi-section-error"><% end %>
-					<input type="text" class="cbi-section-create-name" id="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" />
-					<script type="text/javascript">cbi_validate_field('cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>', true, 'uciname');</script>
+					<input type="text" class="cbi-section-create-name" id="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" data-type="uciname" data-optional="true" />
 					<input class="cbi-button cbi-button-add" type="submit" onclick="this.form.cbi_state='add-section'; return true" value="<%:Add%>" title="<%:Add%>" />
 					<% if self.invalid_cts then -%>
 						<br /><%:Invalid%></div>
diff --git a/modules/luci-base/luasrc/view/cbi/tsection.htm b/modules/luci-base/luasrc/view/cbi/tsection.htm
index fcffbe0e7..726521ae3 100644
--- a/modules/luci-base/luasrc/view/cbi/tsection.htm
+++ b/modules/luci-base/luasrc/view/cbi/tsection.htm
@@ -37,8 +37,7 @@
 				<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" />
 			<%- else -%>
 				<% if self.invalid_cts then -%><div class="cbi-section-error"><% end %>
-				<input type="text" class="cbi-section-create-name" id="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" />
-				<script type="text/javascript">cbi_validate_field('cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>', true, 'uciname');</script>
+				<input type="text" class="cbi-section-create-name" id="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" data-type="uciname" data-optional="true" />
 				<input type="submit" class="cbi-button cbi-button-add" onclick="this.form.cbi_state='add-section'; return true" value="<%:Add%>" />
 				<% if self.invalid_cts then -%>
 					<br /><%:Invalid%></div>
diff --git a/modules/luci-base/luasrc/view/cbi/ucisection.htm b/modules/luci-base/luasrc/view/cbi/ucisection.htm
index ba0cc53e8..2cb1e75d0 100644
--- a/modules/luci-base/luasrc/view/cbi/ucisection.htm
+++ b/modules/luci-base/luasrc/view/cbi/ucisection.htm
@@ -32,30 +32,25 @@
 
 <% if self.optionals[section] and #self.optionals[section] > 0 or self.dynamic then %>
 	<div class="cbi-optionals" data-index="<%=#self.children + 1%>">
-		<% if self.dynamic then %>
-			<input type="text" id="cbi.opt.<%=self.config%>.<%=section%>" name="cbi.opt.<%=self.config%>.<%=section%>" />
-			<% if self.optionals[section] and #self.optionals[section] > 0 then %>
-			<script type="text/javascript">
-				cbi_combobox_init('cbi.opt.<%=self.config%>.<%=section%>', {
-				<%-
-					for i, val in pairs(self.optionals[section]) do
-				-%>
-					<%-=string.format("%q", val.option) .. ":" .. string.format("%q", striptags(val.title))-%>
-					<%-if next(self.optionals[section], i) then-%>,<%-end-%>
-				<%-
-					end
-				-%>
-				}, '', '<%-: -- custom -- -%>');
-			</script>
-			<% end %>
+		<%
+		if self.dynamic then
+			local keys, vals, name, opt = { }, { }
+			for name, opt in pairs(self.optionals[section]) do
+				keys[#keys+1] = name
+				vals[#vals+1] = opt.title
+			end
+		%>
+			<input type="text" id="cbi.opt.<%=self.config%>.<%=section%>" name="cbi.opt.<%=self.config%>.<%=section%>" data-type="uciname" data-optional="true"<%=
+				ifattr(#keys > 0, "data-choices", luci.util.json_encode({keys, vals}))
+			%> />
 		<% else %>
-		<select id="cbi.opt.<%=self.config%>.<%=section%>" name="cbi.opt.<%=self.config%>.<%=section%>" data-optionals="true">
-			<option><%: -- Additional Field -- %></option>
-			<% for key, val in pairs(self.optionals[section]) do -%>
-				<option id="cbi-<%=self.config.."-"..section.."-"..val.option%>" value="<%=val.option%>" data-index="<%=val.index%>" data-depends="<%=pcdata(val:deplist2json(section))%>"><%=striptags(val.title)%></option>
-			<%- end %>
-		</select>
-	<% end %>
+			<select id="cbi.opt.<%=self.config%>.<%=section%>" name="cbi.opt.<%=self.config%>.<%=section%>" data-optionals="true">
+				<option><%: -- Additional Field -- %></option>
+				<% for key, val in pairs(self.optionals[section]) do -%>
+					<option id="cbi-<%=self.config.."-"..section.."-"..val.option%>" value="<%=val.option%>" data-index="<%=val.index%>" data-depends="<%=pcdata(val:deplist2json(section))%>"><%=striptags(val.title)%></option>
+				<%- end %>
+			</select>
+		<% end %>
 		<input type="submit" class="cbi-button cbi-button-fieldadd" value="<%:Add%>" />
 	</div>
 <% end %>
diff --git a/modules/luci-base/luasrc/view/cbi/value.htm b/modules/luci-base/luasrc/view/cbi/value.htm
index 9bb4f3b0f..e6e0287ef 100644
--- a/modules/luci-base/luasrc/view/cbi/value.htm
+++ b/modules/luci-base/luasrc/view/cbi/value.htm
@@ -8,35 +8,11 @@
 		ifattr(self.size, "size") ..
 		ifattr(self.placeholder, "placeholder") ..
 		ifattr(self.readonly, "readonly") ..
-		ifattr(self.maxlength, "maxlength")
+		ifattr(self.maxlength, "maxlength") ..
+		ifattr(self.datatype, "data-type", self.datatype) ..
+		ifattr(self.datatype, "data-optional", self.optional or self.rmempty) ..
+		ifattr(self.combobox_manual, "data-manual", self.combobox_manual) ..
+		ifattr(#self.keylist > 0, "data-choices", luci.util.serialize_json({ self.keylist, self.vallist }))
 	%> />
 	<% if self.password then %><img src="<%=resource%>/cbi/reload.gif" style="vertical-align:middle" title="<%:Reveal/hide password%>" onclick="var e = document.getElementById('<%=cbid%>'); e.type = (e.type=='password') ? 'text' : 'password';" /><% end %>
-	<% if #self.keylist > 0 or self.datatype then -%>
-	<script type="text/javascript">//<![CDATA[
-		<% if #self.keylist > 0 then -%>
-		cbi_combobox_init('<%=cbid%>', {
-		<%-
-			for i, k in ipairs(self.keylist) do
-		-%>
-			<%-=string.format("%q", k) .. ":" .. string.format("%q", self.vallist[i])-%>
-			<%-if i<#self.keylist then-%>,<%-end-%>
-		<%-
-			end
-		-%>
-		}, '<%- if not self.rmempty and not self.optional then -%>
-			<%-: -- Please choose -- -%>
-			<%- elseif self.placeholder then -%>
-			<%-= pcdata(self.placeholder) -%>
-		<%- end -%>', '
-		<%- if self.combobox_manual then -%>
-			<%-=self.combobox_manual-%>
-		<%- else -%>
-			<%-: -- custom -- -%>
-		<%- end -%>');
-		<%- end %>
-		<% if self.datatype then -%>
-		cbi_validate_field('<%=cbid%>', <%=tostring((self.optional or self.rmempty) == true)%>, '<%=self.datatype:gsub("\\", "\\\\"):gsub("'", "\\'")%>');
-		<%- end %>
-	//]]></script>
-	<% end -%>
 <%+cbi/valuefooter%>