151 lines
4.2 KiB
JavaScript
151 lines
4.2 KiB
JavaScript
var menuCache = null
|
|
|
|
var updateTopMenu = function() {
|
|
var breakpointMobileWidth = 1024
|
|
var menu = jQuery('#appmenu')
|
|
var apps = menu.find('li')
|
|
var minAppsDesktop = 8
|
|
var usePercentualAppMenuLimit = 0.8
|
|
var isMobile = jQuery(window).width() < breakpointMobileWidth
|
|
var lastShownApp = null
|
|
var appShown = []
|
|
var moreApps = jQuery('#more-apps')
|
|
var navigation = jQuery('#navigation')
|
|
var navigationApps = jQuery('#apps ul')
|
|
var appCount = null
|
|
|
|
var currentMenuCache = menu.html() + menu.next().html()
|
|
|
|
if (currentMenuCache === menuCache) {
|
|
return
|
|
}
|
|
|
|
navigationApps.html('')
|
|
|
|
apps.each(function(i, app) {
|
|
var dataId = app.getAttribute('data-id')
|
|
|
|
if (dataId === null) {
|
|
return
|
|
}
|
|
|
|
if (topMenuApps.indexOf(dataId) === -1) {
|
|
app.classList.add('hidden')
|
|
app.classList.add('app-hidden')
|
|
} else {
|
|
app.classList.remove('hidden')
|
|
app.classList.add('app-external-site')
|
|
appShown.push(app)
|
|
navigationApps.append(app.outerHTML)
|
|
}
|
|
|
|
if (targetBlankApps.indexOf(dataId) !== -1) {
|
|
jQuery(app).children('a').attr('target', '_blank');
|
|
}
|
|
})
|
|
|
|
var rightHeaderWidth = jQuery('.header-right').outerWidth()
|
|
var headerWidth = jQuery('header').outerWidth()
|
|
var availableWidth = headerWidth - jQuery('#nextcloud').outerWidth()
|
|
- jQuery('#header .side-menu-opener').outerWidth()
|
|
- (rightHeaderWidth > 230 ? rightHeaderWidth : 230)
|
|
|
|
if (!isMobile) {
|
|
availableWidth = availableWidth * usePercentualAppMenuLimit
|
|
}
|
|
|
|
appCount = Math.floor(availableWidth / jQuery('#appmenu li').width())
|
|
|
|
if (isMobile && appCount > minAppsDesktop) {
|
|
appCount = minAppsDesktop
|
|
} else if (!isMobile && appCount < minAppsDesktop) {
|
|
appCount = minAppsDesktop
|
|
}
|
|
|
|
if (appCount === 0) {
|
|
menu.addClass('hidden')
|
|
}
|
|
|
|
menu.removeClass('hidden')
|
|
menu.css('opacity', 1)
|
|
|
|
if (appShown.length - 1 - appCount >= 1) {
|
|
appCount--
|
|
}
|
|
|
|
moreApps.find('a').removeClass('active')
|
|
|
|
var k = 0
|
|
var notInHeader = 0
|
|
var name
|
|
|
|
jQuery(appShown).each(function(i, app) {
|
|
app = jQuery(app)
|
|
name = app.data('id')
|
|
|
|
if (k < appCount && appCount > 0) {
|
|
app.removeClass('hidden')
|
|
lastShownApp = app
|
|
|
|
jQuery('#apps li[data-id=' + name + '].app-external-site').addClass('in-header')
|
|
} else {
|
|
app.addClass('hidden')
|
|
notInHeader++
|
|
|
|
jQuery('#apps li[data-id=' + name + '].app-external-site').removeClass('in-header')
|
|
|
|
if (appCount > 0 && app.children('a').hasClass('active')) {
|
|
lastShownApp.addClass('hidden')
|
|
app.removeClass('hidden')
|
|
notInHeader++
|
|
|
|
jQuery('#apps li[data-id=' + name + '].app-external-site')
|
|
.removeClass('in-header')
|
|
.addClass('in-header')
|
|
}
|
|
}
|
|
|
|
k++
|
|
})
|
|
|
|
jQuery('#apps li.app-external-site').each(function(i, app) {
|
|
app = jQuery(app)
|
|
var appId = app.attr('data-id')
|
|
|
|
if (app.hasClass('in-header')) {
|
|
app.find('svg').find('defs').remove()
|
|
} else {
|
|
var svg = app.find('svg');
|
|
|
|
if (svg.find('defs').length > 0) {
|
|
return;
|
|
}
|
|
|
|
var defs = `
|
|
<defs>
|
|
<filter id="invertMenuMore-${appId}">
|
|
<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>
|
|
</defs>`
|
|
|
|
svg.prepend(defs)
|
|
svg.find('image').attr('filter', `url(#invertMenuMore-${appId})`)
|
|
|
|
var html = svg.get(0).innerHTML.replace(/fecolormatrix/g, 'feColorMatrix');
|
|
|
|
svg.html(html)
|
|
}
|
|
})
|
|
|
|
if (notInHeader === 0) {
|
|
moreApps.hide()
|
|
navigation.hide()
|
|
} else {
|
|
moreApps.show()
|
|
}
|
|
|
|
menuCache = menu.html() + menu.next().html()
|
|
}
|
|
|
|
setInterval(updateTopMenu, 50)
|