Quantcast
Channel: Experiencing Adobe Experience Manager (AEM, CQ)
Viewing all articles
Browse latest Browse all 526

AEM 6410 - Touch UI Add View in Publish to Editor Page Info Dropdown

$
0
0

Goal


In the authoring env editor.html, add the View in Publish button to Page Information drop down to open the publish page in new tab or copy the url to clipboard

Demo | Package Install | Github



Solution


1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touchui-extend-page-info-view-in-publish

2) Create View in Publish button UI node /apps/eaem-touchui-extend-page-info-view-in-publish/ui/view-in-publish add the following code

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
granite:class="eaem-page-info-view-in-publish"
granite:title="View in Publish"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/button"
text="View in Publish"/>


3) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touchui-extend-page-info-view-in-publish/clientlib and set property categories of String[] type to cq.authoring.dialog.all and dependencies String[] to lodash

4) Create file ( type nt:file ) /apps/eaem-touchui-extend-page-info-view-in-publish/clientlib/js.txt, add the following

  view-in-publish.js

5) Create file (type nt:file) /apps/eaem-touchui-extend-page-info-view-in-publish/clientlib/view-in-publish.js, add the following code

(function ($, $document) {
"use strict";

var EDITOR_LOADED_EVENT = "cq-editor-loaded",
PAGE_INFO_TRIGGER = "#pageinfo-trigger",
VIEW_AS_PUBLISHED_SEL = ".pageinfo-viewaspublished",
EAEM_COPY_ID = "eaem-copy-message",
VIEW_IN_PUBLISH_BUT_URL = "/apps/eaem-touchui-extend-page-info-view-in-publish/ui/view-in-publish.html",
publishServer = null;

$document.on(EDITOR_LOADED_EVENT, addViewInPublish);

function addViewInPublish(){
$(PAGE_INFO_TRIGGER).on('click', addButtonUI);
}

function addButtonUI(){
getPublishServer();

$.ajax(VIEW_IN_PUBLISH_BUT_URL).done(function(html){
$(html).insertAfter($(VIEW_AS_PUBLISHED_SEL)).click(openPublishPage);
});
}

function openPublishPage(){
if(_.isEmpty(publishServer)){
return;
}

var publishPath = publishServer + Granite.author.ContentFrame.currentLocation(),
message = "<div id='" + EAEM_COPY_ID + "'>" + publishPath + "</div>";

showAlert(message, "Open", function(clicked){
if(clicked == "open"){
window.open(publishPath);
return;
}

var range = document.createRange();

range.selectNode(document.getElementById(EAEM_COPY_ID));

window.getSelection().addRange(range);

document.execCommand("copy");
});
}

function getPublishServer(){
$.ajax("/etc/replication/agents.author.2.json").done(successFn);

function successFn(data){
var transportUri = data["publish"]["jcr:content"]["transportUri"];

publishServer = transportUri.substring(0, transportUri.indexOf("/bin/receive"));
}
}

function showAlert(message, title, callback){
var fui = $(window).adaptTo("foundation-ui"),
options = [{
id: "copy",
text: "Copy to Clipboard"
},
{
id: "open",
text: "Open",
primary: true
}];

message = message || "Unknown Error";
title = title || "Error";

fui.prompt(title, message, "info", options, callback);
}
})(jQuery, jQuery(document));

Viewing all articles
Browse latest Browse all 526

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>