ExcelClone/script.js at main · abhisekill/ExcelClone · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

const topRow = document.querySelector('.top-row');
const leftCol = document.querySelector('.left-col');
const topLeftCell = document.querySelector('.top-left-cell');
const allCells = document.querySelectorAll('.cell');
const addressBar = document.querySelector('#address-bar')
const formulaInput = document.querySelector("#formula-bar");
const fontFamily = document.querySelector('#font-family');
const fontSize = document.querySelector('#font-size');
const textColor = document.querySelector('#text-color-palette');
const backgroundColor = document.querySelector('#fill-color-palette');

let lastSelectedCell;

cellContainerDiv.addEventListener('scroll', (e) => {
    const scrollFromTop = e.target.scrollTop;
    const scrollFromLeft = e.target.scrollLeft;
    // console.log(scrollFromTop);
    topRow.style.top = scrollFromTop + "px";
    leftCol.style.left = scrollFromLeft + "px";
    topLeftCell.style.top = scrollFromTop + "px";
    topLeftCell.style.left = scrollFromLeft + "px";
})

for (let i = 0; i < allCells.length; i++) {
    // whenever a cell is clicked , show its address in address bar
    // and the formula associated with it in the formula bar
    allCells[i].addEventListener('click', (e) => {
        const { rowId, colId } = getRowIdColId(e.target);
        const address = String.fromCharCode(colId + 65) + (rowId + 1) + "";
        // console.log(address);
        addressBar.value = address;
        // show formula in the UI
        const cellObject = db[rowId][colId];
        formulaInput.value = cellObject.formula;
        // highlight the cell which is clicked
        const prevCell = document.querySelector('.active-cell');
        if (prevCell && prevCell != e.target) {
            prevCell.classList.remove('active-cell');
        }
        e.target.classList.add('active-cell');

        const prevTopAndLeftCell = document.querySelectorAll('.active-cell-header');
        if (prevTopAndLeftCell[0]) {
            prevTopAndLeftCell[0].classList.remove('active-cell-header');
            prevTopAndLeftCell[1].classList.remove('active-cell-header');
        }
        const topRowCell = document.querySelector(`div[topRowCellId = '${colId}']`);
        const leftColCell = document.querySelector(`div[leftColCellId = '${rowId}']`);
        if (topRowCell.classList.contains('active-cell-header')
            && leftColCell.classList.contains('active-cell-header')) {
            return;
        }
        topRowCell.classList.add('active-cell-header');
        leftColCell.classList.add('active-cell-header');

        // font style
        cellObject.fontStyle.bold ? document.querySelector('.bold').classList.add('active-menu-option') :
            document.querySelector('.bold').classList.remove('active-menu-option');
        cellObject.fontStyle.italic ? document.querySelector('.italic').classList.add('active-menu-option') :
            document.querySelector('.italic').classList.remove('active-menu-option');
        cellObject.fontStyle.underline ? document.querySelector('.underline').classList.add('active-menu-option') :
            document.querySelector('.underline').classList.remove('active-menu-option');
        // horizontal align
        const prevActiveAlignment = document.querySelector('.horizontal-align .active-menu-option');
        prevActiveAlignment.classList.remove('active-menu-option');
        const alignType = cellObject.horizontalAlign;
        document.querySelector(`.${alignType}`).classList.add('active-menu-option');
        // font options
        fontFamily.value = cellObject.fontOption.fontFamily;
        fontSize.value = cellObject.fontOption.fontSize;
        //color options
        textColor.value = cellObject.textColor;
        backgroundColor.value = cellObject.backgroundColor;
    })

    allCells[i].addEventListener('blur', (e) => {
        lastSelectedCell = e.target;
        const cellValue = e.target.textContent;
        const { rowId, colId } = getRowIdColId(e.target);
        const cellObj = db[rowId][colId];
        if (cellObj.value == cellValue)
            return;
        cellObj.value = cellValue;
        // console.log(cellObj);
        updateChildren(cellObj);
    })

    allCells[i].addEventListener('keydown', (e) => {
        if (e.key == 'Backspace') {
            const cell = e.target;
            const { rowId, colId } = getRowIdColId(cell);
            const cellObj = db[rowId][colId];
            if (cellObj.formula) {
                // update ui
                cell.textContent = "";
                formulaInput.value = "";
                // update db
                cellObj.value = "";
                cellObj.formula = "";
                removeFormula(cellObj);
                console.log(cellObj);
            }
        }
    })
}

formulaInput.addEventListener('blur', (e) => {
    const formula = e.target.value;
    if (formula) {
        const { rowId, colId } = getRowIdColId(lastSelectedCell);
        const cellObject = db[rowId][colId];

        // if formula is already there in a cell and it is then changed
        if (cellObject.formula) {
            removeFormula(cellObject);
        }

        const computedValue = solveFormula(formula, cellObject);
        // updatae db
        cellObject.value = computedValue;
        cellObject.formula = formula;
        // update ui
        lastSelectedCell.textContent = computedValue;

        // update child value if formula is modified
        updateChildren(cellObject);
    }
})