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 <[email protected]>
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
