Relation controller popup: fix size, add cssClass and allowDismiss

modules/backend/behaviors/RelationController.php

@@ -673,12 +673,18 @@ protected function makeViewWidget()
             $config->recordUrl = $this->getConfig('view[recordUrl]');
             $config->customViewPath = $this->getConfig('view[customViewPath]');
             $config->noRecordsMessage = $this->getConfig('view[noRecordsMessage]');
+            $config->size = $this->getConfig('manage[size]');
+            $config->cssClass = $this->getConfig('manage[cssClass]');
+            $config->allowDismiss = $this->getConfig('manage[allowDismiss]');
 
             $defaultOnClick = sprintf(
-                "$.wn.relationBehavior.clickViewListRecord(':%s', '%s', '%s')",
+                "$.wn.relationBehavior.clickViewListRecord(':%s', '%s', '%s', '%s', '%s', '%s')",
                 $this->relationModel->getKeyName(),
                 $this->relationGetId(),
-                $this->relationGetSessionKey()
+                $this->relationGetSessionKey(),
+                $config->size,
+                $config->cssClass,
+                $config->allowDismiss
             );
 
             if ($config->recordUrl) {

modules/backend/behaviors/relationcontroller/assets/js/winter.relation.js

@@ -9,14 +9,20 @@
             $(el).closest('.control-list').listWidget('toggleChecked', [el])
         }
 
-        this.clickViewListRecord = function(recordId, relationId, sessionKey) {
+        this.clickViewListRecord = function(recordId, relationId, sessionKey, size, cssClass, allowDismiss) {
             var newPopup = $('<a />'),
                 $container = $('#'+relationId),
                 requestData = paramToObj('data-request-data', $container.data('request-data'))
 
+            if (!size) {
+                size = 'huge'
+            }
+
             newPopup.popup({
                 handler: 'onRelationClickViewList',
-                size: 'huge',
+                size: size,
+                cssClass: cssClass,
+                allowDismiss: allowDismiss,
                 extraData: $.extend({}, requestData, {
                     'manage_id': recordId,
                     '_session_key': sessionKey

modules/system/assets/ui/js/popup.js

@@ -49,7 +49,9 @@
         content: null,
         size: null,
         adaptiveHeight: false,
-        zIndex: null
+        zIndex: null,
+        cssClass: null,
+        allowDismiss: false
     }
 
     Popup.prototype.init = function(){
@@ -207,8 +209,22 @@
         if (this.options.adaptiveHeight)
             modalDialog.addClass('adaptive-height')
 
+        if (this.options.cssClass)
+            modalDialog.addClass(this.options.cssClass)
+
         if (this.options.zIndex !== null)
             modal.css('z-index', this.options.zIndex + 20)
+
+        if (this.options.allowDismiss) {
+            modal.on('mousedown', function(e) {
+                const target = e.target;
+                if (target.classList.contains('control-popup')) {
+                    modal.hide()
+                    $('.popup-backdrop').remove()
+                    $(document.body).removeClass('modal-open')
+                }
+            });
+        }
 
         return modal.append(modalDialog.append(modalContent))
     }