gistfile1.txt

import bindAll from '../utils/bindAll';

class TeamModal {

    constructor(el) {
        this.el = el;
        this.modal = document.querySelector('.people-modal');
        this.dom();
        this.init();
    }



    dom() {
        this.dom = {
            slides: this.el.querySelectorAll('.people-search__slide'),
            closeBtn: this.modal.querySelector('.people-modal__close')
        }
    }

    showModal() {

        this.modal.classList.add('is-active');

    }

    closeModal() {
        this.modal.classList.remove('is-active');
    }

    init() {
        for (let i = 0; i < this.dom.slides.length; i++) {
            this.dom.slides[i].addEventListener('click', this.showModal.bind(this));
            
            this.dom.slides[i].addEventListener('click', this.addContent.bind(this.dom.slides[i].dataset.id));

            this.modal.querySelector('.js-contact-switch').addEventListener('click', this.nextSlide);

        }
        this.dom.closeBtn.addEventListener('click', this.closeModal.bind(this))

        document.addEventListener('keyup', (e) => {
            if(e.keyCode === 27){
                this.closeModal();
            }
        });
    }

    nextSlide() {
        
        var modal = document.querySelector('.people-modal'),
            slides = document.querySelectorAll('.people-search__slide'),
            cur_id = modal.dataset.userid;

        for (let i = 0; i < slides.length; i++) {
            if(slides[i].dataset.id == cur_id){
                var next_id = i+1;
            }
        }
        this.addContent.bind(slides[next_id].dataset.id);

    }


    addContent() {
        var id = this;
        if (id.length) {
            var jsonWrapper = document.querySelector('.people-data-modale');
            const json = JSON.parse(jsonWrapper.textContent);
            for (let i = 0; i < json.length; i++) {
                if (json[i].user_id == id) {
                    var name = json[i][0].name,
                        position = json[i][0].position,
                        photo = json[i][0].photo,
                        cv = json[i][0].cv,
                        linkedin_url = json[i][0].linkedin_url,
                        twitter_url = json[i][0].twitter_url,
                        vcard = json[i][0].vcard,
                        html_cv = "";


                    if(cv.length){
                        for (let k = 0; k < cv.length; k++) {

                            if (cv[k].is_education == true) {
                                html_cv += '<div class=\"people-modal__education\">';

                                    if (cv[k].bloc_title) {
                                        html_cv += "<div class=\"people-modal__education-title\">" + cv[k].bloc_title + "</div>"
                                    }
                                    for (let j = 0; j < cv[k].education_bloc.length; j++) {
                                        html_cv += "<div class=\"people-modal__education-line\"><div class=\"dot\"></div><div class=\"line\"></div><p>" + cv[k].education_bloc[j].replace(/\n/g, "<br />") + "</p></div>"
                                    }
                                html_cv +="</div>";
                            } 
                            if(cv[k].is_education == false){
                                if (cv[k].bloc_title) {
                                    html_cv += "<div class=\"people-modal__education-title\">" + cv[k].bloc_title + "</div>"
                                }
                                    html_cv += "<div class=\"people-modal__description\"><p>" + cv[k].bloc_content.replace(/\n/g, "<br />") + "</p></div>"
                            }

                        }
                    }
                    var modal = document.querySelector('.people-modal');
                    modal.setAttribute("data-userid",id);//change data userid

                    if (name.length) {
                        if (position.length) {
                            modal.querySelector('.people-modal__title').innerHTML = name + '<span>' + position + '</span>';
                        } else {
                            modal.querySelector('.people-modal__title').innerHTML = name;
                        }
                    }
                    modal.querySelector('.people-modal__image').innerHTML = '<img src="' + photo + '"/>';
                    modal.querySelector('.people-modal__description').innerHTML = html_cv;
                    
                    if(linkedin_url){
                        modal.querySelector('.people-linkedin').style.visibility= 'visible';
                        modal.querySelector('.people-linkedin a').setAttribute('href', linkedin_url);

                    } else {
                        modal.querySelector('.people-linkedin').style.visibility= 'hidden';
                    }
                    if(twitter_url){
                        modal.querySelector('.people-twitter').style.visibility= 'visible';
                        modal.querySelector('.people-twitter a').setAttribute('href', twitter_url);

                    } else {
                        modal.querySelector('.people-twitter').style.visibility= 'hidden';
                    }
                    if(vcard){
                        modal.querySelector('.v-card').style.visibility= 'visible';
                        modal.querySelector('.v-card a').setAttribute('href', vcard);

                    } else {
                        modal.querySelector('.v-card').style.visibility= 'hidden';
                    }

                }
            }
        }
 
    }
}
export default TeamModal