├── .gitignore ├── Gemfile ├── LICENSE.txt ├── README.md ├── Rakefile ├── lib ├── touchpunch-rails.rb └── touchpunch-rails │ └── version.rb ├── touchpunch-rails.gemspec └── vendor └── assets └── javascripts └── jquery.ui.touch-punch.js /.gitignore: -------------------------------------------------------------------------------- 1 | *.gem 2 | *.rbc 3 | .bundle 4 | .config 5 | .yardoc 6 | Gemfile.lock 7 | InstalledFiles 8 | _yardoc 9 | coverage 10 | doc/ 11 | lib/bundler/man 12 | pkg 13 | rdoc 14 | spec/reports 15 | test/tmp 16 | test/version_tmp 17 | tmp 18 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # Specify your gem's dependencies in touchpunch-rails.gemspec 4 | gemspec 5 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2012 Geo 2 | 3 | MIT License 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 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 | ### Requirements 33 | 34 | Add the jquery ui rails gem to your project: 35 | 36 | gem 'jquery-ui-rails' 37 | 38 | ## Using Touch Punch 39 | 40 | Just follow these simple steps to enable touch events in your jQuery UI app: 41 | 42 | 1. Include jQuery and jQuery UI on your page. 43 | 44 | `<%= javascript_include_tag :jquery %>` 45 | 46 | `<%= javascript_include_tag :jquery-ui %>` 47 | 48 | 2. Include Touch Punch after jQuery UI and before its first use. 49 | 50 | 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. 51 | 52 | `<%= javascript_include_tag :jquery.ui.touch-punch %>` 53 | 54 | 3. There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger. 55 | 56 | `` 57 | 58 | ## Coffeescript 59 | Add the following to any project file you want touch support along with the requirements below. 60 | 61 | #= require jquery.ui.touch-punch 62 | 63 | ### Requirements 64 | 65 | Include the required jquery ui library (from jquery-ui-rails): 66 | 67 | #= require jquery.ui.widget 68 | #= require jquery.ui.mouse 69 | 70 | ## Contributing 71 | 72 | 1. Fork it 73 | 2. Create your feature branch (`git checkout -b my-new-feature`) 74 | 3. Commit your changes (`git commit -am 'Add some feature'`) 75 | 4. Push to the branch (`git push origin my-new-feature`) 76 | 5. Create new Pull Request 77 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | require "bundler/gem_tasks" 2 | -------------------------------------------------------------------------------- /lib/touchpunch-rails.rb: -------------------------------------------------------------------------------- 1 | require "touchpunch-rails/version" 2 | 3 | module Touchpunch 4 | module Rails 5 | class Engine < ::Rails::Engine 6 | end 7 | end 8 | end 9 | -------------------------------------------------------------------------------- /lib/touchpunch-rails/version.rb: -------------------------------------------------------------------------------- 1 | module Touchpunch 2 | module Rails 3 | VERSION = "1.0.3" 4 | end 5 | end 6 | -------------------------------------------------------------------------------- /touchpunch-rails.gemspec: -------------------------------------------------------------------------------- 1 | # -*- encoding: utf-8 -*- 2 | lib = File.expand_path('../lib', __FILE__) 3 | $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib) 4 | require 'touchpunch-rails/version' 5 | 6 | Gem::Specification.new do |gem| 7 | gem.name = "touchpunch-rails" 8 | gem.version = Touchpunch::Rails::VERSION 9 | gem.authors = ["Geo"] 10 | gem.email = ["geo.marshall@gmail.com"] 11 | gem.description = %q{Simple asset gem containing jquery mobile ui touch punch. This allows for enabling touch drag and drop for jquery sortable.} 12 | gem.summary = %q{Simple asset gem containing jquery mobile ui touch punch.} 13 | gem.homepage = "" 14 | 15 | gem.files = Dir["{lib,vendor}/**/*"] + ["README.md"] 16 | gem.executables = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) } 17 | gem.test_files = gem.files.grep(%r{^(test|spec|features)/}) 18 | gem.require_paths = ["lib"] 19 | 20 | gem.add_dependency "railties", ">= 3.1" 21 | end 22 | -------------------------------------------------------------------------------- /vendor/assets/javascripts/jquery.ui.touch-punch.js: -------------------------------------------------------------------------------- 1 | //= require jquery-ui/widgets/mouse 2 | 3 | /*! 4 | * jQuery UI Touch Punch 0.2.2 5 | * 6 | * Copyright 2011, Dave Furfero 7 | * Dual licensed under the MIT or GPL Version 2 licenses. 8 | * 9 | * Depends: 10 | * jquery.ui.widget.js 11 | * jquery.ui.mouse.js 12 | */ 13 | (function ($) { 14 | 15 | // Detect touch support 16 | $.support.touch = 'ontouchend' in document; 17 | 18 | // Ignore browsers without touch support 19 | if (!$.support.touch) { 20 | return; 21 | } 22 | 23 | var mouseProto = $.ui.mouse.prototype, 24 | _mouseInit = mouseProto._mouseInit, 25 | touchHandled; 26 | 27 | /** 28 | * Simulate a mouse event based on a corresponding touch event 29 | * @param {Object} event A touch event 30 | * @param {String} simulatedType The corresponding mouse event 31 | */ 32 | function simulateMouseEvent (event, simulatedType) { 33 | 34 | // Ignore multi-touch events 35 | if (event.originalEvent.touches.length > 1) { 36 | return; 37 | } 38 | 39 | event.preventDefault(); 40 | 41 | var touch = event.originalEvent.changedTouches[0], 42 | simulatedEvent = document.createEvent('MouseEvents'); 43 | 44 | // Initialize the simulated mouse event using the touch event's coordinates 45 | simulatedEvent.initMouseEvent( 46 | simulatedType, // type 47 | true, // bubbles 48 | true, // cancelable 49 | window, // view 50 | 1, // detail 51 | touch.screenX, // screenX 52 | touch.screenY, // screenY 53 | touch.clientX, // clientX 54 | touch.clientY, // clientY 55 | false, // ctrlKey 56 | false, // altKey 57 | false, // shiftKey 58 | false, // metaKey 59 | 0, // button 60 | null // relatedTarget 61 | ); 62 | 63 | // Dispatch the simulated event to the target element 64 | event.target.dispatchEvent(simulatedEvent); 65 | } 66 | 67 | /** 68 | * Handle the jQuery UI widget's touchstart events 69 | * @param {Object} event The widget element's touchstart event 70 | */ 71 | mouseProto._touchStart = function (event) { 72 | 73 | var self = this; 74 | 75 | // Ignore the event if another widget is already being handled 76 | if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) { 77 | return; 78 | } 79 | 80 | // Set the flag to prevent other widgets from inheriting the touch event 81 | touchHandled = true; 82 | 83 | // Track movement to determine if interaction was a click 84 | self._touchMoved = false; 85 | 86 | // Simulate the mouseover event 87 | simulateMouseEvent(event, 'mouseover'); 88 | 89 | // Simulate the mousemove event 90 | simulateMouseEvent(event, 'mousemove'); 91 | 92 | // Simulate the mousedown event 93 | simulateMouseEvent(event, 'mousedown'); 94 | }; 95 | 96 | /** 97 | * Handle the jQuery UI widget's touchmove events 98 | * @param {Object} event The document's touchmove event 99 | */ 100 | mouseProto._touchMove = function (event) { 101 | 102 | // Ignore event if not handled 103 | if (!touchHandled) { 104 | return; 105 | } 106 | 107 | // Interaction was not a click 108 | this._touchMoved = true; 109 | 110 | // Simulate the mousemove event 111 | simulateMouseEvent(event, 'mousemove'); 112 | }; 113 | 114 | /** 115 | * Handle the jQuery UI widget's touchend events 116 | * @param {Object} event The document's touchend event 117 | */ 118 | mouseProto._touchEnd = function (event) { 119 | 120 | // Ignore event if not handled 121 | if (!touchHandled) { 122 | return; 123 | } 124 | 125 | // Simulate the mouseup event 126 | simulateMouseEvent(event, 'mouseup'); 127 | 128 | // Simulate the mouseout event 129 | simulateMouseEvent(event, 'mouseout'); 130 | 131 | // If the touch interaction did not move, it should trigger a click 132 | if (!this._touchMoved) { 133 | 134 | // Simulate the click event 135 | simulateMouseEvent(event, 'click'); 136 | } 137 | 138 | // Unset the flag to allow other widgets to inherit the touch event 139 | touchHandled = false; 140 | }; 141 | 142 | /** 143 | * A duck punch of the $.ui.mouse _mouseInit method to support touch events. 144 | * This method extends the widget with bound touch event handlers that 145 | * translate touch events to mouse events and pass them to the widget's 146 | * original mouse event handling methods. 147 | */ 148 | mouseProto._mouseInit = function () { 149 | 150 | var self = this; 151 | 152 | // Delegate the touch handlers to the widget's element 153 | self.element 154 | .bind('touchstart', $.proxy(self, '_touchStart')) 155 | .bind('touchmove', $.proxy(self, '_touchMove')) 156 | .bind('touchend', $.proxy(self, '_touchEnd')); 157 | 158 | // Call the original $.ui.mouse init method 159 | _mouseInit.call(self); 160 | }; 161 | 162 | })(jQuery); 163 | --------------------------------------------------------------------------------