[ofbiz-framework] branch trunk updated: Improved: Move page-specific script links to html template (OFBIZ-11799)

[James Yong-2]

This is an automated email from the ASF dual-hosted git repository.

jamesyong pushed a commit to branch trunk
in repository https://gitbox.apache.org/repos/asf/ofbiz-framework.git


The following commit(s) were added to refs/heads/trunk by this push:
     new dd5c7b7  Improved: Move page-specific script links to html template   (OFBIZ-11799)
dd5c7b7 is described below

commit dd5c7b715a5210e3e0e7b7b8f676b2fc9cb54938
Author: James Yong <[hidden email]>
AuthorDate: Sat Aug 15 20:25:34 2020 +0800

    Improved: Move page-specific script links to html template   (OFBIZ-11799)
   
    Use importLibrary js function to load select2 js and css
    Tested on
    https://localhost:8443/example/control/FormWidgetExamples

    https://localhost:8443/ordermgr/control/FindRequest
---
 .../template/includes/SetMultipleSelectJs.ftl      | 60 +++++++++++-----------
 .../template/includes/SetMultipleSelectJsList.ftl  | 55 ++++++++++----------
 2 files changed, 57 insertions(+), 58 deletions(-)

diff --git a/themes/common-theme/template/includes/SetMultipleSelectJs.ftl b/themes/common-theme/template/includes/SetMultipleSelectJs.ftl
index 4f9f122..ebded16 100644
--- a/themes/common-theme/template/includes/SetMultipleSelectJs.ftl
+++ b/themes/common-theme/template/includes/SetMultipleSelectJs.ftl
@@ -16,42 +16,42 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<#-- Define select2 js and css tags to be added to html head tag when multi-block=true.
-     Note select2 language js will be auto added by MultiBlockHtmlTemplateUtil#addLinksToLayoutSettings -->
-<script data-import="head" type="application/javascript"
-        src="/common/js/jquery/plugins/select2/js/select2-4.0.6.js"></script>
-<link rel="stylesheet" type="text/css"
-      href="/common/js/jquery/plugins/select2/css/select2-4.0.6.css"/>
 <#if asm_multipleSelect??> <#-- we check only this var and suppose the others are also present -->
 <script type="application/javascript">
-    jQuery(document).ready(function () {
-        multiple = jQuery("#${asm_multipleSelect!}");
+jQuery(document).ready(function () {
+    importLibrary(["/common/js/jquery/plugins/select2/js/select2-4.0.6.js",
+            "/common/js/jquery/plugins/select2/css/select2-4.0.6.css",
+            "<@jsLangFilesMap>select2</@jsLangFilesMap>"],
+        function(){
 
-      <#if asm_title??>
-          // set the dropdown "title" if??
-          multiple.attr('title', '${asm_title}');
-      </#if>
+            multiple = jQuery("#${asm_multipleSelect!}");
 
-        multiple.select2({
-          tags: true,
-          multiple: true,
-          lang: <#if userLogin??>'${userLogin.lastLocale!"en"}'<#else>"en"</#if>,
-          width: "50%"
-        });
+        <#if asm_title??>
+            // set the dropdown "title" if??
+            multiple.attr('title', '${asm_title}');
+        </#if>
 
-      <#if asm_relatedField??> <#-- can be used without related field -->
-          // track possible relatedField changes
-          // on initial focus (focus-field-name must be asm_relatedField) or if the field value changes, select related multi values.
-          typeValue = jQuery('#${asm_typeField}').val();
-          jQuery("#${asm_relatedField}").one('focus', function () {
-              selectMultipleRelatedValues('${asm_requestName}', '${asm_paramKey}', '${asm_relatedField}', '${asm_multipleSelect}', '${asm_type}', typeValue, '${asm_responseName}');
-          });
-          jQuery("#${asm_relatedField}").change(function () {
-              selectMultipleRelatedValues('${asm_requestName}', '${asm_paramKey}', '${asm_relatedField}', '${asm_multipleSelect}', '${asm_type}', typeValue, '${asm_responseName}');
-          });
-          selectMultipleRelatedValues('${asm_requestName}', '${asm_paramKey}', '${asm_relatedField}', '${asm_multipleSelect}', '${asm_type}', typeValue, '${asm_responseName}');
-      </#if>
+            multiple.select2({
+                tags: true,
+                multiple: true,
+                lang: <#if userLogin??>'${userLogin.lastLocale!"en"}'<#else>"en"</#if>,
+                width: "50%"
+            });
+
+        <#if asm_relatedField??> <#-- can be used without related field -->
+            // track possible relatedField changes
+            // on initial focus (focus-field-name must be asm_relatedField) or if the field value changes, select related multi values.
+            typeValue = jQuery('#${asm_typeField}').val();
+            jQuery("#${asm_relatedField}").one('focus', function () {
+                selectMultipleRelatedValues('${asm_requestName}', '${asm_paramKey}', '${asm_relatedField}', '${asm_multipleSelect}', '${asm_type}', typeValue, '${asm_responseName}');
+            });
+            jQuery("#${asm_relatedField}").change(function () {
+                selectMultipleRelatedValues('${asm_requestName}', '${asm_paramKey}', '${asm_relatedField}', '${asm_multipleSelect}', '${asm_type}', typeValue, '${asm_responseName}');
+            });
+            selectMultipleRelatedValues('${asm_requestName}', '${asm_paramKey}', '${asm_relatedField}', '${asm_multipleSelect}', '${asm_type}', typeValue, '${asm_responseName}');
+        </#if>
     });
+});
 </script>
 
 <style type="text/css">
diff --git a/themes/common-theme/template/includes/SetMultipleSelectJsList.ftl b/themes/common-theme/template/includes/SetMultipleSelectJsList.ftl
index b82d708..32c784d 100644
--- a/themes/common-theme/template/includes/SetMultipleSelectJsList.ftl
+++ b/themes/common-theme/template/includes/SetMultipleSelectJsList.ftl
@@ -16,43 +16,42 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<#-- Define select2 js and css tags to be added to html head tag when multi-block=true.
-     Note select2 language js will be auto added by MultiBlockHtmlTemplateUtil#addLinksToLayoutSettings -->
-<script data-import="head" type="application/javascript"
-        src="/common/js/jquery/plugins/select2/js/select2-4.0.6.js"></script>
-<link rel="stylesheet" type="text/css"
-      href="/common/js/jquery/plugins/select2/css/select2-4.0.6.css"/>
 <#if asm_listField??> <#-- we check only this var and suppose the others are also present -->
   <#list asm_listField as row>
     <#if row.asm_multipleSelect??>
       <script type="application/javascript">
           jQuery(document).ready(function () {
-              multiple = jQuery("#${row.asm_multipleSelect!}");
+              importLibrary(["/common/js/jquery/plugins/select2/js/select2-4.0.6.js",
+                      "/common/js/jquery/plugins/select2/css/select2-4.0.6.css",
+                      "<@jsLangFilesMap>select2</@jsLangFilesMap>"],
+                  function() {
+                      multiple = jQuery("#${row.asm_multipleSelect!}");
 
-              <#if row.asm_title??>
-                  // set the dropdown "title" if??
-                  multiple.attr('title', '${row.asm_title}');
-              </#if>
+                      <#if row.asm_title??>
+                      // set the dropdown "title" if??
+                      multiple.attr('title', '${row.asm_title}');
+                      </#if>
 
-              multiple.select2({
-                tags: true,
-                multiple: true,
-                lang: <#if userLogin??>'${userLogin.lastLocale!"en"}'<#else>"en"</#if>,
-                width: "50%"
-              });
+                      multiple.select2({
+                          tags: true,
+                          multiple: true,
+                          lang: <#if userLogin??>'${userLogin.lastLocale!"en"}'<#else>"en"</#if>,
+                          width: "50%"
+                      });
 
-              <#if row.asm_relatedField??> <#-- can be used without related field -->
-                  // track possible relatedField changes
-                  // on initial focus (focus-field-name must be asm_relatedField) or if the field value changes, select related multi values.
-                  typeValue = jQuery('#${row.asm_typeField}').val();
-                  jQuery("#${row.asm_relatedField}").one('focus', function () {
-                      selectMultipleRelatedValues('${row.asm_requestName}', '${row.asm_paramKey}', '${row.asm_relatedField}', '${row.asm_multipleSelect}', '${row.asm_type}', typeValue, '${row.asm_responseName}');
-                  });
-                  jQuery("#${row.asm_relatedField}").change(function () {
+                      <#if row.asm_relatedField??> <#-- can be used without related field -->
+                      // track possible relatedField changes
+                      // on initial focus (focus-field-name must be asm_relatedField) or if the field value changes, select related multi values.
+                      typeValue = jQuery('#${row.asm_typeField}').val();
+                      jQuery("#${row.asm_relatedField}").one('focus', function () {
+                          selectMultipleRelatedValues('${row.asm_requestName}', '${row.asm_paramKey}', '${row.asm_relatedField}', '${row.asm_multipleSelect}', '${row.asm_type}', typeValue, '${row.asm_responseName}');
+                      });
+                      jQuery("#${row.asm_relatedField}").change(function () {
+                          selectMultipleRelatedValues('${row.asm_requestName}', '${row.asm_paramKey}', '${row.asm_relatedField}', '${row.asm_multipleSelect}', '${row.asm_type}', typeValue, '${row.asm_responseName}');
+                      });
                       selectMultipleRelatedValues('${row.asm_requestName}', '${row.asm_paramKey}', '${row.asm_relatedField}', '${row.asm_multipleSelect}', '${row.asm_type}', typeValue, '${row.asm_responseName}');
-                  });
-                  selectMultipleRelatedValues('${row.asm_requestName}', '${row.asm_paramKey}', '${row.asm_relatedField}', '${row.asm_multipleSelect}', '${row.asm_type}', typeValue, '${row.asm_responseName}');
-              </#if>
+                      </#if>
+              });
           });
       </script>
     </#if>