1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Lack of Interest Add a XenForo alert JavaScript function

Discussion in 'Closed Suggestions' started by cclaerhout, Oct 15, 2014.

  1. cclaerhout

    cclaerhout Well-Known Member

    The default JavaScript alert function is not really sexy, so it would be nice to have a XenForo alert function: it's easy and quick to use.

    Example:
    Code:
              function xenAlert(message){
                 var $xenAlert = $('<div id="xenAlert" class="xenOverlay"><div class="formOverlay">'+message+'</div></div>')
                   .appendTo('body').overlay({
                     top: 260,
                     mask: false,
                     closeOnClick: true,
                     load: true,
                     onClose: function(){
                       $xenAlert.remove();
                     }
                   })
               }
              
               xenAlert('This is an alert');
    
    -Edit-
    A more open one:
    Code:
        xenAlert: function(message)
         {
           if(message instanceof jQuery){
             message = message.html();
           }
           
           var $xenAlert = $('<div id="xenAlert" class="xenOverlay"><div class="formOverlay">'+message+'</div></div>')
             .appendTo('body').overlay({
               top: 260,
               mask: false,
               closeOnClick: true,
               load: true,
               onClose: function(){
                 $xenAlert.remove();
               }
             })
         }
    
     
    Last edited: Oct 15, 2014
    Kazyyk and Hoffi like this.
  2. Liam W

    Liam W Well-Known Member

    Wouldn't the alert balloon used for new alerts work just as well?
     
  3. cclaerhout

    cclaerhout Well-Known Member

    It's not really the same purpose. But I've just checked the source and XenForo has already an alert system: XenForo.alert('message'). It would still be convenient to be able to set the 2nd parameter on "false" so there's no heading.
     
    AndyB likes this.
  4. cclaerhout

    cclaerhout Well-Known Member

    After a few tests of layouts, the easiest would be another parameter to add an extra class to the overlay container, so the heading can be customized by css. For example, the red color background doesn't suite for an "information" message.

    It would be also a nice thing that the function can received a jQuery object (like the second example of the first thread - it will come from the template) that will be used to get its html content and a "data-title" to customize the heading title without manipulating any JS code. The extra class could be also manage like this to avoid to have a 5th param.

    Here's what I'm personally going to use:
    Code:
        alert: function(message, extraClass)
         {
           var title = '',
             extraClass = ' '+extraClass || '';
           
           if(message instanceof jQuery){
             var title = message.data('title') || '';
             if(title){
               title = '<h2 class="heading">'+title+'</h2>';
             }
    
             message = message.html();
           }
           
           var $xenAlert = $(
             '<div id="xenAlert" class="xenOverlay'+extraClass+'">'
               + '<div class="formOverlay">'+title+message+'</div>' +
             '</div>')
             .appendTo('body').overlay({
               top: 260,
               mask: false,
               closeOnClick: true,
               load: true,
               onClose: function(){
                 $xenAlert.remove();
               }
             });
         }
    
     
  5. Chris D

    Chris D XenForo Developer Staff Member

    I'm a fan of both of the built in methods at the moment. Not saying it wouldn't be nice to have a third style of alert, but at the moment the two current ones are meeting my needs.

    There is:
    Code:
    XenForo.alert('This is the message', '', 10000);
    That is the info banner you get after a successful AJAX action / multi-quote.

    Also there is:
    Code:
    XenForo.stackAlert('You can use Stack Alerts to display a message, though. And with a timeout of 0, it displays until it is dismissed. And they are stackable.', 0, '');
    upload_2014-10-15_11-18-8.png

    I guess if there was one similar to XenForo.alert() which could render as a normal overlay without an error banner or some other customisations passed to it which is what I believe cclaerhout's code may do, then that could be useful.
     
  6. Chris D

    Chris D XenForo Developer Staff Member

    Code:
    XenForo.alert('Some sort of message', 'Some sort of title', false)
    upload_2014-10-15_11-24-49.png

    It's close; but it still looks like an error which may not always be the desired effect.
     
  7. Chris D

    Chris D XenForo Developer Staff Member

    Messy, but you could style it to suit in your included CSS templates. Might be tricky in case another overlay needs to open and it is actually an error that is required. This is where passing an extra class would be incredibly useful. I think it's a good idea.

    Code:
    XenForo.alert('Some sort of message', '<style>h2.heading { background: #176093!important; }</style> For info', false)
    upload_2014-10-15_11-30-58.png
     
    cclaerhout likes this.
  8. cclaerhout

    cclaerhout Well-Known Member

    No need a third alert, actually adding a custom class would be more than enough (although a management from a direct Jquery object would make coding easier too). I'm just going to use at the moment the tiny alert script on one personal script at the moment, because it's easier than overriding the default one (and cleaner than using the workaround you gave above ^^).

    alert.png
     
  9. rellect

    rellect Well-Known Member

    XenForo.alert returns the jQuery object that holds the overlay.
    Once you understand that, it's very easy to customize the overlay.

    For adding a class
    HTML:
    XenForo.alert('Few words...', 'Title').addClass('greenOverlay');
    For non-heading overlay
    HTML:
    XenForo.alert('Few words...', 'Title').find('h2.heading').remove();
     
    cclaerhout and Chris D like this.

Share This Page