From 2ed3b840f3583469a47a0573b0c91222d3caef19 Mon Sep 17 00:00:00 2001
From: Scott Reeves <Cottser@1167326.no-reply.drupal.org>
Date: Mon, 19 Sep 2016 10:39:44 -0400
Subject: [PATCH] Issue #2790855 by tedbow, drpal, xjm, tkoleary, tim.plunkett,
 Wim Leers, Cottser: Rework animation for standard dialog system

---
 core/modules/outside_in/css/outside_in.module.css     |  8 ++++++++
 core/modules/outside_in/js/offcanvas.js               | 11 ++++++-----
 .../src/Ajax/OpenOffCanvasDialogCommand.php           |  2 ++
 .../outside_in/src/Tests/Ajax/OffCanvasDialogTest.php |  2 ++
 .../templates/outside-in-page-wrapper.html.twig       |  1 +
 .../src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php  |  2 ++
 6 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/core/modules/outside_in/css/outside_in.module.css b/core/modules/outside_in/css/outside_in.module.css
index 984b1c04d66a..a084979741f3 100644
--- a/core/modules/outside_in/css/outside_in.module.css
+++ b/core/modules/outside_in/css/outside_in.module.css
@@ -80,3 +80,11 @@
   box-shadow: 2px 2px #ddd;
 }
 
+.offcanvas-lining {
+  background: #fff;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  z-index: -1;
+}
diff --git a/core/modules/outside_in/js/offcanvas.js b/core/modules/outside_in/js/offcanvas.js
index a83555d1cff5..b3c4237e4f41 100644
--- a/core/modules/outside_in/js/offcanvas.js
+++ b/core/modules/outside_in/js/offcanvas.js
@@ -18,6 +18,8 @@
    */
   var edge = document.documentElement.dir === 'rtl' ? 'left' : 'right';
 
+  var $mainCanvasWrapper = $('#main-canvas-wrapper');
+
   /**
    * Resets the size of the dialog.
    *
@@ -81,12 +83,11 @@
   function bodyPadding(event) {
     var $element = event.data.$element;
     var $widget = $element.dialog('widget');
-    var $body = $('body');
 
     var width = $widget.outerWidth();
-    var bodyPadding = $body.css('padding-' + edge);
-    if (width !== bodyPadding) {
-      $body.css('padding-' + edge, width + 'px');
+    var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + edge);
+    if (width !== mainCanvasPadding) {
+      $mainCanvasWrapper.css('padding-' + edge, width + 'px');
       $widget.attr('data-offset-' + edge, width);
       displace();
     }
@@ -125,7 +126,7 @@
       if ($element.is('#drupal-offcanvas')) {
         $(document).off('.outsidein');
         $(window).off('.outsidein');
-        $('body').css('padding-' + edge, 0);
+        $mainCanvasWrapper.css('padding-' + edge, 0);
       }
     }
   });
diff --git a/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php b/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php
index 73354ed26f04..8e7bf82501b1 100644
--- a/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php
+++ b/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php
@@ -49,6 +49,8 @@ class OpenOffCanvasDialogCommand extends OpenDialogCommand {
       'settings' => $this->settings,
       'data' => $this->getRenderedContent(),
       'dialogOptions' => $this->dialogOptions,
+      'effect' => 'fade',
+      'speed' => 1000,
     ];
   }
 
diff --git a/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php b/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php
index 42c0ecfe8fd4..48bceeb66f76 100644
--- a/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php
+++ b/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php
@@ -46,6 +46,8 @@ class OffCanvasDialogTest extends AjaxTestBase {
           'draggable' => FALSE,
           'drupalAutoButtons' => FALSE,
         ],
+      'effect' => 'fade',
+      'speed' => 1000,
     ];
 
     // Emulate going to the JS version of the page and check the JSON response.
diff --git a/core/modules/outside_in/templates/outside-in-page-wrapper.html.twig b/core/modules/outside_in/templates/outside-in-page-wrapper.html.twig
index 76ff5ce625db..1d1c50fc7709 100644
--- a/core/modules/outside_in/templates/outside-in-page-wrapper.html.twig
+++ b/core/modules/outside_in/templates/outside-in-page-wrapper.html.twig
@@ -18,5 +18,6 @@
         {{ children }}
       </div>
     </div>
+    <div class="offcanvas-lining"></div>
   {% endspaceless %}
 {% endif %}
diff --git a/core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php b/core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php
index eac1b0fcd591..fd860dc336ab 100644
--- a/core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php
+++ b/core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php
@@ -31,6 +31,8 @@ class OpenOffCanvasDialogCommandTest extends UnitTestCase {
         'draggable' => FALSE,
         'drupalAutoButtons' => FALSE,
       ],
+      'effect' => 'fade',
+      'speed' => 1000,
     ];
     $this->assertEquals($expected, $command->render());
   }