Merge 8205cf2 into 58e6574

dpgmediamagazines · Jun 28, 2019 · c15c81a · c15c81a
2 parents 58e6574 + 8205cf2
commit c15c81a
Show file tree

Hide file tree

Showing 8 changed files with 17,878 additions and 25 deletions.
diff --git a/arctic/generics.py b/arctic/generics.py
@@ -641,7 +641,7 @@ def csv_file_response(self):
         writer.writerow(titles)
 
         m2m_fields = [m2m_f.attname for m2m_f in model._meta.many_to_many]
-        for obj in self.get_queryset():
+        for obj in self.get_object_list():
             row = []
             for field in displayed_fields:
                 try:

diff --git a/arctic/static/arctic/dist/assets/css/arctic.css b/arctic/static/arctic/dist/assets/css/arctic.css
diff --git a/arctic/static/arctic/dist/assets/img/arctic_logo.svg b/arctic/static/arctic/dist/assets/img/arctic_logo.svg
diff --git a/arctic/static/arctic/dist/assets/js/app.js b/arctic/static/arctic/dist/assets/js/app.js
diff --git a/arctic/static/arctic/src/assets/js/components/toggle_form.js b/arctic/static/arctic/src/assets/js/components/toggle_form.js
@@ -1,18 +1,61 @@
 /* Toggle Form functionality. Wraps a form inside a popover. Used for advanced search. */
 
 (function($) {
-    $('.arctic_toggle_form_button').each(function(){
-        var selector = $(this).data('popover_content_container');
-        var form = $(selector).contents();
-
-        $(this).data('form', form);
-    }).popover({
-        content: function () {
-            return $(this).data('form');
-        },
-        html: true
+    var container = ''
+
+    $('.arctic_toggle_form_button').off('click.advancedForm').on('click.advancedForm', function() {
+        container = $(this).data('popover-container');
+        if (!$(container).hasClass('hide')) {
+            hidePopover(container);
+            return;
+        }
+        $(container).removeClass('hide');
+        $(this).attr('aria-describedby', 'true');
+        setPosition();
+        setTimeout(function(){ dismissOnClick(container); }, 0);
     });
 
+    var setPosition = function () {
+        $(container).removeAttr('style');
+        var $arrow = $(container).find('.arrow');
+        $arrow.removeAttr('style');
+        var marginRight = 24;
+        var buttonPosition = $('.arctic_toggle_form_button')[0].getBoundingClientRect()
+        var offset = $(container)[0].getBoundingClientRect();
+        var windowWidth = document.documentElement.clientWidth;
+        var newTop = offset.top - buttonPosition.top + buttonPosition.height;
+
+        if (offset.top < buttonPosition.top) {
+            newTop = buttonPosition.top - offset.top + buttonPosition.height + 2;
+        }
+
+        var newLeft = Math.abs(offset.left - (windowWidth - offset.width - marginRight));
+        var translateProp = 'translate3d(' + newLeft + 'px, ' + newTop + 'px, 0px)';
+
+        $(container).css({
+            'position': 'absolute',
+            'transform': translateProp,
+            'will-change': 'transform',
+        });
+
+        //calculate arrow position
+        var arrowOffset = $arrow[0].getBoundingClientRect();
+        var newLeft = buttonPosition.left - arrowOffset.left + buttonPosition.width/2 - 3;
+        $($arrow).css({
+            'left': newLeft + 'px',
+        });
+
+        $(container).addClass('visible');
+    };
+
+    var hidePopover = function(container) {
+        $('body').off('click.popover');
+        $(container).addClass('hide');
+        $(container).addClass('visible');
+        $(container).removeAttr('style');
+        $('.arctic_toggle_form_button').removeAttr('aria-describedby');
+    };
+
     var checkIfDatepicker = function ($target) {
         if ($target.attr('class').indexOf('datepicker') > -1) {
             return true;
@@ -22,7 +65,7 @@
     };
 
     var dismissOnClick = function () {
-        $('body').on('click.popover', function(e) {
+        $('body').off('click.popover').on('click.popover', function(e) {
             var target = e.target;
             if (!$(target).is('.popover') &&
                 !$(target).parents().is('.popover') &&
@@ -31,13 +74,17 @@
                 ) {
                     //check if it's a datepicker container
                 if (!checkIfDatepicker($(target))) {
-                    $('body').off('click.popover');
-                    $('.arctic_toggle_form_button').popover('hide');
+                    hidePopover(container);
                 }
             }
         });
     };
-    $('.arctic_toggle_form_button').on('show.bs.popover', dismissOnClick);
+
+    var resizeTimeout = false;
+    window.addEventListener('resize', function() {
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(setPosition(), 250);
+    });
 
     // Make popover visible in case advanced search form errors
     var hasAdvancedSearchErrors = $('#arctic_advanced_search').find('.invalid-form-field, .invalid-feedback').length > 0;

diff --git a/arctic/static/arctic/src/assets/scss/arctic.scss b/arctic/static/arctic/src/assets/scss/arctic.scss
@@ -21,6 +21,7 @@
 @import "partials/list";
 @import "partials/modal";
 @import "partials/offcanvas";
+@import "partials/advanced-search-form";
 
 //pages
 @import "pages/login";

diff --git a/arctic/static/arctic/src/assets/scss/partials/_advanced-search-form.scss b/arctic/static/arctic/src/assets/scss/partials/_advanced-search-form.scss
@@ -0,0 +1,7 @@
+.advanced-form-popover {
+    opacity: 0;
+
+    &.visible {
+        opacity: 1;
+    }
+}
diff --git a/arctic/templates/arctic/partials/base_data_table.html b/arctic/templates/arctic/partials/base_data_table.html
@@ -38,16 +38,22 @@
                         {% endfor %}
                         {% if advanced_search_form %}
                         {% block advanced_search_form %}
-                            <a id="arctic_toggle_advanced_search_form_button" class="btn btn-secondary arctic_toggle_form_button" data-toggle="popover" data-placement="bottom" data-container="#arctic_search_form" data-popover_content_container="#arctic_advanced_search">
+                            <a id="arctic_toggle_advanced_search_form_button" data-popover-container=".advanced-form-popover" class="btn btn-secondary arctic_toggle_form_button">
                                 <i class="fa fa-sliders"></i>
                             </a>
-                            <div class="artic_toggle_form hidden" id="arctic_advanced_search" hidden>
-                                {% include "arctic/partials/form_fields.html" with form=advanced_search_form %}
-                                <div class="form-block pull-right">
-                                    <input type="reset" value="{% trans 'Clear' %}" class="btn btn-secondary" onClick='location.href = location.pathname'>
-                                    <input type="submit" value="{% trans 'Search' %}" class="btn btn-primary">
+                            <div class="popover bs-popover-bottom advanced-form-popover hide" x-placement="bottom">
+                                <div class="arrow"></div>
+                                <div class="popover-body">
+                                    <div class="artic_toggle_form hidden" id="arctic_advanced_search" >
+                                        {% include "arctic/partials/form_fields.html" with form=advanced_search_form %}
+                                        <div class="form-block pull-right">
+                                            <input type="reset" value="{% trans 'Clear' %}" class="btn btn-secondary" onClick='location.href = location.pathname'>
+                                            <input type="submit" value="{% trans 'Search' %}" class="btn btn-primary">
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
+                        </div>
                         {% endblock %}
                         {% endif %}
                     </div>