Skip to content

Commit

Permalink
Fix fancyapps#1417 - Remove small buttons by reference not by class-name
Browse files Browse the repository at this point in the history 
It is now easier to create custom small buttons; they are now
multilingual.
  • Loading branch information
@fancyapps
fancyapps committed May 8, 2017
1 parent 150aecd commit 03b93fb
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 53 deletions.
72 changes: 46 additions & 26 deletions dist/jquery.fancybox.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// ==================================================
// fancyBox v3.1.1
// fancyBox v3.1.2
//
// Licensed GPLv3 for open source use
// or fancyBox Commercial License for commercial use
Expand Down Expand Up @@ -64,8 +64,8 @@
// Detect "idle" time in seconds
idleTime : 3,

// Should apply buttons at top right corner of the content
// If 'auto' - will be set for content having type 'html', 'inline' or 'ajax'
// Should display buttons at top right corner of the content
// If 'auto' - they will be created for content having type 'html', 'inline' or 'ajax'
// By default, it only has small close button, but you can use it to place anything
smallBtn : 'auto',

Expand Down Expand Up @@ -196,7 +196,7 @@

// This small close button will be appended to your html/inline/ajax content by default,
// if "smallBtn" option is not set to false
smallBtn : '<button data-fancybox-close class="fancybox-close-small"></button>'
smallBtn : '<button data-fancybox-close class="fancybox-close-small" title="{{CLOSE}}"></button>'
},

// Container is injected into this element
Expand Down Expand Up @@ -390,6 +390,15 @@
}

})();


// Force redraw on an element.
// This helps in cases where the browser doesn't redraw an updated element properly.
// =================================================================================

var forceRedraw = function( $el ) {
return $el[0].offsetHeight; // jshint ignore:line
};


// Class definition
Expand Down Expand Up @@ -1016,7 +1025,7 @@
if ( current.opts.animationEffect && self.$refs.bg.length ) {
self.$refs.bg.css('transition-duration', duration + 'ms');

self.$refs.bg[0].offsetHeight;
forceRedraw( self.$refs.bg );
}

self.current.$slide.addClass('fancybox-slide--current');
Expand Down Expand Up @@ -1878,7 +1887,7 @@
$iframe.attr( 'src', slide.src );

if ( slide.opts.smallBtn ) {
slide.$content.prepend( slide.opts.btnTpl.smallBtn );
slide.$content.prepend( self.translate( slide, slide.opts.btnTpl.smallBtn ) );
}

// Remove iframe if closing or changing gallery item
Expand Down Expand Up @@ -1917,45 +1926,56 @@

if ( isQuery( content ) && content.parent().length ) {

// If it is a jQuery object, then it will be moved to the box.
// If content is a jQuery object, then it will be moved to the slide.
// The placeholder is created so we will know where to put it back.
// If user is navigating gallery fast, then the content might be already moved to the box
if ( content.data( 'placeholder' ) ) {
content.parents( '.fancybox-slide' ).trigger( 'onReset' );
}
// If user is navigating gallery fast, then the content might be already inside fancyBox
// =====================================================================================

// Make sure content is not already moved to fancyBox
content.parent( '.fancybox-slide--inline' ).trigger( 'onReset' );

// Create temporary element marking original place of the content
slide.$placeholder = $( '<div></div>' ).hide().insertAfter( content );

content.data({
'placeholder' : $( '<div></div>' ).hide().insertAfter( content )
}).css('display', 'inline-block');
// Make sure content is visible
content.css('display', 'inline-block');

} else {

// If content is just a plain text, try to convert it to html
if ( $.type( content ) === 'string' ) {

content = $('<div>').append( $.trim( content ) ).contents();

// If we have text node, then add wrapping element to make vertical alignment work
if ( content[0].nodeType === 3 ) {
content = $('<div>').html( content );
}

}

// If "selector" option is provided, then filter content
if ( slide.opts.selector ) {
content = $('<div>').html( content ).find( slide.opts.selector );
}

}

slide.$slide.one('onReset', function () {
var placeholder = isQuery( content ) ? content.data( 'placeholder' ) : 0;

if ( placeholder ) {
content.hide().replaceAll( placeholder );
// Put content back
if ( slide.$placeholder ) {
slide.$placeholder.after( content.hide() ).remove();

slide.$placeholder = null;
}

// Remove custom close button
if ( slide.$smallBtn ) {
slide.$smallBtn.remove();

content.data( 'placeholder', null );
slide.$smallBtn = null;
}

// Remove content and mark slide as not loaded
if ( !slide.hasError ) {
$(this).empty();

Expand All @@ -1966,8 +1986,8 @@

slide.$content = $( content ).appendTo( slide.$slide );

if ( slide.opts.smallBtn === true ) {
slide.$content.find( '.fancybox-close-small' ).remove().end().eq(0).append( slide.opts.btnTpl.smallBtn );
if ( slide.opts.smallBtn && !slide.$smallBtn ) {
slide.$smallBtn = $( self.translate( slide, slide.opts.btnTpl.smallBtn ) ).appendTo( slide.$content );
}

this.afterLoad( slide );
Expand Down Expand Up @@ -2123,7 +2143,7 @@
slide.$slide.addClass( 'fancybox-fx-' + slide.opts.transitionEffect );

// Force reflow for CSS3 transitions
slide.$slide[0].offsetHeight; // jshint ignore:line
forceRedraw( slide.$slide );

slide.$content.removeClass( 'fancybox-is-hidden' );

Expand All @@ -2148,7 +2168,7 @@

slide.$content.removeClass( 'fancybox-is-hidden' );

slide.$slide[0].offsetHeight;
forceRedraw( slide.$slide );

slide.$slide.addClass( 'fancybox-slide--current' );

Expand All @@ -2168,7 +2188,7 @@
self.isAnimating = false;
slide.isRevealed = true;

slide.$slide[0].offsetHeight;
forceRedraw( slide.$slide );

self.complete();

Expand Down Expand Up @@ -2646,7 +2666,7 @@

$.fancybox = {

version : "3.1.1",
version : "3.1.2",
defaults : defaults,


Expand Down
4 changes: 2 additions & 2 deletions dist/jquery.fancybox.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@fancyapps/fancybox",
"description": "Touch enabled, responsive and fully customizable jQuery lightbox script",
"version": "3.1.1",
"version": "3.1.2",
"homepage": "http://fancyapps.com/fancybox/",
"main": "./dist/jquery.fancybox.min.js",
"author": "fancyApps",
Expand Down
68 changes: 44 additions & 24 deletions src/js/core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@
// Detect "idle" time in seconds
idleTime : 3,

// Should apply buttons at top right corner of the content
// If 'auto' - will be set for content having type 'html', 'inline' or 'ajax'
// Should display buttons at top right corner of the content
// If 'auto' - they will be created for content having type 'html', 'inline' or 'ajax'
// By default, it only has small close button, but you can use it to place anything
smallBtn : 'auto',

Expand Down Expand Up @@ -186,7 +186,7 @@

// This small close button will be appended to your html/inline/ajax content by default,
// if "smallBtn" option is not set to false
smallBtn : '<button data-fancybox-close class="fancybox-close-small"></button>'
smallBtn : '<button data-fancybox-close class="fancybox-close-small" title="{{CLOSE}}"></button>'
},

// Container is injected into this element
Expand Down Expand Up @@ -380,6 +380,15 @@
}

})();


// Force redraw on an element.
// This helps in cases where the browser doesn't redraw an updated element properly.
// =================================================================================

var forceRedraw = function( $el ) {
return $el[0].offsetHeight; // jshint ignore:line
};


// Class definition
Expand Down Expand Up @@ -1006,7 +1015,7 @@
if ( current.opts.animationEffect && self.$refs.bg.length ) {
self.$refs.bg.css('transition-duration', duration + 'ms');

self.$refs.bg[0].offsetHeight;
forceRedraw( self.$refs.bg );
}

self.current.$slide.addClass('fancybox-slide--current');
Expand Down Expand Up @@ -1868,7 +1877,7 @@
$iframe.attr( 'src', slide.src );

if ( slide.opts.smallBtn ) {
slide.$content.prepend( slide.opts.btnTpl.smallBtn );
slide.$content.prepend( self.translate( slide, slide.opts.btnTpl.smallBtn ) );
}

// Remove iframe if closing or changing gallery item
Expand Down Expand Up @@ -1907,45 +1916,56 @@

if ( isQuery( content ) && content.parent().length ) {

// If it is a jQuery object, then it will be moved to the box.
// If content is a jQuery object, then it will be moved to the slide.
// The placeholder is created so we will know where to put it back.
// If user is navigating gallery fast, then the content might be already moved to the box
if ( content.data( 'placeholder' ) ) {
content.parents( '.fancybox-slide' ).trigger( 'onReset' );
}
// If user is navigating gallery fast, then the content might be already inside fancyBox
// =====================================================================================

// Make sure content is not already moved to fancyBox
content.parent( '.fancybox-slide--inline' ).trigger( 'onReset' );

// Create temporary element marking original place of the content
slide.$placeholder = $( '<div></div>' ).hide().insertAfter( content );

content.data({
'placeholder' : $( '<div></div>' ).hide().insertAfter( content )
}).css('display', 'inline-block');
// Make sure content is visible
content.css('display', 'inline-block');

} else {

// If content is just a plain text, try to convert it to html
if ( $.type( content ) === 'string' ) {

content = $('<div>').append( $.trim( content ) ).contents();

// If we have text node, then add wrapping element to make vertical alignment work
if ( content[0].nodeType === 3 ) {
content = $('<div>').html( content );
}

}

// If "selector" option is provided, then filter content
if ( slide.opts.selector ) {
content = $('<div>').html( content ).find( slide.opts.selector );
}

}

slide.$slide.one('onReset', function () {
var placeholder = isQuery( content ) ? content.data( 'placeholder' ) : 0;

if ( placeholder ) {
content.hide().replaceAll( placeholder );
// Put content back
if ( slide.$placeholder ) {
slide.$placeholder.after( content.hide() ).remove();

slide.$placeholder = null;
}

// Remove custom close button
if ( slide.$smallBtn ) {
slide.$smallBtn.remove();

content.data( 'placeholder', null );
slide.$smallBtn = null;
}

// Remove content and mark slide as not loaded
if ( !slide.hasError ) {
$(this).empty();

Expand All @@ -1956,8 +1976,8 @@

slide.$content = $( content ).appendTo( slide.$slide );

if ( slide.opts.smallBtn === true ) {
slide.$content.find( '.fancybox-close-small' ).remove().end().eq(0).append( slide.opts.btnTpl.smallBtn );
if ( slide.opts.smallBtn && !slide.$smallBtn ) {
slide.$smallBtn = $( self.translate( slide, slide.opts.btnTpl.smallBtn ) ).appendTo( slide.$content );
}

this.afterLoad( slide );
Expand Down Expand Up @@ -2113,7 +2133,7 @@
slide.$slide.addClass( 'fancybox-fx-' + slide.opts.transitionEffect );

// Force reflow for CSS3 transitions
slide.$slide[0].offsetHeight; // jshint ignore:line
forceRedraw( slide.$slide );

slide.$content.removeClass( 'fancybox-is-hidden' );

Expand All @@ -2138,7 +2158,7 @@

slide.$content.removeClass( 'fancybox-is-hidden' );

slide.$slide[0].offsetHeight;
forceRedraw( slide.$slide );

slide.$slide.addClass( 'fancybox-slide--current' );

Expand All @@ -2158,7 +2178,7 @@
self.isAnimating = false;
slide.isRevealed = true;

slide.$slide[0].offsetHeight;
forceRedraw( slide.$slide );

self.complete();

Expand Down

0 comments on commit 03b93fb

Please sign in to comment.