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 = []
|
let elements = []
|
||||||
|
|
||||||
const selector = '#side-menu-message';
|
const selector = '#side-menu-message'
|
||||||
|
|
||||||
const userConfig = (name, value, callbacks) => {
|
const userConfig = (name, value, callbacks) => {
|
||||||
const url = OC.generateUrl('/apps/side_menu/personalSetting/valueSet')
|
const url = OC.generateUrl('/apps/side_menu/personalSetting/valueSet')
|
||||||
|
@ -31,23 +31,29 @@ const appConfig = (name, value, callbacks) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const saveSettings = (key) => {
|
const saveSettings = (key) => {
|
||||||
const element = elements.get(key)
|
const element = elements[key]
|
||||||
|
|
||||||
|
if (!element) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
let value
|
let value
|
||||||
let name
|
let name
|
||||||
|
|
||||||
if (jQuery(element).is('[data-checkbox]')) {
|
if (element.hasAttribute('data-checkbox')) {
|
||||||
name = jQuery(element).attr('data-name')
|
name = element.getAttribute('data-name')
|
||||||
const inputs = jQuery('input[name="' + name + '[]"]:checked')
|
|
||||||
value = []
|
value = []
|
||||||
|
|
||||||
inputs.each((i, v) => {
|
const inputs = document.querySelectorAll('input[name="' + name + '[]"]:checked')
|
||||||
value.push(v.value)
|
|
||||||
})
|
for (let input of inputs) {
|
||||||
|
value.push(input.value)
|
||||||
|
}
|
||||||
|
|
||||||
value = JSON.stringify(value)
|
value = JSON.stringify(value)
|
||||||
} else {
|
} else {
|
||||||
name = jQuery(element).attr('name')
|
name = element.getAttribute('name')
|
||||||
value = jQuery(element).val()
|
value = element.value
|
||||||
}
|
}
|
||||||
|
|
||||||
const size = elements.length
|
const size = elements.length
|
||||||
|
@ -63,8 +69,8 @@ const saveSettings = (key) => {
|
||||||
t('side_menu', (key + 1) + '/' + size)
|
t('side_menu', (key + 1) + '/' + size)
|
||||||
)
|
)
|
||||||
|
|
||||||
if (key < size - 1) {
|
if (key < size) {
|
||||||
saveSettings(++key)
|
saveSettings(key + 1)
|
||||||
} else {
|
} else {
|
||||||
OC.msg.finishedSuccess(selector, t('side_menu', 'Saved'))
|
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)
|
userConfig(name, value, callbacks)
|
||||||
} else {
|
} else {
|
||||||
appConfig(name, value, callbacks)
|
appConfig(name, value, callbacks)
|
||||||
|
@ -82,70 +90,93 @@ const saveSettings = (key) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const elementToggler = (element) => {
|
const elementToggler = (element) => {
|
||||||
jQuery(element).toggle()
|
let display = 'none'
|
||||||
|
|
||||||
|
if (window.getComputedStyle(element).display === 'none') {
|
||||||
|
display = 'block'
|
||||||
|
}
|
||||||
|
|
||||||
|
element.style.display = display
|
||||||
}
|
}
|
||||||
|
|
||||||
jQuery(document).ready(() => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
elements = jQuery('.side-menu-setting')
|
elements = document.querySelectorAll('.side-menu-setting')
|
||||||
|
|
||||||
jQuery('#side-menu-save').on('click', (event) => {
|
document.querySelector('#side-menu-save').addEventListener('click', (event) => {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
OC.msg.startSaving(selector)
|
OC.msg.startSaving(selector)
|
||||||
|
|
||||||
saveSettings(0)
|
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) => {
|
const displays = document.querySelectorAll('.side-menu-display')
|
||||||
var target = jQuery(event.target)
|
|
||||||
var name = target.attr('name')
|
|
||||||
var value = target.val()
|
|
||||||
|
|
||||||
if ('background-color-opacity' === name) {
|
for (let display of displays) {
|
||||||
return $('#side-menu-background-color, #side-menu-background-color-to').trigger('change');
|
display.addEventListener('click', (event) => {
|
||||||
} else if ('dark-mode-background-color-opacity' === name) {
|
const target = event.target
|
||||||
return $('#side-menu-dark-mode-background-color, #side-menu-dark-mode-background-color-to').trigger('change');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (name === 'opener') {
|
for (let d of displays) {
|
||||||
var url = OC.generateUrl(`/apps/side_menu/img/${value}.svg`).replace('/index.php', '')
|
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') {
|
for (let item of document.querySelectorAll('.side-menu-setting-live')) {
|
||||||
value/=100;
|
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) {
|
let value = target.value
|
||||||
var opacity = parseInt($('#side-menu-dark-mode-background-color-opacity').val() * 255 / 100);
|
let id = null
|
||||||
|
|
||||||
value = [value, opacity.toString(16)].join('');
|
if (name === 'background-color-opacity') {
|
||||||
} else if (['background-color', 'background-color-to'].indexOf(name) > -1) {
|
id = '#side-menu-background-color, #side-menu-background-color-to'
|
||||||
var opacity = parseInt($('#side-menu-background-color-opacity').val() * 255 / 100);
|
} 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) => {
|
if (name === 'opener') {
|
||||||
var target = jQuery(event.target)
|
const url = OC.generateUrl(`/apps/side_menu/img/${value}.svg`).replace('/index.php', '')
|
||||||
var element = target.attr('data-target')
|
|
||||||
|
|
||||||
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({
|
jQuery("#categories-list .side-menu-setting-list").sortable({
|
||||||
forcePlaceholderSize: true,
|
forcePlaceholderSize: true,
|
||||||
|
@ -153,13 +184,11 @@ jQuery(document).ready(() => {
|
||||||
stop: function (event, ui) {
|
stop: function (event, ui) {
|
||||||
let value = []
|
let value = []
|
||||||
|
|
||||||
jQuery('#categories-list .side-menu-setting-list-item').each(function() {
|
for (let item of document.querySelectorAll('#categories-list .side-menu-setting-list-item')) {
|
||||||
value.push(jQuery(this).attr('data-id'))
|
value.push(item.getAttribute('data-id'))
|
||||||
});
|
}
|
||||||
|
|
||||||
value = JSON.stringify(value)
|
document.querySelector('input[name="categories-order"]').value = JSON.stringify(value)
|
||||||
|
|
||||||
jQuery('input[name="categories-order"]').val(value)
|
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
Loading…
Reference in a new issue