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

AEM 61 - ClassicUI Configure Parsys Placeholder Text, Background & Border Colors

$
0
0

Goal


Extend Parsys (/libs/foundation/components/parsys) to configure placeholder text, background and border colors

For a similar extension in Touch UI check this post

A simple version for ClassicUI is here

Demo | Package Install


Parsys - Design Mode



Stored in CRX



Parsys - Edit Mode



Solution


1) Login to CRXDE Lite, create folder (nt:folder) /apps/classicui-configure-parsys-text-color

2) Create clientlib (type cq:ClientLibraryFolder/apps/classicui-configure-parsys-text-color/clientlib and set property categories of String type to cq.widgets and dependencies to underscore

3) Create file ( type nt:file ) /apps/classicui-configure-parsys-text-color/clientlib/js.txt, add the following

                         configure-parsys.js

4) Create file ( type nt:file ) /apps/classicui-configure-parsys-text-color/clientlib/configure-parsys.js, add the following code

(function(){
var PARSYS_DESIGN_DIALOG = "/libs/foundation/components/parsys/design_dialog",
PARSYS_PLACEHOLDER_TEXT = "parsysPlaceholderText",
PARSYS_TEXT_COLOR = "parsysTextColor",
PARSYS_BG_COLOR = "parsysBackgroundColor",
PARSYS_BORDER_COLOR = "parsysBorderColor",
designExtended = false;

CQ.Ext.onReady(function () {
if(CQ.WCM.isEditMode()){
handleEditMode();
}

if(CQ.WCM.isDesignMode()){
handleDesignMode();
}
});

function handleDesignMode(){
if( designExtended === true ){
return;
}

extendShowDialog();
}

function handleEditMode(){
CQ.WCM.on("editablesready", configureParsys, this);
}

function isParsysNew(editable){
return _.isObject(editable.params)
&& (editable.params["./sling:resourceType"] == CQ.wcm.EditBase.PARSYS_NEW);
}

function configureParsys(){
var parsyses = getParsyses(), placeholder,
$placeholder, $pContainer, designConfig;

_.each(parsyses, function(parsys){
if(!parsys.emptyComponent) {
return;
}

designConfig = getConfiguration(parsys);

placeholder = parsys.emptyComponent.findByType("static")[0];

$placeholder = $(placeholder.el.dom);

$pContainer = $placeholder.closest(".cq-editrollover-insert-container");

if(designConfig[PARSYS_PLACEHOLDER_TEXT]){
$placeholder.html(designConfig[PARSYS_PLACEHOLDER_TEXT]);
}

if(designConfig[PARSYS_TEXT_COLOR]){
$placeholder.css("color", getColor(designConfig[PARSYS_TEXT_COLOR]));
}

if(designConfig[PARSYS_BG_COLOR]){
$pContainer.css("background-color", getColor(designConfig[PARSYS_BG_COLOR]));
}

if(designConfig[PARSYS_BORDER_COLOR]){
var color = getColor(designConfig[PARSYS_BORDER_COLOR]);

parsys.highlight.on("beforeshow", function(highlight){
$("#" + highlight.id).css("background-color", color);
})
}
});
}

function getColor(color){
color = color.trim();

if(color.indexOf("#") !== 0){
color = "#" + color;
}

return color;
}

function getConfiguration(editComponent) {
var pageInfo = CQ.utils.WCM.getPageInfo(editComponent.path),
designConfig = {}, cellSearchPath, parentPath, parName;

if (!pageInfo || !pageInfo.designObject) {
return;
}

try {
cellSearchPath = editComponent.cellSearchPath;
parentPath = editComponent.getParent().path;

cellSearchPath = cellSearchPath.substring(0, cellSearchPath.indexOf("|"));
parName = parentPath.substring(parentPath.lastIndexOf("/") + 1);

designConfig = pageInfo.designObject.content[cellSearchPath][parName];
} catch (err) {
console.log("Error getting parsys configuration", err);
}

return designConfig;
}

function getParsyses(){
var parsyses = {};

_.each(CQ.WCM.getEditables(), function(e){
if(!isParsysNew(e)){
return;
}

parsyses[e.path] = e;
});

return parsyses;
}

function extendShowDialog(){
CQ.wcm.EditBase.showDialog = (function(showDialogFn) {
return function(editComponent, type, ignoreIsContainer){
if(editComponent.dialog !== PARSYS_DESIGN_DIALOG){
return;
}

var isFirstRun = !editComponent.dialogs[CQ.wcm.EditBase.EDIT];

showDialogFn.call(this, editComponent, type, ignoreIsContainer);

if(isFirstRun){
editComponent.getEditDialog().on("loadcontent", extendParsysDialog);
}
}
}(CQ.wcm.EditBase.showDialog));
}

function extendParsysDialog(dialog){
$.ajax( dialog.path + ".2.json" ).done(handler);

function handler(data){
dialog.un("loadcontent", extendParsysDialog);

var parsysPlaceholderText = new CQ.Ext.form.TextField({
value: data[PARSYS_PLACEHOLDER_TEXT] || "",
fieldLabel: "Parsys Text",
name: "./" + PARSYS_PLACEHOLDER_TEXT,
style: {
marginBottom: '10px'
}
});

var colorConfig = {
showHexValue: true,
editable: true,
style: {
marginBottom: '10px'
}
};

var parsysTextColor = new CQ.form.ColorField(_.extend({
fieldLabel: "Parsys Text Color",
name: "./" + PARSYS_TEXT_COLOR
}, colorConfig));

var parsysBackgroundColor = new CQ.form.ColorField(_.extend({
fieldLabel: "Parsys Background Color",
name: "./" + PARSYS_BG_COLOR
}, colorConfig));

var parsysBorderColor = new CQ.form.ColorField(_.extend({
fieldLabel: "Parsys Border Color",
name: "./" + PARSYS_BORDER_COLOR
}, colorConfig));

var compSelector = dialog.findByType("componentselector")[0],
ownerCt = compSelector.ownerCt;

ownerCt.insert(2, parsysBorderColor);
ownerCt.insert(2, parsysBackgroundColor);
ownerCt.insert(2, parsysTextColor);
ownerCt.insert(2, parsysPlaceholderText);

ownerCt.doLayout();

parsysTextColor.setValue(data[PARSYS_TEXT_COLOR] || "");
parsysBackgroundColor.setValue(data[PARSYS_BG_COLOR] || "");
parsysBorderColor.setValue(data[PARSYS_BORDER_COLOR] || "");
}
}
}());



Viewing all articles
Browse latest Browse all 525

Trending Articles



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