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/form.rb,
opal/browser/dom/element/size.rb,
opal/browser/dom/element/image.rb,
opal/browser/dom/element/input.rb,
opal/browser/dom/element/media.rb,
opal/browser/dom/element/button.rb,
opal/browser/dom/element/custom.rb,
opal/browser/dom/element/iframe.rb,
opal/browser/dom/element/offset.rb,
opal/browser/dom/element/scroll.rb,
opal/browser/dom/element/select.rb,
opal/browser/dom/element/editable.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, Audio, Button, Custom, Data, Form, Iframe, Image, Input, Media, Object, Offset, Position, Scroll, Select, Size, Template, Textarea, Video

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, #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!, #one, #trigger, #trigger!

Methods inherited from Node

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

Methods included from NativeCachedWrapper

#restricted?, #set_native_reference

Constructor Details

This class inherits a constructor from Browser::DOM::Node

Instance Attribute Details

#attribute_nodes ⇒ NodeSet (readonly)

Returns the attribute nodes for the element.

Returns:

  • (NodeSet) —

    the attribute nodes for the element



254
255
256
 
# File 'opal/browser/dom/element.rb', line 254

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

#attributes ⇒ Attributes (readonly)

Returns the attributes for the element.

Returns:



248
249
250
 
# File 'opal/browser/dom/element.rb', line 248

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



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

alias_native :class_name, :className

#class_names ⇒ Array<String> (readonly)

Returns all the element class names.

Returns:

  • (Array<String>) —

    all the element class names



264
265
266
 
# File 'opal/browser/dom/element.rb', line 264

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

#editable ⇒ Boolean?

Returns the value of contentEditable for this element.

Returns:

  • (Boolean?) —

    the value of contentEditable for this element



8
9
10
11
12
13
14
15
16
17
 
# File 'opal/browser/dom/element/editable.rb', line 8

def editable
  case `#@native.contentEditable`
  when "true"
    true
  when "false"
    false
  when "inherit"
    nil
  end
end

#height ⇒ Integer

Returns the height of the element.

Returns:

  • (Integer) —

    the height of the element



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

def height
  size.height
end

#id ⇒ String?

Returns the ID of the element.

Returns:

  • (String?) —

    the ID of the element



340
341
342
343
344
345
346
347
348
349
350
351
 
# File 'opal/browser/dom/element.rb', line 340

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

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

#inner_html ⇒ String

Returns the inner HTML of the element.

Returns:

  • (String) —

    the inner HTML of the element



376
377
378
 
# File 'opal/browser/dom/element.rb', line 376

def inner_html
  `#@native.innerHTML`
end

#offset ⇒ Offset

Returns the offset of the element.

Returns:

  • (Offset) —

    the offset of the element



400
401
402
403
404
405
406
407
408
 
# File 'opal/browser/dom/element.rb', line 400

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

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

  off
end

#outer_html ⇒ String

Returns the outer HTML of the element.

Returns:

  • (String) —

    the outer HTML of the element



416
417
418
 
# File 'opal/browser/dom/element.rb', line 416

def outer_html
  `#@native.outerHTML`
end

#position ⇒ Position (readonly)

Returns the position of the element.

Returns:

  • (Position) —

    the position of the element



422
423
424
 
# File 'opal/browser/dom/element.rb', line 422

def position
  @position ||= Position.new(self)
end

#scroll ⇒ Scroll (readonly)

Returns the scrolling for the element.

Returns:

  • (Scroll) —

    the scrolling for the element



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

def scroll
  @scroll ||= Scroll.new(self)
end

#size ⇒ Size (readonly)

Returns the size of the element.

Returns:

  • (Size) —

    the size of the element



547
548
549
 
# File 'opal/browser/dom/element.rb', line 547

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

#style! ⇒ CSS::Declaration (readonly)

Returns get the computed style for the element.

Returns:

Raises:

  • (NotImplementedError) 


516
517
518
 
# File 'opal/browser/dom/element.rb', line 516

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



565
566
567
 
# File 'opal/browser/dom/element.rb', line 565

def width
  size.width
end

#window ⇒ Window (readonly)

Returns the window for the element.

Returns:

  • (Window) —

    the window for the element



575
576
577
 
# File 'opal/browser/dom/element.rb', line 575

def window
  document.window
end

Class Method Details

.create(*args, &block) ⇒ Object 



8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
# File 'opal/browser/dom/element.rb', line 8

def self.create(*args, &block)
  if Document === args.first
    document = args.shift
  else
    document = $document
  end

  if self == Element
    document.create_element(*args, &block)
  elsif @tag_name
    document.create_element(@tag_name, *args, &block)
  elsif @selector
    # That's crude, but should cover the most basic cases.
    # Just in case, you can override it safely. To reiterate:
    # .create is not to be used inside libraries, those are
    # expected to use the Document#create_element API.
    kwargs = {}
    kwargs = args.pop if Hash === args.last
    custom_attrs, custom_id, custom_classes = nil, nil, nil
    tag_name = (@selector.scan(/^[\w-]+/).first || "div").upcase
    classes = @selector.scan(/\.([\w-]+)/).flatten
    classes |= custom_classes if custom_classes = kwargs.delete(:classes)
    id = @selector.scan(/#([\w-]+)/).flatten.first
    id = custom_id if custom_id = kwargs.delete(:id)
    attrs = @selector.scan(/\[([\w-]+)=((["'])(.*?)\3|[\w_-]*)\]/).map { |a,b,_,d| [a,d||b] }.to_h
    attrs = attrs.merge(custom_attrs) if custom_attrs = kwargs.delete(:attrs)
    document.create_element(tag_name, *args, classes: classes, id: id, attrs: attrs, **kwargs, &block)
  else
    raise NotImplementedError
  end
end

.def_selector(selector) ⇒ Object

Define a selector for subclass dispatch

Example:

class CustomElement < Browser::DOM::Element
  def_selector "div.hello-world"
end



52
53
54
55
56
57
58
59
 
# File 'opal/browser/dom/element.rb', line 52

def self.def_selector(selector)
  Element.subclasses << self

  @selector = selector

  # A special case to speedup dispatch
  @tag_name = selector.upcase unless selector =~ /[^\w-]/
end

.native_is?(native, klass) ⇒ Boolean

Returns:

  • (Boolean) 


103
104
105
106
107
108
109
110
 
# File 'opal/browser/dom/element.rb', line 103

def self.native_is? (native, klass)
  if tag_name = klass.tag_name
    is = `(#{native}.getAttribute("is") || "")`
    `#{tag_name} === #{is}.toUpperCase() || #{tag_name} === #{native}.nodeName`
  else
    Element.native_matches?(native, klass.selector)
  end
end

.native_matches?(native, selector) ⇒ Boolean

Returns:

  • (Boolean)

Raises:

  • (NotImplementedError) 


113
114
115
 
# File 'opal/browser/dom/element.rb', line 113

def self.native_matches? (native, selector)
  `#{native}.matches(#{selector})`
end

.new(*args, &block) ⇒ Object 



69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
# File 'opal/browser/dom/element.rb', line 69

def self.new(*args, &block)
  if args.length == 1 && !block_given? && Opal.native?(args[0])
    # Use `.new` as a wrapping method.
    node = args[0]
  else
    # Use `.new` as an alias for `.create`.
    return create(*args, &block)
  end

  if self == Element
    subclass = Element.subclasses.select do |subclass|
      Element.native_is?(node, subclass)
    end.last

    if subclass
      subclass.new(node)
    else
      super(node)
    end
  else
    super(node)
  end
end

.selector ⇒ Object 



61
62
63
 
# File 'opal/browser/dom/element.rb', line 61

def self.selector
  @selector
end

.subclasses ⇒ Object 



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

def self.subclasses
  @subclasses ||= []
end

.tag_name ⇒ Object 



65
66
67
 
# File 'opal/browser/dom/element.rb', line 65

def self.tag_name
  @tag_name
end

Instance Method Details

#/(*paths) ⇒ NodeSet

Query for children with the given XPpaths.

Parameters:

  • paths (Array<String>) —

    the XPaths to look for

Returns:



157
158
159
 
# File 'opal/browser/dom/element.rb', line 157

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

#=~(selector) ⇒ Object Also known as: ===

Check whether the element matches the given selector.

Parameters:

  • selector (String) —

    the CSS selector



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

def =~(selector)
  Element.native_matches?(@native, 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:



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

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



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

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) 


189
190
191
192
193
194
195
196
197
 
# File 'opal/browser/dom/element.rb', line 189

def add_class(*names)
  classes = class_names + names

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

  self
end

#animate(properties, duration: 0.4.s, easing: :ease, resolve: false, &block) ⇒ Object

Transform an element smoothly using CSS transitions, jQuery style. Yield a block afterwards if it's provided.



87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
# File 'opal/browser/effects.rb', line 87

def animate(properties, duration: 0.4.s, easing: :ease, resolve: false, &block)
  animation_queue(resolve) do |res|
    duration = 0.6.s if duration == :slow
    duration = 0.2.s if duration == :fast

    original_value = style['transition']

    style['transition'] = [original_value,
                          *properties.keys.map do |key|
                            "#{key} #{duration} #{easing}"
                          end].compact.join(", ")

    properties.each do |key, value|
      style[key] = value
    end

    promise = Promise.new

    one :transitionend do |*args|
      style['transition'] = original_value

      yield(*args) if block_given?

      res.call
    end
  end
  self
end

#animation_queue(&block) ⇒ Object

Queue the block to happen when currently queued animations finish or during the next animation frame.



69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
# File 'opal/browser/effects.rb', line 69

def animation_queue &block
  promise = Promise.new

  promise_resolve = proc do
    @animation_promise = nil if @animation_promise == promise
    promise.resolve
  end

  @animation_promise = (@animation_promise || Promise.value(true)).then do
    animation_frame do
      yield promise_resolve
    end
    promise
  end
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:



204
205
206
 
# File 'opal/browser/dom/element.rb', line 204

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:



213
214
215
216
217
218
219
220
221
222
223
 
# File 'opal/browser/dom/element.rb', line 213

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:



230
231
232
233
234
235
236
237
238
239
240
 
# File 'opal/browser/dom/element.rb', line 230

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.



57
58
59
60
 
# File 'opal/browser/effects.rb', line 57

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

#click ⇒ Object

Click the element. it fires the element's click event.



292
293
294
295
 
# File 'opal/browser/dom/element.rb', line 292

def click
  `#@native.click()`
  self
end

#css(selector) ⇒ NodeSet

Query for children matching the given CSS selector.

Parameters:

  • selector (String) —

    the CSS selector

Returns:

Raises:

  • (NotImplementedError) 


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

def css(path)
  NodeSet[Native::Array.new(`#@native.querySelectorAll(path)`)]
rescue StandardError, JS::Error
  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) 


310
311
312
313
314
315
316
317
318
319
320
321
322
 
# File 'opal/browser/dom/element.rb', line 310

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

#edit(command, value = nil) ⇒ Object

Execute a contentEditable command



36
37
38
39
40
41
42
43
44
45
46
 
# File 'opal/browser/dom/element/editable.rb', line 36

def edit(command, value=nil)
  command = command.gsub(/_./) { |i| i[1].upcase }
  
  focus

  if value
    `#{document}.native.execCommand(#{command}, false, #{value})`
  else
    `#{document}.native.execCommand(#{command}, false)`
  end
end

#editable? ⇒ Boolean

Returns:

  • (Boolean) 


31
32
33
 
# File 'opal/browser/dom/element/editable.rb', line 31

def editable?
  `#@native.isContentEditable`
end

#fade_in(**kwargs, &block) ⇒ Object

Show a hidden element with a "fade in" animation. Yield a block afterwards.



117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
 
# File 'opal/browser/effects.rb', line 117

def fade_in(**kwargs, &block)
  animation_queue do |resolve|
    if !visible?
      @virtually_visible = true
      show

      style[:opacity] = 0.0
      animate opacity: 1.0, **kwargs do |*args|
        @virtually_visible = nil
        style[:opacity] = nil
        yield(*args) if block_given?
      end
    end
    resolve.call
  end
  self
end

#fade_out(**kwargs, &block) ⇒ Object

Hide a visible element with a "fade out" animation. Yield a block afterwards.



136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
 
# File 'opal/browser/effects.rb', line 136

def fade_out(**kwargs, &block)
  animation_queue do |resolve|
    if visible?
      @virtually_visible = false

      style[:opacity] = 1.0
      animate opacity: 0.0, **kwargs do |*args|
        @virtually_visible = nil
        style[:opacity] = nil
        hide
        yield(*args) if block_given?
      end
    end
    resolve.call
  end
  self
end

#fade_toggle(**kwargs, &block) ⇒ Object

Toggle a visibility of an element with a "fade in"/"fade out" animation. Yield a block afterwards.



156
157
158
159
160
161
162
163
 
# File 'opal/browser/effects.rb', line 156

def fade_toggle(**kwargs, &block)
  if visible?
    fade_out(**kwargs, &block)
  else
    fade_in(**kwargs, &block)
  end
  self
end

#focus ⇒ Object

Set the focus on the element.



51
52
53
54
 
# File 'opal/browser/effects.rb', line 51

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

#focused? ⇒ Boolean

Check if the element is focused.

Returns:

  • (Boolean) 


63
64
65
 
# File 'opal/browser/effects.rb', line 63

def focused?
  `#@native.hasFocus`
end

#hide ⇒ Object

Hide the element.



24
25
26
27
 
# File 'opal/browser/effects.rb', line 24

def hide
  style[:display] = :none
  self
end

#inner_dom(builder = nil, &block) ⇒ Object

Set the inner DOM of the element using the Builder.



358
359
360
361
 
# File 'opal/browser/dom/element.rb', line 358

def inner_dom(builder=nil, &block)
  self.inner_dom = Builder.new(document, builder, &block).to_a
  self
end

#inner_dom=(node) ⇒ Object Also known as: children=

Set the inner DOM with the given node.

(see #append_child)



366
367
368
369
370
 
# File 'opal/browser/dom/element.rb', line 366

def inner_dom=(node)
  clear

  self << node
end

#inspect ⇒ Object 



384
385
386
387
388
389
390
391
392
393
394
395
396
 
# File 'opal/browser/dom/element.rb', line 384

def inspect
  inspect = name.downcase

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

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

  "#<#{self.class.name.gsub("Browser::","")}: #{inspect}>"
end

#remove_attribute(name) ⇒ Object

Remove an attribute from the element.

Parameters:

  • name (String) —

    the attribute name



524
525
526
 
# File 'opal/browser/dom/element.rb', line 524

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) 


533
534
535
536
537
538
539
540
541
542
543
 
# File 'opal/browser/dom/element.rb', line 533

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:



437
438
439
440
441
 
# File 'opal/browser/dom/element.rb', line 437

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

#shadow(open = true) ⇒ ShadowRoot

Creates or accesses the shadow root of this element

Parameters:

  • open (Boolean) (defaults to: true) —

    set to false if you want to create a closed shadow root

Returns:



453
454
455
456
457
458
459
 
# File 'opal/browser/dom/element.rb', line 453

def shadow (open = true)
  if root = `#@native.shadowRoot`
    DOM(root)
  else
    DOM(`#@native.attachShadow({mode: #{open ? "open" : "closed"}})`)
  end
end

#shadow? ⇒ Boolean

Checks for a presence of a shadow root of this element

Returns:

  • (Boolean) 


464
465
466
 
# File 'opal/browser/dom/element.rb', line 464

def shadow?
  `!!#@native.shadowRoot`
end

#show(what = :block) ⇒ Object

Show the element.

Parameters:

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

    how to display it



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

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

#slide_down(**kwargs, &block) ⇒ Object

Show a hidden element with a "slide down" animation. Yield a block afterwards.



166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
 
# File 'opal/browser/effects.rb', line 166

def slide_down(**kwargs, &block)
  animation_queue do |resolve|
    if !visible?
      @virtually_visible = true
      show
      height = size.height
      orig_height = style[:height]
      style[:height] = 0.px

      animate height: height.px, **kwargs do |*args|
        @virtually_visible = nil
        style[:height] = orig_height
        yield(*args) if block_given?
      end
    end
    resolve.call
  end
  self
end

#slide_toggle(**kwargs, &block) ⇒ Object

Toggle a visibility of an element with a "slide up"/"slide down" animation. Yield a block afterwards.



207
208
209
210
211
212
213
214
 
# File 'opal/browser/effects.rb', line 207

def slide_toggle(**kwargs, &block)
  if visible?
    slide_up(**kwargs, &block)
  else
    slide_down(**kwargs, &block)
  end
  self
end

#slide_up(**kwargs, &block) ⇒ Object

Hide a visible element with a "slide up" animation. Yield a block afterwards.



187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
 
# File 'opal/browser/effects.rb', line 187

def slide_up(**kwargs, &block)
  animation_queue do |resolve|
    if visible?
      @virtually_visible = false
      orig_height = style[:height]

      animate height: 0.px, **kwargs do |*args|
        @virtually_visible = nil
        style[:height] = orig_height
        hide
        yield(*args) if block_given?
      end
    end
    resolve.call
  end
  self
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) 


487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
 
# File 'opal/browser/dom/element.rb', line 487

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(what = :block) ⇒ Object

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



41
42
43
44
45
46
47
48
 
# File 'opal/browser/effects.rb', line 41

def toggle(what = :block)
  if visible?
    hide
  else
    show(what)
  end
  self
end

#toggle_class(*names) ⇒ self

Toggle class names of the element.

Parameters:

  • names (Array<String>) —

    class names to toggle

Returns:

  • (self) 


556
557
558
559
560
561
 
# File 'opal/browser/dom/element.rb', line 556

def toggle_class(*names)
  to_remove, to_add = names.partition { |name| class_names.include? name }

  add_class(*to_add)
  remove_class(*to_remove)
end

#visible? ⇒ Boolean

Returns:

  • (Boolean) 


29
30
31
32
33
34
35
36
37
 
# File 'opal/browser/effects.rb', line 29

def visible?
  # Let's check if we want to lie about the real visibility of an element.
  # It could be wise to lie about it when it's in a process of animation...
  if !@virtually_visible.nil?
    @virtually_visible
  else
    style![:display] != :none
  end
end

#xpath(path) ⇒ NodeSet

Query for children matching the given XPath.

Parameters:

Returns:

Raises:

  • (NotImplementedError) 


599
600
601
602
603
604
605
606
607
 
# File 'opal/browser/dom/element.rb', line 599

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 StandardError, JS::Error
  NodeSet[]
end