Merge pull request #257 from wvengen/feature-touchclick

Better workaround for touch devices

app/assets/javascripts/application.js

@@ -19,19 +19,7 @@
 //= require_self
 //= require ordering
 //= require stupidtable
-
-// allow touch devices to work on click events
-//   http://stackoverflow.com/a/16221066
-$.fn.extend({ _on: (function(){ return $.fn.on; })() });
-$.fn.extend({
-    on: (function(){
-        var isTouchSupported = 'ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch;
-        return function( types, selector, data, fn, one ) {
-            if (typeof types == 'string' && isTouchSupported && !(types.match(/touch/gi))) types = types.replace(/click/gi, 'touchstart');
-            return this._on( types, selector, data, fn, one );
-        };
-    }()),
-});
+//= require touchclick
 
 // Load following statements, when DOM is ready
 $(function() {

app/assets/javascripts/ordering.js

@@ -164,20 +164,20 @@ function updateBalance() {
 }
 
 $(function() {
-    $('input[data-increase_quantity]').click(function() {
+    $('input[data-increase_quantity]').on('touchclick', function() {
         increaseQuantity($(this).data('increase_quantity'));
     });
-    $('input[data-decrease_quantity]').click(function() {
+    $('input[data-decrease_quantity]').on('touchclick', function() {
         decreaseQuantity($(this).data('decrease_quantity'));
     });
-    $('input[data-increase_tolerance]').click(function() {
+    $('input[data-increase_tolerance]').on('touchclick', function() {
         increaseTolerance($(this).data('increase_tolerance'));
     });
-    $('input[data-decrease_tolerance]').click(function() {
+    $('input[data-decrease_tolerance]').on('touchclick', function() {
         decreaseTolerance($(this).data('decrease_tolerance'));
     });
 
-    $('a[data-confirm_switch_order]').click(function() {
+    $('a[data-confirm_switch_order]').on('touchclick', function() {
         return (!modified || confirm(I18n.t('js.ordering.confirm_change')));
     });
 });

app/views/deliveries/_form.html.haml

@@ -1,7 +1,7 @@
 - content_for :javascript do
   :javascript
     $(function() {
-      $('#stock_changes').on('click', '.destroy_stock_change', function() {
+      $('#stock_changes').on('touchclick', '.destroy_stock_change', function() {
         $(this).prev('input').val('1'); // check for destruction
         
         var stock_change = $(this).closest('tr');
@@ -11,7 +11,7 @@
         return false;
       });
 
-      $('#stock_changes').on('click', '.remove_new_stock_change', function() {
+      $('#stock_changes').on('touchclick', '.remove_new_stock_change', function() {
         var stock_change = $(this).closest('tr');
         stock_change.remove();
         mark_article_for_delivery( stock_change.data('id') );

app/views/finance/financial_transactions/new_collection.html.haml

@@ -5,12 +5,12 @@
     var ordergroup = "#{escape_javascript(render('ordergroup'))}"
 
     $(function() {
-      $(document).on('click', 'a[data-remove-transaction]', function() {
+      $(document).on('touchclick', 'a[data-remove-transaction]', function() {
         $(this).parents('tr').remove();
         return false;
       });
 
-      $(document).on('click', 'a[data-add-transaction]', function() {
+      $(document).on('touchclick', 'a[data-add-transaction]', function() {
         $('#ordergroups').append(ordergroup);
         return false;
       });

app/views/messages/new.haml

@@ -10,7 +10,7 @@
         theme: 'facebook'
       });
 
-      $('#message_sent_to_all').click(function() {
+      $('#message_sent_to_all').on('touchclick', function() {
         if ($(this).is(':checked')) {
           $('#recipients').slideUp();
         } else {

app/views/orders/_edit_amounts.html.haml

@@ -36,7 +36,7 @@
       update_delta(this);
     });
 
-    $(document).on('click', '#order_articles .unlocker', unlock_receive_input_field);
+    $(document).on('touchclick', '#order_articles .unlocker', unlock_receive_input_field);
 
     $(function() {
       $('input[data-units-expected]').each(function() {

vendor/assets/javascripts/touchclick.js.coffee

@@ -0,0 +1,72 @@
+###!
+Copyright (c) 2013 Derek Petersen https://github.com/tuxracer/touchclick MIT License
+https://raw2.github.com/tuxracer/touchclick/3.0.1/src/touchclick.coffee
+###
+
+$ = if typeof jQuery is 'function' then jQuery else require 'jquery'
+
+activeClass = 'touchactive'
+preventDefaultClick = false
+
+# Store a timestamp of when the last touch event occurred
+lastTouched = 0
+
+# Support devices with both touch and mouse (e.g. Windows 8, Chromebook Pixel)
+ignoreEvent = (e) ->
+  currentTimestamp = Math.round (new Date()).getTime() / 1000
+  secondsSinceTouch = currentTimestamp - lastTouched
+
+  if e.type.match 'touchstart|touchmove|touchend'
+    lastTouched = currentTimestamp
+
+  secondsSinceTouch < 3 and e.type.match 'mouse'
+
+getTouchclickEl = (target) ->
+  $targetEl = $ target
+  # For delegated events you can optionally provide an element
+  # that will have the active style added when touch is active
+  # by adding data-touchclick="true"
+  $touchclickEl = $targetEl.closest '*[data-touchclick="true"]'
+
+  if $touchclickEl.length
+    $touchclickEl
+  else
+    $targetEl
+
+touchstart = (e) ->
+  getTouchclickEl(e.target).addClass(activeClass) unless ignoreEvent e
+
+touchmove = (e) ->
+  getTouchclickEl(e.target).removeClass(activeClass)
+
+touchend = (e) ->
+  $touchclickEl = getTouchclickEl e.target
+
+  if $touchclickEl.hasClass(activeClass) and not ignoreEvent e
+    e.type = 'touchclick'
+
+    $touchclickEl
+    .trigger(e)
+    .removeClass(activeClass)
+
+events = (type) ->
+  $el = $ this
+
+  if preventDefaultClick
+    $el[type] 'click', (e) ->
+      e.preventDefault()
+
+  if window.navigator.msPointerEnabled
+    $el[type] 'MSPointerDown', touchstart
+    $el[type] 'MSPointerUp', touchend
+  else
+    $el[type] 'touchstart mousedown', touchstart
+    $el[type] 'touchmove mouseout', touchmove
+    $el[type] 'touchend mouseup', touchend
+
+$.event.special.touchclick =
+  setup: ->
+    events.call this, 'on'
+
+  teardown: ->
+    events.call this, 'off'