IDEMPIERE 4528 Implement namespace and versioning for JS library (#405)

* IDEMPIERE-4528 Update Js Library

Update html2canvas to 1.0.0.rc7

* IDEMPIERE-4528 Update Js Library

Use namespace/package and versioning for all js codes.

org.adempiere.ui.zk/WEB-INF/src/metainfo/zk/lang-addon.xml

@@ -44,18 +44,11 @@ Copyright (C) 2007 Ashley G Ramdass (ADempiere WebUI).
 		</mold>
 	</component>
 
-	<javascript src="/js/calc.js" charset="UTF-8"/>
+	<javascript-module name="org.idempiere.websocket" version="202011211500"/>	
-	<javascript src="/js/layout.js" charset="UTF-8"/>
-	<javascript src="/js/report.js" charset="UTF-8"/>	
-	<javascript src="/js/window.js" charset="UTF-8"/>
-	<javascript src="/js/html2canvas.js" charset="UTF-8"/>
-	<javascript src="/js/jquery.maskedinput.js" charset="UTF-8"/>
-	<javascript src="/js/photobooth_min.js" charset="UTF-8"/>
-
-	<javascript package="jawwa.atmosphere" merge="false" />
-	<javascript package="org.idempiere.websocket" merge="false" />
-	<javascript package="adempiere.local.storage" merge="false" />
-	
 	<javascript-module name="jawwa.atmosphere" version="202011170510"/>
 	<javascript-module name="adempiere.local.storage" version="202011151100"/>
+	<javascript-moudle name="html2canvas" version="1.0.0.rc7"/>
+	<javascript-module name="org.idempiere.commons" version="202011230530"/>
+	<javascript-module name="jquery.maskedinput" version="1.4.1" />
+	<javascript-module name="photobooth"	version="0.7-rsd3" />
 </language>

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/LayoutUtils.java

@@ -32,7 +32,6 @@ import org.zkoss.zk.ui.event.EventListener;
 import org.zkoss.zk.ui.event.Events;
 import org.zkoss.zk.ui.event.OpenEvent;
 import org.zkoss.zk.ui.util.Clients;
-import org.zkoss.zul.Borderlayout;
 import org.zkoss.zul.Cell;
 import org.zkoss.zul.Div;
 import org.zkoss.zul.Grid;
@@ -53,19 +52,6 @@ public final class LayoutUtils {
 
 	public static final String ON_REDRAW_EVENT = "onRedraw";
 	
-	/**
-	 * @param layout
-	 */
-	public static void sendDeferLayoutEvent(Borderlayout layout, int timeout) {
-		StringBuilder content = new StringBuilder();		
-		content.append("ad_deferRenderBorderLayout('")
-			   .append(layout.getUuid())
-			   .append("',").append(timeout).append(");");
-		
-		AuScript as = new AuScript(null, content.toString());
-		Clients.response("deferRenderBorderLayout", as);		
-	}
-	
 	/**
 	 * 
 	 * @param cls
@@ -134,7 +120,7 @@ public final class LayoutUtils {
 		if (delayMs > 0) {
 			script.append("setTimeout(function() { ");
 		}
-		script.append("_idempiere_popup_window('#")
+		script.append("idempiere.show_popup_window('#")
 			.append(ref.getUuid())
 			.append("','#")
 			.append(window.getUuid())
@@ -160,7 +146,7 @@ public final class LayoutUtils {
 		if (window.getPage() == null)
 			window.setPage(ref.getPage());
 		StringBuilder script = new StringBuilder();
-		script.append("_idempiere_popup_window('#")
+		script.append("idempiere.show_popup_window('#")
 			.append(ref.getUuid())
 			.append("','#")
 			.append(window.getUuid())
@@ -179,7 +165,7 @@ public final class LayoutUtils {
 	 */
 	public static void positionWindow(Component ref, Window window, String position) {
 		StringBuilder script = new StringBuilder();
-		script.append("_idempiere_popup_window('#")
+		script.append("idempiere.show_popup_window('#")
 			.append(ref.getUuid())
 			.append("','#")
 			.append(window.getUuid())
@@ -197,7 +183,7 @@ public final class LayoutUtils {
 	 */
 	public static void openEmbeddedWindow(Component ref, Window window, String position) {
 		StringBuilder script = new StringBuilder();
-		script.append("_idempiere_popup_window('#")
+		script.append("idempiere.show_popup_window('#")
 			.append(ref.getUuid())
 			.append("','#")
 			.append(window.getUuid())

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/adwindow/GridView.java

@@ -1006,7 +1006,7 @@ public class GridView extends Vlayout implements EventListener<Event>, IdSpace,
 				}
 			}
 			if (cmp != null)
-				Clients.response(new AuScript(null, "scrollToRow('" + cmp.getUuid() + "');"));
+				Clients.response(new AuScript(null, "idempiere.scrollToRow('" + cmp.getUuid() + "');"));
 
 			if (columnOnClick != null && columnOnClick.trim().length() > 0) {
 				List<?> list = row.getChildren();
@@ -1015,7 +1015,7 @@ public class GridView extends Vlayout implements EventListener<Event>, IdSpace,
 						Div div = (Div) element;
 						if (columnOnClick.equals(div.getAttribute("columnName"))) {
 							cmp = div.getFirstChild();
-							Clients.response(new AuScript(null, "scrollToRow('" + cmp.getUuid() + "');"));
+							Clients.response(new AuScript(null, "idempiere.scrollToRow('" + cmp.getUuid() + "');"));
 							break;
 						}
 					}

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/apps/form/WSetupWizard.java

@@ -23,7 +23,6 @@ import java.util.List;
 import java.util.logging.Level;
 
 import org.adempiere.model.MWizardProcess;
-import org.adempiere.webui.LayoutUtils;
 import org.adempiere.webui.apps.AEnv;
 import org.adempiere.webui.component.Button;
 import org.adempiere.webui.component.Checkbox;
@@ -134,7 +133,6 @@ public class WSetupWizard extends SetupWizard implements IFormController, EventL
 		{
 			preInit();
 			jbInit ();
-			LayoutUtils.sendDeferLayoutEvent(mainLayout, 100);
 		}
 		catch (Exception ex)
 		{

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/apps/form/WTabEditor.java

@@ -168,7 +168,6 @@ public class WTabEditor extends TabEditor implements IFormController, EventListe
 			initMFields(tabform.getWindowNo(), Record_ID);
 			dynList();
 			jbInit();
-			LayoutUtils.sendDeferLayoutEvent(mainLayout, 100);
 		}
 		catch (Exception ex)
 		{

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/apps/form/WTreeMaintenance.java

@@ -21,7 +21,6 @@ import java.util.logging.Level;
 
 import org.adempiere.util.Callback;
 import org.adempiere.webui.ClientInfo;
-import org.adempiere.webui.LayoutUtils;
 import org.adempiere.webui.component.Checkbox;
 import org.adempiere.webui.component.Label;
 import org.adempiere.webui.component.Listbox;
@@ -98,7 +97,6 @@ public class WTreeMaintenance extends TreeMaintenance implements IFormController
 			preInit();
 			jbInit ();
 			action_loadTree();
-			LayoutUtils.sendDeferLayoutEvent(mainLayout, 100);
 		}
 		catch (Exception ex)
 		{
@@ -243,7 +241,6 @@ public class WTreeMaintenance extends TreeMaintenance implements IFormController
 		if (e.getTarget() == treeField)
 		{
 			action_loadTree();
-			LayoutUtils.sendDeferLayoutEvent(mainLayout, 100);
 		}
 		else if (e.getTarget() == bAddAll)
 			action_treeAddAll();

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/factory/DefaultFeedbackService.java

@@ -72,11 +72,11 @@ public class DefaultFeedbackService implements IFeedbackService {
 			this.errorOnly = errorOnly;
 			SessionManager.getAppDesktop().getComponent().addEventListener("onEmailSupport", this);
 			
-			String script = "html2canvas(document.body, { onrendered: function(canvas) " +
+			String script = "html2canvas(document.body).then(canvas => " +
-					"{ var dataUrl = canvas.toDataURL();" +
+					"{ const dataUrl = canvas.toDataURL();" +
 					"  var widget = zk.Widget.$('#" + SessionManager.getAppDesktop().getComponent().getUuid()+"');"+
 		    		"  var event = new zk.Event(widget, 'onEmailSupport', dataUrl, {toServer: true});" +
-		    		"  zAu.send(event); } " +
+		    		"  zAu.send(event);" +
 		    		"});";
 			Clients.response(new AuScript(script));
 		}
@@ -150,11 +150,11 @@ public class DefaultFeedbackService implements IFeedbackService {
 		protected CreateNewRequestAction() {
 			SessionManager.getAppDesktop().getComponent().addEventListener("onCreateFeedbackRequest", this);
 			
-			String script = "html2canvas(document.body, { onrendered: function(canvas) " +
+			String script = "html2canvas(document.body).then(canvas => " +
 					"{ var dataUrl = canvas.toDataURL();" +
 					"  var widget = zk.Widget.$('#" + SessionManager.getAppDesktop().getComponent().getUuid()+"');"+
 		    		"  var event = new zk.Event(widget, 'onCreateFeedbackRequest', dataUrl, {toServer: true});" +
-		    		"  zAu.send(event); } " +
+		    		"  zAu.send(event); " +
 		    		"});";
 			Clients.response(new AuScript(script));
 		}

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/report/HTMLExtension.java

@@ -55,13 +55,12 @@ public class HTMLExtension implements IHTMLExtension {
 
 		this.classPrefix = classPrefix;
 		this.componentId = componentId;
-		this.scriptURL = contextPath + theme + "js/report.js";
 		this.styleURL = contextPath + theme + "css/report.css";
 	}
 	
 	public void extendIDColumn(int row, ConcreteElement columnElement, a href,
 			PrintDataElement dataElement) {
-		href.addAttribute("onclick", "showColumnMenu(event, '" + dataElement.getColumnName() + "', " + row + ")");		
+		href.addAttribute("onclick", "parent.idempiere.showColumnMenu(document, event, '" + dataElement.getColumnName() + "', " + row + ")");		
 		href.addAttribute ("componentId", componentId);
 		href.addAttribute ("foreignColumnName", dataElement.getForeignColumnName());
 		href.addAttribute ("value", dataElement.getValueAsString());
@@ -71,7 +70,7 @@ public class HTMLExtension implements IHTMLExtension {
 		PrintDataElement pkey = printData.getPKey();
 		if (pkey != null)
 		{
-			row.addAttribute("ondblclick", "parent.drillAcross('" 
+			row.addAttribute("ondblclick", "parent.idempiere.drillAcross('" 
 					+ componentId + "', '" 
 					+ pkey.getColumnName() + "', '" 
 					+ pkey.getValueAsString() + "')");

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/window/WTask.java

@@ -18,7 +18,6 @@ package org.adempiere.webui.window;
 
 import java.util.logging.Level;
 
-import org.adempiere.webui.LayoutUtils;
 import org.adempiere.webui.component.ConfirmPanel;
 import org.adempiere.webui.component.Window;
 import org.adempiere.webui.panel.IHelpContext;
@@ -197,8 +196,6 @@ public class WTask extends Window implements EventListener<Event>, IHelpContext
 		//
 		confirmPanel.addActionListener(this);
 		confirmPanel.getOKButton().setEnabled(false);
-
-		LayoutUtils.sendDeferLayoutEvent(layout, 100);
 	}   //  jbInit
 
 

org.adempiere.ui.zk/WEB-INF/src/web/js/html2canvas/zk.wpd

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<package name="html2canvas" language="xul/html">
+	<script src="html2canvas.js" />
+</package>

org.adempiere.ui.zk/WEB-INF/src/web/js/jquery/maskedinput/zk.wpd

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<package name="jquery.maskedinput" language="xul/html">
+	<script src="jquery.maskedinput.js" />
+</package>

org.adempiere.ui.zk/WEB-INF/src/web/js/org/idempiere/commons/calc.js

@@ -119,4 +119,4 @@ function Calc()
 	}
 }
 
-var calc = new Calc();
+window.calc = new Calc();

org.adempiere.ui.zk/WEB-INF/src/web/js/org/idempiere/commons/layout.js

@@ -0,0 +1,15 @@
+if (typeof window.idempiere === 'undefined')
+	window.idempiere = {};
+	
+window.idempiere.scrollToRow = function(uuid){
+	try {
+		var cmp = zk.Widget.$(uuid);  	 
+		if (cmp) {
+			cmp.scrollIntoView();
+		 	cmp.focus();
+		}
+	} catch (err) {
+		if (console) console.log(err);
+	}
+};
+

org.adempiere.ui.zk/WEB-INF/src/web/js/org/idempiere/commons/report.js

@@ -1,33 +1,36 @@
-function zoom(cmpid, column, value){
+if (typeof window.idempiere === 'undefined')
+	window.idempiere = {};
+	
+window.idempiere.zoom = function(cmpid, column, value){
 	zAu.cmd0.showBusy(null);
 	var widget = zk.Widget.$(cmpid);
 	var event = new zk.Event(widget, 'onZoom', {data: [column, value]}, {toServer: true});
 	zAu.send(event);
-}
+};
 
-function zoomWindow(cmpid, column, value, windowuu){
+window.idempiere.zoomWindow = function(cmpid, column, value, windowuu){
 	zAu.cmd0.showBusy(null);
 	var widget = zk.Widget.$(cmpid);
 	var event = new zk.Event(widget, 'onZoom', {data: [column, value, 'AD_Window_UU', windowuu]}, {toServer: true});
 	zAu.send(event);
-}
+};
 
-function drillAcross(cmpid, column, value){
+window.idempiere.drillAcross = function(cmpid, column, value){
 	zAu.cmd0.showBusy(null);
 	var widget = zk.Widget.$(cmpid);
 	var event = new zk.Event(widget, 'onDrillAcross', {data: [column, value]}, {toServer: true});
 	zAu.send(event);
-}
+};
 
-function drillDown(cmpid, column, value){
+window.idempiere.drillDown = function(cmpid, column, value){
 	zAu.cmd0.showBusy(null);
 	var widget = zk.Widget.$(cmpid);
 	var event = new zk.Event(widget, 'onDrillDown', {data: [column, value]}, {toServer: true});
 	zAu.send(event);
-}
+};
 
-function showColumnMenu(e, columnName, row) {
+window.idempiere.showColumnMenu = function(doc, e, columnName, row) {
-	var d = getMenu (e.target.getAttribute ("componentId"), e.target.getAttribute ("foreignColumnName"), e.target.getAttribute ("value"));
+	var d = idempiere.getMenu (doc, e.target.getAttribute ("componentId"), e.target.getAttribute ("foreignColumnName"), e.target.getAttribute ("value"));
 	
 	var posx = 0;
 	var posy = 0;
@@ -37,26 +40,27 @@ function showColumnMenu(e, columnName, row) {
 		posy = e.pageY;
 	}
 	else if (e.clientX || e.clientY) 	{
-		posx = e.clientX + document.body.scrollLeft
+		posx = e.clientX + doc.body.scrollLeft
-			+ document.documentElement.scrollLeft;
+			+ doc.documentElement.scrollLeft;
-		posy = e.clientY + document.body.scrollTop
+		posy = e.clientY + doc.body.scrollTop
-			+ document.documentElement.scrollTop;
+			+ doc.documentElement.scrollTop;
 	}
 	
 	d.style.top = posy;	
 	d.style.left = posx;
 	d.style.display = "block";
 	
-	setTimeout("getMenu().style.display='none'", 3000);
+	var f = function() {
-}
+		doc.contextMenu.style.display='none'
+	};
+	setTimeout(f, 3000);
+};
 
-var contextMenu;
+window.idempiere.getMenu = function(doc, componentId, foreignColumnName, value){
-
+	doc.contextMenu = null;
-function getMenu (componentId, foreignColumnName, value){
 	if (componentId != null){	
-	
 		//menu div
-		var menu = document.createElement("div");
+		var menu = doc.createElement("div");
 		menu.style.position = "absolute";
 		menu.style.display = "none";
 		menu.style.top = "0";
@@ -66,57 +70,53 @@ function getMenu (componentId, foreignColumnName, value){
 		menu.style.backgroundColor = "white";
 		
 		//window menu item
-		var windowMenu = document.createElement("div");
+		var windowMenu = doc.createElement("div");
 		windowMenu.style.padding = "3px";
 		windowMenu.style.verticalAlign = "middle";
 		windowMenu.setAttribute("onmouseover", "this.style.backgroundColor = 'lightgray'");
 		windowMenu.setAttribute("onmouseout", "this.style.backgroundColor = 'white'");									
 		
-		var href = document.createElement("a");
+		var href = doc.createElement("a");
 		href.style.fontSize = "11px";
 		href.style.textDecoration = "none";
 		href.style.verticalAlign = "middle";
 		href.href = "javascript:void(0)";
-		href.setAttribute("onclick", "parent.zoom('" + componentId + "','" + foreignColumnName + "','" + value + "')");
+		href.setAttribute("onclick", "parent.idempiere.zoom('" + componentId + "','" + foreignColumnName + "','" + value + "')");
 		
 		windowMenu.appendChild(href);
 		menu.appendChild(windowMenu);				
 		
-		var image = document.createElement("img"); 
+		var image = doc.createElement("img"); 
-		image.src = window.document.body.getAttribute ("windowIco"); 	
+		image.src = doc.body.getAttribute ("windowIco"); 	
 		image.setAttribute("align", "middle");
 		href.appendChild(image);
-		href.appendChild(document.createTextNode(window.document.body.getAttribute ("windowLabel")));
+		href.appendChild(doc.createTextNode(doc.body.getAttribute ("windowLabel")));
 		
 		//report menu item
-		var report = document.createElement("div");			
+		var report = doc.createElement("div");			
 		report.style.padding = "3px";
 		report.style.verticalAlign = "middle";
 		
 		report.setAttribute("onmouseover", "this.style.backgroundColor = 'lightgray'");
 		report.setAttribute("onmouseout", "this.style.backgroundColor = 'white'");									
 		
-		var reportHref = document.createElement("a");
+		var reportHref = doc.createElement("a");
 		reportHref.href = "javascript:void(0)";	
 		reportHref.style.textDecoration = "none";
 		reportHref.style.fontSize = "11px";
 		reportHref.style.verticalAlign = "middle";
-		reportHref.setAttribute("onclick", "parent.drillDown('" + componentId + "','" + foreignColumnName + "','" + value + "')");
+		reportHref.setAttribute("onclick", "parent.idempiere.drillDown('" + componentId + "','" + foreignColumnName + "','" + value + "')");
 		
 		report.appendChild(reportHref);
 		menu.appendChild(report);
-		var reportimage = document.createElement("img"); 
+		var reportimage = doc.createElement("img"); 
-		reportimage.src = window.document.body.getAttribute ("reportIco");
+		reportimage.src = doc.body.getAttribute ("reportIco");
 		reportimage.setAttribute("align", "middle");
 		reportHref.appendChild(reportimage);
-		reportHref.appendChild(document.createTextNode(window.document.body.getAttribute ("reportLabel")));
+		reportHref.appendChild(doc.createTextNode(doc.body.getAttribute ("reportLabel")));
 		
-		contextMenu = menu;
+		doc.contextMenu = menu;
-		window.document.body.appendChild (contextMenu);
+		doc.body.appendChild (doc.contextMenu);
 	}	
-	
+	return doc.contextMenu;
-	contextMenu.setAttribute ("componentId", componentId);
+};
-	contextMenu.setAttribute ("foreignColumnName", foreignColumnName);
-	contextMenu.setAttribute ("value", value);
-	return contextMenu;
-}

org.adempiere.ui.zk/WEB-INF/src/web/js/org/idempiere/commons/window.js

@@ -1,8 +1,11 @@
-function _idempiere_popup_window(refid, windowid, position) {
+if (typeof window.idempiere === 'undefined')
+	window.idempiere = {};
+	
+window.idempiere.show_popup_window = function(refid, windowid, position) {
 	var ref = zk.Widget.$(refid);
 	var window = zk(windowid);
 	window.position(ref.$n(), position);
-}
+};
 
 zk.override(zk.Widget.prototype, "canActivate",
 	function () {

org.adempiere.ui.zk/WEB-INF/src/web/js/org/idempiere/commons/zk.wpd

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<package name="org.idempiere.commons" language="xul/html">
+	<script src="calc.js" />
+	<script src="layout.js" />
+	<script src="report.js" />
+	<script src="window.js" />
+</package>

org.adempiere.ui.zk/WEB-INF/src/web/js/photobooth/zk.wpd

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<package name="photobooth" language="xul/html">
+	<script src="photobooth_min.js" />
+</package>

org.adempiere.ui.zk/index.zul

@@ -15,7 +15,13 @@ Copyright (C) 2007 Ashley G Ramdass.
 <?link rel="manifest" href="manifest.json"?>
 <zk>
 	<script><![CDATA[
+		zk.load("jawwa.atmosphere");
+		zk.load("org.idempiere.websocket");
 		zk.load("adempiere.local.storage");	
+		zk.load("html2canvas");
+		zk.load("org.idempiere.commons");
+		zk.load("jquery.maskedinput");
+		zk.load("photobooth");
 		
 		zk.afterLoad(function() {
 			zk._Erbx.push = function(msg) {

org.adempiere.ui.zk/js/layout.js

@@ -1,41 +0,0 @@
-function ad_deferRenderBorderLayout(uuid, timeout) {
-	try {
-		var meta = zk.Widget.$(uuid);
-		if (meta) {
-			setTimeout("_ad_deferBDL('"+uuid+"')", timeout);				
-		}
-	} catch (err) {
-		 if (console) console.log(err);
-	}
-}		
-
-function _ad_deferBDL(uuid) {
-	try {
-		var cmp = zk.Widget.$(uuid);
-		if (cmp) { cmp.resize(); }	
-	} catch (err) {
-		 if (console) console.log(err);
-	}
-}
-
-function _ad_closeBuble(link) {
-	try {
-		var parent = link.parentsUntil("simileAjax-bubble-contentContainer");
-		var btn = parent.next();
-		btn.click();
-	} catch (err) {
-		 if (console) console.log(err);
-	}
-}
-
-function scrollToRow(uuid){
-	try {
-		var cmp = zk.Widget.$(uuid);  	 
-		if (cmp) {
-			cmp.scrollIntoView();
-		 	cmp.focus();
-		}
-	} catch (err) {
-		if (console) console.log(err);
-	}
-}