emyller · March 23, 2014 20:36
diff --git a/carousel.coffee b/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()
diff --git a/carousel.styl b/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%
	###
	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
	/*
	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%