github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-01-27 09:42:00 +00:00
Code Issues Projects Releases Packages Wiki Activity

Reduce calls to jQuery layout() (#7994)

Browse source 
GitOrigin-RevId: 2cfac1e22187bc9f5185724f05f6f92f18c16baa
This commit is contained in:
Alf Eaton 2022-05-20 09:13:06 +01:00 committed by Copybot
parent 7081980ff6
commit 77ac1514fd
1 changed files with 21 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
services/web/frontend/js/ide/directives/layout.js
View file

@ -96,8 +96,8 @@ export default App.directive('layout', ($parse, $compile, ide) => ({
options.east.resizerCursor = 'ew-resize' options.east.resizerCursor = 'ew-resize'
options.west.resizerCursor = 'ew-resize' options.west.resizerCursor = 'ew-resize'
const repositionControls = function () { function repositionControls() {
state = element.layout().readState() state = layout.readState()
if (state.east != null) { if (state.east != null) {
const controls = element.find('> .ui-layout-resizer-controls') const controls = element.find('> .ui-layout-resizer-controls')
if (state.east.initClosed) { if (state.east.initClosed) {
@ -111,11 +111,11 @@ export default App.directive('layout', ($parse, $compile, ide) => ({
} }
} }
const repositionCustomToggler = function () { function repositionCustomToggler() {
if (customTogglerEl == null) { if (customTogglerEl == null) {
return return
} }
state = element.layout().readState() state = layout.readState()
const positionAnchor = customTogglerPane === 'east' ? 'right' : 'left' const positionAnchor = customTogglerPane === 'east' ? 'right' : 'left'
const paneState = state[customTogglerPane] const paneState = state[customTogglerPane]
if (paneState != null) { if (paneState != null) {
@ -126,8 +126,8 @@ export default App.directive('layout', ($parse, $compile, ide) => ({
} }
} }
const resetOpenStates = function () { function resetOpenStates() {
state = element.layout().readState() state = layout.readState()
if (attrs.openEast != null && state.east != null) { if (attrs.openEast != null && state.east != null) {
const openEast = $parse(attrs.openEast) const openEast = $parse(attrs.openEast)
return openEast.assign(scope, !state.east.initClosed) return openEast.assign(scope, !state.east.initClosed)
@ -136,7 +136,7 @@ export default App.directive('layout', ($parse, $compile, ide) => ({
// Someone moved the resizer // Someone moved the resizer
function onInternalResize() { function onInternalResize() {
state = element.layout().readState() state = layout.readState()
scope.$broadcast(`layout:${name}:resize`, state) scope.$broadcast(`layout:${name}:resize`, state)
repositionControls() repositionControls()
if (hasCustomToggler) { if (hasCustomToggler) {
@ -152,23 +152,23 @@ export default App.directive('layout', ($parse, $compile, ide) => ({
attrs.resizeProportionally != null && attrs.resizeProportionally != null &&
scope.$eval(attrs.resizeProportionally) scope.$eval(attrs.resizeProportionally)
) { ) {
const eastState = element.layout().readState().east const eastState = layout.readState().east
if (eastState != null) { if (eastState != null) {
const newInternalWidth = const newInternalWidth =
(eastState.size / oldWidth) * element.width() (eastState.size / oldWidth) * element.width()
oldWidth = element.width() oldWidth = element.width()
element.layout().sizePane('east', newInternalWidth) layout.sizePane('east', newInternalWidth)
return return
} }
} }
ide.$timeout(() => { ide.$timeout(() => {
element.layout().resizeAll() layout.resizeAll()
}) })
} }
element.layout(options) const layout = element.layout(options)
element.layout().resizeAll() layout.resizeAll()
if (attrs.resizeOn != null) { if (attrs.resizeOn != null) {
for (const event of Array.from(attrs.resizeOn.split(','))) { for (const event of Array.from(attrs.resizeOn.split(','))) {
@ -177,7 +177,7 @@ export default App.directive('layout', ($parse, $compile, ide) => ({
} }
if (hasCustomToggler) { if (hasCustomToggler) {
state = element.layout().readState() state = layout.readState()
const customTogglerScope = scope.$new() const customTogglerScope = scope.$new()
customTogglerScope.isOpen = true customTogglerScope.isOpen = true
@ -197,7 +197,7 @@ export default App.directive('layout', ($parse, $compile, ide) => ({
customTogglerScope.tooltipPlacement = customTogglerScope.tooltipPlacement =
customTogglerPane === 'east' ? 'left' : 'right' customTogglerPane === 'east' ? 'left' : 'right'
customTogglerScope.handleClick = function () { customTogglerScope.handleClick = function () {
element.layout().toggle(customTogglerPane) layout.toggle(customTogglerPane)
return repositionCustomToggler() return repositionCustomToggler()
} }
customTogglerEl = $compile(`\ customTogglerEl = $compile(`\
@ -236,7 +236,7 @@ ng-click=\"handleClick()\">\
// If we save sublayouts state (`children`), the layout library will use it when // If we save sublayouts state (`children`), the layout library will use it when
// initializing. This raises errors when the sublayout elements aren't available (due to // initializing. This raises errors when the sublayout elements aren't available (due to
// being loaded at init or just not existing for the current project/user). // being loaded at init or just not existing for the current project/user).
const stateToSave = _.mapValues(element.layout().readState(), pane => const stateToSave = _.mapValues(layout.readState(), pane =>
_.omit(pane, 'children') _.omit(pane, 'children')
) )
ide.localStorage(`layout.${name}`, stateToSave) ide.localStorage(`layout.${name}`, stateToSave)
@ -246,9 +246,9 @@ ng-click=\"handleClick()\">\
scope.$watch(attrs.openEast, function (value, oldValue) { scope.$watch(attrs.openEast, function (value, oldValue) {
if (value != null && value !== oldValue) { if (value != null && value !== oldValue) {
if (value) { if (value) {
element.layout().open('east') layout.open('east')
} else { } else {
element.layout().close('east') layout.close('east')
} }
} }
return setTimeout(() => scope.$digest(), 0) return setTimeout(() => scope.$digest(), 0)
@ -256,11 +256,10 @@ ng-click=\"handleClick()\">\
} }
if (attrs.allowOverflowOn != null) { if (attrs.allowOverflowOn != null) {
const layoutObj = element.layout()
const overflowPane = scope.$eval(attrs.allowOverflowOn) const overflowPane = scope.$eval(attrs.allowOverflowOn)
const overflowPaneEl = layoutObj.panes[overflowPane] const overflowPaneEl = layout.panes[overflowPane]
// Set the panel as overflowing (gives it higher z-index and sets overflow rules) // Set the panel as overflowing (gives it higher z-index and sets overflow rules)
layoutObj.allowOverflow(overflowPane) layout.allowOverflow(overflowPane)
// Read the given z-index value and increment it, so that it's higher than synctex controls. // Read the given z-index value and increment it, so that it's higher than synctex controls.
const overflowPaneZVal = overflowPaneEl.zIndex() const overflowPaneZVal = overflowPaneEl.zIndex()
overflowPaneEl.css('z-index', overflowPaneZVal + 1) overflowPaneEl.css('z-index', overflowPaneZVal + 1)
@ -272,9 +271,9 @@ ng-click=\"handleClick()\">\
if (attrs.layoutDisabled != null) { if (attrs.layoutDisabled != null) {
return scope.$watch(attrs.layoutDisabled, function (value) { return scope.$watch(attrs.layoutDisabled, function (value) {
if (value) { if (value) {
element.layout().hide('east') layout.hide('east')
} else { } else {
element.layout().show('east') layout.show('east')
} }
if (hasCustomToggler) { if (hasCustomToggler) {
return customTogglerEl.scope().$applyAsync(function () { return customTogglerEl.scope().$applyAsync(function () {