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_nodes ⇒ NodeSet (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

#attributes ⇒ Attributes (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_name ⇒ String (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_names ⇒ Array<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

#height ⇒ Integer

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

#id ⇒ String?

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

#offset ⇒ Offset

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

#position ⇒ Position (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

#scroll ⇒ Scroll (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

#size ⇒ Size (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

#width ⇒ Integer

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

#window ⇒ Window (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

#blur ⇒ Object

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

#data ⇒ Data #data(hash) ⇒ self

Overloads:

  • #data ⇒ Data

    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

#focus ⇒ Object

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

#hide ⇒ Object

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

#inspect ⇒ Object 



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

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

Overloads:

  • #style ⇒ CSS::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

#toggle ⇒ Object

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