Module: DOM::Dimensions

Included in:
Element
Defined in:
opal/fron/dom/modules/dimensions.rb

Overview

Dimensions module for returning node like elements position on the screen.

Features:

  • Accessors for top, left, right, bottom, width and height

  • Positions are compensated with scroll position

Instance Method Summary collapse

Instance Method Details

#bottomNumber

Returns the bottom position of the element

Returns:

  • (Number)

    The bottom position



33
34
35
# File 'opal/fron/dom/modules/dimensions.rb', line 33

def bottom
  `#{client_rect}.bottom` + Window.scroll_y
end

#client_rectHash (private)

Gets the bounding client rect of element.

Returns:

  • (Hash)

    The rect



88
89
90
# File 'opal/fron/dom/modules/dimensions.rb', line 88

def client_rect
  `#{@el}.getBoundingClientRect()`
end

#cover?(pos) ⇒ Boolean

Returns whether or not the element covers the given position

Parameters:

  • pos (Point)

    The point

Returns:

  • (Boolean)

    True if covers false if not



56
57
58
# File 'opal/fron/dom/modules/dimensions.rb', line 56

def cover?(pos)
  (left...(left + width)).cover?(pos.x) && (top...(top + height)).cover?(pos.y)
end

#heightNumber

Returns the height of the element

Returns:

  • (Number)

    The height



47
48
49
# File 'opal/fron/dom/modules/dimensions.rb', line 47

def height
  `#{client_rect}.height`
end

#leftNumber

Returns the left position of the element

Returns:

  • (Number)

    The left position



19
20
21
# File 'opal/fron/dom/modules/dimensions.rb', line 19

def left
  `#{client_rect}.left` + Window.scroll_x
end

#rightNumber

Returns the right position of the element

Returns:

  • (Number)

    The right position



26
27
28
# File 'opal/fron/dom/modules/dimensions.rb', line 26

def right
  `#{client_rect}.right` + Window.scroll_x
end

#topNumber

Returns the top position of the element

Returns:

  • (Number)

    The top position



12
13
14
# File 'opal/fron/dom/modules/dimensions.rb', line 12

def top
  `#{client_rect}.top` + Window.scroll_y
end

#visible?Boolean

Returns if the element is visible or not.

The element is visible if:

  • The size is 0

    • display: none

    • Element not in the dom

    • Width & Height set to 0

  • It is outside of the viewport

The following is not checked because the element is still visible in a sense because it has a width & height but it is transparent.

  • opacity: 0

  • visibility: hidden

Returns:

  • (Boolean)

    True if visible, false if not



75
76
77
78
79
80
81
# File 'opal/fron/dom/modules/dimensions.rb', line 75

def visible?
  size_visible  = width > 0 && height > 0
  vert_visible  = ((`#{client_rect}.top` + height) > 0) && `#{client_rect}.top` < `window.innerHeight`
  horiz_visible = ((`#{client_rect}.left` + width) > 0) && `#{client_rect}.left` < `window.innerWidth`

  size_visible && vert_visible && horiz_visible
end

#widthNumber

Returns the width of the element

Returns:

  • (Number)

    The width



40
41
42
# File 'opal/fron/dom/modules/dimensions.rb', line 40

def width
  `#{client_rect}.width`
end