Class: DOM::Element
- Extended by:
- ElementAccessor
- Includes:
- Attributes, ClassList, Dimensions
- Defined in:
- opal/fron/dom/element.rb
Overview
Element
TODO: Describe the element creation ways here
Direct Known Subclasses
Constant Summary collapse
- ATTRIBUTE_REGEXP =
Attribute regexp
/\[(.*?)=(.*?)\]/
- TAG_REGEXP =
Tag regexp
/(^[A-Za-z_\-0-9]+)(.*)/
- MODIFIER_REGEXP =
Modifier regexp
/(#|\.)(.+?)(?=#|\.| |$)/
Instance Attribute Summary collapse
-
#style ⇒ Style
readonly
The style object.
Attributes included from Events
Instance Method Summary collapse
- #active? ⇒ Boolean
-
#apply_attributes(string) ⇒ String
private
Applies attributes from the given string.
-
#apply_modifiers(string) ⇒ String
private
Applies modifiers from the given string.
-
#click ⇒ Nil
Calls the click function on the element, this is needed for file inputs to programatically open the file browser.
-
#files ⇒ Array
Return the files of the element.
-
#find(selector) ⇒ DOM::Element
Returns the element matching the given selector or nil.
-
#find_all(selector) ⇒ NodeList
Finds all of the elements matching the selector.
-
#hide ⇒ Object
Hides the element.
-
#id ⇒ String
Returns the id of the element.
-
#include?(other) ⇒ Boolean
Returns whether or not the given node is inside the node.
-
#initialize(data) ⇒ Element
constructor
Initializes a new elment based on the data.
-
#matches(selector) ⇒ Boolean
Returns whether or not the element matches the given selector.
-
#next ⇒ DOM::Element
Returns the next element sibling.
-
#path ⇒ String
Returns the path of the elemnt.
-
#previous ⇒ DOM::Element
Returns the previous element sibling.
- #scroll_into_view ⇒ Object
- #scroll_into_view_if_needed ⇒ Object
-
#show ⇒ Object
Shows the element.
-
#tag ⇒ String
Returns the lowercased tag name of the lement.
-
#z_index ⇒ Number
Gets the z-index of the element.
Methods included from ElementAccessor
attribute_accessor, element_accessor, element_method
Methods included from Dimensions
#bottom, #client_rect, #cover?, #height, #left, #right, #top, #visible?, #width
Methods included from ClassList
#add_class, #has_class, #remove_class, #toggle_class
Methods included from Attributes
#[], #[]=, #attribute?, #remove_attribute
Methods inherited from NODE
#<<, #<=>, #==, #>>, #children, #dup, #dup!, #empty, #empty?, from_node, get_element, #index, #insert_before, #normalize!, #parent, #parent_node, #remove, #remove!, #text, #text=
Methods included from Events
#add_listener, #delegate, #off, #old_trigger, #on, #on!, #remove_listeners, #trigger
Constructor Details
#initialize(data) ⇒ Element
Initializes a new elment based on the data
47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
# File 'opal/fron/dom/element.rb', line 47 def initialize(data) if `typeof #{data} === 'string'` tag, rest = data.match(TAG_REGEXP).to_a[1..2] @el = `document.createElement(#{tag})` `#{@el}._instance = #{self}` rest = apply_attributes rest rest = apply_modifiers rest if (match = rest.match(/\s(.+)$/)) self.text = match[0].strip end else super data end @style = Style.new @el end |
Instance Attribute Details
#style ⇒ Style (readonly)
Returns The style object.
13 14 15 |
# File 'opal/fron/dom/element.rb', line 13 def style @style end |
Instance Method Details
#active? ⇒ Boolean
131 132 133 |
# File 'opal/fron/dom/element.rb', line 131 def active? DOM::Document.active_element == self end |
#apply_attributes(string) ⇒ String (private)
Applies attributes from the given string.
202 203 204 205 206 207 208 |
# File 'opal/fron/dom/element.rb', line 202 def apply_attributes(string) string.gsub ATTRIBUTE_REGEXP do |match| key, value = match.match(ATTRIBUTE_REGEXP).to_a[1..2] self[key] = value '' end end |
#apply_modifiers(string) ⇒ String (private)
Applies modifiers from the given string.
215 216 217 218 219 220 221 222 223 224 225 226 |
# File 'opal/fron/dom/element.rb', line 215 def apply_modifiers(string) string.gsub MODIFIER_REGEXP do |match| type, value = match.match(MODIFIER_REGEXP).to_a[1..2] case type when '#' self['id'] = value when '.' add_class value end '' end end |
#click ⇒ Nil
Calls the click function on the element, this is needed for file inputs to programatically open the file browser.
183 184 185 |
# File 'opal/fron/dom/element.rb', line 183 def click `#{@el}.click() || Opal.nil` end |
#files ⇒ Array
Return the files of the element
95 96 97 |
# File 'opal/fron/dom/element.rb', line 95 def files Native `#{@el}.files` end |
#find(selector) ⇒ DOM::Element
Returns the element matching the given selector or nil
118 119 120 |
# File 'opal/fron/dom/element.rb', line 118 def find(selector) DOM::Element.from_node `#{@el}.querySelector(#{selector}) || Opal.nil` end |
#find_all(selector) ⇒ NodeList
Finds all of the elements matching the selector.
127 128 129 |
# File 'opal/fron/dom/element.rb', line 127 def find_all(selector) DOM::NodeList.new `Array.prototype.slice.call(#{@el}.querySelectorAll(#{selector}))` end |
#hide ⇒ Object
Hides the element
83 84 85 |
# File 'opal/fron/dom/element.rb', line 83 def hide @style.display = 'none' end |
#id ⇒ String
Returns the id of the element
109 110 111 |
# File 'opal/fron/dom/element.rb', line 109 def id self['id'] end |
#include?(other) ⇒ Boolean
Returns whether or not the given node is inside the node.
155 156 157 |
# File 'opal/fron/dom/element.rb', line 155 def include?(other) `#{@el}.contains(#{DOM::NODE.get_element(other)})` || other == self end |
#matches(selector) ⇒ Boolean
Returns whether or not the element matches the given selector
70 71 72 73 74 75 76 77 78 79 80 |
# File 'opal/fron/dom/element.rb', line 70 def matches(selector) %x{ var proto = Element.prototype var matches = proto.matchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector || proto.oMatchesSelector || proto.webkitMatchesSelector return matches.call(#{@el},#{selector}) } end |
#next ⇒ DOM::Element
Returns the next element sibling
138 139 140 |
# File 'opal/fron/dom/element.rb', line 138 def next DOM::Element.from_node `#{@el}.nextElementSibling || Opal.nil` end |
#path ⇒ String
Returns the path of the elemnt
162 163 164 165 166 167 168 169 170 |
# File 'opal/fron/dom/element.rb', line 162 def path element = self items = [element.tag] while element.parent items.unshift element.parent.tag element = element.parent end items.join ' ' end |
#previous ⇒ DOM::Element
Returns the previous element sibling
145 146 147 |
# File 'opal/fron/dom/element.rb', line 145 def previous DOM::Element.from_node `#{@el}.previousElementSibling || Opal.nil` end |
#scroll_into_view ⇒ Object
187 188 189 |
# File 'opal/fron/dom/element.rb', line 187 def scroll_into_view `#{@el}.scrollIntoView()` end |
#scroll_into_view_if_needed ⇒ Object
191 192 193 |
# File 'opal/fron/dom/element.rb', line 191 def scroll_into_view_if_needed `#{@el}.scrollIntoViewIfNeeded()` end |
#show ⇒ Object
Shows the element
88 89 90 |
# File 'opal/fron/dom/element.rb', line 88 def show @style.display = '' end |
#tag ⇒ String
Returns the lowercased tag name of the lement
102 103 104 |
# File 'opal/fron/dom/element.rb', line 102 def tag `#{@el}.tagName`.downcase end |
#z_index ⇒ Number
Gets the z-index of the element
175 176 177 |
# File 'opal/fron/dom/element.rb', line 175 def z_index `getComputedStyle(#{@el}).zIndex`.to_i end |