feat(popin) : improve popin to modal

Add possiblitiy to change centreon popin to a modal Refs: #5607
centreon · Oct 19, 2017 · 5f9527d · 5f9527d
1 parent 8b54153
commit 5f9527d
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 41 deletions.
diff --git a/www/include/common/javascript/centreon/popin.js b/www/include/common/javascript/centreon/popin.js
@@ -34,19 +34,20 @@
 
 (function ($, window) {
   '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 */
     $elem.addClass('popin-wrapper');
     $newElem.addClass('centreon-popin');
     $newElem.hide();
     $elem.wrap($newElem);
-
     self.$elem = $elem.parents('.centreon-popin').detach();
     self.$elem.appendTo('body');
 
@@ -57,14 +58,14 @@
     });
 
     self.initOverlay();
-    
-    if(self.settings.url !== null){
+
+    if (self.settings.url !== null) {
         $.ajax({
-           url : self.settings.url,
-           type: self.settings.ajaxType,
-           dataType : self.settings.ajaxDataType,
-           data: self.settings.postDatas,
-           success : function(html){
+            url : self.settings.url,
+            type: self.settings.ajaxType,
+            dataType : self.settings.ajaxDataType,
+            data: self.settings.postDatas,
+            success : function(html){
 
                /* Execute callback if defined on settings */
                if (typeof(self.settings.formatResponse) === 'function') {
@@ -82,9 +83,9 @@
                if (typeof(self.settings.onComplete) === 'function') {
                    self.settings.onComplete();
                }
-           }
+            }
         });
-    }else{
+    } else {
         self.reset();
         if (self.settings.open) {
            self.open();
@@ -101,17 +102,24 @@
           .addClass('centreon-popin-overlay')
           .hide()
           .prependTo('body');
-      }
-      $('#centreonPopinOverlay').on('click', function (e) {
-        if (self.settings.closeOnDocument) {
-          if ($(e.target).parents('.centreon-popin').length === 0) {
-            self.close();
+
+          if (self.settings.isModal) {
+              $('.close').hide();
+              $('.centreon-popin').css({'padding': '1em'})
           }
-        }
-      });
+      }
     },
-    setUrl : function(url){
-        this.settings.url = url;
+
+    handleOverlay: function() {
+        var self = this;
+
+        $('#centreonPopinOverlay').on('click', function (e) {
+            if (!self.settings.isModal) {
+                if ($(e.target).parents('.centreon-popin').length === 0) {
+                    self.close();
+                }
+            }
+        });
     },
 
     reset: function() {
@@ -140,6 +148,8 @@
       this.$elem.show();
       this.setCenter();
       this.opened = true;
+
+      this.handleOverlay();
     },
     close: function () {
       this.opened = false;
@@ -149,34 +159,39 @@
       } else {
         this.$elem.hide();
       }
-      $('#centreonPopinOverlay').hide();
+      $('#centreonPopinOverlay').hide().off('click');
 
       /* Execute callback if defined on settings */
       if (typeof(this.settings.onClose) === 'function') {
         this.settings.onClose();
       }
     }
   };
-  
+
   $.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);
+          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',
@@ -186,4 +201,4 @@
     onComplete: null,
     onClose: null
   };
-})(jQuery, window);
+})(jQuery, window);
diff --git a/www/include/home/customViews/index.ihtml b/www/include/home/customViews/index.ihtml
@@ -683,10 +683,19 @@ 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('.deleteView').button({ icons : { primary: 'ui-icon-trash'}}).on('click', function () {
+        jQuery("#deleteViewConfirm").centreonPopin({
+            open: true
+        });
+    });
 
   jQuery('.shareView').button({ icons : { primary: 'ui-icon-folder-open'}}).on('click', function () {
     /* Get default information for a share view */
@@ -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'){