View file upload/js/AL/FilterFramework/filter_reload.js

File size: 8.13Kb
/** 
This software is furnished under a license and may be used and copied
only  in  accordance  with  the  terms  of such  license and with the
inclusion of the above copyright notice.  This software  or any other
copies thereof may not be provided or otherwise made available to any
other person.  No title to and  ownership of the  software is  hereby
transferred.                                                         
                                                                     
You may not reverse  engineer, decompile, defeat  license  encryption
mechanisms, or  disassemble this software product or software product
license.  AddonsLab may terminate this license if you don't comply with
any of these terms and conditions.  In such event,  licensee  agrees 
to return licensor  or destroy  all copies of software  upon termination 
of the license.
*/
var AddonsLab = AddonsLab || {};
!function ($, window, document, _undefined) {
    "use strict";

    $(document).on('filter:init', function (evt, $form) {
        $(".field_tinh_thanh", $form).change(function () {
            $('.field_quan', $form).html($('#prefix1_' + $('.field_tinh_thanh', $form).val()).html());
        }).change();
    });

    AddonsLab.ActiveFilterContainer = XF.Element.newHandler({
        init: function () {
            var $activeFilterContainer = this.$target;
            var targetSelector = $activeFilterContainer.attr('data-reload-target');

            $activeFilterContainer.closest('ul').on('click', '.filterBar-filterToggle', function (evt) {
                evt.preventDefault();
                /*var info = {
                    '_xfToken': $('input[name=_xfToken]').val(),
                    '_xfResponseType': 'json'
                };*/
                requestUrl($(this).attr('href'), null, function (finalUrl, $html) {

                    var $response = $('<div></div>').append($html);

                    // if a filter form exists on the page and in the response, make the modification
                    var filterFormSelector = '[data-xf-init=\'filterFormContainer\']';

                    var $filterForm = $(filterFormSelector).closest('form');

                    // take only one form from the response, just in case it has also the form for mobile
                    var $replacementForm = $response.find(filterFormSelector).closest('form').first();

                    if ($filterForm.length && $replacementForm.length) {
                        // the response has the form and the page has the form, replace them
                        $filterForm.replaceWith($replacementForm);
                        var $form = $(filterFormSelector).closest('form');
                        XF.activate($form);
                    } else {
                        // either the response did not have the form or the page does not have it,
                        // nothing to do except closing the form if it was in popup to trigger reload from a URL
                    }

                    var $replaceList = $response.find(targetSelector);
                    var $currentList = $(targetSelector);

                    if ($replaceList.length && $currentList.length) {
                        // the elements exist in the response and in the page, do the replacement
                        $currentList.replaceWith($replaceList);
                        XF.activate($(targetSelector));
                    } else {
                        // should not happen, redirect to the final URL for the user to see the real content
                        XF.redirect(finalUrl);
                        return;
                    }

                    setUrl(finalUrl);
                });
            });
        }
    });

    AddonsLab.FilterFormContainer = XF.Element.newHandler({
        init: function () {
            var $filterFormContainer = this.$target;

            var onVisible = this.onVisible;

            // delay the initialization for some seconds giving
            setTimeout(function () {
                var $form = $filterFormContainer.closest('form');
                var targetSelector = $filterFormContainer.attr('data-reload-target');
                var autoReload = $filterFormContainer.attr('data-auto-reload');

                var timeout;

                function registerReload($form, targetSelector) {
                    if (timeout) {
                        clearTimeout(timeout);
                    }
                    timeout = setTimeout(function () {
                        reloadList($form, targetSelector);
                    }, 500);
                }

                if (targetSelector && parseInt(autoReload)) {
                    $('input,select', $form).change(function () {
                        registerReload($form, targetSelector);
                    });

                    $(document).on('click', '.colorPicker-save', function () {
                        registerReload($form, targetSelector);
                    });
                }

                onVisible($form);

                $(document.body).on('xf:layout', function () {
                    onVisible($form);
                })

                $('.p-navgroup-link--filter').click(function () {
                    setTimeout(function(){
                        onVisible($form);
                    }, 500);
                })
            }, 100);
        },
        onVisible: function ($form) {
            if (!$form.is(':visible') || $form.data('filterInit')) {
                return;
            }

            $form.data('filterInit', 1);

            var $select = $form.find('.customFieldContainer div.inputGroup > select.input').not('.br-select');
            $select.closest('div.inputGroup').addClass('hasFilterableSelect');
            $select.filter('[multiple]').find('option[value=\'\']').remove();
            $select.select2({
                dropdownCssClass: 'customFieldSelectionPopup'
            });
            $select
                .closest('.customFieldContainer')
                .addClass('filterSelectionContainer')
                .find('.hasFilterableSelect .select2-container')
                .addClass('input');
            $select.filter('[multiple]')
                .closest('.customFieldContainer')
                .addClass('multipleSelectionContainer');
            $select.not('[multiple]')
                .closest('.customFieldContainer')
                .addClass('singleSelectionContainer');

            // trigger a custom jQuery event
            $(document).trigger('filter:init', [$form]);
        }
    });

    XF.Element.register('filterFormContainer', 'AddonsLab.FilterFormContainer');
    XF.Element.register('activeFilterContainer', 'AddonsLab.ActiveFilterContainer');

    function reloadList($form, targetSelector) {
        requestUrl($form.attr('action'), $form.serializeArray(), function (finalUrl, $html) {
            var $response = $('<div></div>').append($html);
            var $replacement = $response.find(targetSelector);
            $(targetSelector).html($replacement.html());
            XF.activate($(targetSelector));

            setUrl(finalUrl);
        });
    }

    function requestUrl(url, info, callback) {
        var options = {skipDefaultSuccess: 1};
        if (info === null) {
            // shorthand for accessing raw html data
            info = [];
            options.dataType = 'html';
            options.skipDefault = true;
        }

        XF.ajax('GET', url, info, function (data) {
            if (data.redirect) {
                requestUrl(data.redirect, null, callback);
                return;
            }

            if (typeof data === 'string') {
                // raw html loading mode
                callback(url, $(data)); // pass the entire body
                return;
            }

            if (!data.html) {
                return;
            }

            XF.setupHtmlInsert(data.html, function ($html) {
                callback(url, $html);
            });
        }, options);
    }

    function setUrl(url) {
        if (window.history.replaceState) {
            //prevents browser from storing history with each change:
            window.history.replaceState({}, null, url);
        }
    }
}(jQuery, window, document);