JSFiddle - React, Tailwind, and code Playground

by MichelleGlauser

HTML

<title>JS Bin</title>
<body>

</body>

CSS

img {
 position : 'absolute';
 width : 200px;
}

JavaScript

function detect_device_type (obj) {
 var ua = navigator.userAgent.toLowerCase()
 obj.is_iphone = (ua.match(/iphone/i) != null)
 obj.is_ipad = (ua.match(/ipad/i) != null)
 obj.is_idevice = obj.is_iphone || obj.is_ipad
 obj.is_android = (ua.match(/android/i) != null)
 obj.is_chromium = (ua.match(/chrome/i) != null)
 obj.is_windows_phone = (ua.match(/Windows Phone/i) != null)
 obj.is_phone_or_tablet = (obj.is_idevice || obj.is_android || obj.is_windows_phone)
}

// N.B.: For PCs, use .preventDefault on dragstart. For mobile, use .preventDefault on touchmove.
function add_swipe_controls (init) {
 void function (init) {
  if (typeof init.is_mobile == "undefined") init.is_mobile = true
  var target_obj = init.target, initial_x, initial_y, current_x, current_y, swipe_in_effect = false
  target_obj.addEventListener (init.is_mobile ? 'touchstart'  : 'mousedown', swipe_start_event)
  target_obj.addEventListener (init.is_mobile ? 'touchmove'   : 'mousemove', swipe_event)
  target_obj.addEventListener (init.is_mobile ? 'touchend'    : 'mouseup', function (evt) {if (swipe_in_effect == false) return; swipe_end_event (evt)})
  target_obj.addEventListener (init.is_mobile ? 'touchleave'  : 'mouseout', function (evt) {if (swipe_in_effect == false) return; swipe_end_event (evt)})
  target_obj.addEventListener (init.is_mobile ? 'touchcancel' : 'blur', function (evt) {if (swipe_in_effect == false) return; swipe_end (evt)})
  function swipe_end (evt) {
   if (swipe_in_effect == false) return
   swipe_in_effect = false
   if (typeof init.end_effect != "undefined") init.end_effect (evt)
  }
  function swipe_start_event (evt) {
   if ((typeof init.start_condition != "undefined") && (init.start_condition (evt) == false)) return
   if ((init.is_mobile) && (evt.touches.length != 1)) return
   var xy = getXY((init.is_mobile) ? evt.touches[0] : evt, target_obj); initial_x = xy[0]; initial_y = xy[1]
   current_x = initial_x; current_y = initial_y
   if (swipe_in_effect == true) return
  ...