From cbee8089df9bbbbb2fe8ba6790f17cb7a4f707fe Mon Sep 17 00:00:00 2001
From: Brett Mason <brettsmason@gmail.com>
Date: Tue, 29 Nov 2016 16:57:57 +0000
Subject: [PATCH] Add `contentScroll` option to allow for content scrolling to
 be enabled/disabled. Enabled by default. Visual test updated with this
 option.

---
 js/foundation.offcanvas.js             | 24 ++++++++++++++++++------
 test/visual/offcanvas/all-options.html | 13 +++++++++++--
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js
index c71f2218f..8af94f56b 100644
--- a/js/foundation.offcanvas.js
+++ b/js/foundation.offcanvas.js
@@ -165,8 +165,7 @@ class OffCanvas {
    */
   open(event, trigger) {
     if (this.$element.hasClass('is-open') || this.isRevealed) { return; }
-    var _this = this,
-        $body = $(document.body);
+    var _this = this;
 
     if (this.options.forceTo === 'top') {
       window.scrollTo(0, 0);
@@ -178,16 +177,19 @@ class OffCanvas {
      * Fires when the off-canvas menu opens.
      * @event OffCanvas#opened
      */
-    $('body').addClass('is-off-canvas-open');
     _this.$element.addClass('is-open')
 
     this.$triggers.attr('aria-expanded', 'true');
     this.$element.attr('aria-hidden', 'false')
         .trigger('opened.zf.offcanvas');
 
+    // If `contentScroll` is set to false, add class and disable scrolling on touch devices.
+    if (this.options.contentScroll == false) {
+      $('body').addClass('is-off-canvas-open').on('touchmove', this._stopScrolling);
+    }
+
     // If we have an overlay lets make it visible.
     if (this.options.contentOverlay) {
-    	$('body').on('touchmove', this._stopScrolling);
       this.$overlay.addClass('is-visible');
     }
 
@@ -246,7 +248,6 @@ class OffCanvas {
 
     var _this = this;
 
-    $('body').removeClass('is-off-canvas-open');
     _this.$element.removeClass('is-open');
 
     this.$element.attr('aria-hidden', 'true')
@@ -256,9 +257,13 @@ class OffCanvas {
        */
         .trigger('closed.zf.offcanvas');
 
+    // If `contentScroll` is set to false, remove class and re-enable scrolling on touch devices.
+    if (this.options.contentScroll == false) {
+      $('body').removeClass('is-off-canvas-open').off('touchmove', this._stopScrolling);
+    }
+
     // Remove `is-visible` class from overlay.
     if (this.options.contentOverlay) {
-    	$('body').off('touchmove', this._stopScrolling);
       this.$overlay.removeClass('is-visible');
     }
 
@@ -330,6 +335,13 @@ OffCanvas.defaults = {
    */
   contentOverlay: true,
 
+  /**
+   * Enable/disable scrolling of the main content when an off canvas panel is open.
+   * @option
+   * @example true
+   */
+  contentScroll: true,
+
   /**
    * Amount of time in ms the open and close transition requires. If none selected, pulls from body style.
    * @option
diff --git a/test/visual/offcanvas/all-options.html b/test/visual/offcanvas/all-options.html
index f4820103f..ddfafe19a 100644
--- a/test/visual/offcanvas/all-options.html
+++ b/test/visual/offcanvas/all-options.html
@@ -23,7 +23,7 @@
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
-        <h3>This is a right off-canvas panel</h3>
+        <h3>This is a right off-canvas panel.</h3>
       </div>
 
       <div class="off-canvas position-top" id="offCanvasTop" data-off-canvas>
@@ -37,7 +37,7 @@
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
-        <h3>This is a bottom off-canvas panel</h3>
+        <h3>This is a bottom off-canvas panel.</h3>
       </div>
 
       <div class="off-canvas position-left" id="offCanvasLeftOverlap" data-off-canvas data-transition="overlap">
@@ -82,6 +82,13 @@
         <h3>This is a bottom off-canvas panel with force-to set to bottom</h3>
       </div>
 
+      <div class="off-canvas position-left" id="noScroll" data-off-canvas data-content-scroll="false">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a left off-canvas panel with content scroll disabled.</h3>
+      </div>
+
       <div class="off-canvas position-left" id="noOverlay" data-off-canvas data-content-overlay="false">
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
@@ -119,6 +126,7 @@
           </div>
 
           <div class="button-group expanded">
+            <button type="button" class="button" data-toggle="noScroll">No scroll</button>
             <button type="button" class="button" data-toggle="noOverlay">No overlay</button>
             <button type="button" class="button" data-toggle="noCloseOnClick">No close on click</button>
           </div>
@@ -169,6 +177,7 @@
           </div>
 
           <div class="button-group expanded">
+            <button type="button" class="button" data-toggle="noScroll">No scroll</button>
             <button type="button" class="button" data-toggle="noOverlay">No overlay</button>
             <button type="button" class="button" data-toggle="noCloseOnClick">No close on click</button>
           </div>
-- 
2.47.2