Class: Browser::DOM::Element
- 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
Direct Known Subclasses
Document, DocumentFragment, Button, Custom, Form, Iframe, Image, Input, Media, Select, Template, Textarea, DOM::Document
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
-
#attribute_nodes ⇒ NodeSet
readonly
The attribute nodes for the element.
-
#attributes ⇒ Attributes
readonly
The attributes for the element.
-
#class_name ⇒ String
readonly
All the element class names.
-
#class_names ⇒ Array<String>
readonly
All the element class names.
-
#editable ⇒ Boolean?
The value of contentEditable for this element.
-
#height ⇒ Integer
The height of the element.
-
#id ⇒ String?
The ID of the element.
-
#inner_html ⇒ String
The inner HTML of the element.
-
#offset ⇒ Offset
The offset of the element.
-
#outer_html ⇒ String
The outer HTML of the element.
-
#position ⇒ Position
readonly
The position of the element.
-
#scroll ⇒ Scroll
readonly
The scrolling for the element.
-
#size ⇒ Size
readonly
The size of the element.
-
#style! ⇒ CSS::Declaration
readonly
Get the computed style for the element.
-
#width ⇒ Integer
The width of the element.
-
#window ⇒ Window
readonly
The window for the element.
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
- .create(*args, &block) ⇒ Object
-
.def_selector(selector) ⇒ Object
Define a selector for subclass dispatch.
- .native_is?(native, klass) ⇒ Boolean
- .native_matches?(native, selector) ⇒ Boolean
- .new(*args, &block) ⇒ Object
- .selector ⇒ Object
- .subclasses ⇒ Object
- .tag_name ⇒ Object
Instance Method Summary collapse
-
#/(*paths) ⇒ NodeSet
Query for children with the given XPpaths.
-
#=~(selector) ⇒ Object
(also: #===)
Check whether the element matches the given selector.
-
#[](name, options = {}) ⇒ String?
(also: #attr, #attribute, #get_attribute, #get)
Get the attribute with the given name.
-
#[]=(name, value, options = {}) ⇒ Object
(also: #set, #set_attribute)
Set the attribute with the given name and value.
-
#add_class(*names) ⇒ self
Add class names to the element.
-
#animate(properties, duration: 0.4.s, easing: :ease, resolve: false, &block) ⇒ Object
Transform an element smoothly using CSS transitions, jQuery style.
-
#animation_queue(&block) ⇒ Object
Queue the block to happen when currently queued animations finish or during the next animation frame.
-
#at(path_or_selector) ⇒ Node?
Get the first node that matches the given CSS selector or XPath.
-
#at_css(*rules) ⇒ Node?
Get the first node matching the given CSS selectors.
-
#at_xpath(*paths) ⇒ Node?
Get the first node matching the given XPath.
-
#blur ⇒ Object
Blur the focus from the element.
-
#click ⇒ Object
Click the element.
-
#css(selector) ⇒ NodeSet
Query for children matching the given CSS selector.
- #data(value = nil) ⇒ Object
-
#edit(command, value = nil) ⇒ Object
Execute a contentEditable command.
- #editable? ⇒ Boolean
-
#fade_in(**kwargs, &block) ⇒ Object
Show a hidden element with a "fade in" animation.
-
#fade_out(**kwargs, &block) ⇒ Object
Hide a visible element with a "fade out" animation.
-
#fade_toggle(**kwargs, &block) ⇒ Object
Toggle a visibility of an element with a "fade in"/"fade out" animation.
-
#focus ⇒ Object
Set the focus on the element.
-
#focused? ⇒ Boolean
Check if the element is focused.
-
#hide ⇒ Object
Hide the element.
-
#inner_dom(builder = nil, &block) ⇒ Object
Set the inner DOM of the element using the Builder.
-
#inner_dom=(node) ⇒ Object
(also: #children=)
Set the inner DOM with the given node.
- #inspect ⇒ Object
-
#remove_attribute(name) ⇒ Object
Remove an attribute from the element.
-
#remove_class(*names) ⇒ self
Remove class names from the element.
-
#search(*selectors) ⇒ NodeSet
Search for all the children matching the given XPaths or CSS selectors.
-
#shadow(open = true) ⇒ ShadowRoot
Creates or accesses the shadow root of this element.
-
#shadow? ⇒ Boolean
Checks for a presence of a shadow root of this element.
-
#show(what = :block) ⇒ Object
Show the element.
-
#slide_down(**kwargs, &block) ⇒ Object
Show a hidden element with a "slide down" animation.
-
#slide_toggle(**kwargs, &block) ⇒ Object
Toggle a visibility of an element with a "slide up"/"slide down" animation.
-
#slide_up(**kwargs, &block) ⇒ Object
Hide a visible element with a "slide up" animation.
- #style(data = nil, &block) ⇒ Object
-
#toggle(what = :block) ⇒ Object
Toggle the visibility of the element, hide it if it's shown, show it if it's hidden.
-
#toggle_class(*names) ⇒ self
Toggle class names of the element.
- #visible? ⇒ Boolean
-
#xpath(path) ⇒ NodeSet
Query for children matching the given XPath.
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.
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.
248 249 250 |
# File 'opal/browser/dom/element.rb', line 248 def attributes( = {}) Attributes.new(self, ) end |
#class_name ⇒ String (readonly)
Returns 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.
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.
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.
330 331 332 |
# File 'opal/browser/dom/element.rb', line 330 def height size.height end |
#id ⇒ String?
Returns 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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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
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
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.
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.
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.
169 170 171 |
# File 'opal/browser/dom/element.rb', line 169 def [](name, = {}) attributes.get(name, ) end |
#[]=(name, value, options = {}) ⇒ Object Also known as: set, set_attribute
Set the attribute with the given name and value.
180 181 182 |
# File 'opal/browser/dom/element.rb', line 180 def []=(name, value, = {}) attributes.set(name, value, ) end |
#add_class(*names) ⇒ self
Add class names to the element.
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.
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.
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.
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.
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
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
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.
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.
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.
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.
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
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
464 465 466 |
# File 'opal/browser/dom/element.rb', line 464 def shadow? `!!#@native.shadowRoot` end |
#show(what = :block) ⇒ Object
Show the element.
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 (**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 (**kwargs, &block) if visible? (**kwargs, &block) else (**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 (**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
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.
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
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.
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 |