Class: Dommy::MediaQueryList

Inherits:
Object
  • Object
show all
Includes:
EventTarget
Defined in:
lib/dommy/media_query_list.rb

Overview

‘MediaQueryList` — what `window.matchMedia(query)` returns.

Dommy has no layout / viewport, so ‘matches` is `false` by default. Tests drive media query changes via `set_matches(bool)`, which flips the boolean and fires a `change` event — exactly the surface libraries like Material-UI / Bootstrap / @testing-library consult.

Spec: drafts.csswg.org/cssom-view/#mediaquerylist

Instance Attribute Summary collapse

Instance Method Summary collapse

Methods included from EventTarget

#__deliver_event__, #add_event_listener, #dispatch_event, #invoke_listener, #remove_event_listener

Constructor Details

#initialize(window, query) ⇒ MediaQueryList

Returns a new instance of MediaQueryList.



17
18
19
20
21
22
 
# File 'lib/dommy/media_query_list.rb', line 17

def initialize(window, query)
  @window = window
  @media = query.to_s
  @matches = false
  @onchange = nil
end

Instance Attribute Details

#media ⇒ Object (readonly)

Returns the value of attribute media.



15
16
17
 
# File 'lib/dommy/media_query_list.rb', line 15

def media
  @media
end

Instance Method Details

#__event_parent__ ⇒ Object 



92
93
94
 
# File 'lib/dommy/media_query_list.rb', line 92

def __event_parent__
  nil
end

#__js_call__(method, args) ⇒ Object 



75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
# File 'lib/dommy/media_query_list.rb', line 75

def __js_call__(method, args)
  case method
  when "matches"
    @matches
  when "addListener"
    add_listener(args[0])
  when "removeListener"
    remove_listener(args[0])
  when "addEventListener"
    add_event_listener(args[0], args[1], args[2])
  when "removeEventListener"
    remove_event_listener(args[0], args[1])
  when "dispatchEvent"
    dispatch_event(args[0])
  end
end

#__js_get__(key) ⇒ Object 



53
54
55
56
57
58
59
60
61
62
 
# File 'lib/dommy/media_query_list.rb', line 53

def __js_get__(key)
  case key
  when "media"
    @media
  when "matches"
    @matches
  when "onchange"
    @onchange
  end
end

#__js_set__(key, value) ⇒ Object 



64
65
66
67
68
69
70
71
72
73
 
# File 'lib/dommy/media_query_list.rb', line 64

def __js_set__(key, value)
  case key
  when "onchange"
    remove_event_listener("change", @onchange) if @onchange
    @onchange = value
    add_event_listener("change", value) if value
  end

  nil
end

#__set_matches__(value) ⇒ Object

Test seam: flip the match state and dispatch a ‘change` event so subscribers re-render.



45
46
47
48
49
50
51
 
# File 'lib/dommy/media_query_list.rb', line 45

def __set_matches__(value)
  return if @matches == !!value

  @matches = !!value
  dispatch_event(MediaQueryListEvent.new("change", "matches" => @matches, "media" => @media))
  nil
end

#add_listener(callback) ⇒ Object Also known as: addListener

Spec aliases for legacy support.



31
32
33
 
# File 'lib/dommy/media_query_list.rb', line 31

def add_listener(callback)
  add_event_listener("change", callback)
end

#matches ⇒ Object Also known as: matches? 



24
25
26
 
# File 'lib/dommy/media_query_list.rb', line 24

def matches
  @matches
end

#remove_listener(callback) ⇒ Object Also known as: removeListener 



37
38
39
 
# File 'lib/dommy/media_query_list.rb', line 37

def remove_listener(callback)
  remove_event_listener("change", callback)
end