https://www.aea.asso.fr/js/mevia/modules/menu/mobile-userbar-vue.js?version=1790319560

1/**
2 * This is the Vue.js instance called in mobile-main.html.twig
3 */
4
5new Vue({
6
7    delimiters: ['${', '}$'],
8
9    el: '#main_mobile',
10
11    data: function () {
12        var element = document.querySelector('#main_mobile');
13
14        return {
15            // `dataset` hands every attribute back as a string, and a `v-if`
16            // would read "false" as a yes.
17            hasUnreadMentoringMessages: null !== element
18                && element.dataset.hasUnreadMentoringMessages === 'true',
19            showMobileMenu: false,
20            showFullsearchBar: false,
21            showMenubuilder: false,
22            showUserbarMenu: false,
23            menuState: false,
24            showFooter: false,
25            cometChatHasBeenRun: false,
26            cometChatButtonClasses: {
27                'mobile-navbar-footer--item': true,
28                'mobile-navbar-footer--disabled': true,
29            },
30        };
31    },
32
33    mounted: function () {
34        var mobileMenu = document.getElementById('mobile-content-container');
35        var mobileHeader = document.getElementById('mobile-header');
36        var mobileFooter = document.getElementById('mobile-navbar-footer');
37        var self = this;
38
39        // The footer is absent from the in-app webview, where `mobile-main.html.twig`
40        // renders it under `not userAgent().isMobileApp` while still mounting this
41        // root — and a resize fires there on every soft-keyboard opening.
42        if (mobileFooter) {
43            window.addEventListener('resize', function () {
44                if (document.activeElement.tagName === 'INPUT'
45                    || document.activeElement.tagName === 'TEXTAREA'
46                    || document.activeElement.tagName === 'SELECT'
47                ) {
48                    self.toggleFooter(mobileFooter, true);
49                } else {
50                    self.toggleFooter(mobileFooter, false);
51                }
52            });
53        }
54
55        var disableBackgroundScroll = function (e) {
56            var delta = e.wheelDelta || -e.detail;
57
58            this.scrollTop += (delta < 0 ? 1 : -1) * 30;
59            e.preventDefault();
60        };
61
62        if (mobileMenu) {
63            mobileMenu.addEventListener('mousewheel', disableBackgroundScroll, false);
64        }
65        if (mobileHeader) {
66            mobileHeader.addEventListener('mousewheel', disableBackgroundScroll, false);
67        }
68        if (mobileFooter) {
69            mobileFooter.addEventListener('mousewheel', disableBackgroundScroll, false);
70        }
71
72        // The mentoring entry carries an unread-message indicator, and this menu
73        // is rendered once, when the page loads. Reading those messages happens
74        // in the Vue application, which never reloads it, so it says here what
75        // it just read (business/networking/mentoring, utils/index.js).
76        window.addEventListener('mentoring:unread-messages-updated', function (event) {
77            self.hasUnreadMentoringMessages = Boolean(event.detail && event.detail.hasUnreadMessages);
78        });
79
80        var setTime = setInterval(function () {
81            if (typeof window.CometChatHasBeenRun !== 'undefined' && typeof window.jqcc !== 'undefined') {
82                self.cometChatHasBeenRun = true;
83                self.cometChatButtonClasses['mobile-navbar-footer--disabled'] = false;
84                clearInterval(setTime);
85            }
86        },1000);
87    },
88
89    computed: {
90        isLoggedIn: function () {
91            return (null !== document.querySelector('html.user-is-login'));
92        },
93    },
94
95    methods: {
96        /**
97         * Close userbar content
98         */
99        closeUserbar: function () {
100            this.showFullsearchBar = false;
101            this.showMenubuilder = false;
102            this.showUserbarMenu = false;

103            this.showMobileMenu = false;
104        },
105
106        /**
107         * Toggle on the fullsearch tab
108         */
109        toggleFullsearchTab: function () {
110                this.showMobileMenu = false;
111                this.showMenubuilder = false;
112                this.showUserbarMenu = false;
113                this.showFullsearchBar = !this.showFullsearchBar;
114        },
115
116        /**
117         * Toggle on the menu builder tab
118         */
119        toggleMenuBuilderTab: function () {
120            $(this).find('i').toggleClass('af-font-icon-reorder af-font-icon-close');
121            if (this.showMobileMenu === true && this.showMenubuilder === true) {
122                this.showMenubuilder = false;
123                this.showMobileMenu = false;
124            } else {
125                this.showMobileMenu = true;
126                this.showFullsearchBar = false;
127                this.showUserbarMenu = false;
128                this.showMenubuilder = true;
129            }
130        },
131
132        /**
133         * Toggle on the userbar tab
134         */
135        toggleUserbarTab: function () {
136          this.showMobileMenu = false;

137          this.showMenubuilder = false;
138          this.showUserbarMenu = !this.showUserbarMenu;
139          this.showFullsearchBar = false;
140
141          if (this.showUserbarMenu && !this.isLoggedIn) {
142            this.showUserbarMenu = false;
143            this.showAuthForm();
144          }
145        },
146
147        showAuthForm: function () {
148            initVueJs(function() {
149                  if (typeof window.piniaStore !== 'undefined') {
150                      window.piniaStore.dispatch('instanceSecurityLoginModal', 'promptToLogIn', {
151                          redirect: window.location.href,
152                      });
153                  }
154            });
155        },
156
157        /**
158         * This method set the admin menu to true so it changes the menu of the userbar to admin menu
159         * @param event
160         */
161        menuAdmin: function (event) {
162            this.menuState = true;
163            event.preventDefault();
164            event.stopPropagation();
165        },
166
167        /**
168         * This method set the admin menu to false so it changes the menu of the userbar to member menu
169         * @param event
170         */
171        menuMember: function (event) {
172            this.menuState = false;
173            event.preventDefault();
174            event.stopPropagation();
175        },
176
177        toggleFooter: function (footer, state) {
178          if (state) {
179            footer.classList.add('hide--hard');
180          } else  {
181            footer.classList.remove('hide--hard');
182          }
183        },
184
185        openCometChat: function () {
186            if (!this.cometChatHasBeenRun) {
187                // CometChat requires cookies
188                // If cookies are not enabled, open the cookie panel
189                if (typeof klaro !== 'undefined') {
190                    klaro.show();
191                }
192                return;
193            }
194
195            var cometChatMobileButton = document.querySelector('.cometchat_ccmobiletab_redirect');
196            if (cometChatMobileButton !== null) {
197                cometChatMobileButton.click();
198            }
199            var cometChatButton = document.getElementById('cometchat_userstab');
200            if (cometChatButton !== null) {
201                cometChatButton.click();
202            }
203        },
204
205        // This is used in Cypress alumnforce-e2e project
206        logout: function () {
207            var location = '/authentication/index/logout';
208            var callback = function () {
209                localStorage.removeItem('token');
210                localStorage.removeItem('tokenTtl');
211                localStorage.removeItem('tokenRemember');
212                window.location.assign(location);
213            }.bind(this);
214
215            callback();
216        },
217    },
218});