Smartphone

Goal

Show custom banners in all 3 views - Card, List, Column, when assets size crosses a certain limit eg. the following logic adds red banner if size > 50mb and amber banner if size > 4mb

Demo | Package Install | Github


Card View



List View



Column View

Solution

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

2) Create node /apps/eaem-touchui-assets-banners/clientlib of type cq:ClientLibraryFolder, add String[] property categories value [dam.gui.actions.coral] , String[] property dependencies with value underscore

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

                        banners.js

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

(function ($, $document) {
 var FOUNDATION_CONTENT_LOADED = "foundation-contentloaded",
 FOUNDATION_MODE_CHANGE = "foundation-mode-change",
 FOUNDATION_COLLECTION_ID = "foundation-collection-id",
 LAYOUT_COL_VIEW = "column",
 LAYOUT_LIST_VIEW = "list",
 LAYOUT_CARD_VIEW = "card",
 COLUMN_VIEW = "coral-columnview",
 EVENT_COLUMNVIEW_CHANGE = "coral-columnview:change",
 FOUNDATION_COLLECTION_ITEM_ID = "foundation-collection-item-id",
 CORAL_COLUMNVIEW_PREVIEW = "coral-columnview-preview",
 CORAL_COLUMNVIEW_PREVIEW_ASSET = "coral-columnview-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 = false,
 DAM_ADMIN_CHILD_PAGES = ".cq-damadmin-admin-childpages";

 $document.on(FOUNDATION_CONTENT_LOADED, checkFileSizes);

 $document.on(FOUNDATION_MODE_CHANGE, function(){
 colViewListenerAdded = false;
 checkFileSizes();
 });

 function checkFileSizes(){
 var folderPath = $(DAM_ADMIN_CHILD_PAGES).data(FOUNDATION_COLLECTION_ID);

 if(_.isEmpty(folderPath)){
 return;
 }

 $.ajax(folderPath + ".3.json").done(showLargeFileSizeBanners);
 }

 function showLargeFileSizeBanners(pathsObj){
 if(isColumnView()){
 handleColumnView();
 }

 if(_.isEmpty(pathsObj)){
 return;
 }

 if(isCardView()){
 addCardViewBanner(pathsObj);
 }else if(isListView()){
 addListViewBanner(pathsObj)
 }
 }

 function handleColumnView(){
 var $columnView = $(COLUMN_VIEW);

 if(colViewListenerAdded){
 return;
 }

 colViewListenerAdded = true;

 $columnView.on(EVENT_COLUMNVIEW_CHANGE, handleColumnItemSelection);
 }

 function handleColumnItemSelection(event){
 var detail = event.originalEvent.detail,
 $asset = $(detail.selection[0]),
 assetPath = $asset.data(FOUNDATION_COLLECTION_ITEM_ID);

 if(_.isEmpty(assetPath)){
 return;
 }

 $.ajax(assetPath + ".2.json").done(addColumnViewBanner);
 }

 function addColumnViewBanner(assetObj){
 getUIWidget(CORAL_COLUMNVIEW_PREVIEW).then(handler);

 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") == "processing")){
 return;
 }

 var ct = getColorText(size);

 if(!ct.color){
 return;
 }

 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"), color, text;

 if(!size || (nestedPluck(assetObj,"jcr:content/dam:assetState") == "processing")){
 return;
 }

 var ct = getColorText(size);

 if(!ct.color){
 return;
 }

 return "<coral-alert style=background-color:" + ct.color + " class=" + EAEM_BANNER_CLASS + ">" +
 "<coral-alert-content>" + ct.text + "</coral-alert-content>" +
 "</coral-alert>";
 }

 function getColorText(size){
 size = parseFloat(size);

 var color, text;

 if(size > LARGE_SIZE_LIMIT){
 color = "#ff7f7f";
 text = "LARGE > 50 MB";
 }else if(size > MED_SIZE_LIMIT){
 color = "#FFBF00";
 text = "MEDIUM > 4 MB";
 }

 return{
 color: color,
 text: text
 }
 }

 function addListViewBanner(pathsObj){
 var $container = $(DAM_ADMIN_CHILD_PAGES), $item, clazz, assetPath, ct, size,
 folderPath = $container.data(FOUNDATION_COLLECTION_ID);

 _.each(pathsObj, function(assetObj, assetName){
 if(_.isString(assetObj) && isJCRProperty(assetName)){
 return;
 }

 assetPath = folderPath + "/" + assetName;

 $item = $container.find("[data-" + FOUNDATION_COLLECTION_ITEM_ID + "=" + assetPath + "]");

 if(!_.isEmpty($item.find(EAEM_BANNER))){
 return;
 }

 size = nestedPluck(assetObj,"jcr:content/metadata/dam:size");

 ct = getColorText(size);

 if(!ct.color){
 return
 }

 $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 $container = $(DAM_ADMIN_CHILD_PAGES), $item, assetPath,
 folderPath = $container.data(FOUNDATION_COLLECTION_ID);

 _.each(pathsObj, function(assetObj, assetName){
 if(_.isString(assetObj) && isJCRProperty(assetName)){
 return;
 }

 assetPath = folderPath + "/" + assetName;

 $item = $container.find("[data-" + FOUNDATION_COLLECTION_ITEM_ID + "=" + assetPath + "]");

 if(_.isEmpty($item)){
 return;
 }

 if(!_.isEmpty($item.find(EAEM_BANNER))){
 return;
 }

 $item.find("coral-card-info").append(getBannerMissingLinksHtml(assetObj));
 });
 }

 function isColumnView(){
 return ( getAssetsConsoleLayout() === LAYOUT_COL_VIEW );
 }

 function isListView(){
 return ( getAssetsConsoleLayout() === LAYOUT_LIST_VIEW );
 }

 function isCardView(){
 return (getAssetsConsoleLayout() === LAYOUT_CARD_VIEW);
 }

 function getAssetsConsoleLayout(){
 var $childPage = $(DAM_ADMIN_CHILD_PAGES),
 foundationLayout = $childPage.data("foundation-layout");

 if(_.isEmpty(foundationLayout)){
 return "";
 }

 return foundationLayout.layoutId;
 }

 function getUIWidget(selector){
 if(_.isEmpty(selector)){
 return;
 }

 var deferred = $.Deferred();

 var INTERVAL = setInterval(function(){
 var $widget = $(selector);

 if(_.isEmpty($widget)){
 return;
 }

 clearInterval(INTERVAL);

 deferred.resolve($widget);
 }, 250);

 return deferred.promise();
 }

 function startsWith(val, start){
 return val && start && (val.indexOf(start) === 0);
 }

 function isJCRProperty(property){
 return (startsWith(property, "jcr:") || startsWith(property, "sling:"));
 }

 function nestedPluck(object, key) {
 if (!_.isObject(object) || _.isEmpty(object) || _.isEmpty(key)) {
 return [];
 }

 if (key.indexOf("/") === -1) {
 return object[key];
 }

 var nestedKeys = _.reject(key.split("/"), function(token) {
 return token.trim() === "";
 }), nestedObjectOrValue = object;

 _.each(nestedKeys, function(nKey) {
 if(_.isUndefined(nestedObjectOrValue)){
 return;
 }

 if(_.isUndefined(nestedObjectOrValue[nKey])){
 nestedObjectOrValue = undefined;
 return;
 }

 nestedObjectOrValue = nestedObjectOrValue[nKey];
 });

 return nestedObjectOrValue;
 }
}($, $(document)));