beagle_app/app/assets/javascripts/public.js.coffee
Nicolas Bally 7b6cba2128 initial
2015-01-27 23:13:36 +01:00

394 lines
8.5 KiB
CoffeeScript

#= require jquery
#= require jquery_ujs
#= require jquery.bxslider
#= require jquery.easing.1.3
@scrollToAnchor = (aid) ->
aTag = $("#" + aid )
$("html,body").animate({scrollTop: aTag.offset().top}, 1000)
return
bottom = 0
prev_link = ""
$("document").ready ->
position_img_now = ->
# alert $("#large .large-img").outerHeight(false)
imgheight = $("#large .large-img").outerHeight(false) + $("#large h3").outerHeight(false)
margintop = (( $(window).height() - imgheight) / 2 )
$("#large .large-img").css
"margin-top" :(margintop+"px")
#"width" : "100px"
position_img = ->
$("#large .large-img").one "load", ->
position_img_now()
$("#video").click ->
maxwidth = 1000
maxheight = 900
prev_link = $(this)
$("body").append "<div id='large'></div>"
title = false
$("#large").append "<div class='img_container first' style='width:90%;margin:auto;'></div>"
$("#large").append "<img src='/close.png' class='close_link' />"
$(".img_container.first").append '<iframe width="1000" height="563" src="//www.youtube.com/embed/ED4b38n4d-U?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>'
$(".img_container.first").append "<h3>Vidéo de présentation</h3>"
$("#large").fadeIn(500)
position_img();
if $(window).height() > (maxheight+100)
$("#large .large-img").css
"max-height" : maxheight
else
$("#large .large-img").css
"max-height" : "85%"
if $(window).width() > (maxwidth+100)
$("#large .large-img").css
"max-width" : maxwidth
else
$("#large .large-img").css
"max-width" : "85%"
resize();
$("#large .img_container.first").css
"padding-top": (($(window).height()- $("#large .img_container.first iframe").height()-50)/ 2)+"px"
#position_img();
false
$(".expandable_image").click ->
maxwidth = 1000
maxheight = 900
prev_link = $(this)
$("body").append "<div id='large'></div>"
title = false
$("#large").append "<div class='img_container first'></div>"
$("#large").append "<img src='/close.png' class='close_link' />"
$(".img_container.first").append "<img src="+$(this).attr("href")+" class='large-img' />"
if $(this).attr "title"
title = $(this).attr "title"
$(".img_container.first").append "<h3>"+title+"</h3>"
$("#large .large-img").one "load", ->
$("#large").fadeIn(500)
position_img();
if $(window).height() > (maxheight+100)
$("#large .large-img").css
"max-height" : maxheight
else
$("#large .large-img").css
"max-height" : "85%"
if $(window).width() > (maxwidth+100)
$("#large .large-img").css
"max-width" : maxwidth
else
$("#large .large-img").css
"max-width" : "85%"
position_img();
false
$(".rea-gal a").click ->
maxwidth = 1000
maxheight = 900
prev_link = $(this)
$("body").append "<div id='large'></div>"
title = false
$("#large").append "<img src='/arrow-next.png' class='next' />"
$("#large").append "<img src='/arrow-prev.png' class='prev' />"
$("#large").append "<img src='/close.png' class='close_link' />"
$("#large").append "<div class='img_container first'></div>"
$(".img_container.first").append "<img src="+$(this).attr("href")+" class='large-img' />"
if $(this).attr "title"
title = $(this).attr "title"
$(".img_container.first").append "<h3>"+title+"</h3>"
$("#large .large-img").one "load", ->
$("#large").fadeIn(500)
position_img();
if $(window).height() > (maxheight+100)
$("#large .large-img").css
"max-height" : maxheight
else
$("#large .large-img").css
"max-height" : "85%"
if $(window).width() > (maxwidth+100)
$("#large .large-img").css
"max-width" : maxwidth
else
$("#large .large-img").css
"max-width" : "85%"
position_img();
false
$("body").on "click", "#large", ->
$(this).fadeOut 300, ->
$(this).remove()
$("body").on "click" ,"#large .prev",->
if prev_link.prev("a").length > 0
link = prev_link.closest("a").prev("a")
else
link = prev_link.closest("div").children("a:last")
#titre = photo.find("h3")
$(".img_container.first").fadeOut 300, ->
$("#large h3").remove()
if link.attr "title"
title = link.attr "title"
$(".img_container.first").append "<h3>"+title+"</h3>"
$('#large .large-img').attr("src", link.attr("href"))
$("#large .large-img").one "load", ->
$(".img_container.first").fadeIn()
position_img();
prev_link = link
false
$("body").on "click" ,"#large .next",->
if prev_link.next("a").length > 0
link = prev_link.closest("a").next("a")
else
link = prev_link.closest("div").children("a:first")
#titre = photo.find("h3")
$(".img_container.first").fadeOut 300, ->
$("#large h3").remove()
if link.attr "title"
title = link.attr "title"
$(".img_container.first").append "<h3>"+title+"</h3>"
$('#large .large-img').attr("src", link.attr("href"))
$("#large .large-img").one "load", ->
$(".img_container.first").fadeIn()
position_img();
prev_link = link
false
$('.gal').bxSlider
adaptiveHeight: true,
auto: true,
speed:1000,
pause:5000,
left =0
top = 0
offset= 0
resize = ->
$("iframe").each ->
$(this).css
"height" : Math.round($(this).width()/ 1.77)+"px"
if $(window).width() > 1250
$(".infos .main").css
"position" : "static"
$(".bottom_image").css
"left" : "0px"
else
$(".infos .main").css
"position" : "relative"
$(".bottom_image").css
"left" : "-120px"
$(".rea-gal").each ->
$(this).find("img").css "width", Math.floor(((100) )/ 5)+"%"
$("#large").css "min-height", ($(window).height()-30)+"px"
$(".bxslider").each ->
height = ($(window).height())
optimal_height = Math.round($(this).width()/ $(this).data("ratio"))
if optimal_height < height
height = optimal_height
$(this).find("li").css("max-height", height+"px")
position_img_now();
resize()
$('.bxslider').bxSlider
mode: 'fade'
captions: true
auto: true
resize()
$(window).on "resize", ->
resize()
top_height = $(window).height()
img_height = 0.0
initial_y = 0
resize_background = ->
top_height = $(window).height()
$(".top").css(
"height" : top_height+"px"
)
if ($(window).width() / $(window).height()) < 1.5
img_height = $(window).height()
initial_y = ((top_height - img_height)/ 2)
$(".top").css(
"background-position-y" : ""+Math.round(initial_y)+"px"
"background-size" : "auto "+img_height+"px"
)
else
img_height = Math.round($(window).width()/ 1.5)
initial_y = ((top_height - img_height)/ 2)
$(".top").css({
"background-size" : $(window).width()+"px"
"background-position-y" : ""+Math.round(initial_y)+"px"
})
resize_background()
$(window).on "resize", ->
resize_background()
$(window).on "scroll", ->
top = $(window).scrollTop()
if $(window).width() > 1024
#if $(window).scrollTop() > (height-50)
# $("#menu").css("position", "fixed")
#else
# $("#menu").css("position", "relative")
$(".top").css(
"background-position" : "center "+(initial_y - top*0.55)+"px"
)
if top > (top_height - 50)
$("#menu").css
"background-color" : "rgba(0,0,0,0.8)"
else
$("#menu").css
"background-color" : "rgba(0,0,0,0.5)"
$(".top h1, .top h2").css(
"opacity" : (1- (Math.abs(((top+1)) / (0.7 * top_height))))
)
#if $(window).scrollTop() > 200
# $(".top h1, .top h2").fadeOut()
#else if $(window).scrollTop() < 200
# $(".top h1, .top h2").fadeIn()