Skip to content
This repository was archived by the owner on Sep 11, 2020. It is now read-only.

Commit 1a309c3

Browse files
linkeschlinkesch
authored
fix buttons and toolbars positions when editor is initialized inside absolute positioned container (#356)
1 parent e39e509 commit 1a309c3

File tree

3 files changed

+145
-54
lines changed

3 files changed

+145
-54
lines changed

‎src/js/core.js‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -469,27 +469,35 @@
469469
Core.prototype.positionButtons = function (activeAddon) {
470470
var $buttons = this.$el.find('.medium-insert-buttons'),
471471
$p = this.$el.find('.medium-insert-active'),
472-
$first = $p.find('figure:first').length ? $p.find('figure:first') : $p,
473-
left, top;
472+
$lastCaption = $p.hasClass('medium-insert-images-grid') ? [] : $p.find('figure:last figcaption'),
473+
elementsContainer = this.getEditor() ? this.getEditor().options.elementsContainer : $('body').get(0),
474+
elementsContainerAbsolute = ['absolute', 'fixed'].indexOf(window.getComputedStyle(elementsContainer).getPropertyValue('position')) > -1,
475+
elementsContainerBoundary = elementsContainerAbsolute ? elementsContainer.getBoundingClientRect() : null,
476+
position = {};
474477

475478
if ($p.length) {
479+
if (activeAddon) {
480+
position.left = $p.offset().left + $p.width() - $buttons.find('.medium-insert-buttons-show').width() - 10;
481+
position.top = $p.offset().top + $p.height() - 20 + ($lastCaption.length ? -$lastCaption.height() - parseInt($lastCaption.css('margin-top'), 10) : 10);
482+
} else {
483+
position.left = $p.offset().left - parseInt($buttons.find('.medium-insert-buttons-addons').css('left'), 10) - parseInt($buttons.find('.medium-insert-buttons-addons button:first').css('margin-left'), 10);
484+
position.top = $p.offset().top;
485+
}
486+
487+
if (elementsContainerAbsolute) {
488+
position.top += elementsContainer.scrollTop - elementsContainerBoundary.top;
489+
position.left -= elementsContainerBoundary.left;
490+
}
476491

477-
left = $p.position().left - parseInt($buttons.find('.medium-insert-buttons-addons').css('left'), 10) - parseInt($buttons.find('.medium-insert-buttons-addons a:first').css('margin-left'), 10);
478-
left = left < 0 ? $p.position().left : left;
479-
top = $p.position().top + parseInt($p.css('margin-top'), 10);
492+
if (this.$el.hasClass('medium-editor-placeholder') === false && position.left < 0) {
493+
position.left = $p.offset().left;
480494

481-
if (activeAddon) {
482-
if ($p.position().left !== $first.position().left) {
483-
left = $first.position().left;
495+
if (elementsContainerAbsolute) {
496+
position.left -= elementsContainerBoundary.left;
484497
}
485-
486-
top += $p.height() + 15; // 15px offset
487498
}
488499

489-
$buttons.css({
490-
left: left,
491-
top: top
492-
});
500+
$buttons.css(position);
493501
}
494502
};
495503

‎src/js/embeds.js‎

Lines changed: 59 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,9 @@
116116
this.$el
117117
.on('paste', $.proxy(this, 'processPasted'));
118118
}
119+
120+
$(window)
121+
.on('resize', $.proxy(this, 'autoRepositionToolbars'));
119122
};
120123

121124
/**
@@ -582,7 +585,7 @@
582585
Embeds.prototype.addToolbar = function () {
583586
var $embed = this.$el.find('.medium-insert-embeds-selected'),
584587
active = false,
585-
$toolbar, $toolbar2, top, mediumEditor, toolbarContainer;
588+
$toolbar, $toolbar2, mediumEditor, toolbarContainer;
586589

587590
if ($embed.length === 0) {
588591
return;
@@ -599,25 +602,6 @@
599602
$toolbar = $('.medium-insert-embeds-toolbar');
600603
$toolbar2 = $('.medium-insert-embeds-toolbar2');
601604

602-
top = $embed.offset().top - $toolbar.height() - 8 - 2 - 5; // 8px - hight of an arrow under toolbar, 2px - height of an embed outset, 5px - distance from an embed
603-
if (top < 0) {
604-
top = 0;
605-
}
606-
607-
$toolbar
608-
.css({
609-
top: top,
610-
left: $embed.offset().left + $embed.width() / 2 - $toolbar.width() / 2
611-
})
612-
.show();
613-
614-
$toolbar2
615-
.css({
616-
top: $embed.offset().top + 2, // 2px - distance from a border
617-
left: $embed.offset().left + $embed.width() - $toolbar2.width() - 4 // 4px - distance from a border
618-
})
619-
.show();
620-
621605
$toolbar.find('button').each(function () {
622606
if ($embed.hasClass('medium-insert-embeds-' + $(this).data('action'))) {
623607
$(this).addClass('medium-editor-button-active');
@@ -628,6 +612,61 @@
628612
if (active === false) {
629613
$toolbar.find('button').first().addClass('medium-editor-button-active');
630614
}
615+
616+
this.repositionToolbars();
617+
$toolbar.fadeIn();
618+
$toolbar2.fadeIn();
619+
};
620+
621+
Embeds.prototype.autoRepositionToolbars = function () {
622+
setTimeout(function () {
623+
this.repositionToolbars();
624+
this.repositionToolbars();
625+
}.bind(this), 0);
626+
};
627+
628+
Embeds.prototype.repositionToolbars = function () {
629+
var $toolbar = $('.medium-insert-embeds-toolbar'),
630+
$toolbar2 = $('.medium-insert-embeds-toolbar2'),
631+
$embed = this.$el.find('.medium-insert-embeds-selected'),
632+
elementsContainer = this.core.getEditor().options.elementsContainer,
633+
elementsContainerAbsolute = ['absolute', 'fixed'].indexOf(window.getComputedStyle(elementsContainer).getPropertyValue('position')) > -1,
634+
elementsContainerBoundary = elementsContainerAbsolute ? elementsContainer.getBoundingClientRect() : null,
635+
containerWidth = $(window).width(),
636+
position = {};
637+
638+
if ($toolbar2.length) {
639+
position.top = $embed.offset().top + 2; // 2px - distance from a border
640+
position.left = $embed.offset().left + $embed.width() - $toolbar2.width() - 4; // 4px - distance from a border
641+
642+
if (elementsContainerAbsolute) {
643+
position.top += elementsContainer.scrollTop - elementsContainerBoundary.top;
644+
position.left -= elementsContainerBoundary.left;
645+
containerWidth = $(elementsContainer).width();
646+
}
647+
648+
if (position.left + $toolbar2.width() > containerWidth) {
649+
position.left = containerWidth - $toolbar2.width();
650+
}
651+
652+
$toolbar2.css(position);
653+
}
654+
655+
if ($toolbar.length) {
656+
position.left = $embed.offset().left + $embed.width() / 2 - $toolbar.width() / 2;
657+
position.top = $embed.offset().top - $toolbar.height() - 8 - 2 - 5; // 8px - hight of an arrow under toolbar, 2px - height of an embed outset, 5px - distance from an embed
658+
659+
if (elementsContainerAbsolute) {
660+
position.top += elementsContainer.scrollTop - elementsContainerBoundary.top;
661+
position.left -= elementsContainerBoundary.left;
662+
}
663+
664+
if (position.top < 0) {
665+
position.top = 0;
666+
}
667+
668+
$toolbar.css(position);
669+
}
631670
};
632671

633672
/**

‎src/js/images.js‎

Lines changed: 64 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,9 @@
145145

146146
this.$el
147147
.on('click', '.medium-insert-images img', $.proxy(this, 'selectImage'));
148+
149+
$(window)
150+
.on('resize', $.proxy(this, 'autoRepositionToolbars'));
148151
};
149152

150153
/**
@@ -591,7 +594,7 @@
591594
active = false,
592595
mediumEditor = this.core.getEditor(),
593596
toolbarContainer = mediumEditor.options.elementsContainer || 'body',
594-
$toolbar, $toolbar2, top;
597+
$toolbar, $toolbar2;
595598

596599
$(toolbarContainer).append(this.templates['src/js/templates/images-toolbar.hbs']({
597600
styles: this.options.styles,
@@ -601,25 +604,6 @@
601604
$toolbar = $('.medium-insert-images-toolbar');
602605
$toolbar2 = $('.medium-insert-images-toolbar2');
603606

604-
top = $image.offset().top - $toolbar.height() - 8 - 2 - 5; // 8px - hight of an arrow under toolbar, 2px - height of an image outset, 5px - distance from an image
605-
if (top < 0) {
606-
top = 0;
607-
}
608-
609-
$toolbar
610-
.css({
611-
top: top,
612-
left: $image.offset().left + $image.width() / 2 - $toolbar.width() / 2
613-
})
614-
.show();
615-
616-
$toolbar2
617-
.css({
618-
top: $image.offset().top + 2, // 2px - distance from a border
619-
left: $image.offset().left + $image.width() - $toolbar2.width() - 4 // 4px - distance from a border
620-
})
621-
.show();
622-
623607
$toolbar.find('button').each(function () {
624608
if ($p.hasClass('medium-insert-images-' + $(this).data('action'))) {
625609
$(this).addClass('medium-editor-button-active');
@@ -630,6 +614,66 @@
630614
if (active === false) {
631615
$toolbar.find('button').first().addClass('medium-editor-button-active');
632616
}
617+
618+
this.repositionToolbars();
619+
620+
$toolbar.fadeIn();
621+
$toolbar2.fadeIn();
622+
};
623+
624+
Images.prototype.autoRepositionToolbars = function () {
625+
setTimeout(function () {
626+
this.repositionToolbars();
627+
this.repositionToolbars();
628+
}.bind(this), 0);
629+
};
630+
631+
Images.prototype.repositionToolbars = function () {
632+
var $toolbar = $('.medium-insert-images-toolbar'),
633+
$toolbar2 = $('.medium-insert-images-toolbar2'),
634+
$image = this.$el.find('.medium-insert-image-active'),
635+
elementsContainer = this.core.getEditor().options.elementsContainer,
636+
elementsContainerAbsolute = ['absolute', 'fixed'].indexOf(window.getComputedStyle(elementsContainer).getPropertyValue('position')) > -1,
637+
elementsContainerBoundary = elementsContainerAbsolute ? elementsContainer.getBoundingClientRect() : null,
638+
containerWidth = $(window).width(),
639+
position = {};
640+
641+
if ($toolbar2.length) {
642+
position.top = $image.offset().top + 2;
643+
position.left = $image.offset().left + $image.width() - $toolbar2.width() - 4; // 4px - distance from a border
644+
645+
if (elementsContainerAbsolute) {
646+
position.top += elementsContainer.scrollTop - elementsContainerBoundary.top;
647+
position.left -= elementsContainerBoundary.left;
648+
containerWidth = $(elementsContainer).width();
649+
}
650+
651+
if (position.left + $toolbar2.width() > containerWidth) {
652+
position.left = containerWidth - $toolbar2.width();
653+
}
654+
655+
$toolbar2.css(position);
656+
}
657+
658+
if ($toolbar.length) {
659+
if ($image.closest('.medium-insert-images-grid-active').length) {
660+
$image = $image.closest('.medium-insert-images-grid-active');
661+
}
662+
663+
position.top = $image.offset().top - $toolbar.height() - 8 - 2 - 5; // 8px - hight of an arrow under toolbar, 2px - height of an image outset, 5px - distance from an image
664+
position.left = $image.offset().left + $image.width() / 2 - $toolbar.width() / 2;
665+
666+
if (elementsContainerAbsolute) {
667+
position.top += elementsContainer.scrollTop - elementsContainerBoundary.top;
668+
position.left -= elementsContainerBoundary.left;
669+
}
670+
671+
if (position.top < 0) {
672+
position.top = 0;
673+
}
674+
675+
$toolbar.css(position);
676+
}
633677
};
634678

635679
/**

0 commit comments

Comments
 (0)