Merge branch 'develop' of bitbucket.org:jamkazam/jam-cloud into develop
This commit is contained in:
commit
da090bd1a9
|
|
@ -47,7 +47,7 @@ ActiveAdmin.register JamRuby::PromoBuzz, :as => 'Buzz' do
|
|||
|
||||
def create
|
||||
promo = PromoBuzz.create_with_params(params[:jam_ruby_promo_buzz])
|
||||
redirect_to('/admin/admin/buzzs')
|
||||
redirect_to('/admin/buzzs')
|
||||
end
|
||||
|
||||
def edit
|
||||
|
|
@ -60,7 +60,7 @@ ActiveAdmin.register JamRuby::PromoBuzz, :as => 'Buzz' do
|
|||
|
||||
def update
|
||||
resource.update_with_params(params[:jam_ruby_promo_buzz]).save!
|
||||
redirect_to('/admin/admin/buzzs')
|
||||
redirect_to('/admin/buzzs')
|
||||
end
|
||||
|
||||
end
|
||||
|
|
|
|||
|
|
@ -0,0 +1,945 @@
|
|||
|
||||
(function($){
|
||||
|
||||
var CarouselEvo = function(element, options){
|
||||
var settings = $.extend({}, $.fn.carousel.defaults, options),
|
||||
self = this,
|
||||
element = $(element),
|
||||
carousel = element.children('.slides');
|
||||
|
||||
carousel.children('div').addClass('slideItem');
|
||||
var slideItems = carousel.children('.slideItem'),
|
||||
slideImage = slideItems.find('img'),
|
||||
currentSlide = 0,
|
||||
targetSlide = 0,
|
||||
numberSlides = slideItems.length,
|
||||
isAnimationRunning = false,
|
||||
pause = true ;
|
||||
videos = {
|
||||
youtube: {
|
||||
reg: /youtube\.com\/watch/i,
|
||||
split: '=',
|
||||
index: 1,
|
||||
url:'http://www.youtube.com/embed/%id%?autoplay=1&fs=1&rel=0'},
|
||||
vimeo: {
|
||||
reg: /vimeo\.com/i,
|
||||
split: '/',
|
||||
index: 3,
|
||||
url: 'http://player.vimeo.com/video/%id%?portrait=0&autoplay=1'}
|
||||
};
|
||||
|
||||
this.current = currentSlide;
|
||||
this.length = numberSlides;
|
||||
|
||||
this.init = function(){
|
||||
var o = settings ;
|
||||
|
||||
initSlides();
|
||||
|
||||
if (o.directionNav == true){
|
||||
initDirectionButton();
|
||||
}
|
||||
|
||||
if (o.buttonNav != 'none'){
|
||||
initButtonNav();
|
||||
}
|
||||
|
||||
if (o.reflection == true){
|
||||
initReflection();
|
||||
}
|
||||
|
||||
if (o.shadow == true){
|
||||
initShadow();
|
||||
}
|
||||
|
||||
if (o.description == true){
|
||||
initDesc();
|
||||
}
|
||||
|
||||
if (o.autoplay == true){
|
||||
runAutoplay();
|
||||
}
|
||||
|
||||
initVideo();
|
||||
|
||||
};
|
||||
|
||||
/* _________________________________ */
|
||||
|
||||
/* IMAGE */
|
||||
/* _________________________________ */
|
||||
|
||||
var setImageSize = function(p){
|
||||
var o = settings,
|
||||
n = numberSlides ,
|
||||
w = o.frontWidth,
|
||||
h = o.frontHeight,
|
||||
ret;
|
||||
|
||||
if (p != 0){
|
||||
if (o.hAlign == 'center') {
|
||||
if (p > 0 && p <= Math.ceil((n-1)/2)){
|
||||
var front = setImageSize(p-1);
|
||||
w = o.backZoom * front.width ;
|
||||
h = o.backZoom * front.height ;
|
||||
}
|
||||
else {
|
||||
var sz = setImageSize(n-p);
|
||||
w = sz.width;
|
||||
h = sz.height;
|
||||
}
|
||||
}
|
||||
else {
|
||||
//left & right
|
||||
if (p == (n -1)){
|
||||
w = o.frontWidth / o.backZoom;
|
||||
h = o.frontHeight / o.backZoom;
|
||||
}
|
||||
else{
|
||||
var front = setImageSize(p-1);
|
||||
w = o.backZoom * front.width ;
|
||||
h = o.backZoom * front.height ;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return ret = {width:w, height:h};
|
||||
};
|
||||
|
||||
/* _______________________________ */
|
||||
|
||||
/* SLIDE */
|
||||
/* _______________________________ */
|
||||
|
||||
var setSlideSize = function(p){
|
||||
var o = settings,
|
||||
n = numberSlides ,
|
||||
w = o.frontWidth,
|
||||
h = o.frontHeight + reflectionHeight(p) + shadowHeight(p),
|
||||
ret;
|
||||
|
||||
if (p != 0){
|
||||
if (o.hAlign == 'center'){
|
||||
if (p > 0 && p <= Math.ceil((n-1)/2)){
|
||||
var front = setImageSize(p-1);
|
||||
w = o.backZoom * front.width ;
|
||||
h = (o.backZoom * front.height) + reflectionHeight(p) + shadowHeight(p);
|
||||
}
|
||||
else {
|
||||
var sz = setSlideSize(n - p);
|
||||
w = sz.width;
|
||||
h = sz.height;
|
||||
}
|
||||
}
|
||||
else {
|
||||
//left & right
|
||||
if (p == (n -1)){
|
||||
w = o.frontWidth / o.backZoom;
|
||||
h = (o.frontHeight/o.backZoom) + reflectionHeight(p) + shadowHeight(p);
|
||||
}
|
||||
else{
|
||||
var front = setImageSize(p-1);
|
||||
w = o.backZoom * front.width ;
|
||||
h = (o.backZoom * front.height) + reflectionHeight(p) + shadowHeight(p);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return ret = {width:w, height:h};
|
||||
};
|
||||
|
||||
var getMargin = function(p){
|
||||
var o = settings,
|
||||
vm, hm, ret,
|
||||
iz = setImageSize(p);
|
||||
|
||||
vm = iz.height * o.vMargin;
|
||||
hm = iz.width * o.hMargin;
|
||||
return ret = {vMargin:vm, hMargin:hm};
|
||||
};
|
||||
|
||||
var centerPos = function(p){
|
||||
var o = settings,
|
||||
c = topPos(p-1) + (setImageSize(p-1).height - setImageSize(p).height)/2;
|
||||
|
||||
if (o.hAlign != 'center'){
|
||||
if (p == (numberSlides -1)){
|
||||
c = o.top - ((setImageSize(p).height - setImageSize(0).height)/2);
|
||||
}
|
||||
}
|
||||
return c;
|
||||
};
|
||||
|
||||
var topPos = function(p){
|
||||
var o = settings,
|
||||
t = o.top,
|
||||
vm = getMargin(p).vMargin ;
|
||||
|
||||
if (o.vAlign == 'bottom'){
|
||||
t = o.bottom;
|
||||
}
|
||||
|
||||
if (p != 0){
|
||||
if (o.hAlign == 'center'){
|
||||
if (p > 0 && p <= Math.ceil((numberSlides-1)/2)){
|
||||
if (o.vAlign == 'center'){
|
||||
t = centerPos(p);
|
||||
}
|
||||
else {
|
||||
t = centerPos(p) + vm;
|
||||
}
|
||||
}
|
||||
else{
|
||||
t = topPos(numberSlides -p);
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (p == (numberSlides -1)){
|
||||
if (o.vAlign == 'center'){
|
||||
t = centerPos(p);
|
||||
}
|
||||
else {
|
||||
t = centerPos(p) - vm;
|
||||
}
|
||||
}
|
||||
else{
|
||||
if (o.vAlign == 'center'){
|
||||
t = centerPos(p);
|
||||
}
|
||||
else {
|
||||
t = centerPos(p) + vm ;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return t;
|
||||
};
|
||||
|
||||
var horizonPos = function(p){
|
||||
var o = settings,
|
||||
n = numberSlides ,
|
||||
hPos,
|
||||
mod = n % 2,
|
||||
endSlide = n / 2,
|
||||
|
||||
|
||||
// hm = getMargin(p).hMargin+80; // +80 was added to move the images more out
|
||||
hm = getMargin(p).hMargin; // @FIXME NOTE: Original line is above. JK tweak.
|
||||
|
||||
if (p == 0){
|
||||
if (o.hAlign == 'center'){
|
||||
hPos = (o.carouselWidth - o.frontWidth)/2;
|
||||
}
|
||||
else {
|
||||
hPos = o.left ;
|
||||
if (o.hAlign == 'right'){
|
||||
hPos = o.right;
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (o.hAlign == 'center'){
|
||||
if (p > 0 && p <= Math.ceil((n-1)/2)){
|
||||
hPos = horizonPos(p-1) - hm;
|
||||
|
||||
if (mod == 0){
|
||||
if (p == endSlide){
|
||||
hPos = (o.carouselWidth - setSlideSize(p).width)/2 ;
|
||||
}
|
||||
}
|
||||
}
|
||||
else{
|
||||
hPos = o.carouselWidth - horizonPos(n-p) - setSlideSize(p).width;
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (p == (n -1)){
|
||||
hPos = horizonPos(0) - (setSlideSize(p).width - setSlideSize(0).width)/2 - hm ;
|
||||
}
|
||||
else{
|
||||
hPos = horizonPos(p-1) + (setSlideSize(p-1).width - setSlideSize(p).width)/2 + hm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return hPos;
|
||||
};
|
||||
|
||||
var setOpacity = function(p){
|
||||
var o = settings,
|
||||
n = numberSlides ,
|
||||
opc = 1,
|
||||
hiddenSlide = n - o.slidesPerScroll;
|
||||
|
||||
if (hiddenSlide < 2){
|
||||
hiddenSlide = 2;
|
||||
}
|
||||
|
||||
if (o.hAlign == 'center'){
|
||||
var s1 = (n-1)/2,
|
||||
hs2 = hiddenSlide / 2,
|
||||
lastSlide1 = (s1+1) - hs2,
|
||||
lastSlide2 = s1 + hs2;
|
||||
|
||||
if (p == 0){
|
||||
opc = 1;
|
||||
}
|
||||
else {
|
||||
opc = o.backOpacity;
|
||||
if (p >= lastSlide1 && p <= lastSlide2){
|
||||
opc = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
else { //left & right
|
||||
if (p == 0){
|
||||
opc = 1;
|
||||
}
|
||||
else {
|
||||
opc = o.backOpacity;
|
||||
if (!(p < (n - hiddenSlide))){
|
||||
opc = 0 ;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return opc;
|
||||
};
|
||||
|
||||
var setSlidePosition = function(p) {
|
||||
var pos = new Array(),
|
||||
o = settings,
|
||||
n = numberSlides ;
|
||||
|
||||
for (var i = 0; i < n; i++){
|
||||
var sz = setSlideSize(i);
|
||||
if (o.hAlign == 'left'){
|
||||
pos[i] = {width:sz.width, height:sz.height, top:topPos(i), left:horizonPos(i), opacity:setOpacity(i)};
|
||||
if (o.vAlign == 'bottom'){
|
||||
pos[i] = {width:sz.width, height:sz.height, bottom:topPos(i), left:horizonPos(i), opacity:setOpacity(i)} ;
|
||||
}
|
||||
}
|
||||
else {
|
||||
pos[i] = {width:sz.width, height:sz.height, top:topPos(i), right:horizonPos(i), opacity:setOpacity(i)} ;
|
||||
if (o.vAlign == 'bottom'){
|
||||
pos[i] = {width:sz.width, height:sz.height, bottom:topPos(i), right:horizonPos(i), opacity:setOpacity(i)} ;
|
||||
}
|
||||
}
|
||||
}
|
||||
return pos[p];
|
||||
};
|
||||
|
||||
// returns the slide # at location i of the ith image
|
||||
var slidePos = function(i) {
|
||||
var cs = currentSlide,
|
||||
pos = i - cs;
|
||||
|
||||
if (i < cs){
|
||||
pos += numberSlides ;
|
||||
}
|
||||
|
||||
return pos;
|
||||
};
|
||||
|
||||
//returns z-index
|
||||
var zIndex = function(i){
|
||||
var z,
|
||||
n = numberSlides ,
|
||||
hAlign = settings.hAlign;
|
||||
|
||||
if (hAlign == 'left' || hAlign == 'right'){
|
||||
if (i == (n - 1)){
|
||||
z = n - 1;
|
||||
}
|
||||
else {
|
||||
z = n - (2+i);
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (i >= 0 && i <= ((n - 1)/2)){
|
||||
z = (n - 1) - i;
|
||||
}
|
||||
else {
|
||||
z = i - 1 ;
|
||||
}
|
||||
}
|
||||
return z;
|
||||
};
|
||||
|
||||
var slidesMouseOver = function(event){
|
||||
var o = settings ;
|
||||
if (o.autoplay == true && o.pauseOnHover == true){
|
||||
stopAutoplay();
|
||||
}
|
||||
};
|
||||
|
||||
var slidesMouseOut = function(event){
|
||||
var o = settings ;
|
||||
if (o.autoplay == true && o.pauseOnHover == true){
|
||||
if (pause == true){
|
||||
runAutoplay();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var initSlides = function(){
|
||||
var o = settings,
|
||||
n = numberSlides,
|
||||
images = slideImage ;
|
||||
|
||||
carousel
|
||||
.css({'width':o.carouselWidth+'px', 'height':o.carouselHeight+'px'})
|
||||
.bind('mouseover', slidesMouseOver)
|
||||
.bind('mouseout', slidesMouseOut);
|
||||
|
||||
for (var i = 0; i < n; i++){
|
||||
var item = slideItems.eq(i);
|
||||
item
|
||||
.css(setSlidePosition(slidePos(i)))
|
||||
.bind('click', slideClick);
|
||||
|
||||
slideItems.eq(slidePos(i)).css({'z-index':zIndex(i)});
|
||||
images.eq(i).css(setImageSize(slidePos(i)));
|
||||
|
||||
var op = item.css('opacity');
|
||||
if (op == 0){
|
||||
item.hide();
|
||||
}
|
||||
else {
|
||||
item.show();
|
||||
}
|
||||
}
|
||||
|
||||
// mouse wheel navigation
|
||||
if (o.mouse == true){
|
||||
carousel.mousewheel(function(event, delta){
|
||||
if (delta > 0){
|
||||
goTo(currentSlide-1, true, false);
|
||||
return false ;
|
||||
}
|
||||
else if (delta < 0){
|
||||
goTo(currentSlide+1, true, false);
|
||||
return false ;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var hideItem = function(slide){
|
||||
var op = slide.css('opacity');
|
||||
if (op == 0){ slide.hide();}
|
||||
};
|
||||
|
||||
var goTo = function(index, isStopAutoplay, isPause){
|
||||
if (isAnimationRunning == true){return;}
|
||||
|
||||
var o = settings,
|
||||
n = numberSlides ;
|
||||
|
||||
if (isStopAutoplay == true){
|
||||
stopAutoplay();
|
||||
}
|
||||
|
||||
targetSlide = index;
|
||||
if (targetSlide == n){ targetSlide = 0; }
|
||||
if (targetSlide == -1){ targetSlide = n - 1; }
|
||||
o.before(self);
|
||||
animateSlide();
|
||||
pause = isPause ;
|
||||
};
|
||||
|
||||
var animateSlide = function(){
|
||||
var o = settings,
|
||||
n = numberSlides;
|
||||
|
||||
if (isAnimationRunning == true ){ return ; }
|
||||
|
||||
if (currentSlide == targetSlide){
|
||||
isAnimationRunning = false ;
|
||||
return ;
|
||||
}
|
||||
|
||||
isAnimationRunning = true ;
|
||||
|
||||
hideDesc(currentSlide);
|
||||
|
||||
// direction
|
||||
if (currentSlide > targetSlide) {
|
||||
var forward = n - currentSlide + targetSlide,
|
||||
backward = currentSlide - targetSlide;
|
||||
}
|
||||
else {
|
||||
var forward = targetSlide - currentSlide,
|
||||
backward = currentSlide + n - targetSlide ;
|
||||
}
|
||||
|
||||
if (forward > backward) {
|
||||
dir = -1;
|
||||
}
|
||||
else {
|
||||
dir = 1;
|
||||
}
|
||||
|
||||
currentSlide += dir;
|
||||
if (currentSlide == n) { currentSlide = 0; }
|
||||
if (currentSlide == -1) { currentSlide = n - 1; }
|
||||
|
||||
hideVideoOverlay();
|
||||
buttonNavState();
|
||||
showDesc(currentSlide);
|
||||
|
||||
//animation
|
||||
for (var i = 0; i < n; i++){
|
||||
animateImage(i);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
var animateImage = function(i){
|
||||
var o = settings,
|
||||
item = slideItems.eq(i),
|
||||
pos = slidePos(i);
|
||||
|
||||
item.show();
|
||||
item.animate(setSlidePosition(pos), o.speed, 'linear', function(){
|
||||
hideItem($(this));
|
||||
if (i == numberSlides - 1){
|
||||
isAnimationRunning = false ;
|
||||
if (currentSlide != targetSlide){
|
||||
animateSlide();
|
||||
}
|
||||
else {
|
||||
self.current = currentSlide ;
|
||||
showVideoOverlay(currentSlide);
|
||||
o.after(self);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
item.css({'z-index':zIndex(pos)});
|
||||
slideImage.eq(i).animate(setImageSize(pos), o.speed, 'linear');
|
||||
|
||||
if (o.reflection == true){
|
||||
animateReflection(o, item, i);
|
||||
}
|
||||
|
||||
if (o.shadow == true){
|
||||
animateShadow(o, item, i);
|
||||
}
|
||||
};
|
||||
|
||||
var slideClick = function(event){
|
||||
var $this = $(this);
|
||||
if ($this.index() != currentSlide){
|
||||
goTo($this.index(), true, false);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/* ________________________________ */
|
||||
|
||||
/* REFLECTION */
|
||||
/* ________________________________ */
|
||||
|
||||
var reflectionHeight = function(p){
|
||||
var h = 0,
|
||||
o = settings ;
|
||||
|
||||
if (o.reflection == true){
|
||||
h = o.reflectionHeight * setImageSize(p).height;
|
||||
}
|
||||
|
||||
return h ;
|
||||
};
|
||||
|
||||
var initReflection = function(){
|
||||
var o = settings ,
|
||||
items = slideItems ,
|
||||
images = slideImage ,
|
||||
n = numberSlides,
|
||||
opc = o.reflectionOpacity,
|
||||
start = 'rgba('+o.reflectionColor+','+ opc +')',
|
||||
end = 'rgba('+o.reflectionColor+',1)';
|
||||
|
||||
var style = '<style type="text/css">';
|
||||
style += '.slideItem .gradient {';
|
||||
style += 'position:absolute; left:0; top:0; margin:0; padding:0; border:none; width:100%; height:100%; ';
|
||||
style += 'background: -moz-linear-gradient('+start+','+end+'); ';
|
||||
style += 'background: -o-linear-gradient('+start+','+end+'); ';
|
||||
style += 'background: -webkit-linear-gradient('+start+','+end+'); ';
|
||||
style += 'background: -webkit-gradient(linear, 0% 0%, 0% 100%, from('+start+'), to('+end+')); ';
|
||||
style += 'background: linear-gradient('+start+','+end+'); ';
|
||||
style += '} ';
|
||||
style += '.slideItem .reflection {';
|
||||
style += 'filter: progid:DXImageTransform.Microsoft.Alpha(style=1,opacity='+(opc*100)+',finishOpacity=0,startX=0,finishX=0,startY=0,finishY=100)';
|
||||
style += '-ms-filter: progid:DXImageTransform.Microsoft.Alpha(style=1,opacity='+(opc*100)+',finishOpacity=0,startX=0,finishX=0,startY=0,finishY=100)';
|
||||
style += '}';
|
||||
style += '</style>';
|
||||
|
||||
$(style).appendTo('head');
|
||||
|
||||
for (var i=0; i < n; i++){
|
||||
var src = images.eq(i).attr('src'),
|
||||
sz = setImageSize(i);
|
||||
|
||||
$('<div class="reflection"></div>')
|
||||
.css({'position':'absolute', 'margin':'0', 'padding':'0', 'border':'none', 'overflow':'hidden', 'left':'0',
|
||||
'top':setImageSize(i).height+'px', 'width':'100%', 'height':reflectionHeight(i)})
|
||||
.appendTo(items.eq(i))
|
||||
.append($('<img src="'+src+'" />').css({'width':sz.width+'px', 'height':sz.height+'px', 'left':'0','margin':'0',
|
||||
'padding':'0', 'border':'none', '-moz-transform':'rotate(180deg) scale(-1,1)',
|
||||
'-webkit-transform':'rotate(180deg) scale(-1,1)', '-o-transform':'rotate(180deg) scale(-1,1)',
|
||||
'transform':'rotate(180deg) scale(-1,1)', 'filter': 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)',
|
||||
'-ms-filter': 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)'}))
|
||||
.append('<div class="gradient"></div>');
|
||||
}
|
||||
};
|
||||
|
||||
var animateReflection = function(option, item, i){
|
||||
var ref = item.children('.reflection'),
|
||||
speed = option.speed,
|
||||
sz = setImageSize(slidePos(i));
|
||||
|
||||
ref.animate({'top':sz.height+'px', 'height':reflectionHeight(slidePos(i))}, speed, 'linear');
|
||||
ref.children('img').animate(sz, speed, 'linear');
|
||||
};
|
||||
|
||||
/* ________________________________ */
|
||||
|
||||
/* SHADOW */
|
||||
/* ________________________________ */
|
||||
|
||||
var shadowHeight = function(p){
|
||||
var sh = 0;
|
||||
if (settings.shadow == true){
|
||||
sh = 0.1 * setImageSize(p).height;
|
||||
}
|
||||
return sh ;
|
||||
};
|
||||
|
||||
var shadowMiddleWidth = function(p){
|
||||
var w,
|
||||
s = slideItems.eq(p).find('.shadow'),
|
||||
sL = s.children('.shadowLeft'),
|
||||
sR = s.children('.shadowRight'),
|
||||
sM = s.children('.shadowMiddle');
|
||||
return w = setImageSize(p).width - (sL.width() + sR.width());
|
||||
};
|
||||
|
||||
var initShadow = function(){
|
||||
var items = slideItems,
|
||||
n = numberSlides,
|
||||
sWidth = setImageSize(0).width,
|
||||
sInner = '<div class="shadowLeft"></div><div class="shadowMiddle"></div><div class="shadowRight"></div>';
|
||||
|
||||
if (settings.hAlign != 'center'){
|
||||
sWidth = setImageSize(n-1).width;
|
||||
}
|
||||
|
||||
for (var i = 0; i < n; i++){
|
||||
var item = items.eq(i);
|
||||
$('<div class="shadow"></div>')
|
||||
.css({'width':sWidth+'px', 'z-index':'-1', 'position':'absolute', 'margin':'0', 'padding':'0', 'border':'none',
|
||||
'overflow':'hidden', 'left':'0', 'bottom':'0'})
|
||||
.append(sInner)
|
||||
.appendTo(item)
|
||||
.children('div').css({'position':'relative', 'float':'left'});
|
||||
|
||||
item.find('.shadow').children('.shadowMiddle').width(shadowMiddleWidth(i));
|
||||
}
|
||||
};
|
||||
|
||||
var animateShadow = function(option, item, i){
|
||||
item.find('.shadow').children('.shadowMiddle').animate({'width':shadowMiddleWidth(slidePos(i))+'px'}, option.speed, 'linear');
|
||||
};
|
||||
|
||||
/* ________________________________ */
|
||||
|
||||
/* DIRECTION BUTTONS */
|
||||
/* ________________________________ */
|
||||
|
||||
var initDirectionButton = function(){
|
||||
var el = element ;
|
||||
el.append('<div class="nextButton"></div><div class="prevButton"></div>');
|
||||
el.children('.nextButton').bind('click', function(event){
|
||||
goTo(currentSlide+1, true, false);
|
||||
});
|
||||
|
||||
el.children('.prevButton').bind('click', function(event){
|
||||
goTo(currentSlide-1, true, false);
|
||||
});
|
||||
};
|
||||
|
||||
/* ________________________________ */
|
||||
|
||||
/* BUTTON NAV */
|
||||
/* ________________________________ */
|
||||
|
||||
var initButtonNav = function(){
|
||||
var el = element,
|
||||
n = numberSlides,
|
||||
buttonName = 'bullet',
|
||||
activeClass = 'bulletActive';
|
||||
|
||||
if (settings.buttonNav == 'numbers'){
|
||||
buttonName = 'numbers';
|
||||
activeClass = 'numberActive';
|
||||
}
|
||||
|
||||
el.append('<div class="buttonNav"></div>');
|
||||
var buttonNav = el.children('.buttonNav') ;
|
||||
|
||||
for (var i = 0; i < n; i++){
|
||||
var number = '';
|
||||
if (buttonName == 'numbers'){ number = i+1 ; }
|
||||
|
||||
$('<div class="'+buttonName+'">'+number+'</div>')
|
||||
.css({'text-align':'center'})
|
||||
.bind('click', function(event){
|
||||
goTo($(this).index(), true, false);
|
||||
})
|
||||
.appendTo(buttonNav);
|
||||
}
|
||||
|
||||
var b = buttonNav.children('.'+buttonName);
|
||||
b.eq(0).addClass(activeClass)
|
||||
buttonNav.css({'width':numberSlides * b.outerWidth(true), 'height':b.outerHeight(true)});
|
||||
};
|
||||
|
||||
var buttonNavState = function(){
|
||||
var o = settings,
|
||||
buttonNav = element.children('.buttonNav');
|
||||
|
||||
if (o.buttonNav == 'numbers'){
|
||||
//numbers
|
||||
var numbers = buttonNav.children('.numbers') ;
|
||||
numbers.removeClass('numberActive');
|
||||
numbers.eq(currentSlide).addClass('numberActive');
|
||||
}
|
||||
else {
|
||||
//bullets
|
||||
var bullet = buttonNav.children('.bullet') ;
|
||||
bullet.removeClass('bulletActive');
|
||||
bullet.eq(currentSlide).addClass('bulletActive');
|
||||
}
|
||||
};
|
||||
|
||||
/* ________________________________ */
|
||||
|
||||
/* DESCRIPTION */
|
||||
/* ________________________________ */
|
||||
|
||||
var initDesc = function(){
|
||||
var desc = $(settings.descriptionContainer),
|
||||
w = desc.width(),
|
||||
h = desc.height(),
|
||||
descItems = desc.children('div'),
|
||||
n = descItems.length;
|
||||
|
||||
for (var i = 0; i < n; i++){
|
||||
descItems.eq(i)
|
||||
.hide()
|
||||
.css({'position':'absolute', 'top':'0', 'left':'0'});
|
||||
}
|
||||
|
||||
descItems.eq(0).show();
|
||||
};
|
||||
|
||||
var hideDesc = function(index){
|
||||
var o = settings ;
|
||||
if (o.description == true){
|
||||
var desc = $(o.descriptionContainer);
|
||||
desc.children('div').eq(index).hide();
|
||||
}
|
||||
};
|
||||
|
||||
var showDesc = function(index){
|
||||
var o = settings ;
|
||||
if (o.description == true){
|
||||
var desc = $(o.descriptionContainer);
|
||||
desc.children('div').eq(index).show();
|
||||
}
|
||||
};
|
||||
|
||||
/* ___________________________________ */
|
||||
|
||||
/* VIDEO */
|
||||
/* ___________________________________ */
|
||||
|
||||
var initSpinner = function(){
|
||||
var sz = setImageSize(0);
|
||||
$('<div class="spinner"></div>')
|
||||
.hide()
|
||||
.css(setSlidePosition(0))
|
||||
.css({'width':sz.width+'px', 'height':sz.height+'px', 'z-index':numberSlides+3, 'position':'absolute', 'cursor':'pointer',
|
||||
'overflow':'hidden', 'padding':'0', 'margin':'0', 'border':'none'})
|
||||
.appendTo(carousel);
|
||||
};
|
||||
|
||||
var initVideo = function(){
|
||||
initSpinner();
|
||||
var sz = setImageSize(0);
|
||||
|
||||
$('<div class="videoOverlay"></div>')
|
||||
.hide()
|
||||
.css(setSlidePosition(0))
|
||||
.css({'width':sz.width+'px', 'height':sz.height+'px', 'z-index':numberSlides+2, 'position':'absolute',
|
||||
'cursor':'pointer', 'overflow':'hidden', 'padding':'0', 'margin':'0', 'border':'none'})
|
||||
.bind('click', videoOverlayClick)
|
||||
.appendTo(carousel);
|
||||
|
||||
showVideoOverlay(currentSlide);
|
||||
};
|
||||
|
||||
var showVideoOverlay = function(index){
|
||||
if (slideItems.eq(index).children('a').hasClass('video')){
|
||||
carousel.children('.videoOverlay').show();
|
||||
}
|
||||
};
|
||||
|
||||
var hideVideoOverlay = function(){
|
||||
var car = carousel;
|
||||
car.children('.videoOverlay')
|
||||
.hide()
|
||||
.children().remove();
|
||||
car.children('.spinner').hide();
|
||||
};
|
||||
|
||||
var getVideo = function(url){
|
||||
var types = videos,
|
||||
src;
|
||||
|
||||
$.each(types, function(i, e){
|
||||
if (url.match(e.reg)){
|
||||
var id = url.split(e.split)[e.index].split('?')[0].split('&')[0];
|
||||
src = e.url.replace("%id%", id);
|
||||
}
|
||||
});
|
||||
return src ;
|
||||
};
|
||||
|
||||
var addVideoContent = function(){
|
||||
var vo = carousel.children('.videoOverlay'),
|
||||
url = slideItems.eq(currentSlide).children('a').attr('href'),
|
||||
src = getVideo(url);
|
||||
|
||||
$('<iframe></iframe>')
|
||||
.attr({'width':vo.width()+'px', 'height':vo.height()+'px', 'src':src, 'frameborder':'0'})
|
||||
.bind('load', videoLoad)
|
||||
.appendTo(vo);
|
||||
};
|
||||
|
||||
var videoOverlayClick = function(event){
|
||||
addVideoContent();
|
||||
carousel.children('.spinner').show();
|
||||
$(this).hide();
|
||||
if (settings.autoplay == true){
|
||||
stopAutoplay();
|
||||
pause = false ;
|
||||
}
|
||||
};
|
||||
|
||||
var videoLoad = function(event){
|
||||
var car = carousel;
|
||||
car.children('.videoOverlay').show();
|
||||
car.children('.spinner').hide();
|
||||
};
|
||||
|
||||
/* ________________________________ */
|
||||
|
||||
/* AUTOPLAY */
|
||||
/* ________________________________ */
|
||||
|
||||
var runAutoplay = function(){
|
||||
intervalProcess = setInterval(function(){
|
||||
goTo(currentSlide+1, false, true);
|
||||
}, settings.autoplayInterval);
|
||||
|
||||
};
|
||||
|
||||
var stopAutoplay = function(){
|
||||
if (settings.autoplay == true){
|
||||
clearInterval(intervalProcess);
|
||||
return ;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
//public api
|
||||
this.prev = function(){
|
||||
goTo(currentSlide-1, true, false);
|
||||
};
|
||||
|
||||
this.next = function(){
|
||||
goTo(currentSlide+1, true, false);
|
||||
};
|
||||
|
||||
this.goTo = function(index){
|
||||
goTo(index, true, false);
|
||||
};
|
||||
|
||||
this.pause = function(){
|
||||
stopAutoplay();
|
||||
pause = false ;
|
||||
};
|
||||
|
||||
this.resume = function(){
|
||||
if (settings.autoplay == true){
|
||||
runAutoplay();
|
||||
}
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
//plugin
|
||||
$.fn.carousel = function(options){
|
||||
|
||||
var returnArr = [];
|
||||
for(var i=0; i < this.length; i++){
|
||||
if(!this[i].carousel){
|
||||
this[i].carousel = new CarouselEvo(this[i], options);
|
||||
this[i].carousel.init();
|
||||
}
|
||||
returnArr.push(this[i].carousel);
|
||||
}
|
||||
return returnArr.length > 1 ? returnArr : returnArr[0];
|
||||
|
||||
};
|
||||
|
||||
//default settings
|
||||
$.fn.carousel.defaults = {
|
||||
hAlign:'center',
|
||||
vAlign:'center',
|
||||
hMargin:0.4,
|
||||
vMargin:0.2,
|
||||
frontWidth:340,
|
||||
frontHeight:280,
|
||||
carouselWidth:960,
|
||||
carouselHeight:360,
|
||||
left:0,
|
||||
right:0,
|
||||
top:0,
|
||||
bottom:0,
|
||||
backZoom:0.8,
|
||||
slidesPerScroll:5,
|
||||
speed:500,
|
||||
buttonNav:'none',
|
||||
directionNav:false,
|
||||
autoplay:true,
|
||||
autoplayInterval:5000,
|
||||
pauseOnHover:true,
|
||||
mouse:true,
|
||||
shadow:false,
|
||||
reflection:false,
|
||||
reflectionHeight:0.4,
|
||||
reflectionOpacity:0.5,
|
||||
reflectionColor:'95,140,60',
|
||||
description:false, descriptionContainer:'.description',
|
||||
backOpacity:1,
|
||||
before: function(carousel){},
|
||||
after: function(carousel){}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
/*! Copyright (c) 2013 Brandon Aaron (http://brandon.aaron.sh)
|
||||
* Licensed under the MIT License (LICENSE.txt).
|
||||
*
|
||||
* Version: 3.1.9
|
||||
*
|
||||
* Requires: jQuery 1.2.2+
|
||||
*/
|
||||
|
||||
(function (factory) {
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
// Node/CommonJS style for Browserify
|
||||
module.exports = factory;
|
||||
} else {
|
||||
// Browser globals
|
||||
factory(jQuery);
|
||||
}
|
||||
}(function ($) {
|
||||
|
||||
var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'],
|
||||
toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?
|
||||
['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'],
|
||||
slice = Array.prototype.slice,
|
||||
nullLowestDeltaTimeout, lowestDelta;
|
||||
|
||||
if ( $.event.fixHooks ) {
|
||||
for ( var i = toFix.length; i; ) {
|
||||
$.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
|
||||
}
|
||||
}
|
||||
|
||||
var special = $.event.special.mousewheel = {
|
||||
version: '3.1.9',
|
||||
|
||||
setup: function() {
|
||||
if ( this.addEventListener ) {
|
||||
for ( var i = toBind.length; i; ) {
|
||||
this.addEventListener( toBind[--i], handler, false );
|
||||
}
|
||||
} else {
|
||||
this.onmousewheel = handler;
|
||||
}
|
||||
// Store the line height and page height for this particular element
|
||||
$.data(this, 'mousewheel-line-height', special.getLineHeight(this));
|
||||
$.data(this, 'mousewheel-page-height', special.getPageHeight(this));
|
||||
},
|
||||
|
||||
teardown: function() {
|
||||
if ( this.removeEventListener ) {
|
||||
for ( var i = toBind.length; i; ) {
|
||||
this.removeEventListener( toBind[--i], handler, false );
|
||||
}
|
||||
} else {
|
||||
this.onmousewheel = null;
|
||||
}
|
||||
},
|
||||
|
||||
getLineHeight: function(elem) {
|
||||
return parseInt($(elem)['offsetParent' in $.fn ? 'offsetParent' : 'parent']().css('fontSize'), 10);
|
||||
},
|
||||
|
||||
getPageHeight: function(elem) {
|
||||
return $(elem).height();
|
||||
},
|
||||
|
||||
settings: {
|
||||
adjustOldDeltas: true
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.extend({
|
||||
mousewheel: function(fn) {
|
||||
return fn ? this.bind('mousewheel', fn) : this.trigger('mousewheel');
|
||||
},
|
||||
|
||||
unmousewheel: function(fn) {
|
||||
return this.unbind('mousewheel', fn);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function handler(event) {
|
||||
var orgEvent = event || window.event,
|
||||
args = slice.call(arguments, 1),
|
||||
delta = 0,
|
||||
deltaX = 0,
|
||||
deltaY = 0,
|
||||
absDelta = 0;
|
||||
event = $.event.fix(orgEvent);
|
||||
event.type = 'mousewheel';
|
||||
|
||||
// Old school scrollwheel delta
|
||||
if ( 'detail' in orgEvent ) { deltaY = orgEvent.detail * -1; }
|
||||
if ( 'wheelDelta' in orgEvent ) { deltaY = orgEvent.wheelDelta; }
|
||||
if ( 'wheelDeltaY' in orgEvent ) { deltaY = orgEvent.wheelDeltaY; }
|
||||
if ( 'wheelDeltaX' in orgEvent ) { deltaX = orgEvent.wheelDeltaX * -1; }
|
||||
|
||||
// Firefox < 17 horizontal scrolling related to DOMMouseScroll event
|
||||
if ( 'axis' in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
|
||||
deltaX = deltaY * -1;
|
||||
deltaY = 0;
|
||||
}
|
||||
|
||||
// Set delta to be deltaY or deltaX if deltaY is 0 for backwards compatabilitiy
|
||||
delta = deltaY === 0 ? deltaX : deltaY;
|
||||
|
||||
// New school wheel delta (wheel event)
|
||||
if ( 'deltaY' in orgEvent ) {
|
||||
deltaY = orgEvent.deltaY * -1;
|
||||
delta = deltaY;
|
||||
}
|
||||
if ( 'deltaX' in orgEvent ) {
|
||||
deltaX = orgEvent.deltaX;
|
||||
if ( deltaY === 0 ) { delta = deltaX * -1; }
|
||||
}
|
||||
|
||||
// No change actually happened, no reason to go any further
|
||||
if ( deltaY === 0 && deltaX === 0 ) { return; }
|
||||
|
||||
// Need to convert lines and pages to pixels if we aren't already in pixels
|
||||
// There are three delta modes:
|
||||
// * deltaMode 0 is by pixels, nothing to do
|
||||
// * deltaMode 1 is by lines
|
||||
// * deltaMode 2 is by pages
|
||||
if ( orgEvent.deltaMode === 1 ) {
|
||||
var lineHeight = $.data(this, 'mousewheel-line-height');
|
||||
delta *= lineHeight;
|
||||
deltaY *= lineHeight;
|
||||
deltaX *= lineHeight;
|
||||
} else if ( orgEvent.deltaMode === 2 ) {
|
||||
var pageHeight = $.data(this, 'mousewheel-page-height');
|
||||
delta *= pageHeight;
|
||||
deltaY *= pageHeight;
|
||||
deltaX *= pageHeight;
|
||||
}
|
||||
|
||||
// Store lowest absolute delta to normalize the delta values
|
||||
absDelta = Math.max( Math.abs(deltaY), Math.abs(deltaX) );
|
||||
|
||||
if ( !lowestDelta || absDelta < lowestDelta ) {
|
||||
lowestDelta = absDelta;
|
||||
|
||||
// Adjust older deltas if necessary
|
||||
if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
|
||||
lowestDelta /= 40;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust older deltas if necessary
|
||||
if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
|
||||
// Divide all the things by 40!
|
||||
delta /= 40;
|
||||
deltaX /= 40;
|
||||
deltaY /= 40;
|
||||
}
|
||||
|
||||
// Get a whole, normalized value for the deltas
|
||||
delta = Math[ delta >= 1 ? 'floor' : 'ceil' ](delta / lowestDelta);
|
||||
deltaX = Math[ deltaX >= 1 ? 'floor' : 'ceil' ](deltaX / lowestDelta);
|
||||
deltaY = Math[ deltaY >= 1 ? 'floor' : 'ceil' ](deltaY / lowestDelta);
|
||||
|
||||
// Add information to the event object
|
||||
event.deltaX = deltaX;
|
||||
event.deltaY = deltaY;
|
||||
event.deltaFactor = lowestDelta;
|
||||
// Go ahead and set deltaMode to 0 since we converted to pixels
|
||||
// Although this is a little odd since we overwrite the deltaX/Y
|
||||
// properties with normalized deltas.
|
||||
event.deltaMode = 0;
|
||||
|
||||
// Add event and delta to the front of the arguments
|
||||
args.unshift(event, delta, deltaX, deltaY);
|
||||
|
||||
// Clearout lowestDelta after sometime to better
|
||||
// handle multiple device types that give different
|
||||
// a different lowestDelta
|
||||
// Ex: trackpad = 3 and mouse wheel = 120
|
||||
if (nullLowestDeltaTimeout) { clearTimeout(nullLowestDeltaTimeout); }
|
||||
nullLowestDeltaTimeout = setTimeout(nullLowestDelta, 200);
|
||||
|
||||
return ($.event.dispatch || $.event.handle).apply(this, args);
|
||||
}
|
||||
|
||||
function nullLowestDelta() {
|
||||
lowestDelta = null;
|
||||
}
|
||||
|
||||
function shouldAdjustOldDeltas(orgEvent, absDelta) {
|
||||
// If this is an older event and the delta is divisable by 120,
|
||||
// then we are assuming that the browser is treating this as an
|
||||
// older mouse wheel event and that we should divide the deltas
|
||||
// by 40 to try and get a more usable deltaFactor.
|
||||
// Side note, this actually impacts the reported scroll distance
|
||||
// in older browsers and can cause scrolling to be slower than native.
|
||||
// Turn this off by setting $.event.special.mousewheel.settings.adjustOldDeltas to false.
|
||||
return special.settings.adjustOldDeltas && orgEvent.type === 'mousewheel' && absDelta % 120 === 0;
|
||||
}
|
||||
|
||||
}));
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
(function(context,$) {
|
||||
|
||||
"use strict";
|
||||
|
||||
context.JK = context.JK || {};
|
||||
|
||||
context.JK.VideoDialog = function(app) {
|
||||
var logger = context.JK.logger;
|
||||
var rest = context.JK.Rest();
|
||||
var dialogId = '#video-dialog';
|
||||
|
||||
function events() {
|
||||
$('.carousel .slides').on('click', '.slideItem', function(e) {
|
||||
var $self = $(this);
|
||||
$('#video-dialog-header').html($self.data('video-header'));
|
||||
$('#video-dialog-iframe').attr('src', $self.data('video-url'));
|
||||
app.layout.showDialog('video-dialog');
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
})
|
||||
|
||||
$(dialogId + '-close').click(function(e) {
|
||||
app.layout.closeDialog('video-dialog');
|
||||
$('#video-dialog-header').html('');
|
||||
$('#video-dialog-iframe').attr('src','');
|
||||
e.stopPropagation();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
function beforeShow() {
|
||||
|
||||
}
|
||||
|
||||
function afterHide() {
|
||||
|
||||
}
|
||||
|
||||
function initialize(){
|
||||
|
||||
var dialogBindings = {
|
||||
'beforeShow' : beforeShow,
|
||||
'afterHide': afterHide
|
||||
};
|
||||
|
||||
app.bindDialog('video-dialog', dialogBindings);
|
||||
|
||||
events();
|
||||
}
|
||||
|
||||
this.initialize = initialize;
|
||||
|
||||
}
|
||||
})(window, jQuery);
|
||||
|
|
@ -6,6 +6,8 @@
|
|||
//= require jquery.cookie
|
||||
//= require jquery.clipboard
|
||||
//= require jquery.easydropdown
|
||||
//= require jquery.carousel-1.1
|
||||
//= require jquery.mousewheel-3.1.9
|
||||
//= require AAA_Log
|
||||
//= require AAC_underscore
|
||||
//= require globals
|
||||
|
|
@ -14,6 +16,7 @@
|
|||
//= require facebook_helper
|
||||
//= require web/signupDialog
|
||||
//= require web/signinDialog
|
||||
//= require web/videoDialog
|
||||
//= require invitationDialog
|
||||
//= require hoverMusician
|
||||
//= require hoverFan
|
||||
|
|
|
|||
|
|
@ -16,9 +16,27 @@
|
|||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
$('.carousel').carousel({
|
||||
hAlign:'center',
|
||||
vAlign:'bottom',
|
||||
vMargin:.5,
|
||||
reflection:true,
|
||||
reflectionColor:'0,0,0',
|
||||
directionNav:false,
|
||||
frontWidth:424,
|
||||
frontHeight:263,
|
||||
carouselWidth:750,
|
||||
carouselHeight:440,
|
||||
slidesPerScroll:3,
|
||||
backOpacity:2
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
context.JK.WelcomePage = initialize;
|
||||
|
||||
|
||||
|
||||
})(window, jQuery);
|
||||
|
|
@ -370,6 +370,23 @@ small, .small {font-size:11px;}
|
|||
width:239px;
|
||||
}
|
||||
|
||||
.overlay-video {
|
||||
position:absolute;
|
||||
left:50%;
|
||||
top:20%;
|
||||
background-color:#333;
|
||||
border: 1px solid #ed3618;
|
||||
z-index:1000;
|
||||
display:none;
|
||||
|
||||
.overlay-video-inner {
|
||||
padding:25px;
|
||||
}
|
||||
|
||||
#video-dialog-close {
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
.white {color:#fff;}
|
||||
.lightgrey {color:#ccc;}
|
||||
.grey {color:#999;}
|
||||
|
|
|
|||
|
|
@ -37,18 +37,18 @@ body.web {
|
|||
|
||||
.logo-home {
|
||||
width: 298px;
|
||||
margin-top: 30px;
|
||||
margin: 30px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.landing-tag {
|
||||
display:inline-block;
|
||||
width:360px;
|
||||
margin-left:70px;
|
||||
width:400px;
|
||||
|
||||
h1 {
|
||||
margin:40px 0;
|
||||
color:#ed3718;
|
||||
font-size:30px;
|
||||
font-size:26px;
|
||||
font-weight:300;
|
||||
}
|
||||
}
|
||||
|
|
@ -64,11 +64,14 @@ body.web {
|
|||
.landing-content {
|
||||
background-color:black;
|
||||
width:100%;
|
||||
padding-bottom:15px;
|
||||
min-height: 366px;
|
||||
position:relative;
|
||||
padding-bottom:30px;
|
||||
|
||||
.welcome {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size:24px;
|
||||
color:#ccc;
|
||||
|
|
@ -149,7 +152,7 @@ body.web {
|
|||
.landing-comments {
|
||||
margin-left:140px;
|
||||
width:515px;
|
||||
|
||||
|
||||
a {
|
||||
text-decoration:none;
|
||||
font-weight:bold;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,323 @@
|
|||
|
||||
@charset "UTF-8";
|
||||
|
||||
body.web {
|
||||
.welcome {
|
||||
.landing-tag {
|
||||
margin:10px 0 40px;
|
||||
width:348px;
|
||||
|
||||
h1 {
|
||||
font-size:30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buzz {
|
||||
width: 300px;
|
||||
position:relative;
|
||||
.buzz-items {
|
||||
.buzz-item {
|
||||
padding: 12px 0;
|
||||
&:last-child {
|
||||
padding-bottom:0;
|
||||
}
|
||||
}
|
||||
.buzz-item-text {
|
||||
padding-left: 78px; // 58px width for image + 20px margin
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.latest {
|
||||
width: 750px;
|
||||
position:relative;
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.home-session-list {
|
||||
width:100%;
|
||||
height:400px;
|
||||
border: solid 1px #ed3718;
|
||||
background-color:#353535;
|
||||
float:left;
|
||||
|
||||
}
|
||||
.latest-head {
|
||||
position: absolute;
|
||||
padding:20px 20px 12px;
|
||||
height: 53px;
|
||||
width:inherit;
|
||||
}
|
||||
.latest-body {
|
||||
height: 100%;
|
||||
width:100%;
|
||||
padding-top:53px;
|
||||
|
||||
.session-list-wrapper {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
Item Name: jQuery Carousel Evolution
|
||||
Author: Mapalla
|
||||
Author URI: http://codecanyon.net/user/Mapalla
|
||||
Version: 1.1
|
||||
*/
|
||||
|
||||
/* _______________________________________________ */
|
||||
|
||||
/* CONTAINER */
|
||||
/* _______________________________________________ */
|
||||
|
||||
.carousel
|
||||
{
|
||||
position :relative ;
|
||||
margin :30px auto 0;
|
||||
width :auto;
|
||||
height :auto;
|
||||
border :none;
|
||||
overflow : hidden ;
|
||||
// z-index:0;
|
||||
}
|
||||
|
||||
/* _______________________________________________ */
|
||||
|
||||
/* SLIDES */
|
||||
/* _______________________________________________ */
|
||||
|
||||
/* slide container */
|
||||
.carousel .slides
|
||||
{
|
||||
margin :0;
|
||||
padding :0;
|
||||
border :none;
|
||||
list-style :none;
|
||||
position :relative ;
|
||||
overflow :visible ;
|
||||
}
|
||||
|
||||
/* slide item */
|
||||
.carousel .slides .slideItem
|
||||
{
|
||||
position :absolute ;
|
||||
cursor :pointer ;
|
||||
overflow : hidden;
|
||||
padding :0;
|
||||
margin :0;
|
||||
border :none;
|
||||
}
|
||||
|
||||
.carousel .slides .slideItem a
|
||||
{
|
||||
display: block ;
|
||||
text-decoration :none;
|
||||
margin :0;
|
||||
padding :0;
|
||||
border :none;
|
||||
outline :none;
|
||||
}
|
||||
|
||||
.carousel .slides .slideItem img
|
||||
{
|
||||
margin :0;
|
||||
padding :0;
|
||||
border :none;
|
||||
width :100%;
|
||||
height :100%;
|
||||
}
|
||||
|
||||
/* _______________________________________________ */
|
||||
|
||||
/* DIRECTION BUTTON */
|
||||
/* _______________________________________________ */
|
||||
|
||||
.carousel .nextButton
|
||||
{
|
||||
position :absolute ;
|
||||
right :10px;
|
||||
top :133px;
|
||||
width :35px;
|
||||
height :35px;
|
||||
background : url(web/next_button.png) no-repeat center;
|
||||
cursor :pointer ;
|
||||
z-index :9999;
|
||||
}
|
||||
|
||||
.carousel .prevButton
|
||||
{
|
||||
position :absolute ;
|
||||
left :10px;
|
||||
top :133px;
|
||||
width :35px;
|
||||
height: 35px;
|
||||
background : url(../images/web/prev_button.png);
|
||||
cursor :pointer ;
|
||||
z-index :9999;
|
||||
}
|
||||
|
||||
/* _______________________________________________ */
|
||||
|
||||
/* NAVIGATION BUTTON */
|
||||
/* _______________________________________________ */
|
||||
|
||||
/* buttons container */
|
||||
.carousel .buttonNav
|
||||
{
|
||||
position : relative ;
|
||||
margin :0 auto;
|
||||
z-index :999;
|
||||
}
|
||||
|
||||
/* numbers */
|
||||
.carousel .buttonNav .numbers
|
||||
{
|
||||
position :relative ;
|
||||
float :left ;
|
||||
margin :5px;
|
||||
color : #828282 ;
|
||||
cursor :pointer ;
|
||||
font-weight :bold ;
|
||||
text-decoration :none;
|
||||
font-size :1em;
|
||||
font-family :Arial, Verdana ;
|
||||
}
|
||||
|
||||
.carousel .buttonNav .numbers:hover
|
||||
{
|
||||
color: #000;
|
||||
text-decoration :underline;
|
||||
}
|
||||
|
||||
.carousel .buttonNav .numberActive
|
||||
{
|
||||
background : none;
|
||||
color :#000;
|
||||
cursor :default ;
|
||||
}
|
||||
|
||||
/* bullets */
|
||||
.carousel .buttonNav .bullet
|
||||
{
|
||||
position :relative ;
|
||||
float :left ;
|
||||
width :16px;
|
||||
height :16px;
|
||||
background : url(web/Bullet-White.png) no-repeat center ;
|
||||
margin :5px;
|
||||
float :left ;
|
||||
cursor :pointer ;
|
||||
}
|
||||
|
||||
.carousel .buttonNav .bullet:hover
|
||||
{
|
||||
background : url(../images/web/Bullet-Black.png) no-repeat center ;
|
||||
}
|
||||
|
||||
.carousel .buttonNav .bulletActive
|
||||
{
|
||||
background : url(web/Bullet-Black.png) no-repeat center ;
|
||||
cursor :default ;
|
||||
}
|
||||
|
||||
/* ____________________________________________________________ */
|
||||
|
||||
/* VIDEO */
|
||||
/* ____________________________________________________________ */
|
||||
|
||||
.carousel .slides .videoOverlay
|
||||
{
|
||||
background :url(video.png) no-repeat center; /* play button */
|
||||
}
|
||||
|
||||
.carousel .slides .spinner
|
||||
{
|
||||
background : #000 url(loading.gif) no-repeat center; /* video preloader */
|
||||
}
|
||||
|
||||
/* _____________________________ *
|
||||
|
||||
/* SHADOW */
|
||||
/* _____________________________ */
|
||||
|
||||
.carousel .shadow
|
||||
{
|
||||
width :100%;
|
||||
height :82px;
|
||||
}
|
||||
|
||||
.carousel .shadow .shadowLeft
|
||||
{
|
||||
background : url(web/shadowLeft.png) no-repeat;
|
||||
width :100px;
|
||||
height :82px;
|
||||
|
||||
/* fix png problems in ie */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/web/shadowLeft.png, sizingmethod=scale)"; /* IE8 */
|
||||
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=web/shadowLeft.png, sizingmethod=scale); /* IE6 & 7 */
|
||||
}
|
||||
|
||||
.carousel .shadow .shadowMiddle
|
||||
{
|
||||
height :82px;
|
||||
background:url(web/shadowTile.png) repeat-x;
|
||||
|
||||
/* fix png problems in ie */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/web/shadowTile.png, sizingmethod=scale)"; /* IE8 */
|
||||
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=web/shadowTile.png, sizingmethod=scale); /* IE6 & 7 */
|
||||
}
|
||||
|
||||
|
||||
.carousel .shadow .shadowRight
|
||||
{
|
||||
width :100px;
|
||||
height :82px;
|
||||
background:url(web/shadowRight.png) no-repeat;
|
||||
|
||||
/* fix png problems in ie */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/web/shadowRight.png, sizingmethod=scale)"; /* IE8 */
|
||||
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=web/shadowRight.png, sizingmethod=scale); /* IE6 & 7 */
|
||||
}
|
||||
|
||||
/* ____________________________________________________________ */
|
||||
|
||||
/* REFLECTION GRADIENT */
|
||||
/* ____________________________________________________________ */
|
||||
|
||||
/* gradient color for Opera */
|
||||
// .carousel .gradient
|
||||
// {
|
||||
// background-image :url(gradient.svg);
|
||||
// }
|
||||
// .carousel {
|
||||
// position: relative;
|
||||
// margin: 0 auto;
|
||||
// width: auto;
|
||||
// height: auto;
|
||||
// border: none;
|
||||
// overflow: hidden;
|
||||
// z-index: 0;
|
||||
//
|
||||
// .slides {
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// border: none;
|
||||
// list-style: none;
|
||||
// position: relative;
|
||||
// overflow: visible;
|
||||
//
|
||||
// .slideItem {
|
||||
// position: absolute;
|
||||
// cursor: pointer;
|
||||
// overflow: hidden;
|
||||
// padding: 0;
|
||||
// margin: 0;
|
||||
// border: none;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
|
@ -2,6 +2,16 @@
|
|||
|
||||
require 'builder'
|
||||
|
||||
class Slide
|
||||
attr_accessor :img_url, :header, :vid_url
|
||||
|
||||
def initialize(type, img_url, vid_url)
|
||||
@img_url = img_url # preview image
|
||||
@header = "jamkazam for #{type}" #
|
||||
@vid_url = vid_url + '?autoplay=1'
|
||||
end
|
||||
end
|
||||
|
||||
class UsersController < ApplicationController
|
||||
|
||||
include ClientHelper
|
||||
|
|
@ -185,7 +195,23 @@ class UsersController < ApplicationController
|
|||
end
|
||||
|
||||
def welcome
|
||||
@hide_user_dropdown = true
|
||||
|
||||
@slides = [
|
||||
Slide.new("musicians", "web/carousel_musicians.jpg", "http://www.youtube.com/embed/eaYNM7p6Z5s"),
|
||||
Slide.new("fans", "web/carousel_fans.jpg", "http://www.youtube.com/embed/eaYNM7p6Z5s"),
|
||||
Slide.new("bands", "web/carousel_bands.jpg", "http://www.youtube.com/embed/eaYNM7p6Z5s"),
|
||||
Slide.new("musicians", "web/carousel_musicians.jpg", "http://www.youtube.com/embed/eaYNM7p6Z5s"),
|
||||
Slide.new("fans", "web/carousel_fans.jpg", "http://www.youtube.com/embed/eaYNM7p6Z5s"),
|
||||
Slide.new("bands", "web/carousel_bands.jpg", "http://www.youtube.com/embed/eaYNM7p6Z5s")
|
||||
]
|
||||
|
||||
@promo_buzz = Promotional.where(:type => 'JamRuby::PromoBuzz', :aasm_state => :active)
|
||||
@promo_latest = Promotional.where(:type => 'JamRuby::PromoLatest', :aasm_state => :active);
|
||||
|
||||
if current_user
|
||||
|
||||
end
|
||||
@welcome_page = true
|
||||
render :layout => "web"
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -35,17 +35,23 @@
|
|||
|
||||
<div class="wrapper">
|
||||
|
||||
<% unless @welcome_page %>
|
||||
<%= render "users/user_dropdown" %>
|
||||
<% else %>
|
||||
<%= render "users/video_carousel" %>
|
||||
<% end %>
|
||||
|
||||
<div class="logo-home">
|
||||
<%= link_to root_path do %>
|
||||
<%= image_tag("web/logo_home.png", :alt => "JamKazam logo", :size => "298x54") %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% unless @hide_user_dropdown %>
|
||||
<%= render "users/user_dropdown" %>
|
||||
<% unless @welcome_page %>
|
||||
<%= content_tag(:div, content_tag(:h1,'Play music together over the Internet as if in the same room'), :class => "landing-tag") %>
|
||||
<%= content_tag(:div,'',:class => "clearall") %>
|
||||
<% end %>
|
||||
|
||||
<br clear="all" /><br /><br />
|
||||
</div>
|
||||
|
||||
<div class="landing-content">
|
||||
|
|
@ -66,6 +72,7 @@
|
|||
<%= render "clients/shareDialog" %>
|
||||
<%= render "users/signupDialog" %>
|
||||
<%= render "users/signinDialog" %>
|
||||
<%= render "users/videoDialog" %>
|
||||
<%= render "clients/notify" %>
|
||||
<%= render "clients/hoverMusician" %>
|
||||
<%= render "clients/hoverFan" %>
|
||||
|
|
@ -111,6 +118,9 @@
|
|||
var signinDialog = new JK.SigninDialog(JK.app);
|
||||
signinDialog.initialize();
|
||||
|
||||
var videoDialog = new JK.VideoDialog(JK.app);
|
||||
videoDialog.initialize();
|
||||
|
||||
JK.bindHoverEvents();
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
|
||||
<!-- BEGIN BUZZ -->
|
||||
<%= content_tag(:div, :class => "buzz") do %>
|
||||
<%= content_tag(:h2, "JamKazam Buzz...") %>
|
||||
<br>
|
||||
<!-- BEGIN ITEMS -->
|
||||
<%= content_tag(:div, :class => "buzz-items") do %>
|
||||
<%= render :partial => "buzz_item", :collection => @promo_buzz %>
|
||||
<% end %>
|
||||
|
||||
<!-- END ITEMS -->
|
||||
<% end %>
|
||||
|
||||
<!-- END BUZZ -->
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
|
||||
<!-- buzz item -->
|
||||
<%= content_tag(:div, :class => "buzz-item small", :data => { :buzz_item => buzz_item.id}) do %>
|
||||
<%= content_tag(:div, image_tag(buzz_item.image), :class => "avatar_large mr20") %>
|
||||
<%= content_tag(:div, buzz_item.text_long, :class => "buzz-item-text") %>
|
||||
<%= content_tag(:div, "--#{buzz_item.text_short}", :class => "right", :style => "margin-top:6px;") %>
|
||||
<%= content_tag(:div, nil, :class => "clearall") %>
|
||||
<% end %>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!-- begin feed item -->
|
||||
<%= content_tag(:div, :class => "feed-entry") do %>
|
||||
|
||||
<!-- avatar -->
|
||||
<%= content_tag(:div, image_tag(src="images/content/avatar_band1.jpg")) %>
|
||||
<!--<div class="avatar-small ib"><img src="images/content/avatar_band1.jpg"></div>-->
|
||||
|
||||
<!-- type and artist -->
|
||||
<div class="left ml20 w15">
|
||||
<div class="title">RECORDING</div>
|
||||
<div class="artist">Tammany Hall</div>
|
||||
<div class="small">An Hour Ago</div>
|
||||
</div>
|
||||
|
||||
<!-- name and description -->
|
||||
<div class="left ml20 w30">
|
||||
<div class="name">Twelve Weeks</div>
|
||||
<div class="description">A straight-up guitar-driven blues track.
|
||||
<span class="hidden"><br><br>Pellentesque vel dui sed orci faucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Integer adipiscing congue metus.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- timeline and controls -->
|
||||
<div class="right w40">
|
||||
<!-- recording play controls -->
|
||||
<div class="recording-controls">
|
||||
|
||||
<!-- play button -->
|
||||
<a class="left" href="#"><img src="images/content/icon_playbutton.png" width="20" height="20"></a>
|
||||
|
||||
<!-- playback position -->
|
||||
<div class="recording-position">
|
||||
|
||||
<!-- start time -->
|
||||
<div class="recording-time">0:00</div>
|
||||
|
||||
<!-- playback background & slider -->
|
||||
<div class="recording-playback">
|
||||
<div class="recording-slider"><img src="images/content/slider_playcontrols.png" width="5" height="16"></div>
|
||||
</div>
|
||||
|
||||
<!-- end time -->
|
||||
<div class="recording-time">4:59</div>
|
||||
</div>
|
||||
<!-- end playback position -->
|
||||
|
||||
<!-- current playback time -->
|
||||
<div class="recording-current">
|
||||
1:23
|
||||
</div>
|
||||
</div>
|
||||
<!-- end recording play controls -->
|
||||
|
||||
<!-- genre and social -->
|
||||
<div class="left small">Blues</div>
|
||||
<div class="right small">80 <img src="images/content/icon_arrow.png" width="7" height="12" align="absmiddle"> 12 <img src="images/content/icon_comment.png" width="13" height="12" align="absmiddle"> 35 <img src="images/content/icon_like.png" width="12" height="12" align="absmiddle"> <a href="#" class="details">Details</a><a class="arrow-down-orange" href="#"></a></div><br>
|
||||
|
||||
|
||||
<div class="hidden"><!-- sub-table of musicians -->
|
||||
<table class="musicians" cellpadding="0" cellspacing="5">
|
||||
<tbody><tr>
|
||||
<td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_david.jpg"></a></td>
|
||||
<td><a href="#">David Wilson</a></td>
|
||||
<td><div class="nowrap"><img src="images/content/icon_instrument_guitar24.png" width="24" height="24"> <img src="images/content/icon_instrument_vocal24.png" width="24" height="24"></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_creepyeye.jpg"></a></td>
|
||||
<td><a href="#">Cassandra Defrenza</a></td>
|
||||
<td><img src="images/content/icon_instrument_keyboard24.png" width="24" height="24"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_silverfox.jpg"></a></td>
|
||||
<td><a href="#">Jimmy Stratham</a></td>
|
||||
<td><img src="images/content/icon_instrument_guitar24.png" width="24" height="24"></td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<br clear="all"><br>
|
||||
|
||||
<% end %>
|
||||
<!-- end feed item -->
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
|
||||
<!-- BEGIN LATEST -->
|
||||
<%= content_tag(:div, :class => "latest") do %>
|
||||
<%= content_tag(:div, '', :class => "home-session-list") do %>
|
||||
<%= content_tag(:h2, "Latest Sessions & Recordings", :class => "latest-head") %>
|
||||
<!-- BEGIN ITEMS -->
|
||||
<%= content_tag(:div, :class => "latest-body") do %>
|
||||
<%= content_tag(:div, :class => "session-list-wrapper content-scroller") do %>
|
||||
<%= render :partial => "feed_item", :collection => @promo_buzz %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<!-- END ITEMS -->
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<!-- END LATEST -->
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
|
||||
<!-- SLIDE ITEM -->
|
||||
<%= content_tag(:div, :data => { :video_header => slide.header, :video_url => slide.vid_url}) do %>
|
||||
<%= image_tag(slide.img_url, :alt => slide.header) %>
|
||||
<% end %>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!-- video overlay content -->
|
||||
|
||||
<div class="dialog thin-dialog overlay-video" layout-id="video-dialog" id="video-dialog">
|
||||
|
||||
<!-- header -->
|
||||
<div class="content-head">
|
||||
<h1 id="video-dialog-header"></h1>
|
||||
<div class="right"><a id="video-dialog-close" href="#" class="button-orange">X CLOSE</a></div>
|
||||
</div>
|
||||
|
||||
<!-- inner wrapper -->
|
||||
<div class="overlay-video-inner">
|
||||
<iframe id="video-dialog-iframe" width="550" height="309" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<!-- end inner -->
|
||||
|
||||
</div>
|
||||
<!-- end video overlay content -->
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
|
||||
<!-- BEGIN CAROUSEL -->
|
||||
<%= content_tag(:div, :class => "carousel right") do %>
|
||||
<!-- BEGIN SLIDES -->
|
||||
<%= content_tag(:div, :class => "slides") do %>
|
||||
<%= render :partial => "slide", :collection => @slides %>
|
||||
<% end %>
|
||||
|
||||
<!-- END SLIDES -->
|
||||
<% end %>
|
||||
|
||||
<!-- END CAROUSEL -->
|
||||
|
|
@ -1,17 +1,33 @@
|
|||
<%= content_tag(:div, :class => "landing-tag") do -%>
|
||||
<%= content_tag(:h1, "Play music together over the Internet as if in the same room") %>
|
||||
<%= content_tag(:div, :class => "welcome") do -%>
|
||||
<%= content_tag(:div, :class => "landing-tag") do -%>
|
||||
<%= content_tag(:h1, "Play music together over the Internet as if in the same room") %>
|
||||
<% end %>
|
||||
<div class="login-wrapper">
|
||||
<%= link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path,
|
||||
class: "signup", id: "signup" %>
|
||||
<div class="clearleft"></div>
|
||||
<%= link_to "Already have an account?", signin_path,
|
||||
class: "signin", id: "signin" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="clearall"></div>
|
||||
<div class="login-wrapper">
|
||||
<%= link_to image_tag("/assets/web/cta_button.png", :alt => "Sign up now for your free account!"), '#', class: "signup", id: "signup" %>
|
||||
<div class="clearall"></div>
|
||||
<%= link_to "Already have an account?", signin_path, class: "signin", id: "signin" %>
|
||||
</div>
|
||||
|
||||
<% content_for :after_black_bar do %>
|
||||
<%= content_tag(:div, :class => "home-questions") do -%>
|
||||
Have questions about how JamKazam works?
|
||||
<a href="#" id="faq-open">Here are some answers</a>.
|
||||
<%= content_tag(:div, '', :style =>"padding-top:20px;") do %>
|
||||
|
||||
<!-- @FIXME revisit to make responsive -->
|
||||
|
||||
<!-- buzz -->
|
||||
<%= content_tag(:div, render(:partial => "buzz"), :class => "right") %>
|
||||
|
||||
<!-- latest -->
|
||||
<%= content_tag(:div, render(:partial => "latest"), :class => "left") %>
|
||||
|
||||
<%= content_tag(:div, '', :class => "clearall") %>
|
||||
|
||||
<%= content_tag(:div, :class => "home-questions") do -%>
|
||||
Have questions about how JamKazam works?
|
||||
<a href="#" id="faq-open">Here are some answers</a>.
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue