From 2d26c70d4091234c0b150af3c691f936e2d223ee Mon Sep 17 00:00:00 2001 From: Ivan Kljun Date: Wed, 2 Aug 2023 16:45:06 +0200 Subject: [PATCH 1/3] Create vue method for toggling navigator state --- app/javascript/packs/application.js | 2 +- .../packs/vue/navigation/navigator.js | 26 +++++++++---------- .../shared/navigation/_navigator.html.erb | 2 +- 3 files changed, 14 insertions(+), 16 deletions(-) diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 80425b88b..877ce8364 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -16,7 +16,7 @@ $(document).on('click', '.sci--layout--menu-item[data-submenu=true]', (e) => { }); $(document).on('click', '.sci--layout--navigator-open', (e) => { - navigatorContainer.$data.navigatorCollapsed = false + navigatorContainer.toggleNavigatorState(false) }); $(document).on('click', '.btn', function() { diff --git a/app/javascript/packs/vue/navigation/navigator.js b/app/javascript/packs/vue/navigation/navigator.js index 204ee3c93..1f56ee771 100644 --- a/app/javascript/packs/vue/navigation/navigator.js +++ b/app/javascript/packs/vue/navigation/navigator.js @@ -16,18 +16,26 @@ window.addEventListener('DOMContentLoaded', () => { }, data() { return { - navigatorCollapsed: false, reloadCurrentLevel: false, reloadChildrenLevel: false } }, created() { - this.navigatorCollapsed = $('.sci--layout').attr('data-navigator-collapsed'); - $(document).on('inlineEditing:fieldUpdated', '.title-row .inline-editing-container', () => { this.reloadCurrentLevel = true; }) }, + methods: { + toggleNavigatorState: function (newNavigatorState) { + let stateUrl = $('#sciNavigationNavigatorContainer').attr('data-navigator-state-url'); + $.post(stateUrl, {state: newNavigatorState ? 'collapsed' : 'open'}); + $('.sci--layout').attr('data-navigator-collapsed', newNavigatorState); + $('body').toggleClass('navigator-collapsed', newNavigatorState); + + // refresh action toolbar width on navigator toggle, take into account transition time of .4s + if (window.actionToolbarComponent) setTimeout(window.actionToolbarComponent.setWidth, 401); + } + }, watch: { reloadCurrentLevel: function () { if (this.reloadCurrentLevel) { @@ -42,18 +50,8 @@ window.addEventListener('DOMContentLoaded', () => { this.reloadChildrenLevel = false; }); } - }, - navigatorCollapsed: function () { - let stateUrl = $('#sciNavigationNavigatorContainer').attr('data-navigator-state-url'); - $('.sci--layout').attr('data-navigator-collapsed', this.navigatorCollapsed); - $('body').toggleClass('navigator-collapsed', this.navigatorCollapsed); - $.post(stateUrl, {state: this.navigatorCollapsed ? 'collapsed' : 'open'}); - - // refresh action toolbar width on navigator toggle, take into account transition time of .4s - if (window.actionToolbarComponent) setTimeout(window.actionToolbarComponent.setWidth, 401); } - } - }); + }}); window.navigatorContainer = navigator }); diff --git a/app/views/shared/navigation/_navigator.html.erb b/app/views/shared/navigation/_navigator.html.erb index 1770192ab..4931c39af 100644 --- a/app/views/shared/navigation/_navigator.html.erb +++ b/app/views/shared/navigation/_navigator.html.erb @@ -8,7 +8,7 @@ data-navigator-state-url="<%= navigator_state_navigations_path %>" data-turbolinks-permanent data-behaviour="vue"> From 0bdbe84d4d59badf1022cfcfe6b25daa889f6c98 Mon Sep 17 00:00:00 2001 From: Ivan Kljun Date: Wed, 2 Aug 2023 17:02:11 +0200 Subject: [PATCH 2/3] Add hound linter suggestions --- app/javascript/packs/application.js | 2 +- app/javascript/packs/vue/navigation/navigator.js | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 877ce8364..ee952a474 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -16,7 +16,7 @@ $(document).on('click', '.sci--layout--menu-item[data-submenu=true]', (e) => { }); $(document).on('click', '.sci--layout--navigator-open', (e) => { - navigatorContainer.toggleNavigatorState(false) + navigatorContainer.toggleNavigatorState(false); }); $(document).on('click', '.btn', function() { diff --git a/app/javascript/packs/vue/navigation/navigator.js b/app/javascript/packs/vue/navigation/navigator.js index 1f56ee771..a05c27b5f 100644 --- a/app/javascript/packs/vue/navigation/navigator.js +++ b/app/javascript/packs/vue/navigation/navigator.js @@ -26,7 +26,7 @@ window.addEventListener('DOMContentLoaded', () => { }) }, methods: { - toggleNavigatorState: function (newNavigatorState) { + toggleNavigatorState: function(newNavigatorState) { let stateUrl = $('#sciNavigationNavigatorContainer').attr('data-navigator-state-url'); $.post(stateUrl, {state: newNavigatorState ? 'collapsed' : 'open'}); $('.sci--layout').attr('data-navigator-collapsed', newNavigatorState); @@ -51,7 +51,8 @@ window.addEventListener('DOMContentLoaded', () => { }); } } - }}); + } + }); window.navigatorContainer = navigator }); From 0c1f47eadadf324e8211744dd5ba110a99e78ede Mon Sep 17 00:00:00 2001 From: Ivan Kljun Date: Mon, 21 Aug 2023 09:09:40 +0200 Subject: [PATCH 3/3] Add hound linter suggestion --- app/javascript/packs/vue/navigation/navigator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/packs/vue/navigation/navigator.js b/app/javascript/packs/vue/navigation/navigator.js index a05c27b5f..c1fe1ec33 100644 --- a/app/javascript/packs/vue/navigation/navigator.js +++ b/app/javascript/packs/vue/navigation/navigator.js @@ -28,7 +28,7 @@ window.addEventListener('DOMContentLoaded', () => { methods: { toggleNavigatorState: function(newNavigatorState) { let stateUrl = $('#sciNavigationNavigatorContainer').attr('data-navigator-state-url'); - $.post(stateUrl, {state: newNavigatorState ? 'collapsed' : 'open'}); + $.post(stateUrl, { state: newNavigatorState ? 'collapsed' : 'open' }); $('.sci--layout').attr('data-navigator-collapsed', newNavigatorState); $('body').toggleClass('navigator-collapsed', newNavigatorState);