JS-PageVisibilityEvent/PageVisibilityEvent.js at master · DoraemonYu/JS-PageVisibilityEvent · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/*
* provide the event deal with page [hidden](deactive) or [visible](active), written by PURE JS.
* https://github.com/DoraemonYu/JS-PageVisibilityEvent
*
* MIT licenses :)
*/

/*
 #Current browser support:
  Chrome 13+
  Internet Explorer 10+
  Firefox 10+
  Opera 12.10+

 #Introduction:
  onfocusin and onfocusout are required for IE 9 and lower,
  while all others make use of onfocus and onblur,
  except for iOS, which uses onpageshow and onpagehide.

 #Example:
  var pv = new PageVisibilityEvent();   //New a Instance
  pv.SetCallback(visibilityChange);     //To Set (or Rest) a Callback
  pv.Disable();                         //To Disable
  pv.Enable();                          //To Re-Enable
  pv.GetIsAtivceNow();                  //Return current status

  function visibilityChange(isActive){
     //isActive equal TRUE  means active;
     //isActive equal FALSE means deactive;
  }
*/

/* --------------------------------------------- */
var PageVisibilityEvent = function () {

    var targetCallback  = undefined;
    var isEnable        = true;
    var currentStatus   = "visible";

    /* To Set the target callback ever time the visibility of page is change. */
    this._setCallback = function (callback) {
        targetCallback = callback;
    };

    /* Disable , then pause to fire callback  */
    this._disable = function () {
        isEnable = false;
    };

    /* Re-Enable,then continue to fire callbak  */
    this._enable = function () {
        isEnable = true;
    };

    /* Get current status, is it 'ACTIVE' now. */
    this._getIsAtivceNow = function () {
        return (currentStatus == "visible");
    };


    var hidden = "hidden";
    // Standards:
    if (hidden in document)
        document.addEventListener("visibilitychange", onchange);
    else if ((hidden = "mozHidden") in document)
        document.addEventListener("mozvisibilitychange", onchange);
    else if ((hidden = "webkitHidden") in document)
        document.addEventListener("webkitvisibilitychange", onchange);
    else if ((hidden = "msHidden") in document)
        document.addEventListener("msvisibilitychange", onchange);
    // IE 9 and lower:
    else if ("onfocusin" in document)
        document.onfocusin = document.onfocusout = onchange;
    // All others:
    else
        window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange;

    function onchange(evt) {
        var v = "visible", h = "hidden";
        var evtMap = {
            focus: v, focusin: v, pageshow: v, blur: h, focusout: h, pagehide: h
        };

        evt = evt || window.event;
        if (evt.type in evtMap)
            currentStatus = evtMap[evt.type];
        else
            currentStatus = this[hidden] ? "hidden" : "visible";

        //fire callback
        if (isEnable === true && targetCallback != null && typeof targetCallback === 'function') {
            targetCallback(currentStatus == "visible");
        }
    }

    // set the initial state (but only if browser supports the Page Visibility API)
    if (document[hidden] !== undefined) {
        onchange({ type: document[hidden] == true ? "blur" : "focus" });

        //Debug, output init status
        //console.log("init:" + currentStatus);
    }

};
/* ---------------------------------------------*/


/* ----------------Bind To Public-------------- */

/* To Set the target callback ever time the visibility of page is change. */
PageVisibilityEvent.prototype.SetCallback = function (callback) {
    var instance = this;
    instance._setCallback(callback);
};

/* Disable , then pause to fire callback  */
PageVisibilityEvent.prototype.Disable = function () {
    var instance = this;
    instance._disable();
};

/* Re-Enable,then continue to fire callbak  */
PageVisibilityEvent.prototype.Enable = function () {
    var instance = this;
    instance._enable();
};

/* Get current status, is it 'ACTIVE' now. */
PageVisibilityEvent.prototype.GetIsAtivceNow = function () {
    var instance = this;
    return instance._getIsAtivceNow();
};

/* ---------------------------------------------*/