Implement related popups

jet/static/admin/js/admin/RelatedObjectLookups.js

@@ -36,8 +36,10 @@ function showAdminPopup(triggeringLink, name_regexp) {
     } else {
         href  += '&_popup=1';
     }
-    var win = window.open(href, name, 'height=500,width=800,resizable=yes,scrollbars=yes');
-    win.focus();
+
+    // Django JET
+    showRelatedPopup(name, href);
+
     return false;
 }
 
@@ -53,15 +55,19 @@ function dismissRelatedLookupPopup(win, chosenId) {
     } else {
         document.getElementById(name).value = chosenId;
     }
-    win.close();
+
+    // Django JET
+    closeRelatedPopup(win);
 }
 
 function showRelatedObjectPopup(triggeringLink) {
     var name = triggeringLink.id.replace(/^(change|add|delete)_/, '');
     name = id_to_windowname(name);
     var href = triggeringLink.href;
-    var win = window.open(href, name, 'height=500,width=800,resizable=yes,scrollbars=yes');
-    win.focus();
+
+    // Django JET
+    showRelatedPopup(name, href);
+
     return false;
 }
 
@@ -94,7 +100,9 @@ function dismissAddRelatedObjectPopup(win, newId, newRepr) {
         SelectBox.add_to_cache(toId, o);
         SelectBox.redisplay(toId);
     }
-    win.close();
+
+    // Django JET
+    closeRelatedPopup(win);
 }
 
 function dismissChangeRelatedObjectPopup(win, objId, newRepr, newId) {
@@ -109,7 +117,9 @@ function dismissChangeRelatedObjectPopup(win, objId, newRepr, newId) {
             this.value = newId;
         }
     });
-    win.close();
+
+    // Django JET
+    closeRelatedPopup(win);
 };
 
 function dismissDeleteRelatedObjectPopup(win, objId) {
@@ -122,9 +132,38 @@ function dismissDeleteRelatedObjectPopup(win, objId) {
             django.jQuery(this).remove();
         }
     }).trigger('change');
-    win.close();
+
+    // Django JET
+    closeRelatedPopup(win);
 };
 
 // Kept for backward compatibility
 showAddAnotherPopup = showRelatedObjectPopup;
 dismissAddAnotherPopup = dismissAddRelatedObjectPopup;
+
+// Django JET
+
+opener = parent.window;
+
+function showRelatedPopup(name, href) {
+    django.jQuery(function($) {
+        var $container = $('.related-popup-container');
+        var $loading = $container.find('.loading-indicator');
+        var $popup = $('<iframe>').attr('name', name).attr('src', href).addClass('related-popup').on('load', function() {
+            $popup.add($('.related-popup-back')).fadeIn(200, 'swing', function() {
+                $loading.hide();
+            });
+        });
+
+        $loading.show();
+        $container.fadeIn(200, 'swing', function() {
+            $('.related-popup-container').append($popup);
+        });
+        $('body').addClass('non-scrollable');
+    });
+}
+
+function closeRelatedPopup(win) {
+    jet.jQuery('select').trigger('select:init');
+    jet.jQuery(win.parent).trigger('related-popup:close');
+}

jet/static/jet/css/_base.scss

@@ -69,4 +69,5 @@ a:hover {
 @import "delete";
 @import "login";
 @import "content";
-@import "dashboard";
+@import "dashboard";
+@import "relatedpopup";

jet/static/jet/css/_content.scss

@@ -8,6 +8,17 @@
   width: 500px;
 }
 
+#content {
+  > h1 {
+    text-transform: uppercase;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: $top-height;
+    color: $top-text-color;
+    margin: 0 0 2em 0;
+  }
+}
+
 .small {
   font-size: 12px;
 }

jet/static/jet/css/_relatedpopup.scss

@@ -0,0 +1,71 @@
+@import "globals";
+
+.related-popup {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 4;
+  border: 0;
+  width: 100%;
+  height: 100%;
+  padding-left: 250px;
+  box-sizing: border-box;
+  display: none;
+  background: $background-color;
+  background-clip: content-box;
+
+  &-container {
+    display: none;
+    background-color: transparentize($sidebar-popup-overlay-color, 0.5);
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 3;
+
+    .loading-indicator {
+      display: none;
+      font-size: 96px;
+      color: $content-contrast2-text-color;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-left: -48px;
+      margin-top: -48px;
+    }
+  }
+
+  &-back {
+    &, &:visited, &:hover {
+      display: none;
+      background: $content-contrast2-background-color;
+      color: $content-contrast2-text-color;
+      position: absolute;
+      top: 20px;
+      left: 250px;
+      z-index: 5;
+      width: 100px;
+      padding: 14px 6px 14px 0;
+      text-align: center;
+      margin-left: -100px;
+      box-sizing: border-box;
+      text-transform: uppercase;
+      border-radius: 6px 0 0 6px;
+      @include transition(background-color $transitions-duration, color $transitions-duration);
+    }
+
+    &:hover {
+      background: $background-color;
+      color: $text-color;
+    }
+
+    span {
+      vertical-align: middle;
+      font-weight: bold;
+      font-size: 18px;
+    }
+  }
+}

jet/static/jet/js/main.js

@@ -967,6 +967,32 @@
             });
         };
 
+        var initRelatedPopups = function() {
+            var closeRelatedPopup = function () {
+                var $popups = $('.related-popup');
+                var $container = $('.related-popup-container');
+                var $popup = $popups.last();
+
+                $popup.remove();
+
+                if ($popups.length == 1) {
+                    $container.fadeOut(200, 'swing', function () {
+                        $('.related-popup-back').hide();
+                        $('body').removeClass('non-scrollable');
+                    });
+                }
+            };
+
+            $('.related-popup-back').on('click', function (e) {
+                e.preventDefault();
+                closeRelatedPopup();
+            });
+
+            $(window).on('related-popup:close', function () {
+                closeRelatedPopup();
+            });
+        };
+
         initjQueryCaseInsensitiveSelector();
         initjQuerySlideFadeToggle();
         initFilters();
@@ -983,5 +1009,6 @@
         initUnsavedChangesWarning();
         initScrollbars();
         initThemeChoosing();
+        initRelatedPopups();
     });
 })(jet.jQuery);

jet/templates/admin/base.html

@@ -155,6 +155,10 @@
             </div>
 
         {% if not is_popup %}
+            <div class="related-popup-container">
+                <a href="#" class="related-popup-back"><span class="icon-arrow-left"></span> {% trans "back" %}</a>
+                <span class="icon-refresh loading-indicator"></span>
+            </div>
             <div class="sidebar">
                 <div class="sidebar-menu-wrapper">
                     <div id="branding">

jet/templates/admin/popup_response.html

@@ -4,14 +4,12 @@
   <body>
     <script type="text/javascript">
       {% if action == 'change' %}
-        opener.dismissChangeRelatedObjectPopup(window, "{{ value }}", "{{ obj }}", "{{ new_value }}");
+        parent.window.dismissChangeRelatedObjectPopup(window, "{{ value }}", "{{ obj }}", "{{ new_value }}");
       {% elif action == 'delete' %}
-        opener.dismissDeleteRelatedObjectPopup(window, "{{ value }}");
+        parent.window.dismissDeleteRelatedObjectPopup(window, "{{ value }}");
       {% else %}
-        opener.dismissAddRelatedObjectPopup(window, "{{ value }}", "{{ obj }}");
+        parent.window.dismissAddRelatedObjectPopup(window, "{{ value }}", "{{ obj }}");
       {% endif %}
-
-      opener.jet.jQuery('select').trigger('select:init');
     </script>
   </body>
 </html>