Skip to content

Instantly share code, notes, and snippets.

@abbood
Created May 27, 2014 16:53
Show Gist options
  • Save abbood/a5597fcd11aa4dd9937c to your computer and use it in GitHub Desktop.
Save abbood/a5597fcd11aa4dd9937c to your computer and use it in GitHub Desktop.
custom coffeescript file
$(document).ready ->
$.fn.isAfter = (sel) ->
$(@prev()).is $(sel)
$.fn.isBefore = (sel) ->
$(@next()).is $(sel)
## definitions (good for caching)
menus = ['ul.car', '#price_slider', '#size_slider', 'ul.bed'];
buttons = $('.button'); annotations = $('.annotation')
parentMenu = $('.options_slider'); menuButton = $('.menu_button')
carSubMenu = $('ul.car'); bedSubMenu = $('ul.bed')
numCarsSelected = 0; numBedsSelected = 0
carAnnotation = $('.car.annotation'); bedAnnotation = $('.bed.annotation')
priceAnnotation = $('.price.annotation'); sizeAnnotation = $('.size.annotation')
priceSlider = $("#price_slider > div:first"); sizeSlider = $("#size_slider > div:first")
priceSliderCaption = $('#price_slider .caption'); sizeSliderCaption = $('#size_slider .caption')
toggleAllMenus = (buttonClicked) ->
$.map menus, (menu) ->
$(menu).animate width: "toggle" if not $(menu).isAfter(buttonClicked) and $(menu).is(":visible")
$(menu).animate width: "toggle" if $(menu).isAfter(buttonClicked)
return
## attach handlers
$.map buttons, (button) ->
$(button).click ->
toggleAllMenus(this)
return
return
menuButton.click ->
parentMenu.animate width: "toggle"
return
$.map carSubMenu.children(), (numCarsOption) ->
$(numCarsOption).click ->
numCarsSelected = getElementIndexInReverseOrder(carSubMenu, numCarsOption)
carAnnotation.show().text(numCarsSelected)
return
return
$.map carSubMenu.children(), (numCarsOption) ->
$(numCarsOption).click ->
numCarsSelected = getElementIndexInReverseOrder(carSubMenu, numCarsOption)
carAnnotation.show().text(numCarsSelected)
$.each carSubMenu.children(), (index, element) ->
$(element).removeClass('selected')
$(this).addClass('selected')
return
return
$.map bedSubMenu.children(), (numBedsOption) ->
$(numBedsOption).click ->
numBedsSelected = getElementIndexInReverseOrder(bedSubMenu, numBedsOption)
bedAnnotation.show().text(numBedsSelected)
$.each bedSubMenu.children(), (index, element) ->
$(element).removeClass('selected')
$(this).addClass('selected')
return
return
getElementIndexInReverseOrder = (parentList, element) ->
parentList.children().length - parentList.children().index(element)
hideEverything = () ->
## hide menus
$.each menus, (index, menu) ->
$(menu).hide()
## hide annotations
$.each annotations, (index, annotation) ->
$(annotation).hide()
parentMenu.hide();
return
hideEverything()
## create sliders
from = 0; to = 1
priceSlider.slider
range: true
min: 0
max: 500
values: [
75
300
]
slide: (event, ui) ->
priceSliderCaption.text "$" + ui.values[from] + " - $" + ui.values[to]
priceAnnotation.show().text(ui.values[to]+"K")
return
priceSliderCaption.text "$" + priceSlider.slider("values", from) + " - $" + priceSlider.slider("values", to)
sizeSlider.slider
range: true
min: 0
max: 500
values: [
75
300
]
slide: (event, ui) ->
sizeSliderCaption.text "$" + ui.values[from] + " - $" + ui.values[to]
sizeAnnotation.show().text(ui.values[to]+"K")
return
return
sizeSliderCaption.text "$" + sizeSlider.slider("values", from) + " - $" + sizeSlider.slider("values", to)
return
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment