Alfresco Share addon - Document preview while editing tasks

previewpackageitems.ftl

<#include "/org/alfresco/components/form/controls/workflow/packageitems.ftl" />
<#assign el>${controlId}-wp</#assign>
<#assign dependencyGroup="web-preview">
<#include "/org/alfresco/components/preview/include/web-preview-css-dependencies.lib.ftl" />
<#include "/org/alfresco/components/preview/include/web-preview-js-dependencies.lib.ftl" />

<#-- *************************************************
// Author: howkymike
// Instructions: 
//  1) Put this file somewhere inside Share's "site-webscripts" folder (i.e. my-project-share/src/main/resources/alfresco/web-extension/site-webscripts/com/mydomain/previewpackageitems.ftl)
//  2) In the share workflow config (in the task configuration) set this template to "packageItems" field. Remember to check if template's path is correct 
//    i.e.:
//     		<field id="packageItems" set="items">
//			<control template="/com/mydomain/previewpackageitems.ftl" >
//				<control-param name="startLocation">/app:company_home/st:sites</control-param>
//  			</control>
//		</field>
// 3) Notes: Does not support IE.
// ************************************************* -->

<div class="yui-g" id="${el}"></div>
<script type="text/javascript">//<![CDATA[

function createPreviewDiv(number) {
	let myPreviewAction = document.createElement("DIV");
	myPreviewAction.class = "list-action";
	let myPreviewActionHref = document.createElement("a");
	myPreviewActionHref.title = "Preview";
	myPreviewActionHref.setAttribute("tabindex", "0");
	myPreviewActionHref.setAttribute("class", "view_more_actions");
	myPreviewActionHref.setAttribute("myItemNumber", number);
	myPreviewActionHref.innerText = "Preview";
	myPreviewActionHref.onclick = togglePreview;
	myPreviewAction.appendChild(myPreviewActionHref);
	return myPreviewAction;
}

var nodeRefs = ("${field.value?html}" || "").split(',');
var togglePreview = function(){
    let num = this.getAttribute("myItemNumber");

    // delete old preview if exists
    if (document.contains(document.getElementById("mypreviewdiv"))) {
            document.getElementById("mypreviewdiv").remove();
	}

	// create preview div
	var data_form_task_details = document.getElementsByClassName("share-form")[0].children[1];
	try {
		var myheight = data_form_task_details.children[0].children[1].children[1].children[0].offsetHeight;
		var myoffsetTop = data_form_task_details.children[0].children[1].children[1].offsetTop;
	} catch (e) {
		var myheight = data_form_task_details.children[0].children[1].offsetHeight;
		var myoffsetTop = data_form_task_details.children[0].children[1].offsetTop;
	}
	
	
	var mydiv = document.createElement("DIV");
	mydiv.id="mypreviewdiv";
	mydiv.style='width:800px;height:' + myheight + 'px;position:absolute;bottom:0px;right:0px;left: 900px;top:' + myoffsetTop + 'px;cursor: pointer;';
	data_form_task_details.appendChild(mydiv);

	// populate preview div
	Alfresco.util.loadWebscript({
    	url: Alfresco.constants.URL_SERVICECONTEXT + "components/preview/web-preview",
        properties: { nodeRef: nodeRefs[num], htmlid: "${el}-preview-" + num},
        target: "mypreviewdiv"
    }); 


    var data_form_task_details = document.getElementsByClassName("share-form")[0].children[1];
}


const myPackageItemsSleep700 = (milliseconds) => {
	  return new Promise(resolve => setTimeout(resolve, milliseconds))
	}
const myPackageItemsWaitAsync = async () => {
<#-- TODO: await loop -->
	  await myPackageItemsSleep700(700)
		var myItemTable = document.getElementById('${controlId}').getElementsByTagName("tbody")[1]   // $('#${controlId} tbody')[1];	
		for (var i = 0, row; row = myItemTable.rows[i]; i++) {
			let listAction = row.children[2].children[0];
			listAction.appendChild(createPreviewDiv(i));
		}
	}
myPackageItemsWaitAsync();


//]]></script>