Merge pull request #23 from sunbirddcim/DCT-62793

DCT-62793 Update visualsearch to not use JST syntax/lodash's template function, which uses vanilla Function constructor internally
sunbirddcim · Jun 19, 2024 · 55f77be · 55f77be
2 parents 1fde957 + e93e985
commit 55f77be
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 9 deletions.
diff --git a/build/visualsearch.js b/build/visualsearch.js
@@ -1964,9 +1964,36 @@ VS.model.SearchQuery = Backbone.Collection.extend({
 
 })();
 (function(){
-window.JST = window.JST || {};
-
-window.JST['search_box'] = _.template('<div class="VS-search <% if (readOnly) { %>VS-readonly<% } %>">\n  <div class="VS-search-box-wrapper VS-search-box">\n    <div class="VS-icon VS-icon-search"><i class="fa fa-search"></i></div>\n    <div class="VS-placeholder"></div>\n    <div class="VS-search-inner"></div>\n    <div class="VS-icon VS-icon-cancel VS-cancel-search-box" title="clear search"><i class="fa fa-times-circle"></i></div>\n  </div>\n</div>');
-window.JST['search_facet'] = _.template('<% if (model.has(\'category\')) { %>\n  <div class="category"><%- model.get(\'category\') %>:</div>\n<% } %>\n\n<div class="search_facet_input_container">\n  <input type="text" class="search_facet_input ui-menu VS-interface" value="" <% if (readOnly) { %>disabled="disabled"<% } %> />\n</div>\n\n<div class="search_facet_remove VS-icon VS-icon-cancel"><i class="fa fa-times-circle"></i></div>');
-window.JST['search_input'] = _.template('<input type="text" class="ui-menu" <% if (readOnly) { %>disabled="disabled"<% } %> />');
+  window.JST = window.JST || {};
+
+  window.JST['search_box'] = function ({readOnly}) {
+    return `
+      <div class="VS-search${readOnly ? ' VS-readonly' : ''}">
+        <div class="VS-search-box-wrapper VS-search-box">
+          <div class="VS-icon VS-icon-search">
+            <i class="fa fa-search"></i>
+          </div>
+          <div class="VS-placeholder"></div>
+          <div class="VS-search-inner"></div>
+          <div class="VS-icon VS-icon-cancel VS-cancel-search-box" title="clear search">
+            <i class="fa fa-times-circle"></i>
+          </div>
+        </div>
+      </div>
+      `;
+  };
+  window.JST['search_facet'] = function ({model, readOnly}) {
+    return `
+      ${model.has('category') ? `<div class="category">${model.get('category')}: </div>` : ''}
+      <div class="search_facet_input_container">
+        <input type="text" class="search_facet_input ui-menu VS-interface" value="" ${readOnly ? 'disabled="disabled"' : ''} />
+      </div>
+      <div class="search_facet_remove VS-icon VS-icon-cancel">
+        <i class="fa fa-times-circle"></i>
+      </div>
+    `;
+  };
+  window.JST['search_input'] = function ({readOnly}) {
+    return `<input type="text" class="ui-menu" ${readOnly ? 'disabled="disabled"' : ''} />`;
+  };
 })();
diff --git a/lib/js/templates/templates.js b/lib/js/templates/templates.js
@@ -1,7 +1,34 @@
 (function(){
-window.JST = window.JST || {};
+  window.JST = window.JST || {};
 
-window.JST['search_box'] = _.template('<div class="VS-search <% if (readOnly) { %>VS-readonly<% } %>">\n  <div class="VS-search-box-wrapper VS-search-box">\n    <div class="VS-icon VS-icon-search"><i class="fa fa-search"></i></div>\n    <div class="VS-placeholder"></div>\n    <div class="VS-search-inner"></div>\n    <div class="VS-icon VS-icon-cancel VS-cancel-search-box" title="clear search"><i class="fa fa-times-circle"></i></div>\n  </div>\n</div>');
-window.JST['search_facet'] = _.template('<% if (model.has(\'category\')) { %>\n  <div class="category"><%- model.get(\'category\') %>:</div>\n<% } %>\n\n<div class="search_facet_input_container">\n  <input type="text" class="search_facet_input ui-menu VS-interface" value="" <% if (readOnly) { %>disabled="disabled"<% } %> />\n</div>\n\n<div class="search_facet_remove VS-icon VS-icon-cancel"><i class="fa fa-times-circle"></i></div>');
-window.JST['search_input'] = _.template('<input type="text" class="ui-menu" <% if (readOnly) { %>disabled="disabled"<% } %> />');
+  window.JST['search_box'] = function ({readOnly}) {
+    return `
+      <div class="VS-search${readOnly ? ' VS-readonly' : ''}">
+        <div class="VS-search-box-wrapper VS-search-box">
+          <div class="VS-icon VS-icon-search">
+            <i class="fa fa-search"></i>
+          </div>
+          <div class="VS-placeholder"></div>
+          <div class="VS-search-inner"></div>
+          <div class="VS-icon VS-icon-cancel VS-cancel-search-box" title="clear search">
+            <i class="fa fa-times-circle"></i>
+          </div>
+        </div>
+      </div>
+      `;
+  };
+  window.JST['search_facet'] = function ({model, readOnly}) {
+    return `
+      ${model.has('category') ? `<div class="category">${model.get('category')}: </div>` : ''}
+      <div class="search_facet_input_container">
+        <input type="text" class="search_facet_input ui-menu VS-interface" value="" ${readOnly ? 'disabled="disabled"' : ''} />
+      </div>
+      <div class="search_facet_remove VS-icon VS-icon-cancel">
+        <i class="fa fa-times-circle"></i>
+      </div>
+    `;
+  };
+  window.JST['search_input'] = function ({readOnly}) {
+    return `<input type="text" class="ui-menu" ${readOnly ? 'disabled="disabled"' : ''} />`;
+  };
 })();