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



252
253
254
 
# File 'opal/browser/dom/element.rb', line 252

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

#attributes ⇒ Attributes (readonly)

Returns the attributes for the element.

Returns:



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

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



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

alias_native :class_name, :className

#class_names ⇒ Array<String> (readonly)

Returns all the element class names.

Returns:

  • (Array<String>) —

    all the element class names



262
263
264
 
# File 'opal/browser/dom/element.rb', line 262

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



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

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



328
329
330
 
# File 'opal/browser/dom/element.rb', line 328

def height
  size.height
end

#id ⇒ String?

Returns the ID of the element.

Returns:

  • (String?) —

    the ID of the element



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

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



373
374
375
 
# File 'opal/browser/dom/element.rb', line 373

def inner_html
  `#@native.innerHTML`
end

#offset ⇒ Offset

Returns the offset of the element.

Returns:

  • (Offset) —

    the offset of the element



397
398
399
400
401
402
403
404
405
 
# File 'opal/browser/dom/element.rb', line 397

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



413
414
415
 
# File 'opal/browser/dom/element.rb', line 413

def outer_html
  `#@native.outerHTML`
end

#position ⇒ Position (readonly)

Returns the position of the element.

Returns:

  • (Position) —

    the position of the element



419
420
421
 
# File 'opal/browser/dom/element.rb', line 419

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

#scroll ⇒ Scroll (readonly)

Returns the scrolling for the element.

Returns:

  • (Scroll) —

    the scrolling for the element



425
426
427
 
# File 'opal/browser/dom/element.rb', line 425

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

#size ⇒ Size (readonly)

Returns the size of the element.

Returns:

  • (Size) —

    the size of the element



544
545
546
 
# File 'opal/browser/dom/element.rb', line 544

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

#style! ⇒ CSS::Declaration (readonly)

Returns get the computed style for the element.

Returns:

Raises:

  • (NotImplementedError) 


513
514
515
 
# File 'opal/browser/dom/element.rb', line 513

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



562
563
564
 
# File 'opal/browser/dom/element.rb', line 562

def width
  size.width
end

#window ⇒ Window (readonly)

Returns the window for the element.

Returns:

  • (Window) —

    the window for the element



572
573
574
 
# File 'opal/browser/dom/element.rb', line 572

def window
  document.window
end

Class Method Details

.create(*args, &block) ⇒ Object 



6
7
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
 
# File 'opal/browser/dom/element.rb', line 6

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



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

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) 


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

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) 


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

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

.new(*args, &block) ⇒ Object 



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

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 



59
60
61
 
# File 'opal/browser/dom/element.rb', line 59

def self.selector
  @selector
end

.subclasses ⇒ Object 



38
39
40
 
# File 'opal/browser/dom/element.rb', line 38

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

.tag_name ⇒ Object 



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

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:



155
156
157
 
# File 'opal/browser/dom/element.rb', line 155

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



143
144
145
 
# File 'opal/browser/dom/element.rb', line 143

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:



167
168
169
 
# File 'opal/browser/dom/element.rb', line 167

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



178
179
180
 
# File 'opal/browser/dom/element.rb', line 178

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) 


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

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.



86
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
 
# File 'opal/browser/effects.rb', line 86

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.



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

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:



202
203
204
 
# File 'opal/browser/dom/element.rb', line 202

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:



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

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:



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

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.



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

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

#click ⇒ Object

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



290
291
292
293
 
# File 'opal/browser/dom/element.rb', line 290

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) 


284
285
286
287
288
 
# File 'opal/browser/dom/element.rb', line 284

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) 


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

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



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

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) 


29
30
31
 
# File 'opal/browser/dom/element/editable.rb', line 29

def editable?
  `#@native.isContentEditable`
end

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

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



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

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.



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

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.



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

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.



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

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

#focused? ⇒ Boolean

Check if the element is focused.

Returns:

  • (Boolean) 


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

def focused?
  `#@native.hasFocus`
end

#hide ⇒ Object

Hide the element.



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

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

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

Set the inner DOM of the element using the Builder.



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

def inner_dom(builder=nil, &block)
  clear

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

#inner_dom=(node) ⇒ Object

Set the inner DOM with the given node.

(see #append_child)



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

def inner_dom=(node)
  clear

  self << node
end

#inspect ⇒ Object 



381
382
383
384
385
386
387
388
389
390
391
392
393
 
# File 'opal/browser/dom/element.rb', line 381

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



521
522
523
 
# File 'opal/browser/dom/element.rb', line 521

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) 


530
531
532
533
534
535
536
537
538
539
540
 
# File 'opal/browser/dom/element.rb', line 530

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:



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

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:



450
451
452
453
454
455
456
 
# File 'opal/browser/dom/element.rb', line 450

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) 


461
462
463
 
# File 'opal/browser/dom/element.rb', line 461

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

#show(what = :block) ⇒ Object

Show the element.

Parameters:

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

    how to display it



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

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.



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

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.



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

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.



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

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) 


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

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.



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

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) 


553
554
555
556
557
558
 
# File 'opal/browser/dom/element.rb', line 553

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) 


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

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) 


596
597
598
599
600
601
602
603
604
 
# File 'opal/browser/dom/element.rb', line 596

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