From 5a1ae0c35e6643d1b369441ba2c325c70e0a71f2 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 4 Jun 2020 21:06:38 +0300 Subject: [PATCH] Cache selectors when possible. (#2790) --- build/js/CardWidget.js | 22 ++++---- build/js/ControlSidebar.js | 102 ++++++++++++++++++++++--------------- build/js/Layout.js | 33 +++++++----- build/js/PushMenu.js | 32 +++++++----- build/js/Toasts.js | 5 +- build/js/TodoList.js | 6 ++- 6 files changed, 121 insertions(+), 79 deletions(-) diff --git a/build/js/CardWidget.js b/build/js/CardWidget.js index f7ea297a2..924aba78e 100644 --- a/build/js/CardWidget.js +++ b/build/js/CardWidget.js @@ -116,13 +116,15 @@ class CardWidget { width: this._parent.width(), transition: 'all .15s' }).delay(150).queue(function () { - $(this).addClass(ClassName.MAXIMIZED) + const $element = $(this) + + $element.addClass(ClassName.MAXIMIZED) $('html').addClass(ClassName.MAXIMIZED) - if ($(this).hasClass(ClassName.COLLAPSED)) { - $(this).addClass(ClassName.WAS_COLLAPSED) + if ($element.hasClass(ClassName.COLLAPSED)) { + $element.addClass(ClassName.WAS_COLLAPSED) } - $(this).dequeue() + $element.dequeue() }) this._element.trigger($.Event(Event.MAXIMIZED), this._parent) @@ -135,17 +137,19 @@ class CardWidget { this._parent.css('cssText', 'height:' + this._parent[0].style.height + ' !important;' + 'width:' + this._parent[0].style.width + ' !important; transition: all .15s;' ).delay(10).queue(function () { - $(this).removeClass(ClassName.MAXIMIZED) + const $element = $(this) + + $element.removeClass(ClassName.MAXIMIZED) $('html').removeClass(ClassName.MAXIMIZED) - $(this).css({ + $element.css({ height: 'inherit', width: 'inherit' }) - if ($(this).hasClass(ClassName.WAS_COLLAPSED)) { - $(this).removeClass(ClassName.WAS_COLLAPSED) + if ($element.hasClass(ClassName.WAS_COLLAPSED)) { + $element.removeClass(ClassName.WAS_COLLAPSED) } - $(this).dequeue() + $element.dequeue() }) this._element.trigger($.Event(Event.MINIMIZED), this._parent) diff --git a/build/js/ControlSidebar.js b/build/js/ControlSidebar.js index 0435e503d..3444c4f11 100644 --- a/build/js/ControlSidebar.js +++ b/build/js/ControlSidebar.js @@ -69,42 +69,50 @@ class ControlSidebar { // Public collapse() { + const $body = $('body') + const $html = $('html') + // Show the control sidebar if (this._config.controlsidebarSlide) { - $('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE) - $('body').removeClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(300).queue(function () { + $html.addClass(ClassName.CONTROL_SIDEBAR_ANIMATE) + $body.removeClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(300).queue(function () { $(Selector.CONTROL_SIDEBAR).hide() - $('html').removeClass(ClassName.CONTROL_SIDEBAR_ANIMATE) + $html.removeClass(ClassName.CONTROL_SIDEBAR_ANIMATE) $(this).dequeue() }) } else { - $('body').removeClass(ClassName.CONTROL_SIDEBAR_OPEN) + $body.removeClass(ClassName.CONTROL_SIDEBAR_OPEN) } $(this._element).trigger($.Event(Event.COLLAPSED)) } show() { + const $body = $('body') + const $html = $('html') + // Collapse the control sidebar if (this._config.controlsidebarSlide) { - $('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE) + $html.addClass(ClassName.CONTROL_SIDEBAR_ANIMATE) $(Selector.CONTROL_SIDEBAR).show().delay(10).queue(function () { - $('body').addClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(300).queue(function () { - $('html').removeClass(ClassName.CONTROL_SIDEBAR_ANIMATE) + $body.addClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(300).queue(function () { + $html.removeClass(ClassName.CONTROL_SIDEBAR_ANIMATE) $(this).dequeue() }) $(this).dequeue() }) } else { - $('body').addClass(ClassName.CONTROL_SIDEBAR_OPEN) + $body.addClass(ClassName.CONTROL_SIDEBAR_OPEN) } $(this._element).trigger($.Event(Event.EXPANDED)) } toggle() { - const shouldClose = $('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body') - .hasClass(ClassName.CONTROL_SIDEBAR_SLIDE) + const $body = $('body') + const shouldClose = $body.hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || + $body.hasClass(ClassName.CONTROL_SIDEBAR_SLIDE) + if (shouldClose) { // Close the control sidebar this.collapse() @@ -126,14 +134,20 @@ class ControlSidebar { }) $(window).scroll(() => { - if ($('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)) { + const $body = $('body') + const shouldClose = $body.hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || + $body.hasClass(ClassName.CONTROL_SIDEBAR_SLIDE) + + if (shouldClose) { this._fixScrollHeight() } }) } _fixScrollHeight() { - if (!$('body').hasClass(ClassName.LAYOUT_FIXED)) { + const $body = $('body') + + if (!$body.hasClass(ClassName.LAYOUT_FIXED)) { return } @@ -152,11 +166,11 @@ class ControlSidebar { let footerFixed = false if ( - $('body').hasClass(ClassName.NAVBAR_FIXED) || - $('body').hasClass(ClassName.NAVBAR_SM_FIXED) || - $('body').hasClass(ClassName.NAVBAR_MD_FIXED) || - $('body').hasClass(ClassName.NAVBAR_LG_FIXED) || - $('body').hasClass(ClassName.NAVBAR_XL_FIXED) + $body.hasClass(ClassName.NAVBAR_FIXED) || + $body.hasClass(ClassName.NAVBAR_SM_FIXED) || + $body.hasClass(ClassName.NAVBAR_MD_FIXED) || + $body.hasClass(ClassName.NAVBAR_LG_FIXED) || + $body.hasClass(ClassName.NAVBAR_XL_FIXED) ) { if ($(Selector.HEADER).css('position') === 'fixed') { navbarFixed = true @@ -164,47 +178,52 @@ class ControlSidebar { } if ( - $('body').hasClass(ClassName.FOOTER_FIXED) || - $('body').hasClass(ClassName.FOOTER_SM_FIXED) || - $('body').hasClass(ClassName.FOOTER_MD_FIXED) || - $('body').hasClass(ClassName.FOOTER_LG_FIXED) || - $('body').hasClass(ClassName.FOOTER_XL_FIXED) + $body.hasClass(ClassName.FOOTER_FIXED) || + $body.hasClass(ClassName.FOOTER_SM_FIXED) || + $body.hasClass(ClassName.FOOTER_MD_FIXED) || + $body.hasClass(ClassName.FOOTER_LG_FIXED) || + $body.hasClass(ClassName.FOOTER_XL_FIXED) ) { if ($(Selector.FOOTER).css('position') === 'fixed') { footerFixed = true } } + const $controlSidebar = $(Selector.CONTROL_SIDEBAR) + const $controlsidebarContent = $(Selector.CONTROL_SIDEBAR + ', ' + Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT) + if (positions.top === 0 && positions.bottom === 0) { - $(Selector.CONTROL_SIDEBAR).css({ + $controlSidebar.css({ bottom: heights.footer, top: heights.header }) - $(Selector.CONTROL_SIDEBAR + ', ' + Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', heights.window - (heights.header + heights.footer)) + $controlsidebarContent.css('height', heights.window - (heights.header + heights.footer)) } else if (positions.bottom <= heights.footer) { if (footerFixed === false) { - $(Selector.CONTROL_SIDEBAR).css('bottom', heights.footer - positions.bottom) - $(Selector.CONTROL_SIDEBAR + ', ' + Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', heights.window - (heights.footer - positions.bottom)) + $controlSidebar.css('bottom', heights.footer - positions.bottom) + $controlsidebarContent.css('height', heights.window - (heights.footer - positions.bottom)) } else { - $(Selector.CONTROL_SIDEBAR).css('bottom', heights.footer) + $controlSidebar.css('bottom', heights.footer) } } else if (positions.top <= heights.header) { if (navbarFixed === false) { - $(Selector.CONTROL_SIDEBAR).css('top', heights.header - positions.top) - $(Selector.CONTROL_SIDEBAR + ', ' + Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', heights.window - (heights.header - positions.top)) + $controlSidebar.css('top', heights.header - positions.top) + $controlsidebarContent.css('height', heights.window - (heights.header - positions.top)) } else { - $(Selector.CONTROL_SIDEBAR).css('top', heights.header) + $controlSidebar.css('top', heights.header) } } else if (navbarFixed === false) { - $(Selector.CONTROL_SIDEBAR).css('top', 0) - $(Selector.CONTROL_SIDEBAR + ', ' + Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', heights.window) + $controlSidebar.css('top', 0) + $controlsidebarContent.css('height', heights.window) } else { - $(Selector.CONTROL_SIDEBAR).css('top', heights.header) + $controlSidebar.css('top', heights.header) } } _fixHeight() { - if (!$('body').hasClass(ClassName.LAYOUT_FIXED)) { + const $body = $('body') + + if (!$body.hasClass(ClassName.LAYOUT_FIXED)) { return } @@ -217,21 +236,22 @@ class ControlSidebar { let sidebarHeight = heights.window - heights.header if ( - $('body').hasClass(ClassName.FOOTER_FIXED) || - $('body').hasClass(ClassName.FOOTER_SM_FIXED) || - $('body').hasClass(ClassName.FOOTER_MD_FIXED) || - $('body').hasClass(ClassName.FOOTER_LG_FIXED) || - $('body').hasClass(ClassName.FOOTER_XL_FIXED) + $body.hasClass(ClassName.FOOTER_FIXED) || + $body.hasClass(ClassName.FOOTER_SM_FIXED) || + $body.hasClass(ClassName.FOOTER_MD_FIXED) || + $body.hasClass(ClassName.FOOTER_LG_FIXED) || + $body.hasClass(ClassName.FOOTER_XL_FIXED) ) { if ($(Selector.FOOTER).css('position') === 'fixed') { sidebarHeight = heights.window - heights.header - heights.footer } } - $(Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', sidebarHeight) + const $controlSidebar = $(Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT) + $controlSidebar.css('height', sidebarHeight) if (typeof $.fn.overlayScrollbars !== 'undefined') { - $(Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).overlayScrollbars({ + $controlSidebar.overlayScrollbars({ className: this._config.scrollbarTheme, sizeAutoCapable: true, scrollbars: { diff --git a/build/js/Layout.js b/build/js/Layout.js index 9bd101384..a5693b063 100644 --- a/build/js/Layout.js +++ b/build/js/Layout.js @@ -59,9 +59,10 @@ class Layout { // Public fixLayoutHeight(extra = null) { + const $body = $('body') let controlSidebar = 0 - if ($('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || extra === 'control_sidebar') { + if ($body.hasClass(ClassName.CONTROL_SIDEBAR_SLIDE_OPEN) || $body.hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || extra === 'control_sidebar') { controlSidebar = $(Selector.CONTROL_SIDEBAR_CONTENT).height() } @@ -80,26 +81,28 @@ class Layout { offset = 0 } + const $contentSelector = $(Selector.CONTENT) + if (offset !== false) { if (max === heights.controlSidebar) { - $(Selector.CONTENT).css('min-height', (max + offset)) + $contentSelector.css('min-height', (max + offset)) } else if (max === heights.window) { - $(Selector.CONTENT).css('min-height', (max + offset) - heights.header - heights.footer) + $contentSelector.css('min-height', (max + offset) - heights.header - heights.footer) } else { - $(Selector.CONTENT).css('min-height', (max + offset) - heights.header) + $contentSelector.css('min-height', (max + offset) - heights.header) } if (this._isFooterFixed()) { - $(Selector.CONTENT).css('min-height', parseFloat($(Selector.CONTENT).css('min-height')) + heights.footer) + $contentSelector.css('min-height', parseFloat($contentSelector.css('min-height')) + heights.footer) } } - if (!$('body').hasClass(ClassName.LAYOUT_FIXED)) { + if (!$body.hasClass(ClassName.LAYOUT_FIXED)) { return } if (offset !== false) { - $(Selector.CONTENT).css('min-height', (max + offset) - heights.header - heights.footer) + $contentSelector.css('min-height', (max + offset) - heights.header - heights.footer) } if (typeof $.fn.overlayScrollbars !== 'undefined') { @@ -115,13 +118,17 @@ class Layout { } fixLoginRegisterHeight() { - if ($(Selector.LOGIN_BOX + ', ' + Selector.REGISTER_BOX).length === 0) { - $('body, html').css('height', 'auto') - } else { - const boxHeight = $(Selector.LOGIN_BOX + ', ' + Selector.REGISTER_BOX).height() + const $body = $('body') + const $selector = $(Selector.LOGIN_BOX + ', ' + Selector.REGISTER_BOX) - if ($('body').css('min-height') !== boxHeight) { - $('body').css('min-height', boxHeight) + if ($selector.length === 0) { + $body.css('height', 'auto') + $('html').css('height', 'auto') + } else { + const boxHeight = $selector.height() + + if ($body.css('min-height') !== boxHeight) { + $body.css('min-height', boxHeight) } } } diff --git a/build/js/PushMenu.js b/build/js/PushMenu.js index 987695355..4a4340ec6 100644 --- a/build/js/PushMenu.js +++ b/build/js/PushMenu.js @@ -62,13 +62,15 @@ class PushMenu { // Public expand() { + const $bodySelector = $(Selector.BODY) + if (this._options.autoCollapseSize) { if ($(window).width() <= this._options.autoCollapseSize) { - $(Selector.BODY).addClass(ClassName.OPEN) + $bodySelector.addClass(ClassName.OPEN) } } - $(Selector.BODY).addClass(ClassName.IS_OPENING).removeClass(`${ClassName.COLLAPSED} ${ClassName.CLOSED}`) + $bodySelector.addClass(ClassName.IS_OPENING).removeClass(`${ClassName.COLLAPSED} ${ClassName.CLOSED}`) if (this._options.enableRemember) { localStorage.setItem(`remember${EVENT_KEY}`, ClassName.OPEN) @@ -78,13 +80,15 @@ class PushMenu { } collapse() { + const $bodySelector = $(Selector.BODY) + if (this._options.autoCollapseSize) { if ($(window).width() <= this._options.autoCollapseSize) { - $(Selector.BODY).removeClass(ClassName.OPEN).addClass(ClassName.CLOSED) + $bodySelector.removeClass(ClassName.OPEN).addClass(ClassName.CLOSED) } } - $(Selector.BODY).removeClass(ClassName.IS_OPENING).addClass(ClassName.COLLAPSED) + $bodySelector.removeClass(ClassName.IS_OPENING).addClass(ClassName.COLLAPSED) if (this._options.enableRemember) { localStorage.setItem(`remember${EVENT_KEY}`, ClassName.COLLAPSED) @@ -106,14 +110,16 @@ class PushMenu { return } + const $bodySelector = $(Selector.BODY) + if ($(window).width() <= this._options.autoCollapseSize) { - if (!$(Selector.BODY).hasClass(ClassName.OPEN)) { + if (!$bodySelector.hasClass(ClassName.OPEN)) { this.collapse() } } else if (resize === true) { - if ($(Selector.BODY).hasClass(ClassName.OPEN)) { - $(Selector.BODY).removeClass(ClassName.OPEN) - } else if ($(Selector.BODY).hasClass(ClassName.CLOSED)) { + if ($bodySelector.hasClass(ClassName.OPEN)) { + $bodySelector.removeClass(ClassName.OPEN) + } else if ($bodySelector.hasClass(ClassName.CLOSED)) { this.expand() } } @@ -124,23 +130,25 @@ class PushMenu { return } + const $body = $('body') const toggleState = localStorage.getItem(`remember${EVENT_KEY}`) + if (toggleState === ClassName.COLLAPSED) { if (this._options.noTransitionAfterReload) { - $('body').addClass('hold-transition').addClass(ClassName.COLLAPSED).delay(50).queue(function () { + $body.addClass('hold-transition').addClass(ClassName.COLLAPSED).delay(50).queue(function () { $(this).removeClass('hold-transition') $(this).dequeue() }) } else { - $('body').addClass(ClassName.COLLAPSED) + $body.addClass(ClassName.COLLAPSED) } } else if (this._options.noTransitionAfterReload) { - $('body').addClass('hold-transition').removeClass(ClassName.COLLAPSED).delay(50).queue(function () { + $body.addClass('hold-transition').removeClass(ClassName.COLLAPSED).delay(50).queue(function () { $(this).removeClass('hold-transition') $(this).dequeue() }) } else { - $('body').removeClass(ClassName.COLLAPSED) + $body.removeClass(ClassName.COLLAPSED) } } diff --git a/build/js/Toasts.js b/build/js/Toasts.js index d06ff0d12..4884aee55 100644 --- a/build/js/Toasts.js +++ b/build/js/Toasts.js @@ -132,14 +132,15 @@ class Toasts { $(this._getContainerId()).prepend(toast) - $('body').trigger($.Event(Event.CREATED)) + const $body = $('body') + $body.trigger($.Event(Event.CREATED)) toast.toast('show') if (this._config.autoremove) { toast.on('hidden.bs.toast', function () { $(this).delay(200).remove() - $('body').trigger($.Event(Event.REMOVED)) + $body.trigger($.Event(Event.REMOVED)) }) } } diff --git a/build/js/TodoList.js b/build/js/TodoList.js index 667b38d1a..f995bb7e4 100644 --- a/build/js/TodoList.js +++ b/build/js/TodoList.js @@ -69,8 +69,10 @@ class TodoList { // Private _init() { - $(Selector.DATA_TOGGLE).find('input:checkbox:checked').parents('li').toggleClass(ClassName.TODO_LIST_DONE) - $(Selector.DATA_TOGGLE).on('change', 'input:checkbox', event => { + const $toggleSelector = $(Selector.DATA_TOGGLE) + + $toggleSelector.find('input:checkbox:checked').parents('li').toggleClass(ClassName.TODO_LIST_DONE) + $toggleSelector.on('change', 'input:checkbox', event => { this.toggle($(event.target)) }) }