2020-04-17 13:57:23 +02:00
|
|
|
(function() {
|
|
|
|
var sideMenuContainer = $('<div id="side-menu-container">')
|
|
|
|
var sideMenuOpener = $('<button class="side-menu-opener"></button>')
|
|
|
|
var sideMenu = $('<div id="side-menu">')
|
|
|
|
var body = $('body')
|
|
|
|
var isTouchDevice = window.matchMedia("(pointer: coarse)").matches
|
|
|
|
|
2020-05-09 14:30:24 +02:00
|
|
|
<?php if ($_['force-light-icon']): ?>
|
|
|
|
sideMenuContainer.attr('data-forcelighticon', '1')
|
|
|
|
<?php endif; ?>
|
|
|
|
|
2020-04-26 21:36:54 +02:00
|
|
|
body.on('side-menu.apps', function(e, apps) {
|
2020-04-29 09:03:03 +02:00
|
|
|
<?php if ($_['hide-when-no-apps']): ?>
|
|
|
|
sideMenu = $('#side-menu')
|
2020-04-26 21:36:54 +02:00
|
|
|
|
2020-04-29 09:03:03 +02:00
|
|
|
if (apps.length === 0) {
|
|
|
|
sideMenu.removeClass('open')
|
|
|
|
sideMenuOpener.addClass('hide')
|
|
|
|
} else {
|
|
|
|
sideMenuOpener.removeClass('hide')
|
|
|
|
}
|
|
|
|
<?php endif; ?>
|
2020-04-26 21:36:54 +02:00
|
|
|
})
|
|
|
|
|
2020-04-17 13:57:23 +02:00
|
|
|
body.on('side-menu.ready', function() {
|
|
|
|
sideMenu = $('#side-menu')
|
|
|
|
|
|
|
|
var headerMenuOpener = $('#header .side-menu-opener')
|
|
|
|
var sideMenuOpener = $('#side-menu .side-menu-opener')
|
|
|
|
|
2020-05-14 15:30:34 +02:00
|
|
|
sideMenuFocus = function() {
|
|
|
|
var a = sideMenu.find('.side-menu-app.active a')
|
|
|
|
|
|
|
|
if (a.length === 0) {
|
|
|
|
a = sideMenu.find('.side-menu-app:first-child a')
|
|
|
|
}
|
|
|
|
|
|
|
|
if (a.length > 0) {
|
|
|
|
a.focus()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-04-17 13:57:23 +02:00
|
|
|
<?php if ($_['opener-hover']): ?>
|
|
|
|
var sideMenuMouseLeave = function() {
|
|
|
|
sideMenu
|
|
|
|
.removeClass('open')
|
|
|
|
.off('mouseleave', sideMenuMouseLeave)
|
|
|
|
}
|
|
|
|
|
|
|
|
var sideMenuMouseEnter = function() {
|
|
|
|
sideMenu.on('mouseleave', sideMenuMouseLeave)
|
|
|
|
}
|
|
|
|
|
|
|
|
var sideMenuOpenerMouseEnter = function() {
|
|
|
|
sideMenu
|
|
|
|
.addClass('open')
|
|
|
|
.on('mouseenter', sideMenuMouseEnter)
|
2020-05-14 15:30:34 +02:00
|
|
|
|
|
|
|
sideMenuFocus()
|
2020-04-17 13:57:23 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
if (!isTouchDevice) {
|
|
|
|
headerMenuOpener.on('mouseenter', sideMenuOpenerMouseEnter)
|
|
|
|
|
|
|
|
sideMenu.addClass('hide-opener')
|
|
|
|
}
|
|
|
|
<?php endif; ?>
|
|
|
|
|
|
|
|
headerMenuOpener.on('click', function() {
|
2020-05-14 15:30:34 +02:00
|
|
|
sideMenu.addClass('open')
|
|
|
|
sideMenu.find('.side-menu-app.active a').focus()
|
2020-04-17 13:57:23 +02:00
|
|
|
})
|
|
|
|
|
|
|
|
sideMenuOpener.on('click', function() {
|
2020-05-14 15:30:34 +02:00
|
|
|
sideMenu.removeClass('open')
|
|
|
|
})
|
|
|
|
|
|
|
|
$(document).keydown(function(e) {
|
|
|
|
var key = e.key || e.keyCode
|
|
|
|
|
|
|
|
if ((key === 'o' || key === 79) && e.ctrlKey === true) {
|
|
|
|
e.preventDefault()
|
|
|
|
|
|
|
|
sideMenu.toggleClass('open')
|
|
|
|
sideMenuFocus()
|
|
|
|
}
|
2020-04-17 13:57:23 +02:00
|
|
|
})
|
|
|
|
})
|
2020-04-29 09:03:03 +02:00
|
|
|
|
|
|
|
body.append(sideMenuContainer)
|
|
|
|
sideMenuContainer.append(sideMenu)
|
|
|
|
|
2020-05-19 15:17:54 +02:00
|
|
|
<?php if ($_['loader-enabled'] === true): ?>
|
|
|
|
var pageLoader = $('<div id="side-menu-loader">')
|
|
|
|
var pageLoaderBar = $('<div id="side-menu-loader-bar">')
|
|
|
|
|
|
|
|
body.append(pageLoader)
|
|
|
|
pageLoader.append(pageLoaderBar)
|
|
|
|
|
|
|
|
var pageLoaderValue = 0
|
|
|
|
|
|
|
|
$(window).on('beforeunload', function() {
|
|
|
|
setInterval(function() {
|
|
|
|
pageLoaderBar.width(pageLoaderValue.toString() + '%')
|
|
|
|
|
|
|
|
pageLoaderValue = Math.min(pageLoaderValue + .2, 100)
|
|
|
|
}, 25)
|
|
|
|
})
|
|
|
|
<?php endif; ?>
|
|
|
|
|
2020-04-29 09:03:03 +02:00
|
|
|
<?php if ($_['opener-position'] === 'before'): ?>
|
|
|
|
sideMenuOpener.insertBefore('#nextcloud')
|
|
|
|
<?php else: ?>
|
|
|
|
sideMenuOpener.insertAfter('#nextcloud')
|
|
|
|
<?php endif; ?>
|
2020-05-12 19:45:46 +02:00
|
|
|
|
|
|
|
<?php if ($_['external-sites-in-top-menu']): ?>
|
|
|
|
sideMenuContainer.attr('data-externalsitesintopmenu', '1')
|
|
|
|
|
2020-05-13 12:25:11 +02:00
|
|
|
var menuCache = null
|
|
|
|
|
2020-05-12 19:45:46 +02:00
|
|
|
var updateTopMenu = function() {
|
|
|
|
var breakpointMobileWidth = 1024
|
|
|
|
var menu = $('#appmenu')
|
|
|
|
var apps = menu.find('li')
|
|
|
|
var minAppsDesktop = 8
|
|
|
|
var usePercentualAppMenuLimit = 0.9
|
|
|
|
var isMobile = $(window).width() < breakpointMobileWidth
|
|
|
|
var lastShownApp = null
|
|
|
|
var appShown = []
|
|
|
|
var moreApps = $('#more-apps')
|
|
|
|
var navigation = $('#navigation')
|
|
|
|
var navigationApps = $('#apps ul')
|
|
|
|
var appCount = null
|
|
|
|
|
2020-05-13 12:25:11 +02:00
|
|
|
var currentMenuCache = menu.html() + menu.next().html()
|
|
|
|
|
|
|
|
if (currentMenuCache === menuCache) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2020-05-12 19:45:46 +02:00
|
|
|
navigationApps.html('')
|
|
|
|
|
|
|
|
apps.each(function(i, app) {
|
|
|
|
var dataId = app.getAttribute('data-id')
|
|
|
|
|
|
|
|
if (dataId === null) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
if (dataId.indexOf('external_index') === -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)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
var rightHeaderWidth = $('.header-right').outerWidth()
|
|
|
|
var headerWidth = $('header').outerWidth()
|
|
|
|
var availableWidth = headerWidth - $('#nextcloud').outerWidth() - $('#header .side-menu-opener').outerWidth() - (rightHeaderWidth > 210 ? rightHeaderWidth : 210)
|
|
|
|
|
|
|
|
if (!isMobile) {
|
|
|
|
availableWidth = availableWidth * usePercentualAppMenuLimit
|
|
|
|
}
|
|
|
|
|
|
|
|
if (isMobile && appCount > minAppsDesktop) {
|
|
|
|
appCount = minAppsDesktop
|
|
|
|
} else if (!isMobile && appCount < minAppsDesktop) {
|
|
|
|
appCount = minAppsDesktop
|
|
|
|
} else {
|
|
|
|
appCount = Math.floor(availableWidth / $('#appmenu li').width())
|
|
|
|
}
|
|
|
|
|
|
|
|
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
|
|
|
|
|
|
|
|
$(appShown).each(function(i, app) {
|
|
|
|
app = $(app)
|
|
|
|
name = app.data('id')
|
|
|
|
|
|
|
|
if (k < appCount && appCount > 0) {
|
|
|
|
app.removeClass('hidden')
|
|
|
|
lastShownApp = app
|
|
|
|
|
|
|
|
$('#apps li[data-id=' + name + '].app-external-site').addClass('in-header')
|
|
|
|
} else {
|
|
|
|
app.addClass('hidden')
|
|
|
|
notInHeader++
|
|
|
|
|
|
|
|
$('#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++
|
|
|
|
|
|
|
|
$('#apps li[data-id=' + name + '].app-external-site')
|
|
|
|
.removeClass('in-header')
|
|
|
|
.addClass('in-header')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
k++
|
|
|
|
})
|
|
|
|
|
|
|
|
if (notInHeader === 0) {
|
|
|
|
moreApps.hide()
|
|
|
|
navigation.hide()
|
|
|
|
} else {
|
|
|
|
moreApps.show()
|
|
|
|
}
|
2020-05-13 12:25:11 +02:00
|
|
|
|
|
|
|
menuCache = menu.html() + menu.next().html()
|
2020-05-12 19:45:46 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
setInterval(updateTopMenu, 50)
|
|
|
|
<?php endif; ?>
|
2020-04-17 13:57:23 +02:00
|
|
|
})();
|