scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-11-10 17:36:33 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #6605 from ivanscinote/SCI-9449-tiny-mce-sticky-header-images-toolbar-issues

Browse source 
Fix TinyMCE headers for prot. templates & reduce animation scroll speed [SCI-9449]
This commit is contained in:
Martin Artnik 2023-11-09 10:34:21 +01:00 committed by GitHub
commit ac27cde82a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
app/javascript/vue/mixins/stackableHeadersMixin.js
View file

@ -83,32 +83,49 @@ export default {
const editorHeader = $('.tox-editor-header');
// For Protocol Templates only reset the left value
// For Protocol Templates
if (!this.headerRef && !this.secondaryNavigation) {
editorHeader.css('left', '');
if (target[0].getBoundingClientRect().top < 0 && editorHeader.css('position') !== 'fixed') {
$('html, body').animate({
scrollTop: target.offset().top - editorHeader.outerHeight(),
}, 100); // 100ms works best for editorHeader to be fully visible
} else {
editorHeader.css('left', '');
}
return;
}
// Handle opening TinyMCE toolbars when only a small bottom area of editor is visible
const targetBottom = target[0].getBoundingClientRect().bottom;
if (targetBottom < 3 * headerHeight) {
$('html, body').animate({
scrollTop: target.offset().top,
}, 800);
this.$nextTick(() => {
if (editorHeader.css('position') === 'fixed') {
editorHeader.css({
top: totalHeight - 1,
left: '',
});
}
$('html, body').animate({
scrollTop: target.offset().top + (visibleHeaderHeight + visibleSecondaryNavHeight),
}, 100);
});
return;
}
const headerBottom = this.headerRef.getBoundingClientRect().bottom;
// Handle showing TinyMCE toolbar for fixed/static position of toolbar
if (editorHeader.css('position') === 'fixed') {
editorHeader.css({
top: totalHeight - 1,
left: '',
});
editorHeader.css('left', '');
if (this.headerSticked) {
editorHeader.css('top', totalHeight - 1);
}
} else if (headerTop < (visibleHeaderHeight + visibleSecondaryNavHeight)
&& target[0].getBoundingClientRect().top <= headerTop) {
$('html, body').animate({
scrollTop: editorHeader.offset().top
}, 800);
&& target[0].getBoundingClientRect().top <= headerBottom) {
this.$nextTick(() => {
$('html, body').animate({
scrollTop: target.offset().top + (visibleHeaderHeight + visibleSecondaryNavHeight),
}, 100);
});
}
target.focus();