Class DeviceRotationPrompt

Class to show device rotation fullscreen prompt, it activates immediately upon instantiation

Hierarchy

  • DeviceRotationPrompt

Constructors

constructor

Properties

checkOrientationFn config

Accessors

animationStyle deviceSvg finalAngle imageSize initialAngle isImageHidden isTextHidden svgStyle textSize zIndexRule

Methods

canInitialize checkOrientation destroy generateHtml generateStyles isDesiredOrientation isMobile

Constructors

constructor

Properties

Private Readonly checkOrientationFn

checkOrientationFn: (() => void) = ...

Type declaration

    • (): void

    • Check orientation fn reference to be able to add and also remove event listener

      Returns void

Private Readonly config

config: {
    animationDirection?: AnimationDirection;
    animationDisable?: boolean;
    backgroundColor?: string;
    containerId?: string;
    hideImage?: boolean;
    hideText?: boolean;
    imageColor?: string;
    imageId?: string;
    imageSize?: string;
    imageStyle?: ImageStyle;
    mobileDetect?: boolean;
    orientation?: DeviceOrientation;
    styleId?: string;
    text?: string;
    textColor?: string;
    textFont?: string;
    textId?: string;
    textSize?: string;
    zIndex?: number;
}

Class config

Type declaration

  • Optional animationDirection?: AnimationDirection

    Direction of image animation

    Default

    'clockwise'
  • Optional animationDisable?: boolean

    Enable/disable image animation

    Default

    false
  • Optional backgroundColor?: string

    Background color of whole prompt (all css possibilities, like hexa color '#000000', 'red'...)

    Default

    '#000000'
  • Optional containerId?: string

    Id of whole container prompt

    Default

    'promptContainer'
  • Optional hideImage?: boolean

    Hide/show image

    Default

    false
  • Optional hideText?: boolean

    Hide/show description text

    Default

    false
  • Optional imageColor?: string

    Color of device image (all css possibilities, like hexa color '#000000', 'red'...)

    Default

    '#ffffff'
  • Optional imageId?: string

    Id of svg image

    Default

    'promptImage'
  • Optional imageSize?: string

    Size of device image (all css units like px, em, rem, vh...)

    Default

    '60vh' for portrait '30vh' for landscape
  • Optional imageStyle?: ImageStyle

    Phone style

    Default

    'circle'
  • Optional mobileDetect?: boolean

    Turn on/off automatic mobile/tablet detection When automatic detection is on, then prompt is show only on mobile/tablet devices

    Default

    false
  • Optional orientation?: DeviceOrientation

    The orientation you want to force, if orientation is different, prompt is showed.

    Default

    'landscape'
  • Optional styleId?: string

    Id of style tag, where all styles of this library are defined

    Default

    'promptStyle'
  • Optional text?: string

    Description text to show

    Default

    'Please rotate your device'
  • Optional textColor?: string

    Color of description text (all css possibilities, like hexa color '#000000', 'red'...)

    Default

    '#ffffff'
  • Optional textFont?: string

    Font of description text

    Default

    '\'Arial Black\', \'Arial Bold\', Gadget, sans-serif'
  • Optional textId?: string

    Id of container with description text

    Default

    'promptText'
  • Optional textSize?: string

    Size of description text (all css units like px, em, rem, vh...)

    Default

    '10vh' for portrait '5vh' for landscape
  • Optional zIndex?: number

    z-index of whole prompt

    Default

    undefined

Accessors

Private animationStyle

Private deviceSvg

Private finalAngle

Private imageSize

  • get imageSize(): string
  • Private

    Size of image, returns size from config, or if image size is not presented in config it returns 60vh for portrait, 30vh for landscape

    Returns string

Private initialAngle

  • get initialAngle(): number
  • Private

    Initial angle of image, if animation is disabled, it returns final angle

    Returns number

Private isImageHidden

  • get isImageHidden(): string
  • Private

    Return display CSS property based on hideImage property

    Returns string

Private isTextHidden

  • get isTextHidden(): string
  • Private

    Return display CSS property based on hideText property

    Returns string

Private svgStyle

Private textSize

  • get textSize(): string
  • Private

    Size of text, returns size from config, or if text size is not presented in config it returns 10vh for portrait, 5vh for landscape

    Returns string

Private zIndexRule

  • get zIndexRule(): string
  • Private

    z-index rule for css, if zIndex property is present in config

    Returns string

Methods

Private canInitialize

  • Private

    Method to determine, if library and all functionality can be initialized

    Returns boolean

Private checkOrientation

destroy

  • Method to destroy all created html/css elements and also remove event listener for orientation detection, handy when you do not want to use library anymore

    Returns void

Private generateHtml

  • Private

    Method to generate HTML elements like main fullscreen div container, svg image and also description text

    Returns void

Private generateStyles

Private isDesiredOrientation

  • Private

    Method to find if current orientation is desired one

    Returns boolean

    true if orientation is same as you desire, false otherwise

Private isMobile

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc