[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 c4b5407  Improved: Move page-specific script links to html template   (OFBIZ-11799)
c4b5407 is described below

commit c4b5407eb231ff0a2dfe7c2e1e17033570ef7bf6
Author: James Yong <[hidden email]>
AuthorDate: Sat Aug 15 11:57:58 2020 +0800

    Improved: Move page-specific script links to html template   (OFBIZ-11799)
   
    Created new importLibrary js function to load OpenLayer js and css
    Tested on
    https://localhost:8443/example/control/ExampleGeoLocationPointSet4
    https://localhost:8443/example/control/ExampleOsmGeoLocationPointSet4
---
 .../common-theme/template/includes/GeoLocation.ftl | 106 ++++++++++-----------
 .../webapp/common/js/util/OfbizUtil.js             |  37 +++++++
 2 files changed, 89 insertions(+), 54 deletions(-)

diff --git a/themes/common-theme/template/includes/GeoLocation.ftl b/themes/common-theme/template/includes/GeoLocation.ftl
index 7803787..c85f722 100644
--- a/themes/common-theme/template/includes/GeoLocation.ftl
+++ b/themes/common-theme/template/includes/GeoLocation.ftl
@@ -16,11 +16,6 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<#-- Define OpenLayers js and css tags to be added to html head tag when multi-block=true. -->
-<script data-import="head" type="application/javascript"
-        src="/common/js/plugins/OpenLayers-5.3.0.js"></script>
-<link rel="stylesheet" type="text/css"
-      href="/common/js/plugins/OpenLayers-5.3.0.css"/>
 <#if geoChart?has_content>
 <#-- ================================= Golbal Init ======================================-->
   <#if geoChart.id?has_content>
@@ -120,62 +115,65 @@ under the License.
     <#elseif "GEOPT_OSM" == geoChart.dataSourceId>
     <div id="${id}" class="map" style="border:1px solid #979797; background-color:#e5e3df; width:${geoChart.width}; height:${geoChart.height}; margin:2em auto;"></div>
     <script type="application/javascript">
-        var iconFeatures=[];
+        importLibrary(["/common/js/plugins/OpenLayers-5.3.0.js", "/common/js/plugins/OpenLayers-5.3.0.css"],
+        function() {
+            var iconFeatures=[];
 
-        <#if geoChart.points?has_content>
-            <#list geoChart.points as point>
-            iconFeatures.push(
-                    new ol.Feature({
-                        geometry: new ol.geom.Point(ol.proj.transform([${point.lon},${point.lat}],
-                                'EPSG:4326', 'EPSG:900913'))
-                    })
-            );
-            </#list>
-        </#if>
+            <#if geoChart.points?has_content>
+                <#list geoChart.points as point>
+                iconFeatures.push(
+                        new ol.Feature({
+                            geometry: new ol.geom.Point(ol.proj.transform([${point.lon},${point.lat}],
+                                    'EPSG:4326', 'EPSG:900913'))
+                        })
+                );
+                </#list>
+            </#if>
 
-        var vectorSource = new ol.source.Vector({
-            features: iconFeatures
-        });
+            var vectorSource = new ol.source.Vector({
+                features: iconFeatures
+            });
 
-        var iconStyle = new ol.style.Style({
-            image: new ol.style.Icon(({
-                anchor: [0.5, 25],
-                anchorXUnits: 'fraction',
-                anchorYUnits: 'pixels',
-                opacity: 0.75,
-                src: '<@ofbizContentUrl>/images/img/marker.png</@ofbizContentUrl>'
-            }))
-        });
+            var iconStyle = new ol.style.Style({
+                image: new ol.style.Icon(({
+                    anchor: [0.5, 25],
+                    anchorXUnits: 'fraction',
+                    anchorYUnits: 'pixels',
+                    opacity: 0.75,
+                    src: '<@ofbizContentUrl>/images/img/marker.png</@ofbizContentUrl>'
+                }))
+            });
 
-        var vectorLayer = new ol.layer.Vector({
-            source: vectorSource,
-            style: iconStyle
-        });
+            var vectorLayer = new ol.layer.Vector({
+                source: vectorSource,
+                style: iconStyle
+            });
 
-        var map = new ol.Map({
-            target: '${id}',
-            layers: [
-                new ol.layer.Tile({
-                    source: new ol.source.OSM()
+            var map = new ol.Map({
+                target: '${id}',
+                layers: [
+                    new ol.layer.Tile({
+                        source: new ol.source.OSM()
+                    }),
+                    vectorLayer
+                ],
+                view: new ol.View({
+                    center: ol.proj.fromLonLat([${center.lon}, ${center.lat}]),
+                    zoom: ${zoom}
                 }),
-                vectorLayer
-            ],
-            view: new ol.View({
-                center: ol.proj.fromLonLat([${center.lon}, ${center.lat}]),
-                zoom: ${zoom}
-            }),
-            controls: [
-                new ol.control.Zoom(),
-                new ol.control.ZoomSlider(),
-                new ol.control.ZoomToExtent(),
-                new ol.control.OverviewMap(),
-                new ol.control.ScaleLine(),
-                new ol.control.FullScreen()
-            ]
-        });
+                controls: [
+                    new ol.control.Zoom(),
+                    new ol.control.ZoomSlider(),
+                    new ol.control.ZoomToExtent(),
+                    new ol.control.OverviewMap(),
+                    new ol.control.ScaleLine(),
+                    new ol.control.FullScreen()
+                ]
+            });
 
-        // fit to show all markers (optional)
-        map.getView().fit(vectorSource.getExtent(), map.getSize());
+            // fit to show all markers (optional)
+            map.getView().fit(vectorSource.getExtent(), map.getSize());
+        });
     </script>
 
     </#if>
diff --git a/themes/common-theme/webapp/common/js/util/OfbizUtil.js b/themes/common-theme/webapp/common/js/util/OfbizUtil.js
index 7636760..cedceb6 100644
--- a/themes/common-theme/webapp/common/js/util/OfbizUtil.js
+++ b/themes/common-theme/webapp/common/js/util/OfbizUtil.js
@@ -1418,3 +1418,40 @@ function sendJWT(targetUrl) {
         });
     }
 }
+
+var importLibrary = function() {
+    var importLibraryFiles = new Map();
+    return function (urls, onSuccessFn, onErrorFn) {
+        function cachedScript(url, options) {
+            // Allow user to set any option except for dataType, cache, and url
+            options = $.extend(options || {}, {
+                dataType: "script",
+                cache: true,
+                url: url
+            });
+
+            // Use $.ajax() since it is more flexible than $.getScript
+            // Return the jqXHR object so we can chain callbacks
+            return jQuery.ajax(options);
+        };
+
+        jQuery.when.apply(jQuery,
+            jQuery.map(urls, function (url) {
+                if (!importLibraryFiles.has(url)) {
+                    var deferObj = (url.endsWith(".css") ?
+                        jQuery.get(url, function (css) {
+                                jQuery("<style>" + css + "</style>").appendTo("head");
+                            }
+                        ) :
+                        cachedScript(url));
+                    importLibraryFiles.set(url, deferObj);
+                    return deferObj;
+                } else {
+                    return importLibraryFiles.get(url);
+                }
+            })
+        ).then(onSuccessFn).catch(onErrorFn || function () {
+            alert('Error loading one of the files: \n' + urls.join('\n'))
+        });
+    }
+}();
\ No newline at end of file