touchpunch-rails 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +62 -0
- data/lib/touchpunch-rails.rb +8 -0
- data/lib/touchpunch-rails/version.rb +5 -0
- data/vendor/assets/javascripts/jquery.ui.touch-punch.js +160 -0
- metadata +66 -0
data/README.md
ADDED
@@ -0,0 +1,62 @@
|
|
1
|
+
# Touchpunch::Rails
|
2
|
+
|
3
|
+
Simple asset gem containing jquery mobile ui touch punch. This gem allows for enabling touch drag and drop for jquery sortable via a vendor assets gem. See [jQuery UI Touch Punch]()
|
4
|
+
|
5
|
+
## jQuery UI Touch Punch
|
6
|
+
## Touch Event Support for jQuery UI
|
7
|
+
|
8
|
+
> **jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library.**
|
9
|
+
|
10
|
+
_[Visit the official Touch Punch website](http://touchpunch.furf.com)._
|
11
|
+
|
12
|
+
### The github repository for touch punch
|
13
|
+
[https://github.com/furf/jquery-ui-touch-punch](https://github.com/furf/jquery-ui-touch-punch)
|
14
|
+
|
15
|
+
### The github repository for touchpunch-rails
|
16
|
+
[https://github.com/geothird/touchpunch-rails](https://github.com/geothird/touchpunch-rails)
|
17
|
+
|
18
|
+
## Installation
|
19
|
+
|
20
|
+
Add this line to your application's Gemfile:
|
21
|
+
|
22
|
+
gem 'touchpunch-rails'
|
23
|
+
|
24
|
+
And then execute:
|
25
|
+
|
26
|
+
$ bundle
|
27
|
+
|
28
|
+
Or install it yourself as:
|
29
|
+
|
30
|
+
$ gem install touchpunch-rails
|
31
|
+
|
32
|
+
## Using Touch Punch
|
33
|
+
|
34
|
+
Just follow these simple steps to enable touch events in your jQuery UI app:
|
35
|
+
|
36
|
+
1. Include jQuery and jQuery UI on your page.
|
37
|
+
|
38
|
+
`<%= javascript_include_tag :jquery %>`
|
39
|
+
|
40
|
+
`<%= javascript_include_tag :jquery-ui %>`
|
41
|
+
|
42
|
+
2. Include Touch Punch after jQuery UI and before its first use.
|
43
|
+
|
44
|
+
Please note that if you are using jQuery UI's components, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.
|
45
|
+
|
46
|
+
`<%= javascript_include_tag :jquery.ui.touch-punch %>`
|
47
|
+
|
48
|
+
3. There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.
|
49
|
+
|
50
|
+
`<script>$('#widget').draggable();</script>`
|
51
|
+
|
52
|
+
It can also be required inside another rails CoffeeScript file.
|
53
|
+
|
54
|
+
#= require jquery.ui-touch-punch
|
55
|
+
|
56
|
+
## Contributing
|
57
|
+
|
58
|
+
1. Fork it
|
59
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
60
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
61
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
62
|
+
5. Create new Pull Request
|
@@ -0,0 +1,160 @@
|
|
1
|
+
/*!
|
2
|
+
* jQuery UI Touch Punch 0.2.2
|
3
|
+
*
|
4
|
+
* Copyright 2011, Dave Furfero
|
5
|
+
* Dual licensed under the MIT or GPL Version 2 licenses.
|
6
|
+
*
|
7
|
+
* Depends:
|
8
|
+
* jquery.ui.widget.js
|
9
|
+
* jquery.ui.mouse.js
|
10
|
+
*/
|
11
|
+
(function ($) {
|
12
|
+
|
13
|
+
// Detect touch support
|
14
|
+
$.support.touch = 'ontouchend' in document;
|
15
|
+
|
16
|
+
// Ignore browsers without touch support
|
17
|
+
if (!$.support.touch) {
|
18
|
+
return;
|
19
|
+
}
|
20
|
+
|
21
|
+
var mouseProto = $.ui.mouse.prototype,
|
22
|
+
_mouseInit = mouseProto._mouseInit,
|
23
|
+
touchHandled;
|
24
|
+
|
25
|
+
/**
|
26
|
+
* Simulate a mouse event based on a corresponding touch event
|
27
|
+
* @param {Object} event A touch event
|
28
|
+
* @param {String} simulatedType The corresponding mouse event
|
29
|
+
*/
|
30
|
+
function simulateMouseEvent (event, simulatedType) {
|
31
|
+
|
32
|
+
// Ignore multi-touch events
|
33
|
+
if (event.originalEvent.touches.length > 1) {
|
34
|
+
return;
|
35
|
+
}
|
36
|
+
|
37
|
+
event.preventDefault();
|
38
|
+
|
39
|
+
var touch = event.originalEvent.changedTouches[0],
|
40
|
+
simulatedEvent = document.createEvent('MouseEvents');
|
41
|
+
|
42
|
+
// Initialize the simulated mouse event using the touch event's coordinates
|
43
|
+
simulatedEvent.initMouseEvent(
|
44
|
+
simulatedType, // type
|
45
|
+
true, // bubbles
|
46
|
+
true, // cancelable
|
47
|
+
window, // view
|
48
|
+
1, // detail
|
49
|
+
touch.screenX, // screenX
|
50
|
+
touch.screenY, // screenY
|
51
|
+
touch.clientX, // clientX
|
52
|
+
touch.clientY, // clientY
|
53
|
+
false, // ctrlKey
|
54
|
+
false, // altKey
|
55
|
+
false, // shiftKey
|
56
|
+
false, // metaKey
|
57
|
+
0, // button
|
58
|
+
null // relatedTarget
|
59
|
+
);
|
60
|
+
|
61
|
+
// Dispatch the simulated event to the target element
|
62
|
+
event.target.dispatchEvent(simulatedEvent);
|
63
|
+
}
|
64
|
+
|
65
|
+
/**
|
66
|
+
* Handle the jQuery UI widget's touchstart events
|
67
|
+
* @param {Object} event The widget element's touchstart event
|
68
|
+
*/
|
69
|
+
mouseProto._touchStart = function (event) {
|
70
|
+
|
71
|
+
var self = this;
|
72
|
+
|
73
|
+
// Ignore the event if another widget is already being handled
|
74
|
+
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
|
75
|
+
return;
|
76
|
+
}
|
77
|
+
|
78
|
+
// Set the flag to prevent other widgets from inheriting the touch event
|
79
|
+
touchHandled = true;
|
80
|
+
|
81
|
+
// Track movement to determine if interaction was a click
|
82
|
+
self._touchMoved = false;
|
83
|
+
|
84
|
+
// Simulate the mouseover event
|
85
|
+
simulateMouseEvent(event, 'mouseover');
|
86
|
+
|
87
|
+
// Simulate the mousemove event
|
88
|
+
simulateMouseEvent(event, 'mousemove');
|
89
|
+
|
90
|
+
// Simulate the mousedown event
|
91
|
+
simulateMouseEvent(event, 'mousedown');
|
92
|
+
};
|
93
|
+
|
94
|
+
/**
|
95
|
+
* Handle the jQuery UI widget's touchmove events
|
96
|
+
* @param {Object} event The document's touchmove event
|
97
|
+
*/
|
98
|
+
mouseProto._touchMove = function (event) {
|
99
|
+
|
100
|
+
// Ignore event if not handled
|
101
|
+
if (!touchHandled) {
|
102
|
+
return;
|
103
|
+
}
|
104
|
+
|
105
|
+
// Interaction was not a click
|
106
|
+
this._touchMoved = true;
|
107
|
+
|
108
|
+
// Simulate the mousemove event
|
109
|
+
simulateMouseEvent(event, 'mousemove');
|
110
|
+
};
|
111
|
+
|
112
|
+
/**
|
113
|
+
* Handle the jQuery UI widget's touchend events
|
114
|
+
* @param {Object} event The document's touchend event
|
115
|
+
*/
|
116
|
+
mouseProto._touchEnd = function (event) {
|
117
|
+
|
118
|
+
// Ignore event if not handled
|
119
|
+
if (!touchHandled) {
|
120
|
+
return;
|
121
|
+
}
|
122
|
+
|
123
|
+
// Simulate the mouseup event
|
124
|
+
simulateMouseEvent(event, 'mouseup');
|
125
|
+
|
126
|
+
// Simulate the mouseout event
|
127
|
+
simulateMouseEvent(event, 'mouseout');
|
128
|
+
|
129
|
+
// If the touch interaction did not move, it should trigger a click
|
130
|
+
if (!this._touchMoved) {
|
131
|
+
|
132
|
+
// Simulate the click event
|
133
|
+
simulateMouseEvent(event, 'click');
|
134
|
+
}
|
135
|
+
|
136
|
+
// Unset the flag to allow other widgets to inherit the touch event
|
137
|
+
touchHandled = false;
|
138
|
+
};
|
139
|
+
|
140
|
+
/**
|
141
|
+
* A duck punch of the $.ui.mouse _mouseInit method to support touch events.
|
142
|
+
* This method extends the widget with bound touch event handlers that
|
143
|
+
* translate touch events to mouse events and pass them to the widget's
|
144
|
+
* original mouse event handling methods.
|
145
|
+
*/
|
146
|
+
mouseProto._mouseInit = function () {
|
147
|
+
|
148
|
+
var self = this;
|
149
|
+
|
150
|
+
// Delegate the touch handlers to the widget's element
|
151
|
+
self.element
|
152
|
+
.bind('touchstart', $.proxy(self, '_touchStart'))
|
153
|
+
.bind('touchmove', $.proxy(self, '_touchMove'))
|
154
|
+
.bind('touchend', $.proxy(self, '_touchEnd'));
|
155
|
+
|
156
|
+
// Call the original $.ui.mouse init method
|
157
|
+
_mouseInit.call(self);
|
158
|
+
};
|
159
|
+
|
160
|
+
})(jQuery);
|
metadata
ADDED
@@ -0,0 +1,66 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: touchpunch-rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 1.0.0
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Geo
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2012-11-01 00:00:00.000000000 Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
15
|
+
name: railties
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
17
|
+
none: false
|
18
|
+
requirements:
|
19
|
+
- - ~>
|
20
|
+
- !ruby/object:Gem::Version
|
21
|
+
version: '3.1'
|
22
|
+
type: :runtime
|
23
|
+
prerelease: false
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
25
|
+
none: false
|
26
|
+
requirements:
|
27
|
+
- - ~>
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: '3.1'
|
30
|
+
description: Simple asset gem containing jquery mobile ui touch punch. This allows
|
31
|
+
for enabling touch drag and drop for jquery sortable.
|
32
|
+
email:
|
33
|
+
- geo.marshall@gmail.com
|
34
|
+
executables: []
|
35
|
+
extensions: []
|
36
|
+
extra_rdoc_files: []
|
37
|
+
files:
|
38
|
+
- lib/touchpunch-rails/version.rb
|
39
|
+
- lib/touchpunch-rails.rb
|
40
|
+
- vendor/assets/javascripts/jquery.ui.touch-punch.js
|
41
|
+
- README.md
|
42
|
+
homepage: ''
|
43
|
+
licenses: []
|
44
|
+
post_install_message:
|
45
|
+
rdoc_options: []
|
46
|
+
require_paths:
|
47
|
+
- lib
|
48
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
49
|
+
none: false
|
50
|
+
requirements:
|
51
|
+
- - ! '>='
|
52
|
+
- !ruby/object:Gem::Version
|
53
|
+
version: '0'
|
54
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
55
|
+
none: false
|
56
|
+
requirements:
|
57
|
+
- - ! '>='
|
58
|
+
- !ruby/object:Gem::Version
|
59
|
+
version: '0'
|
60
|
+
requirements: []
|
61
|
+
rubyforge_project:
|
62
|
+
rubygems_version: 1.8.24
|
63
|
+
signing_key:
|
64
|
+
specification_version: 3
|
65
|
+
summary: Simple asset gem containing jquery mobile ui touch punch.
|
66
|
+
test_files: []
|