The-Excel-Clone/menu.js at main · kishanrajput23/The-Excel-Clone · 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
// Font Size
fontSizeInput.addEventListener("change",function(){
    let fontSize = fontSizeInput.value;
    let address = addressInput.value;
    let id=getRidCid(address);
    let tobeChangedCell = document.querySelector
        (`.grid .cell[rid='${id.rId}'][cid='${id.cId}']`);
    tobeChangedCell.style.fontSize = fontSize+"px";
    db[`${id.rId}`][`${id.cId}`].fontSize = fontSize;
});

// Font Family
fontFamilyInput.addEventListener("change",function(){
    let fontFamily = fontFamilyInput.value;
    let address = addressInput.value;
    let id =getRidCid(address);
    let tobeChangedCell = document.querySelector
        (`.grid .cell[rid='${id.rId}'][cid='${id.cId}']`);
    tobeChangedCell.style.fontFamily = fontFamily;
    db[`${id.rId}`][`${id.cId}`].fontFamily = fontFamily;
});

// Bold
boldInput.addEventListener("click",function(){
    let address = addressInput.value;
    let id =getRidCid(address);
    let tobeChangedCell = document.querySelector(`.grid .cell[rid='${id.rId}'][cid='${id.cId}']`);
    tobeChangedCell.style.fontWeight = "bold";
    boldInput.classList.add("selected");
    let cellObject = db[`${id.rId}`][`${id.cId}`];
    if(cellObject.bold){
        tobeChangedCell.style.fontWeight = "normal";
        boldInput.classList.remove("selected");
        cellObject.bold=false;
    }
    else{
        tobeChangedCell.style.fontWeight = "bold";
        boldInput.classList.add("selected");
        cellObject.bold=true;
    }
});

//Italic
ItalicInput.addEventListener("click",function(){
    let address = addressInput.value;
    let id =getRidCid(address);
    let tobeChangedCell = document.querySelector(`.grid .cell[rid='${id.rId}'][cid='${id.cId}']`);
    tobeChangedCell.style.fontStyle = "italic";
    ItalicInput.classList.add("selected");
    let cellObject = db[`${id.rId}`][`${id.cId}`];
    if(cellObject.italic){
        tobeChangedCell.style.fontStyle = "normal";
        ItalicInput.classList.remove("selected");
        cellObject.italic=false;
    }
    else{
        tobeChangedCell.style.fontStyle = "italic";
        ItalicInput.classList.add("selected");
        cellObject.italic=true;
    }

});

//UnderLine
UnderlineInput.addEventListener("click",function(){
    let address = addressInput.value;
    let id =getRidCid(address);
    let tobeChangedCell = document.querySelector(`.grid .cell[rid='${id.rId}'][cid='${id.cId}']`);
    tobeChangedCell.style.textDecoration = "underline";
    UnderlineInput.classList.add("selected");
    let cellObject = db[`${id.rId}`][`${id.cId}`];
    if(cellObject.underline){
        tobeChangedCell.style.textDecoration = "none";
        UnderlineInput.classList.remove("selected");
        cellObject.underline=false;
    }
    else{
        tobeChangedCell.style.textDecoration = "underline";
        UnderlineInput.classList.add("selected");
        cellObject.underline=true;
    }

});

// Alignment
alignInput.addEventListener("click",function(e){
    if(e.target !== alignInput){
        let classesArr = e.target.classList;
        let hAlignment = classesArr[classesArr.length - 1];
        let address = addressInput.value;
        let id =getRidCid(address);
        let tobeChangedCell = document.querySelector(`.grid .cell[rid='${id.rId}'][cid='${id.cId}']`);
        tobeChangedCell.style.textAlign = hAlignment;
        let options = alignInput.children;
        for( let i=0; i<options.length; i++){
            options[i].classList.remove("selected");
        }
        e.target.classList.add("selected");
        let cellObject = db[`${id.rId}`][`${id.cId}`];
        cellObject.hAlign=hAlignment;
    }
});

//Colors
backgroundInput.addEventListener("click", function (e){
    backgroundHInput.click();        //dom helping hidden click to trigger
})
backgroundHInput.addEventListener("change", function(e){
    let color = backgroundHInput.value;
    let address = addressInput.value;
    let id =getRidCid(address);
    let tobeChangedCell = document.querySelector(`.grid .cell[rid='${id.rId}'][cid='${id.cId}']`);
    tobeChangedCell.style.backgroundColor = color;
    backgroundInput.style.color = color;
    db[`${id.rId}`][`${id.cId}`].backgroundColor = color;
})

textColorInput.addEventListener("click", function (e){
    textColorHInput.click();        //dom helping hidden click to trigger
})
textColorHInput.addEventListener("change", function(e){
    let color = textColorHInput.value;
    let address = addressInput.value;
    let id =getRidCid(address);
    let tobeChangedCell = document.querySelector(`.grid .cell[rid='${id.rId}'][cid='${id.cId}']`);
    tobeChangedCell.style.color = color;
    textColorInput.style.color = color;
    db[`${id.rId}`][`${id.cId}`].color = color;
})