Skip to content

Contribution: Fix for issue #123 - Update to modaal.js file to give g… #124

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
muiradams wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Contribution: Fix for issue #123 - Update to modaal.js file to give g… #124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ close_aria_label|`string`|`Close (Press escape to close)`||String for close butt
width|`integer`|null||Set the desired width of the modal.
height|`integer`|null||Set the desired height of the modal.
gallery_active_class|`string`|`gallery_active_item`||Active class applied to the currently active image or image slide in a gallery
loop_gallery|`boolean`|`false`|`true`<br /> `false`|Set to true to allow the gallery to loop between the last and first image slides.
outer_controls|`boolean`|`false`|`true`<br /> `false`|Set to true to put the next/prev controls outside the Modaal wrapper, at the edges of the browser window.
confirm_button_text|`string`|`Confirm`||Text on the confirm button.
confirm_cancel_button_text|`string`|`Cancel`||Text on the confirm modal cancel button.
Expand Down
87 changes: 74 additions & 13 deletions dist/js/modaal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@

=== Gallery Options & Events ===
gallery_active_class (string) : Active class applied to the currently active image or image slide in a gallery 'gallery_active_item'
loop_gallery (boolean) : Set to true to allow the gallery to loop between the last and first image slides.
outer_controls (boolean) : Set to true to put the next/prev controls outside the Modaal wrapper, at the edges of the browser window.
before_image_change (function) : Callback function executed before the image slide changes in a gallery modal. Default function( current_item, incoming_item )
after_image_change (function) : Callback function executed after the image slide changes in a gallery modal. Default function ( current_item )
Expand Down Expand Up @@ -378,7 +379,7 @@
}

// add the guts of the content
build_markup += '<div class="' + wrap_class + ' modaal-focus" aria-hidden="false" aria-label="' + self.options.accessible_title + ' - ' + self.options.close_aria_label + '" role="dialog">';
build_markup += '<div class="' + wrap_class + ' modaal-focus" aria-hidden="false" aria-selected="true" aria-label="' + self.options.accessible_title + ' - ' + self.options.close_aria_label + '" role="dialog">';

// If it's inline type, we want to clone content instead of dropping it straight in
if (self.options.type == 'inline') {
Expand Down Expand Up @@ -573,6 +574,7 @@
create_image : function() {
var self = this;
var content;
var loop_gallery = self.options.loop_gallery;

var modaal_image_markup = '';
var gallery_total;
Expand Down Expand Up @@ -721,10 +723,10 @@
self.build_modal(content);

// setup next & prev buttons
if ( $('.modaal-gallery-item.is_active').is('.gallery-item-0') ) {
if ( !loop_gallery && $('.modaal-gallery-item.is_active').is('.gallery-item-0') ) {
$('.modaal-gallery-prev').hide();
}
if ( $('.modaal-gallery-item.is_active').is('.gallery-item-' + gallery_total) ) {
if ( !loop_gallery && $('.modaal-gallery-item.is_active').is('.gallery-item-' + gallery_total) ) {
$('.modaal-gallery-next').hide();
}
},
Expand All @@ -736,6 +738,7 @@
var this_gallery = $('#' + self.scope.id);
var this_gallery_item = this_gallery.find('.modaal-gallery-item');
var this_gallery_total = this_gallery_item.length - 1;
var loop_gallery = self.options.loop_gallery;

// if single item, don't proceed
if ( this_gallery_total == 0 ) {
Expand All @@ -752,16 +755,36 @@

// CB: Before image change
var current_item = this_gallery.find( '.modaal-gallery-item.' + self.private_options.active_class ),
incoming_item = ( direction == 'next' ? current_item.next( '.modaal-gallery-item' ) : current_item.prev( '.modaal-gallery-item' ) );
self.options.before_image_change.call(self, current_item, incoming_item);

// stop change if at start of end
if ( direction == 'prev' && this_gallery.find('.gallery-item-0').hasClass('is_active') ) {
return false;
} else if ( direction == 'next' && this_gallery.find('.gallery-item-' + this_gallery_total).hasClass('is_active') ) {
return false;
incoming_item;

if ( direction == 'prev') {
// If it's the first item
if (this_gallery.find('.gallery-item-0').hasClass('is_active')) {
// If looping is set then move to the last slide
if (loop_gallery) {
incoming_item = current_item.parent().find('> div:last-child');
} else {
return false;
}
} else {
incoming_item = current_item.prev( '.modaal-gallery-item' );
}
} else if ( direction == 'next') {
// If it's the last item
if (this_gallery.find('.gallery-item-' + this_gallery_total).hasClass('is_active')) {
// If looping is set then move to the first slide
if (loop_gallery) {
incoming_item = current_item.parent().find('> div:first-child');
} else {
return false;
}
} else {
incoming_item = current_item.next( '.modaal-gallery-item' );
}
}

self.options.before_image_change.call(self, current_item, incoming_item);


// lock dimensions
current_item.stop().animate({
Expand Down Expand Up @@ -835,7 +858,7 @@
this_gallery.find('.modaal-gallery-item.' + self.private_options.active_class + '').attr('tabindex', '0').focus();

// hide/show next/prev
if ( this_gallery.find('.modaal-gallery-item.' + self.private_options.active_class).is('.gallery-item-0') ) {
if ( !loop_gallery && this_gallery.find('.modaal-gallery-item.' + self.private_options.active_class).is('.gallery-item-0') ) {
prev_btn.stop().animate({
opacity: 0
}, 150, function(){
Expand All @@ -849,7 +872,7 @@
opacity: 1
}, 150);
}
if ( this_gallery.find('.modaal-gallery-item.' + self.private_options.active_class).is('.gallery-item-' + this_gallery_total) ) {
if ( !loop_gallery && this_gallery.find('.modaal-gallery-item.' + self.private_options.active_class).is('.gallery-item-' + this_gallery_total) ) {
next_btn.stop().animate({
opacity: 0
}, 150, function(){
Expand Down Expand Up @@ -940,6 +963,15 @@

// now set the focus
focusTarget.attr('tabindex', '0').focus();

// iOS Fix for VoiceOver.
// Unfortunately this timeout appears to be the only consistent workaround for shifting focus in VoiceOver for conten that shows and hides.
// Wrapped in User Agent check to restrict it's application to only iphone, ipad and ipod
if ( self.is_ios() ) {
setTimeout(function() {
focusTarget.find('[role="document"] >:first-child').focus();
}, 1000);
}

// Run after_open
if (animation_type !== 'none') {
Expand Down Expand Up @@ -1001,6 +1033,17 @@
if (self.lastFocus != null) {
self.lastFocus.focus();
}

// iOS Fix for VoiceOver.
// Unfortunately this timeout appears to be the only consistent workaround for shifting focus in VoiceOver for conten that shows and hides.
// Wrapped in User Agent check to restrict it's application to only iphone, ipad and ipod
if ( self.is_ios() ) {
setTimeout(function() {
if (self.lastFocus != null) {
self.lastFocus.focus();
}
}, 1000);
}
},

// Overlay control (accepts action for show or hide)
Expand Down Expand Up @@ -1049,6 +1092,17 @@
// ----------------------------------------------------------------
is_touch : function() {
return 'ontouchstart' in window || navigator.maxTouchPoints;
},

// Check if is iOS - this is necessary for focus handling on iOS VoiceOver where a delay is required to shift focus successfully.
// ----------------------------------------------------------------
is_ios : function() {
var ua = navigator.userAgent;
if ( ua.match(/iPhone/i) || ua.match(/iPad/i) || ua.match(/iPod/i) ) {
return true;
} else {
return false;
}
}
};

Expand Down Expand Up @@ -1135,6 +1189,7 @@

//Gallery Modal
gallery_active_class: 'gallery_active_item',
loop_gallery: false,
outer_controls: false,
before_image_change: function( current_item, incoming_item ) {},
after_image_change: function( current_item ) {},
Expand Down Expand Up @@ -1301,6 +1356,12 @@
options.gallery_active_class = self.attr('data-modaal-gallery-active-class');
}

// option: loop_gallery
if ( self.attr('data-modaal-loop-gallery') ) {
inline_options = true;
options.loop_gallery = self.attr('data-modaal-loop-gallery');
}

// option: loading_content
if ( self.attr('data-modaal-loading-content') ) {
inline_options = true;
Expand Down
Loading