Class: DOM::Element

Inherits:
NODE show all
Includes:
ClassList, Dimensions
Defined in:
opal/fron/dom/element.rb

Overview

TODO:

Describe the element creation ways here

Element

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 Dimensions

#bottom, #clientRect, #cover?, #height, #left, #right, #scrollLeft, #scrollTop, #top, #width

Methods included from ClassList

#addClass, #hasClass, #removeClass, #toggleClass

Methods inherited from NODE

#<<, #<=>, #==, #>>, #children, #dup, #dup!, #empty, #empty?, fromNode, getElement, #index, #insertBefore, #normalize!, #parent, #parentNode, #remove, #remove!, #text, #text=

Methods included from Events

#addListener, #delegate, #off, #on, #on!, #removeListeners, #trigger

Constructor Details

#initialize(data) ⇒ Element

Initializes a new elment based on the data


23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
# File 'opal/fron/dom/element.rb', line 23

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 = rest.gsub ATTRIBUTE_REGEXP do |match|
      key, value = match.match(ATTRIBUTE_REGEXP).to_a[1..2]
      self[key] = value
      ''
    end
    rest = rest.gsub MODIFIER_REGEXP do |match|
      type, value = match.match(MODIFIER_REGEXP).to_a[1..2]
      case type
      when '#'
        self['id'] = value
      when '.'
        addClass value
      end
      ''
    end
    if (match = rest.match(/\s(.+)$/))
      self.text = match[0].strip
    end
  else
    super data
  end
  @style = Style.new @el
end

Instance Attribute Details

#styleObject (readonly)

Returns the value of attribute style


9
10
11
# File 'opal/fron/dom/element.rb', line 9

def style
  @style
end

Instance Method Details

#[](name) ⇒ String

Returns the value of the attribute with the given name


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

def [](name)
  `#{@el}.getAttribute(#{name})`
end

#[]=(name, value) ⇒ type

Sets the value of the attribute with the given name with the given value


94
95
96
# File 'opal/fron/dom/element.rb', line 94

def []=(name, value)
  `#{@el}.setAttribute(#{name},#{value})`
end

#attribute?(name) ⇒ Boolean

Returns if the element has the given attribute


203
204
205
# File 'opal/fron/dom/element.rb', line 203

def attribute?(name)
  `#{@el}.hasAttribute(#{name})`
end

#checkedBoolean

Returns the elements checked state


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

def checked
  `!!#{@el}.checked`
end

#checked=(value) ⇒ Object

Sets the elements checked state


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

def checked=(value)
  `#{@el}.checked = #{value}`
end

#disabledString

Returns the disabled innerHTML


153
154
155
# File 'opal/fron/dom/element.rb', line 153

def disabled
  `#{@el}.disabled`
end

#disabled=(value) ⇒ Object

Sets the elements disabled state


160
161
162
# File 'opal/fron/dom/element.rb', line 160

def disabled=(value)
  `#{@el}.disabled = #{value}`
end

#filesArray

Return the files of the element


172
173
174
# File 'opal/fron/dom/element.rb', line 172

def files
  Native `#{@el}.files`
end

#find(selector) ⇒ DOM::Element

Returns the element matching the given selector or nil


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

def find(selector)
  value = `#{@el}.querySelector(#{selector}) || false`
  value ? DOM::Element.fromNode(value) : nil
end

#findAll(selector) ⇒ NodeList

Finds all of the elements matching the selector.


219
220
221
# File 'opal/fron/dom/element.rb', line 219

def findAll(selector)
  DOM::NodeList.new `Array.prototype.slice.call(#{@el}.querySelectorAll(#{selector}))`
end

#focusObject

Focuses the element


165
166
167
# File 'opal/fron/dom/element.rb', line 165

def focus
  `#{@el}.focus()`
end

#hideObject

Hides the element


70
71
72
# File 'opal/fron/dom/element.rb', line 70

def hide
  @style.display = 'none'
end

#htmlString

Returns the elements innerHTML


111
112
113
# File 'opal/fron/dom/element.rb', line 111

def html
  `#{@el}.innerHTML`
end

#html=(value) ⇒ Object

Sets the elements innerHTML


118
119
120
# File 'opal/fron/dom/element.rb', line 118

def html=(value)
  `#{@el}.innerHTML = #{value}`
end

#idString

Returns the id of the element


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

def id
  self['id']
end

#matches(selector) ⇒ Boolean

Returns whether or not the element matches the given selector


57
58
59
60
61
62
63
64
65
66
67
# File 'opal/fron/dom/element.rb', line 57

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


193
194
195
196
# File 'opal/fron/dom/element.rb', line 193

def next
  value = `#{@el}.nextElementSibling || false`
  value ? DOM::Element.fromNode(value) : nil
end

#removeAttribute(name) ⇒ Object

Removes the given attribute


210
211
212
# File 'opal/fron/dom/element.rb', line 210

def removeAttribute(name)
  `#{@el}.removeAttribute(#{name})`
end

#showObject

Shows the element


75
76
77
# File 'opal/fron/dom/element.rb', line 75

def show
  @style.display = 'block'
end

#tagString

Returns the lowercased tag name of the lement


179
180
181
# File 'opal/fron/dom/element.rb', line 179

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

#valueString

Returns the elements value


125
126
127
# File 'opal/fron/dom/element.rb', line 125

def value
  `#{@el}.value`
end

#value=(value) ⇒ Object

Sets the elements value


132
133
134
# File 'opal/fron/dom/element.rb', line 132

def value=(value)
  `#{@el}.value = #{value}`
end

#visible?Boolean

Returns if the element is visible or not


226
227
228
# File 'opal/fron/dom/element.rb', line 226

def visible?
  @style.display != 'none'
end