first commit

web/js/backend/backend.js

@@ -0,0 +1,132 @@
+jQuery(function ($) {
+    $(document).ready(function () {
+        let preloader = $('#preloader-dialog').overlay({
+            speed: 0,
+            load: false,
+            mask: {
+                color: '#444',
+                loadSpeed: 0,
+                closeSpeed: 0,
+                opacity: 0.5,
+                zIndex: 200000,
+            },
+            closeOnClick: false,
+            closeOnEsc: false,
+            onLoad: function () {
+                let content = this.getOverlay().find('.content');
+                this.getOverlay().find('.close').hide();
+                content.html('<p>'+this.getOverlay().data('busy-message')+'<\/p><div class="preloader_48x48">&nbsp;<\/div>');
+            },
+            onBeforeLoad: function () {
+                preloader.data('preloader_is_open', true);
+            },
+            onClose: function () {
+                preloader.data('preloader_is_open', false);
+            }
+        });
+
+        $.preloader = {
+            show: function () {
+                let api = preloader.data('overlay');
+                if (!preloader.data('preloader_is_open')) {
+                    api.load();
+                }
+            },
+            hide: function () {
+                let api = preloader.data('overlay');
+                if (preloader.data('preloader_is_open')) {
+                    api.close();
+                }
+            },
+            toggle: function () {
+                let api = preloader.data('overlay');
+                if (preloader.data('preloader_is_open')) {
+                    api.close();
+                } else {
+                    api.load();
+                }
+            },
+            update: function (content) {
+                let api = preloader.data('overlay');
+                if (content === undefined) {
+                    throw 'The "content" parameter is required';
+                }
+
+                api.getOverlay().find('.close').show();
+                api.getOverlay().find('.content').html(content);
+            }
+        }
+
+        $.fn.selectBox = function (action) {
+            switch (action) {
+                case "update":
+                    this.chosen('destroy').chosen();
+                    break;
+                case "destroy":
+                    this.chosen('destroy');
+                    break;
+                default:
+                    let selects = this.not('.flatpickr-monthDropdown-months');
+
+                    selects.chosen({
+                        disable_search_threshold: 5,
+                        placeholder_text: " "
+                    }).on('chosen:showing_dropdown', function (event, params) {
+                        let chosen_container = $(event.target).next('.chosen-container');
+                        let dropdown = chosen_container.find('.chosen-drop');
+                        let dropdown_top = dropdown.offset().top - $(window).scrollTop();
+                        let dropdown_height = dropdown.height();
+                        let viewport_height = $(window).height();
+
+                        if (dropdown_top + dropdown_height > viewport_height) {
+                            chosen_container.addClass('chosen-drop-up');
+                        }
+
+                    }).on('chosen:hiding_dropdown', function (event, params) {
+                        $(event.target).next('.chosen-container').removeClass('chosen-drop-up');
+                    }).on('chosen:update', function () {
+                        $(this).selectBox('update');
+                    }).on('chosen:destroy', function () {
+                        $(this).selectBox('destroy');
+                    });
+                    break;
+            }
+        }
+
+        $(document).on('chosen:init', function (event, selector) {
+            $(selector).selectBox();
+        });
+
+        $.fn.truncateText = function () {
+            function updateStatus(entries) {
+                for (let entry of entries) {
+                    console.log(entry.target.scrollHeight+' > '+entry.target.clientHeight);
+                    if (entry.target.scrollHeight > entry.target.clientHeight) {
+                        entry.target.parentElement.classList.add('expandable');
+                    } else {
+                        entry.target.parentElement.classList.remove('expandable');
+                    }
+                }
+            }
+
+            const observer = new ResizeObserver(updateStatus);
+
+            this.on('click', '.button', function () {
+                const button = $(this);
+                button.closest('.truncate-text').toggleClass('expanded');
+
+                return false;
+            });
+
+            this.each(function () {
+                observer.observe($(this).find('.truncate-text-container').get(0));
+            });
+
+
+        }
+
+        $('select').selectBox();
+
+        $('.truncate-text.expandable').truncateText();
+    });
+});