.

2021-07-26 10:48:08 +01:00
parent 16d7875d0d
commit 3367328d94
659 changed files with 170339 additions and 1 deletions
@@ -0,0 +1,210 @@
+// #####################################################################################################################
+// #BASE#
+// Basic logic django filer
+'use strict';
+
+var Cl = window.Cl || {};
+
+/* globals Mediator, django */
+
+// as of Django 2.x we need to check where jQuery is
+var djQuery = window.$;
+
+if (django.jQuery) {
+    djQuery = django.jQuery;
+}
+
+// mediator init
+Cl.mediator = new Mediator();
+
+(function ($) {
+    $(function () {
+        var showErrorTimeout;
+
+        window.filerShowError = function (message) {
+            var messages = $('.messagelist');
+            var header = $('#header');
+            var filerErrorClass = 'js-filer-error';
+            var tpl = '<ul class="messagelist"><li class="error ' + filerErrorClass + '">{msg}</li></ul>';
+            var msg = tpl.replace('{msg}', message);
+
+            messages.length ? messages.replaceWith(msg) : header.after(msg);
+
+            if (showErrorTimeout) {
+                clearTimeout(showErrorTimeout);
+            }
+
+            showErrorTimeout = setTimeout(function () {
+                $('.' + filerErrorClass).remove();
+            }, 3000);
+        };
+
+        // Focal point logic init
+        if (Cl.FocalPoint) {
+            new Cl.FocalPoint();
+        }
+
+        // Toggler init
+        if (Cl.Toggler) {
+            new Cl.Toggler();
+        }
+
+        $('.js-filter-files').on('focus blur', function (event) {
+            var container = $(this).closest('.navigator-top-nav');
+            var dropdownTrigger = container.find('.dropdown-container a');
+
+            if (event.type === 'focus') {
+                container.addClass('search-is-focused');
+            } else {
+                if (!dropdownTrigger.is(event.relatedTarget)) {
+                    container.removeClass('search-is-focused');
+                }
+            }
+        });
+
+        // Focus on the search field on page load
+        (function () {
+            var filter = $('.js-filter-files');
+            var containerSelector = '.navigator-top-nav';
+            var searchDropdown = $(containerSelector).find('.filter-search-wrapper').find('.filer-dropdown-container');
+
+            if (filter.length) {
+                filter.on('keydown', function () {
+                    $(this).closest(containerSelector).addClass('search-is-focused');
+                });
+
+                searchDropdown.on('show.bs.filer-dropdown', function () {
+                    $(containerSelector).addClass('search-is-focused');
+                }).on('hide.bs.filer-dropdown', function () {
+                    $(containerSelector).removeClass('search-is-focused');
+                });
+            }
+        }());
+
+        // show counter if file is selected
+        (function () {
+            var navigatorTable = $('.navigator-table').find('tr');
+            var actionList = $('.actions-wrapper');
+            var actionSelect = $('.action-select, #action-toggle, .actions .clear a');
+
+            // timeout is needed to wait until table row has class selected.
+            setTimeout(function () {
+                if (navigatorTable.hasClass('selected')) {
+                    actionList.addClass('action-selected');
+                }
+            }, 100);
+
+            actionSelect.on('change', function () {
+                // setTimeout makes sure that change event fires before click event which is reliable to admin
+                setTimeout(function () {
+                    if (navigatorTable.hasClass('selected')) {
+                        actionList.addClass('action-selected');
+                    } else {
+                        actionList.removeClass('action-selected');
+                    }
+                }, 0);
+
+            });
+        }());
+
+        (function () {
+            var actionsMenu = $('.js-actions-menu');
+            var dropdown = actionsMenu.find('.filer-dropdown-menu');
+            var actionsSelect = $('.actions select[name="action"]');
+            var actionsSelectOptions = actionsSelect.find('option');
+            var actionsGo = $('.actions button[type="submit"]');
+            var html = '';
+            var actionDelete = $('.js-action-delete');
+            var actionCopy = $('.js-action-copy');
+            var actionMove = $('.js-action-move');
+            var valueDelete = 'delete_files_or_folders';
+            var valueCopy = 'copy_files_and_folders';
+            var valueMove = 'move_files_and_folders';
+            var navigatorTable = $('.navigator-table').find('tr');
+
+            // triggers delete copy and move actions on separate buttons
+            function actionsButton(optionValue, actionButton) {
+                actionsSelectOptions.each(function () {
+                    if (this.value === optionValue) {
+                        actionButton.show();
+                        actionButton.on('click', function (e) {
+                            e.preventDefault();
+                            if (navigatorTable.hasClass('selected')) {
+                                actionsSelect.val(optionValue).prop('selected', true);
+                                actionsGo.trigger('click');
+                            }
+                        });
+                    }
+                });
+            }
+            actionsButton(valueDelete, actionDelete);
+            actionsButton(valueCopy, actionCopy);
+            actionsButton(valueMove, actionMove);
+
+            // mocking the action buttons to work in frontend UI
+            actionsSelectOptions.each(function (index) {
+                var className = '';
+                if (index !== 0) {
+                    if (this.value === valueDelete || this.value === valueCopy || this.value === valueMove) {
+                        className = 'class="hidden"';
+                    }
+                    html += '<li><a href="#"' + className + '>' + $(this).text() + '</a></li>';
+
+                }
+            });
+            dropdown.append(html);
+
+            dropdown.on('click', 'a', function (clickEvent) {
+                var targetIndex = $(this).closest('li').index() + 1;
+
+                clickEvent.preventDefault();
+
+                actionsSelect.find('option').eq(targetIndex).prop('selected', true);
+                actionsGo.trigger('click');
+            });
+
+            actionsMenu.on('click', function (e) {
+                if (!navigatorTable.hasClass('selected')) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            });
+        }());
+
+        // breaks header if breadcrumbs name reaches a width of 80px
+        (function () {
+            var minBreadcrumbWidth = 80;
+            var header = $('.navigator-top-nav');
+
+            var breadcrumbContainer = $('.breadcrumbs-container');
+            var breadcrumbFolderWidth = breadcrumbContainer.find('.navigator-breadcrumbs').outerWidth();
+            var breadcrumbDropdownWidth = breadcrumbContainer.find('.filer-dropdown-container').outerWidth();
+            var searchWidth = $('.filter-files-container').outerWidth();
+            var actionsWidth = $('.actions-wrapper').outerWidth();
+            var buttonsWidth = $('.navigator-button-wrapper').outerWidth();
+            var headerPadding = parseInt(header.css('padding-left'), 10) + parseInt(header.css('padding-right'), 10);
+
+            var headerWidth = header.outerWidth();
+            var fullHeaderWidth = minBreadcrumbWidth + breadcrumbFolderWidth +
+                breadcrumbDropdownWidth + searchWidth + actionsWidth + buttonsWidth + headerPadding;
+
+            var breadcrumbSizeHandlerClassName = 'breadcrumb-min-width';
+
+            var breadcrumbSizeHandler = function () {
+                if (headerWidth < fullHeaderWidth) {
+                    header.addClass(breadcrumbSizeHandlerClassName);
+                } else {
+                    header.removeClass(breadcrumbSizeHandlerClassName);
+                }
+            };
+
+            breadcrumbSizeHandler();
+
+            $(window).on('resize', function () {
+                headerWidth = header.outerWidth();
+                breadcrumbSizeHandler();
+            });
+
+        }());
+    });
+})(djQuery);