scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-01-04 14:44:26 +08:00
Code Issues Projects Releases Packages 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
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) => { $(document).on('click', '.sci--layout--navigator-open', (e) => {
navigatorContainer.$data.navigatorCollapsed = false navigatorContainer.toggleNavigatorState(false);
}); });
$(document).on('click', '.btn', function() { $(document).on('click', '.btn', function() {

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

@ -16,18 +16,26 @@ window.addEventListener('DOMContentLoaded', () => {
}, },
data() { data() {
return { return {
navigatorCollapsed: false,
reloadCurrentLevel: false, reloadCurrentLevel: false,
reloadChildrenLevel: false reloadChildrenLevel: false
} }
}, },
created() { created() {
this.navigatorCollapsed = $('.sci--layout').attr('data-navigator-collapsed');
$(document).on('inlineEditing:fieldUpdated', '.title-row .inline-editing-container', () => { $(document).on('inlineEditing:fieldUpdated', '.title-row .inline-editing-container', () => {
this.reloadCurrentLevel = true; 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: { watch: {
reloadCurrentLevel: function () { reloadCurrentLevel: function () {
if (this.reloadCurrentLevel) { if (this.reloadCurrentLevel) {
@ -42,15 +50,6 @@ window.addEventListener('DOMContentLoaded', () => {
this.reloadChildrenLevel = false; 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-navigator-state-url="<%= navigator_state_navigations_path %>"
data-turbolinks-permanent data-behaviour="vue"> data-turbolinks-permanent data-behaviour="vue">
<navigator-container <navigator-container
@navigator:colapse="navigatorCollapsed = true" @navigator:colapse="toggleNavigatorState(true)"
:reload-current-level="reloadCurrentLevel" :reload-current-level="reloadCurrentLevel"
:reload-children-level="reloadChildrenLevel" :reload-children-level="reloadChildrenLevel"
/> />