Module: DOM::Events

Included in:
FileReader, NODE, Window
Defined in:
opal/fron/dom/modules/events.rb

Overview

Events module for managing events for elements and element like nodes (SVG Element for example).

Features:

  • Store event listeners for listing and removal

  • Shorthand on and on! for non capture / capture

  • Triggering event dynamically

Instance Attribute Summary collapse

Instance Method Summary collapse

Instance Attribute Details

#listenersObject (readonly)

Returns the value of attribute listeners


9
10
11
# File 'opal/fron/dom/modules/events.rb', line 9

def listeners
  @listeners
end

Instance Method Details

#addListener(type, capture = false) {|event| ... } ⇒ Function (private)

Adds an event listener for the given type.

Yield Parameters:

  • event (Event)

    The event


100
101
102
103
104
105
106
107
108
109
# File 'opal/fron/dom/modules/events.rb', line 100

def addListener(type, capture = false)
  method = `function(e){#{ yield Event.new(`e`)}}`

  @listeners       ||= {}
  @listeners[type] ||= []
  @listeners[type] << method

  `#{@el}.addEventListener(#{type},#{method},#{capture})`
  method
end

#delegate(type, selector) {|event| ... } ⇒ Object

Delegates the events with the given type if they match the given selector

Yield Parameters:

  • event (Event)

    The event


83
84
85
86
87
88
# File 'opal/fron/dom/modules/events.rb', line 83

def delegate(type, selector)
  on type do |event|
    break unless event.target.matches selector
    yield event
  end
end

#off(type = nil, method = nil) ⇒ Object

Removes events

  • If type and method given removes the exact event

  • If only type is given removes events with that type

  • If no arguments are passed removes all attached events


59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
# File 'opal/fron/dom/modules/events.rb', line 59

def off(type = nil, method = nil)
  return unless @listeners

  if type.nil?
    @listeners.keys.each do |ltype|
      removeListeners ltype
    end
  elsif method.nil?
    removeListeners type
  else
    return unless @listeners[type].index(method)
    @listeners[type].delete method
    `#{@el}.removeEventListener(#{type},#{method})`
    `#{@el}.removeEventListener(#{type},#{method},true)`
  end
end

#on(type) {|event| ... } ⇒ Object

Listens on the given type of event without capture

Yield Parameters:

  • event (Event)

    The event


47
48
49
# File 'opal/fron/dom/modules/events.rb', line 47

def on(type, &listener)
  addListener type, &listener
end

#on!(type) {|event| ... } ⇒ Object

Listens on the given type of event with capture

Yield Parameters:

  • event (Event)

    The event


38
39
40
# File 'opal/fron/dom/modules/events.rb', line 38

def on!(type, &listener)
  addListener type, true, &listener
end

#removeListeners(type) ⇒ Object (private)

Removes all events with the given type


114
115
116
117
118
119
# File 'opal/fron/dom/modules/events.rb', line 114

def removeListeners(type)
  @listeners[type].each do |method|
    @listeners[type].delete method
    `#{@el}.removeEventListener(#{type},#{method})`
  end
end

#trigger(type, data = {}) ⇒ Object

Triggers an event with the given type and data


15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# File 'opal/fron/dom/modules/events.rb', line 15

def trigger(type, data = {})
  data = if data.is_a?(Event)
           data.instance_variable_get('@event')
         elsif data.respond_to?(:to_json)
           `JSON.parse(#{data.to_json})`
         end
  %x{
    var event = document.createEvent("HTMLEvents");
    event.initEvent(#{type}, true, true);
    dat = #{data};
    for (key in dat) {
      value = dat[key];
      event[key] = value;
    }
    #{@el}.dispatchEvent(event);
  }
end