Added related modal support (related objects popup displayed in modal window)

admin_interface/admin.py

@@ -43,7 +43,11 @@ class ThemeAdmin(admin.ModelAdmin):
             'classes': ('wide', ),
             'fields': ('css_delete_button_background_color', 'css_delete_button_background_hover_color', 'css_delete_button_text_color', )
         }),
-        ('Extras', {
+        ('Related Modal', {
+            'classes': ('wide', ),
+            'fields': ('related_modal_active', 'related_modal_background_color', 'related_modal_background_opacity', 'related_modal_rounded_corners', )
+        }),
+        ('List Filter', {
             'classes': ('wide', ),
             'fields': ('list_filter_dropdown', )
         }),

admin_interface/fixtures/initial_data.json

@@ -1 +1 @@
-[{"fields": {"css_save_button_text_color": "#FFFFFF", "css_module_link_hover_color": "#C9F0DD", "css_delete_button_text_color": "#FFFFFF", "list_filter_dropdown": false, "css_save_button_background_hover_color": "#0C3C26", "css_module_rounded_corners": true, "logo": "", "css_module_background_color": "#44B78B", "title": "Django administration", "css_header_link_color": "#FFFFFF", "css_delete_button_background_hover_color": "#A41515", "css": "", "css_module_link_color": "#FFFFFF", "css_module_text_color": "#FFFFFF", "css_generic_link_hover_color": "#156641", "css_save_button_background_color": "#0C4B33", "logo_visible": true, "active": false, "css_header_background_color": "#0C4B33", "name": "Django", "css_generic_link_color": "#0C3C26", "css_delete_button_background_color": "#BA2121", "css_header_text_color": "#44B78B", "css_header_link_hover_color": "#C9F0DD", "css_header_title_color": "#F5DD5D", "title_visible": true}, "model": "admin_interface.theme", "pk": 1}]
+[{"model": "admin_interface.theme", "pk": 1, "fields": {"name": "Django", "active": true, "title": "Django administration", "title_visible": true, "logo": "", "logo_visible": true, "css_header_background_color": "#0C4B33", "css_header_title_color": "#F5DD5D", "css_header_text_color": "#44B78B", "css_header_link_color": "#FFFFFF", "css_header_link_hover_color": "#C9F0DD", "css_module_background_color": "#44B78B", "css_module_text_color": "#FFFFFF", "css_module_link_color": "#FFFFFF", "css_module_link_hover_color": "#C9F0DD", "css_module_rounded_corners": true, "css_generic_link_color": "#0C3C26", "css_generic_link_hover_color": "#156641", "css_save_button_background_color": "#0C4B33", "css_save_button_background_hover_color": "#0C3C26", "css_save_button_text_color": "#FFFFFF", "css_delete_button_background_color": "#BA2121", "css_delete_button_background_hover_color": "#A41515", "css_delete_button_text_color": "#FFFFFF", "css": "", "related_modal_active": true, "related_modal_background_color": "#000000", "related_modal_background_opacity": 0.2, "related_modal_rounded_corners": true, "list_filter_dropdown": false}}]

admin_interface/migrations/0002_add_related_modal.py

@@ -0,0 +1,40 @@
+# -*- coding: utf-8 -*-
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import colorfield.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('admin_interface', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='theme',
+            name='list_filter_dropdown',
+            field=models.BooleanField(default=False, verbose_name=b'use dropdown'),
+        ),
+        migrations.AddField(
+            model_name='theme',
+            name='related_modal_active',
+            field=models.BooleanField(default=True, verbose_name=b'active'),
+        ),
+        migrations.AddField(
+            model_name='theme',
+            name='related_modal_background_color',
+            field=colorfield.fields.ColorField(blank=True, default=b'#000000', help_text=b'#000000', max_length=10, verbose_name=b'background color'),
+        ),
+        migrations.AddField(
+            model_name='theme',
+            name='related_modal_background_opacity',
+            field=models.FloatField(choices=[(0.1, b'10%'), (0.2, b'20%'), (0.3, b'30%'), (0.4, b'40%'), (0.5, b'50%'), (0.6, b'60%'), (0.7, b'70%'), (0.8, b'80%'), (0.9, b'90%')], default=0.2, help_text=b'20%', verbose_name=b'background opacity'),
+        ),
+        migrations.AddField(
+            model_name='theme',
+            name='related_modal_rounded_corners',
+            field=models.BooleanField(default=True, verbose_name=b'rounded corners'),
+        ),
+    ]

admin_interface/models.py

@@ -81,7 +81,23 @@ class Theme(models.Model):
 
     css = models.TextField( blank = True )
 
-    list_filter_dropdown = models.BooleanField( default = False )
+    related_modal_active = models.BooleanField( default = True, verbose_name = 'active' )
+    related_modal_background_color = ColorField( blank = True, default = '#000000', help_text = '#000000', verbose_name = 'background color' )
+    related_modal_background_opacity_choices = (
+        (0.1, '10%', ),
+        (0.2, '20%', ),
+        (0.3, '30%', ),
+        (0.4, '40%', ),
+        (0.5, '50%', ),
+        (0.6, '60%', ),
+        (0.7, '70%', ),
+        (0.8, '80%', ),
+        (0.9, '90%', ),
+    )
+    related_modal_background_opacity = models.FloatField( choices = related_modal_background_opacity_choices, default = 0.2, help_text = '20%', verbose_name = 'background opacity' )
+    related_modal_rounded_corners = models.BooleanField( default = True, verbose_name = 'rounded corners' )
+
+    list_filter_dropdown = models.BooleanField( default = False, verbose_name = 'use dropdown'  )
 
     def set_active(self):
 

admin_interface/static/admin/js/popup_response.js

@@ -0,0 +1,35 @@
+/*global opener */
+(function() {
+    'use strict';
+    var windowRef = window;
+    var windowName = windowRef.name;
+    var widgetName = windowName.replace(/^(change|add|delete|lookup)_/, '');
+    //var windowNames = windowName.split('____');
+    //var widgetName = windowNames[(windowNames.length - 1)];
+    //widgetName = widgetName.replace(/^(change|add|delete|lookup)_/, '');
+    //console.log('dismiss modal and update widget with id: "' + widgetName + '"');
+    var modalRef = {};
+    var openerRef = windowRef.opener;
+    if(!openerRef){
+        openerRef = windowRef.parent;
+        modalRef = {
+            name: openerRef.id_to_windowname(widgetName),
+            close: function(){
+                openerRef.dismissRelatedObjectModal();
+            }
+        };
+    }
+    var initData = JSON.parse(document.getElementById('django-admin-popup-response-constants').dataset.popupResponse);
+    switch(initData.action){
+        case 'change':
+            openerRef.dismissChangeRelatedObjectPopup(modalRef, initData.value, initData.obj, initData.new_value);
+            break;
+        case 'delete':
+            openerRef.dismissDeleteRelatedObjectPopup(modalRef, initData.value);
+            break;
+        default:
+            openerRef.dismissAddRelatedObjectPopup(modalRef, initData.value, initData.obj);
+            break;
+    }
+})();
+

admin_interface/static/admin_interface/magnific-popup/magnific-popup.css

@@ -0,0 +1,351 @@
+/* Magnific Popup CSS */
+.mfp-bg {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1042;
+  overflow: hidden;
+  position: fixed;
+  background: #0b0b0b;
+  opacity: 0.8; }
+
+.mfp-wrap {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1043;
+  position: fixed;
+  outline: none !important;
+  -webkit-backface-visibility: hidden; }
+
+.mfp-container {
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  padding: 0 8px;
+  box-sizing: border-box; }
+
+.mfp-container:before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle; }
+
+.mfp-align-top .mfp-container:before {
+  display: none; }
+
+.mfp-content {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 auto;
+  text-align: left;
+  z-index: 1045; }
+
+.mfp-inline-holder .mfp-content,
+.mfp-ajax-holder .mfp-content {
+  width: 100%;
+  cursor: auto; }
+
+.mfp-ajax-cur {
+  cursor: progress; }
+
+.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
+  cursor: -moz-zoom-out;
+  cursor: -webkit-zoom-out;
+  cursor: zoom-out; }
+
+.mfp-zoom {
+  cursor: pointer;
+  cursor: -webkit-zoom-in;
+  cursor: -moz-zoom-in;
+  cursor: zoom-in; }
+
+.mfp-auto-cursor .mfp-content {
+  cursor: auto; }
+
+.mfp-close,
+.mfp-arrow,
+.mfp-preloader,
+.mfp-counter {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none; }
+
+.mfp-loading.mfp-figure {
+  display: none; }
+
+.mfp-hide {
+  display: none !important; }
+
+.mfp-preloader {
+  color: #CCC;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  text-align: center;
+  margin-top: -0.8em;
+  left: 8px;
+  right: 8px;
+  z-index: 1044; }
+  .mfp-preloader a {
+    color: #CCC; }
+    .mfp-preloader a:hover {
+      color: #FFF; }
+
+.mfp-s-ready .mfp-preloader {
+  display: none; }
+
+.mfp-s-error .mfp-content {
+  display: none; }
+
+button.mfp-close,
+button.mfp-arrow {
+  overflow: visible;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  display: block;
+  outline: none;
+  padding: 0;
+  z-index: 1046;
+  box-shadow: none;
+  touch-action: manipulation; }
+
+button::-moz-focus-inner {
+  padding: 0;
+  border: 0; }
+
+.mfp-close {
+  width: 44px;
+  height: 44px;
+  line-height: 44px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  text-decoration: none;
+  text-align: center;
+  opacity: 0.65;
+  padding: 0 0 18px 10px;
+  color: #FFF;
+  font-style: normal;
+  font-size: 28px;
+  font-family: Arial, Baskerville, monospace; }
+  .mfp-close:hover,
+  .mfp-close:focus {
+    opacity: 1; }
+  .mfp-close:active {
+    top: 1px; }
+
+.mfp-close-btn-in .mfp-close {
+  color: #333; }
+
+.mfp-image-holder .mfp-close,
+.mfp-iframe-holder .mfp-close {
+  color: #FFF;
+  right: -6px;
+  text-align: right;
+  padding-right: 6px;
+  width: 100%; }
+
+.mfp-counter {
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: #CCC;
+  font-size: 12px;
+  line-height: 18px;
+  white-space: nowrap; }
+
+.mfp-arrow {
+  position: absolute;
+  opacity: 0.65;
+  margin: 0;
+  top: 50%;
+  margin-top: -55px;
+  padding: 0;
+  width: 90px;
+  height: 110px;
+  -webkit-tap-highlight-color: transparent; }
+  .mfp-arrow:active {
+    margin-top: -54px; }
+  .mfp-arrow:hover,
+  .mfp-arrow:focus {
+    opacity: 1; }
+  .mfp-arrow:before,
+  .mfp-arrow:after {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    margin-top: 35px;
+    margin-left: 35px;
+    border: medium inset transparent; }
+  .mfp-arrow:after {
+    border-top-width: 13px;
+    border-bottom-width: 13px;
+    top: 8px; }
+  .mfp-arrow:before {
+    border-top-width: 21px;
+    border-bottom-width: 21px;
+    opacity: 0.7; }
+
+.mfp-arrow-left {
+  left: 0; }
+  .mfp-arrow-left:after {
+    border-right: 17px solid #FFF;
+    margin-left: 31px; }
+  .mfp-arrow-left:before {
+    margin-left: 25px;
+    border-right: 27px solid #3F3F3F; }
+
+.mfp-arrow-right {
+  right: 0; }
+  .mfp-arrow-right:after {
+    border-left: 17px solid #FFF;
+    margin-left: 39px; }
+  .mfp-arrow-right:before {
+    border-left: 27px solid #3F3F3F; }
+
+.mfp-iframe-holder {
+  padding-top: 40px;
+  padding-bottom: 40px; }
+  .mfp-iframe-holder .mfp-content {
+    line-height: 0;
+    width: 100%;
+    max-width: 900px; }
+  .mfp-iframe-holder .mfp-close {
+    top: -40px; }
+
+.mfp-iframe-scaler {
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  padding-top: 56.25%; }
+  .mfp-iframe-scaler iframe {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+    background: #000; }
+
+/* Main image in popup */
+img.mfp-img {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  display: block;
+  line-height: 0;
+  box-sizing: border-box;
+  padding: 40px 0 40px;
+  margin: 0 auto; }
+
+/* The shadow behind the image */
+.mfp-figure {
+  line-height: 0; }
+  .mfp-figure:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 40px;
+    bottom: 40px;
+    display: block;
+    right: 0;
+    width: auto;
+    height: auto;
+    z-index: -1;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+    background: #444; }
+  .mfp-figure small {
+    color: #BDBDBD;
+    display: block;
+    font-size: 12px;
+    line-height: 14px; }
+  .mfp-figure figure {
+    margin: 0; }
+
+.mfp-bottom-bar {
+  margin-top: -36px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  cursor: auto; }
+
+.mfp-title {
+  text-align: left;
+  line-height: 18px;
+  color: #F3F3F3;
+  word-wrap: break-word;
+  padding-right: 36px; }
+
+.mfp-image-holder .mfp-content {
+  max-width: 100%; }
+
+.mfp-gallery .mfp-image-holder .mfp-figure {
+  cursor: pointer; }
+
+@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
+  /**
+       * Remove all paddings around the image on small screen
+       */
+  .mfp-img-mobile .mfp-image-holder {
+    padding-left: 0;
+    padding-right: 0; }
+  .mfp-img-mobile img.mfp-img {
+    padding: 0; }
+  .mfp-img-mobile .mfp-figure:after {
+    top: 0;
+    bottom: 0; }
+  .mfp-img-mobile .mfp-figure small {
+    display: inline;
+    margin-left: 5px; }
+  .mfp-img-mobile .mfp-bottom-bar {
+    background: rgba(0, 0, 0, 0.6);
+    bottom: 0;
+    margin: 0;
+    top: auto;
+    padding: 3px 5px;
+    position: fixed;
+    box-sizing: border-box; }
+    .mfp-img-mobile .mfp-bottom-bar:empty {
+      padding: 0; }
+  .mfp-img-mobile .mfp-counter {
+    right: 5px;
+    top: 3px; }
+  .mfp-img-mobile .mfp-close {
+    top: 0;
+    right: 0;
+    width: 35px;
+    height: 35px;
+    line-height: 35px;
+    background: rgba(0, 0, 0, 0.6);
+    position: fixed;
+    text-align: center;
+    padding: 0; } }
+
+@media all and (max-width: 900px) {
+  .mfp-arrow {
+    -webkit-transform: scale(0.75);
+    transform: scale(0.75); }
+  .mfp-arrow-left {
+    -webkit-transform-origin: 0;
+    transform-origin: 0; }
+  .mfp-arrow-right {
+    -webkit-transform-origin: 100%;
+    transform-origin: 100%; }
+  .mfp-container {
+    padding-left: 6px;
+    padding-right: 6px; } }

admin_interface/static/admin_interface/related-modal/related-modal.js

@@ -0,0 +1,69 @@
+if(typeof django !== 'undefined' && typeof django.jQuery !== 'undefined' )
+{
+    (function($) {
+
+        $(document).ready(function(){
+
+            // create the function that will close the modal
+            function dismissRelatedObjectModal()
+            {
+                // close the popup
+                $.magnificPopup.close();
+            }
+
+            // assign the function to a global variable
+            window.dismissRelatedObjectModal = dismissRelatedObjectModal;
+
+            // listen click events on related links
+            // (:link prevents to listen click event if href is not defined)
+            $('a.related-widget-wrapper-link:link').click(function(e){
+
+                e.preventDefault();
+
+                // remove focus from clicked link
+                $(this).blur();
+
+                // use the clicked link id as iframe name
+                // it will be available as window.name in the loaded iframe
+                var iframeName = $(this).attr('id');
+                //var iframeName = String(window.name + '____' + $(this).attr('id'));
+                //console.log('open modal with name: "' + iframeName + '"');
+
+                // browsers stop loading nested iframes having the same src url
+                // create a random parameter and append it to the src url to prevent it
+                var iframeSrcRandom = String(Math.round(Math.random() * 999999));
+                var iframeSrc = $(this).attr('href') + '&_modal=' + iframeSrcRandom;
+
+                // build the iframe html
+                //var iframeHTML = '<iframe id="related-modal" name="' + iframeName + '" src="' + iframeSrc + '"></iframe>';
+                var iframeHTML = '<iframe id="related-modal-iframe" name="' + iframeName + '" src="' + iframeSrc + '"></iframe>';
+
+                // create the iframe jquery element
+                var iframeEl = $(iframeHTML);
+
+                // the modal css class
+                var iframeInternalModalClass = 'related-modal';
+
+                // if the current window is inside an iframe, it means that it is already in a modal,
+                // append an additional css class to the modal to offer more customization
+                if( window.top != window.self )
+                {
+                    iframeInternalModalClass += ' related-modal__nested';
+                }
+
+                // open the popup using magnific popup
+                $.magnificPopup.open({
+                    mainClass: iframeInternalModalClass,
+                    items: {
+                        src: iframeEl,
+                        type: 'inline'
+                    }
+                });
+
+                return false;
+            });
+        });
+
+    })(django.jQuery);
+}
+

admin_interface/templates/admin/base_site.html

@@ -539,6 +539,57 @@
         border-color: transparent #999 transparent transparent !important;
     }
 
+    /*
+    related modal + magnific popup customization
+    https://github.com/dimsemenov/Magnific-Popup
+    */
+    .related-modal.mfp-bg {
+        background-color:{{ theme.related_modal_background_color }} !important;
+        opacity: {{ theme.related_modal_background_opacity }} !important;
+    }
+
+    .related-modal .mfp-content {
+        height: 100% !important;
+        overflow: hidden;
+        {% if theme.related_modal_rounded_corners %}
+        border-radius: 4px;
+        {% endif %}
+        -webkit-box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.2);
+        -moz-box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.2);
+        box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.2);
+    }
+
+    .related-modal .mfp-container {
+        padding: 90px 90px 90px 90px !important;
+    }
+
+    .related-modal__nested .mfp-container {
+        padding: 30px 60px 30px 60px !important;
+    }
+
+    @media (max-width:640px){
+        .related-modal .mfp-container {
+            padding: 60px 15px 60px 15px !important;
+        }
+        .related-modal__nested .mfp-container {
+            padding: 30px 30px 30px 30px !important;
+        }
+    }
+
+    .related-modal #related-modal-iframe {
+        width: 100%;
+        height: 100%;
+        background-color: #FFFFFF;
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: 30px 30px;
+        background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='30px' height='30px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='uil-ring-alt'><rect x='0' y='0' width='100' height='100' fill='none' class='bk'></rect><circle cx='50' cy='50' r='40' stroke='#eeeeee' fill='none' stroke-width='6' stroke-linecap='round'></circle><circle cx='50' cy='50' r='40' stroke='#aaaaaa' fill='none' stroke-width='6' stroke-linecap='round'><animate attributeName='stroke-dashoffset' dur='2s' repeatCount='indefinite' from='0' to='500'></animate><animate attributeName='stroke-dasharray' dur='2s' repeatCount='indefinite' values='150 100;1 250;150 100'></animate></circle></svg>");
+        border: none;
+        margin: 0 auto;
+        padding: 0;
+        display: block;
+    }
+
     {% if theme.css %}
         {{ theme.css|safe }}
     {% endif %}
@@ -549,6 +600,10 @@
 {% block extrahead %}
 {{ block.super }}
 <link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive.css" %}" />
+{% get_admin_interface_theme as theme %}
+{% if theme.related_modal_active %}
+<link rel="stylesheet" type="text/css" href="{% static "admin_interface/magnific-popup/magnific-popup.css" %}" />
+{% endif %}
 {% endblock %}
 
 {% block branding %}
@@ -572,3 +627,13 @@
 
 {% block sidebar %}
 {% endblock %}
+
+{% block footer %}
+{{ block.super }}
+{% get_admin_interface_theme as theme %}
+{% if theme.related_modal_active %}
+<script type="text/javascript" src="{% static "admin_interface/magnific-popup/jquery.magnific-popup.js" %}"></script>
+<script type="text/javascript" src="{% static "admin_interface/related-modal/related-modal.js" %}"></script>
+{% endif %}
+{% endblock %}
+