feat(popin) : improve popin to modal

Add possiblitiy to change centreon popin
to a modal

Refs: #5607

www/include/common/javascript/centreon/popin.js

@@ -36,9 +36,11 @@
   'use strict';
 
   function CentreonPopin(settings, $elem) {
-    var self = this;
-    var closeBtn = $('<a class="close" href="#"><img src="./img/icons/circle-cross.png" class="ico-18"></a>');
-    var $newElem = $('<div></div>');
+    var self = this,
+        closeBtn = $('<a class="close" href="#">' +
+                    '<img src="./img/icons/circle-cross.png" class="ico-18"></a>'),
+        $newElem = $('<div></div>');
+
     self.settings = settings;
 
     /* Add class */
@@ -46,7 +48,6 @@
     $newElem.addClass('centreon-popin');
     $newElem.hide();
     $elem.wrap($newElem);
-  
     self.$elem = $elem.parents('.centreon-popin').detach();
     self.$elem.appendTo('body');
 
@@ -101,18 +102,25 @@
           .addClass('centreon-popin-overlay')
           .hide()
           .prependTo('body');
+
+          if (self.settings.isModal) {
+              $('.close').hide();
+              $('.centreon-popin').css({'padding': '1em'})
           }
+      }
+    },
+
+    handleOverlay: function() {
+        var self = this;
+
         $('#centreonPopinOverlay').on('click', function (e) {
-        if (self.settings.closeOnDocument) {
+            if (!self.settings.isModal) {
                 if ($(e.target).parents('.centreon-popin').length === 0) {
                     self.close();
                 }
             }
         });
     },
-    setUrl : function(url){
-        this.settings.url = url;
-    },
 
     reset: function() {
       var self = this;
@@ -159,6 +167,8 @@
       this.setCenter();
       this.setScroll();
       this.opened = true;
+
+      this.handleOverlay();
     },
     close: function () {
       this.opened = false;
@@ -168,7 +178,7 @@
       } else {
         this.$elem.hide();
       }
-      $('#centreonPopinOverlay').hide();
+      $('#centreonPopinOverlay').hide().off('click');
 
       /* Execute callback if defined on settings */
       if (typeof(this.settings.onClose) === 'function') {
@@ -178,24 +188,29 @@
   };
 
   $.fn.centreonPopin = function (options) {
-    var args = Array.prototype.splice.call(arguments, 1);
-    var settings = $.extend({}, $.fn.centreonPopin.defaults, options);
-    var methodReturn;
+    var args = Array.prototype.splice.call(arguments, 1),
+        settings = $.extend({}, $.fn.centreonPopin.defaults, options),
+        methodReturn;
+
     var $set = this.each(function () {
-      var $this = $(this);
-      var data = $this.data('centreonPopin');
+      var $this = $(this),
+      data = $this.data('centreonPopin');
+
       if (!data) {
         $this.data('centreonPopin', (data = new CentreonPopin(settings, $this)));
       }
+
       if (typeof options === 'string') {
           methodReturn = data[options].apply(data, args);
+      } else if (options.open) {
+          methodReturn = data['open'].apply(data, args);
       }
     });
-    return (methodReturn === undefined) ? $set : methodReturn;
+      if (methodReturn === undefined) return $set;
   };
 
   $.fn.centreonPopin.defaults = {
-    closeOnDocument: true,
+    isModal: false,
     open: false,
     url : null,
     ajaxDataType: 'html',

www/include/home/customViews/index.ihtml

@@ -683,9 +683,18 @@ jQuery(function () {
     jQuery('#formAddView input[name="public"]').prop('checked', false);
   });
 
+    jQuery('.setDefault').button({ icons : { primary: 'ui-icon-arrowreturnthick-1-w'}}).on('click', function () {
+        jQuery("#setDefaultConfirm").centreonPopin({
+            open: true
+        });
+    });
+
   jQuery('.editView').button({ icons : { primary: 'ui-icon-gear'}});
+
     jQuery('.deleteView').button({ icons : { primary: 'ui-icon-trash'}}).on('click', function () {
-    jQuery("#deleteViewConfirm").centreonPopin("open");
+        jQuery("#deleteViewConfirm").centreonPopin({
+            open: true
+        });
     });
 
   jQuery('.shareView').button({ icons : { primary: 'ui-icon-folder-open'}}).on('click', function () {
@@ -736,9 +745,6 @@ jQuery(function () {
   });
   jQuery('.addWidget').button({ icons : { primary: 'ui-icon-plus'}});
   jQuery('.setRotate').button({ icons : { primary: 'ui-icon-play'}});
-  jQuery('.setDefault').button({ icons : { primary: 'ui-icon-arrowreturnthick-1-w'}}).on('click', function () {
-    jQuery("#setDefaultConfirm").centreonPopin('open');
-  });
 
   jQuery('input[name="create_load[create_load]"]').change(function (){
     if (jQuery(this).val() == 'load'){