app/static/scripts/globalScripts.js
// returns an html element to be used as a linker to the person's data
returns an html element to be used as a linker to the person's data
returns an html element to be used as a linker to the person ' s data
create_card() {
        if(this.hasCard == true) {
            return this.cardHolder;
        }
        var card_container = document.createElement('div');
        card_container.className = 'card';
        card_container.id = this.id;
        this.hasCard = true;
        this.cardHolder = card_container; 
        var person_div = document.createElement('div');
        person_div.className = 'person_div';
        person_div.addEventListener('click', function() {
            let person_id = person_div.parentElement.id;
            let person_obj = person_from_id(person_id);
            person_obj.profile();
        });
        var card_photo = document.createElement('img');
        card_photo.className = 'card_photo';
        card_photo.src = 'static/profile_icon.png';
        var card_name = document.createElement('div');
        card_name.className = 'card_name';
        card_name.innerText = this.givenName;
        person_div.append(card_photo, card_name);
        var sibling_div = document.createElement('div');
        sibling_div.className = 'sibling_div';
        sibling_div.innerText = 'Siblings';
        this.sibling_div = sibling_div;
        var delete_div = document.createElement('div');
        delete_div.className = 'delete_cardholder';
        delete_div.innerText = 'delete (dev only)';
        delete_div.setAttribute('var', this.id);
        delete_div.addEventListener('click', function(event) {
            var owner_id = event.target.getAttribute('var');
            var cards = document.getElementsByClassName('card');
            for( let card of cards ) {
                if(card.id == owner_id) {
                    card.remove();
                }
            }
            delete_person(owner_id);
        });
        sibling_div.append(delete_div);
        var toggle_sibling_div = document.createElement('div');
        toggle_sibling_div.className = 'toggle_sibling_div';
        toggle_sibling_div.addEventListener('click', function() {
            if(sibling_div.classList.contains('show')) {
                sibling_div.classList.remove('show');
                toggle_sibling_div.classList.remove('open');
            } else {
                sibling_div.classList.add('show');
                toggle_sibling_div.classList.add('open');
            }
        });
        card_container.append(toggle_sibling_div, person_div, sibling_div);
        return card_container
    }
create_card ( ) { if ( this . hasCard == true ) { return this . cardHolder ; } var card_container = document . createElement ( 'div' ) ; card_container . className = 'card' ; card_container . id = this . id ; this . hasCard = true ; this . cardHolder = card_container ; var person_div = document . createElement ( 'div' ) ; person_div . className = 'person_div' ; person_div . addEventListener ( 'click' , function ( ) { let person_id = person_div . parentElement . id ; let person_obj = person_from_id ( person_id ) ; person_obj . profile ( ) ; } ) ; var card_photo = document . createElement ( 'img' ) ; card_photo . className = 'card_photo' ; card_photo . src = 'static/profile_icon.png' ; var card_name = document . createElement ( 'div' ) ; card_name . className = 'card_name' ; card_name . innerText = this . givenName ; person_div . append ( card_photo , card_name ) ; var sibling_div = document . createElement ( 'div' ) ; sibling_div . className = 'sibling_div' ; sibling_div . innerText = 'Siblings' ; this . sibling_div = sibling_div ; var delete_div = document . createElement ( 'div' ) ; delete_div . className = 'delete_cardholder' ; delete_div . innerText = 'delete (dev only)' ; delete_div . setAttribute ( 'var' , this . id ) ; delete_div . addEventListener ( 'click' , function ( event ) { var owner_id = event . target . getAttribute ( 'var' ) ; var cards = document . getElementsByClassName ( 'card' ) ; for ( let card of cards ) { if ( card . id == owner_id ) { card . remove ( ) ; } } delete_person ( owner_id ) ; } ) ; sibling_div . append ( delete_div ) ; var toggle_sibling_div = document . createElement ( 'div' ) ; toggle_sibling_div . className = 'toggle_sibling_div' ; toggle_sibling_div . addEventListener ( 'click' , function ( ) { if ( sibling_div . classList . contains ( 'show' ) ) { sibling_div . classList . remove ( 'show' ) ; toggle_sibling_div . classList . remove ( 'open' ) ; } else { sibling_div . classList . add ( 'show' ) ; toggle_sibling_div . classList . add ( 'open' ) ; } } ) ; card_container . append ( toggle_sibling_div , person_div , sibling_div ) ; return card_container }
returns an html element to be used as a linker to the person's data
returns an html element to be used as a linker to the person ' s data
// store the newly created element with the person // get person and run their profile method. // DEV ONLY: we can put the delete in the sibling just for testing // set an attribute to hold the person id //show hide the sibling div on button press