Text-Editor/menu.js at main · Pranav-183/Text-Editor · 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
const spans = document.querySelectorAll('.clickSpan')
const lists = document.querySelectorAll('.menuList')
const save = document.querySelector('.save').parentElement
const autoSave = document.querySelector('.autoSave').parentElement
const done = document.querySelector('.done')
const options = JSON.parse(localStorage.getItem('options')) || {}

options.autosave ? done.innerText = 'done' : done.innerText = 'close'
if (options.autosave) {
   save.classList.add('disabled')
}

// Functions

const getStyle = (element, property) => {
   return getComputedStyle(element).getPropertyValue(property)
}

const setStyle = (element, property, value) => {
   element.style.setProperty(property, value)
}

const saveOptionsFunc = () => {
   localStorage.setItem('options', JSON.stringify(options))
}

const checkForOtherMenuClick = (i, before) => {
   const check0 = before == 0 && lists[before].classList.contains('expand')
   const check1 = before == 1 && lists[before].classList.contains('expand')
   const check2 = before == 2 && lists[before].classList.contains('expand')

   const both = () => {
      lists[before].classList.remove('expand')
      spans[before].style.backgroundColor = 'rgb(177, 182, 250)'
   }

   {// if (i == 0) {
      //    if (check1 || check2 || check3) {
      //       both()
      //    }
      // } else if (i == 1) {
      //    if (check0 || check2 || check3) {
      //       both()
      //    }
      // } else if (i == 2) {
      //    if (check0 || check1 || check3) {
      //       both()
      //    }
      // } else if (i == 3) {
      //    if (check0 || check1 || check2) {
      //       both()
      //    }
      // }
   }

   if ((i == 0 && (check1 || check2)) || (i == 1 && (check0 || check2)) || (i == 2 && (check0 || check1))) {
      both()
   }
}

const menuExpand = (i) => {
   let list = lists[i]
   if (!list.classList.contains('expand')) {
      list.classList.add('expand')
      spans[i].style.backgroundColor = 'rgb(159, 164, 252)'
      checkForOtherMenuClick(i, options.currentMenu)
      options.currentMenu = i
      options.activeMenu = true
   } else {
      list.classList.remove('expand')
      spans[i].style.backgroundColor = null
      list.classList.add('contract')
      setTimeout(() => {
         list.classList.remove('contract')
      }, 200)
      options.currentMenu = null
      options.activeMenu = false
   }
}

const closeShortcut = () => {
   allTabs.children[user.recent].classList.add('animateContract')
}

const saveButtonFunc = () => {
   user.data[user.recent].text = area.innerText
   saveFunc()
   console.log('yess')
}

const autoSaveToggler = () => {
   let sign = autoSave.children[0].children[0]
   if (sign.innerText === 'done') {
      sign.innerText = 'close'
      options.autosave = false
      save.addEventListener('click', saveButtonFunc)
      save.classList.remove('disabled')
   } else if (sign.innerText === 'close') {
      sign.innerText = 'done'
      options.autosave = true
      save.removeEventListener('click', saveButtonFunc)
      save.classList.add('disabled')
   }
   saveOptionsFunc()
}

spans.forEach((span, i) => {
   span.addEventListener('click', () => {
      menuExpand(i)
   })
})

save.addEventListener('click', saveButtonFunc)
autoSave.addEventListener('click', autoSaveToggler)