Goal
Add a new tab Page Tree to the Side Panel of authoring /editor.html
Demo | Package Install | Github
Solution
1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/eaem-touchui-sidepanel-pagetree
2) Create node /apps/eaem-touchui-sidepanel-pagetree/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.authoring.dialog.all
3) Create file (nt:file) /apps/eaem-touchui-sidepanel-pagetree/clientlib/js.txt and add
page-tree.js
4) Create file (nt:file) /apps/eaem-touchui-sidepanel-pagetree/clientlib/pagetree.js and add the following code
(function ($, $document) {
var PAGE_BROWSER = "/apps/eaem-touchui-sidepanel-pagetree/page-browser/content/tree-wrapper.html",
pageTreeAdded = false;
$document.on('cq-layer-activated', addPageTree);
function addPageTree(event){
if(pageTreeAdded || (event.layer !== "Edit")){
return;
}
var sidePanel = Granite.author.ui.SidePanel,
tabList = sidePanel._tabView.tabList;
tabList.items.add({
title: "Page Tree",
label: {
innerHTML: '<coral-icon icon="pages" size="S"/>'
}
});
var panelstack = sidePanel._tabView.panelStack;
panelstack.items.add({
content: {
innerHTML: getPageContent()
}
});
pageTreeAdded = true;
}
function getPageContent(){
return "<div class='sidepanel-tab'>" +
"<span class='sidepanel-tab-title'>Page Tree</span>" +
"<iframe src='" + PAGE_BROWSER + "' style='border:none' height='800px'></iframe>" +
"</div>";
}
})(jQuery, jQuery(document));
5) For the tree html page, create nt:folder /apps/eaem-touchui-sidepanel-pagetree/page-browser/wrapper
6) Create nt:file /apps/eaem-touchui-sidepanel-pagetree/page-browser/wrapper/html.jsp, add the following code
<%@page session="false" %>
<%@include file="/libs/foundation/global.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Page Tree</title>
<style type="text/css">
#CQ .x-tab-panel-body, #CQ .x-panel-body {
background-color: transparent !important;
}
</style>
<cq:includeClientLib categories="cq.compat.authoring.widgets"/>
<script type="text/javascript">
CQ.I18n.init({ "locale": "<%= request.getLocale() %>" });
CQ.Ext.onReady(function () {
var pageTree = CQ.wcm.ContentFinderTab.getBrowseTree({
"treeRoot":{
"text": CQ.I18n.getMessage("Content")
}
});
pageTree.on('beforedblclick', function(node){
window.open("/editor.html" + node.getPath() + ".html", '_blank');
});
var config = {
items: [ pageTree ],
xtype: "dialogwrapper"
};
var dialog = CQ.Util.build(config, null, null, false, null);
dialog.setWidth(300);
dialog.setHeight(700);
});
</script>
</head>
<body style="margin:10px 0 0 15px; overflow: hidden">
<div id="CQ"></div>
</body>
</html>
7) Create sling:OrderedFolder /apps/eaem-touchui-sidepanel-pagetree/page-browser/content and nt:unstructured node /apps/eaem-touchui-sidepanel-pagetree/page-browser/content/tree-wrapper with property sling:resourceType=/apps/eaem-touchui-sidepanel-pagetree/page-browser/wrapper for page html content