Nouveau : popajax qui permet d'afficher un popver avec du contenu en Ajax et...

Nouveau : popajax qui permet d'afficher un popver avec du contenu en Ajax et plein d'autres choses (doc dispo ici :https://crisi.unicaen.fr/dokuwiki/develop/unicaen2/moduleunicaenunicaenapp/viewhelpers/popajax?&#evenements)

Module.php

@@ -151,7 +151,7 @@ class Module implements
         $url            = $basePathHelper() . "/refresh-session";
         $js             = "$(function() { refreshSession('$url', $period); });";
         
-        $sm->get('viewhelpermanager')->get('InlineScript')->offsetSetScript(8,$js);
+        $sm->get('viewhelpermanager')->get('InlineScript')->offsetSetScript(1001,$js);
     }
     
     /**

public/css/unicaen.css

@@ -164,7 +164,7 @@ div.messenger span.glyphicon {
 }
 
 div.ui-datepicker {
-    z-index: 1051 !important; /* NB: doit être supérieur à la modale Bootstrap qui est à 1050 */
+    z-index: 1061 !important; /* NB: doit être supérieur à la modale Bootstrap qui est à 1050 et au popover(1060) */
 }
 
 div.multicheckbox label {

public/js/unicaen.js

@@ -115,6 +115,12 @@ IntraNavigator = {
         return $($(element).parents('.intranavigator').get(0));
     },
 
+    refreshElement: function(element, data, isSubmit)
+    {
+        element.html(data);
+        $("body").trigger('intranavigator-refresh', {element:element,isSubmit:isSubmit });
+    },
+
     embeds: function(element)
     {
         return $(element).parents('.intranavigator').length > 0;
@@ -136,6 +142,11 @@ IntraNavigator = {
         $(element).append(msg);
     },
 
+    endWaiting: function()
+    {
+        $('.intramessage').hide();
+    },
+
     formSubmitListener: function (e)
     {
         var form = $(e.target);
@@ -145,10 +156,10 @@ IntraNavigator = {
 
         if (elementToRefresh) {
             // requête AJAX de soumission du formulaire
-            IntraNavigator.waiting(elementToRefresh, 'Enregistrement en cours');
+            IntraNavigator.waiting(elementToRefresh, 'Veuillez patienter s\'il vous plaît...');
             $.post(url, postData, $.proxy(function (data)
             {
-                elementToRefresh.html(data);
+                IntraNavigator.refreshElement(elementToRefresh, data, true);
             }, this));
         }
 
@@ -166,21 +177,21 @@ IntraNavigator = {
             IntraNavigator.waiting(elementToRefresh, 'Chargement');
             $.get(url, {}, $.proxy(function (data)
             {
-                elementToRefresh.html(data);
+                IntraNavigator.refreshElement(elementToRefresh, data, true);
             }, this));
         }
 
         e.preventDefault();
     },
 
-    btnPrimaryClickListener: function (e)
+    /*btnPrimaryClickListener: function (e)
     {
         var form = IntraNavigator.getElementToRefresh(e.target).find('form');
         if (form.length) {
             form.submit();
             e.preventDefault();
         }
-    },
+    },*/
 
     /**
      * Lance automatiquement l'association de tous les widgets déclarés avec les éléments HTMl de classe correspondante
@@ -189,11 +200,11 @@ IntraNavigator = {
     {
         $('body').off("submit", ".intranavigator form", IntraNavigator.formSubmitListener);
         $('body').off("click", ".intranavigator a", IntraNavigator.innerAnchorClickListener);
-        $('body').off("click", ".intranavigator .btn-primary", IntraNavigator.btnPrimaryClickListener);
+        //$('body').off("click", ".intranavigator .btn-primary", IntraNavigator.btnPrimaryClickListener);
 
         $('body').one("submit", ".intranavigator form", IntraNavigator.formSubmitListener);
         $('body').one("click", ".intranavigator a", IntraNavigator.innerAnchorClickListener);
-        $('body').one("click", ".intranavigator .btn-primary", IntraNavigator.btnPrimaryClickListener);
+        //$('body').one("click", ".intranavigator .btn-primary", IntraNavigator.btnPrimaryClickListener);
     },
 
     /**
@@ -207,6 +218,7 @@ IntraNavigator = {
         $(document).ajaxSuccess(function ()
         {
             that.run();
+            that.endWaiting();
         });
     }
 };
@@ -617,6 +629,7 @@ function ajaxPopoverInit()
     $("body").on("click", "div.popover .fermer", function (e)
     { // Tout élément cliqué qui contient la classe .fermer ferme le popover
         div = $(e.target).parents('div.popover');
+        if (div.hasClass('popajax-div')) return;
         div.data('a').popover('hide');
     });
 
@@ -624,6 +637,7 @@ function ajaxPopoverInit()
     {
         var form = $(e.target);
         var div = $(e.target).parents('div.popover');
+        if (div.hasClass('popajax-div')) return;
         $.post(
             form.attr('action'),
             form.serialize(),
@@ -786,3 +800,390 @@ $(function ()
 {
     WidgetInitializer.add('tab-ajax', 'tabAjax');
 });
+
+
+
+
+/**
+ *
+ * @constructor
+ */
+$.widget("unicaen.popajax", {
+
+    popDiv: undefined,
+
+    options: {
+        url: undefined,
+        animation: true,
+        delay: 200,
+        placement: 'auto',
+        submitEvent: undefined,
+        submitClose: false,
+        submitReload: false,
+        minWidth: '100px',
+        maxWidth: '600px',
+        minHeight: '50px',
+        maxHeight: 'none',
+        loadingTitle: 'Chargement...',
+        loadingContent: '<div class="loading"></div>',
+        title: undefined
+    },
+
+
+
+    _create: function ()
+    {
+        var that = this;
+
+
+        this.element.click(function ()
+        {
+            that.showHide();
+
+            return false;
+        });
+
+        $('html').click(function (e)
+        {
+            that.htmlClick( e );
+        });
+
+        $("body").on('intranavigator-refresh', function(event, args){
+            if (that && that.popDiv && $(args.element).parents(that.popDiv).length > 0){
+                that.afterRefresh(args.isSubmit);
+            }
+        });
+
+        this.initOptions();
+        var attr = this.element.attr('href');
+        if (typeof attr !== typeof undefined && attr !== false) {
+            this.options.url = this.element.attr('href');
+        }
+    },
+
+
+
+    initOptions: function ()
+    {
+        var optionsKeys = {
+            url: 'url',
+            animation: 'animation',
+            delay: 'delay',
+            placement: 'placement',
+            submitEvent: 'submit-event',
+            submitClose: 'submit-close',
+            submitReload: 'submit-reload',
+            minWidth: 'min-width',
+            maxWidth: 'max-width',
+            minHeight: 'min-height',
+            maxHeight: 'max-height',
+            loadingTitle: 'loading-title',
+            loadingContent: 'loading-content',
+            title: 'title'
+        };
+
+        for (var k in optionsKeys) {
+            if (typeof this.element.data(optionsKeys[k]) !== 'undefined'){
+                this.options[k] = this.element.data(optionsKeys[k]);
+            }
+        }
+    },
+
+
+
+    showHide: function ()
+    {
+        if (this.shown()) {
+            this.hide();
+        } else {
+            this.show();
+        }
+        return this;
+    },
+
+
+
+    htmlClick: function( e )
+    {
+        if (!this.popDiv) return true;
+
+        p = this.popDiv[0].getBoundingClientRect();
+
+        if (e.pageX < p.left || e.pageX > p.left + p.width
+            || e.pageY < p.top || e.pageY > p.top + p.height){
+            this.hide();
+        }
+    },
+
+
+
+    shown: function ()
+    {
+        return this.popDiv != undefined;
+    },
+
+
+
+    show: function ()
+    {
+        if (this.options.animation) {
+            this.makePopDiv().fadeIn(this.options.delay);
+        } else {
+            this.makePopDiv().show();
+        }
+
+        this.posPop();
+
+        this._trigger('show', null, this);
+
+        return this;
+    },
+
+
+
+    hide: function ()
+    {
+        if (this.popDiv) {
+            if (this.options.animation) {
+                this.popDiv.fadeOut(this.options.delay, function () { $(this).remove(); });
+            } else {
+                this.popDiv.hide();
+                this.popDiv.remove();
+            }
+
+            this.popDiv = undefined;
+        }
+
+        this._trigger('hide', null, this);
+
+        return this;
+    },
+
+
+
+    afterRefresh: function( isSubmit )
+    {
+        this.extractTitle(); // on rafraichit le titre, éventuellement
+        if (isSubmit && !this.errorsInContent()){
+            if (this.options.submitEvent){
+                $("body").trigger(this.options.submitEvent, this);
+                this.posPop();
+            }
+            if (this.options.submitClose){
+                this.hide();
+            }
+            if (this.options.submitReload){
+                window.location.reload();
+            }
+
+            this._trigger('submit', null, this);
+        }else{
+            this.posPop();
+        }
+        this._trigger('change', null, this);
+    },
+
+
+
+    errorsInContent: function()
+    {
+        var that = this;
+
+        if (!this.popDiv) return false;
+
+        var errs = this.popDiv.find('.popover-content')
+                       .find('.input-error, .has-error, .has-errors, .alert.alert-danger').length;
+
+        return errs > 0;
+    },
+
+
+
+    makePopDiv: function ()
+    {
+        var that = this;
+
+        if (undefined == this.popDiv) {
+            this.popDiv = $('<div></div>');
+            this.popDiv.addClass('popover popajax-div');
+            this.popDiv.css({
+                'min-width': this.options.minWidth,
+                'max-width': this.options.maxWidth,
+                'min-height': this.options.minHeight,
+                'max-height': this.options.maxHeight,
+                'position': 'absolute',
+                'left': '-80000px',
+                'top': '-80000px'
+            });
+
+            var content = '<div class="arrow"></div>';
+            if (this.options.loadingTitle) {
+                content += '<h3 class="popover-title">' + this.options.loadingTitle + '</h3>';
+            }
+            content += '<div class="popover-content intranavigator">' + this.options.loadingContent + '</div>';
+
+            this.popDiv.html(content);
+            this.popDiv.appendTo("body");
+            IntraNavigator.run(); // navigateur interne!!
+
+            $.get( this.options.url )
+                .done(function( res) {
+                    that.populate( res );
+                })
+                .fail(function( err) {
+                    msg = '<div class="alert alert-danger">Erreur '+err.status+' : '+ err.statusText+'</div>';
+
+                    that.populate( msg + "\n" + err.responseText );
+                });
+
+            this.element.find('.popover-content').load(this.options.url, function(){
+                that.posPop();
+            });
+        }
+
+        return this.popDiv;
+    },
+
+
+
+    populate: function( content )
+    {
+        var pc = this.popDiv.find('.popover-content');
+
+        pc.hide();
+
+        pc.html( content );
+        this._trigger('change', null, this);
+
+        this.extractTitle();
+
+        pc.show();
+
+        this.posPop();
+    },
+
+
+
+    extractTitle: function()
+    {
+        var pc = this.popDiv.find('.popover-content');
+
+        var title = pc.find('h1,.popover-title,.page-header');
+
+        if (title.length > 0){
+            this.popDiv.find('.popover-title').html(title.html()).show();
+            title.remove();
+        }else if(this.options.title){
+            this.popDiv.find('.popover-title').html(this.options.title).show();
+        }else{
+            this.popDiv.find('.popover-title').hide();
+        }
+    },
+
+
+
+    posPop: function ()
+    {
+        if (!this.popDiv) return;
+
+        /* Position de l'élément qui ouvre le popover */
+        var aPos = this.element[0].getBoundingClientRect();
+
+        /* Espace d'affichage */
+        var doc = {
+            left: 0,
+            top: 0,
+            width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
+            height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+        };
+
+        /* position du popover */
+        var pop = {
+            left: 0,
+            top: 0,
+            width: this.popDiv.width(),
+            height: this.popDiv.height()
+        };
+
+        var placement = this.options.placement;
+
+        if (placement == 'auto'){
+            if (aPos.right + pop.width <= doc.width - 2) placement = 'right';
+            if ((aPos.left - pop.width >= 2) && (aPos.left+(aPos.width/2) < (doc.width/2))) placement = 'left';
+            if (aPos.top - pop.height >= 2) placement = 'top';
+            if ((aPos.bottom + pop.height <= doc.height - 2) && (aPos.top+(aPos.height/2) < (doc.height/2))) placement = 'bottom';
+        }
+
+        this.popDiv.removeClass('bottom');
+        this.popDiv.removeClass('top');
+        this.popDiv.removeClass('left');
+        this.popDiv.removeClass('right');
+        this.popDiv.addClass(placement);
+        switch (placement) {
+            case 'bottom':
+                pop.left = aPos.left + (aPos.width/2) - (pop.width/2);
+                pop.top = aPos.bottom;
+                break;
+            case 'top':
+                pop.left = aPos.left + (aPos.width/2) - (pop.width/2);
+                pop.top = aPos.top - pop.height;
+                break;
+            case 'left':
+                pop.left = aPos.left - pop.width;
+                pop.top = aPos.top + (aPos.height/2) - (pop.height/2);
+                break;
+            case 'right':
+                pop.left = aPos.right;
+                pop.top = aPos.top + (aPos.height/2) - (pop.height/2);
+                break;
+        }
+
+        if (pop.left + pop.width > doc.width -2) pop.left = doc.width -2 - pop.width;
+        if (pop.top + pop.height > doc.height -2) pop.top = doc.height -2 - pop.height;
+
+        if (pop.left < 2) pop.left = 2;
+        if (pop.top < 2) pop.top = 2;
+
+        this.popDiv.css({left: pop.left, top: pop.top});
+
+        switch (placement) {
+            case 'bottom':
+            case 'top':
+                var l = pop.left > aPos.left ? pop.left : aPos.left;
+                var r = (pop.left+pop.width) < (aPos.right) ? (pop.left+pop.width) : aPos.right;
+
+                var pos = ((r - l) / 2) + l - pop.left;
+                if (pos < 20) pos = 20;
+                if (pos > (pop.width-20)) pos = pop.width-20;
+
+                this.popDiv.find('.arrow').css({left: pos});
+                break;
+            case 'left':
+            case 'right':
+                var t = pop.top > aPos.top ? pop.top : aPos.top;
+                var h = (pop.top+pop.height) < aPos.bottom ? (pop.top+pop.height) : aPos.bottom;
+
+                var pos = ((h - t) / 2) + t - pop.top;
+                if (pos < 20) pos = 20;
+                if (pos > (pop.height-20)) pos = pop.height-20;
+
+                this.popDiv.find('.arrow').css({top: pos});
+                break;
+        }
+        return this;
+    },
+
+
+
+    getContent: function()
+    {
+        if (!this.popDiv) return undefined;
+        return this.popDiv.find('.popover-content');
+    }
+
+});
+
+$(function ()
+{
+    WidgetInitializer.add('popajax', 'popajax');
+});
\ No newline at end of file