|
|
|
@ -1,5 +1,6 @@
|
|
|
|
|
import axios from '@nextcloud/axios'
|
|
|
|
|
import { generateOcsUrl } from '@nextcloud/router'
|
|
|
|
|
import { emit } from '@nextcloud/event-bus'
|
|
|
|
|
|
|
|
|
|
export default () => {
|
|
|
|
|
return axios.get(generateOcsUrl('core/navigation', 2) + '/apps?format=json')
|
|
|
|
@ -8,123 +9,7 @@ export default () => {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const addedApps = {}
|
|
|
|
|
const navEntries = data.ocs.data
|
|
|
|
|
const container = document.querySelector('#navigation #apps ul')
|
|
|
|
|
|
|
|
|
|
// remove disabled apps
|
|
|
|
|
navEntries.forEach((entry) => {
|
|
|
|
|
if (!container.querySelector('li[data-id="' + entry.id + '"]')) {
|
|
|
|
|
addedApps[entry.id] = true
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
container.querySelectorAll('li[data-id]').forEach((el, index) => {
|
|
|
|
|
const id = el.dataset.id
|
|
|
|
|
// remove all apps that are not in the correct order
|
|
|
|
|
if (!navEntries[index] || (navEntries[index] && navEntries[index].id !== id)) {
|
|
|
|
|
el.remove()
|
|
|
|
|
document.querySelector(`#appmenu li[data-id=${id}]`).remove()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
let previousEntry = {}
|
|
|
|
|
// add enabled apps to #navigation and #appmenu
|
|
|
|
|
navEntries.forEach((entry) => {
|
|
|
|
|
if (container.querySelector(`li[data-id="${entry.id}"]`) === null) {
|
|
|
|
|
const li = document.createElement('li')
|
|
|
|
|
li.dataset.id = entry.id
|
|
|
|
|
const img = `<svg width="20" height="20" viewBox="0 0 20 20" alt="">
|
|
|
|
|
<defs>
|
|
|
|
|
<filter id="invertMenuMore-${entry.id}"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter>
|
|
|
|
|
<mask id="hole">
|
|
|
|
|
<rect width="100%" height="100%" fill="white"></rect>
|
|
|
|
|
<circle r="4.5" cx="17" cy="3" fill="black"></circle>
|
|
|
|
|
</mask>
|
|
|
|
|
</defs>
|
|
|
|
|
<image x="0" y="0" width="16" height="16" filter="url(#invertMenuMore-${entry.id})" preserveAspectRatio="xMinYMin meet" xlink:href="${entry.icon}" class="app-icon" />
|
|
|
|
|
</svg>`
|
|
|
|
|
|
|
|
|
|
const imgElement = document.createElement('template')
|
|
|
|
|
imgElement.innerHTML = img
|
|
|
|
|
|
|
|
|
|
const a = document.createElement('a')
|
|
|
|
|
a.setAttribute('href', entry.href)
|
|
|
|
|
|
|
|
|
|
const filename = document.createElement('span')
|
|
|
|
|
filename.appendChild(document.createTextNode(entry.name))
|
|
|
|
|
|
|
|
|
|
const loading = document.createElement('div')
|
|
|
|
|
loading.setAttribute('class', 'unread-counter')
|
|
|
|
|
loading.style.display = 'none'
|
|
|
|
|
|
|
|
|
|
// draw attention to the newly added app entry
|
|
|
|
|
// by flashing twice the more apps menu
|
|
|
|
|
if (addedApps[entry.id]) {
|
|
|
|
|
a.classList.add('animated')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a.prepend(imgElement.content.firstChild, loading, filename)
|
|
|
|
|
li.append(a)
|
|
|
|
|
|
|
|
|
|
// add app icon to the navigation
|
|
|
|
|
const previousElement = document.querySelector(`#navigation li[data-id=${previousEntry.id}]`)
|
|
|
|
|
if (previousElement) {
|
|
|
|
|
previousElement.insertAdjacentElement('afterend', li)
|
|
|
|
|
} else {
|
|
|
|
|
document.querySelector('#navigation #apps ul').prepend(li)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (document.getElementById('appmenu').querySelector(`li[data-id="${entry.id}"]`) === null) {
|
|
|
|
|
const li = document.createElement('li')
|
|
|
|
|
li.dataset.id = entry.id
|
|
|
|
|
// Generating svg embedded image (see layout.user.php)
|
|
|
|
|
let img
|
|
|
|
|
if (OCA.Theming && OCA.Theming.inverted) {
|
|
|
|
|
img = `<svg width="20" height="20" viewBox="0 0 20 20" alt="">
|
|
|
|
|
<defs>
|
|
|
|
|
<filter id="invert"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter>
|
|
|
|
|
</defs>
|
|
|
|
|
<image x="0" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="${entry.icon}" class="app-icon" />
|
|
|
|
|
</svg>`
|
|
|
|
|
} else {
|
|
|
|
|
img = `<svg width="20" height="20" viewBox="0 0 20 20" alt="">
|
|
|
|
|
<image x="0" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet" xlink:href="${entry.icon}" class="app-icon" />
|
|
|
|
|
</svg>`
|
|
|
|
|
}
|
|
|
|
|
const imgElement = document.createElement('template')
|
|
|
|
|
imgElement.innerHTML = img
|
|
|
|
|
|
|
|
|
|
const a = document.createElement('a')
|
|
|
|
|
a.setAttribute('href', entry.href)
|
|
|
|
|
|
|
|
|
|
const filename = document.createElement('span')
|
|
|
|
|
filename.appendChild(document.createTextNode(entry.name))
|
|
|
|
|
|
|
|
|
|
const loading = document.createElement('div')
|
|
|
|
|
loading.setAttribute('class', 'icon-loading-dark')
|
|
|
|
|
loading.style.display = 'none'
|
|
|
|
|
|
|
|
|
|
// draw attention to the newly added app entry
|
|
|
|
|
// by flashing twice the more apps menu
|
|
|
|
|
if (addedApps[entry.id]) {
|
|
|
|
|
a.classList.add('animated')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a.prepend(loading, filename, imgElement.content.firstChild)
|
|
|
|
|
li.append(a)
|
|
|
|
|
|
|
|
|
|
// add app icon to the navigation
|
|
|
|
|
const previousElement = document.querySelector('#appmenu li[data-id=' + previousEntry.id + ']')
|
|
|
|
|
if (previousElement) {
|
|
|
|
|
previousElement.insertAdjacentElement('afterend', li)
|
|
|
|
|
} else {
|
|
|
|
|
document.queryElementById('appmenu').prepend(li)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
previousEntry = entry
|
|
|
|
|
})
|
|
|
|
|
emit('nextcloud:app-menu.refresh', { apps: data.ocs.data })
|
|
|
|
|
window.dispatchEvent(new Event('resize'))
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|