Class: Browser::DOM::Element

Inherits:
Node show all
Includes:
Event::Target
Defined in:
opal/browser/effects.rb,
opal/browser/dom/element.rb,
opal/browser/dom/element/data.rb,
opal/browser/dom/element/size.rb,
opal/browser/dom/element/image.rb,
opal/browser/dom/element/input.rb,
opal/browser/dom/element/offset.rb,
opal/browser/dom/element/scroll.rb,
opal/browser/dom/element/select.rb,
opal/browser/dom/element/position.rb,
opal/browser/dom/element/template.rb,
opal/browser/dom/element/textarea.rb,
opal/browser/dom/element/attributes.rb

Defined Under Namespace

Classes: Attributes, Data, Image, Input, Offset, Position, Scroll, Select, Size, Template, Textarea

Constant Summary collapse

Img =
Image

Constants inherited from Node

Node::ATTRIBUTE_NODE, Node::CDATA_SECTION_NODE, Node::COMMENT_NODE, Node::DOCUMENT_FRAGMENT_NODE, Node::DOCUMENT_NODE, Node::DOCUMENT_TYPE_NODE, Node::ELEMENT_NODE, Node::ENTITY_NODE, Node::ENTITY_REFERENCE_NOCE, Node::NOTATION_NODE, Node::PROCESSING_INSTRUCTION_NODE, Node::TEXT_NODE

Instance Attribute Summary collapse

Attributes inherited from Node

#child, #children, #document, #element_children, #first_element_child, #inner_html, #last_element_child, #name, #namespace, #next, #next_element, #node_type, #parent, #previous, #previous_element, #value

Class Method Summary collapse

Instance Method Summary collapse

Methods included from Event::Target

#off, #on, #on!, #trigger, #trigger!

Methods inherited from Node

#<<, #==, #>>, #add_child, #add_next_sibling, #add_previous_sibling, #ancestors, #append_to, #blank?, #cdata?, #clear, #comment?, #content, #content=, #document?, #elem?, #fragment?, #parse, #path, #prepend_to, #remove, #remove_child, #replace, #text?, #traverse

Instance Attribute Details

#attribute_nodesNodeSet (readonly)

Returns the attribute nodes for the element.

Returns:

  • (NodeSet)

    the attribute nodes for the element


176
177
178
# File 'opal/browser/dom/element.rb', line 176

def attribute_nodes
  NodeSet[Native::Array.new(`#@native.attributes`, get: :item)]
end

#attributesAttributes (readonly)

Returns the attributes for the element.

Returns:


170
171
172
# File 'opal/browser/dom/element.rb', line 170

def attributes(options = {})
  Attributes.new(self, options)
end

#class_nameString (readonly)

Returns all the element class names.

Returns:

  • (String)

    all the element class names


182
# File 'opal/browser/dom/element.rb', line 182

alias_native :class_name, :className

#class_namesArray<String> (readonly)

Returns all the element class names.

Returns:

  • (Array<String>)

    all the element class names


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

def class_names
  `#@native.className`.split(/\s+/).reject(&:empty?)
end

#heightInteger

Returns the height of the element.

Returns:

  • (Integer)

    the height of the element


246
247
248
# File 'opal/browser/dom/element.rb', line 246

def height
  size.height
end

#idString?

Returns the ID of the element.

Returns:

  • (String?)

    the ID of the element


256
257
258
259
260
261
262
263
264
265
266
267
# File 'opal/browser/dom/element.rb', line 256

def id
  %x{
    var id = #@native.id;

    if (id === "") {
      return nil;
    }
    else {
      return id;
    }
  }
end

#offsetOffset

Returns the offset of the element.

Returns:

  • (Offset)

    the offset of the element


308
309
310
311
312
313
314
315
316
# File 'opal/browser/dom/element.rb', line 308

def offset(*values)
  off = Offset.new(self)

  unless values.empty?
    off.set(*values)
  end

  off
end

#positionPosition (readonly)

Returns the position of the element.

Returns:

  • (Position)

    the position of the element


324
325
326
# File 'opal/browser/dom/element.rb', line 324

def position
  Position.new(self)
end

#scrollScroll (readonly)

Returns the scrolling for the element.

Returns:

  • (Scroll)

    the scrolling for the element


330
331
332
# File 'opal/browser/dom/element.rb', line 330

def scroll
  Scroll.new(self)
end

#sizeSize (readonly)

Returns the size of the element.

Returns:

  • (Size)

    the size of the element


428
429
430
# File 'opal/browser/dom/element.rb', line 428

def size(*inc)
  Size.new(self, *inc)
end

#style!CSS::Declaration (readonly)

Returns get the computed style for the element.

Returns:

Raises:

  • (NotImplementedError)

397
398
399
# File 'opal/browser/dom/element.rb', line 397

def style!
  CSS::Declaration.new(`#{window.to_n}.getComputedStyle(#@native, null)`)
end

#widthInteger

Returns the width of the element.

Returns:

  • (Integer)

    the width of the element


434
435
436
# File 'opal/browser/dom/element.rb', line 434

def width
  size.width
end

#windowWindow (readonly)

Returns the window for the element.

Returns:

  • (Window)

    the window for the element


444
445
446
# File 'opal/browser/dom/element.rb', line 444

def window
  document.window
end

Class Method Details

.create(*args) ⇒ Object


17
18
19
# File 'opal/browser/dom/element.rb', line 17

def self.create(*args)
  $document.create_element(*args)
end

.new(node) ⇒ Object


21
22
23
24
25
26
27
28
29
30
31
32
33
# File 'opal/browser/dom/element.rb', line 21

def self.new(node)
  if self == Element
    name = `node.nodeName`.capitalize

    if Element.constants.include?(name)
      Element.const_get(name).new(node)
    else
      super
    end
  else
    super
  end
end

Instance Method Details

#/(*paths) ⇒ NodeSet

Query for children with the given XPpaths.

Parameters:

  • paths (Array<String>)

    the XPaths to look for

Returns:


79
80
81
# File 'opal/browser/dom/element.rb', line 79

def /(*paths)
  NodeSet[paths.map { |path| xpath(path) }]
end

#=~(selector) ⇒ Object

Check whether the element matches the given selector.

Parameters:

  • selector (String)

    the CSS selector

Raises:

  • (NotImplementedError)

69
70
71
# File 'opal/browser/dom/element.rb', line 69

def =~(selector)
  `#@native.matches(#{selector})`
end

#[](name, options = {}) ⇒ String? Also known as: attr, attribute, get_attribute, get

Get the attribute with the given name.

Parameters:

  • name (String)

    the attribute name

  • options (Hash) (defaults to: {})

    options for the attribute

Options Hash (options):

  • :namespace (String)

    the namespace for the attribute

Returns:


91
92
93
# File 'opal/browser/dom/element.rb', line 91

def [](name, options = {})
  attributes.get(name, options)
end

#[]=(name, value, options = {}) ⇒ Object Also known as: set, set_attribute

Set the attribute with the given name and value.

Parameters:

  • name (String)

    the attribute name

  • value (Object)

    the attribute value

  • options (Hash) (defaults to: {})

    the options for the attribute

Options Hash (options):

  • :namespace (String)

    the namespace for the attribute


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

def []=(name, value, options = {})
  attributes.set(name, value, options)
end

#add_class(*names) ⇒ self

Add class names to the element.

Parameters:

  • names (Array<String>)

    class names to add

Returns:

  • (self)

111
112
113
114
115
116
117
118
119
# File 'opal/browser/dom/element.rb', line 111

def add_class(*names)
  classes = class_names + names

  unless classes.empty?
    `#@native.className = #{classes.uniq.join ' '}`
  end

  self
end

#at(path_or_selector) ⇒ Node?

Get the first node that matches the given CSS selector or XPath.

Parameters:

  • path_or_selector (String)

    an XPath or CSS selector

Returns:


126
127
128
# File 'opal/browser/dom/element.rb', line 126

def at(path_or_selector)
  xpath(path_or_selector).first || css(path_or_selector).first
end

#at_css(*rules) ⇒ Node?

Get the first node matching the given CSS selectors.

Parameters:

  • rules (Array<String>)

    the CSS selectors to match with

Returns:


135
136
137
138
139
140
141
142
143
144
145
# File 'opal/browser/dom/element.rb', line 135

def at_css(*rules)
  result = nil

  rules.each {|rule|
    if result = css(rule).first
      break
    end
  }

  result
end

#at_xpath(*paths) ⇒ Node?

Get the first node matching the given XPath.

Parameters:

  • paths (Array<String>)

    the XPath to match with

Returns:


152
153
154
155
156
157
158
159
160
161
162
# File 'opal/browser/dom/element.rb', line 152

def at_xpath(*paths)
  result = nil

  paths.each {|path|
    if result = xpath(path).first
      break
    end
  }

  result
end

#blurObject

Blur the focus from the element.


40
41
42
# File 'opal/browser/effects.rb', line 40

def blur
  `#@native.blur()`
end

#css(selector) ⇒ NodeSet

Query for children matching the given CSS selector.

Parameters:

  • selector (String)

    the CSS selector

Returns:

Raises:

  • (NotImplementedError)

208
209
210
211
212
# File 'opal/browser/dom/element.rb', line 208

def css(path)
  NodeSet[Native::Array.new(`#@native.querySelectorAll(path)`)]
rescue
  NodeSet[]
end

#dataData #data(hash) ⇒ self

Overloads:

  • #dataData

    Return the data for the element.

    Returns:

  • #data(hash) ⇒ self

    Set data on the element.

    Parameters:

    • hash (Hash)

      the data to set

    Returns:

    • (self)

226
227
228
229
230
231
232
233
234
235
236
237
238
# File 'opal/browser/dom/element.rb', line 226

def data(value = nil)
  data = Data.new(self)

  return data unless value

  if Hash === value
    data.assign(value)
  else
    raise ArgumentError, 'unknown data type'
  end

  self
end

#focusObject

Set the focus on the element.


35
36
37
# File 'opal/browser/effects.rb', line 35

def focus
  `#@native.focus()`
end

#focused?Boolean

Check if the element is focused.

Returns:

  • (Boolean)

45
46
47
# File 'opal/browser/effects.rb', line 45

def focused?
  `#@native.hasFocus`
end

#hideObject

Hide the element.


20
21
22
# File 'opal/browser/effects.rb', line 20

def hide
  style[:display] = :none
end

#inner_dom(&block) ⇒ Object

Set the inner DOM of the element using the Builder.


274
275
276
277
278
279
280
281
# File 'opal/browser/dom/element.rb', line 274

def inner_dom(&block)
  clear

  # FIXME: when block passing is fixed
  doc = document

  self << Builder.new(doc, self, &block).to_a
end

#inner_dom=(node) ⇒ Object

Set the inner DOM with the given node.

(see #append_child)


286
287
288
289
290
# File 'opal/browser/dom/element.rb', line 286

def inner_dom=(node)
  clear

  self << node
end

#inspectObject


292
293
294
295
296
297
298
299
300
301
302
303
304
# File 'opal/browser/dom/element.rb', line 292

def inspect
  inspect = name.downcase

  if id
    inspect += '.' + id + '!'
  end

  unless class_names.empty?
    inspect += '.' + class_names.join('.')
  end

  "#<DOM::Element: #{inspect}>"
end

#remove_attribute(name) ⇒ Object

Remove an attribute from the element.

Parameters:

  • name (String)

    the attribute name


405
406
407
# File 'opal/browser/dom/element.rb', line 405

def remove_attribute(name)
  `#@native.removeAttribute(name)`
end

#remove_class(*names) ⇒ self

Remove class names from the element.

Parameters:

  • names (Array<String>)

    class names to remove

Returns:

  • (self)

414
415
416
417
418
419
420
421
422
423
424
# File 'opal/browser/dom/element.rb', line 414

def remove_class(*names)
  classes = class_names - names

  if classes.empty?
    `#@native.removeAttribute('class')`
  else
    `#@native.className = #{classes.join ' '}`
  end

  self
end

#search(*selectors) ⇒ NodeSet

Search for all the children matching the given XPaths or CSS selectors.

Parameters:

  • selectors (Array<String>)

    mixed list of XPaths and CSS selectors

Returns:


339
340
341
342
343
# File 'opal/browser/dom/element.rb', line 339

def search(*selectors)
  NodeSet.new selectors.map {|selector|
    xpath(selector).to_a.concat(css(selector).to_a)
  }.flatten.uniq
end

#show(what = :block) ⇒ Object

Show the element.

Parameters:

  • what (Symbol) (defaults to: :block)

    how to display it


15
16
17
# File 'opal/browser/effects.rb', line 15

def show(what = :block)
  style[:display] = what
end

#styleCSS::Declaration #style(data) ⇒ self #style(&block) ⇒ self

Overloads:

  • #styleCSS::Declaration

    Return the style for the element.

    Returns:

  • #style(data) ⇒ self

    Set the CSS style as string or set of values.

    Parameters:

    Returns:

    • (self)
  • #style(&block) ⇒ self

    Set the CSS style from a CSS builder DSL.

    Returns:

    • (self)

368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
# File 'opal/browser/dom/element.rb', line 368

def style(data = nil, &block)
  style = CSS::Declaration.new(`#@native.style`)

  return style unless data || block

  if String === data
    style.replace(data)
  elsif Hash === data
    style.assign(data)
  elsif block
    style.apply(&block)
  else
    raise ArgumentError, 'unknown data type'
  end

  self
end

#toggleObject

Toggle the visibility of the element, hide it if it's shown, show it if it's hidden.


26
27
28
29
30
31
32
# File 'opal/browser/effects.rb', line 26

def toggle
  if style![:display] == :none
    show
  else
    hide
  end
end

#xpath(path) ⇒ NodeSet

Query for children matching the given XPath.

Parameters:

Returns:

Raises:

  • (NotImplementedError)

468
469
470
471
472
473
474
475
476
# File 'opal/browser/dom/element.rb', line 468

def xpath(path)
  NodeSet[Native::Array.new(
    `(#@native.ownerDocument || #@native).evaluate(path,
       #@native, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)`,
    get:    :snapshotItem,
    length: :snapshotLength)]
rescue
  NodeSet[]
end