refactor of menus
begin work on settings
This commit is contained in:
Simon Vieille
+13
-256
@@ -8,268 +8,25 @@
|
||||
*
|
||||
* 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
|
||||
* 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/>.
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import './scss/admin.scss'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import AdminCategoriesCustom from './components/AdminCategoriesCustom.vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import { waitContainer } from './lib/dom.js'
|
||||
|
||||
let elements = []
|
||||
import AdminSettings from './pages/AdminSettings.vue'
|
||||
|
||||
const selector = '#side-menu-message'
|
||||
|
||||
const userConfig = (name, value, callbacks) => {
|
||||
const url = OC.generateUrl('/apps/side_menu/personalSetting/valueSet')
|
||||
const formData = []
|
||||
|
||||
formData.push('name=' + encodeURIComponent(name))
|
||||
formData.push('value=' + encodeURIComponent(value))
|
||||
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: formData.join('&'),
|
||||
})
|
||||
.then(callbacks.success)
|
||||
.catch(callbacks.error)
|
||||
}
|
||||
|
||||
const appConfig = (name, value, callbacks) => {
|
||||
OCP.AppConfig.setValue('side_menu', name, value, callbacks)
|
||||
}
|
||||
|
||||
const saveSettings = (key) => {
|
||||
const element = elements[key]
|
||||
|
||||
if (!element) {
|
||||
return
|
||||
}
|
||||
|
||||
let value
|
||||
let name
|
||||
|
||||
if (element.hasAttribute('data-checkbox')) {
|
||||
name = element.getAttribute('data-name')
|
||||
value = []
|
||||
|
||||
const inputs = document.querySelectorAll('input[name="' + name + '[]"]:checked')
|
||||
|
||||
for (let input of inputs) {
|
||||
value.push(input.value)
|
||||
}
|
||||
|
||||
value = JSON.stringify(value)
|
||||
} else {
|
||||
name = element.getAttribute('name')
|
||||
value = element.value
|
||||
}
|
||||
|
||||
const size = elements.length
|
||||
|
||||
if (name === 'cache') {
|
||||
++value
|
||||
}
|
||||
|
||||
const progress = document.querySelector('#side-menu-save-progress')
|
||||
|
||||
progress.style.width = '40px'
|
||||
progress.style.marginLeft = '5px'
|
||||
|
||||
const callbacks = {
|
||||
success: () => {
|
||||
const percent = parseInt(((key + 1) * 100) / size)
|
||||
|
||||
progress.setAttribute('value', percent)
|
||||
|
||||
if (key < size - 1) {
|
||||
saveSettings(key + 1)
|
||||
} else {
|
||||
location.reload()
|
||||
}
|
||||
},
|
||||
error: () => {
|
||||
OC.msg.finishedError(selector, t('side_menu', 'Error while saving "' + element + '"'))
|
||||
},
|
||||
}
|
||||
|
||||
if (element.hasAttribute('data-personal')) {
|
||||
userConfig(name, value, callbacks)
|
||||
} else {
|
||||
appConfig(name, value, callbacks)
|
||||
}
|
||||
}
|
||||
|
||||
const elementToggler = (element) => {
|
||||
let display = 'none'
|
||||
|
||||
if (window.getComputedStyle(element).display === 'none') {
|
||||
display = 'block'
|
||||
}
|
||||
|
||||
element.style.display = display
|
||||
}
|
||||
|
||||
const updateAppsCategoriesCustom = () => {
|
||||
let values = {}
|
||||
|
||||
for (let item of document.querySelectorAll('.apps-categories-custom')) {
|
||||
let app = item.getAttribute('data-app')
|
||||
let value = item.value
|
||||
|
||||
if (value) {
|
||||
values[app] = value
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector('#apps-categories-custom').value = JSON.stringify(values)
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
$('*[data-toggle="tooltip"]').tooltip()
|
||||
|
||||
if (document.querySelector('#side-menu-categories-custom')) {
|
||||
const app = createApp(AdminCategoriesCustom)
|
||||
app.mount('#side-menu-categories-custom')
|
||||
}
|
||||
|
||||
elements = document.querySelectorAll('.side-menu-setting')
|
||||
|
||||
document.querySelector('#side-menu-save').addEventListener('click', (event) => {
|
||||
event.preventDefault()
|
||||
OC.msg.startSaving(selector)
|
||||
|
||||
saveSettings(0)
|
||||
})
|
||||
|
||||
const resets = document.querySelectorAll('.btn-reset')
|
||||
|
||||
for (let btn of resets) {
|
||||
btn.addEventListener('click', (event) => {
|
||||
const target = event.target
|
||||
const values = JSON.parse(target.getAttribute('data-reset'))
|
||||
|
||||
target.classList.toggle('btn-reset--progress', true)
|
||||
|
||||
for (let i in values) {
|
||||
document.querySelector(`#${i}`).value = values[i]
|
||||
}
|
||||
|
||||
window.setTimeout(() => {
|
||||
target.classList.toggle('btn-reset--progress', false)
|
||||
}, 800)
|
||||
})
|
||||
}
|
||||
|
||||
const displays = document.querySelectorAll('.side-menu-display')
|
||||
|
||||
for (let display of displays) {
|
||||
display.addEventListener('click', (event) => {
|
||||
const target = event.target
|
||||
|
||||
for (let d of displays) {
|
||||
d.classList.toggle('is-active', d === display)
|
||||
}
|
||||
|
||||
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')
|
||||
})
|
||||
}
|
||||
|
||||
for (let item of document.querySelectorAll('.apps-categories-custom')) {
|
||||
item.addEventListener('change', (event) => {
|
||||
updateAppsCategoriesCustom()
|
||||
})
|
||||
}
|
||||
|
||||
for (let item of document.querySelectorAll('.side-menu-setting-live')) {
|
||||
item.addEventListener('change', (event) => {
|
||||
const target = event.target
|
||||
const name = target.getAttribute('name')
|
||||
|
||||
let value = target.value
|
||||
let id = null
|
||||
|
||||
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'
|
||||
}
|
||||
|
||||
if (id) {
|
||||
document.querySelector(id).dispatchEvent(new CustomEvent('change'))
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if (name === 'opener') {
|
||||
const url = OC.generateUrl(`/apps/side_menu/img/${value}.svg`).replace('/index.php', '')
|
||||
|
||||
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)
|
||||
})
|
||||
}
|
||||
|
||||
sortable('#categories-list .side-menu-setting-list', {
|
||||
placeholderClass: 'side-menu-setting-list-drop',
|
||||
})
|
||||
|
||||
try {
|
||||
sortable('#categories-list .side-menu-setting-list')[0].addEventListener('sortstop', (e) => {
|
||||
let value = []
|
||||
|
||||
for (let item of document.querySelectorAll('#categories-list .side-menu-setting-list-item')) {
|
||||
value.push(item.getAttribute('data-id'))
|
||||
}
|
||||
|
||||
document.querySelector('input[name="categories-order"]').value = JSON.stringify(value)
|
||||
})
|
||||
} catch (e) {}
|
||||
|
||||
sortable('#apps-order-list .side-menu-setting-list', {
|
||||
placeholderClass: 'side-menu-setting-list-drop',
|
||||
})
|
||||
|
||||
try {
|
||||
sortable('#apps-order-list .side-menu-setting-list')[0].addEventListener('sortstop', (e) => {
|
||||
let value = []
|
||||
|
||||
for (let item of document.querySelectorAll('#apps-order-list .side-menu-setting-list-item')) {
|
||||
value.push(item.getAttribute('data-id'))
|
||||
}
|
||||
|
||||
document.querySelector('input[name="apps-order"]').value = JSON.stringify(value)
|
||||
})
|
||||
} catch (e) {}
|
||||
waitContainer('#side-menu-admin-settings').then((selector) => {
|
||||
const pinia = createPinia()
|
||||
const app = createApp(AdminSettings)
|
||||
app.use(pinia)
|
||||
app.mixin({ methods: { t, n }})
|
||||
app.mount(selector)
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user