Small CoffeeScript swipe (carousel) widget

carousel.coffee

###
Carousel widget

It gets auto-called for every `.carousel` element in the page. If the
same element includes the `mobile` class name, the events will only
get fired on a mobile environment.

Dependencies:
  - jQuery 1.11
  - Hammer 1.0.6
###

class Carousel
	constructor: (@element) ->
		@element = $(@element)  # Make sure it's a jQuery object
		@wrapper = @element.find '.carousel-elements'
		@items = @wrapper.children()
		@position = 0  # Initial scroll position

		@hammer = new Hammer(@wrapper[0])
		@hammer.on 'dragstart drag release swipeleft swiperight', (e) =>

			# Don't mess with vertical dragging
			horizontal = [Hammer.DIRECTION_LEFT, Hammer.DIRECTION_RIGHT]
			if e.type is 'drag' and e.gesture.direction in horizontal
				e.preventDefault()
				e.gesture.preventDefault()

			# Start the dance
			@["handle_#{e.type}"] e

		@switch_to @items[0]

	handle_swipeleft: (e) ->
		if @item_index < (@items.length - 1)
			@_enable_transition()
			@switch_to @items[@item_index + 1]
		else
			@switch_to @item

		e.gesture.stopDetect()

	handle_swiperight: (e) ->
		if @item_index > 0
			@_enable_transition()
			@switch_to @items[@item_index - 1]
		else
			@switch_to @item

		e.gesture.stopDetect()

	handle_dragstart: ->
		# Disable CSS3 transition to allow free movement
		@wrapper.css 'transition-property': 'none'

	handle_drag: (e) ->
		# Free movement

		# Retrieve touch position and limit boundaries
		x = @position + e.gesture.deltaX
		last_item = @items[@items.length - 1]
		total_width = last_item.offsetLeft + last_item.offsetWidth
		visible_width = @element[0].clientWidth

		x = Math.min visible_width * 0.25, x  # Left boundary
		x = Math.max -(total_width - visible_width * 0.75), x  # Right boundary
		x = Math.floor x
		@event_x = x  # Save it for later

		@pan_to x  # Drag around

	handle_release: (e) ->
		if e.gesture.direction is Hammer.DIRECTION_LEFT
			@handle_swipeleft(e)
		else
			@handle_swiperight(e)

	log: ->
		if not window.console
			return

		args = Array::slice.call(arguments)
		args.unshift '[carousel]'
		console.log.apply console, args

	pan_to: (x) ->
		# Move to a pixel-precision offset
		@wrapper.css transform: "translate3d(#{x}px, 0, 0)"

	switch_to: (item) ->
		# Move to a specific item
		@item = item
		@item_index = @items.index item
		@position = -(@item.offsetLeft - @wrapper[0].offsetLeft)
		@pan_to @position

		# Fire a custom event
		$(@).trigger 'switch', [@item, @item_index]

		@log "Switch to item #{@item_index} of carousel placed at", @element[0]

	_enable_transition: ->
		@wrapper.css 'transition-property': ''


# Expose
window.Carousel = Carousel

# Put in on jQuery
$.fn.carousel = ->
	@each -> new Carousel @

# Auto-load on every `.carousel` element
$('.carousel').carousel()

carousel.styl

$carousel
	/*
	Style definitions for a carousel widget. The behavior layer is auto
	initialized upon the existence of the "carousel" class name.

		<section class="carousel">
			<ul class="carousel-elements">
				<li><img src="..." alt="..."></li>
				<li><img src="..." alt="..."></li>
				...
			</ul>
		</section>
	*/
	overflow hidden

	> .carousel-elements
		margin 0
		transition transform 0.25s
		user-select none
		white-space nowrap

		> *
			display inline-block
			position relative
			white-space normal
			width 100%