Customization of parsys to limit number of components and also components paths in AEM 6.3

1. Create a clientlib with category cq.authoring.dialog and register below js in js.txt file.
2. This js is for restricting components paths and limit in parsys under columncontrol component.It can be applied to other components by changing CUSTOM_COLUMN_COMPONENT value to component name (it should be same as the component name mentioned under the component folder i.e.,apps/myproject/component/columncontrol)
 3.With below js we can LIMIT components count to 10 and components paths can be limited to the paths mentioned in ALLOWED_COMPONENTS

parsys-listener.js

 (function ($, $document) {  
   "use strict";  
    var COMPONENTS_LIMIT = 10;  
    var CUSTOM_COLUMN_COMPONENT="columncontrol";  
    var ALLOWED_COMPONENTS =["/apps/weretail/components/content/button","/apps/weretail/components/content/title","/apps/weretail/components/content/text"];  
   function getDesignPath(editable){  
       var parsys = editable.getParent(),  
         designSrc = parsys.config.designDialogSrc,  
         result = {}, param;  
       if (designSrc === undefined) {  
         return undefined;  
       }  
       designSrc = designSrc.substring(designSrc.indexOf("?") + 1);  
       designSrc.split(/&/).forEach( function(it) {  
         if (_.isEmpty(it)) {  
           return;  
         }  
         param = it.split("=");  
         result[param[0]] = param[1];  
       });  
       if (result.referrer === undefined) {  
         return undefined;  
       }  
       return decodeURIComponent(result.referrer);  
     }  
     function showErrorAlert(message, title) {  
       var fui = $(window).adaptTo("foundation-ui"),  
         options = [{  
           text: "OK",  
           warning: true  
         }];  
       message = message || "Unknown Error";  
       title = title || "Error";  
       fui.prompt(title, message, "error", options);  
     }  
     function getChildEditables(parsys) {  
       var editables = Granite.author.edit.findEditables(),  
         children = [], parent;  
       _.each(editables, function(editable){  
         parent = editable.getParent();  
         if(parent && (parent.path === parsys.path)){  
           children.push(editable);  
         }  
       });  
       return children;  
     }  
     function isWithinLimit(editable){  
         var path = getDesignPath(editable),  
         children = getChildEditables(editable.getParent()),  
         isWithin = true, currentLimit = "";  
       isWithin = children.length <= COMPONENTS_LIMIT;  
       if(!isWithin){  
         showErrorAlert("Max Limit exceeded, allowed " + COMPONENTS_LIMIT + " components only");  
       }  
       return isWithin;  
     }  
     function isWithinList(comp_path){  
       var isWithin = true;  
       if ( jQuery.inArray(comp_path, ALLOWED_COMPONENTS ) == -1){  
         isWithin = false;  
       }  
       if(!isWithin){  
         showErrorAlert("Component <b>" + comp_path + "</b> is not allowed");  
       }  
       return isWithin;  
     }  
     function extendComponentDrop() {  
       var dropController = Granite.author.ui.dropController,  
         compDragDrop;  
       if (dropController !== undefined) {  
         compDragDrop = dropController.get(Granite.author.Component.prototype.getTypeName());  
         if (compDragDrop !== undefined) {  
           compDragDrop.handleDrop = function(dropFn){  
             return function (event) {  
               var targetEditable = event.currentDropTarget.targetEditable;  
               var parPath = targetEditable.path;   
               console.log("parPath" +parPath);  
               if(parPath && parPath.indexOf(CUSTOM_COLUMN_COMPONENT) != -1 ){  
                 if (!isWithinLimit(targetEditable) || !isWithinList(event.path)){  
                    return;  
                 }  
               }  
               return dropFn.call(this, event);  
             };  
           }(compDragDrop.handleDrop);  
         }  
         //------------------------------------------------  
         Granite.author.Component.prototype.beforeInsert = function(openDlgFn){  
           return function (defaultInsertFunction, editable) {  
             var parsysPath = editable.path;  
             var compPath = this.componentConfig.path;  
             if(parsysPath && parsysPath.indexOf(CUSTOM_COLUMN_COMPONENT) != -1 && !( isWithinLimit(editable.getChildren()[0]) && isWithinList(compPath) )){  
               return false;  
             }  
           };  
         }( Granite.author.Component.prototype.beforeInsert)  
         //-------------------------------------------------  
         //handle insert action  
         Granite.author.edit.actions.openInsertDialog = function(openDlgFn){  
           return function (editable) {  
             if(!isWithinLimit(editable)){  
               return;  
             }  
             return openDlgFn.call(this, editable);  
           };  
         }(Granite.author.edit.actions.openInsertDialog);  
         //handle paste action  
         var insertAction = Granite.author.edit.Toolbar.defaultActions.INSERT;  
         insertAction.handler = function(insertHandlerFn){  
           return function(editableBefore, param, target){  
             var parsysPath = editableBefore.path;  
             if(parsysPath && parsysPath.indexOf(CUSTOM_COLUMN_COMPONENT) != -1 && !isWithinLimit(editableBefore) ){  
               return;  
             }            
             return insertHandlerFn.call(this, editableBefore, param, target);  
           };  
         }(insertAction.handler);  
       }  
     }  
     $(function() {  
       if (Granite && Granite.author && Granite.author.edit && Granite.author.Component &&  
         Granite.author.ui && Granite.author.ui.dropController) {  
         extendComponentDrop();  
       }  
     });  
 }(jQuery, jQuery(document)));