https://www.fproducao.pt/assets/js/search.js

1import App from './app.js';
2
3export class Search extends App{
4 
5    constructor() {
6    
7        super();
8       
9        this.container = $('.search-container');
10        this.form_container = $('.form-container form');
11        this.search_btn = $('.search-btn');
12       
13    }
14
15
16
17
18   
19    open(){
20       console.log('open');
21        $('body').addClass('search-open');
22        this.container.fadeIn().addClass('open');
23        this.container.find('input').focus();
24    }
25
26    close(){
27        $('body').removeClass('search-open');
28        this.container.fadeOut().removeClass('open');
29        console.log('close');
30       
31    }
32
33}
34
35
36var search = new Search();
37
38
39$('.search-btn').on('click', function() {
40    if((search.container).hasClass('open'))
41        search.close();
42    else
43        search.open();
44});
45
46
47$(document).on('click',  function(e) {
48    console.log(e.target);
49    console.log('btns' + search.search_btn.is(e.target));
50    console.log('container:' + search.form_container.is(e.target));
51    
52    if (!search.form_container.is(e.target) && search.form_container.has(e.target).length === 0 && !search.search_btn.is(e.target) && search.search_btn.has(e.target).length === 0) 
53    search.close();
54
55    // if((search.container).hasClass('open')){
56    //     if (!search.form_container.is(e.target)  && search.form_container.has(e.target).length === 0 && !search.search_btn.is(e.target))
57    //         search.close();
58    // };
59
60}); 
61
62// $(document).on('click', function (e) {
63
64//     //  if (!search.form_container.is(e.target) && search.container.has(e.target).length === 0 && !search.search_btn.is(e.target) && search.search_btn.has(e.target).length === 0) 
65//     //     search.close();
66
67//     console.log(e.target);
68
69//     if (!search.form_container.is(e.target) && !search.search_btn.is(e.target)) 
70//         search.close();
71    
72//  })
73