wishlist for display_simple

wishlist.coffee

jQuery ($) ->
	###*
	DropdownMenu provides a simple button / reveal content model

	Generic enough to be reused provided there's a .button and .expandable child element
	@class DropdownMenu
	@requires jQuery 1.8+
	###
	class DropdownMenu
		###*
		@constructor
		@param node {jQuery Selector} The DropdownMenu wrapper node
		###
		constructor: (@node) ->
			console.log "Dropdown instantiated"
			@node.addClass 'is-collapsed'


		###*
		Collapses menu
		@public
		@method collapse
		###
		collapse: ->
			console.log "Collapse it"
			if @node? and @container?
				@node.removeClass('is-expanded').addClass('is-collapsed')
				@container.animate
					'height' : 0
				, 250, =>
					@container.hide().attr 'style', null
					@icon.removeClass('icon-down-arrow-grey').addClass('icon-right-arrow-grey')

		###*
		Expands menu
		@public
		@method expand
		@example
			var a  = new DropdownMenu($('#foo'));
			a.expand()
		###
		expand: ->
			console.log "Expand it"
			if @node? and @container?
				@node.removeClass('is-collapsed').addClass('is-expanded')
				expandedHeight = "#{@container.outerHeight(true)}px"
				@container.css({height: '0'}).show().animate
					height: expandedHeight
				, '250'
				@icon.removeClass('icon-right-arrow-grey').addClass('icon-down-arrow-grey')

		###*
		Toggle Dropdown Visibility

		@private
		@method _toggleDropdown
		@param e {Event} click event
		###
		_toggleDropdown: (e) =>
			console.log "_toggleDropdown called"
			e.preventDefault()
			if @node.hasClass 'is-collapsed'
				@expand()
			else if @node.hasClass 'is-expanded'
				@collapse()

	###*
	DropdownMenu provides a simple button / reveal content model

	Generic enough to be reused provided there's a .button and .expandable child element
	@class WishListProductMenu
	@requires jQuery 1.8+
	###
	class WishListProductMenu extends DropdownMenu
		###*
		@constructor
		@param node {jQuery Selector} The DropdownMenu wrapper node
		###
		constructor: (@node) ->
			console.log "WishListProductMenu instantiated"
			@listsContainer = @node.find('.wishlist-lists')
			@createForm = @node.find('#wishlist-create')
			@container = @node.find('.expandable')
			@button = @node.find('.button')
			@icon = @node.find('.icon')

			# Set default state
			@node.addClass 'is-collapsed'

			# Establish listeners 
			@_setupListener()


		###*
		Establishes listener events for click events on the button
		Toggle expand / collapse based on state

		@private
		@method _setupListener
		@return {Object} Listener construct
		###
		_setupListener: ->
			console.log "Set-up listeners"
			@createForm.on 'submit', @_createWishList
			@listsContainer.on 'click', 'li', @_addToWishList
			@button.on 'click', @_toggleDropdown

			# super(@)

		###*
		Add Item to selected wish list

		@private
		@method _addToWishList
		@param e {Event} Listener construct
		###
		_addToWishList:(e) =>
			console.log "_addToWishList called"
			e.preventDefault()
			wishListId = $(e.currentTarget).data('wishlistid')
			wishListContainer = $(e.currentTarget).parent('ul')
			productQuantity = $('#qtyselected').attr('value')
			@_addProductToWishList wishListId, wishListContainer.data('productid'), wishListContainer.data('manufacturer'), productQuantity


		_addProductToWishList: (wishListId, productId, manufacturer, quantity = 1) ->
			$.ajax
				url: '/index.cfm?page=wishlists:addProductByProductIDManufacturer&fmt=json'
				type: 'POST'
				dataType: 'json'
				data:
					wishlistID: wishListId
					productID: productId
					manufacturer: manufacturer
					qty: quantity

				success: (res) ->
					console.log 'Successfully added item to wishlist'
					loc = window.location
					window.location.href = "https://#{loc.hostname}/index.cfm?page=wishlists:index&id=#{wishListId}"

				error: (res) ->
					console.error res

		###*
		Toggle Dropdown Visibility

		@private
		@method _toggleDropdown
		@param e {Event} click event
		###
		_createWishList: (e) =>
			console.log "_createWishList called"
			e.preventDefault()
			createForm = $(e.currentTarget)
			wishlistName = $('#wishlist-new')

			if wishlistName.attr('value') != ""
				$.ajax
					url: '/index.cfm?page=wishlists:createWishlist&fmt=json'
					type: 'POST'
					dataType: 'json'
					data: createForm.serialize()
					success: (res) =>
						# Add item to list and reset form
						@_updateWishlistLists().done =>
							@_resizeWidget()
							createForm[0].reset()

						# Alternative Implemntation where it just auto-adds the product
						# wishlistId = res.WishList.WishListId
						# productId = @listsContainer.find('ul').data('productid')
						# manufacturer = @listsContainer.find('ul').data('manufacturer')
						# @_addProductToWishList wishlistId, productId, manufacturer

					error: (res) ->
						console.error "Could not create new list"
			else
				console.error('No value')
				return false        

		###*
		Toggle Dropdown Visibility

		@private
		@method _toggleDropdown
		@param e {Event} click event
		###
		_toggleDropdown: (e) =>
			console.log "_toggleDropdown called"
			e.preventDefault()
			if @node.hasClass 'is-collapsed'
				@expand()
			else if @node.hasClass 'is-expanded'
				@collapse()

		###*
		Resizes menu widget
		Looks like you can't just call outerHeight on the whole container but sum the parts </lame>

		@private
		@method _resizeWidget
		###
		_resizeWidget: ->
			console.log "_resizeWidget called"
			if @node? and @container?
				newHeight = @container.find('ul').outerHeight(true) + @container.find('form').outerHeight(true)
				@container.animate
					'height' : newHeight + 'px'
				, 250

		###*
		PJAX-style update of available lists

		@private
		@method _updateWishlistLists
		###
		_updateWishlistLists: ->
			console.log "_updateWishlistLists called"
			$.ajax
				url: '/index.cfm?page=wishlists:lists_widget&fmt=pjax'
				success: (res) ->
					listContainer = $('.wishlist-lists ul')
					listContainer.html(res)
				error: (res) =>
					console.error "could not fetch fu"


	###*
	Establish new DropdownMenu widget
	###
	wishlistWidget = new WishListProductMenu($('#wishlist-dropdown'));