app/assets/javascripts/pageflow/before_after/widget.js in pageflow-before-after-0.5.0 vs app/assets/javascripts/pageflow/before_after/widget.js in pageflow-before-after-1.0.0
- old
+ new
@@ -26,148 +26,161 @@
onSlide: function(){}
};
var options = defaults;
var randID = Math.round(Math.random()*100000000);
- var o=options;
- var obj = $(this.element);
+ var o=options;
+ var obj = $(this.element);
- var beforeImg = $('.before_image', obj);
- var afterImg = $('.after_image', obj);
+ var beforeImg = $('.before_image', obj);
+ var afterImg = $('.after_image', obj);
- var section = $(obj).parentsUntil(".backgroundArea").last();
+ var section = $(obj).parentsUntil(".backgroundArea").last();
- var imgWidth;
- var imgHeight;
+ var imgWidth;
+ var imgHeight;
- var refresh = function() {
- var resizeAndPositionContainer = function() {
- var screenRatio = section.width() / section.height();
+ var refresh = function() {
+ var resizeAndPositionContainer = function() {
+ var screenRatio = section.width() / section.height();
- if(screenRatio < imgRatio) {
- $(obj).parent().css({'width':'100%','height':'auto'});
- var topOffset = (section.height() - $(obj).parent().height()) / 2;
- $(obj).css({'top':topOffset+'px','left':'0'});
- }
- else {
- $(obj).parent().css({'width': (section.height() * imgRatio) + 'px','height':'100%'});
- var leftOffset = (section.width() - $(obj).parent().width()) / 2;
- $(obj).css({'top':'0','left':leftOffset+'px'});
- }
- };
+ if(screenRatio < imgRatio) {
+ $(obj).parent().css({'width':'100%','height':'auto'});
+ var topOffset = (section.height() - $(obj).parent().height()) / 2;
+ $(obj).css({'top':topOffset+'px','left':'0'});
+ }
+ else {
+ $(obj).parent().css({'width': (section.height() * imgRatio) + 'px','height':'100%'});
+ var leftOffset = (section.width() - $(obj).parent().width()) / 2;
+ $(obj).css({'top':'0','left':leftOffset+'px'});
+ }
+ };
- imgWidth = beforeImg.attr("data-width");
- imgHeight = beforeImg.attr("data-height");
- var imgRatio = imgWidth / imgHeight;
+ imgWidth = beforeImg.attr("data-width");
+ imgHeight = beforeImg.attr("data-height");
+ var imgRatio = imgWidth / imgHeight;
- $(obj).parent().toggleClass('image-is-landscape', imgRatio > 1);
- $(obj).parent().toggleClass('image-is-portrait', imgRatio <= 1);
+ $(obj).parent().toggleClass('image-is-landscape', imgRatio > 1);
+ $(obj).parent().toggleClass('image-is-portrait', imgRatio <= 1);
- var containerHeight = imgHeight / imgWidth * 100;
- $(obj)
- .css({'overflow':'visible','position':'relative','padding':'0','width':'100%', 'padding-top': containerHeight+"%"});
+ var containerHeight = imgHeight / imgWidth * 100;
+ $(obj)
+ .css({'overflow':'visible','position':'relative','padding':'0','width':'100%', 'padding-top': containerHeight+"%"});
- resizeAndPositionContainer();
+ resizeAndPositionContainer();
- bb = obj.get()[0].getBoundingClientRect();
- barOffset = 0;
- dragwrapper.draggable();
- dragwrapper.draggable('option', {axis: 'x', containment:[bb.left-barOffset, bb.top, bb.right-barOffset, bb.bottom],drag:drag,stop:drag });
- };
+ bb = obj.get()[0].getBoundingClientRect();
+ barOffset = 0;
+ dragwrapper.draggable();
+ dragwrapper.draggable('option', {axis: 'x', containment:[bb.left-barOffset, bb.top, bb.right-barOffset, bb.bottom],drag:drag,stop:drag });
+ };
- this.refresh = refresh;
+ this.refresh = refresh;
- beforeImg.attr('id','beforeimage'+randID);
- afterImg.attr('id','afterimage'+randID);
+ beforeImg.attr('id','beforeimage'+randID);
+ afterImg.attr('id','afterimage'+randID);
- var bb;
- var barOffset;
- var beforeWrapper = $('.before_wrapper', obj);
+ var bb;
+ var barOffset;
+ var beforeWrapper = $('.before_wrapper', obj);
- // Create an inner div wrapper (dragwrapper) to hold the images.
- $(obj).prepend('<div id="dragwrapper'+randID+'" class="dragwrapper" title="Linke Maustaste drücken und nach links oder rechts ziehen"><span class="draghandle" id="draghandle'+randID+'"></span><div id="drag'+randID+'" class="drag"></div></div>');
- var dragwrapper = $('#dragwrapper'+randID, obj);
- dragwrapper.css({'opacity':1,'position':'absolute','padding':'0','left':o.introPosition * 100 +'%'}).height("100%");
- var afterWrapper = $('.after_wrapper', obj);
+ // Create an inner div wrapper (dragwrapper) to hold the images.
- beforeWrapper.css({'width': '100%', 'height':'100%', 'position':'absolute','left':'0px','z-index':'1','top':'0'}); // Set CSS properties of the before image div
- afterWrapper.css({'width':'100%','height':'100%','position':'absolute','overflow':'hidden','right':'0px','top':'0','text-align':'right'}); // Set CSS properties of the after image div
- $('#drag'+randID).height("100%");
+ var dragwrapper = $('<div class="dragwrapper" />');
+ dragwrapper.attr('id', 'dragwrapper' + randID);
+ dragwrapper.attr('title', I18n.t('pageflow.public.before_after.drag_hint', {
+ locale: pageflow.seed.locale
+ }));
+ $(obj).prepend(dragwrapper);
- $(obj).append('<div class="ba_left_indicator ba_indicator" id="lt-arrow'+randID+'"></div><div class="ba_right_indicator ba_indicator" id="rt-arrow'+randID+'"></div>');
- $('.ba_indicator', obj).css('opacity', 0);
- refresh();
+ var dragHandle = $('<span class="draghandle" />');
+ dragHandle.attr('id', 'draghandle' + randID);
+ dragwrapper.append(dragHandle);
- $('img', obj).on('dragstart', function(event) { event.preventDefault(); });
+ var dragInner = $('<div class="drag" />');
+ dragInner.attr('id', 'drag' + randID);
+ dragwrapper.append(dragInner);
+ dragwrapper.css({'opacity':1,'position':'absolute','padding':'0','left':o.introPosition * 100 +'%'}).height("100%");
- function drag()
- {
- var bb = obj.get()[0].getBoundingClientRect();
- dragwrapper.draggable( {axis: 'x', containment:[bb.left-barOffset, bb.top, bb.right-barOffset, bb.bottom],drag:drag,stop:drag });
- var leftPos = parseInt( $(this).css('left'), 10 ) + barOffset;
- var relPos = leftPos / bb.width;
- if(relPos >= 1) { relPos = 1; }
+ var afterWrapper = $('.after_wrapper', obj);
- beforeWrapper.css('width',relPos * 100 + '%');
- o.onSlide.call(this, relPos);
- $('#lt-arrow'+randID+', #rt-arrow'+randID).stop().css('opacity',0);
- }
+ beforeWrapper.css({'width': '100%', 'height':'100%', 'position':'absolute','left':'0px','z-index':'1','top':'0'}); // Set CSS properties of the before image div
+ afterWrapper.css({'width':'100%','height':'100%','position':'absolute','overflow':'hidden','right':'0px','top':'0','text-align':'right'}); // Set CSS properties of the after image div
+ $('#drag'+randID).height("100%");
- o.onInitialized.call(this);
+ $(obj).append('<div class="ba_left_indicator ba_indicator" id="lt-arrow'+randID+'"></div><div class="ba_right_indicator ba_indicator" id="rt-arrow'+randID+'"></div>');
+ $('.ba_indicator', obj).css('opacity', 0);
+ refresh();
- if(o.animateIntro)
- {
- beforeWrapper.width(bb.width);
- dragwrapper.css('left',imgWidth-barOffset+'px');
- setTimeout(function(){
- dragwrapper.css({'opacity':1}).animate({'left':(100*o.introPosition)+'%'},o.introDuration,function(){dragwrapper.animate({'opacity':1},1000);});
- beforeWrapper.width(bb.width).animate({'width':o.introPosition*100+'%'},o.introDuration,function(){clickit();o.onReady.call(this);});
- o.onSlide.call(this, o.introDelay);
- },o.introDelay);
- }
- else
- {
- clickit();
- o.onReady.call(this);
- }
+ $('img', obj).on('dragstart', function(event) { event.preventDefault(); });
- function clickit()
- {
- bb = obj.get()[0].getBoundingClientRect();
- $(obj).hover(function(){
- $('#lt-arrow'+randID).stop().css({'z-index':'20','position':'absolute','top':bb.height/2-$('#lt-arrow'+randID).height()/2+'px','left':parseInt(dragwrapper.css('left'), 10)-14+'px'}).animate({opacity:1,left:parseInt($('#lt-arrow'+randID).css('left'), 10)-6+'px'},200);
- $('#rt-arrow'+randID).stop().css({'position':'absolute','top':bb.height/2-$('#lt-arrow'+randID).height()/2+'px','left':parseInt(dragwrapper.css('left'), 10)+10+'px'}).animate({opacity:1,left:parseInt($('#rt-arrow'+randID).css('left'), 10)+6+'px'},200);
- },function(){
- $('#lt-arrow'+randID).animate({opacity:0,left:parseInt($('#lt-arrow'+randID).css('left'),10)-6+'px'},350);
- $('#rt-arrow'+randID).animate({opacity:0,left:parseInt($('#rt-arrow'+randID).css('left'),10)+6+'px'},350);
- }
- );
- // When clicking in the container, move the bar and imageholder divs
- $(obj).on('click touchmove touchstart', function(e){
- bb = obj.get()[0].getBoundingClientRect();
- var pageX = e.pageX || e.originalEvent.touches[0].pageX;
- var moveSpeed = o.clickSpeed;
- if(e.type == "touchmove") {
- moveSpeed = 10;
- }
- var clickX = pageX - $(this).offset().left;
- var percentualLeft = clickX / $(this).width() * 100;
- var percentualLeftDragger = (clickX - barOffset) / $(this).width() * 100;
- if (pageX < bb.left || pageX > bb.right) { return; }
+ function drag()
+ {
+ var bb = obj.get()[0].getBoundingClientRect();
+ dragwrapper.draggable( {axis: 'x', containment:[bb.left-barOffset, bb.top, bb.right-barOffset, bb.bottom],drag:drag,stop:drag });
+ var leftPos = parseInt( $(this).css('left'), 10 ) + barOffset;
+ var relPos = leftPos / bb.width;
+ if(relPos >= 1) { relPos = 1; }
- dragwrapper.stop().animate({'left':percentualLeftDragger+'%'},moveSpeed);
- beforeWrapper.stop().animate({'width':percentualLeft+'%'},moveSpeed, function() {
- var pos = (parseInt( $('> div:eq(2)', obj).css('width'), 10 )) / imgWidth;
- o.onSlide.call(this, pos);
- });
- $('#lt-arrow'+randID+',#rt-arrow'+randID).stop().animate({opacity:0},50);
+ beforeWrapper.css('width',relPos * 100 + '%');
+ o.onSlide.call(this, relPos);
+ $('#lt-arrow'+randID+', #rt-arrow'+randID).stop().css('opacity',0);
+ }
+
+ o.onInitialized.call(this);
+
+ if(o.animateIntro)
+ {
+ beforeWrapper.width(bb.width);
+ dragwrapper.css('left',imgWidth-barOffset+'px');
+ setTimeout(function(){
+ dragwrapper.css({'opacity':1}).animate({'left':(100*o.introPosition)+'%'},o.introDuration,function(){dragwrapper.animate({'opacity':1},1000);});
+ beforeWrapper.width(bb.width).animate({'width':o.introPosition*100+'%'},o.introDuration,function(){clickit();o.onReady.call(this);});
+ o.onSlide.call(this, o.introDelay);
+ },o.introDelay);
+ }
+ else
+ {
+ clickit();
+ o.onReady.call(this);
+ }
+
+ function clickit()
+ {
+ bb = obj.get()[0].getBoundingClientRect();
+ $(obj).hover(function(){
+ $('#lt-arrow'+randID).stop().css({'z-index':'20','position':'absolute','top':bb.height/2-$('#lt-arrow'+randID).height()/2+'px','left':parseInt(dragwrapper.css('left'), 10)-14+'px'}).animate({opacity:1,left:parseInt($('#lt-arrow'+randID).css('left'), 10)-6+'px'},200);
+ $('#rt-arrow'+randID).stop().css({'position':'absolute','top':bb.height/2-$('#lt-arrow'+randID).height()/2+'px','left':parseInt(dragwrapper.css('left'), 10)+10+'px'}).animate({opacity:1,left:parseInt($('#rt-arrow'+randID).css('left'), 10)+6+'px'},200);
+ },function(){
+ $('#lt-arrow'+randID).animate({opacity:0,left:parseInt($('#lt-arrow'+randID).css('left'),10)-6+'px'},350);
+ $('#rt-arrow'+randID).animate({opacity:0,left:parseInt($('#rt-arrow'+randID).css('left'),10)+6+'px'},350);
+ }
+ );
+
+ // When clicking in the container, move the bar and imageholder divs
+ $(obj).on('click touchmove touchstart', function(e){
+ bb = obj.get()[0].getBoundingClientRect();
+ var pageX = e.pageX || e.originalEvent.touches[0].pageX;
+ var moveSpeed = o.clickSpeed;
+ if(e.type == "touchmove") {
+ moveSpeed = 10;
+ }
+ var clickX = pageX - $(this).offset().left;
+ var percentualLeft = clickX / $(this).width() * 100;
+ var percentualLeftDragger = (clickX - barOffset) / $(this).width() * 100;
+ if (pageX < bb.left || pageX > bb.right) { return; }
+
+ dragwrapper.stop().animate({'left':percentualLeftDragger+'%'},moveSpeed);
+ beforeWrapper.stop().animate({'width':percentualLeft+'%'},moveSpeed, function() {
+ var pos = (parseInt( $('> div:eq(2)', obj).css('width'), 10 )) / imgWidth;
+ o.onSlide.call(this, pos);
});
- $(obj).one('mousemove', function(){dragwrapper.stop().animate({'opacity':1},500);}); // If the mouse is over the container and we animate the intro, we run this to change the opacity when the mouse moves since the hover event doesnt get triggered yet
- }
+ $('#lt-arrow'+randID+',#rt-arrow'+randID).stop().animate({opacity:0},50);
+ });
+ $(obj).one('mousemove', function(){dragwrapper.stop().animate({'opacity':1},500);}); // If the mouse is over the container and we animate the intro, we run this to change the opacity when the mouse moves since the hover event doesnt get triggered yet
+ }
}
});
}(jQuery));
-
-