Experience with Adobe Experience Manager (AEM, CQ) (2023)

Hill

just show itmetadata formin themUpload DialogVonTouch UI Resource Console; This extension allows users to add metadata when uploading files

Demo|Installation package

Metadata form in upload dialog

metadata validation

Metadata in CRX

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create a folder/apps/eaem-assets-file-upload-with-metadata

2)metadata formIt is shown inUpload Dialogesauthor dialogue; create the dialogue/apps/eaem-assets-file-upload-with-metadata/dialog, add metadata form nodes

Dialog-XML

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http ://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/foundation/container">
<Layout
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
margin="{Boolean}false"/>
<elements jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/foundation/container">
<elements jcr:primaryType="nt:unstructured">
<title
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/foundation/form/textfield"
fieldDescription="Enter title"
fieldLabel="Title"
nombre="./eaemTitle"
required="{Boolean}true"/>
<use of
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/foundation/form/datepicker"
class="Feld"
displayed format="aaaa-mm-dd hh:mm"
fieldLabel="Use up to"
name="./eaemUseBy"
type="datetime"/>
<nurFürWeb
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/foundation/form/checkbox"
nombre="./eaemOnlyForWeb"
text="¿Solo web?"/>
<type
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/foundation/form/select"
fieldDescription="Select size"
field tag="size"
name="./eaemSize">
<elements jcr:primaryType="nt:unstructured">
<def
jcr:primaryType="nt:unstructured"
text="Select size"
valor=""/>
<Klein
jcr:primaryType="nt:unstructured"
text="small"
valor="klein"/>
<medium
jcr:primaryType="nt:unstructured"
text="medium"
value="medium"/>
< grande
jcr:primaryType="nt:unstructured"
text="Large"
value="large"/>
</elements>
</Type>
< Tags
jcr:primaryType="nt:unstructured"
schlinge:resourceType="cq/gui/components/common/tagspicker"
allowCreate="{Boolean}true"
fieldLabel="Labels"
number="./eaemTags"/>
</elements>
</column>
</elements>
</jcr:root>

3) Create nodes/apps/eaem-assets-file-upload-with-metadata/clientlibof type cq:ClientLibraryFolder, add the String[] propertycategorieswith valueprey.gui.coral.fileuploadString property[]dependencieswith valueunderline

4) Create file (nt:file)/apps/eaem-assets-file-upload-with-metadata/clientlib/js.txt, add

upload-file-with-metadata.js

5) Create file (nt:file)/apps/eaem-assets-file-upload-with-metadata/clientlib/fileupload-with-metadata.js, add the following code

(Function($, $Document) {
var METADATA_DIALOG = "/apps/eaem-assets-file-upload-with-metadata/dialog.html",
METADATA_PREFIX = "team",
UPLOAD_LIST_DIALOG = "#uploadListDialog",
ACTION_CHECK_DATA_VALIDITY = "ACTION_CHECK_DATA_VALIDITY",
POST_METADATA_ACTION = "POST_METADATA_ACTION",
url = document.location.pathname;
if( url.indexOf("/assets.html") == 0 ){
handleAssetConsole();
}else if(url.indexOf(METADATA_DIALOG) == 0){
handleMetadataDialog();
}
Function handleAssetsConsole(){
$document.on("foundation-contentloaded", handleFileAdditions);
}
function handleMetadataDialog(){
$(Function(){
_.defer(metadataIframestyle);
});
}
Function registerReceiveListener(Handler) {
say (ventana.addEventListener) {
window.addEventListener("message", handler, false);
} else if (window.attachEvent) {
window.attachEvent("message", Handler);
}
}
function styleMetadataIframe(){
var $dialog = $("Choral Dialog");
if(_.isEmpty($dialog)){
Give back;
}
$dialog.css("overflow", "hidden");
$dialog[0].open = true;
var $header = $dialog.css("background-color", "#fff").find(.coral-Dialog-header");
$header.find(".cq-dialog-actions").remove();
$dialog.find(.coral-Dialog-wrapper").css("margen","0").find(.coral-Dialog-content").css("relleno","0");
registerReceiveDataListener(postMetadata);
function postMetadata(event){
var message = JSON.parse(event.data);
if(message.action !== ACTION_CHECK_DATA_VALIDITY ){
Give back;
}
var $dialog = $(.cq-dialog"),
$fields = $dialog.find("[name^='./']"),
data = {}, $field, $fValidation, name, value, values,
isDataInValid = falso;
$fields.each(function(index, field){
$field = $(field);
name = $field.attr("name");
value = $field.val();
$fValidation = $field.adaptTo("validation-base");
if($fValidation && !$fValidation.checkValidity()){
isDataInValid = true;
}
$campo.updateErrorUI();
if(_.isEmpty(Wert)){
Give back;
}
name = name.substr(2);
if(!name.indexOf(METADATA_PREFIX) === 0){
give back
}
if(!_.isEmpty(data[name])){
if(_.isArray(data[name])){
data[name].push(value);
}andros{
values ​​= [];
values.push(data[name]);
valores.push (Wert);
data[name] = values;
data[name + "@TypeHint"] = "String[]";
}
}andros{
data[name] = value;
}
});
sendMessageValidity(isDataInValid, Daten);
}
Funktion sendValidityMessage(isDataInValid, data){
var message = {
Action: ACTION_CHECK_DATA_VALIDITY,
data: data,
isDataInValid: isDataInValid
};
parent.postMessage(JSON.stringify(mensaje), "*");
}
}
Function handleFileAdditions(){
var $fileUpload = $("coral-chunkfileupload"),
$metadataIFrame, $subirBotón, validarSubirBotón,
metadata;
$fileUpload.on('coral-fileupload:fileadded', addMetadataDialog);
$fileUpload.on('coral-fileupload:loadend', postMetadata);
function sendMessageData(message){
$metadataIFrame[0].contentWindow.postMessage(JSON.stringify(mensaje), "*");
}
function addMetadataDialog(){
_.debounce(addDialog, 500)();
}
function addDialog(){
var $dialog = $(UPLOAD_LIST_DIALOG);
if(!_.isEmpty($dialog.find("iframe"))){
Give back;
}
var iFrame = '<iframe width="550px" height="450px" frameborder="0" src="' + METADATA_DIALOG + '"/>',
$dialogContent = $dialog.find("coral-dialog-content");
$metadataIFrame = $(iFrame).appendTo($dialogContent.css("max-height", "600px"));
$dialogContent.find("input").css("width", "30rem");
$dialogContent.closest(.coral-Dialog-wrapper").css("arriba", "30%").css("izquierda", "50%");
addValidateUploadButton($dialog);
}
Function addValidateUploadButton($dialog){
var $footer = $dialog.find("coral-dialog-footer");
$uploadButton = $footer.find("coral-button-label:contains('Upload')").closest("button");
validarUploadButton = nuevo Coral.Button().set({
Variant: 'primary'
});
validateUploadButton.label.textContent = Granite.I18n.get('Subir');
validarUploadButton.classList.add('dam-asset-upload-button');
$page pie[0].appendChild(validateUploadButton);
$uploadButton.hide();
validarUploadButton.hide();
validateBotónUp.on('click', function() {
verifyValidityOfData();
});
$metadataIFrame.on('load', function(){
validarUploadButton.show();
});
registrarseRecibirEscuchaDeDatos(esMetadataValid);
}
Function isMetadataValid(event){
var message = JSON.parse(event.data);
if( (message.action !== ACTION_CHECK_DATA_VALIDITY)){
Give back;
}
if(message.isDataInValid){
Give back;
}
metadata = message.data;
validarUploadButton.hide();
$subirBotón.click();
}
function checkDataValidity(){
var message = {
Action: ACTION_CHECK_DATA_VALIDITY
};
sendMessageData(message);
}
function postMetadata(event){
var detail = evento.originalEvent.detail,
folderPath = detail.action.replace(".createasset.html", ""),
assetMetadataPath = folderPath + "/" + detail.item.name + "/jcr:content/metadata";
//jcr:content/metadata created by the DAM update asset workflow may not be available when the next post is published
// the call is executed; Ideally, you post the parameters to aem, a scheduler runs and adds the metadata if the metadata
//The node becomes available again
$.ajax({
Type: 'POST',
URL: asset metadata path,
Data: metadata
})
}
}
})(jQuery, jQuery(Documento));

6) #212 is for demonstration purposes only; in real world implementations, the metadata node created byDAM Update AssetThe workflow may not yet exist when the ajax post metadata call is executed. Replace this direct call with a servlet that temporarily stores the form's metadata and updates the metadata node (when available) in a scheduler or listener

Hill

expand productcomposite multifieldprovideexpand collapsefunction, for a better experience and easy reordering

demonstration | Install package | GitHub

All items collapsed

An expanded article

easy rearrangement

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create a folder/apps/eaem-touchui-foldable-multifield

2) Example of dialog with composite multifield/apps/eaem-touchui-plegable-multifield/muestra-plegable-multifield/cq:dialog

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr= "http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="63 Multicampo contraíble"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<elements jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/container">
<elements jcr:primaryType="nt:unstructured">
< products
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
eaem-show-on-collapse="EAEM.showProductName"
fieldLabel="Products">
<Feld
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/container"
name="./products">
<elements jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/container">
<elements jcr:primaryType="nt:unstructured">
<Product
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Name of products"
fieldLabel="product name"
name="./product"/>
<camino
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
fieldDescription="Select route"
field tag="path"
name="./path"
rootPath="/content"/>
< Start date
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/datepicker"
class="Feld"
displayed format="aaaa-mm-dd hh:mm"
fieldLabel="Start Date"
name="./startDate"
type="datetime"/>
<show
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./show"
text="¿Display?"
value="y"/>
<type
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/select"
fieldDescription="Select size"
field tag="size"
name="./size">
<elements jcr:primaryType="nt:unstructured">
<def
jcr:primaryType="nt:unstructured"
text="Select size"
valor=""/>
<Klein
jcr:primaryType="nt:unstructured"
text="small"
valor="klein"/>
<medium
jcr:primaryType="nt:unstructured"
text="medium"
value="medium"/>
< grande
jcr:primaryType="nt:unstructured"
text="Large"
value="large"/>
</elements>
</Type>
</elements>
</column>
</elements>
</Feld>
</Products>
</elements>
</column>
</elements>
</content>
</jcr:root>

3) #14eaem-show-on-collapseproperty is for the function that creates a summary of items from multiple fields in collapsed mode; Here it isEAEM.showProductName, returns the first field value in a multi-field element (if empty or fails to create summary)click to enlargetext is displayed)

4) Create node/apps/eaem-touchui-collapsible-multifield/clientlibof type cq:ClientLibraryFolder, add the String propertycategorieswith valuecq.Authoring.Dialog.all, String propertydependencieswith valueunderline

5) Create file (nt:file)/apps/eaem-touchui-collapsible-multifield/clientlib/js.txt, add

Plegable-Multifield.js

6) Create file (nt:file)/apps/eaem-touchui-collapsible-multifield/clientlib/collapsible-multifield.js, add the following code

(Function(){
if(EAEMtype === "undefined"){
EAEM = {};
}
//The function to be executed when the user clicks Collapse; returns a summary of article data with multiple fields
EAEM.showProductName = Function(Fields){
Return Object.Values(Fields)[0];
}
}());
(Function ($, $Document, gAuthor) {
var summaryCreators = {},
CORAL_MULTIFIELD = "Korallen-Mehrfeld",
CORAL_MULTIFIELD_ITEM = "Coral Multifield Item",
CORAL_MULTIFIELD_ITEM_CONTENT = "Coral Multi-Item Item Content",
EAEM_SHOW_ON_COLLAPSE = "eaem-show-on-collapse",
RS_MULTIFIELD = "granite/ui/components/coral/foundation/form/multifield";
$document.on("dialogbereit", addCollapsers);
function addCollapsers(){
var $multifields = $(CORAL_MULTIFIELD).css("right-padding", "2.5rem");
if(_.isEmpty($multifields)){
Give back;
}
$multifields.find(CORAL_MULTIFIELD_ITEM).each(manejador);
$multifields.on('change', function(){
$multifields.find(CORAL_MULTIFIELD_ITEM).each(manejador);
});
loadShowSummaryCreatorFunctions();
addExpandCollapseAll($multicampos);
function handler() {
var $mfItem = $(number);
if(!_.isEmpty($mfItem.find("[icon=accordionUp]"))){
Give back;
}
addAccordionIcons($mfItem);
addSummarySection($mfItem);
}
}
Function addSummarySection($mfItem){
var $summarySection = $("<div/>").insertAfter($mfItem.find(CORAL_MULTIFIELD_ITEM_CONTENT))
.addClass("Pozo de Coral").css("Cursor", "Zeiger").hide();
$summarySection.click(function(){
$mfItem.find("[icono='accordionDown']").click();
});
}
function addExpandCollapseAll($multifields){
var $mfAdd, ExpandAll, CollapseAll;
$multifields.find("[korallen-multifield-add]").each(handler);
function handler() {
$mfAdd = $(die);
expandAll = nuevo Coral.Button().set({
Variant: 'secondary',
inner text: "Expand all"
});
expandAll.$.css("left margin", "10px").click(function(){
event.preventDefault();
$(this).closest(CORAL_MULTIFIELD).find("[icon='accordionDown']").click();
});
collapseAll = new Coral.Button().set({
Variant: 'secondary',
inner text: "Collapse All"
});
collapseAll.$.css("left margin", "10px").click(function(){
event.preventDefault();
$(this).closest(CORAL_MULTIFIELD).find("[icon='accordionUp']").click();
});
$mfAdd.after(expandAll).after(collapseAll);
}
}
Función loadShowSummaryCreatorFunctions(){
var editable = gAuthor.DialogFrame.currentDialog.editable;
if (!editable) {
Give back;
}
$.ajax(editable.config.dialog + ".infinity.json").done(fillLabelCreatorFns);
function fillLabelCreatorFns(obj){
if(!_.isObject(obj) || _.isEmpty(obj)){
Give back;
}
_.each(object, function(value){
if(valor["sling:resourceType"] === RS_MULTIFIELD){
if(!_.isEmpty(Wert.Feld) && !_.isEmpty(Wert.Feld.Name)) {
SummaryCreators[value.field.name] = value[EAEM_SHOW_ON_COLLAPSE];
}
}andros{
if(_.isObject(valor) && !_.isEmpty(valor)){
llenarLabelCreatorFns(Wert);
}
}
});
}
}
Function addAccordionIcons($mfItem){
var up = new Coral.Button().set({
Variant: "calm",
Symbol: "Accordion up",
Title: "Breakdown"
});
up.setAttribute('style', 'position:absolute; top: 0; right: -2.175rem');
arrive.$.on('click', controller);
$mfItem.append(arri);
var below = new Coral.Button().set({
Variant: "calm",
Symbol: "AkkordeonDown",
Title: "Expand"
});
down.setAttribute('style', 'position:absolute; top: 0; right: -2.175rem');
down.$.on('click', controller).hide();
$mfItem.append(next);
function(event) handler {
event.preventDefault();
var mfName = $(this).closest(CORAL_MULTIFIELD).attr("data-granite-coral-multifield-name"),
$mfItem = $(east).closest(CORAL_MULTIFIELD_ITEM),
$summarySection = $mfItem.children("div");
$summarySection.html(getSummary($mfItem, mfName));
setUI.call(this, $summarySection);
}
function wrapUI($summarySection){
var icon = $(this).find("coral-icon").attr("icono"),
$contenido = $mfItem.find(CORAL_MULTIFIELD_ITEM_CONTENT);
if(icon == "accordion up"){
if($summarySection.css("display") !== "ninguno"){
Give back;
}
$summarySection.show();
$contenido.slideToggle( "schnell", function() {
$content.hide();
});
arrive.$.hide();
down.$.show();
}andros{
if($summarySection.css("display") === "ninguno"){
Give back;
}
$summarySection.hide();
$contenido.slideToggle( "schnell", function() {
$content.display();
});
top.$.show();
down.$.hide();
}
}
}
function getSummary($mfItem, mfName){
var summary = "Click to expand";
Attempt{
if(resumenCreadores[mfName]){
var-Campos = {};
$mfItem.find("entry").each(function(){
var $input = $(die);
campos[$input.attr("nombre")] = $input.val();
});
resumen = eval(summaryCreators[mfName])(campos);
}
}fang(err){}
if(!summary){
summary = "Click to expand";
}
return summary;
}
}(jQuery, jQuery(document), Granite.author));

Hill

register aeditable component actionaopen dialogprogrammatic

You can find a similar extension for AEM 6 in this post

demonstration | Install package | GitHub

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create a folder/apps/touchui-open-component-dialog-register-action

2) Create nodes/apps/touchui-open-component-dialog-register-action/clientlibof the typecq:ClientLibraryOrdnerand add alinePropertycategorieswith valuecq.Authoring.Dialog.all

3) Create file (nt:file)/apps/touchui-open-component-dialog-register-action/clientlib/js.txtand add

open.js

4) Create file (nt:file)/apps/touchui-open-component-dialog-register-action/clientlib/open.jsand add the following code

(Function ($Document, Author) {
var dialog open = {
icon: 'coral-Icon--game',
text: 'Open dialogue',
controller: function(editable, parameter, target) {
author.DialogFrame.openDialog(new author.edit.Dialog(editable));
},
condition: function (editable) {
//Show this action only for component type eaem-touchui-open-comp-dialog-register-action/touchui-open-component-dialog
return editable.type === "eaem-touchui-open-comp-dialog-register-action/touchui-open-component-dialog";
},
isNonMulti: true
};
$document.on('cq-layer-activated', function (ev) {
if (ev.layer === 'Edit') {
autor.EditorFrame.editableToolbar.registerAction('EAEM_OPEN_DIALOG', openDialog);
}
});
})($(document), Granite.author);

Hill

add atoggle iconindialog headerto change itDark or light dialog background

demonstration| Install package | GitHub

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create a folder/apps/eaem-dialog-dark-light-view

2) Create nodes/apps/eaem-dialog-dark-light-view/clientlibof the typecq:ClientLibraryOrdnerand add alinePropertycategorieswith valuecq.Authoring.Dialog.all

3) Create file (nt:file)/apps/eaem-dialog-dark-light-view/clientlib/js.txtand add

light-oscura.js

4) Create file (nt:file)/apps/eaem-dialog-dark-light-view/clientlib/dark-light.jsand add the following code

(Function ($, $Document) {
$document.on("dialogbereit", Handler);
function handler() {
var dialog = $("choral dialog"),
acciones = dialog.find(".cq-dialog-actions");
var bg = $(getButtonHtml()).prependTo(acciones);
bg.click(function(event){
event.preventDefault();
dialog.toggleClass("coral--oscuro");
});
}
getButtonHtml(){ function
return '<button class="cq-dialog-header-action coral-Button coral-Button--minimal" title="Background Dark/Light">' +
'<icon-coral-icon="bulb" size="S"/>' +
'</publish>';
}
})(jQuery, jQuery(Documento));
(Video) What is Adobe Experience Manager (AEM)?

Hill

expandTouch UI Rich Text Editor Link Dialogto add the Coral Select widget to the selectionrel-Attribute of Anchor-Tags

For AEM 62 check this post

demonstration | Install package | GitHub


Selection of rel attribute in link dialog

rel Applied to the anchor tag

Anti-Samy considerations

Adding new attributes in the anchor tag can cause the attributes to be omitted during page rendering or when loading the link dialog; The following warning can be seen in error.log...

2017-09-26 12:40:42.804 *INFO* [0:0:0:0:0:0:0:1 [1506447642680] GET /content/we-retail/language-masters/en.html HTTP/1.1 ] org .apache.sling.xss.impl.HtmlToHtmlContentContext AntiSamy Warning: The a tag contained an attribute that we could not process. The rel attribute had the value "marker". For security reasons, this value could not be accepted. We decided to remove this attribute from the tag and leave everything else in place so we can process the input.

To closerealaccepted, make the following changes/apps/cq/xssprotection/config.xml(cover/libs/cq/xssprotection/config.xml), Prohandsome/htles/libs/sling/xss/config.xml

solution

1) Login to CRXDE Lite, create a folder (nt: folder)/apps/eaem-touchui-extend-rte-link-options

2) Create clientlib (typecq:ClientLibraryOrdner)/apps/eaem-touchui-extend-rte-link-options/clientliband set the propertycategoriesVonlinewrite tocq.Authoring.Dialog.allydependencies String[]aLodash

3) Create file (type nt:file)/apps/eaem-touchui-extend-rte-link-options/clientlib/js.txt, add the following

binding options.js

4) Create file (type nt:file)/Applications/eaem-touchui-extend-rte-link-options/clientlib/link-options.js, add the following code

(function ($) {
"use strictly";
var _ = window._,
class = window.class,
CUI = Ventana.CUI,
REL_FIELD = "rel",
RTE_LINK_DIALOG = "rtelinkdialog";
if(CUI.rte.ui.cui.CuiDialogHelper.eaemExtended){
Give back;
}
var EAEMLinkBaseDialog = new class ({
extender: CUI.rte.ui.cui.CQLinkBaseDialog,
toString: "EAEMLinkBaseDialog",
initialize: function(config) {
this.superClass.initialize.call(this, config);
this.$rteDialog = this.$container.find("[data-rte-dialog=link]");
this.$rteDialog.find(".rte-dialog-columnContainer:last").before(getLinkRelOptionsHtml());
},
dlgToModel: function() {
this.superClass.dlgToModel.call(this);
var relField = this.getFieldByType (REL_FIELD);
if(_.isEmpty(relField)){
Give back;
}
var relVal = relField.val();
si (_.isVacious(relVal)) {
Give back;
}
this.objToEdit.attributes["rel"] = relVal;
},
dlgFromModel: function() {
this.superClass.dlgFromModel.call(this);
if(_.isEmpty(this.objToEdit.attributes)){
Give back;
}
var relValue = this.objToEdit.attributes['rel'];
if(_.isEmpty(relValue)){
Give back;
}
var relSelect = this.$rteDialog.find("[tipo-de-datos='rel']")[0];
relSelect.items.getAll().forEach(function(item) {
elem.ausgewählt = (elem.value === relValue);
});
}
});
CUI.rte.ui.cui.CuiDialogHelper = new class({
erweitern: CUI.rte.ui.cui.CuiDialogHelper,
toString: "EAEMCuiDialogHelper",
instanciarDiálogo: function(dialogConfig) {
var tipo = dialogConfig.type;
if (write !== RTE_LINK_DIALOG){
this.superClass.instantiateDialog.call(this, dialogConfig);
Give back;
}
var $editable = $(this.editorKernel.getEditContext().root),
$contanedor = CUI.rte.UIUtils.getUIContainer($editable),
Dialog = new EAEMLinkBaseDialog();
dialog.attach (dialogConfig, $container, this.editorKernel);
return dialog;
}
});
Función getLinkRelOptionsHtml(){
var html = "<div class='rte-dialog-columnContainer'>" +
"<div class='rte-dialog-column'>" +
"<coral-select data-type='rel' placeholder='Elegir atributo \"rel\"'>";
var options = ["alternative", "author", "bookmark", "external", "help",
"license", "next", "nofollow", "noreferrer", "noopener", "previous", "find", "tag" ];
_.each(options, function(option){
html = html + getOptionHtml (Opción);
});
html = html + "</coral-select></div></div>";
devolver HTML;
function getOptionHtml(option){
return "<choral selection element>" + option + "</coral selection element>"
}
}
CUI.rte.ui.cui.CuiDialogHelper.eaemExtended = verdadero;
})(jQuery);

Hill

Addlinks pluginaTouch UI Content Fragment Editor

See this post for an example extension for 62

demonstration | Install package | GitHub

links plugin

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create a folder/apps/eaem-touchui-cfm-enlaces-complemento

2) Create nodes/apps/eaem-touchui-cfm-enlaces-plugin/clientlibof type cq:ClientLibraryFolder, add the String propertycategorieswith valuedam.cfm.authorship.editors, String property[]dependencieswith valueunterstrich,granite.shared

3) Create file (nt:file)/apps/eaem-touchui-cfm-links-plugin/clientlib/js.txt, add

cfm-rte-enlaces-plugin.js

4) Create file (nt:file)/apps/eaem-touchui-cfm-links-plugin/clientlib/cfm-rte-links-plugin.js, add the following code

(Function ($, $Document) {
var EAEM_LINK = "eaemLink",
EAEM_REMOVE_LINK = "eaemRemoveLink",
PATH_BROWSER_ID = "eaemLinkPathBrowser",
POPOVER_BUTTONS = "eaemLinkPopoverButtons",
pluginAdded = false, bookmarks = {};
var EAEM_CFM_LINKS_PLUGIN = new class ({
toString: "EAEMCFMLinksPlugin",
extender: CUI.rte.plugins.Plugin,
getFeatures: function() {
Devuelve [ EAEM_LINK, EAEM_REMOVE_LINK ];
},
execute: function(pluginCommand, value, envOptions) {
var context = envOptions.editContext;
if (pluginCommand === EAEM_REMOVE_LINK) {
this.editorKernel.execCmd("unbind", undefined, context);
}andros{
bookmark.context = Kontext;
bookmark.selection = CUI.rte.Selection.createRangeBookmark(context);
openLinksPopover(contexto);
}
}
});
$document.on("cfm:content change", addLinksPlugin);
function addLinksPlugin(event, data) {
if (complement added) {
Give back;
}
var editor = data.editor;
if (!(Editor instance of Dam.CFM.StyledTextEditor)) {
Give back;
}
added plugin = true;
var ek = editor.rte.getEditorKernel(),
$toolbar = $(.editor-tools .toolbar .tools"),
linkPlugin = getLinkPlugin(yo),
linkRemovePlugin = getLinkRemovePlugin(ek);
$toolbar.append(getLinkHtml());
var linkElement = new CUI.rte.ui.stub.ElementImpl(EAEM_LINK, linkPlugin, true);
linkElement.notifyToolbar(ek.toolbar);
var linkRemoveElement = new CUI.rte.ui.stub.ElementImpl(EAEM_REMOVE_LINK, linkRemovePlugin, true);
linkRemoveElement.notifyToolbar(ek.toolbar);
createPathBrowser();
registerListeners(me);
}
function getLinkPlugin(Kernel editor){
return new EAEM_CFM_LINKS_PLUGIN(Kernel editor, EAEM_LINK);
}
function getLinkRemovePlugin(Kernel editor){
return new EAEM_CFM_LINKS_PLUGIN(Kernel editor, EAEM_REMOVE_LINK);
}
function createPathBrowser(){
var pathBrowser = new CUI.PathBrowser({
Elemento: $("#" + PATH_BROWSER_ID),
pickerTitle: "Pick Content",
crumbRoot: "Content",
Root path: "/Content",
pickerSrc: "/libs/wcm/core/content/common/pathbrowser/column.html/content/dam?predicate=hierarchyNotFile"
});
pathBrowser.$picker.data("pathbrowser-type", "content-browser");
pathBrowser.$picker.on("coral-pathbrowser-picker-confirm", fillPathBrowserInput);
}
function fillPathBrowserInput(event){
CUI.rte.Selection.selectRangeBookmark(bookmark.context, bookmark.selection);
var $pathBrowser = $(event.target), rutas = [],
selecciones = $pathBrowser.find(".coral-ColumnView").data("columnView").getSelectedItems();
if (_.isEmpty(selections)) {
Give back;
}
$.each(choice, function() {
Pfade.push(decodeURIComponent(this.item.data('value')));
});
$("#" + PATH_BROWSER_ID).find("input").val(rutas[0]);
abrirEnlacesPopover();
}
function registerListeners(ek){
var $botones = $("#" + POPOVER_BUTTONS),
$cancel = $buttons.children("button:first"),
$save = $buttons.children("button:last"),
pathBrowserEle = $("#" + PATH_BROWSER_ID),
$popover = pathBrowserEle.closest("coral popover");
$cancel.click(closeLinksPopover);
$save.click(driveSpeichern);
Function handleSave(){
CUI.rte.Selection.selectRangeBookmark(bookmark.context, bookmark.selection);
var $popoverContent = $popover.find("coral-popover-content"),
editContext = ek.getEditContext(), linksPlugin = ek.registeredPlugins["enlaces"],
linkAccessories = {
href: pathBrowserEle.find("entrada").val(),
Attribute: {
Title: $popoverContent.children("Input").val()
},
Ziel: $popoverContent.children("coral-select").val()
};
editContext.setState("CUI.SelectionLock", 1);
linksPlugin.linkDialog = { objToEdit : linkProps };
linksPlugin.applyLink(editContext);
closeLinksPopover();
}
}
function closeLinksPopover(){
setLinksPopoverVisibility(falso);
}
function openLinksPopover(){
setLinksPopoverVisibility(true);
SetTimeout (ApplyStyles, 100);
function applyStyles(){
var pathBrowserEle = $("#" + PATH_BROWSER_ID),
$popover = pathBrowserEle.closest("coral popover");
$popover.css("enlaces", "0").css("relleno", "10px")
.find("coral popover content").kids()
.css("Rand unten", "10px");
$(".editor-tools").css("Höhe", "600px");
}
}
function setLinksPopoverVisibility(open){
var pathBrowserEle = $("#" + PATH_BROWSER_ID),
$popover = pathBrowserEle.closest("coral popover");
$popover[0].open = open;
}
function getOptionHtml(option, value){
return "<coral-select-item value='" + valor + "'>" + opción + "</coral-select-item>";
}
function getPathBrowserHtml(){
return '<div id="' + PATH_BROWSER_ID + '" data-picker-multiselect="false" style="display:inline">' +
'<input class="js-coral-pathbrowser-input" is="coral-textfield" placeholder="Path" style="width: 69% ">' +
'<button class="js-coral-pathbrowser-button" is="coral-button" title="Pfad auswählen" style="margin-bottom: 10px; border-radius: 0; border-left:0">' +
'<coral-icon-icon="select" size="S"/>' +
'</publish>' +
'</div>';
}
getTargetHtml(){ function
var targetSel = "<coral-select data-type='rel' placeholder='Choose link \"target\" attribute...'>",
options = {"_self" : "Same Tab", "_blank" : "New Tab", "_parent" : "Parent Frame", "_top" : "Top Frame"};
_.each(options, function(option, value){
targetSel = targetSel + getOptionHtml(Option, Wert);
});
return (objetivoSel + "</coral-select>");
}
getButtonHtml(){ function
volver '<div style="float:right" id="' + POPOVER_BUTTONS + '">' +
'<button is="coral-button" title="Cerrar"variante="secundario" style="margin-right: 5px">' +
'<coral-icon-icon="close" size="S"/>' +
'</publish>' +
'<button is="coral-button" title="Speichern"variante="primary">' +
'<coral-icon-icon="verify" size="S"/>' +
'</publish>' +
'</div>';
}
function getLinkHtml(){
return '<div class="cfm-toolbar-section">' +
'<button id="eaemLink" is="coral-button"variante="quiet" icon="link" title="Agregar enlace" iconsize="S" data-rte-command="' +
EAEM_LINK + '">' +
'</publish>' +
'<coral popover location="bottom" target="#eaemLink">' +
'<coral popover content>' +
getPathBrowserHtml() +
'<input class="js-coral-pathbrowser-input" is="coral-textfield" placeholder="Alt text" value="">' +
getTargetHtml() + getButtonHtml() +
'</coral-popover-content>' +
'<cabezal-popover-coral oculto></header-popover-coral>' +
'</coral-popover>' +
'<button is="coral-button"variante="quiet" icon="linkOff" iconsize="S" title="Enlace entfernen" data-rte-command="'
+ EAEM_REMOVE_LINK + '">' +
'</publish>' +
'</div>';
}
}(jQuery, jQuery(Documento)));

Hill

show theDate and TimeinListening to assets, sites, OmniSearchconsoles

demonstration | Install package | GitHub

financial assets

websites

OmniSearch

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create a folder/apps/eaem-touchui-list-view-show-date

2) Create nodes/apps/eaem-touchui-list-view-show-date/clientlibof type cq:ClientLibraryFolder, add the String propertycategorieswith valueGranit.utils, String property[]dependencieswith valueunderline

3) Create file (nt:file)/apps/eaem-touchui-list-view-show-date/clientlib/js.txt, add

show-close.js

4) Create file (nt:file)/apps/eaem-touchui-list-view-show-date/clientlib/show-date.js, add the following code

(Function ($, $Document) {
var FOUNDATION_CONTENT_LOADED = "base-contenido cargado";
$document.on(FOUNDATION_CONTENT_LOADED, showDate);
function showDate(event){
var $times = $("td > time"), $time, datetime;
_.each($times, function(time){
$time = $(time);
closetime = $time.attr("closetime");
if(_.isEmpty(fechahora)){
Give back;
}
$hora.html((nueva Fecha(parseFloat(fechahora))).toLocaleString());
})
}
})(jQuery, jQuery(Documento));

Hill

In the touch user interface, it displays theFull tag titlein the picker...

demonstration | Install package | GitHub

Product

renewal

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create a folder/apps/eaem-touchui-tags-picker-show-full-title

2) Create nodes/apps/eaem-touchui-tags-picker-show-full-title/clientlibof type cq:ClientLibraryFolder, add the String propertycategorieswith valuecq.gui.common.tagspicker, String property[]dependencieswith valueLodash

3) Create file (nt:file)/apps/eaem-touchui-tags-picker-show-full-title/clientlib/js.txt, add

show-full-title.js

4) Create file (nt:file)/apps/eaem-touchui-tags-picker-show-full-title/clientlib/show-full-title.js, add the following code

(Function($, $Document) {
var expandido = falso, LETTER_COUNT = 22, INCREASE_BY = 1.5,
CV_ITEM_HEIGHT = 3, CV_LABEL_HEIGHT = 2;
$document.on("foundation-contentloaded", handlePathBrowser);
function handlePathBrowser(){
if (extended) {
Give back;
}
expanded = true;
var cuiPathBrowser = $(".coral-PathBrowser").data("pathBrowser");
if(!cuiPathBrowser){
Give back;
}
// Handle selector columns
extenderPicker(cuiPathBrowser);
}
function extenderPicker(cuiPathBrowser){
var cuiPicker = cuiPathBrowser.$picker.data("picker");
cuiPathBrowser.$button.on("clic", function() {
setTimeout(function() {
if(!cuiPicker.columnView){
console.log("EAEM - I couldn't initialize the column view");
Give back;
}
extenderColumnView(cuiPicker.columnView);
}, 200);
});
}
function extenderColumnView(columnView){
function handler(event, href, data) {
var $html = $(columnView._data[href]), height, increment,
$etiquetas = $html.find(.coral-ColumnView-label"),
$label, $cvElement;
$tags.each(function(index, tag){
$tag = $(tag);
$cvItem = $label.closest(.coral-ColumnView-item");
Erhöhen = (INCREASE_BY * Math.floor($label.html().length / LETTER_COUNT));
$cvItem.css("height", (CV_ITEM_HEIGHT + elevation) + "rem");
$label.css("height",(CV_LABEL_HEIGHT + elevation) + "rem").css("space", "normal");
});
columnView._data[href] = $html[0].outerHTML;
}
columnView.$element.on('coral-columnview-load', handler);
}
})(jQuery, jQuery(Documento));

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http ://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/container">
<Layout
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/layouts/fixedcolumns"
margin="{Boolean}false"/>
<elements jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/container">
<elements jcr:primaryType="nt:unstructured">
<web title
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Enter title"
fieldLabel="Web Title"
nombre="./eaemWebTitle"
required="{Boolean}true"/>
<webDesc
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/textarea"
fieldDescription="Enter description"
fieldLabel="web description"
nombre="./eaemWebDesc"
required="{Boolean}true"/>
</elements>
</column>
</elements>
</jcr:root>

3) Create nodes/apps/eaem-touchui-carpeta-personalizada-properties/clientlibof type cq:ClientLibraryFolder, add the String[] propertycategoriesWert[cq.gui.damadmin.foldershare.coral,cq.authoring.dialog.all], String property[]dependencieswith valueLodash

4) Create file (nt:file)/apps/eaem-touchui-carpeta-personalizada-propiedades/clientlib/js.txt, add

Folder Properties.js

5) Create file (nt:file)/apps/eaem-touchui-custom-folder-properties/clientlib/folder-properties.js, add the following code

(Function($, $Document) {
var FOLDER_SHARE_WIZARD = "/mnt/overlay/dam/gui/content/assets/foldersharewizard.html",
CUSTOM_DIALOG = "/aplicaciones/eaem-touchui-carpeta-personalizada-properties/dialog",
EAEM_GET_ADDN_PROPERTIES = "EAEM_GET_ADDN_PROPERTIES",
url = document.ubicación.ruta, $customTab;
if( url.indexOf(FOLDER_SHARE_WIZARD) == 0 ){
handleAssetConsole();
}else if(url.indexOf(CUSTOM_DIALOG) == 0){
handleDialogProperties();
}
Function handleAssetsConsole(){
$document.on("loaded-content-base", addProperties);
}
function addProperties(){
var cuiTabView = $("coral-tabview");
if(_.isEmpty(cuiTabView)){
Give back;
}
cuiTabView = cuiTabView[0];
$customTab = $(getCustomTab()).appendTo(cuiTabView.$.children("coral-tablist"));
var $panel = $(getCustomPanel()).appendTo(cuiTabView.$.children("coral-panelstack")),
$iFrame = $panel.find("iframe");
$customTab.on("click",function(){
if(!_.isEmpty($iFrame.attr("src"))){
Give back;
}
$iFrame.attr("src", CUSTOM_DIALOG + ".html?folder=" + ($("form")).attr("action"));
});
addDummySubmit($iFrame);
}
function addDummySubmit($iFrame){
var $submit = $("button[type=submit]"), $dummySubmit;
$dummySubmit = $("<button variación='primary' is='coral-button'>Speichern</button>").insertAfter($submit);
$send.hide();
$dummySubmit.click(handle);
function(event) handler {
event.preventDefault();
var message = {
Action: EAEM_GET_ADDN_PROPERTIES
};
$iFrame[0].contentWindow.postMessage(JSON.stringify(mensaje), "*");
}
registrarseReceiveDataListener (addAddnPropertiesToForm);
}
function addAddnPropertiesToForm(event){
var message = JSON.parse(event.data);
if(message.action!== EAEM_GET_ADDN_PROPERTIES){
Give back;
}
$customTab.find("coral-tab-label").css("color", message.isDataInValid ? "#e14132" : "#707070");
if(message.isDataInValid){
Give back;
}
var $form = $("form"), $enviar = $("button[tipo=enviar]");
$submit.click();
$.post ($form.attr("action") + "/jcr:content", message.data);
}
function handlePropertiesDialog(){
$(Function(){
_.defer(estiloCustomDialogIFrame);
});
registerReceiveDataListener (postAddnProperties);
}
function styleCustomDialogIFrame() {
var $dialog = $("Choral Dialog");
if (_.isEmpty($dialog)) {
Give back;
}
$dialog.css("overflow", "hidden");
$dialog[0].open = true;
$dialog.find(.coral-Dialog-header").remove();
Coral.commons.ready (korallenbereit);
function CoralReady() {
var top = ($(window).width() - 1140) + "px",
left = ($(window).height() - 1155) + "px";
$dialog.find(.coral-Dialog-wrapper").css("margin", top + " 0 0 " + left)
.css("Color de fondo", "#f5f5f5");
$.ajax(queryParameters()["folder"] + "/jcr:content.json").done(function(data){
var $fields = $dialog.find("[name^='./']"), $field, name;
$fields.each(function (index, field) {
$field = $(field);
$field.val(data[$field.attr("name").substr(2)] || '');
})
});
}
}
function postAddnProperties(event){
var message = JSON.parse(event.data);
if(message.action!== EAEM_GET_ADDN_PROPERTIES){
Give back;
}
var $dialogue = $("DialogueChoral"),
$fields = $dialog.find("[name^='./']"),
data = {}, $field, $fValidation, name, value, values,
isDataInValid = falso;
$fields.each(function(index, field){
$field = $(field);
name = $field.attr("name");
value = $field.val();
$fValidation = $field.adaptTo("validation-base");
if($fValidation && !$fValidation.checkValidity()){
isDataInValid = true;
}
$campo.updateErrorUI();
if(_.isEmpty(Wert)){
Give back;
}
data[name.substr(2)] = wert;
});
message = {
Action: EAEM_GET_ADDN_PROPERTIES,
data: data,
isDataInValid: isDataInValid
};
parent.postMessage(JSON.stringify(mensaje), "*");
}
function getCustomTab(){
var title = "Custom";
$.ajax( { url: CUSTOM_DIALOG + ".json", asynchronous: false}).done(function(data){
Title = Data["jcr:Title"];
});
return '<coral-tab>' +
'<coral-tab-label>' + Título + '</coral-tab-label>' +
'</coral-tab>';
}
function getCustomPanel(){
var iFrame = '<iframe width="750px" height="750px" seamless="seamless" frameborder="0" />';
return '<coral panel>' +
'<div style="margin-top: 5px">' + iFrame + '</div>' +
'</panel-coral>';
}
function queryParameters(searchStr) {
var result = {}, parameter,
params = (searchStr ? searchStr.split(/\?|\&/) : document.location.search.split(/\?|\&/));
params.forEach(function(s) {
si (_.isVaccio(eso)) {
Give back;
}
param = it.split("=");
result[parameter[0]] = parameter[1];
});
return result;
}
Function registerReceiveListener(Handler) {
say (ventana.addEventListener) {
window.addEventListener("message", handler, false);
} else if (window.attachEvent) {
window.attachEvent("message", Handler);
}
}
})(jQuery, jQuery(Documento));

Hill

AddPhotosinCoral 3 Select -granite/ui/components/coral/foundation/form/select

demonstration | Install package | GitHub

add image path

Image rendered in Select

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create a folder/apps/eaem-touch-ui-images-in-select

2) Add a sample component for testing purposes/apps/eaem-touch-ui-images-in-select/eaem-list-viewconloop:recursoSuperTiposet of property valuescore/wcm/components/lista/v1/lista(ie expansion of the list of basic components)

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr= "http://www.jcp.org/jcr/1.0"
jcr:description="example list view"
jcr:primaryType="cq:Componente"
jcr:title="Experience the AEM List View"
Schlinge:resourceSuperType="core/wcm/components/list/v1/list"
componentGroup="Try AEM"/>

3) Create nodes/apps/eaem-touch-ui-images-in-select/clientlibof type cq:ClientLibraryFolder, add the String propertycategorieswith valuecq.Authoring.Dialog.all, String property[]dependencieswith valueunderline

4) Create file (nt:file)/apps/eaem-touch-ui-images-in-select/clientlib/js.txt, add

images-select.js

5) Create file (nt:file)/apps/eaem-touch-ui-images-in-select/clientlib/images-select.js, add the following code

(Function ($, $Document) {
var SELECT_RES_TYPE = "granite/ui/components/coral/foundation/form/select",
SLING_RES_TYPE = "sling:resourceType";
$document.on("dialogbereit", handleCoralSelect);
function handleCoralSelect(){
$.ajax(getDialogPath() + ".infinity.json").done(manejador);
function handler(data) {
var selectItems = {}, $widget;
fillItemsOfSelect ( Hide , selectItems );
_.each(selectItems, function(items, selectName){
$widget = $("[name='" + selectName + "']");
if(_.isEmpty($widget)){
Give back;
}
addImagesInCoralSelect($widget, elementos);
});
}
}
function getDialogPath(){
var gAuthor = Granit.Autor,
currentDialog = gAuthor.DialogFrame.currentDialog, DialogPath ;
if (current dialog instance of gAuthor.actions.PagePropertiesDialog){
var dialogSrc = actualDialog.getConfig().src;
dialogPath = dialogSrc.substring(0, dialogSrc.indexOf(".html"));
}andros{
var editable = gAuthor.DialogFrame.currentDialog.editable;
if (!editable) {
console.log("EAEM - editable not available");
Give back;
}
dialog path = editable.config.dialog;
}
return dialog path;
}
function addImagesInCoralSelect($widget, items){
var cssfit = false, $element;
_.each(elements, function(element){
if(!element.image){
Give back;
}
adjustarCss = true;
$elemento = $widget.find("coral-select-item[value='" + item.value + "']");
if(_.isEmpty($elemento)){
Give back;
}
$item.prepend("<img src='" + item.image + "' align='middle' width='30px' height='30px' style='margin-right: 5px; '/>" );
});
and (css adjuster) {
$widget.find("button").css("fill", "0 0 0 10px");
}
}
Function fillItemsOfSelect(data, selectItems){
if(!_.isObject(datos) || _.isEmpty(datos)){
return selected items;
}
_.each(data, function(value, key){
if(_.isObject(valor) && !_.isEmpty(valor)){
selectItems = fillItemsOfSelect (Wert, selectItems);
}andros{
if( (clave == SLING_RES_TYPE) && (valor == SELECT_RES_TYPE)){
selectItems[data.name] = data.items;
}
}
});
return selected items;
}
}(jQuery, jQuery(Documento)));

Hill

add aprocess stageaDAM-Update-Active-WorkflowcreatePlayback thumbnails in JPEG format(otb, thumbnails are created in PNG)

added workflow step in otbDAM-Update-Active-Workflow-/etc/workflow/models/dam/update_asset, for demonstration purposes only; In real implementations, the step must be added in the project-specific DAM update asset workflow

Many thanks to the unknown programmers for the snippets....

demo | Install package | source code | GitHub

process stage

Enter the width and height inprocess argumentseg width = 320, height = 320

JPEG playback

solution

1) Create OSGI bundleeaem-assets-jpeg-renderingto add the workflow step code (for example, using the Lazy Bones template eaem-simple-multimodule-project)

Lazybones erstellen aem-simple-multimodule-project 0.0.1-SNAPSHOT . -PgroupId=apps.experienceaem.assets
-PartifactId=eaem-assets-jpeg-renditions
-PprojectName="EAEM Asset JPEG Render Step"
-PappsFolderName="eaem-assets-jpeg-renditions"
-PpackageGroup="Experimente AEM"
-PaemVersion="6.3"

2) Create serviceapps.experienceaem.assets.impl.RenditionServiceImplto generate representations injpegformat, with the following code...

Paquete apps.experienceaem.assets.impl;
importar apps.experienceaem.assets.RenditionsService;
Import from com.adobe.cq.gfx.Gfx;
import com.adobe.cq.gfx.Instructions;
import from com.adobe.cq.gfx.layer;
com.adobe.cq.gfx.import plan;
com.day.cq.dam.api.Asset Import;
importar com.day.cq.dam.api.Rendition;
importar com.day.cq.dam.api.renditions.RenditionMaker;
importar com.day.cq.dam.api.renditions.RenditionTemplate;
importar com.day.cq.dam.api.thumbnail.ThumbnailConfig;
import com.day.cq.dam.commons.thumbnail.ThumbnailConfigImpl;
import com.day.cq.dam.commons.util.DamUtil;
import com.day.cq.dam.commons.util.OrientationUtil;
importar org.apache.commons.io.IOUtils;
importar org.apache.commons.lang3.StringUtils;
importar org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Property;
import org.apache.felix.scr.annotations.Reference;
import org.apache.felix.scr.annotations.Service;
importar org.apache.sling.api.resource.Resource;
import org.slf4j.Logger;
importar org.slf4j.LoggerFactory;
import java.io.InputStream;
/**
* Implementation of the reproduction service...
*/
@Components(
name="Experience the AEM Rendition Builder...",
metatype = true, immediate = true
)
@Property(name="service.description", value="Experience AEM Generate JPEG renditions for images")
@Service
public class RenditionServiceImpl implements RenditionsService {
end protected logger logging = LoggerFactory.getLogger(this.getClass());
@reference
privado RenditionMaker renditionMaker;
@reference
privados GFX-GFX;
public asset generateJpegRenditions(resource_resource, integer_width, integer_height) throws exception {
Active Asset = DamUtil.resolveToAsset(Resource);
log.info("Generate JPEG renditions for asset - " + asset.getPath());
RenditionTemplate[] templates = createRenditionTemplates(active, width, height);
renditionMaker.generateRenditions(activo, plantillas);
return active;
}
private RenditionTemplate[] createRenditionTemplates(active resource, integer width, integer height) {
ThumbnailConfig[] Thumbnails = new ThumbnailConfig[1];
thumbnails[0] = new ThumbnailConfigImpl(width,height,true);
RenditionTemplate[] templates = new RenditionTemplate[thumbnails.length];
for (int i = 0; i < thumbnails.length; i++) {
ThumbnailConfig thumb = miniaturas[i];
templates[i] = createThumbnailTemplate(asset, thumb.getWidth(), thumb.getHeight(), thumb.doCenter());
}
return templates;
}
private class JpegTemplate implements RenditionTemplate {
public plan plan;
public String representationName;
public string mimeType;
apply public game(active active) {
InputStream-Stream = nulo;
Attempt {
stream = gfx.render(plan, asset.adaptTo(Resource.class).getResourceResolver());
if(flow != null) {
return asset.addRendition (Wiedergabename, Stream, MimeType);
}
} Finally {
IOUtils.closeQuietly(flow);
}
return null;
}
}
private RenditionTemplate createThumbnailTemplate(Active Active, int width, int height, doCenter boolean) {
JpegTemplate template = new JpegTemplate();
final rendering = active.getOriginal();
template.renditionName = "cq5dam.thumbnail". + width + "." + height + ".jpeg";
template.mimeType = "Imagen/jpeg";
plantilla.plan = gfx.createPlan();
template.plan.layer(0).set("origin", interpretation.getPath());
applyOrientation(OrientationUtil.getOrientation(asset), template.plan.layer(0));
applyThumbnail(width, height, doCenter, template.mimeType, template.plan);
return template;
}
private static void applyThumbnail(int width, int height, boolean doCenter, String mimeType, Plan plan) {
Global instructions = plan.view();
global.set("width", width);
global.set("hey", height);
global.set("rszfast", Boolean.FALSO);
global.set("adjust", doCenter ? "adjust,1" : "restrict,1");
String fmt = StringUtils.substringAfter(mimeType, "/");
if ("png".equals(fmt) || "gif".equals(fmt) || "tif".equals(fmt)) {
fmt = fmt + "-alfa";
}
global.set("fmt", fmt);
}
private static void applyOrientation(short exifOrientation, layer layer) {
switch(exifOrientation) {
OrientationUtil.ORIENTATION_MIRROR_HORIZONTAL case:
layer.set("flip", "lr");
interruption;
case OrientationUtil.ORIENTATION_ROTATE_180:
layer.set("rotate", 180);
interruption;
Fall OrientationUtil.ORIENTATION_MIRROR_VERTICAL:
layer.set("flip", "ud");
interruption;
Fall OrientationUtil.ORIENTATION_MIRROR_HORIZONTAL_ROTATE_270_CW:
layer.set("flip", "lr");
layer.set("rotate", 270);
interruption;
Fall OrientationUtil.ORIENTATION_ROTATE_90_CW:
layer.set("rotate", 90);
interruption;
Fall OrientationUtil.ORIENTATION_MIRROR_HORIZONTAL_ROTATE_90_CW:
layer.set("flip", "lr");
layer.set("rotate", 90);
interruption;
Fall OrientationUtil.ORIENTATION_ROTATE_270_CW:
layer.set("rotate", 270);
interruption;
}
}
}

3) Create a workflow processapps.experienceaem.assets.GenerateThumbnailsProcessimplementcom.adobe.granite.workflow.exec.WorkflowProcesswith the following code (internally callrenditionsService.generateJpegRenditions(recurso, ancho, alto))

Paquete apps.experienceaem.assets;
importar com.adobe.granite.workflow.WorkflowException;
importar com.adobe.granite.workflow.WorkflowSession;
importar com.adobe.granite.workflow.exec.WorkItem;
importar com.adobe.granite.workflow.exec.WorkflowData;
importar com.adobe.granite.workflow.exec.WorkflowProcess;
importar com.adobe.granite.workflow.metadata.MetaDataMap;
importar org.apache.commons.lang3.StringUtils;
importar org.apache.commons.lang3.math.NumberUtils;
import org.apache.felix.scr.annotations.*;
importar org.apache.sling.api.resource.Resource;
importar org.apache.sling.api.resource.ResourceResolver;
import org.slf4j.Logger;
importar org.slf4j.LoggerFactory;
importar javax.jcr.Session;
import java.util.Arrays;
import java.util.List;
@Components
@Service({com.adobe.granite.workflow.exec.WorkflowProcess.class})
@Properties({@Property(name = "process.label", value = "Experience AEM: Generate JPEG renditions")})
public class GenerateThumbnailsProcess implements WorkflowProcess {
end protected logger logging = LoggerFactory.getLogger(this.getClass());
@reference
private representation service representation service;
public void execution(WorkItem workItem, WorkflowSession workflowSession, MetaDataMap metaDataMap)
lanza WorkflowException {
Attempt {
ResourceResolver resourceResolver = workflowSession.adaptTo(ResourceResolver.class);
String path = getPayloadPath(workItem.getWorkflowData());
if (StringUtils.isEmpty(ruta)) {
throw new WorkflowException("Error getting path to payload asset");
}
List<String> processArgs = Arrays.asList(metaDataMap.get("PROCESS_ARGS", "").split(","));
if(processArgs.size() <2){
throw new WorkflowException("Specify the width and height in the process arguments, eg width=400,height=400");
}
Ganzzahlbreite = NumberUtils.createInteger(processArgs.get(0).substring(processArgs.get(0).indexOf("=") + 1));
Entero-Höhe = NumberUtils.createInteger(processArgs.get(1).substring(processArgs.get(1).indexOf("=") + 1));
session session = workflowSession.adaptTo(Session.class);
Ressourcenressource = resourceResolver.getResource(ruta);
renditionsService.generateJpegRenditions(recurso, ancho, alto);
session.save();
} catch (Exception e) {
log.error("Error executing thumbnail creation process", e);
}
}
protected string getPayloadPath(WorkflowData wfData) {
string payloadPath = null;
si (wfData.getPayloadType().equals("JCR_PATH")) {
payloadPath = (String)wfData.getPayload();
}
return payloadPath;
}
}

4) Add the process step to your workflow (usually DAM update active) and click save

Hill

add atest listenerFor himtext box elementVonPage Properties Mnemonic URLCoral 3 multifield, changing background to #AAA on zoom

demonstration | Install package | GitHub

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create a folder/apps/eaem-touch-ui-multifield-item-listener

2) Create nodes/apps/eaem-touch-ui-multifield-item-listener/clientlibof type cq:ClientLibraryFolder, add the String propertycategorieswith valuecq.Authoring.dialog, String property[]dependencieswith valueunderline

3) Create file (nt:file)/apps/eaem-touch-ui-multifield-item-listener/clientlib/js.txt, add

listener.js

4) Create file (nt:file)/apps/eaem-touch-ui-multifield-item-listener/clientlib/listener.js, add the following code

(Function ($, $Document) {
var PAGE_PROPS_PATH = "/mnt/overlay/wcm/core/content/sites/properties.html",
CORAL_MF_NAME = "data-granite-coral-multicampo-name",
CORAL_MF_NAME_VANITY = "./sling:vanityPath", listenerAttached = false;
if ( window . location . pathname . indexOf ( PAGE_PROPS_PATH ) !== 0 ) { ;
Give back;
}
$document.on("foundation-contentloaded", addListenerToVanityMF);
function addListenerToVanityMF(){
var $vanityMF = $("[" + CORAL_MF_NAME + "='" + CORAL_MF_NAME_VANITY + "']");
if(attached listener || _.isEmpty($vanityMF)){
Give back;
}
attached listener = true;
$vanityMF[0].on('change', function(){
var $mf = $(this), $text = $mf.find("[type=text]:last");
$text.focusout(function(){
$(esto).css("background color", "#AAA");
})
});
consola.log($vanityMF);
}
}(jQuery, jQuery(Documento)));

Hill

expandTouch UI Rich Text Editor Link DialogaDelete parent framedisabled possibilitySelect target coralWidget

To add a new widget to the link dialog see this post

demonstration | Install package | GitHub

Product Link dialog box.

extended link dialog

Parent frame removed from target options list

solution

1) Login to CRXDE Lite, create a folder (nt: folder)/apps/eaem-touchui-extend-rte-remove-target-options

2) Create clientlib (typecq:ClientLibraryOrdner)/apps/eaem-touchui-extend-rte-remove-target-options/clientliband set the propertycategoriesVonlinewrite tocq.Authoring.Dialog.allydependencies String[]aLodash

3) Create file (type nt:file)/apps/eaem-touchui-extend-rte-remove-target-options/clientlib/js.txt, add the following

remove-target-options.js

4) Create file (type nt:file)/Applications/eaem-touchui-extend-rte-remove-target-options/clientlib/remove-target-options.js, add the following code (#27 removes parent frame option)

(function ($) {
"use strictly";
var _ = window._,
class = window.class,
CUI = Ventana.CUI,
RTE_LINK_DIALOG = "rtelinkdialog";
if(CUI.rte.ui.cui.CuiDialogHelper.eaemExtended){
Give back;
}
var EAEMLinkBaseDialog = new class ({
extender: CUI.rte.ui.cui.CQLinkBaseDialog,
toString: "EAEMLinkBaseDialog",
initialize: function(config) {
this.superClass.initialize.call(this, config);
this.$rteDialog = this.$container.find("[data-rte-dialog=link]");
var $objetivo = this.$rteDialog.find("coral-select"),
$padre = $target.find("coral-select-item[value='_parent']");
//Remove the main frame option
$target[0].items.remove($parent[0]);
}
});
CUI.rte.ui.cui.CuiDialogHelper = new class({
erweitern: CUI.rte.ui.cui.CuiDialogHelper,
toString: "EAEMCuiDialogHelper",
instanciarDiálogo: function(dialogConfig) {
var tipo = dialogConfig.type;
if (write !== RTE_LINK_DIALOG){
this.superClass.instantiateDialog.call(this, dialogConfig);
Give back;
}
var $editable = $(this.editorKernel.getEditContext().root),
$contanedor = CUI.rte.UIUtils.getUIContainer($editable),
Dialog = new EAEMLinkBaseDialog();
dialog.attach (dialogConfig, $container, this.editorKernel);
return dialog;
}
});
CUI.rte.ui.cui.CuiDialogHelper.eaemExtended = verdadero;
})(jQuery);

Hill

To createTouchUI-Rich-Text-EditorList complement (RTE) to aggregatealphabetical list

demonstration | Install package | GitHub

Complement en RTE

Plugin Settings: In-Place Editing

Plugin Settings - Dialog

solution

1) Login to CRXDE Lite, add nt: folder/apps/eaem-touch-rte-list-plugin-alphabetic

2) Createclientlib(cq:ClientLibraryOrdner)/apps/eaem-touch-rte-list-plugin-alphabetical/clientlibset propertycategoriesacq.Authoring.Dialog.allydependenciesa[underline]

3) Create file (nt:file)/apps/eaem-touch-rte-list-plugin-alphabetical/clientlib/js.txt, add the following content

list-plugin-alphabetically.js

4) Create file (nt:file)/apps/eaem-touch-rte-list-plugin-alphabetical/clientlib/list-plugin-alphabetical.js, add the following code

(function ($) {
"use strictly";
var _ = window._,
class = window.class,
GROUP = "aem-experience",
ALPHA_LIST_FEATURE = "AlphaListe",
ORDERED_LIST_CMD = "insert ordered list",
CUI = Ventana.CUI;
addPluginToDefaultUISettings();
var EAEMAlphaListCmd = new class ({
Expandir: CUI.rte.commands.List,
toString: "EAEMAalphaListCmd",
execute: function (execDef) {
this.superClass.execute.call(this, execDef);
var list = this.getDefiningListDom(execDef.editContext, execDef.nodeList);
if (! list) {
Give back;
}
$(List).attr("Type", "a");
}
});
CUI.rte.commands.CommandRegistry.register("_list", EAEMAlphaListCmd);
var EAEMAlphaListPlugin = new class ({
toString: "EAEMAalphaListPlugin",
extender: CUI.rte.plugins.Plugin,
pickerUI: null,
getFeatures: function() {
Devuelve [ALPHA_LIST_FEATURE];
},
initializeUI: function (tbGenerator) {
var plg = CUI.rte.plugins;
if (!this.isFeatureEnabled(ALPHA_LIST_FEATURE)) {
Give back;
}
this.pickerUI = tbGenerator.createElement(ALPHA_LIST_FEATURE, this, false, { title: "Lista alfabética..." });
tbGenerator.addElement (GROUP, plg.Plugin.SORT_FORMAT, this.pickerUI, 10);
var groupFeature = GRUPO + "#" + ALPHA_LIST_FEATURE;
tbGenerator.registerIcon(group characteristic, "abc");
},
execute: function(id, value, envOptions) {
if (! is a valid select()) {
Give back;
}
this.editorKernel.relayCmd (LISTA_ORDENADA_CMD);
Function isValidSelection(){
var winSel = ventana.getSelection();
return winSel && (winSel.rangeCount == 1) && (winSel.getRangeAt(0).toString().length > 0);
}
},
updateState: function(selDef) {
var hasUC = this.editorKernel.queryState (ALPHA_LIST_FEATURE, selDef);
if (this.pickerUI != null) {
this.pickerUI.setSelected (hasUC);
}
}
});
function addPluginToDefaultUISettings(){
toolbar var = CUI.rte.ui.cui.DEFAULT_UI_SETTINGS.inline.toolbar;
toolbar.splice (3, 0, GRUPO + "#" + ALPHA_LIST_FEATURE);
Toolbar = CUI.rte.ui.cui.DEFAULT_UI_SETTINGS.fullscreen.toolbar;
toolbar.splice (3, 0, GRUPO + "#" + ALPHA_LIST_FEATURE);
}
CUI.rte.plugins.PluginRegistry.register(GRUPO,EAEMAlphaListPlugin);
})(jQuery);

Hill

add an nNew Page Tree tabFor himpanel lateralto write/editor.html

demonstration | Install package | GitHub

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create a folder/apps/eaem-touchui-panel-lateral-pagetree

2) Create nodes/Applications/equipment-touchui-sidepanel-pagetree/clientlibof the typecq:ClientLibraryOrdnerand add alinePropertycategorieswith valuecq.Authoring.Dialog.all

3) Create file (nt:file)/Applications/equipment-touchui-sidepanel-seitenbaum/clientlib/js.txtand add

pagetree.js

4) Create file (nt:file)/Applications/equipment-touchui-sidepanel-seitenbaum/clientlib/pagetree.jsand add the following code

(Function ($, $Document) {
var PAGE_BROWSER = "/aplicaciones/eaem-touchui-sidepanel-pagetree/page-browser/content/tree-wrapper.html",
pageTreeAdded = falsch;
$document.on('cq-layer-activated', addPageTree);
function addPageTree(event){
if(pageTreeAdded || (event.layer !== "Editar")){
Give back;
}
var sidePanel = Granite.autor.ui.SidePanel,
tabList = panel lateral._tabView.tabList;
tabList.items.add({
Title: "Page Tree",
Hang tags: {
Internal HTML: '<coral icon-icon="pages" size="S"/>'
}
});
var Panelstack = panel lateral._tabView.panelStack;
panelestack.items.add({
Content: {
HTML interno: getPageContent()
}
});
pageTreeAdded = wahr;
}
function getPageContent(){
volver "<div class='sidepanel-tab'>" +
"<span class='sidepanel-tab-title'>PageTree</span>" +
"<iframe src='" + PAGE_BROWSER + "' style='border:none' height='800px'></iframe>" +
"</div>";
}
})(jQuery, jQuery(Documento));

5) Create nt:folder for the tree HTML page/Applications/equipment-touchui-sidepanel-pagetree/page-browser/wrapper

6) Create nt:file/Applications/equipment-touchui-sidepanel-pagetree/page-browser/wrapper/html.jsp, add the following code

<%@page session="false" %>
<%@include file="/libs/foundation/global.jsp" %>
<!DOCTYPE HTML PÚBLICO "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<Kopf>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Seitenbaum</title>
<style type="text/css">
#CQ .x-Tab-Panel-Body, #CQ .x-Panel-Body {
Background color: transparent !important;
}
</style>
<cq:includeClientLib-Kategorien="cq.compat.authoring.widgets"/>
<script type="text/javascript">
CQ.I18n.init({ "locale": "<%= request.getLocale() %>" });
CQ.Ext.onReady(Function () {
var pageTree = CQ.wcm.ContentFinderTab.getBrowseTree({
"Baumwurzel":{
"Text": CQ.I18n.getMessage("Content")
}
});
pageTree.on('beforedblclick', function(node){
ventana.open("/editor.html" + nodo.getPath() + ".html", '_blank');
});
var config = {
Article: [Page Tree],
xtype: "dialog wrapper"
};
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: Sorted Folder/Applications/equipment-touchui-sidepanel-pagetree/page-browser/contenty nt: unstructured node/Applications/equipment-touchui-sidepanel-pagetree/page-browser/content/tree-wrapperwith propertyloop:resourceType=/applications/equipment-touchui-sidepanel-pagetree/page-browser/wrapperfor the HTML content of the page

Hill

Addminimum, maximum limit settingextension toCoral 3 Multifield - Granit/UI/Komponenten/Koralle/Fundament/Form/Multifield

demonstration | Install package | GitHub

min configuration max

Maximum Validation

minimal validation

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create a folder/apps/eaem-touchui-min-max-items-multifield

2) Create nodes/Applications/eaem-touchui-min-max-items-multifield/clientlibof the typecq:ClientLibraryOrdnerand add alinePropertycategorieswith valuecq.Authoring.Dialog.all

3) Create file (nt:file)/Applications/eaem-touchui-min-max-items-multifield/clientlib/js.txtand add

min-max-multifield.js

4) Create file (nt:file)/Applications/eaem-touchui-min-max-items-multifield/clientlib/min-max-multifield.jsand add the following code

(Function ($, $Document, gAuthor) {
var EAEM_MAX_ITEMS = "eaem-max-items",
EAEM_MIN_ITEMS = "eaem-min-elements",
DATA_MF_NAME = "data-granite-coral-multicampo-name",
RS_MULTIFIELD = "granite/ui/components/coral/base/form/multifield",
SLING_RES_TYPE = "sling:resourceType";
$document.on("dialogbereit", addMinMaxCheck);
function addMinMaxCheck(){
$.ajax(getDialogPath() + ".infinity.json").done(manejador);
function handler(data) {
var mfProperties = {};
fillItemsOfMultifield ( Daten , mfProperties );
_.each(mfProperties, function(mfProps, mfName){
addValidator($("[" + DATA_MF_NAME + "='" + mfName + "']"),
mfProps[EAEM_MAX_ITEMS], mfProps[EAEM_MIN_ITEMS]);
});
}
}
Función addValidator($multifield, maxItems, minItems){
if (max elements) {
maxItems = parseInt(maxItems);
}
if (minItems){
minItems = parseInt(minItems);
}
$.validator.register({
Selector: "#" + $multifield.attr("id"),
validate: validate
});
validate function() {
var count = $multifield[0]._items.length;
if(maxItems && (recuento > maxItems) ){
return "Maximum allowed: " + maxItems + " items";
}
if(minItems && (count <minItems) ){
return "Minimum required: " + minItems + " items";
}
return null;
}
}
function getDialogPath(){
var gAuthor = Granit.Autor,
currentDialog = gAuthor.DialogFrame.currentDialog, DialogPath ;
if (current dialog instance of gAuthor.actions.PagePropertiesDialog){
var dialogSrc = actualDialog.getConfig().src;
dialogPath = dialogSrc.substring(0, dialogSrc.indexOf(".html"));
}andros{
var editable = gAuthor.DialogFrame.currentDialog.editable;
if (!editable) {
console.log("EAEM - editable not available");
Give back;
}
dialog path = editable.config.dialog;
}
return dialog path;
}
function fillItemsOfMultifield(data, mfProperties){
if(!_.isObject(datos) || _.isEmpty(datos)){
return mfProperties;
}
_.each(data, function(value, key){
if(_.isObject(valor) && !_.isEmpty(valor)){
mfProperties = llenarItemsOfMultifield (Wert, mfProperties);
}andros{
if( (clave == SLING_RES_TYPE) && (valor == RS_MULTIFIELD)){
mfProperties[data.field.name] = data;
}
}
});
return mfProperties;
}
}(jQuery, jQuery(document), Granite.author));

Hill

add avisual indication of background colorProselected plugininEnriched Text Editor

demonstration | Install package | GitHub

Product

renewal

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create a folder/apps/eaem-touch-rte-add-bgcolor-s selected-add

2) Create nodes/apps/eaem-touch-rte-add-bgcolor-selected-plugin/clientlibof the typecq:ClientLibraryOrdnerand add alinePropertycategorieswith valuerte.coralui3

3) Create file (nt:file)/apps/eaem-touch-rte-add-bgcolor-s selected-add/clientlib/js.txtand add

plugin-bg-color.js

4) Create file (nt:file)/apps/eaem-touch-rte-add-bgcolor-s selected-plugin/clientlib/plugin-bg-color.jsand add the following code

(Function ($, $Document) {
"use strictly";
var SEL_BG_COLOR = "#9999ff",
extended = incorrect;
if (extended) {
Give back;
}
expanded = true;
ExtendSetSelected();
function extendSetSelected(){
var elementoImpl = CUI.rte.ui.cui.ElementImpl;
if(!elementImpl){
Give back;
}
var origFn = elementImpl.prototype.setSelected;
elementImpl.prototype.setSelected = Function (isSelected, suppressEvent) {
origFn.call(this, isSelected, suppressEvent);
this.$ui.css("Hintergrundfarbe", isSelected ? SEL_BG_COLOR : "");
}
}
}(jQuery, jQuery(Documento)));

Hill

Showcustom bannersin the 3 views -Map, List, Column, if the size of the assets exceeds a certain limit, e.g. The following logic will add a red banner if the size is > 50 MB and a yellow banner if the size is > 4 MB

demonstration | Install package | GitHub

map view

list view

column view

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create a folder/apps/eaem-touchui-active-banner

2) Create nodes/apps/eaem-touchui-active-banners/clientlibof type cq:ClientLibraryFolder, add the String[] propertycategoriesWert[prey.gui.actions.coral], String property[]dependencieswith valueunderline

3) Create file (nt:file)/apps/eaem-touchui-assets-banners/clientlib/js.txt, add

banner.js

4) Create file (nt:file)/apps/eaem-touchui-assets-banners/clientlib/banners.js, add the following code

(Function ($, $Document) {
var FOUNDATION_CONTENT_LOADED = "base-contenido cargado",
FOUNDATION_MODE_CHANGE = "Base Mode Change",
FOUNDATION_COLLECTION_ID = "Stiftungssammlungs-ID",
LAYOUT_COL_VIEW = "Spalte",
LAYOUT_LIST_VIEW = "Lista",
LAYOUT_CARD_VIEW = "Carta",
COLUMN_VIEW = "Coral Column View",
EVENT_COLUMNVIEW_CHANGE = "coral column view:change",
FOUNDATION_COLLECTION_ITEM_ID = "Foundation Collection Item ID",
CORAL_COLUMNVIEW_PREVIEW = "Coral Column View Preview",
CORAL_COLUMNVIEW_PREVIEW_ASSET = "coral-column-view-preview-asset",
EAEM_BANNER_CLASS = "Eaem-Banner",
EAEM_BANNER = ".eaem-Banner",
FOUNDATION_COLLECTION_ITEM_TITLE = "Foundation Collection Item Title",
MED_SIZE_LIMIT = "4194304", //4mb
LARGE_SIZE_LIMIT = "52428800", //50mb
colViewListenerAdded = falso,
DAM_ADMIN_CHILD_PAGES = ".cq-damadmin-admin-childpages";
$document.on(FOUNDATION_CONTENT_LOADED, checkFileSizes);
$document.on(FOUNDATION_MODE_CHANGE, function(){
colViewListenerAdded = false;
check FileSizes();
});
function checkFileSizes(){
var folderPath = $(DAM_ADMIN_CHILD_PAGES).data(FOUNDATION_COLLECTION_ID);
if(_.isEmpty(rutacarpeta)){
Give back;
}
$.ajax(carpetaPath + ".3.json").done(showLargeFileSizeBanners);
}
Función showLargeFileSizeBanners(pathsObj){
if(esColumnView()){
handleColumnView();
}
if(_.isEmpty(pathsObj)){
Give back;
}
if(isCardView()){
addCardViewBanner (rutaObj);
}else if(isListView()){
addListViewBanner(pathsObj)
}
}
handleColumnView(){ function
var $vistaColumna = $(COLUMN_VIEW);
if(colViewListenerAdded){
Give back;
}
colViewListenerAdded = true;
$columnView.on(EVENT_COLUMNVIEW_CHANGE, handleColumnItemSelection);
}
function handleColumnItemSelection(event){
var detail = evento.originalEvent.detail,
$active = $(detail.selection[0]),
routeAsset = $asset.data(FOUNDATION_COLLECTION_ITEM_ID);
if(_.isEmpty(assetpath)){
Give back;
}
$.ajax(asset path + ".2.json").done(addColumnViewBanner);
}
function addColumnViewBanner(assetObj){
getUIWidget(CORAL_COLUMNVIEW_PREVIEW).then(manejador);
function handler ($colPreview){
var $assetPreview = $colPreview.find(CORAL_COLUMNVIEW_PREVIEW_ASSET);
$assetPreview.find(EAEM_BANNER).remove();
$assetPreview.prepend(getBannerMissingLinksHtmlColumnView(assetObj));
}
}
function getBannerMissingLinksHtmlColumnView(assetObj){
var size = nestedPluck(assetObj,"jcr:content/metadata/dam:size");
if(!size || (nestedPluck(assetObj,"jcr:content/dam:assetState") == "Verarbeitung")){
Give back;
}
var ct = getColorText(Size);
if(!ct.color){
Give back;
}
return "<coral-tag style='background-color: " + ct.color + ";z-index: 9999; width: 100%' class='" + EAEM_BANNER_CLASS + "'>" +
"<i class='coral-Icon coral-Icon--bell coral-Icon--sizeXS' style='margin-right: 10px'></i>" +
ct.text +
"</coral-tag>";
}
function getBannerMissingLinksHtml(assetObj){
var size = nestedPluck(assetObj,"jcr:content/metadata/dam:size"), Farbe, Text;
if(!size || (nestedPluck(assetObj,"jcr:content/dam:assetState") == "Verarbeitung")){
Give back;
}
var ct = getColorText(Size);
if(!ct.color){
Give back;
}
return "<coral-alert style='background-color:" + ct.color + "'class='" + EAEM_BANNER_CLASS + "'>" +
"<coral alarm content>" + ct.text + "</coral alarm content>" +
"</coral alert>";
}
function getColorText(size){
tamaño = parseFloat(tamaño);
it was Farbe, Text;
si (tamaño > LARGE_SIZE_LIMIT){
color = "#ff7f7f";
text = "GROSS > 50 MB";
}if not (size > MED_SIZE_LIMIT){
color = "#FFBF00";
text = "MEDIA > 4MB";
}
Give back{
color: color,
Text: Text
}
}
function addListViewBanner(pathsObj){
var $contenedor = $(DAM_ADMIN_CHILD_PAGES), $item, clazz, assetPath, ct, size,
OrdnerPfad = $container.data(FOUNDATION_COLLECTION_ID);
_.each(pathsObj, function(assetObj, assetName){
if(_.isString(activeObject) && isJCRProperty(assetName)){
Give back;
}
AssetPath = folder path + "/" + AssetName;
$elemento = $contenedor.find("[datos-" + FOUNDATION_COLLECTION_ITEM_ID + "='" + assetPath + "']");
if(!_.isEmpty($item.find(EAEM_BANNER))){
Give back;
}
tamaño = nestedPluck(assetObj,"jcr:content/metadata/dam:size");
ct = getTextColor(size);
if(!ct.color){
give back
}
$item.find("td").css("background-color" , ct.color).addClass(EAEM_BANNER_CLASS);
$item.find(FOUNDATION_COLLECTION_ITEM_TITLE).prepend(getListViewMissingLinksHtml());
});
}
function getListViewMissingLinksHtml(){
return "<i class='coral-Icon coral-Icon--bell coral-Icon--sizeXS' style='margin-right: 10px'></i>";
}
function addCardViewBanner(pathsObj){
var $contanedor = $(DAM_ADMIN_CHILD_PAGES), $element, routeActivo,
OrdnerPfad = $container.data(FOUNDATION_COLLECTION_ID);
_.each(pathsObj, function(assetObj, assetName){
if(_.isString(activeObject) && isJCRProperty(assetName)){
Give back;
}
AssetPath = folder path + "/" + AssetName;
$elemento = $contenedor.find("[datos-" + FOUNDATION_COLLECTION_ITEM_ID + "='" + assetPath + "']");
if(_.isEmpty($elemento)){
Give back;
}
if(!_.isEmpty($item.find(EAEM_BANNER))){
Give back;
}
$item.find("coral card info").append(getBannerMissingLinksHtml(assetObj));
});
}
isColumnView(){ function
volver (getAssetsConsoleLayout() === LAYOUT_COL_VIEW);
}
function isListView(){
volver (getAssetsConsoleLayout() === LAYOUT_LIST_VIEW);
}
function esCardView(){
volver (getAssetsConsoleLayout() === LAYOUT_CARD_VIEW);
}
function getAssetsConsoleLayout(){
var $childPage = $(DAM_ADMIN_CHILD_PAGES),
FoundationLayout = $childPage.data("foundation-layout");
if(_.isEmpty(foundationLayout)){
give back "";
}
Devuelve FoundationLayout.layoutId;
}
function getUIWidget(selector){
if(_.isEmpty(selector)){
Give back;
}
var deferred = $.Deferred();
var INTERVAL = establishInterval(function(){
var $widget = $(Selector);
if(_.isEmpty($widget)){
Give back;
}
clearInterval(INTERVAL);
deferred.resolve($widget);
}, 250);
deferred. Promise ();
}
function starts with (val, start) {
Return value && start && (val.indexOf(start) === 0);
}
function isJCRProperty(property){
return (startsWith(property, "jcr:") || startedWith(property, "sling:"));
}
function nestedPluck(objeto, clave) {
if (!_.isObject(object) || _.isEmpty(object) || _.isEmpty(key)) {
give back[];
}
if (clave.indexOf("/") === -1) {
ReturnObject[Key];
}
var nestedKeys = _.reject(key.split("/"), function(token) {
volver token.trim() === "";
}), object or nested value = object;
_.each(nested keys, function(nKey) {
if(_.isUndefined(nestedObjectOrValue)){
Give back;
}
if(_.isUndefined(nestedObjectOrValue[nKey])){
nestedObjectOrValue = undefiniert;
Give back;
}
anidadoObjectOrValue = nestedObjectOrValue[nKey];
});
returns nested object or value;
}
}($, $(Document)));

Hill

add theBlockzitatTouch UI PluginContent snippet rich text editor

demonstration | Install package | GitHub

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create a folder/apps/eaem-touchui-cfm-rte-pf-blockquote-plugin

2) Create nodes/aplicaciones/eaem-touchui-cfm-rte-pf-blockquote-plugin/clientlibof the typecq:ClientLibraryOrdner,add alinePropertycategorieswith valuedam.cfm.authoring.contenteditor.v2ydependenciesconstring[]Wert[lodash]

3) Create file (nt:file)/apps/eaem-touchui-cfm-rte-pf-blockquote-plugin/clientlib/js.txtand add

pf-blockquote.js

4) Create file (nt:file)/apps/eaem-touchui-cfm-rte-pf-blockquote-plugin/clientlib/pf-blockquote.jsand add the following code

(Function ($, $Document) {
var plugin Added = false,
PARAFORMAT_PLUGIN = "Paraformat",
TB_TYPE_FULL_SCREEN = "multieditorPantalla completa",
BQ_FORMAT = { description: "blockquote", "tag": "blockquote"},
BQ_ACTION = "paraformato#cita en bloc";
$document.on("foundation-contentloaded", onContentLoad);
function inContentLoad(){
if (complement added) {
Give back;
}
added plugin = true;
var editorManager = $(.content-fragment-editor").data("multiEditorManager"),
$fullScreenBtn = editorManager.$_root.find("[data-action='cfm-fullscreen#start']");
$fullScreenBtn.on("clic", addBlockQuotePlugin);
}
function addBlockQuotePlugin() {
var editorManager = $(.content-fragment-editor").data("multiEditorManager"),
editor = editorManager._editorContainers[0].editor,
$tbContainer = editor._activeEditor.options.$rteToolbarContainer,
$popover = CUI.rte.UIUtils.getPopover(PARAFORMAT_PLUGIN, TB_TYPE_FULL_SCREEN, $tbContainer);
if(!_.isEmpty($popover.find("[data-action='" + BQ_ACTION + "']"))){
Give back;
}
$popover.find("lista-botones-coral").append(getBlockQuoteHtml($popover));
var $bqAction = $popover.find("[acción-datos='" + BQ_ACTION + "']"),
ek = editor._activeEditor.rte.editorKernel,
plugin = ek.getPlugin("paraformato");
plugin.formatUI.formatos.push (BQ_FORMAT);
plugin.formatUI.$ui = $popover.find('button[data-action^="' + PARAFORMAT_PLUGIN + '#"]');
$bqAction.on('click.rte-handler', handler);
function handler(s) {
var pluginUI = plugin.formatUI,
$goal = $(e.goal);
if (!$target.is('button')) {
$target = $target.closest('button');
}
pluginUI._resetSelection();
pluginUI._select(pluginUI._getFormatId($goal));
var editContext = yo.getEditContext();
editContext.setState('CUI.SelectionLock', 1);
plugin.run();
ek.enableFocusHandling();
me.focus(editContext);
}
}
function getBlockQuoteHtml($paraformat) {
var $bqButton = $($paraformat.find("button:last")[0].outerHTML);
$bqButton.attr("data-action", BQ_ACTION).find("coral-list-item-content").html(BQ_FORMAT.description);
Returns $bqButton[0].outerHTML;
}
}(jQuery, jQuery(Documento)));

Hill

expand productcomposite multifieldprovideexpand collapsefunction, for a better experience and easy reordering

For 63 check out this post

demonstration | Install package | GitHub

All items collapsed

a collapsed element

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr= "http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="64 Multicampo contraíble"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<elements jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/container">
<elements jcr:primaryType="nt:unstructured">
< products
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
eaem-show-on-collapse="EAEM.showProductName"
fieldLabel="Products">
<Feld
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/container"
name="./products">
<elements jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/container">
<elements jcr:primaryType="nt:unstructured">
<Product
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Name of products"
fieldLabel="product name"
name="./product"/>
<camino
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
fieldDescription="Select route"
field tag="path"
name="./path"
rootPath="/content"/>
< Start date
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/datepicker"
class="Feld"
displayed format="aaaa-mm-dd hh:mm"
fieldLabel="Start Date"
name="./startDate"
type="datetime"/>
<show
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./show"
text="¿Display?"
value="y"/>
<type
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/select"
fieldDescription="Select size"
field tag="size"
name="./size">
<elements jcr:primaryType="nt:unstructured">
<def
jcr:primaryType="nt:unstructured"
text="Select size"
valor=""/>
<Klein
jcr:primaryType="nt:unstructured"
text="small"
valor="klein"/>
<medium
jcr:primaryType="nt:unstructured"
text="medium"
value="medium"/>
< grande
jcr:primaryType="nt:unstructured"
text="Large"
value="large"/>
</elements>
</Type>
</elements>
</column>
</elements>
</Feld>
</Products>
</elements>
</column>
</elements>
</content>
</jcr:root>

(Function(){
if(EAEMtype === "undefined"){
EAEM = {};
}
//The function to be executed when the user clicks Collapse; returns a summary of article data with multiple fields
EAEM.showProductName = Function(Fields){
Return Object.Values(Fields)[0];
}
}());
(Function ($, $Document, gAuthor) {
var summaryCreators = {},
CORAL_MULTIFIELD = "Korallen-Mehrfeld",
CORAL_MULTIFIELD_ITEM = "Coral Multifield Item",
CORAL_MULTIFIELD_ITEM_CONTENT = "Coral Multi-Item Item Content",
EAEM_SHOW_ON_COLLAPSE = "eaem-show-on-collapse",
RS_MULTIFIELD = "granite/ui/components/coral/foundation/form/multifield";
$document.on("dialogbereit", addCollapsers);
function addCollapsers(){
var $multifields = $(CORAL_MULTIFIELD).css("right-padding", "2.5rem");
if(_.isEmpty($multifields)){
Give back;
}
$multifields.find(CORAL_MULTIFIELD_ITEM).each(manejador);
$multifields.on('change', function(){
$multifields.find(CORAL_MULTIFIELD_ITEM).each(manejador);
});
loadShowSummaryCreatorFunctions();
addExpandCollapseAll($multicampos);
function handler() {
var $mfItem = $(number);
if(!_.isEmpty($mfItem.find("[icon=accordionUp]"))){
Give back;
}
addAccordionIcons($mfItem);
addSummarySection($mfItem);
}
}
Function addSummarySection($mfItem){
var $summarySection = $("<div/>").insertAfter($mfItem.find(CORAL_MULTIFIELD_ITEM_CONTENT))
.addClass("Pozo de Coral").css("Cursor", "Zeiger").hide();
$summarySection.click(function(){
$mfItem.find("[icono='accordionDown']").click();
});
}
function addExpandCollapseAll($multifields){
var $mfAdd, ExpandAll, CollapseAll;
$multifields.find("[korallen-multifield-add]").each(handler);
function handler() {
$mfAdd = $(die);
expandAll = nuevo Coral.Button().set({
Variant: 'secondary',
inner text: "Expand all"
});
$(expandAll).css("left margin", "10px").click(function(){
event.preventDefault();
$(this).closest(CORAL_MULTIFIELD).find("[icon='accordionDown']").click();
});
collapseAll = new Coral.Button().set({
Variant: 'secondary',
inner text: "Collapse All"
});
$(collapseAll).css("left margin", "10px").click(function(){
event.preventDefault();
$(this).closest(CORAL_MULTIFIELD).find("[icon='accordionUp']").click();
});
$mfAdd.after(expandAll).after(collapseAll);
}
}
Función loadShowSummaryCreatorFunctions(){
var editable = gAuthor.DialogFrame.currentDialog.editable;
if (!editable) {
Give back;
}
$.ajax(editable.config.dialog + ".infinity.json").done(fillLabelCreatorFns);
function fillLabelCreatorFns(obj){
if(!_.isObject(obj) || _.isEmpty(obj)){
Give back;
}
_.each(object, function(value){
if(valor["sling:resourceType"] === RS_MULTIFIELD){
if(!_.isEmpty(Wert.Feld) && !_.isEmpty(Wert.Feld.Name)) {
SummaryCreators[value.field.name] = value[EAEM_SHOW_ON_COLLAPSE];
}
}andros{
if(_.isObject(valor) && !_.isEmpty(valor)){
llenarLabelCreatorFns(Wert);
}
}
});
}
}
Function addAccordionIcons($mfItem){
var up = new Coral.Button().set({
Variant: "calm",
Symbol: "Accordion up",
Title: "Breakdown"
});
up.setAttribute('style', 'position:absolute; top: 0; right: -2.175rem');
up.on('click', controller);
$mfItem.append(arri);
var below = new Coral.Button().set({
Variant: "calm",
Symbol: "AkkordeonDown",
Title: "Expand"
});
down.setAttribute('style', 'position:absolute; top: 0; right: -2.175rem');
down.on('click', controller).hide();
$mfItem.append(next);
function(event) handler {
event.preventDefault();
var mfName = $(this).closest(CORAL_MULTIFIELD).attr("data-granite-coral-multifield-name"),
$mfItem = $(east).closest(CORAL_MULTIFIELD_ITEM),
$summarySection = $mfItem.children("div");
$summarySection.html(getSummary($mfItem, mfName));
setUI.call(this, $summarySection);
}
function wrapUI($summarySection){
var icon = $(this).find("coral-icon").attr("icono"),
$contenido = $mfItem.find(CORAL_MULTIFIELD_ITEM_CONTENT);
if(icon == "accordion up"){
if($summarySection.css("display") !== "ninguno"){
Give back;
}
$summarySection.show();
$contenido.slideToggle( "schnell", function() {
$content.hide();
});
up.hide();
down.show();
}andros{
if($summarySection.css("display") === "ninguno"){
Give back;
}
$summarySection.hide();
$contenido.slideToggle( "schnell", function() {
$content.display();
});
top.show();
below. hide ();
}
}
}
function getSummary($mfItem, mfName){
var summary = "Click to expand";
Attempt{
if(resumenCreadores[mfName]){
var-Campos = {};
$mfItem.find("entry").each(function(){
var $input = $(die);
campos[$input.attr("nombre")] = $input.val();
});
resumen = eval(summaryCreators[mfName])(campos);
}
}fang(err){}
if(!summary){
summary = "Click to expand";
}
return summary;
}
}(jQuery, jQuery(document), Granite.author));