diff --git a/core/modules/outside_in/js/off-canvas.es6.js b/core/modules/outside_in/js/off-canvas.es6.js
index d7c8d906f6..50fabecbb3 100644
--- a/core/modules/outside_in/js/off-canvas.es6.js
+++ b/core/modules/outside_in/js/off-canvas.es6.js
@@ -11,19 +11,6 @@
 
   'use strict';
 
-  // The minimum width to use body displace needs to match the width at which
-  // the tray will be %100 width. @see outside_in.module.css
-  var minDisplaceWidth = 768;
-
-  /**
-   * The edge of the screen that the dialog should appear on.
-   *
-   * @type {string}
-   */
-  var edge = document.documentElement.dir === 'rtl' ? 'left' : 'right';
-
-  var $mainCanvasWrapper = $('[data-off-canvas-main-canvas]');
-
   /**
    * Resets the size of the dialog.
    *
@@ -31,27 +18,28 @@
    *   The event triggered.
    */
   function resetSize(event) {
+    var offCanvasDialog = event.data.offCanvasDialog;
     var offsets = displace.offsets;
     var $element = event.data.$element;
-    var $widget = $element.dialog('widget');
+    var container = offCanvasDialog.getContainer($element);
 
     var adjustedOptions = {
       // @see http://api.jqueryui.com/position/
       position: {
-        my: edge + ' top',
-        at: edge + ' top' + (offsets.top !== 0 ? '+' + offsets.top : ''),
+        my: offCanvasDialog.getEdge() + ' top',
+        at: offCanvasDialog.getEdge() + ' top' + (offsets.top !== 0 ? '+' + offsets.top : ''),
         of: window
       }
     };
 
-    $widget.css({
+    container.css({
       position: 'fixed',
       height: ($(window).height() - (offsets.top + offsets.bottom)) + 'px'
     });
 
     $element
-      .dialog('option', adjustedOptions)
-      .trigger('dialogContentResize.off-canvas');
+        .dialog('option', adjustedOptions)
+        .trigger('dialogContentResize.off-canvas');
   }
 
   /**
@@ -62,15 +50,16 @@
    */
   function handleDialogResize(event) {
     var $element = event.data.$element;
-    var $widget = $element.dialog('widget');
+    var offCanvasDialog = event.data.offCanvasDialog;
+    var $container = offCanvasDialog.getContainer($element);
 
-    var $offsets = $widget.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
+    var $offsets = $container.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
     var offset = 0;
     var modalHeight;
 
     // Let scroll element take all the height available.
     $element.css({height: 'auto'});
-    modalHeight = $widget.height();
+    modalHeight = $container.height();
     $offsets.each(function () { offset += $(this).outerHeight(); });
 
     // Take internal padding into account.
@@ -85,17 +74,19 @@
    *   The event triggered.
    */
   function bodyPadding(event) {
-    if ($('body').outerWidth() < minDisplaceWidth) {
+    var offCanvasDialog = event.data.offCanvasDialog;
+    if ($('body').outerWidth() < offCanvasDialog.minDisplaceWidth) {
       return;
     }
     var $element = event.data.$element;
-    var $widget = $element.dialog('widget');
+    var $container = offCanvasDialog.getContainer($element);
+    var $mainCanvasWrapper = offCanvasDialog.$mainCanvasWrapper;
 
-    var width = $widget.outerWidth();
-    var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + edge);
+    var width = $container.outerWidth();
+    var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + offCanvasDialog.getEdge());
     if (width !== mainCanvasPadding) {
-      $mainCanvasWrapper.css('padding-' + edge, width + 'px');
-      $widget.attr('data-offset-' + edge, width);
+      $mainCanvasWrapper.css('padding-' + offCanvasDialog.getEdge(), width + 'px');
+      $container.attr('data-offset-' + offCanvasDialog.getEdge(), width);
       displace();
     }
   }
@@ -108,49 +99,88 @@
    * @prop {Drupal~behaviorAttach} attach
    *   Attaches event listeners for off-canvas dialogs.
    */
+
+  Drupal.offCanvas = {
+    // The minimum width to use body displace needs to match the width at which
+    // the tray will be %100 width. @see outside_in.module.css
+    minDisplaceWidth: 768,
+
+    $mainCanvasWrapper: $('[data-off-canvas-main-canvas]'),
+    /**
+     * Determines if a
+     * @return {bool}
+     */
+    isOffCanvas: function (dialog, $element, settings) {
+      return $element.is('#drupal-off-canvas');
+    },
+    open: function (event, dialog, $element, settings) {
+      $('body').addClass('js-tray-open');
+      settings.dialogClass += ' ui-dialog-off-canvas';
+      // @see http://api.jqueryui.com/position/
+      settings.position = {
+        my: 'left top',
+        at: this.getEdge() + ' top',
+        of: window
+      };
+      // Applies initial height to dialog based on window height.
+      // See http://api.jqueryui.com/dialog for all dialog options.
+      settings.height = $(window).height();
+    },
+    close: function (event, dialog, $element) {
+      $('body').removeClass('js-tray-open');
+      // Remove all *.off-canvas events
+      $(document).off('.off-canvas');
+      $(window).off('.off-canvas');
+      this.$mainCanvasWrapper.css('padding-' + this.getEdge(), 0);
+    },
+    render: function (event, dialog, $element, settings) {
+      var eventData = {settings: settings, $element: $element, offCanvasDialog: this};
+      $('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
+
+      $element
+          .on('dialogresize.off-canvas', eventData, debounce(this.bodyPadding, 100))
+          .on('dialogContentResize.off-canvas', eventData, this.handleDialogResize)
+          .on('dialogContentResize.off-canvas', eventData, debounce(this.bodyPadding, 100))
+          .trigger('dialogresize.off-canvas');
+
+      this.getContainer($element).attr('data-offset-' + this.getEdge(), '');
+
+      $(window)
+          .on('resize.off-canvas scroll.off-canvas', eventData, debounce(this.resetSize, 100))
+          .trigger('resize.off-canvas');
+    },
+    handleDialogResize: handleDialogResize,
+    resetSize: resetSize,
+    bodyPadding: bodyPadding,
+    getContainer: function ($element) {
+      return $element.dialog('widget');
+    },
+    /**
+     * The edge of the screen that the dialog should appear on.
+     *
+     * @return {string}
+     */
+    getEdge: function () {
+      return document.documentElement.dir === 'rtl' ? 'left' : 'right';
+    }
+  };
+
   Drupal.behaviors.offCanvasEvents = {
     attach: function () {
       $(window).once('off-canvas').on({
-        'dialog:aftercreate': function (event, dialog, $element, settings) {
-          if ($element.is('#drupal-off-canvas')) {
-            var eventData = {settings: settings, $element: $element};
-            $('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
-
-            $element
-              .on('dialogresize.off-canvas', eventData, debounce(bodyPadding, 100))
-              .on('dialogContentResize.off-canvas', eventData, handleDialogResize)
-              .on('dialogContentResize.off-canvas', eventData, debounce(bodyPadding, 100))
-              .trigger('dialogresize.off-canvas');
-
-            $element.dialog('widget').attr('data-offset-' + edge, '');
-
-            $(window)
-              .on('resize.off-canvas scroll.off-canvas', eventData, debounce(resetSize, 100))
-              .trigger('resize.off-canvas');
+        'dialog:beforecreate': function (event, dialog, $element, settings) {
+          if (Drupal.offCanvas.isOffCanvas(dialog, $element, settings)) {
+            Drupal.offCanvas.open(event, dialog, $element, settings)
           }
         },
-        'dialog:beforecreate': function (event, dialog, $element, settings) {
-          if ($element.is('#drupal-off-canvas')) {
-            $('body').addClass('js-tray-open');
-            // @see http://api.jqueryui.com/position/
-            settings.position = {
-              my: 'left top',
-              at: edge + ' top',
-              of: window
-            };
-            settings.dialogClass += ' ui-dialog-off-canvas';
-            // Applies initial height to dialog based on window height.
-            // See http://api.jqueryui.com/dialog for all dialog options.
-            settings.height = $(window).height();
+        'dialog:aftercreate': function (event, dialog, $element, settings) {
+          if (Drupal.offCanvas.isOffCanvas(dialog, $element, settings)) {
+            Drupal.offCanvas.render(event, dialog, $element, settings);
           }
         },
         'dialog:beforeclose': function (event, dialog, $element) {
-          if ($element.is('#drupal-off-canvas')) {
-            $('body').removeClass('js-tray-open');
-            // Remove all *.off-canvas events
-            $(document).off('.off-canvas');
-            $(window).off('.off-canvas');
-            $mainCanvasWrapper.css('padding-' + edge, 0);
+          if (Drupal.offCanvas.isOffCanvas(dialog, $element)) {
+            Drupal.offCanvas.close(event, dialog, $element)
           }
         }
       });
diff --git a/core/modules/outside_in/js/off-canvas.js b/core/modules/outside_in/js/off-canvas.js
index 9722c4682e..d442b9c806 100644
--- a/core/modules/outside_in/js/off-canvas.js
+++ b/core/modules/outside_in/js/off-canvas.js
@@ -9,26 +9,21 @@
 
   'use strict';
 
-  var minDisplaceWidth = 768;
-
-  var edge = document.documentElement.dir === 'rtl' ? 'left' : 'right';
-
-  var $mainCanvasWrapper = $('[data-off-canvas-main-canvas]');
-
   function resetSize(event) {
+    var offCanvasDialog = event.data.offCanvasDialog;
     var offsets = displace.offsets;
     var $element = event.data.$element;
-    var $widget = $element.dialog('widget');
+    var container = offCanvasDialog.getContainer($element);
 
     var adjustedOptions = {
       position: {
-        my: edge + ' top',
-        at: edge + ' top' + (offsets.top !== 0 ? '+' + offsets.top : ''),
+        my: offCanvasDialog.getEdge() + ' top',
+        at: offCanvasDialog.getEdge() + ' top' + (offsets.top !== 0 ? '+' + offsets.top : ''),
         of: window
       }
     };
 
-    $widget.css({
+    container.css({
       position: 'fixed',
       height: $(window).height() - (offsets.top + offsets.bottom) + 'px'
     });
@@ -38,14 +33,15 @@
 
   function handleDialogResize(event) {
     var $element = event.data.$element;
-    var $widget = $element.dialog('widget');
+    var offCanvasDialog = event.data.offCanvasDialog;
+    var $container = offCanvasDialog.getContainer($element);
 
-    var $offsets = $widget.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
+    var $offsets = $container.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
     var offset = 0;
     var modalHeight;
 
     $element.css({ height: 'auto' });
-    modalHeight = $widget.height();
+    modalHeight = $container.height();
     $offsets.each(function () {
       offset += $(this).outerHeight();
     });
@@ -55,57 +51,88 @@
   }
 
   function bodyPadding(event) {
-    if ($('body').outerWidth() < minDisplaceWidth) {
+    var offCanvasDialog = event.data.offCanvasDialog;
+    if ($('body').outerWidth() < offCanvasDialog.minDisplaceWidth) {
       return;
     }
     var $element = event.data.$element;
-    var $widget = $element.dialog('widget');
+    var $container = offCanvasDialog.getContainer($element);
+    var $mainCanvasWrapper = offCanvasDialog.$mainCanvasWrapper;
 
-    var width = $widget.outerWidth();
-    var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + edge);
+    var width = $container.outerWidth();
+    var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + offCanvasDialog.getEdge());
     if (width !== mainCanvasPadding) {
-      $mainCanvasWrapper.css('padding-' + edge, width + 'px');
-      $widget.attr('data-offset-' + edge, width);
+      $mainCanvasWrapper.css('padding-' + offCanvasDialog.getEdge(), width + 'px');
+      $container.attr('data-offset-' + offCanvasDialog.getEdge(), width);
       displace();
     }
   }
 
-  Drupal.behaviors.offCanvasEvents = {
-    attach: function attach() {
-      $(window).once('off-canvas').on({
-        'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) {
-          if ($element.is('#drupal-off-canvas')) {
-            var eventData = { settings: settings, $element: $element };
-            $('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
+  Drupal.offCanvas = {
+    minDisplaceWidth: 768,
+
+    $mainCanvasWrapper: $('[data-off-canvas-main-canvas]'),
 
-            $element.on('dialogresize.off-canvas', eventData, debounce(bodyPadding, 100)).on('dialogContentResize.off-canvas', eventData, handleDialogResize).on('dialogContentResize.off-canvas', eventData, debounce(bodyPadding, 100)).trigger('dialogresize.off-canvas');
+    isOffCanvas: function isOffCanvas(dialog, $element, settings) {
+      return $element.is('#drupal-off-canvas');
+    },
+    open: function open(event, dialog, $element, settings) {
+      $('body').addClass('js-tray-open');
+      settings.dialogClass += ' ui-dialog-off-canvas';
 
-            $element.dialog('widget').attr('data-offset-' + edge, '');
+      settings.position = {
+        my: 'left top',
+        at: this.getEdge() + ' top',
+        of: window
+      };
+
+      settings.height = $(window).height();
+    },
+    close: function close(event, dialog, $element) {
+      $('body').removeClass('js-tray-open');
+
+      $(document).off('.off-canvas');
+      $(window).off('.off-canvas');
+      this.$mainCanvasWrapper.css('padding-' + this.getEdge(), 0);
+    },
+    render: function render(event, dialog, $element, settings) {
+      var eventData = { settings: settings, $element: $element, offCanvasDialog: this };
+      $('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
+
+      $element.on('dialogresize.off-canvas', eventData, debounce(this.bodyPadding, 100)).on('dialogContentResize.off-canvas', eventData, this.handleDialogResize).on('dialogContentResize.off-canvas', eventData, debounce(this.bodyPadding, 100)).trigger('dialogresize.off-canvas');
+
+      this.getContainer($element).attr('data-offset-' + this.getEdge(), '');
+
+      $(window).on('resize.off-canvas scroll.off-canvas', eventData, debounce(this.resetSize, 100)).trigger('resize.off-canvas');
+    },
+    handleDialogResize: handleDialogResize,
+    resetSize: resetSize,
+    bodyPadding: bodyPadding,
+    getContainer: function getContainer($element) {
+      return $element.dialog('widget');
+    },
+
+    getEdge: function getEdge() {
+      return document.documentElement.dir === 'rtl' ? 'left' : 'right';
+    }
+  };
 
-            $(window).on('resize.off-canvas scroll.off-canvas', eventData, debounce(resetSize, 100)).trigger('resize.off-canvas');
+  Drupal.behaviors.offCanvasEvents = {
+    attach: function attach() {
+      $(window).once('off-canvas').on({
+        'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) {
+          if (Drupal.offCanvas.isOffCanvas(dialog, $element, settings)) {
+            Drupal.offCanvas.open(event, dialog, $element, settings);
           }
         },
-        'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) {
-          if ($element.is('#drupal-off-canvas')) {
-            $('body').addClass('js-tray-open');
-
-            settings.position = {
-              my: 'left top',
-              at: edge + ' top',
-              of: window
-            };
-            settings.dialogClass += ' ui-dialog-off-canvas';
-
-            settings.height = $(window).height();
+        'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) {
+          if (Drupal.offCanvas.isOffCanvas(dialog, $element, settings)) {
+            Drupal.offCanvas.render(event, dialog, $element, settings);
           }
         },
         'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) {
-          if ($element.is('#drupal-off-canvas')) {
-            $('body').removeClass('js-tray-open');
-
-            $(document).off('.off-canvas');
-            $(window).off('.off-canvas');
-            $mainCanvasWrapper.css('padding-' + edge, 0);
+          if (Drupal.offCanvas.isOffCanvas(dialog, $element)) {
+            Drupal.offCanvas.close(event, dialog, $element);
           }
         }
       });