scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-21 07:26:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5907 from ivanscinote/SCI-8893-navigator-freezes

Browse source 
Create vue method for toggling navigator state [SCI-8893]
This commit is contained in:
artoscinote 2023-08-21 09:20:29 +02:00 committed by GitHub
parent 28fe2b8a60 b357e3117c
commit 7b3d1b92c5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/packs/application.js
View file

@ -31,7 +31,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() {

23
app/javascript/packs/vue/navigation/navigator.js
View file

@ -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,15 +50,6 @@ 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);
}
}
});

2
app/views/shared/navigation/_navigator.html.erb
View file

@ -8,7 +8,7 @@
data-navigator-state-url="<%= navigator_state_navigations_path %>"
data-turbolinks-permanent data-behaviour="vue">
<navigator-container
@navigator:colapse="navigatorCollapsed = true"
@navigator:colapse="toggleNavigatorState(true)"
:reload-current-level="reloadCurrentLevel"
:reload-children-level="reloadChildrenLevel"
/>