Merge pull request #4 from humaan/modaal-v029

Modaal v0.2.9 Updates and Bug Fixes
humaan · Apr 21, 2016 · 8117953 · 8117953
2 parents c45a8cc + 0ce4f37
commit 8117953
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,7 @@
 
 ***
 
+- Version 0.2.9
 - Requires jQuery 1.11.2. v2+ not tested
 - Built by [Humaan](http://www.humaan.com)
 
@@ -73,6 +74,7 @@ accessible_title|`string`|`Dialog Window`||Set the `aria-label` attribute value
 start_open|`boolean`|`false`|`true`<br /> `false`|Set this to `true` if you want the Modaal window to launch immediately on load.
 fullscreen|`boolean`|`false`|`true`<br /> `false`|Set this to true to make the modaal fill the entire screen, false will default to own width/height attributes.
 custom_class|`string`|`''`||Fill in this string with a custom class that will be applied to the outer most modal wrapper.
+background_scroll|`boolean`|`false`|`true`<br /> `false`|Set this to true to enable the page to scroll behind the open modaal
 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

diff --git a/dist/css/modaal.css b/dist/css/modaal.css
@@ -1,5 +1,5 @@
 /*!
- Modaal - accessible modals - v0.2.7
+ Modaal - accessible modals - v0.2.9
  by Humaan, for all humans.
  http://humaan.com
  */

diff --git a/dist/css/modaal.min.css b/dist/css/modaal.min.css
diff --git a/dist/css/modaal.scss b/dist/css/modaal.scss
@@ -1,5 +1,5 @@
 /*!
- Modaal - accessible modals - v0.2.7
+ Modaal - accessible modals - v0.2.9
  by Humaan, for all humans.
  http://humaan.com
  */

diff --git a/dist/js/modaal.js b/dist/js/modaal.js
@@ -1,5 +1,5 @@
 /*!
- Modaal - accessible modals - v0.2.8
+ Modaal - accessible modals - v0.2.9
  by Humaan, for all humans.
  http://humaan.com
  */
@@ -613,6 +613,11 @@
  var this_gallery_item = this_gallery.find('.modaal-gallery-item');
  var this_gallery_total = this_gallery_item.length - 1;
 
+ // if single item, don't proceed
+ if ( this_gallery_total == 0 ) {
+ return false;
+ }
+
  var prev_btn = this_gallery.find('.modaal-gallery-prev'),
  next_btn = this_gallery.find('.modaal-gallery-next');
 
@@ -625,6 +630,14 @@
  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;
+ }
+
 
  // lock dimensions
  current_item.stop().animate({
@@ -851,10 +864,14 @@
  // Modal is open so update scope
  self.scope.is_open = true;
 
- // add the markup then animate it in
- dom.css({
- 'overflow': 'hidden'
- });
+ // set body to overflow hidden if background_scroll is false
+ if (! self.options.background_scroll) {
+ dom.css({
+ 'overflow': 'hidden'
+ });
+ }
+
+ // append modaal overlay
  dom.append('<div class="modaal-overlay" id="' + self.scope.id + '_overlay"></div>');
 
  // now show
@@ -923,9 +940,9 @@
  }
 
  // option: hide_close
- if ( self.attr('data-modaal-locked') ) {
+ if ( self.attr('data-modaal-hide-close') ) {
  inline_options = true;
- options.hide_close = (self.attr('data-modaal-locked') == 'true' || true ? true : false);
+ options.hide_close = (self.attr('data-modaal-hide-close') == 'true' || true ? true : false);
  }
 
  // option: background
@@ -943,7 +960,7 @@
  // option: overlay_close
  if ( self.attr('data-modaal-overlay-close') ) {
  inline_options = true;
- options.overlay_close = self.attr('data-modaal-modaal-overlay-close');
+ options.overlay_close = (self.attr('data-modaal-overlay-close') == 'false' || false ? false : true);
  }
 
  // option: accessible_title
@@ -955,20 +972,26 @@
  // option: start_open
  if ( self.attr('data-modaal-start-open') ) {
  inline_options = true;
- options.start_open = self.attr('data-modaal-start-open');
+ options.start_open = (self.attr('data-modaal-start-open') == 'true' || true ? true : false);
  }
 
  // option: fullscreen
  if ( self.attr('data-modaal-fullscreen') ) {
  inline_options = true;
- options.fullscreen = self.attr('data-modaal-fullscreen');
+ options.fullscreen = (self.attr('data-modaal-fullscreen') == 'true' || true ? true : false);
  }
 
  // option: fullscreen
  if ( self.attr('data-modaal-custom-class') ) {
  inline_options = true;
  options.custom_class = self.attr('data-modaal-custom-class');
  }
+
+ // option: fullscreen
+ if ( self.attr('data-modaal-background-scroll') ) {
+ inline_options = true;
+ options.custom_class = (self.attr('data-modaal-background-scroll') == 'true' || true ? true : false);
+ }
 
  // option: width
  if ( self.attr('data-modaal-width') ) {
@@ -1084,6 +1107,7 @@
  start_open: false,
  fullscreen: false,
  custom_class: '',
+ background_scroll: false,
 
  width: null,
  height: null,

diff --git a/dist/js/modaal.min.js b/dist/js/modaal.min.js
diff --git a/source/css/modaal.css b/source/css/modaal.css
@@ -1,5 +1,5 @@
 /*!
- Modaal - accessible modals - v0.2.7
+ Modaal - accessible modals - v0.2.9
  by Humaan, for all humans.
  http://humaan.com
  */

diff --git a/source/css/modaal.scss b/source/css/modaal.scss
@@ -1,5 +1,5 @@
 /*!
- Modaal - accessible modals - v0.2.7
+ Modaal - accessible modals - v0.2.9
  by Humaan, for all humans.
  http://humaan.com
  */

diff --git a/source/js/modaal.js b/source/js/modaal.js
@@ -1,5 +1,5 @@
 /*!
- Modaal - accessible modals - v0.2.8
+ Modaal - accessible modals - v0.2.9
  by Humaan, for all humans.
  http://humaan.com
  */
@@ -613,6 +613,11 @@
  var this_gallery_item = this_gallery.find('.modaal-gallery-item');
  var this_gallery_total = this_gallery_item.length - 1;
 
+ // if single item, don't proceed
+ if ( this_gallery_total == 0 ) {
+ return false;
+ }
+
  var prev_btn = this_gallery.find('.modaal-gallery-prev'),
  next_btn = this_gallery.find('.modaal-gallery-next');
 
@@ -625,6 +630,14 @@
  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;
+ }
+
 
  // lock dimensions
  current_item.stop().animate({
@@ -851,10 +864,14 @@
  // Modal is open so update scope
  self.scope.is_open = true;
 
- // add the markup then animate it in
- dom.css({
- 'overflow': 'hidden'
- });
+ // set body to overflow hidden if background_scroll is false
+ if (! self.options.background_scroll) {
+ dom.css({
+ 'overflow': 'hidden'
+ });
+ }
+
+ // append modaal overlay
  dom.append('<div class="modaal-overlay" id="' + self.scope.id + '_overlay"></div>');
 
  // now show
@@ -923,9 +940,9 @@
  }
 
  // option: hide_close
- if ( self.attr('data-modaal-locked') ) {
+ if ( self.attr('data-modaal-hide-close') ) {
  inline_options = true;
- options.hide_close = (self.attr('data-modaal-locked') == 'true' || true ? true : false);
+ options.hide_close = (self.attr('data-modaal-hide-close') == 'true' || true ? true : false);
  }
 
  // option: background
@@ -943,7 +960,7 @@
  // option: overlay_close
  if ( self.attr('data-modaal-overlay-close') ) {
  inline_options = true;
- options.overlay_close = self.attr('data-modaal-modaal-overlay-close');
+ options.overlay_close = (self.attr('data-modaal-overlay-close') == 'false' || false ? false : true);
  }
 
  // option: accessible_title
@@ -955,20 +972,26 @@
  // option: start_open
  if ( self.attr('data-modaal-start-open') ) {
  inline_options = true;
- options.start_open = self.attr('data-modaal-start-open');
+ options.start_open = (self.attr('data-modaal-start-open') == 'true' || true ? true : false);
  }
 
  // option: fullscreen
  if ( self.attr('data-modaal-fullscreen') ) {
  inline_options = true;
- options.fullscreen = self.attr('data-modaal-fullscreen');
+ options.fullscreen = (self.attr('data-modaal-fullscreen') == 'true' || true ? true : false);
  }
 
  // option: fullscreen
  if ( self.attr('data-modaal-custom-class') ) {
  inline_options = true;
  options.custom_class = self.attr('data-modaal-custom-class');
  }
+
+ // option: fullscreen
+ if ( self.attr('data-modaal-background-scroll') ) {
+ inline_options = true;
+ options.custom_class = (self.attr('data-modaal-background-scroll') == 'true' || true ? true : false);
+ }
 
  // option: width
  if ( self.attr('data-modaal-width') ) {
@@ -1084,6 +1107,7 @@
  start_open: false,
  fullscreen: false,
  custom_class: '',
+ background_scroll: false,
 
  width: null,
  height: null,