Class: DOM::Element

Inherits:
NODE show all
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

Fron::Component

Constant Summary collapse

ATTRIBUTE_REGEXP =

Attribute regexp

/\[(.*?)=(.*?)\]/
TAG_REGEXP =

Tag regexp

/(^[A-Za-z_\-0-9]+)(.*)/
MODIFIER_REGEXP =

Modifier regexp

/(#|\.)(.+?)(?=#|\.| |$)/

Instance Attribute Summary collapse

Attributes included from Events

#listeners

Instance Method Summary collapse

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

Parameters:

  • data (*)

    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

#styleStyle (readonly)

Returns The style object.

Returns:

  • (Style)

    The style object



13
14
15
# File 'opal/fron/dom/element.rb', line 13

def style
  @style
end

Instance Method Details

#active?Boolean

Returns:

  • (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.

Parameters:

  • string (String)

    The string

Returns:

  • (String)

    The string without the attributes



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.

Parameters:

  • string (String)

    The string

Returns:

  • (String)

    The string without the modifiers



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

#clickNil

Calls the click function on the element, this is needed for file inputs to programatically open the file browser.

Returns:

  • (Nil)

    Returns nothing



183
184
185
# File 'opal/fron/dom/element.rb', line 183

def click
  `#{@el}.click() || Opal.nil`
end

#filesArray

Return the files of the element

Returns:



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

Parameters:

  • selector (String)

    The selector

Returns:



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.

Parameters:

  • selector (String)

    The selector

Returns:



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

#hideObject

Hides the element



83
84
85
# File 'opal/fron/dom/element.rb', line 83

def hide
  @style.display = 'none'
end

#idString

Returns the id of the element

Returns:



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.

Parameters:

Returns:

  • (Boolean)

    True if contains false if not



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

Parameters:

  • selector (String)

    The selector

Returns:

  • (Boolean)

    True if matches false if not



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

#nextDOM::Element

Returns the next element sibling

Returns:



138
139
140
# File 'opal/fron/dom/element.rb', line 138

def next
  DOM::Element.from_node `#{@el}.nextElementSibling || Opal.nil`
end

#pathString

Returns the path of the elemnt

Returns:



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

#previousDOM::Element

Returns the previous element sibling

Returns:



145
146
147
# File 'opal/fron/dom/element.rb', line 145

def previous
  DOM::Element.from_node `#{@el}.previousElementSibling || Opal.nil`
end

#scroll_into_viewObject



187
188
189
# File 'opal/fron/dom/element.rb', line 187

def scroll_into_view
  `#{@el}.scrollIntoView()`
end

#scroll_into_view_if_neededObject



191
192
193
# File 'opal/fron/dom/element.rb', line 191

def scroll_into_view_if_needed
  `#{@el}.scrollIntoViewIfNeeded()`
end

#showObject

Shows the element



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

def show
  @style.display = ''
end

#tagString

Returns the lowercased tag name of the lement

Returns:



102
103
104
# File 'opal/fron/dom/element.rb', line 102

def tag
  `#{@el}.tagName`.downcase
end

#z_indexNumber

Gets the z-index of the element

Returns:

  • (Number)

    The z-index



175
176
177
# File 'opal/fron/dom/element.rb', line 175

def z_index
  `getComputedStyle(#{@el}).zIndex`.to_i
end