2020-04-09 09:55:45 +02:00
|
|
|
/**
|
|
|
|
* @license GNU AGPL version 3 or any later version
|
|
|
|
*
|
|
|
|
* This program is free software: you can redistribute it and/or modify
|
|
|
|
* it under the terms of the GNU Affero General Public License as
|
|
|
|
* published by the Free Software Foundation, either version 3 of the
|
|
|
|
* License, or (at your option) any later version.
|
|
|
|
*
|
|
|
|
* This program is distributed in the hope that it will be useful,
|
|
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
|
|
* GNU Affero General Public License for more details.
|
|
|
|
*
|
|
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
|
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
*/
|
|
|
|
|
2020-05-11 22:51:27 +02:00
|
|
|
let elements = []
|
2020-04-09 09:55:45 +02:00
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
const selector = '#side-menu-message'
|
2020-04-09 09:55:45 +02:00
|
|
|
|
2020-05-11 22:51:27 +02:00
|
|
|
const userConfig = (name, value, callbacks) => {
|
|
|
|
const url = OC.generateUrl('/apps/side_menu/personalSetting/valueSet')
|
2021-10-31 17:27:08 +01:00
|
|
|
const formData = new FormData()
|
|
|
|
formData.append('name', name)
|
|
|
|
formData.append('value', value)
|
2020-05-11 22:51:27 +02:00
|
|
|
|
2021-10-31 17:27:08 +01:00
|
|
|
fetch(url, {
|
|
|
|
method: 'POST',
|
|
|
|
headers: {
|
|
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
|
|
},
|
|
|
|
body: formData
|
|
|
|
})
|
|
|
|
.then(callbacks.success)
|
|
|
|
.catch(callbacks.error)
|
2020-05-11 22:51:27 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
const appConfig = (name, value, callbacks) => {
|
|
|
|
OCP.AppConfig.setValue('side_menu', name, value, callbacks)
|
|
|
|
}
|
|
|
|
|
2020-04-09 09:55:45 +02:00
|
|
|
const saveSettings = (key) => {
|
2021-10-31 16:55:43 +01:00
|
|
|
const element = elements[key]
|
|
|
|
|
|
|
|
if (!element) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2020-08-12 10:51:49 +02:00
|
|
|
let value
|
|
|
|
let name
|
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
if (element.hasAttribute('data-checkbox')) {
|
|
|
|
name = element.getAttribute('data-name')
|
2020-08-12 10:51:49 +02:00
|
|
|
value = []
|
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
const inputs = document.querySelectorAll('input[name="' + name + '[]"]:checked')
|
|
|
|
|
|
|
|
for (let input of inputs) {
|
|
|
|
value.push(input.value)
|
|
|
|
}
|
2020-08-12 10:51:49 +02:00
|
|
|
|
|
|
|
value = JSON.stringify(value)
|
|
|
|
} else {
|
2021-10-31 16:55:43 +01:00
|
|
|
name = element.getAttribute('name')
|
|
|
|
value = element.value
|
2020-08-12 10:51:49 +02:00
|
|
|
}
|
|
|
|
|
2020-04-09 09:55:45 +02:00
|
|
|
const size = elements.length
|
|
|
|
|
2020-08-13 23:02:28 +02:00
|
|
|
if (name === 'cache') {
|
|
|
|
++value
|
2020-04-09 09:55:45 +02:00
|
|
|
}
|
|
|
|
|
2020-05-11 22:51:27 +02:00
|
|
|
const callbacks = {
|
2020-04-09 09:55:45 +02:00
|
|
|
success: () => {
|
|
|
|
OC.msg.finishedSuccess(
|
|
|
|
selector,
|
2020-04-09 10:33:54 +02:00
|
|
|
t('side_menu', (key + 1) + '/' + size)
|
2020-04-09 09:55:45 +02:00
|
|
|
)
|
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
if (key < size) {
|
|
|
|
saveSettings(key + 1)
|
2020-04-09 09:55:45 +02:00
|
|
|
} else {
|
2020-04-09 10:33:54 +02:00
|
|
|
OC.msg.finishedSuccess(selector, t('side_menu', 'Saved'))
|
2020-04-09 09:55:45 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
error: () => {
|
|
|
|
OC.msg.finishedError(selector, t('side_menu', 'Error while saving "' + element + '"'))
|
|
|
|
}
|
2020-05-11 22:51:27 +02:00
|
|
|
}
|
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
if (element.hasAttribute('data-personal')) {
|
2020-05-11 22:51:27 +02:00
|
|
|
userConfig(name, value, callbacks)
|
|
|
|
} else {
|
|
|
|
appConfig(name, value, callbacks)
|
|
|
|
}
|
2020-04-09 09:55:45 +02:00
|
|
|
}
|
|
|
|
|
2020-09-12 16:10:48 +02:00
|
|
|
const elementToggler = (element) => {
|
2021-10-31 17:02:09 +01:00
|
|
|
let display = 'none'
|
2021-10-31 16:55:43 +01:00
|
|
|
|
|
|
|
if (window.getComputedStyle(element).display === 'none') {
|
2021-10-31 17:02:09 +01:00
|
|
|
display = 'block'
|
2021-10-31 16:55:43 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
element.style.display = display
|
2020-09-12 16:10:48 +02:00
|
|
|
}
|
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
elements = document.querySelectorAll('.side-menu-setting')
|
2020-05-11 22:51:27 +02:00
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
document.querySelector('#side-menu-save').addEventListener('click', (event) => {
|
2020-04-09 14:16:40 +02:00
|
|
|
event.preventDefault()
|
|
|
|
OC.msg.startSaving(selector)
|
2020-04-09 09:55:45 +02:00
|
|
|
|
|
|
|
saveSettings(0)
|
2021-10-31 16:55:43 +01:00
|
|
|
})
|
2020-09-04 15:32:30 +02:00
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
const displays = document.querySelectorAll('.side-menu-display')
|
2020-09-04 16:43:27 +02:00
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
for (let display of displays) {
|
|
|
|
display.addEventListener('click', (event) => {
|
|
|
|
const target = event.target
|
2020-09-04 16:43:27 +02:00
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
for (let d of displays) {
|
|
|
|
d.classList.toggle('is-active', d === display)
|
|
|
|
}
|
2020-09-04 16:43:27 +02:00
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
document.querySelector('#side-menu-always-displayed').value = target.getAttribute('data-alwaysdiplayed')
|
|
|
|
document.querySelector('#side-menu-big-menu').value = target.getAttribute('data-bigmenu')
|
|
|
|
document.querySelector('#side-menu-side-with-categories').value = target.getAttribute('data-sidewithcategories')
|
|
|
|
})
|
|
|
|
}
|
2020-09-04 16:43:27 +02:00
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
for (let item of document.querySelectorAll('.side-menu-setting-live')) {
|
|
|
|
item.addEventListener('change', (event) => {
|
|
|
|
const target = event.target
|
|
|
|
const name = target.getAttribute('name')
|
2021-07-03 20:23:39 +02:00
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
let value = target.value
|
|
|
|
let id = null
|
2020-09-04 16:43:27 +02:00
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
if (name === 'background-color-opacity') {
|
|
|
|
id = '#side-menu-background-color, #side-menu-background-color-to'
|
|
|
|
} else if (name === 'dark-mode-background-color-opacity') {
|
|
|
|
id = '#side-menu-dark-mode-background-color, #side-menu-dark-mode-background-color-to'
|
|
|
|
}
|
2020-09-04 16:43:27 +02:00
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
if (id) {
|
|
|
|
document.querySelector(id).dispatchEvent(new CustomEvent('change'))
|
2020-09-04 15:32:30 +02:00
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
return
|
|
|
|
}
|
2021-07-03 20:23:39 +02:00
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
if (name === 'opener') {
|
|
|
|
const url = OC.generateUrl(`/apps/side_menu/img/${value}.svg`).replace('/index.php', '')
|
2021-07-03 20:23:39 +02:00
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
value = `url(${url})`
|
|
|
|
}
|
2021-07-03 20:23:39 +02:00
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
if (name === 'icon-invert-filter' || name === 'icon-opacity') {
|
|
|
|
value/=100
|
|
|
|
}
|
2020-09-12 16:10:48 +02:00
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
if (['dark-mode-background-color', 'dark-mode-background-color-to'].indexOf(name) > -1) {
|
|
|
|
const opacity = parseInt(document.querySelector('#side-menu-dark-mode-background-color-opacity').value * 255 / 100)
|
2020-09-12 16:10:48 +02:00
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
value = [value, opacity.toString(16)].join('')
|
|
|
|
} else if (['background-color', 'background-color-to'].indexOf(name) > -1) {
|
|
|
|
const opacity = parseInt(document.querySelector('#side-menu-background-color-opacity').value * 255 / 100)
|
|
|
|
|
|
|
|
value = [value, opacity.toString(16)].join('')
|
|
|
|
}
|
|
|
|
|
|
|
|
document.documentElement.style.setProperty('--side-menu-' + name, value)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
for (let toggler of document.querySelectorAll('.side-menu-toggler')) {
|
|
|
|
toggler.addEventListener('click', (event) => {
|
|
|
|
const target = event.target
|
|
|
|
const element = document.querySelector(target.getAttribute('data-target'))
|
|
|
|
|
|
|
|
elementToggler(element)
|
|
|
|
})
|
|
|
|
}
|
2021-02-03 10:14:03 +01:00
|
|
|
|
2021-02-03 10:27:08 +01:00
|
|
|
jQuery("#categories-list .side-menu-setting-list").sortable({
|
2021-10-31 17:02:09 +01:00
|
|
|
forcePlaceholderSize: true,
|
|
|
|
placeholder: 'placeholder',
|
|
|
|
stop: function (event, ui) {
|
2021-02-03 10:14:03 +01:00
|
|
|
let value = []
|
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
for (let item of document.querySelectorAll('#categories-list .side-menu-setting-list-item')) {
|
|
|
|
value.push(item.getAttribute('data-id'))
|
|
|
|
}
|
2021-02-03 10:14:03 +01:00
|
|
|
|
2021-10-31 16:55:43 +01:00
|
|
|
document.querySelector('input[name="categories-order"]').value = JSON.stringify(value)
|
2021-10-31 17:02:09 +01:00
|
|
|
}
|
|
|
|
})
|
2021-10-31 16:55:43 +01:00
|
|
|
})
|