serkanyersen / ifvisible.js Goto Github PK

version: 2.0.10

I have the current code

ifvisible.setIdleDuration(900);

    ifvisible.idle(function() {
        console.log('idle')
        document.body.style.opacity = 0.5;
    });

    ifvisible.wakeup(function() {
        console.log('wakeup')
        document.body.style.opacity = 1;
    });

    // instead of setInterval, this will not call the callback if the user is idle
    ifvisible.onEvery(5, function() {
        console.log('interval');
    });

the interval initially gets called correctly, if I switch tabs then get back to the page "wakeup" is fired however the interval doesn't resume

Would be cool to be able to bind new ifvisible instances on procedurally created windows. I.e.:

const w = window.open(...);
const wVisible = new ifvisible(w);
wVisible.on('blur', ...);

While using chrome developer tools, there is an error @ console "Failed to parse SourceMap: https://XXXX.com/ifvisible.js.map".

Source maps are working with other JS libraries but throwing the error with ifvisible

Any way to destroy all listener for ifVisible ?

If switch between tabs, any time I get "idle"
if the time has not come: I expected get "focus" not "idle"

Example of code:

ifvisible.setIdleDuration(600); // 10 min == 600 sec
ifvisible.idle(function(){
    console.log("ifvisible.idle handled");
});

When window gets or loses focus 'blur' and 'focus' event callbacks are not called.
I expect that these will be triggered
ifvisible.on('blur', () => console.log('ifvisible blur callback'))
ifvisible.on('focus', () => console.log('ifvisible focus callback'))

Standard window events are triggered as expected
window.addEventListener('blur', () => console.log('window blur'))
window.addEventListener('focus', () => console.log('window focus'))

This doesn't work on IE8.

Although ifvisible.js is really cool, and I can definitely see myself using it, If I understand things correctly it actually has nothing to do with visibility, but rather whether the user is moving the mouse over the page, or sending keyboard input to the page.

For example, I can open the demo in a browser window, keep that the browser window both visible and in front of all other windows, and even click my mouse button on the page, and it still is registered as invisible.

Perhaps a name like "ifactive.js" (or something along those lines) might be better?

(I'm sorry for my English)
I am trying to use ifVisible in angular 7 but I can't use it, can someone help me please?
What am I missing or what do I fail?

install it with npm and ifvisible,

in my package.json
"ifvisible": "1.1.0",

in my angular.json

"scripts": [
            "./node_modules/ifvisible/src/ifvisible.js"
          ],

my .ts

import {IfVisible} from "ifvisible / src / ifvisible.js";
const ifvisible = new IfVisible (window, document);

using it in a function:

 ifvisible.setIdleDuration (300);
   console.log (ifvisible);

I get this error:

TypeError: ifvisible_src_ifvisible_js__WEBPACK_IMPORTED_MODULE_6 __. IfVisible is not a constructor
TypeError: ifvisible_src_ifvisible_js__WEBPACK_IMPORTED_MODULE_6 __. IfVisible is not a constructor

HI
the demo is working well when i change Tab in a browser (chrome/firefox) but when i activate an other application, like notepad (or from firefox to chrome) there is no entry in the log? is there any way to detect that?
thanks rob

Can this be used to detect if my webpage is being used in an hidden iframe?

In your demo the idle meter does not reset if you scroll the page. Should this be counted as an "active" action?

Reproduced in Chrome Version 41.0.2272.76 (64-bit), Yosemite 10.10.2 (14C109).

That'd be great for us Browserify/Webpack users!

This module is exactly what I was looking for so thanks for creating it.

Currently when the page/tab is hidden, it is not considered as idle time. When the page is active again the idle timer resets. It would be ideal if the hidden state is considered idle time.

https://www.npmjs.com/package/ifvisible.js?activeTab=versions

Latest version is still 1.0.6

I am unable to understand how does ifvisible initialisation code works. Even if i include it in webpack entry point, i cannot find a global ifvisible object in my namespace. Any help would be really appreciated.

Hello,

I unfortunately have to support IE9 in my application, and I noticed that users get an "invalid calling object" error at the line that ifvisible.js is loaded (here's the complete JS file : https://gist.github.com/gnutix/a419b8eb9019a3cb5429e91bc39a066b , look at line 33 ).

Would you know by any chance what part of the code would trigger this and if it's an easy fix ?

Thanks for your help.
gnutix

Tested this issue by renaming the module to ifvisible and it works without a problem!

Anyone? Tried to stackoverflow too, but no solution found

http://stackoverflow.com/questions/38030846/using-javascript-library-in-angular-2/38032553?noredirect=1#comment63523559_38032553

Grunt should

• Setup watch for coffee script
• Should auto update documentation
• Should run a server for test file

Overall should automize all development operations

ifvisible is great provide time...but i need to count active time user in page, how can i do that ? thx

I need to add proper selenium tests and need to run those using travis CI. Can't run unit tests because of the nature of the library.

A page has registered the blur and focus events and is contained in an iframe. When the parent page with the iframe loses focus due to a tab switch or window minimization, the blur / focus events are respectively triggered twice.

Add support to watch for touchstart and touchend events, so this will work on mobile devices.
Should be same as keyup. ( call wakeUp )

I have encountered a situation where it would be nice to disable the idle interval checking. Is this possible?

For example, when the page becomes idle I display a warning dialog to the user. They have 30 seconds to press a button or their session expires. However, I don't want to track their idle status during those 30 seconds because I don't want the idle state to trigger the dialog to display again.

It is unlikely that my idle timeout will be less than the dialog timeout in practice. But during debugging (with much shorter times) I have noticed this issue. It would be nice to have some way to turn off the idle checking (from within the idle callback), or to at least deregister the idle callback. I can then re-enable the idle checking later when the user clicks the button to maintain their session.

Hope that makes sense.

Thanks for this awesome library btw!

For a simple website having only on('blur') etc is useful. But on a large single page app, we need to be able to safely remove events as well.

could you please add .off('blur') etc to your library as well?

After status changed from active to idle once, idle been fired incorrect.
For example, when i keep moving mouse after status changed from idle to active, idle still fired, even througn my mouse never stopped moving.

Crossbrowser not crosbrowser. If not sourced from same file, the plugin web page has the same typo. Hope this isn't nitpicky :)

Currently, the event gets fired on every user interaction such as clicking multiple times, moving mouse or resizing window.
Debounce must be applied to prevent browser from getting bogged down quickly.

I found a bug in customEvent with Angualr 2 RC.6, it replace ifvisible module (type Object) to specified wrapper (type Module) with custom getters and setters, so __ceGUID always are undefined in line
obj[cgid] = "ifvisible.object.event.identifier" unless obj[cgid]
I've replaced code to
var objCgid = obj[cgid] || "ifvisible.object.event.identifier"; in ifvisible.js file local, only for check, works fine.
I've forked this repo but can't build from coffee script.
Do you plan support this project on coffee or will move to type script ?

$(document).ready(function() {
ifvisible.setIdleDuration(30);
ifvisible.idle(function(){
var msg = 'No activity detected in the last 15 seconds.';
if (auth == "true"){
msg += "
You will be logged out in 15 seconds.";
}
alert("WTF");
Message('' + msg + '');
function showmsg() {
msg = '
You will be logged out in ' + count + ' seconds.';
document.getElementById("timer").innerHTML = msg;
count=count-1;
if (count <= 0) {
clearInterval(counter);
return;
}
}
var count=15;
var counter=setInterval(showmsg, 1000);
window.location.href = "./media.php";
});
})

The above code executes on page load and it shouldn't. It almost seems like .idle is set to true by default so it executes by default.

stop() already exists, but and pause and resume function would be awesome

Hi,

I think I found a little glitch in your awesome lib.

Tested in Chrome 46.0.2490.86 m

1. Hit 'http://serkanyersen.github.io/ifvisible.js/demo.html'
2. Open Chrome's console
3. Type 'ifvisible.idle(function() { console.log('idle') });' in the console
4. Let the application sleep by reaching 30s of inactivity
5. Wake up the application by moving the mouse into it. Move the mouse for 30s, without performing any clicks. After 30s of movement, the application will briefly change state to 'idle' and get back to 'active'. That can be verified by the callback registered in step 3, which will be invoked.

The blur/focus feature doesn't works in iOS6, any solution for this version of iOS?

ifvisible.on("blur", function(){
// example code here..
});

ifvisible.on("focus", function(){
// resume all animations
});

Here is an example thanks to @bit2pixel
https://github.com/cdnjs/cdnjs/tree/master/ajax/libs/can.js

Hello,

Very nice library. Thanks for putting it together.
My use case is for mobile devices. I want the JS fire events up on:

• Browser app close (home button press)
• Open a new tab in the browser
• Device put to sleep (sleep button press)

On iOS Safari and Android Chrome all works well. I receive correct blur events for each case.
But on Android native browser (for older devices e.g. Samsung S4 etc.) device sleep does not fire any event.

Any ideas? Suggestions?
Cheers,
Doruk

Ps. In my use case I try to detect these events and kill a socket connection manually. This is why I need the device sleep as well.

Not working with alt+tab in windows

When idle checking is on, every mouse move, keystroke, and scroll event calls wake which iterates through an array of old timers and clears them (though only effectively clearing the last timer which would be the only one ever active). This array grows unbounded with each event. An array should not be used here.

Current:

trackIdleStatus = ->
    timer = []
    wakeUp = ->
      timer.map(clearTimeout);
      ifvisible.wakeup()  if status isnt "active"
      idleStartedTime = +(new Date())
      timer.push setTimeout(->
        ifvisible.idle()  if status is "active"
      , idleTime)
...

Fix:

trackIdleStatus = ->
    timer = null # No array, just a reference to the last timeout id
    wakeUp = ->
      clearTimeout(timer); # Clear previous timeout. A noop if the timeout already ran
      ifvisible.wakeup()  if status isnt "active"
      idleStartedTime = +(new Date())
      timer = setTimeout(->
        ifvisible.idle()  if status is "active"
      , idleTime)
...

My project is ASP.NET with C# Web Form. My web page will open another web page by window.open. But I switch the new page on Google Chrome, the original web page with countdown will be trigger idle event. The idle event will run my logout mechanism and redirect to login page. How can I prevent switching web page to trigger idle event?

tested on Chrome 40.0.2214.115 m on Windows 8.1, no blur event trigger after switching to another program/window with ALT+TAB.

For some reason, the generated ifvisible.js/ifvisible.d.ts type declaration file contains the following:

declare module "ifvisible" {
    module iVisible {

Which is an invalid module name, and this the types aren't being picked up.

Edit: this is for 1.0.6 version