remove jquery excepted for sorting categories
This commit is contained in:
parent
7471e93847
commit
80369a39e1
161
src/admin.js
161
src/admin.js
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
let elements = []
|
||||
|
||||
const selector = '#side-menu-message';
|
||||
const selector = '#side-menu-message'
|
||||
|
||||
const userConfig = (name, value, callbacks) => {
|
||||
const url = OC.generateUrl('/apps/side_menu/personalSetting/valueSet')
|
||||
|
|
@ -31,23 +31,29 @@ const appConfig = (name, value, callbacks) => {
|
|||
}
|
||||
|
||||
const saveSettings = (key) => {
|
||||
const element = elements.get(key)
|
||||
const element = elements[key]
|
||||
|
||||
if (!element) {
|
||||
return
|
||||
}
|
||||
|
||||
let value
|
||||
let name
|
||||
|
||||
if (jQuery(element).is('[data-checkbox]')) {
|
||||
name = jQuery(element).attr('data-name')
|
||||
const inputs = jQuery('input[name="' + name + '[]"]:checked')
|
||||
if (element.hasAttribute('data-checkbox')) {
|
||||
name = element.getAttribute('data-name')
|
||||
value = []
|
||||
|
||||
inputs.each((i, v) => {
|
||||
value.push(v.value)
|
||||
})
|
||||
const inputs = document.querySelectorAll('input[name="' + name + '[]"]:checked')
|
||||
|
||||
for (let input of inputs) {
|
||||
value.push(input.value)
|
||||
}
|
||||
|
||||
value = JSON.stringify(value)
|
||||
} else {
|
||||
name = jQuery(element).attr('name')
|
||||
value = jQuery(element).val()
|
||||
name = element.getAttribute('name')
|
||||
value = element.value
|
||||
}
|
||||
|
||||
const size = elements.length
|
||||
|
|
@ -63,8 +69,8 @@ const saveSettings = (key) => {
|
|||
t('side_menu', (key + 1) + '/' + size)
|
||||
)
|
||||
|
||||
if (key < size - 1) {
|
||||
saveSettings(++key)
|
||||
if (key < size) {
|
||||
saveSettings(key + 1)
|
||||
} else {
|
||||
OC.msg.finishedSuccess(selector, t('side_menu', 'Saved'))
|
||||
}
|
||||
|
|
@ -74,7 +80,9 @@ const saveSettings = (key) => {
|
|||
}
|
||||
}
|
||||
|
||||
if (jQuery(element).is('[data-personal]')) {
|
||||
console.log([name, value, element])
|
||||
|
||||
if (element.hasAttribute('data-personal')) {
|
||||
userConfig(name, value, callbacks)
|
||||
} else {
|
||||
appConfig(name, value, callbacks)
|
||||
|
|
@ -82,70 +90,93 @@ const saveSettings = (key) => {
|
|||
}
|
||||
|
||||
const elementToggler = (element) => {
|
||||
jQuery(element).toggle()
|
||||
let display = 'none'
|
||||
|
||||
if (window.getComputedStyle(element).display === 'none') {
|
||||
display = 'block'
|
||||
}
|
||||
|
||||
element.style.display = display
|
||||
}
|
||||
|
||||
jQuery(document).ready(() => {
|
||||
elements = jQuery('.side-menu-setting')
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
elements = document.querySelectorAll('.side-menu-setting')
|
||||
|
||||
jQuery('#side-menu-save').on('click', (event) => {
|
||||
document.querySelector('#side-menu-save').addEventListener('click', (event) => {
|
||||
event.preventDefault()
|
||||
OC.msg.startSaving(selector)
|
||||
|
||||
saveSettings(0)
|
||||
});
|
||||
|
||||
jQuery('.side-menu-display').on('click', (event) => {
|
||||
var target = jQuery(event.target)
|
||||
|
||||
jQuery('.side-menu-display').removeClass('is-active')
|
||||
target.addClass('is-active')
|
||||
|
||||
jQuery('#side-menu-always-displayed').val(target.attr('data-alwaysdiplayed'))
|
||||
jQuery('#side-menu-big-menu').val(target.attr('data-bigmenu'))
|
||||
jQuery('#side-menu-side-with-categories').val(target.attr('data-sidewithcategories'))
|
||||
})
|
||||
|
||||
jQuery('.side-menu-setting-live').on('change', (event) => {
|
||||
var target = jQuery(event.target)
|
||||
var name = target.attr('name')
|
||||
var value = target.val()
|
||||
const displays = document.querySelectorAll('.side-menu-display')
|
||||
|
||||
if ('background-color-opacity' === name) {
|
||||
return $('#side-menu-background-color, #side-menu-background-color-to').trigger('change');
|
||||
} else if ('dark-mode-background-color-opacity' === name) {
|
||||
return $('#side-menu-dark-mode-background-color, #side-menu-dark-mode-background-color-to').trigger('change');
|
||||
}
|
||||
for (let display of displays) {
|
||||
display.addEventListener('click', (event) => {
|
||||
const target = event.target
|
||||
|
||||
if (name === 'opener') {
|
||||
var url = OC.generateUrl(`/apps/side_menu/img/${value}.svg`).replace('/index.php', '')
|
||||
for (let d of displays) {
|
||||
d.classList.toggle('is-active', d === display)
|
||||
}
|
||||
|
||||
value = `url(${url})`;
|
||||
}
|
||||
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')
|
||||
})
|
||||
}
|
||||
|
||||
if (name === 'icon-invert-filter' || name === 'icon-opacity') {
|
||||
value/=100;
|
||||
}
|
||||
for (let item of document.querySelectorAll('.side-menu-setting-live')) {
|
||||
item.addEventListener('change', (event) => {
|
||||
const target = event.target
|
||||
const name = target.getAttribute('name')
|
||||
|
||||
if (['dark-mode-background-color', 'dark-mode-background-color-to'].indexOf(name) > -1) {
|
||||
var opacity = parseInt($('#side-menu-dark-mode-background-color-opacity').val() * 255 / 100);
|
||||
let value = target.value
|
||||
let id = null
|
||||
|
||||
value = [value, opacity.toString(16)].join('');
|
||||
} else if (['background-color', 'background-color-to'].indexOf(name) > -1) {
|
||||
var opacity = parseInt($('#side-menu-background-color-opacity').val() * 255 / 100);
|
||||
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'
|
||||
}
|
||||
|
||||
value = [value, opacity.toString(16)].join('');
|
||||
}
|
||||
if (id) {
|
||||
document.querySelector(id).dispatchEvent(new CustomEvent('change'))
|
||||
|
||||
document.documentElement.style.setProperty('--side-menu-' + name, value)
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
jQuery('.side-menu-toggler').on('click', (event) => {
|
||||
var target = jQuery(event.target)
|
||||
var element = target.attr('data-target')
|
||||
if (name === 'opener') {
|
||||
const url = OC.generateUrl(`/apps/side_menu/img/${value}.svg`).replace('/index.php', '')
|
||||
|
||||
elementToggler(element)
|
||||
})
|
||||
value = `url(${url})`
|
||||
}
|
||||
|
||||
if (name === 'icon-invert-filter' || name === 'icon-opacity') {
|
||||
value/=100
|
||||
}
|
||||
|
||||
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)
|
||||
|
||||
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)
|
||||
})
|
||||
}
|
||||
|
||||
jQuery("#categories-list .side-menu-setting-list").sortable({
|
||||
forcePlaceholderSize: true,
|
||||
|
|
@ -153,13 +184,11 @@ jQuery(document).ready(() => {
|
|||
stop: function (event, ui) {
|
||||
let value = []
|
||||
|
||||
jQuery('#categories-list .side-menu-setting-list-item').each(function() {
|
||||
value.push(jQuery(this).attr('data-id'))
|
||||
});
|
||||
for (let item of document.querySelectorAll('#categories-list .side-menu-setting-list-item')) {
|
||||
value.push(item.getAttribute('data-id'))
|
||||
}
|
||||
|
||||
value = JSON.stringify(value)
|
||||
|
||||
jQuery('input[name="categories-order"]').val(value)
|
||||
document.querySelector('input[name="categories-order"]').value = JSON.stringify(value)
|
||||
}
|
||||
});
|
||||
});
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue