Changeset View
Changeset View
Standalone View
Standalone View
swh/web/assets/src/bundles/webapp/webapp-utils.js
import objectFitImages from 'object-fit-images'; | import objectFitImages from 'object-fit-images'; | ||||
import {Layout} from 'admin-lte'; | import {Layout} from 'admin-lte'; | ||||
import {selectText} from 'utils/functions'; | import {selectText} from 'utils/functions'; | ||||
import {BREAKPOINT_MD} from 'utils/constants'; | |||||
let collapseSidebar = false; | let collapseSidebar = false; | ||||
let previousSidebarState = localStorage.getItem('swh-sidebar-collapsed'); | let previousSidebarState = localStorage.getItem('swh-sidebar-collapsed'); | ||||
if (previousSidebarState !== undefined) { | if (previousSidebarState !== undefined) { | ||||
collapseSidebar = JSON.parse(previousSidebarState); | collapseSidebar = JSON.parse(previousSidebarState); | ||||
} | } | ||||
// adapt implementation of fixLayoutHeight from admin-lte | // adapt implementation of fixLayoutHeight from admin-lte | ||||
Layout.prototype.fixLayoutHeight = () => { | Layout.prototype.fixLayoutHeight = () => { | ||||
let heights = { | let heights = { | ||||
window: $(window).height(), | window: $(window).height(), | ||||
header: $('.main-header').outerHeight(), | header: $('.main-header').outerHeight(), | ||||
footer: $('.footer').outerHeight(), | footer: $('.footer').outerHeight(), | ||||
sidebar: $('.main-sidebar').height(), | sidebar: $('.main-sidebar').height(), | ||||
topbar: $('.swh-top-bar').height() | topbar: $('.swh-top-bar').height() | ||||
}; | }; | ||||
let offset = 10; | let offset = 10; | ||||
$('.content-wrapper').css('min-height', heights.window - heights.topbar - heights.header - heights.footer - offset); | $('.content-wrapper').css('min-height', heights.window - heights.topbar - heights.header - heights.footer - offset); | ||||
$('.main-sidebar').css('min-height', heights.window - heights.topbar - heights.header - heights.footer - offset); | $('.main-sidebar').css('min-height', heights.window - heights.topbar - heights.header - heights.footer - offset); | ||||
}; | }; | ||||
$(document).on('DOMContentLoaded', () => { | $(document).on('DOMContentLoaded', () => { | ||||
// set state to collapsed on smaller devices | |||||
if ($(window).width() < BREAKPOINT_MD) { | |||||
collapseSidebar = true; | |||||
anlambert: You should move this after line 6. Indeed, we backup the state of the sidebar in the… | |||||
Done Inline ActionsBut if the device is sm or xs we don't restore state from local storage. (Sidebar is always collapsed when you open any page irrespective of previous state) kalpitk: But if the device is sm or xs we don't restore state from local storage. (Sidebar is always… | |||||
Not Done Inline ActionsIndeed, you are right. So this can be landed as is. anlambert: Indeed, you are right. So this can be landed as is. | |||||
} | |||||
// restore previous sidebar state (collapsed/expanded) | // restore previous sidebar state (collapsed/expanded) | ||||
if (collapseSidebar) { | if (collapseSidebar) { | ||||
// hack to avoid animated transition for collapsing sidebar | // hack to avoid animated transition for collapsing sidebar | ||||
// when loading a page | // when loading a page | ||||
let sidebarTransition = $('.main-sidebar, .main-sidebar:before').css('transition'); | let sidebarTransition = $('.main-sidebar, .main-sidebar:before').css('transition'); | ||||
let sidebarEltsTransition = $('.sidebar .nav-link p, .main-sidebar .brand-text, .sidebar .user-panel .info').css('transition'); | let sidebarEltsTransition = $('.sidebar .nav-link p, .main-sidebar .brand-text, .sidebar .user-panel .info').css('transition'); | ||||
$('.main-sidebar, .main-sidebar:before').css('transition', 'none'); | $('.main-sidebar, .main-sidebar:before').css('transition', 'none'); | ||||
$('.sidebar .nav-link p, .main-sidebar .brand-text, .sidebar .user-panel .info').css('transition', 'none'); | $('.sidebar .nav-link p, .main-sidebar .brand-text, .sidebar .user-panel .info').css('transition', 'none'); | ||||
$('body').addClass('sidebar-collapse'); | $('body').addClass('sidebar-collapse'); | ||||
$('.swh-words-logo-swh').css('visibility', 'visible'); | $('.swh-words-logo-swh').css('visibility', 'visible'); | ||||
// restore transitions for user navigation | // restore transitions for user navigation | ||||
setTimeout(() => { | setTimeout(() => { | ||||
$('.main-sidebar, .main-sidebar:before').css('transition', sidebarTransition); | $('.main-sidebar, .main-sidebar:before').css('transition', sidebarTransition); | ||||
$('.sidebar .nav-link p, .main-sidebar .brand-text, .sidebar .user-panel .info').css('transition', sidebarEltsTransition); | $('.sidebar .nav-link p, .main-sidebar .brand-text, .sidebar .user-panel .info').css('transition', sidebarEltsTransition); | ||||
}); | }); | ||||
} | } | ||||
}); | }); | ||||
$(document).on('collapsed.lte.pushmenu', event => { | $(document).on('collapsed.lte.pushmenu', event => { | ||||
if ($('body').width() > 980) { | if ($('body').width() >= BREAKPOINT_MD) { | ||||
$('.swh-words-logo-swh').css('visibility', 'visible'); | $('.swh-words-logo-swh').css('visibility', 'visible'); | ||||
} | } | ||||
}); | }); | ||||
$(document).on('shown.lte.pushmenu', event => { | $(document).on('shown.lte.pushmenu', event => { | ||||
$('.swh-words-logo-swh').css('visibility', 'hidden'); | $('.swh-words-logo-swh').css('visibility', 'hidden'); | ||||
}); | }); | ||||
Show All 12 Lines | $(`.swh-browse-link`).click(event => { | ||||
} | } | ||||
}); | }); | ||||
// ensure footer do not overflow main content for mobile devices | // ensure footer do not overflow main content for mobile devices | ||||
// or after resizing the browser window | // or after resizing the browser window | ||||
ensureNoFooterOverflow(); | ensureNoFooterOverflow(); | ||||
$(window).resize(function() { | $(window).resize(function() { | ||||
ensureNoFooterOverflow(); | ensureNoFooterOverflow(); | ||||
if ($('body').hasClass('sidebar-collapse') && $('body').width() > 980) { | if ($('body').hasClass('sidebar-collapse') && $('body').width() >= BREAKPOINT_MD) { | ||||
$('.swh-words-logo-swh').css('visibility', 'visible'); | $('.swh-words-logo-swh').css('visibility', 'visible'); | ||||
} | } | ||||
}); | }); | ||||
// activate css polyfill 'object-fit: contain' in old browsers | // activate css polyfill 'object-fit: contain' in old browsers | ||||
objectFitImages(); | objectFitImages(); | ||||
// reparent the modals to the top navigation div in order to be able | // reparent the modals to the top navigation div in order to be able | ||||
// to display them | // to display them | ||||
▲ Show 20 Lines • Show All 125 Lines • Show Last 20 Lines |
You should move this after line 6. Indeed, we backup the state of the sidebar in the localStorage to restore it when visiting the Software Heritage archive website again. Otherwise, I am OK with this fix.