Hide #liveblog-messages after some time

[danielbachhuber]

To make the Liveblog user experience better, it would be useful to hide #liveblog-messages after sometime.

To avoid DOM moving around, the message might better fit within the editor somewhere with persistent height.

[danielbachhuber]

Here's what I'm doing for the interim

(function( $ ){

    if ( typeof liveblog === 'undefined' ) {
        return;
    }

    $(document).ready(function(){

        var uploaderSuccess = liveblog.uploader.success;
        liveblog.uploader.success = function( upload ) {
            uploaderSuccess( upload );

            // See https://github.com/Automattic/liveblog/issues/174
            setTimeout( function(){
                $('#liveblog-messages').fadeOut(400, function(){
                    $(this).text('');
                });
            }, 1500 );
        };

    });

}(jQuery));

[annatly2]

Hi, I’m very new to contributing, but I’d like to add to this! From what I’m reading, you’re saying that the user experience would be better if liveblog messages were hidden after some time? Do you mean like during an inactive session or inactivity after some time? Please correct me if I’m wrong.

I liked what you had shared, and I made some edits. With this, if the user’s mouse cursor is not moving after 5 seconds, then the liveblog messages should fade out. The messages will fade back in when the user’s mouse moves. Would something like this be helpful?

    if ( typeof liveblog === 'undefined' ) {
        return;
    }
    var timeDelay = 1;

    function checkDelay(){
      if (timeDelay == 5){
        $("#liveblog-messages").fadeOut();
        timeDelay = 1;
      }
      timeDelay++;
    }

    $(document).mousemove(function(){

        var uploaderSuccess = liveblog.uploader.success;
        liveblog.uploader.success = function( upload ) {
            uploaderSuccess( upload );

          $("#liveblog-messages").fadeIn();
          timeDelay = 1;
          clearInterval(delay);
          delay = setInterval(checkDelay, 500);
        };
    });
    delay = setInterval(checkDelay, 500);
}(jQuery)); 

[sboisvert]

Hi @annatly2!

Thanks for the code! I seem to be having trouble getting it to work.

To reproduce the issue I uploaded an image inside a liveblog post (it seems the only way is to drag and drop an image inside the text area). And got: With the highlighted text being #liveblog-messages.

Without the added code you recommend this works but the message stays on screen the whole time.

I tried to run your script but got a recursion error (after adding (function ($) { before the first line). Reading the code I'm having a bit of a hard time understanding how it should be working.

I liked what you had shared, and I made some edits. With this, if the user’s mouse cursor is not moving after 5 seconds, then the liveblog messages should fade out. The messages will fade back in when the user’s mouse moves.

If I understand correctly, the way the code is working is not exactly like that. I think what it's doing is that whenever the mouse moves replace the current function located at liveblog.uploader.success with this new function (that calls the old function). This new function would then run CheckDelay every 500 ms. Check delay would look at the TimeDelay variable and if it's greater then 5 it hides the message. and resets time delay to 1. I think a few things that are unexpected are happening. For example when we move the mouse, what happens is that the current liveblog.uploader.success get replaced with a new function. this is then repeated every time the mouse moves, which each function being a new one that calls the old one that calls the old one and so on and so forth, creating a very big loop of functions. All of those functions (except the original) would be fading in #liveblog-messages and starting an interval for checkDelay(). Also from what I can see, checkDelay has no way of stopping itself after it's started. I'm also not entirely sure how the Javascript scoping would impact the delay variable, it might be worth looking into if delay is a "new" variable each time or if it's using the one from the "main" function (The part I'm not clear on is if the fact that it's used first inside the mousemove callback first and then in the main function changes it's visibility.) As an aside, I think that the code would be doing it every 2.5s instead of the expected 5 since it's doing 5 loops of 500ms :).

Were you able to replicate the initial issue? I don't see a problem with @danielbachhuber's code. I think it's a good idea and I don't see a problem with the code, that being said I'd personally think 1.5s is a bit too short, but I'm really not a UX expert so 1.5 might be the right number.

Thanks for the patch! If you're interested in working on the code for the functionality you expected I'd be glad to help. I'm not sure it would be best for the plugin but it could be a worthwhile learning experience!

Let me know if the feedback above is useful and if you have any other questions :)

Thanks!

-Stéphane