fix(Dialogs): Fix cloning and appendTo issues with dialogs.

Pier1 · Sep 27, 2017 · 45aa36e · 45aa36e
1 parent a55ff4f
commit 45aa36e
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 50 deletions.
diff --git a/rocketbelt/components/dialogs/_dialog-base.scss b/rocketbelt/components/dialogs/_dialog-base.scss
@@ -1,6 +1,5 @@
-#docs-wrapper:not(.is-dialog-open),
-#main:not(.is-dialog-open) {
-  & ~ .dialog {
+body:not(.is-dialog-open) {
+  .dialog {
     .dialog_content {
       animation: dialogOut 300ms ease-in;
     }
@@ -45,7 +44,7 @@
   overflow: hidden;
   filter: blur(5px);
 
-  & ~ .dialog {
+  .dialog {
     .dialog_overlay {
       opacity: 1;
       transition: opacity 300ms ease-out;

diff --git a/rocketbelt/components/dialogs/rocketbelt.dialogs.js b/rocketbelt/components/dialogs/rocketbelt.dialogs.js
@@ -2,7 +2,6 @@
 $(function () {
   var options = initOptions();
   var focusedBeforeDialog;
-  var firstChild = options.appendTo + '>div:first-of-type';
   // IE doesn't apply append var to the global scope.
   $cache = {
     main: $(options.appendTo),
@@ -13,11 +12,6 @@ $(function () {
   element = null;
   closers = $($cache.rbDialog).find('[data-rb-dialog-hide]');
 
-  if (options.appendTo === 'body') {
-    $cache.main = $(firstChild);
-    options.appendTo = firstChild;
-  }
-
   function initOptions() {
     return {
       appendTo: 'body',
@@ -48,22 +42,21 @@ $(function () {
     else if (params === 'open' || options.autoOpen) open();
     else if (params === 'options') return options;
     else if (params === 'isOpen') return $cache.main.hasClass('is-dialog-open');
-    else return;
+    return null;
   };
 
   function init(params) {
     if ($cache.main.hasClass('is-dialog-open')) return;
     if (this.hasOwnProperty('defaultElement')) {
-      element = $(this.defaultElement).clone();
+      element = $(this.defaultElement);
     } else if (this) {
-      element = $(this).clone();
+      element = $(this);
     } else {
-      element = $(element).clone();
+      element = $(element);
     }
 
     $.extend(true, options, params);
 
-    if (!params.appendTo) options.appendTo = firstChild;
     if (options.appendTo) $cache.main = $(options.appendTo);
     if (options.title) $cache.rbDialogTitle.html(options.title);
     if (options.classes) addDialogClasses();
@@ -231,7 +224,7 @@ $(function () {
 
   function destroyTheWorld() {
     if ($cache.rbDialogButtons) $cache.rbDialogButtons.remove();
-    $cache.rbDialogBody.children('*').remove();
+    $cache.main.append($cache.rbDialogBody.children('*').detach().hide());
     $cache.rbDialogTitle.text('');
     options = initOptions();
   }

diff --git a/templates/components/dialogs/index.pug b/templates/components/dialogs/index.pug
@@ -7,7 +7,45 @@ block content
   article
     h1 Dialogs
 
-    h2 Standard Dialog
+    p Dialogs contain text and UI controls focused on a specific task. They inform users about critical information, require users to make decisions, or involve multiple tasks.
+
+    .grid-fluid
+      .row
+        .col.xs
+          +exampleWithCode('Javascript', true)
+            | // Defaults:
+            | $('selector').rbDialog({
+            |   appendTo: 'body', // Wrapper for .is-dialog-open
+            |   autoOpen: true,
+            |   buttons: [],
+            |   classes: { // Classes get merged
+            |     'rbDialog': 'dialog', // Pass in 'dialog-sheet' or 'dialog-max' for variations
+            |     'rbDialogTitle': 'dialog_title',
+            |     'rbDialogBody': 'dialog_body'
+            |   },
+            |   title: null,
+            |   beforeClose: null,
+            |   close: null,
+            |   open: null
+            | });
+      .row
+        .col.xs
+          +exampleWithCode('Javascript', true)
+            | // You can pass in a button that will display at the button of the modal:
+            | $('selector').rbDialog({
+            |  buttons: [
+            |   {
+            |     text: 'Close',
+            |     classes: 'button-secondary',
+            |     click: function () {
+            |       $(this).rbDialog('close');
+            |     }
+            |   }
+            | ]
+            | });
+
+    h2 Dialog Types:
+    h3 Standard Dialog
     .grid-fluid
       .row
         .col.xs-8
@@ -18,7 +56,7 @@ block content
           +exampleWithCode
             include _dialog-standard.pug
 
-    h2 Sheet Dialog
+    h3 Sheet Dialog
     .grid-fluid
       .row
         .col.xs-8
@@ -29,64 +67,39 @@ block content
           +exampleWithCode
             include _dialog-sheet.pug
 
-    h2 Max Dialog
+    h3 Max Dialog
     .grid-fluid
       .row
         .col.xs-8
           div
             button.button.button-secondary.button-md(onclick="$('#max-dialog').rbDialog({title: 'Max Dialog', classes: { 'rbDialog': 'dialog-max' }, buttons: [{text: 'Close', click: function (e) { $(this).rbDialog('close'); }}]})") Trigger Dialog
           small.fg_error
             | <br/>
-            | Max dialogs don't support the button option.
+            | <strong>Max dialogs don't support buttons.</strong>
             | <br/>
             | Button option included to illustrate non-support.
+
       .row
         .col.xs
           +exampleWithCode
             include _dialog-max.pug
 
-    h3 How to call a Dialog:
-    .grid-fluid
-      .row
-        .col.xs
-          +exampleWithCode('Javascript')
-            | // Defaults + Button Example
-            | $('selector').rbDialog({
-            |   appendTo: 'body',
-            |   autoOpen: true,
-            |   buttons: [
-            |     {
-            |       text: 'Close',
-            |       classes: 'button-secondary',
-            |       click: function () {
-            |         $(this).rbDialog('close');
-            |       }
-            |     }
-            |   ],
-            |   classes: { // Classes get merged
-            |     'rbDialog': 'dialog',
-            |     'rbDialogTitle': 'dialog_title',
-            |     'rbDialogBody': 'dialog_body'
-            |   },
-            |   title: null,
-            |   beforeClose: null,
-            |   close: null,
-            |   open: null
-            | });
-
     h3 Dialog Template
     .grid-fluid
       .row
         .col.xs
+          p Include this template below your main element that .is-dialog-open is going to be appeneded to:
           +exampleWithCode('html')
             include _dialog-template.pug
 
 
-    h2 Script Include
+    h3 Script Include
     +exampleWithCode('html', true)
       script(src='./rocketbelt.dialogs.min.js')
 
     style(type='text/css').
       .exampleWithCode > .example {
         display: none;
       }
+
+    script(src='./test.dialogs.js')