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

Parameters:

  • data (*)

    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

Parameters:

  • name (String)

    The name of the attribute

Returns:


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

Parameters:

Returns:

  • (type)
    description

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

Parameters:

  • name (String)

    The attribute

Returns:

  • (Boolean)

    True / False


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

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

#checkedBoolean

Returns the elements checked state

Returns:

  • (Boolean)

    True if checked false if not


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

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

#checked=(value) ⇒ Object

Sets the elements checked state

Parameters:

  • value (Boolean)

    The state


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

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

#disabledString

Returns the disabled innerHTML

Returns:

  • (String)

    True if disabled false if not


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

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

#disabled=(value) ⇒ Object

Sets the elements disabled state

Parameters:

  • value (Boolean)

    The 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

Returns:

  • (Array)

    The files


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

Parameters:

  • selector (String)

    The selector

Returns:


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.

Parameters:

  • selector (String)

    The selector

Returns:


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

Returns:


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

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

#html=(value) ⇒ Object

Sets the elements innerHTML

Parameters:


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

Returns:


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

Parameters:

  • selector (String)

    The selector

Returns:

  • (Boolean)

    True if matches false if not


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

Returns:


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

Parameters:

  • name (String)

    The attributes name


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

Returns:


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

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

#valueString

Returns the elements value

Returns:


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

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

#value=(value) ⇒ Object

Sets the elements value

Parameters:

  • value (String)

    The 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

Returns:

  • (Boolean)

    True if visible, false if not


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

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