@nonoll/code-snippet

Class: PrefersColorSchemeObserver

PrefersColorSchemeObserver

new PrefersColorSchemeObserver()

prefers-color-scheme 상태 변화를 감지

Source:
Throws:

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

Type
Error
Example
import { PrefersColorSchemeObserver, PREFERS_COLOR_SCHEME_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;

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

  const doc = window.document;

  observer = new PrefersColorSchemeObserver();

  observer.on(PREFERS_COLOR_SCHEME_EVENTS.CHANGE, ({ isDark, isLight }) => {
    console.log("change", isDark, isLight);
  });

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

  const statusButton = createElement({ tag: "button", text: "status" });

  doc.body.appendChild(statusButton);

  statusButton.addEventListener("click", e => {
    e.preventDefault();
    console.log("statusButton clicked");
    if (!observer) {
      return;
    }
    observer.emit(PREFERS_COLOR_SCHEME_EVENTS.GET_STATUS);
  });
};

forExample();

Extends

Methods

<static> isSupport()

prefers-color-scheme 지원 여부 반환

Source:
Returns:
Type
boolean

attach()

이벤트 감지 설정

Source:
Returns:
Type
PrefersColorSchemeObserver

destroy()

destroy

Source:
Returns:
Type
PrefersColorSchemeObserver

detach()

이벤트 감지 해제

Source:
Returns:
Type
PrefersColorSchemeObserver

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
IPrefersColorSchemeStatus

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

Type Definitions

PREFERS_COLOR_SCHEME

Type:
  • String
Properties:
Name Type Description
LIGHT String
DARK String
Source:

Events

PREFERS_COLOR_SCHEME_EVENTS

PrefersColorSchemeObserverEvent Types

Properties:
Name Type Description
CHANGE String

변경 시점
GET_STATUS String

현재 상태값 체크
Source: