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
-
#bottom ⇒ Number
Returns the bottom position of the element.
-
#client_rect ⇒ Hash
private
Gets the bounding client rect of element.
-
#cover?(pos) ⇒ Boolean
Returns whether or not the element covers the given position.
-
#height ⇒ Number
Returns the height of the element.
-
#left ⇒ Number
Returns the left position of the element.
-
#right ⇒ Number
Returns the right position of the element.
-
#top ⇒ Number
Returns the top position of the element.
-
#visible? ⇒ Boolean
Returns if the element is visible or not.
-
#width ⇒ Number
Returns the width of the element.
Instance Method Details
#bottom ⇒ Number
Returns the bottom position of the element
33 34 35 |
# File 'opal/fron/dom/modules/dimensions.rb', line 33 def bottom `#{client_rect}.bottom` + Window.scroll_y end |
#client_rect ⇒ Hash (private)
Gets the bounding client rect of element.
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
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 |
#height ⇒ Number
Returns the height of the element
47 48 49 |
# File 'opal/fron/dom/modules/dimensions.rb', line 47 def height `#{client_rect}.height` end |
#left ⇒ Number
Returns the left position of the element
19 20 21 |
# File 'opal/fron/dom/modules/dimensions.rb', line 19 def left `#{client_rect}.left` + Window.scroll_x end |
#right ⇒ Number
Returns the right position of the element
26 27 28 |
# File 'opal/fron/dom/modules/dimensions.rb', line 26 def right `#{client_rect}.right` + Window.scroll_x end |
#top ⇒ Number
Returns the top position of the element
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
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 |
#width ⇒ Number
Returns the width of the element
40 41 42 |
# File 'opal/fron/dom/modules/dimensions.rb', line 40 def width `#{client_rect}.width` end |