Class DeviceRotationPrompt

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

Constructors

constructor

Properties

config checkOrientationFn

Accessors

animationStyle deviceSvg finalAngle imageSize initialAngle isImageHidden isTextHidden svgStyle textSize zIndexRule

Methods

canInitialize destroy generateHtml generateStyles checkOrientation isDesiredOrientation isMobile

Constructors

constructor

Properties

Protected Readonlyconfig

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

  • OptionalanimationDirection?: AnimationDirection

    Direction of image animation

    Default

    'clockwise'
  • OptionalanimationDisable?: boolean

    Enable/disable image animation

    Default

    false
  • OptionalbackgroundColor?: string

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

    Default

    '#000000'
  • OptionalcontainerId?: string

    Id of whole container prompt

    Default

    'promptContainer'
  • OptionalhideImage?: boolean

    Hide/show image

    Default

    false
  • OptionalhideText?: boolean

    Hide/show description text

    Default

    false
  • OptionalimageColor?: string

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

    Default

    '#ffffff'
  • OptionalimageId?: string

    Id of svg image

    Default

    'promptImage'
  • OptionalimageSize?: string

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

    Default

    '60vh' for portrait '30vh' for landscape
  • OptionalimageStyle?: ImageStyle

    Phone style

    Default

    'circle'
  • OptionalmobileDetect?: boolean

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

    Default

    false
  • Optionalorientation?: DeviceOrientation

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

    Default

    'landscape'
  • OptionalstyleId?: string

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

    Default

    'promptStyle'
  • Optionaltext?: string

    Description text to show

    Default

    'Please rotate your device'
  • OptionaltextColor?: string

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

    Default

    '#ffffff'
  • OptionaltextFont?: string

    Font of description text

    Default

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

    Id of container with description text

    Default

    'promptText'
  • OptionaltextSize?: string

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

    Default

    '10vh' for portrait '5vh' for landscape
  • OptionalzIndex?: number

    z-index of whole prompt

    Default

    undefined

Protected ReadonlycheckOrientationFn

checkOrientationFn: () => void = ...

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

Type declaration

    • (): void
    • Protected

      Method to show/hide whole prompt

      Returns void

Accessors

ProtectedanimationStyle

ProtecteddeviceSvg

ProtectedfinalAngle

ProtectedimageSize

  • get imageSize(): string
  • Protected

    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

ProtectedinitialAngle

  • get initialAngle(): number
  • Protected

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

    Returns number

ProtectedisImageHidden

  • get isImageHidden(): string
  • Protected

    Return display CSS property based on hideImage property

    Returns string

ProtectedisTextHidden

ProtectedsvgStyle

ProtectedtextSize

  • get textSize(): string
  • Protected

    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

ProtectedzIndexRule

  • get zIndexRule(): string
  • Protected

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

    Returns string

Methods

ProtectedcanInitialize

  • canInitialize(): boolean
  • Protected

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

    Returns boolean

destroy

  • destroy(): void

  • 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

ProtectedgenerateHtml

  • generateHtml(): void
  • Protected

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

    Returns void

ProtectedgenerateStyles

ProtectedcheckOrientation

ProtectedisDesiredOrientation

  • isDesiredOrientation(): boolean
  • Protected

    Method to find if current orientation is desired one

    Returns boolean

    true if orientation is same as you desire, false otherwise

ProtectedisMobile

Settings

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods