app/static/scripts/globalScripts.js
// return a js object holding a branch and leaves as properties
return a js object holding a branch and leaves as properties
return a js object holding a branch and leaves as properties
create_branch(branch_number) {
        var branch_object = {
            branch: undefined,
            leaves: []
        };
        var all_branches = document.getElementsByClassName('branch');
        for( let existing_branch of all_branches) {
            if(existing_branch.style.order == branch_number) {
                branch_object.branch = existing_branch;
                for ( let leaf of existing_branch.children ) {
                    branch_object.leaves.push(leaf);
                }
                return branch_object
            }
        }
        var branch_container = document.createElement('div');
        branch_container.className = 'branch';
        branch_container.style.order = branch_number;
        var leaf_count = Math.pow( 2 , (branch_number - 2) );
        if( leaf_count == 0.5) {
            leaf_count = 1;
        }
        var all_branches = document.getElementsByClassName('branch');
        if(all_branches) {
            for( let branch of all_branches ) {
                branch.style.width = (leaf_count * 500) + 'px';
            }
            branch_container.style.width = (leaf_count * 500) + 'px';
            svg_holder.style.width = (leaf_count * 500) + 'px';
        }
        for( let leaf = 0; leaf < leaf_count; leaf++ ) {
            var new_leaf = document.createElement('div');
            new_leaf.className = 'leaf';
            new_leaf.style.width = '500px';
            new_leaf.style.justifyContent = 'space-around';
            branch_container.appendChild(new_leaf);
            branch_object.leaves.push(new_leaf);
        }
        let leaves = document.getElementsByClassName('leaf');
        if(leaves) {
            for( let leaf of leaves) {
                var leaf_branch_number = leaf.parentElement.style.order;
                var latest_branch_width = parseInt(branch_container.style.width);
                var n_factor = leaf_branch_number - 2;
                var multiplier = Math.pow(2, n_factor);
                var leaf_width = latest_branch_width / multiplier;
                if(leaf_branch_number < 3 ) {
                    leaf_width = latest_branch_width;
                }
                leaf.style.width = leaf_width + 'px';
            }
        }
        tree_container.appendChild(branch_container);
        svg_holder.style.height = (tree_container.offsetHeight * 0.75) + 'px';
        branch_object.branch = branch_container;
        return branch_object;
    }
create_branch ( branch_number ) { var branch_object = { branch : undefined , leaves : [ ] } ; var all_branches = document . getElementsByClassName ( 'branch' ) ; for ( let existing_branch of all_branches ) { if ( existing_branch . style . order == branch_number ) { branch_object . branch = existing_branch ; for ( let leaf of existing_branch . children ) { branch_object . leaves . push ( leaf ) ; } return branch_object } } var branch_container = document . createElement ( 'div' ) ; branch_container . className = 'branch' ; branch_container . style . order = branch_number ; var leaf_count = Math . pow ( 2 , ( branch_number - 2 ) ) ; if ( leaf_count == 0.5 ) { leaf_count = 1 ; } var all_branches = document . getElementsByClassName ( 'branch' ) ; if ( all_branches ) { for ( let branch of all_branches ) { branch . style . width = ( leaf_count * 500 ) + 'px' ; } branch_container . style . width = ( leaf_count * 500 ) + 'px' ; svg_holder . style . width = ( leaf_count * 500 ) + 'px' ; } for ( let leaf = 0 ; leaf < leaf_count ; leaf ++ ) { var new_leaf = document . createElement ( 'div' ) ; new_leaf . className = 'leaf' ; new_leaf . style . width = '500px' ; new_leaf . style . justifyContent = 'space-around' ; branch_container . appendChild ( new_leaf ) ; branch_object . leaves . push ( new_leaf ) ; } let leaves = document . getElementsByClassName ( 'leaf' ) ; if ( leaves ) { for ( let leaf of leaves ) { var leaf_branch_number = leaf . parentElement . style . order ; var latest_branch_width = parseInt ( branch_container . style . width ) ; var n_factor = leaf_branch_number - 2 ; var multiplier = Math . pow ( 2 , n_factor ) ; var leaf_width = latest_branch_width / multiplier ; if ( leaf_branch_number < 3 ) { leaf_width = latest_branch_width ; } leaf . style . width = leaf_width + 'px' ; } } tree_container . appendChild ( branch_container ) ; svg_holder . style . height = ( tree_container . offsetHeight * 0.75 ) + 'px' ; branch_object . branch = branch_container ; return branch_object ; }
return a js object holding a branch and leaves as properties
return a js object holding a branch and leaves as properties
// search for existing branch with this order number // object containing a .branch element and a .leaves list_of_elements // otherwise make a new one with that branch number ... and add it to the tree container // create leaves // this is exponential based on value above branch 2 // number 2 to the power of the branch numberish // this calculates the number of leaves within a branch // widen all branches according to the latest branch // widen svg holder to latest branch width // make the leaves and add them to the branch // resize all lower leaves // set svg_holder height based on tree container size