https://my.paylink.sa/assets/js/app.js

1var App = function() {
2    var MediaSize = {
3        xl: 1200,
4        lg: 992,
5        md: 991,
6        sm: 576
7    };
8    var ToggleClasses = {
9        headerhamburger: '.toggle-sidebar',
10        inputFocused: 'input-focused',
11    };
12
13    var Selector = {
14        mainHeader: '.header.navbar',
15        headerhamburger: '.toggle-sidebar',
16        fixed: '.fixed-top',
17        mainContainer: '.main-container',
18        sidebar: '#sidebar',
19        sidebarContent: '#sidebar-content',
20        sidebarStickyContent: '.sticky-sidebar-content',
21        ariaExpandedTrue: '#sidebar [aria-expanded="true"]',
22        ariaExpandedFalse: '#sidebar [aria-expanded="false"]',
23        contentWrapper: '#content',
24        contentWrapperContent: '.container',
25        mainContentArea: '.main-content',
26        searchFull: '.toggle-search',
27        overlay: {
28            sidebar: '.overlay',
29            cs: '.cs-overlay',
30            search: '.search-overlay'
31        }
32    };
33    
34    var toggleFunction = {
35        sidebar: function($recentSubmenu) {
36            $('.sidebarCollapse').on('click', function (sidebar) {
37                sidebar.preventDefault();
38                $(Selector.mainContainer).toggleClass("sidebar-closed");
39                $(Selector.mainHeader).toggleClass('expand-header');
40                $(Selector.mainContainer).toggleClass("sbar-open");
41                $('.overlay').toggleClass('show');
42                $('html,body').toggleClass('sidebar-noneoverflow');
43            });
44        },
45        overlay: function() {
46            $('#dismiss, .overlay, cs-overlay').on('click', function () {
47                // hide sidebar
48                $(Selector.mainContainer).addClass('sidebar-closed');
49                $(Selector.mainContainer).removeClass('sbar-open');
50                // hide overlay
51                $('.overlay').removeClass('show');
52                $('html,body').removeClass('sidebar-noneoverflow');
53            });
54        },
55        search: function() {
56            $(Selector.searchFull).click(function(event) {
57               $(this).parents('.search-animated').find('.search-full').addClass(ToggleClasses.inputFocused);
58               $(this).parents('.search-animated').addClass('show-search');
59               $(Selector.overlay.search).addClass('show');
60               $(Selector.overlay.search).addClass('show');
61            });
62
63            $(Selector.overlay.search).click(function(event) {
64               $(this).removeClass('show');
65               $(Selector.searchFull).parents('.search-animated').find('.search-full').removeClass(ToggleClasses.inputFocused);
66               $(Selector.searchFull).parents('.search-animated').removeClass('show-search');
67            });
68        }
69    }
70
71    var inBuiltfunctionality = {
72        mainCatActivateScroll: function() {
73            const ps = new PerfectScrollbar('.menu-categories', {
74                wheelSpeed:.5,
75                swipeEasing:!0,
76                minScrollbarLength:40,
77                maxScrollbarLength:300,
78                suppressScrollX : true
79            });
80        },
81        preventScrollBody: function() {
82            $('#sidebar').bind('mousewheel DOMMouseScroll', function(e) {
83                var scrollTo = null;
84
85                if (e.type == 'mousewheel') {
86                    scrollTo = (e.originalEvent.wheelDelta * -1);
87                }
88                else if (e.type == 'DOMMouseScroll') {
89                    scrollTo = 40 * e.originalEvent.detail;
90                }
91
92                if (scrollTo) {
93                    e.preventDefault();
94                    $(this).scrollTop(scrollTo + $(this).scrollTop());
95                }
96            });
97        },
98        functionalDropdown: function() {
99            var getDropdownElement = document.querySelectorAll('.more-dropdown .dropdown-item');
100            for (var i = 0; i < getDropdownElement.length; i++) {
101                getDropdownElement[i].addEventListener('click', function() {
102                    document.querySelectorAll('.more-dropdown .dropdown-toggle > span')[0].innerText = this.getAttribute('data-value');
103                })
104            }
105        }
106    }
107
108    var _mobileResolution = {
109        onRefresh: function() {
110            var windowWidth = window.innerWidth;
111            if ( windowWidth <= MediaSize.md ) {
112                toggleFunction.sidebar();
113            }
114        },
115
116        // Note : -  _mobileResolution -> onResize | Uncomment it if need for onresize functions for MOBILE RESOLUTION i.e. below or equal to 991px |
117
118        /*
119        onResize: function() {
120            $(window).on('resize', function(event) {
121                event.preventDefault();
122                var windowWidth = window.innerWidth;
123                if ( windowWidth <= MediaSize.md ) {
124                }
125            });
126        }
127        */
128    }
129
130    var _desktopResolution = {
131        onRefresh: function() {
132            var windowWidth = window.innerWidth;
133            if ( windowWidth > MediaSize.md ) {
134                toggleFunction.sidebar(true);
135            }
136        },
137
138        // Note : -  _desktopResolution -> onResize | Uncomment it if need, for onresize functions for DESKTOP RESOLUTION i.e. above or equal to 991px |
139
140        /*
141        onResize: function() {
142            $(window).on('resize', function(event) {
143                event.preventDefault();
144                var windowWidth = window.innerWidth;
145                if ( windowWidth > MediaSize.md ) {
146                }
147            });
148        }
149        */
150    }
151
152    function sidebarFunctionality() {
153        function sidebarCloser() {
154
155            if (window.innerWidth <= 991 ) {
156
157                if (!$('body').hasClass('alt-menu')) {
158
159                    $("#container").addClass("sidebar-closed");
160                    $('.overlay').removeClass('show');
161                } else {
162                    $(".navbar").removeClass("expand-header");
163                    $('.overlay').removeClass('show');
164                    $('#container').removeClass('sbar-open');
165                    $('html, body').removeClass('sidebar-noneoverflow');
166                }
167
168            } else if (window.innerWidth > 991 ) {
169
170                if (!$('body').hasClass('alt-menu')) {
171
172                    $("#container").removeClass("sidebar-closed");
173                    $(".navbar").removeClass("expand-header");
174                    $('.overlay').removeClass('show');
175                    $('#container').removeClass('sbar-open');
176                    $('html, body').removeClass('sidebar-noneoverflow');
177                } else {
178                    $('html, body').addClass('sidebar-noneoverflow');
179                    $("#container").addClass("sidebar-closed");
180                    $(".navbar").addClass("expand-header");
181                    $('.overlay').addClass('show');
182                    $('#container').addClass('sbar-open');
183                }
184            }
185
186        }
187
188        function sidebarMobCheck() {
189            if (window.innerWidth <= 991 ) {
190
191                if ( $('.main-container').hasClass('sbar-open') ) {
192                    return;
193                } else {
194                    sidebarCloser()
195                }
196            } else if (window.innerWidth > 991 ) {
197                sidebarCloser();
198            }
199        }
200
201        sidebarCloser();
202
203        $(window).resize(function(event) {
204            sidebarMobCheck();
205        });
206
207    }
208
209    return {
210        init: function() {
211            toggleFunction.overlay();
212            toggleFunction.search();
213            /*
214                Desktop Resoltion fn
215            */
216            _desktopResolution.onRefresh();
217
218            // Note : -  _desktopResolution -> onResize | Uncomment it if need for onresize functions for MOBILE RESOLUTION i.e. above or equal to 991px |
219
220            // _desktopResolution.onResize();
221
222            /*
223                Mobile Resoltion fn
224            */
225            _mobileResolution.onRefresh();
226
227            // Note : -  _mobileResolution -> onResize | Uncomment it if need for onresize functions for DESKTOP RESOLUTION i.e. below or equal to 991px |
228            
229            // _mobileResolution.onResize();
230
231            sidebarFunctionality();
232            inBuiltfunctionality.mainCatActivateScroll();
233            inBuiltfunctionality.preventScrollBody();
234            inBuiltfunctionality.functionalDropdown();
235        }
236    }
237
238}();