Class: Fron::Drag

Inherits:
Object show all
Extended by:
Eventable
Includes:
Eventable
Defined in:
opal/fron/utils/drag.rb

Overview

Class for dragging with pointer events.

Constant Summary collapse

IS_TOUCH = 
false
EVENTS = 
if IS_TOUCH
  {
    down: 'touchstart',
    move: 'touchmove',
    up:   'touchend'
  }
else
  {
    down: 'mousedown',
    move: 'mousemove',
    up:   'mouseup'
  }
end

Instance Attribute Summary collapse

Instance Method Summary collapse

Methods included from Eventable

on, trigger

Constructor Details

#initialize(base, start_distance = 7) ⇒ Drag

Creates a new drag instance.

Parameters:



34
35
36
37
38
39
40
41
 
# File 'opal/fron/utils/drag.rb', line 34

def initialize(base, start_distance = 7)
  reset
  @base = base
  @body = DOM::Document.body
  @start_distance = start_distance

  @base.on EVENTS[:down] do |event| start(event) end
end

Instance Attribute Details

#base ⇒ DOM::Element (readonly)

Returns The base of the drag.

Returns:



10
11
12
 
# File 'opal/fron/utils/drag.rb', line 10

def base
  @base
end

#body ⇒ DOM::Element (readonly)

Returns The documents body.

Returns:



13
14
15
 
# File 'opal/fron/utils/drag.rb', line 13

def body
  @body
end

Instance Method Details

#diff ⇒ Fron::Point

Returns the current difference position from the start position.

Returns:



47
48
49
 
# File 'opal/fron/utils/drag.rb', line 47

def diff
  @start_position - @position
end

#move ⇒ Object (private)

Runs on animation frame when the mouse is down.



105
106
107
108
109
 
# File 'opal/fron/utils/drag.rb', line 105

def move
  request_animation_frame { move } if @mouse_is_down
  return if !@position || !@started
  trigger 'move', @position
end

#off ⇒ Object (private)

Removes event listeners



112
113
114
115
 
# File 'opal/fron/utils/drag.rb', line 112

def off
  @body.off EVENTS[:move], @pos_method
  @body.off EVENTS[:up],   @up_method
end

#pos(event) ⇒ Object (private)

Runs when the pointer moves starts.

Parameters:

  • event (Event) —

    The event



77
78
79
80
81
82
83
84
 
# File 'opal/fron/utils/drag.rb', line 77

def pos(event)
  @position = position(event)
  if diff.distance >= @start_distance.to_i && !@started
    @started = true
    trigger 'start', @target
  end
  event.stop
end

#position(event) ⇒ Fron::Point (private)

Gets the position from the given event.

Parameters:

  • event (Event) —

    The event

Returns:



130
131
132
133
134
135
136
 
# File 'opal/fron/utils/drag.rb', line 130

def position(event)
  if IS_TOUCH && event.touches
    Point.new `#{event.touches}[0].pageX`, `#{event.touches}[0].pageY`
  else
    Point.new event.page_x, event.page_y
  end
end

#reset ⇒ Object (private)

Resets the drag



118
119
120
121
122
123
124
 
# File 'opal/fron/utils/drag.rb', line 118

def reset
  @started         = false
  @target          = nil
  @position        = nil
  @start_position  = nil
  @mouse_is_down   = false
end

#start(event) ⇒ Object (private)

Runs when dragging starts.

Parameters:

  • event (Event) —

    The event



56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
# File 'opal/fron/utils/drag.rb', line 56

def start(event)
  return stop if IS_TOUCH && `#{event.touches}.length != 1`

  off if @pos_method

  @position       = position(event)
  @target         = event.target
  @start_position = @position
  @mouse_is_down  = true

  @pos_method = @body.on! EVENTS[:move] do |evt| pos(evt) end
  @up_method  = @body.on! EVENTS[:up]   do |evt| up(evt)  end

  request_animation_frame do move end

  pos(event) if @start_distance == 0
end

#stop ⇒ Object (private)

Stops the drag



87
88
89
90
 
# File 'opal/fron/utils/drag.rb', line 87

def stop
  off
  reset
end

#up(event) ⇒ Object (private)

Runs when pointer releases.

Parameters:

  • event (Event) —

    The event



95
96
97
98
99
100
101
102
 
# File 'opal/fron/utils/drag.rb', line 95

def up(event)
  off
  trigger 'end' if @started
  reset
  return unless @started
  event.preventDefault
  event.stop
end