Skip to content

Commit

Permalink
Contribution: Fix for issue humaan#123 - Update to modaal.js file to …
Browse files Browse the repository at this point in the history 
…give galleries the option of looping from the last to the first slide and vice-versa. Documents updated to include new option.
  • Loading branch information
Muir Adams authored and Muir Adams committed Mar 22, 2019
1 parent 76ddd5e commit 3c1faa7
Show file tree
Hide file tree
Showing 4 changed files with 118 additions and 26 deletions.
1 change: 1 addition & 0 deletions README.md
View file
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
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

0 comments on commit 3c1faa7

Please sign in to comment.