@nonoll/code-snippet

Class: VisibilityChangeObserver

VisibilityChangeObserver

new VisibilityChangeObserver()

browser 의 visibility 변화를 감지

Source:
See:
Throws:

browser 에서 지원하지 못하는 경우 - throw new Error('VisibilityChange 지원되지 않는 브라우저입니다.');

Type
Error
Example
import { VisibilityChangeObserver, VISIBILITY_EVENTS } from '@nonoll/code-snippet/observer';

const createElement = ({ tag = 'div', id = '', style = '', value = '', text = '' }) => {
  const doc = window.document;
  const target = doc.createElement(tag);
  target.setAttribute('id', id);
  target.setAttribute('style', style);
  target.setAttribute('value', value);
  if (text) {
    target.textContent = text;
  }
  return target;
}

let observer;

const forExample = () => {
  if (observer) {
    console.log('already example');
    return;
  }

  const doc = window.document;

  observer = new VisibilityChangeObserver();

  observer.on(VISIBILITY_EVENTS.CHANGE, ({ isHidden, isShow }) => {
    console.log('change', isHidden, isShow);
  });

  observer.attach();
  observer.emit(VISIBILITY_EVENTS.GET_STATUS);

  const statusButton = createElement({ tag: 'button', text: 'status' });
  const openButton = createElement({ tag: 'button', text: 'window open' });

  doc.body.appendChild(statusButton);
  doc.body.appendChild(openButton);

  statusButton.addEventListener('click', e => {
    e.preventDefault();
    console.log('statusButton clicked');
    if (!observer) {
      return;
    }
    // observer.emit(VISIBILITY_EVENTS.GET_STATUS);
    const { isHidden, isShow } = observer.getStatus();
    console.log('getStatus', isHidden, isShow);
  });

  openButton.addEventListener('click', e => {
    e.preventDefault();
    console.log('openButton clicked');
    if (!observer) {
      return;
    }
    const browser = window.open('https://nonoll.github.io/code-snippet/');
    if (!browser) {
      console.error('팝업이 차단되어 있습니다.');
    }
  });
}

forExample();

Extends

Members

<static, constant> HIDDEN_METHOD_NAME :String

browser 상의 visibility hidden 시점의 event 명

Type:
  • String
Source:

<static, constant> VENDOR_PREFIX :String

getVendorPrefix 의 값

Type:
  • String
Source:

<static, constant> VISIBILITY_EVENT_NAME :String

browser 상의 visibilitychange event 명

Type:
  • String
Source:

Methods

<static> getVendorPrefix()

실행된 browser 기준으로, visibilityChange event 에 맞는 vendorPrefix 반환

Source:
Returns:
Type
String

<static> hiddenMethodName()

visibility hidden event 명 반환

Source:
Returns:
Type
String

<static> isSupport()

visibility change 지원 여부 반환

Source:
Returns:
Type
boolean

<static> visibilityEventName()

visibilitychange event 명 반환

Source:
Returns:
Type
String

attach()

이벤트 감지 설정

Source:
Returns:
Type
VisibilityChangeObserver

destroy()

destory

Source:
Returns:
Type
VisibilityChangeObserver

detach()

이벤트 감지 해제

Source:
Returns:
Type
VisibilityChangeObserver

emit(eventName, values)

이벤트 전파

Parameters:
Name Type Argument Description
eventName string
values Array.<any> <repeatable>
Inherited From:
Overrides:
Source:
Returns:
Type
EventEmitter

fire(eventName, values)

이벤트 전파

Parameters:
Name Type Description
eventName string
values any
Inherited From:
Overrides:
Source:
Returns:
Type
EventEmitter

getStatus()

현재 상태를 반환

Source:
Returns:
Type
IVisibilityStatus

off(eventName [, listener])

이벤트 감지 해제

Parameters:
Name Type Argument Description
eventName string
listener TypeVoidFunction <optional>
Inherited From:
Overrides:
Source:
Returns:
Type
EventEmitter

on(eventName [, listener] [, context])

이벤트 감지 등록

Parameters:
Name Type Argument Default Description
eventName string
listener TypeVoidFunction <optional>
 noop
context * <optional>
Inherited From:
Overrides:
Source:
Returns:
Type
EventEmitter

once(eventName [, listener] [, context])

이벤트 1회 감지 등록

Parameters:
Name Type Argument Default Description
eventName string
listener TypeVoidFunction <optional>
 noop
context * <optional>
Inherited From:
Overrides:
Source:
Returns:
Type
EventEmitter

Events

VISIBILITY_EVENTS

VisibilityChange Event Types

Properties:
Name Type Description
CHANGE String

변경 시점
GET_STATUS String

현재 상태값 체크
Source: